ydb-embedded-ui 4.17.0 → 4.19.0

package/dist/utils/dataFormatters/dataFormatters.ts

@@ -0,0 +1,150 @@
+import {dateTimeParse} from '@gravity-ui/date-utils';
+
+import type {TVDiskID, TVSlotId} from '../../types/api/vdisk';
+import {DAY_IN_SECONDS, GIGABYTE} from '../constants';
+import {configuredNumeral} from '../numeral';
+import {isNumeric} from '../utils';
+import {
+    type BytesSizes,
+    formatBytes as formatBytesCustom,
+    getSizeWithSignificantDigits,
+} from '../bytesParsers/formatBytes';
+
+import i18n from './i18n';
+
+// Here you can't control displayed size and precision
+// If you need more custom format, use formatBytesCustom instead
+export const formatBytes = (bytes?: string | number) => {
+    if (!isNumeric(bytes)) {
+        return '';
+    }
+
+    // by agreement, display byte values in decimal scale
+    return configuredNumeral(bytes).format('0 b');
+};
+
+export const formatBps = (bytes?: string | number) => {
+    const formattedBytes = formatBytes(bytes);
+
+    if (!formattedBytes) {
+        return '';
+    }
+
+    return formattedBytes + '/s';
+};
+
+export const formatBytesToGigabyte = (bytes: number | string) => {
+    return `${Math.floor(Number(bytes) / GIGABYTE)} GB`;
+};
+
+export const stringifyVdiskId = (id?: TVDiskID | TVSlotId) => {
+    return id ? Object.values(id).join('-') : '';
+};
+
+export const getPDiskId = (info: {NodeId?: number; PDiskId?: number}) => {
+    return info.NodeId && info.PDiskId ? `${info.NodeId}-${info.PDiskId}` : undefined;
+};
+
+export const formatUptime = (seconds: number) => {
+    const days = Math.floor(seconds / DAY_IN_SECONDS);
+    const remain = seconds % DAY_IN_SECONDS;
+
+    const uptime = [days && `${days}d`, configuredNumeral(remain).format('00:00:00')]
+        .filter(Boolean)
+        .join(' ');
+
+    return uptime;
+};
+
+export const formatMsToUptime = (ms?: number) => {
+    return ms && formatUptime(ms / 1000);
+};
+
+export const formatStorageValues = (value?: number, total?: number, size?: BytesSizes) => {
+    let calculatedSize = getSizeWithSignificantDigits(Number(value), 0);
+    let valueWithSizeLabel = true;
+    let valuePrecision = 0;
+
+    if (isNumeric(total)) {
+        calculatedSize = getSizeWithSignificantDigits(Number(total), 0);
+        valueWithSizeLabel = false;
+        valuePrecision = 1;
+    }
+
+    const formattedValue = formatBytesCustom({
+        value,
+        withSizeLabel: valueWithSizeLabel,
+        size: size || calculatedSize,
+        precision: valuePrecision,
+    });
+    const formattedTotal = formatBytesCustom({value: total, size: size || calculatedSize});
+
+    return [formattedValue, formattedTotal];
+};
+
+export const formatStorageValuesToGb = (value?: number, total?: number) => {
+    return formatStorageValues(value, total, 'gb');
+};
+
+export const formatNumber = (number?: unknown) => {
+    if (!isNumeric(number)) {
+        return '';
+    }
+
+    return configuredNumeral(number).format('0,0.[00000]');
+};
+
+export const roundToPrecision = (value: number | string, precision = 0) => {
+    let [digits] = String(value).split('.');
+    if (Number(value) < 1) {
+        digits = '';
+    }
+    if (digits.length >= precision) {
+        return Math.round(Number(value));
+    }
+    return Number(Number(value).toFixed(precision - digits.length));
+};
+
+const normalizeCPU = (value: number | string) => {
+    const rawCores = Number(value) / 1000000;
+
+    return roundToPrecision(rawCores, 3);
+};
+
+export const formatCPU = (value?: number | string) => {
+    if (value === undefined) {
+        return undefined;
+    }
+
+    return configuredNumeral(normalizeCPU(value)).format('0.[000]');
+};
+
+export const formatCPUWithLabel = (value?: number) => {
+    if (value === undefined) {
+        return undefined;
+    }
+    const cores = normalizeCPU(value);
+    const localizedCores = configuredNumeral(cores).format('0.[000]');
+
+    return `${localizedCores} ${i18n('format-cpu.cores', {count: cores})}`;
+};
+
+export const formatDateTime = (value?: number | string) => {
+    if (!isNumeric(value)) {
+        return '';
+    }
+
+    const formattedData = dateTimeParse(Number(value))?.format('YYYY-MM-DD HH:mm');
+
+    return Number(value) > 0 && formattedData ? formattedData : 'N/A';
+};
+
+export const calcUptimeInSeconds = (milliseconds: number | string) => {
+    const currentDate = new Date();
+    const diff = currentDate.getTime() - Number(milliseconds);
+    return diff <= 0 ? 0 : diff / 1000;
+};
+
+export const calcUptime = (milliseconds?: number | string) => {
+    return formatUptime(calcUptimeInSeconds(Number(milliseconds)));
+};

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

@@ -0,0 +1,3 @@
+{
+  "format-cpu.cores": ["core", "cores", "cores", "cores"]
+}

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

@@ -0,0 +1,3 @@
+{
+  "format-cpu.cores": ["ядро", "ядра", "ядер", "ядер"]
+}

package/dist/utils/index.js

@@ -1,105 +1,3 @@
-import {dateTimeParse} from '@gravity-ui/date-utils';
-
-import {MEGABYTE, TERABYTE, GIGABYTE, DAY_IN_SECONDS} from './constants';
-import {isNumeric} from './utils';
-import {configuredNumeral} from './numeral';
-
-// Here you can't control displayed size and precision
-// If you need more custom format, use formatBytesCustom instead
-export const formatBytes = (bytes) => {
-    if (!isNumeric(bytes)) {
-        return '';
-    }
-
-    // by agreement, display byte values in decimal scale
-    return configuredNumeral(bytes).format('0 b');
-};
-
-export const formatBps = (bytes) => {
-    const formattedBytes = formatBytes(bytes);
-
-    if (!formattedBytes) {
-        return '';
-    }
-
-    return formattedBytes + '/s';
-};
-
-export const formatBytesToGigabyte = (bytes) => {
-    return `${Math.floor(bytes / GIGABYTE)} GB`;
-};
-
-export const stringifyVdiskId = (id) => {
-    return Object.values(id).join('-');
-};
-export const getPDiskId = (info) => {
-    return `${info.NodeId}-${info.PDiskId}`;
-};
-
-export const formatUptime = (seconds) => {
-    const days = Math.floor(seconds / DAY_IN_SECONDS);
-    const remain = seconds % DAY_IN_SECONDS;
-
-    const uptime = [days && `${days}d`, configuredNumeral(remain).format('00:00:00')]
-        .filter(Boolean)
-        .join(' ');
-
-    return uptime;
-};
-
-export const formatMsToUptime = (ms) => {
-    return formatUptime(ms / 1000);
-};
-
-export const formatIOPS = (value, capacity) => {
-    return [Math.floor(value), Math.floor(capacity) + ' IOPS'];
-};
-
-export const formatStorageValues = (value, total) => {
-    return [Math.floor(value / TERABYTE), `${Math.floor(total / TERABYTE)} TB`];
-};
-export const formatStorageValuesToGb = (value, total) => {
-    return [Math.floor(value / 1000000000), `${Math.floor(total / 1000000000)} GB`];
-};
-
-export const formatThroughput = (value, total) => {
-    return [(value / MEGABYTE).toFixed(2), (total / MEGABYTE).toFixed(1) + ' MB/s'];
-};
-
-export const formatNumber = (number) => {
-    if (!isNumeric(number)) {
-        return '';
-    }
-
-    return configuredNumeral(number).format();
-};
-
-export const formatCPU = (value) => {
-    if (!isNumeric(value)) {
-        return '';
-    }
-
-    return configuredNumeral(value / 1000000).format('0.00');
-};
-
-export const formatDateTime = (value) => {
-    if (!isNumeric(value)) {
-        return '';
-    }
-
-    return value > 0 ? dateTimeParse(Number(value)).format('YYYY-MM-DD HH:mm') : 'N/A';
-};
-
-export const calcUptimeInSeconds = (milliseconds) => {
-    const currentDate = new Date();
-    const diff = currentDate - Number(milliseconds);
-    return diff <= 0 ? 0 : diff / 1000;
-};
-
-export const calcUptime = (milliseconds) => {
-    return formatUptime(calcUptimeInSeconds(milliseconds));
-};
-
 // determine how many nodes have status Connected "true"
 export const getConnectedNodesCount = (nodeStateInfo) => {
     return nodeStateInfo?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);

package/package.json

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

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import './ProgressViewer.scss';
-import PropTypes from 'prop-types';
-const b = cn('progress-viewer');
-/*
-
-Описание props:
-1) value - величина прогресса
-2) capacity - предельно возможный прогресс
-3) formatValues - функция форматирования value и capacity
-4) percents - отображать ли заполненость в виде процентов
-5) className - кастомный класс
-6) colorizeProgress - менять ли цвет полосы прогресса в зависимости от его величины
-7) inverseColorize - инвертировать ли цвета при разукрашивании прогресса
-*/
-export class ProgressViewer extends React.Component {
-    static propTypes = {
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        capacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        formatValues: PropTypes.func,
-        percents: PropTypes.bool,
-        className: PropTypes.string,
-        size: PropTypes.oneOf(['xs', 's', 'ns', 'm', 'n', 'l', 'head']),
-        colorizeProgress: PropTypes.bool,
-        inverseColorize: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        size: 'xs',
-        colorizeProgress: false,
-        capacity: 100,
-        inverseColorize: false,
-    };
-
-    render() {
-        const {
-            value,
-            capacity,
-            formatValues,
-            percents,
-            size,
-            className,
-            colorizeProgress,
-            inverseColorize,
-        } = this.props;
-
-        let fillWidth = Math.round((parseFloat(value) / parseFloat(capacity)) * 100);
-        fillWidth = fillWidth > 100 ? 100 : fillWidth;
-
-        let valueText = Math.round(value),
-            capacityText = capacity,
-            divider = '/';
-        if (formatValues) {
-            [valueText, capacityText] = formatValues(value, capacity);
-        } else if (percents) {
-            valueText = fillWidth + '%';
-            capacityText = '';
-            divider = '';
-        }
-
-        let bg = inverseColorize ? 'scarlet' : 'apple';
-        if (colorizeProgress) {
-            if (fillWidth > 60 && fillWidth <= 80) {
-                bg = 'saffron';
-            } else if (fillWidth > 80) {
-                bg = inverseColorize ? 'apple' : 'scarlet';
-            }
-        }
-
-        const lineStyle = {
-            width: fillWidth + '%',
-        };
-
-        const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
-
-        if (!isNaN(fillWidth)) {
-            return (
-                <div className={b({size}, className)}>
-                    <div className={b('line', {bg})} style={lineStyle}></div>
-                    <span className={b('text', {text})}>
-                        {`${valueText} ${divider} ${capacityText}`}
-                    </span>
-                </div>
-            );
-        }
-
-        return <div className={`${b({size})} ${className} error`}>no data</div>;
-    }
-}
-
-export default ProgressViewer;

package/dist/utils/formatCPU/formatCPU.ts

@@ -1,20 +0,0 @@
-import {configuredNumeral} from '../numeral';
-import i18n from './i18n';
-
-export const formatCPU = (value?: number) => {
-    if (value === undefined) {
-        return undefined;
-    }
-
-    const rawCores = value / 1000000;
-    let cores = rawCores.toPrecision(3);
-    if (rawCores >= 1000) {
-        cores = rawCores.toFixed();
-    }
-    if (rawCores < 0.001) {
-        cores = '0';
-    }
-    const localizedCores = configuredNumeral(Number(cores)).format('0.[000]');
-
-    return `${localizedCores} ${i18n('cores', {count: cores})}`;
-};

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

@@ -1,3 +0,0 @@
-{
-  "cores": ["core", "cores", "cores", "cores"]
-}

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

@@ -1,3 +0,0 @@
-{
-  "cores": ["ядро", "ядра", "ядер", "ядер"]
-}