ydb-embedded-ui 4.9.0 → 4.10.0

package/dist/store/reducers/tenants/utils.ts

@@ -0,0 +1,68 @@
+import type {TTenant} from '../../../types/api/tenant';
+import {isNumeric} from '../../../utils/utils';
+
+const getControlPlaneValue = (tenant: TTenant) => {
+    const parts = tenant.Name.split('/');
+    const defaultValue = parts.length ? parts[parts.length - 1] : '—';
+    const controlPlaneName = tenant.ControlPlane?.name;
+
+    return controlPlaneName ?? defaultValue;
+};
+
+const getTenantBackend = (tenant: TTenant) => {
+    const node = tenant.Nodes ? tenant.Nodes[0] : {};
+    const address =
+        node.Host && node.Endpoints
+            ? node.Endpoints.find((endpoint) => endpoint.Name === 'http-mon')?.Address
+            : undefined;
+    return node.Host ? `${node.Host}${address ? address : ''}` : undefined;
+};
+
+const calculateTenantMetrics = (tenant: TTenant) => {
+    const {CoresUsed, MemoryUsed, StorageAllocatedSize, Metrics = {}} = tenant;
+
+    const cpuFromCores = isNumeric(CoresUsed) ? Number(CoresUsed) * 1_000_000 : undefined;
+    const cpuFromMetrics = isNumeric(Metrics.CPU) ? Number(Metrics.CPU) : undefined;
+
+    const cpu = cpuFromCores ?? cpuFromMetrics ?? 0;
+
+    const rawMemory = MemoryUsed ?? Metrics.Memory;
+    const rawStorage = StorageAllocatedSize ?? Metrics.Storage;
+
+    const memory = isNumeric(rawMemory) ? Number(rawMemory) : 0;
+    const storage = isNumeric(rawStorage) ? Number(rawStorage) : 0;
+
+    return {cpu, memory, storage};
+};
+
+const calculateTenantEntities = (tenant: TTenant) => {
+    const {StorageGroups, NodeIds} = tenant;
+
+    const nodesCount = NodeIds?.length ?? 0;
+    const groupsCount = isNumeric(StorageGroups) ? Number(StorageGroups) : 0;
+
+    return {nodesCount, groupsCount};
+};
+
+export const prepareTenants = (tenants: TTenant[], useNodeAsBackend: boolean) => {
+    return tenants.map((tenant) => {
+        const backend = useNodeAsBackend ? getTenantBackend(tenant) : undefined;
+        const sharedTenantName = tenants.find((item) => item.Id === tenant.ResourceId)?.Name;
+        const controlPlaneName = getControlPlaneValue(tenant);
+        const {cpu, memory, storage} = calculateTenantMetrics(tenant);
+        const {nodesCount, groupsCount} = calculateTenantEntities(tenant);
+
+        return {
+            ...tenant,
+
+            backend,
+            sharedTenantName,
+            controlPlaneName,
+            cpu,
+            memory,
+            storage,
+            nodesCount,
+            groupsCount,
+        };
+    });
+};

package/dist/types/additionalProps.ts

@@ -1,4 +1,7 @@
+import type {ReactNode} from 'react';
+
 import type {InfoViewerItem} from '../components/InfoViewer';
+import type {ETenantType} from './api/tenant';
 import type {VersionToColorMap} from './versions';
 
 export interface AdditionalVersionsProps {
@@ -14,3 +17,8 @@ export interface AdditionalClusterProps {
     info?: InfoViewerItem[];
     links?: ClusterLink[];
 }
+
+export interface AdditionalTenantsProps {
+    prepareTenantBackend?: (backend: string | undefined) => string | undefined;
+    getMonitoringLink?: (name: string, type: ETenantType) => ReactNode;
+}

package/dist/types/api/storage.ts

@@ -57,7 +57,7 @@ export interface TBSGroupStateInfo {
     Encryption?: boolean;
 }
 
-interface THiveStorageGroupStats {
+export interface THiveStorageGroupStats {
     GroupID?: number;
     /** uint64 */
     AcquiredUnits?: string;

package/dist/types/store/topic.ts

@@ -1,12 +1,12 @@
 import {FETCH_TOPIC, cleanTopicData, setDataWasNotLoaded} from '../../store/reducers/topic';
 import type {ApiRequestAction} from '../../store/utils';
-import type {IProcessSpeedStats} from '../../utils/bytesParsers';
+import type {ProcessSpeedStats} from '../../utils/bytesParsers';
 import type {IResponseError} from '../api/error';
 import type {DescribeTopicResult} from '../api/topic';
 
 export interface IPreparedConsumerData {
     name: string | undefined;
-    readSpeed: IProcessSpeedStats;
+    readSpeed: ProcessSpeedStats;
 
     writeLag: number;
     readLag: number;
@@ -19,7 +19,7 @@ export interface IPreparedTopicStats {
     partitionsWriteLag: number;
     partitionsIdleTime: number;
 
-    writeSpeed: IProcessSpeedStats;
+    writeSpeed: ProcessSpeedStats;
 }
 
 export interface ITopicState {

package/dist/utils/bytesParsers/__test__/formatBytes.test.ts

@@ -0,0 +1,38 @@
+import {formatBytes} from '../formatBytes';
+
+describe('formatBytes', () => {
+    it('should work with only value', () => {
+        expect(formatBytes({value: 100})).toBe('100 B');
+        expect(formatBytes({value: 100_000})).toBe('100 KB');
+        expect(formatBytes({value: 100_000_000})).toBe('100 MB');
+        expect(formatBytes({value: 100_000_000_000})).toBe('100 GB');
+        expect(formatBytes({value: 100_000_000_000_000})).toBe('100 TB');
+    });
+    it('should convert to size', () => {
+        expect(formatBytes({value: 100_000, size: 'b'})).toBe('100,000 B');
+        expect(formatBytes({value: 100_000_000_000_000, size: 'gb'})).toBe('100,000 GB');
+    });
+    it('should convert without labels', () => {
+        expect(formatBytes({value: 100_000, size: 'b', withSizeLabel: false})).toBe('100,000');
+        expect(formatBytes({value: 100_000_000_000_000, size: 'gb', withSizeLabel: false})).toBe(
+            '100,000',
+        );
+    });
+    it('should convert to speed', () => {
+        expect(formatBytes({value: 100_000, withSpeedLabel: true})).toBe('100 KB/s');
+        expect(formatBytes({value: 100_000, size: 'b', withSpeedLabel: true})).toBe('100,000 B/s');
+    });
+    it('should return fixed amount of significant digits', () => {
+        expect(formatBytes({value: 99_000, significantDigits: 2})).toEqual('99,000 B');
+        expect(formatBytes({value: 100_000, significantDigits: 2})).toEqual('100 KB');
+        expect(formatBytes({value: 99_000_000_000_000, significantDigits: 2})).toEqual('99,000 GB');
+        expect(formatBytes({value: 100_000_000_000_000, significantDigits: 2})).toEqual('100 TB');
+    });
+    it('shoudl return empty string on invalid data', () => {
+        expect(formatBytes({value: undefined})).toEqual('');
+        expect(formatBytes({value: null})).toEqual('');
+        expect(formatBytes({value: ''})).toEqual('');
+        expect(formatBytes({value: 'false'})).toEqual('');
+        expect(formatBytes({value: '123qwe'})).toEqual('');
+    });
+});

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.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;