ydb-embedded-ui 4.18.0 → 4.19.0

package/dist/store/reducers/tenantOverview/topStorageGroups/utils.ts

@@ -0,0 +1,20 @@
+import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants';
+import type {TStorageInfo} from '../../../../types/api/storage';
+import {prepareStorageGroups} from '../../storage/utils';
+import type {PreparedTopStorageGroupsResponse} from './types';
+
+export const prepareTopStorageGroupsResponse = (
+    data: TStorageInfo,
+): PreparedTopStorageGroupsResponse => {
+    const {StoragePools, StorageGroups} = data;
+
+    const preparedGroups = prepareStorageGroups(StorageGroups, StoragePools);
+
+    if (StoragePools) {
+        preparedGroups.sort((a, b) => b.Usage - a.Usage);
+    }
+
+    return {
+        groups: preparedGroups.slice(0, TENANT_OVERVIEW_TABLES_LIMIT),
+    };
+};

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

@@ -26,34 +26,44 @@ export const calculateTenantMetrics = (tenant?: TTenant) => {
         CoresUsed,
         MemoryUsed,
         StorageAllocatedSize,
-        CoresLimit,
         MemoryLimit,
-        StorageLimit,
+        StorageAllocatedLimit,
+        PoolStats,
         Metrics = {},
+        DatabaseQuotas = {},
     } = tenant || {};
 
-    const cpuFromCores = isNumeric(CoresUsed) ? Number(CoresUsed) * 1_000_000 : undefined;
-    const cpuFromMetrics = isNumeric(Metrics.CPU) ? Number(Metrics.CPU) : undefined;
+    const systemPoolUsage = PoolStats?.find(({Name}) => Name === 'System')?.Usage;
+    const userPoolUsage = PoolStats?.find(({Name}) => Name === 'User')?.Usage;
 
-    const cpu = cpuFromCores ?? cpuFromMetrics ?? undefined;
+    const cpu = isNumeric(CoresUsed) ? Number(CoresUsed) * 1_000_000 : undefined;
+    const memory = isNumeric(MemoryUsed) ? Number(MemoryUsed) : undefined;
+    const blobStorage = isNumeric(StorageAllocatedSize) ? Number(StorageAllocatedSize) : undefined;
+    const tableStorage = isNumeric(Metrics.Storage) ? Number(Metrics.Storage) : undefined;
 
-    const rawMemory = MemoryUsed ?? Metrics.Memory;
-
-    const memory = isNumeric(rawMemory) ? Number(rawMemory) : undefined;
-
-    // Blob storage - actual database size
-    const storage = isNumeric(StorageAllocatedSize) ? Number(StorageAllocatedSize) : undefined;
-    const cpuLimit = isNumeric(CoresLimit) ? Number(CoresLimit) : undefined;
+    // We use system pool usage and user pool usage to calculate cpu usage because
+    // only these pools directly indicate resources available to perform user queries
+    const cpuUsage =
+        isNumeric(systemPoolUsage) || isNumeric(userPoolUsage)
+            ? Math.max(Number(systemPoolUsage), Number(userPoolUsage)) * 100
+            : undefined;
     const memoryLimit = isNumeric(MemoryLimit) ? Number(MemoryLimit) : undefined;
-    const storageLimit = isNumeric(StorageLimit) ? Number(StorageLimit) : undefined;
+    const blobStorageLimit = isNumeric(StorageAllocatedLimit)
+        ? Number(StorageAllocatedLimit)
+        : undefined;
+    const tableStorageLimit = isNumeric(DatabaseQuotas.data_size_hard_quota)
+        ? Number(DatabaseQuotas.data_size_hard_quota)
+        : undefined;
 
     return {
         cpu,
         memory,
-        storage,
-        cpuLimit,
+        blobStorage,
+        tableStorage,
+        cpuUsage,
         memoryLimit,
-        storageLimit,
+        blobStorageLimit,
+        tableStorageLimit,
     };
 };
 
@@ -71,7 +81,7 @@ export const prepareTenants = (tenants: TTenant[], useNodeAsBackend: boolean) =>
         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 {cpu, memory, blobStorage} = calculateTenantMetrics(tenant);
         const {nodesCount, groupsCount} = calculateTenantEntities(tenant);
 
         return {
@@ -82,7 +92,7 @@ export const prepareTenants = (tenants: TTenant[], useNodeAsBackend: boolean) =>
             controlPlaneName,
             cpu,
             memory,
-            storage,
+            storage: blobStorage,
             nodesCount,
             groupsCount,
         };

package/dist/styles/constants.scss

@@ -2,4 +2,8 @@
     --tenant-object-info-max-value-width: 300px;
 
     --diagnostics-section-title-margin: 20px;
+
+    --diagnostics-section-margin: 16px;
+
+    --diagnostics-section-table-width: 872px;
 }

package/dist/types/additionalProps.ts

@@ -24,7 +24,7 @@ export interface AdditionalTenantsProps {
     getMonitoringLink?: (name?: string, type?: ETenantType) => ReactNode;
 }
 
-export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints'>;
+export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints' | 'NodeId'>;
 
 export interface AdditionalNodesProps extends Record<string, unknown> {
     getNodeRef?: (node?: NodeAddress) => string | null;

package/dist/types/api/storage.ts

@@ -16,7 +16,7 @@ export interface TStorageInfo {
     FoundGroups?: string;
 }
 
-interface TStoragePoolInfo {
+export interface TStoragePoolInfo {
     Overall?: EFlag;
     Name?: string;
     Kind?: string;

package/dist/types/api/tenant.ts

@@ -42,24 +42,24 @@ export interface TTenant {
     ResourceId?: string;
     Tablets?: TTabletStateInfo[];
     /** uint64 */
-    StorageAllocatedSize?: string;
+    StorageAllocatedSize?: string; // Actual database size
     /** uint64 */
     StorageMinAvailableSize?: string;
     Nodes?: TSystemStateInfo[];
     /** uint64 */
-    MemoryUsed?: string;
+    MemoryUsed?: string; // Actual memory consumption
     /** uint64 */
     MemoryLimit?: string;
     /** double */
-    CoresUsed?: number;
+    CoresUsed?: number; // Actual cpu consumption
     /** uint64 */
     StorageGroups?: string;
 
     MonitoringEndpoint?: string; // additional
     ControlPlane?: ControlPlane; // additional
 
-    CoresLimit?: string; // TODO: check correctness in backend protos when fully supported
-    StorageLimit?: string; // TODO: check correctness in backend protos when fully supported
+    StorageAllocatedLimit?: string;
+    DatabaseQuotas?: DatabaseQuotas;
 }
 
 interface THiveDomainStatsStateCount {
@@ -69,15 +69,15 @@ interface THiveDomainStatsStateCount {
 
 export interface TMetrics {
     /** uint64 */
-    CPU?: string;
+    CPU?: string; // Logical cpu consumption
     /** uint64 */
-    Memory?: string;
+    Memory?: string; // Logical memory consumption
     /** uint64 */
     Network?: string;
     /** uint64 */
     Counter?: string;
     /** uint64 */
-    Storage?: string;
+    Storage?: string; // Logical database size
     /** uint64 */
     ReadThroughput?: string;
     /** uint64 */
@@ -149,3 +149,16 @@ export enum ETabletVolatileState {
     'TABLET_VOLATILE_STATE_STARTING' = 'TABLET_VOLATILE_STATE_STARTING',
     'TABLET_VOLATILE_STATE_RUNNING' = 'TABLET_VOLATILE_STATE_RUNNING',
 }
+
+interface DatabaseQuotas {
+    /** uint64 */
+    data_size_hard_quota?: string;
+    /** uint64 */
+    data_size_soft_quota?: string;
+    /** uint64 */
+    data_stream_shards_quota?: string;
+    /** uint64 */
+    data_stream_reserved_storage_quota?: string;
+    /** uint32 */
+    ttl_min_run_internal_seconds?: string;
+}

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

@@ -28,11 +28,20 @@ describe('formatBytes', () => {
         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', () => {
+    it('should 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('');
     });
+    it('should work with precision', () => {
+        expect(formatBytes({value: 123.123, precision: 2})).toBe('123 B');
+        expect(formatBytes({value: 12.123, precision: 2})).toBe('12 B');
+        expect(formatBytes({value: 1.123, precision: 2})).toBe('1.1 B');
+        expect(formatBytes({value: 0.123, precision: 2})).toBe('0.12 B');
+        expect(formatBytes({value: 0.012, precision: 2})).toBe('0.01 B');
+        expect(formatBytes({value: 0.001, precision: 2})).toBe('0 B');
+        expect(formatBytes({value: 0, precision: 2})).toBe('0 B');
+    });
 });

package/dist/utils/bytesParsers/formatBytes.ts

@@ -1,4 +1,4 @@
-import {formatNumber} from '../dataFormatters/dataFormatters';
+import {formatNumber, roundToPrecision} from '../dataFormatters/dataFormatters';
 import {GIGABYTE, KILOBYTE, MEGABYTE, TERABYTE} from '../constants';
 import {isNumeric} from '../utils';
 
@@ -46,7 +46,7 @@ export type BytesSizes = keyof typeof sizes;
  *
  * significantDigits = 3 - 900 000 mb and 1000 gb
  */
-const getSizeWithSignificantDigits = (value: number, significantDigits: number) => {
+export const getSizeWithSignificantDigits = (value: number, significantDigits: number) => {
     const multiplier = 10 ** significantDigits;
 
     const tbLevel = sizes.tb.value * multiplier;
@@ -79,7 +79,7 @@ interface FormatToSizeArgs {
 }
 
 const formatToSize = ({value, size = 'mb', precision = 0}: FormatToSizeArgs) => {
-    const result = (Number(value) / sizes[size].value).toFixed(precision);
+    const result = roundToPrecision(Number(value) / sizes[size].value, precision);
 
     return formatNumber(result);
 };

package/dist/utils/constants.ts

@@ -77,6 +77,8 @@ export const COLORS_PRIORITY = {
     grey: 1,
 };
 
+export const TENANT_OVERVIEW_TABLES_LIMIT = 5;
+
 // ==== Titles ====
 export const DEVELOPER_UI_TITLE = 'Developer UI';
 export const CLUSTER_DEFAULT_TITLE = 'Cluster';
@@ -113,6 +115,12 @@ export const DEFAULT_TABLE_SETTINGS = {
     highlightRows: true,
 } as const;
 
+export const TENANT_OVERVIEW_TABLES_SETTINGS = {
+    ...DEFAULT_TABLE_SETTINGS,
+    stickyHead: 'fixed',
+    dynamicRender: false,
+} as const;
+
 export const QUERY_INITIAL_MODE_KEY = 'query_initial_mode';
 export const LAST_USED_QUERY_ACTION_KEY = 'last_used_query_action';
 

package/dist/utils/dataFormatters/__test__/roundToSignificant.test.ts

@@ -0,0 +1,22 @@
+import {roundToPrecision} from '../dataFormatters';
+
+describe('roundToSignificant', () => {
+    it('should work with only value', () => {
+        expect(roundToPrecision(123)).toBe(123);
+        expect(roundToPrecision(123.123)).toBe(123);
+        expect(roundToPrecision(12.123)).toBe(12);
+        expect(roundToPrecision(1.123)).toBe(1);
+        expect(roundToPrecision(0.123)).toBe(0);
+        expect(roundToPrecision(0)).toBe(0);
+    });
+    it('should work with precision', () => {
+        expect(roundToPrecision(123, 2)).toBe(123);
+        expect(roundToPrecision(123.123, 2)).toBe(123);
+        expect(roundToPrecision(12.123, 2)).toBe(12);
+        expect(roundToPrecision(1.123, 2)).toBe(1.1);
+        expect(roundToPrecision(0.123, 2)).toBe(0.12);
+        expect(roundToPrecision(0.012, 2)).toBe(0.01);
+        expect(roundToPrecision(0.001, 2)).toBe(0);
+        expect(roundToPrecision(0, 2)).toBe(0);
+    });
+});

package/dist/utils/dataFormatters/dataFormatters.ts

@@ -1,9 +1,14 @@
 import {dateTimeParse} from '@gravity-ui/date-utils';
 
 import type {TVDiskID, TVSlotId} from '../../types/api/vdisk';
-import {DAY_IN_SECONDS, GIGABYTE, TERABYTE} from '../constants';
+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';
 
@@ -55,17 +60,30 @@ 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 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): (string | undefined)[] => {
-    return [
-        value ? String(Math.floor(value / 1000000000)) : undefined,
-        total ? `${Math.floor(total / 1000000000)} GB` : undefined,
-    ];
+
+export const formatStorageValuesToGb = (value?: number, total?: number) => {
+    return formatStorageValues(value, total, 'gb');
 };
 
 export const formatNumber = (number?: unknown) => {
@@ -73,20 +91,24 @@ export const formatNumber = (number?: unknown) => {
         return '';
     }
 
-    return configuredNumeral(number).format();
+    return configuredNumeral(number).format('0,0.[00000]');
 };
 
-const normalizeCPU = (value: number | string) => {
-    const rawCores = Number(value) / 1000000;
-    let cores = rawCores.toPrecision(3);
-    if (rawCores >= 1000) {
-        cores = rawCores.toFixed();
+export const roundToPrecision = (value: number | string, precision = 0) => {
+    let [digits] = String(value).split('.');
+    if (Number(value) < 1) {
+        digits = '';
     }
-    if (rawCores < 0.001) {
-        cores = '0';
+    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 Number(cores);
+    return roundToPrecision(rawCores, 3);
 };
 
 export const formatCPU = (value?: number | string) => {

package/package.json

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