ydb-embedded-ui 4.9.0 → 4.10.1

package/dist/utils/bytesParsers/convertBytesObjectToSpeed.ts

@@ -2,7 +2,7 @@ import type {MultipleWindowsStat} from '../../types/api/consumer';
 
 import {DAY_IN_SECONDS, HOUR_IN_SECONDS, MINUTE_IN_SECONDS} from '../constants';
 
-export interface IProcessSpeedStats {
+export interface ProcessSpeedStats {
     perMinute: number;
     perHour: number;
     perDay: number;
@@ -14,7 +14,7 @@ export interface IProcessSpeedStats {
  */
 export const convertBytesObjectToSpeed = (
     data: MultipleWindowsStat | undefined,
-): IProcessSpeedStats => {
+): ProcessSpeedStats => {
     return {
         perMinute:
             data && data.per_minute ? Math.round(Number(data.per_minute) / MINUTE_IN_SECONDS) : 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/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/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/package.json

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

package/dist/assets/icons/versions.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.625 13.0156C8.625 13.2695 8.47266 13.498 8.24414 13.5742C8.04102 13.6758 7.76172 13.6504 7.58398 13.4727L5.55273 11.6445C5.42578 11.543 5.375 11.3652 5.375 11.1875C5.375 11.0352 5.42578 10.8574 5.55273 10.7559L7.58398 8.92773C7.76172 8.75 8.04102 8.72461 8.24414 8.82617C8.47266 8.90234 8.625 9.13086 8.625 9.35938V10.5781H9.03125C10.0215 10.5781 10.8594 9.76562 10.8594 8.75V4.61133C10.0215 4.35742 9.4375 3.57031 9.4375 2.65625C9.4375 1.53906 10.3262 0.625 11.4688 0.625C12.5859 0.625 13.5 1.53906 13.5 2.65625C13.5 3.57031 12.8906 4.35742 12.0781 4.61133V8.75C12.0781 10.4512 10.707 11.7969 9.03125 11.7969H8.625V13.0156ZM12.2812 2.65625C12.2812 2.22461 11.9004 1.84375 11.4688 1.84375C11.0117 1.84375 10.6562 2.22461 10.6562 2.65625C10.6562 3.11328 11.0117 3.46875 11.4688 3.46875C11.9004 3.46875 12.2812 3.11328 12.2812 2.65625ZM5.375 1.23438C5.375 1.00586 5.50195 0.777344 5.73047 0.701172C5.93359 0.599609 6.21289 0.625 6.39062 0.802734L8.42188 2.63086C8.54883 2.73242 8.625 2.91016 8.625 3.0625C8.625 3.24023 8.54883 3.41797 8.42188 3.51953L6.39062 5.34766C6.21289 5.52539 5.93359 5.55078 5.73047 5.44922C5.50195 5.37305 5.375 5.14453 5.375 4.89062V3.67188H4.96875C3.95312 3.67188 3.14062 4.50977 3.14062 5.5V9.66406C3.95312 9.91797 4.5625 10.7051 4.5625 11.5938C4.5625 12.7363 3.64844 13.625 2.53125 13.625C1.38867 13.625 0.5 12.7363 0.5 11.5938C0.5 10.7051 1.08398 9.91797 1.92188 9.66406V5.5C1.92188 3.82422 3.26758 2.45312 4.96875 2.45312H5.375V1.23438ZM1.71875 11.5938C1.71875 12.0508 2.07422 12.4062 2.53125 12.4062C2.96289 12.4062 3.34375 12.0508 3.34375 11.5938C3.34375 11.1621 2.96289 10.7812 2.53125 10.7812C2.07422 10.7812 1.71875 11.1621 1.71875 11.5938Z"/>
-</svg>

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;