ydb-embedded-ui 4.16.2 → 4.18.0

package/dist/utils/constants.ts

@@ -88,6 +88,8 @@ export const LANGUAGE_KEY = 'language';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
 export const ENABLE_ADDITIONAL_QUERY_MODES = 'enableAdditionalQueryModes';
+// Remain key name "enableNewTenantDiagnosticsDesign" for backward compatibility
+export const DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS = 'enableNewTenantDiagnosticsDesign';
 export const SAVED_QUERIES_KEY = 'saved_queries';
 export const ASIDE_HEADER_COMPACT_KEY = 'asideHeaderCompact';
 export const QUERIES_HISTORY_KEY = 'queries_history';

package/dist/utils/dataFormatters/dataFormatters.ts

@@ -0,0 +1,128 @@
+import {dateTimeParse} from '@gravity-ui/date-utils';
+
+import type {TVDiskID, TVSlotId} from '../../types/api/vdisk';
+import {DAY_IN_SECONDS, GIGABYTE, TERABYTE} from '../constants';
+import {configuredNumeral} from '../numeral';
+import {isNumeric} from '../utils';
+
+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) => {
+    return [
+        value ? String(Math.floor(value / TERABYTE)) : undefined,
+        total ? `${Math.floor(total / TERABYTE)} TB` : undefined,
+    ];
+};
+export const formatStorageValuesToGb = (value?: number, total?: number): (string | undefined)[] => {
+    return [
+        value ? String(Math.floor(value / 1000000000)) : undefined,
+        total ? `${Math.floor(total / 1000000000)} GB` : undefined,
+    ];
+};
+
+export const formatNumber = (number?: unknown) => {
+    if (!isNumeric(number)) {
+        return '';
+    }
+
+    return configuredNumeral(number).format();
+};
+
+const normalizeCPU = (value: number | string) => {
+    const rawCores = Number(value) / 1000000;
+    let cores = rawCores.toPrecision(3);
+    if (rawCores >= 1000) {
+        cores = rawCores.toFixed();
+    }
+    if (rawCores < 0.001) {
+        cores = '0';
+    }
+
+    return Number(cores);
+};
+
+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/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-format-cpu';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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.16.2",
+  "version": "4.18.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;