ydb-embedded-ui 4.8.2 → 4.10.0

package/dist/utils/bytesParsers/formatBytes.ts

@@ -0,0 +1,132 @@
+import {formatNumber} from '..';
+import {GIGABYTE, KILOBYTE, MEGABYTE, TERABYTE} from '../constants';
+import {isNumeric} from '../utils';
+
+import i18n from './i18n';
+
+const sizes = {
+    b: {
+        value: 1,
+        label: i18n('b'),
+    },
+    kb: {
+        value: KILOBYTE,
+        label: i18n('kb'),
+    },
+    mb: {
+        value: MEGABYTE,
+        label: i18n('mb'),
+    },
+    gb: {
+        value: GIGABYTE,
+        label: i18n('gb'),
+    },
+    tb: {
+        value: TERABYTE,
+        label: i18n('tb'),
+    },
+};
+
+export type BytesSizes = keyof typeof sizes;
+
+/**
+ * This function is needed to keep more than 3 digits of the same size.
+ *
+ * @param significantDigits - number of digits above 3
+ * @returns size to format value to get required number of digits
+ *
+ * By default value converted to the next size when it's above 1000,
+ * so we have 900mb and 1gb. To extend it additional significantDigits could be set
+ *
+ * significantDigits value added above default 3
+ *
+ * significantDigits = 1 - 9 000 mb and 10 gb
+ *
+ * significantDigits = 2 - 90 000 mb and 100 gb
+ *
+ * significantDigits = 3 - 900 000 mb and 1000 gb
+ */
+const getSizeWithSignificantDigits = (value: number, significantDigits: number) => {
+    const multiplier = 10 ** significantDigits;
+
+    const tbLevel = sizes.tb.value * multiplier;
+    const gbLevel = sizes.gb.value * multiplier;
+    const mbLevel = sizes.mb.value * multiplier;
+    const kbLevel = sizes.kb.value * multiplier;
+
+    let size: BytesSizes = 'b';
+
+    if (value >= kbLevel) {
+        size = 'kb';
+    }
+    if (value >= mbLevel) {
+        size = 'mb';
+    }
+    if (value >= gbLevel) {
+        size = 'gb';
+    }
+    if (value >= tbLevel) {
+        size = 'tb';
+    }
+
+    return size;
+};
+
+interface FormatToSizeArgs {
+    value: number;
+    size?: BytesSizes;
+    precision?: number;
+}
+
+const formatToSize = ({value, size = 'mb', precision = 0}: FormatToSizeArgs) => {
+    const result = (Number(value) / sizes[size].value).toFixed(precision);
+
+    return formatNumber(result);
+};
+
+const addSizeLabel = (result: string, size: BytesSizes) => {
+    return result + ` ${sizes[size].label}`;
+};
+
+const addSpeedLabel = (result: string, size: BytesSizes) => {
+    return addSizeLabel(result, size) + i18n('perSecond');
+};
+
+export type FormatBytesArgs = Omit<FormatToSizeArgs, 'value'> & {
+    value: number | string | undefined | null;
+    withSpeedLabel?: boolean;
+    withSizeLabel?: boolean;
+    significantDigits?: number;
+};
+
+/**
+ * @param significantDigits - number of digits above 3
+ */
+export const formatBytes = ({
+    value,
+    size,
+    withSpeedLabel = false,
+    withSizeLabel = true,
+    significantDigits = 0,
+    ...params
+}: FormatBytesArgs) => {
+    if (!isNumeric(value)) {
+        return '';
+    }
+
+    const numValue = Number(value);
+
+    const sizeToConvert = size ?? getSizeWithSignificantDigits(numValue, significantDigits);
+
+    const result = formatToSize({value: numValue, size: sizeToConvert, ...params});
+
+    if (withSpeedLabel) {
+        return addSpeedLabel(result, sizeToConvert);
+    }
+
+    if (withSizeLabel) {
+        return addSizeLabel(result, sizeToConvert);
+    }
+
+    return result;
+};

package/dist/utils/bytesParsers/i18n/en.json

@@ -3,5 +3,6 @@
   "kb": "KB",
   "mb": "MB",
   "gb": "GB",
+  "tb": "TB",
   "perSecond": "/s"
 }

package/dist/utils/bytesParsers/i18n/ru.json

@@ -3,5 +3,6 @@
   "kb": "КБ",
   "mb": "МБ",
   "gb": "ГБ",
+  "tb": "ТБ",
   "perSecond": "/с"
 }

package/dist/utils/bytesParsers/index.ts

@@ -1,2 +1,2 @@
-export * from './formatBytesCustom';
+export * from './formatBytes';
 export * from './convertBytesObjectToSpeed';

package/dist/utils/constants.ts

@@ -105,6 +105,7 @@ export const DEFAULT_TABLE_SETTINGS = {
 } as const;
 
 export const QUERY_INITIAL_MODE_KEY = 'query_initial_mode';
+export const LAST_USED_QUERY_ACTION_KEY = 'last_used_query_action';
 
 export const PARTITIONS_HIDDEN_COLUMNS_KEY = 'partitionsHiddenColumns';
 

package/dist/utils/index.js

@@ -1,13 +1,8 @@
-import numeral from 'numeral';
-import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
-
 import {dateTimeParse} from '@gravity-ui/date-utils';
 
-import {i18n} from './i18n';
 import {MEGABYTE, TERABYTE, GIGABYTE, DAY_IN_SECONDS} from './constants';
 import {isNumeric} from './utils';
-
-numeral.locale(i18n.lang);
+import {configuredNumeral} from './numeral';
 
 // Here you can't control displayed size and precision
 // If you need more custom format, use formatBytesCustom instead
@@ -17,7 +12,7 @@ export const formatBytes = (bytes) => {
     }
 
     // by agreement, display byte values in decimal scale
-    return numeral(bytes).format('0 b');
+    return configuredNumeral(bytes).format('0 b');
 };
 
 export const formatBps = (bytes) => {
@@ -45,7 +40,7 @@ export const formatUptime = (seconds) => {
     const days = Math.floor(seconds / DAY_IN_SECONDS);
     const remain = seconds % DAY_IN_SECONDS;
 
-    const uptime = [days && `${days}d`, numeral(remain).format('00:00:00')]
+    const uptime = [days && `${days}d`, configuredNumeral(remain).format('00:00:00')]
         .filter(Boolean)
         .join(' ');
 
@@ -76,7 +71,7 @@ export const formatNumber = (number) => {
         return '';
     }
 
-    return numeral(number).format();
+    return configuredNumeral(number).format();
 };
 
 export const formatCPU = (value) => {
@@ -84,7 +79,7 @@ export const formatCPU = (value) => {
         return '';
     }
 
-    return numeral(value / 1000000).format('0.00');
+    return configuredNumeral(value / 1000000).format('0.00');
 };
 
 export const formatDateTime = (value) => {

package/dist/utils/nodes.ts

@@ -1,6 +1,6 @@
 import type {TSystemStateInfo} from '../types/api/nodes';
 import type {TNodeInfo} from '../types/api/nodesList';
-import type {INodesPreparedEntity} from '../types/store/nodes';
+import type {NodesPreparedEntity} from '../store/reducers/nodes/types';
 import type {NodesMap} from '../types/store/nodesList';
 import {EFlag} from '../types/api/enums';
 
@@ -14,7 +14,7 @@ export const NodesUptimeFilterTitles = {
     [NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
 };
 
-export const isUnavailableNode = (node: INodesPreparedEntity | TSystemStateInfo) =>
+export const isUnavailableNode = (node: NodesPreparedEntity | TSystemStateInfo) =>
     !node.SystemState || node.SystemState === EFlag.Grey;
 
 export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints'>;

package/dist/utils/numeral.ts

@@ -0,0 +1,8 @@
+import numeral from 'numeral';
+import 'numeral/locales'; // Without this numeral will throw an error when using not 'en' locale
+
+import {i18n} from './i18n';
+
+numeral.locale(i18n.lang);
+
+export const configuredNumeral = numeral;

package/dist/utils/query.ts

@@ -9,6 +9,18 @@ import type {
 } from '../types/api/query';
 import type {IQueryResult} from '../types/store/query';
 
+export const QUERY_ACTIONS = {
+    execute: 'execute',
+    explain: 'explain',
+} as const;
+
+export const QUERY_MODES = {
+    scan: 'scan',
+    script: 'script',
+    data: 'data',
+    query: 'query',
+} as const;
+
 // eslint-disable-next-line complexity
 export const getColumnType = (type: string) => {
     switch (type.replace(/\?$/, '')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.8.2",
+  "version": "4.10.0",
   "files": [
     "dist"
   ],

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -1,89 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-
-import InfoViewer from '../InfoViewer/InfoViewer';
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
-import {PoolUsage} from '../PoolUsage/PoolUsage';
-
-import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
-import {calcUptime} from '../../utils';
-
-import './FullNodeViewer.scss';
-
-const b = cn('full-node-viewer');
-
-class FullNodeViewer extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        node: PropTypes.object.isRequired,
-        backend: PropTypes.string,
-        singleClusterMode: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    render() {
-        const {node, className} = this.props;
-
-        const endpointsInfo = node.Endpoints?.map(({Name, Address}) => ({
-            label: Name,
-            value: Address,
-        }));
-
-        const commonInfo = [
-            {label: 'Version', value: node.Version},
-            {label: 'Uptime', value: calcUptime(node.StartTime)},
-            {label: 'DC', value: node.DataCenterDescription},
-            {label: 'Rack', value: node.Rack},
-        ];
-
-        const averageInfo = node.LoadAverage.map((load, loadIndex) => ({
-            label: LOAD_AVERAGE_TIME_INTERVALS[`${loadIndex}`],
-            value: <ProgressViewer value={load} percents={true} colorizeProgress={true} />,
-        }));
-
-        return (
-            <div className={`${b()} ${className}`}>
-                {node ? (
-                    <div className={b('common-info')}>
-                        <div>
-                            <div className={b('section-title')}>Pools</div>
-                            <div className={b('section', {pools: true})}>
-                                {node.PoolStats.map((pool, poolIndex) => (
-                                    <PoolUsage key={poolIndex} data={pool} />
-                                ))}
-                            </div>
-                        </div>
-
-                        {endpointsInfo && endpointsInfo.length && (
-                            <InfoViewer
-                                title="Endpoints"
-                                className={b('section')}
-                                info={endpointsInfo}
-                            />
-                        )}
-
-                        <InfoViewer
-                            title="Common info"
-                            className={b('section')}
-                            info={commonInfo}
-                        />
-
-                        <InfoViewer
-                            title="Load average"
-                            className={b('section', {average: true})}
-                            info={averageInfo}
-                        />
-                    </div>
-                ) : (
-                    <div className="error">no data</div>
-                )}
-            </div>
-        );
-    }
-}
-
-export default FullNodeViewer;

package/dist/containers/Node/NodeOverview/NodeOverview.tsx

@@ -1,21 +0,0 @@
-
-//@ts-ignore
-import FullNodeViewer from '../../../components/FullNodeViewer/FullNodeViewer';
-import {backend} from '../../../store';
-
-interface NodeOverviewProps {
-    node: any;
-    className?: string;
-}
-
-function NodeOverview({node, className}: NodeOverviewProps) {
-    return (
-        <FullNodeViewer
-            node={node}
-            backend={backend}
-            className={className}
-        />
-    );
-}
-
-export default NodeOverview;