ydb-embedded-ui 22.3.0 → 22.4.0

package/src/utils/disks/diskInfo/getDiskLocationItems.ts

@@ -0,0 +1,50 @@
+import {isNil} from 'lodash';
+
+import type {YDBDefinitionListItem} from '../../../components/YDBDefinitionList/YDBDefinitionList';
+import type {NodeMetadata} from '../../../types/store/nodesList';
+import {EMPTY_DATA_PLACEHOLDER} from '../../constants';
+
+import i18n from './i18n';
+
+export interface DiskDetailItem extends YDBDefinitionListItem {
+    /** Stable field identifier for ordering and grouping independently of translated names. */
+    id: string;
+}
+
+interface DiskLocationData {
+    NodeId?: number;
+    PDiskId?: number;
+    Path?: string;
+    VDiskSlotId?: number;
+}
+
+export function getDiskLocationItems(
+    data: DiskLocationData,
+    nodeData: NodeMetadata,
+    {withVDiskSlotId = false}: {withVDiskSlotId?: boolean} = {},
+): DiskDetailItem[] {
+    const entries = [
+        {id: 'fqdn', name: i18n('field_fqdn'), value: nodeData.Host},
+        {id: 'rack', name: i18n('field_rack'), value: nodeData.Rack},
+        {id: 'datacenter', name: i18n('field_datacenter'), value: nodeData.DC},
+        {id: 'pdisk-path', name: i18n('field_pdisk-path'), value: data.Path},
+        {id: 'node-id', name: i18n('field_node-id'), value: data.NodeId || undefined},
+        {id: 'pdisk-id', name: i18n('field_pdisk-id'), value: data.PDiskId},
+    ];
+    if (withVDiskSlotId) {
+        entries.push({
+            id: 'vdisk-slot-id',
+            name: i18n('field_vdisk-slot-id'),
+            value: data.VDiskSlotId,
+        });
+    }
+    return entries.map(({id, name, value}) => {
+        const missing = isNil(value) || value === '';
+        return {
+            id,
+            name,
+            content: missing ? EMPTY_DATA_PLACEHOLDER : value,
+            copyText: missing ? undefined : value,
+        };
+    });
+}

package/src/utils/disks/diskInfo/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "field_fqdn": "FQDN",
+  "field_rack": "Rack",
+  "field_datacenter": "Datacenter",
+  "field_pdisk-path": "PDisk Path",
+  "field_node-id": "Node ID",
+  "field_pdisk-id": "PDisk ID",
+  "field_vdisk-slot-id": "VDisk Slot ID"
+}

package/src/utils/disks/diskInfo/i18n/index.ts

@@ -0,0 +1,5 @@
+import {registerKeysets} from '../../../i18n';
+
+import en from './en.json';
+
+export default registerKeysets('ydb-disk-info', {en});

package/src/utils/disks/iconCalculators.ts

@@ -161,7 +161,7 @@ export function calculateFrontQueuesIcon(
  * Get icon and color for a single status flag.
  * Maps EFlag to the corresponding pair-legend icon and color.
  */
-function getFlagIconWithColor(flag: EFlag | undefined): IconWithColor | undefined {
+export function getFlagIconWithColor(flag: EFlag | undefined): IconWithColor | undefined {
     if (!flag || flag === EFlag.Grey) {
         return {
             icon: CircleQuestionFill,

package/src/utils/disks/prepareDisks.ts

@@ -1,6 +1,6 @@
 import {isNil} from 'lodash';
 
-import type {TPDiskStateInfo} from '../../types/api/pdisk';
+import type {TPDiskInfo, TPDiskStateInfo} from '../../types/api/pdisk';
 import type {TVDiskStateInfo, TVSlotId} from '../../types/api/vdisk';
 import {stringifyVdiskId} from '../dataFormatters/dataFormatters';
 import {isNumeric, parseOptionalNonNegativeNumber} from '../utils';
@@ -8,7 +8,7 @@ import {isNumeric, parseOptionalNonNegativeNumber} from '../utils';
 import {calculatePDiskSeverity} from './calculatePDiskSeverity';
 import {calculateVDiskSeverity} from './calculateVDiskSeverity';
 import {getPDiskType} from './getPDiskType';
-import {getPDiskId, isFullVDiskData} from './helpers';
+import {getPDiskId, isFullVDiskData, makeVDiskLocationKey} from './helpers';
 import type {PreparedPDisk, PreparedVDisk} from './types';
 
 export function prepareWhiteboardVDiskData(
@@ -21,16 +21,7 @@ export function prepareWhiteboardVDiskData(
     if (!isFullVDiskData(vDiskState)) {
         const {NodeId, PDiskId, VSlotId, ...restVDiskFields} = vDiskState;
 
-        const vDiskId =
-            !isNil(VSlotId) && !isNil(PDiskId) && !isNil(NodeId)
-                ? {
-                      NodeId,
-                      PDiskId,
-                      VSlotId,
-                  }
-                : undefined;
-
-        const StringifiedId = stringifyVdiskId(vDiskId);
+        const StringifiedId = makeVDiskLocationKey(NodeId, PDiskId, VSlotId) ?? '';
 
         return {
             ...restVDiskFields,
@@ -66,13 +57,7 @@ export function prepareWhiteboardVDiskData(
         AllocatedSize: AllocatedSize,
         SlotSize: PDisk?.EnforcedDynamicSlotSize,
     });
-    const WhiteboardSize = hasWhiteboardData
-        ? prepareWhiteboardVDiskSizeFields({
-              AvailableSize,
-              AllocatedSize,
-              SlotSize: PDisk?.EnforcedDynamicSlotSize,
-          })
-        : undefined;
+    const WhiteboardSize = hasWhiteboardData ? vDiskSizeFields.DisplaySize : undefined;
 
     const Severity = calculateVDiskSeverity(vDiskState);
 
@@ -124,7 +109,7 @@ export function prepareWhiteboardVDiskData(
 }
 
 export function prepareWhiteboardPDiskData(
-    pdiskState: TPDiskStateInfo = {},
+    pdiskState: TPDiskStateInfo & Pick<TPDiskInfo, 'StatusV2'> = {},
     whiteboardSizeSource: Pick<TPDiskStateInfo, 'AvailableSize' | 'TotalSize'> | null = pdiskState,
 ): PreparedPDisk {
     const hasWhiteboardData = pdiskState.HasWhiteboardData ?? Boolean(whiteboardSizeSource);
@@ -170,33 +155,7 @@ export function prepareWhiteboardPDiskData(
         State,
         Severity,
         SlotSize: EnforcedDynamicSlotSize,
-    };
-}
-
-function prepareWhiteboardVDiskSizeFields({
-    AvailableSize,
-    AllocatedSize,
-    SlotSize,
-}: {
-    AvailableSize: unknown;
-    AllocatedSize: unknown;
-    SlotSize: unknown;
-}) {
-    const allocatedSize = parseOptionalNonNegativeNumber(AllocatedSize);
-    const availableSize = parseOptionalNonNegativeNumber(AvailableSize);
-    const slotSize = parseOptionalNonNegativeNumber(SlotSize);
-    const preparedSizeFields = prepareVDiskSizeFields({
-        AvailableSize: availableSize,
-        AllocatedSize: allocatedSize,
-        SlotSize: slotSize,
-    });
-
-    return {
-        AllocatedSize: allocatedSize === undefined ? undefined : preparedSizeFields.AllocatedSize,
-        SizeLimit:
-            availableSize === undefined && slotSize === undefined
-                ? undefined
-                : preparedSizeFields.SizeLimit,
+        DriveStatus: pdiskState.Status ?? pdiskState.StatusV2,
     };
 }
 
@@ -253,12 +212,27 @@ export function prepareVDiskSizeFields({
     });
     const allocatedPercent = sizeLimit > 0 ? Math.floor((allocated * 100) / sizeLimit) : NaN;
 
+    // Preserve missing values for display without changing the legacy calculations above.
+    const displayAllocatedSize = parseOptionalNonNegativeNumber(AllocatedSize);
+    const displayAvailableSize = parseOptionalNonNegativeNumber(AvailableSize);
+    const displaySlotSize = parseOptionalNonNegativeNumber(SlotSize);
+    let displaySizeLimit: number | undefined;
+    if (!displayAvailableSize && displaySlotSize) {
+        displaySizeLimit = displaySlotSize;
+    } else if (displayAllocatedSize !== undefined && displayAvailableSize !== undefined) {
+        displaySizeLimit = displayAllocatedSize + displayAvailableSize;
+    }
+
     return {
         AvailableSize: available,
         AllocatedSize: allocated,
         SizeLimit: sizeLimit,
         FreeSize: freeSize,
         AllocatedPercent: allocatedPercent,
+        DisplaySize: {
+            AllocatedSize: displayAllocatedSize,
+            SizeLimit: displaySizeLimit,
+        },
     };
 }
 

package/src/utils/disks/types.ts

@@ -1,6 +1,6 @@
 import type {EFlag} from '../../types/api/enums';
 import type {EDriveStatus, TPDiskInfo, TPDiskStateInfo} from '../../types/api/pdisk';
-import type {EVDiskStatus, TVDiskStateInfo, TVSlotId} from '../../types/api/vdisk';
+import type {EVDiskStatus, TVDiskStateInfo} from '../../types/api/vdisk';
 import type {ValueOf} from '../../types/common';
 
 import type {PDISK_TYPES} from './getPDiskType';
@@ -98,6 +98,8 @@ export interface PreparedVDisk
     extends Omit<TVDiskStateInfo, 'PDisk' | 'AvailableSize' | 'AllocatedSize' | 'Donors'> {
     Status?: EVDiskStatus;
     PDisk?: PreparedPDisk;
+    PDiskType?: string;
+    PDiskPath?: string;
     Severity?: number;
     StringifiedId?: string;
 
@@ -106,6 +108,11 @@ export interface PreparedVDisk
     AllocatedPercent?: number;
     SizeLimit?: number;
     FreeSize?: number;
+    /** Size values for display, preserving missing source values independently. */
+    DisplaySize?: {
+        AllocatedSize?: number;
+        SizeLimit?: number;
+    };
     WhiteboardSize?: {
         AllocatedSize?: number;
         SizeLimit?: number;
@@ -118,7 +125,8 @@ export interface PreparedVDisk
 
 export type PDiskType = ValueOf<typeof PDISK_TYPES>;
 
-export interface UnavailableDonor extends TVSlotId {
+export interface UnavailableDonor
+    extends Pick<PreparedVDisk, 'NodeId' | 'PDiskId' | 'VDiskSlotId'> {
     DonorMode?: boolean;
     StoragePoolName?: string;
 }

package/src/utils/hooks/useNodeMetadata.ts

@@ -0,0 +1,21 @@
+import {isNil} from 'lodash';
+
+import {selectNodesMap} from '../../store/reducers/nodesList';
+import type {NodeMetadata} from '../../types/store/nodesList';
+import {useTypedSelector} from '../hooks';
+
+import {useDatabaseFromQuery} from './useDatabaseFromQuery';
+
+export function useNodeMetadata(
+    nodeId: number | undefined,
+    parentNodeData?: NodeMetadata,
+): NodeMetadata {
+    const database = useDatabaseFromQuery();
+    const nodesMap = useTypedSelector((state) => selectNodesMap(state, database));
+    const storedNodeData = isNil(nodeId) ? undefined : nodesMap?.get(nodeId);
+    return {
+        Host: parentNodeData?.Host || storedNodeData?.Host,
+        DC: parentNodeData?.DC || storedNodeData?.DC,
+        Rack: parentNodeData?.Rack || storedNodeData?.Rack,
+    };
+}

package/src/utils/nodes.ts

@@ -32,9 +32,14 @@ export const isUnavailableNode = <
 export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
     return nodesList?.reduce<NodesMap>((nodeHosts, node) => {
         if (valueIsDefined(node.Id)) {
+            const physicalLocation = node.PhysicalLocation;
+            // The legacy numeric Rack can be a hash of the actual rack name.
+            const Rack = physicalLocation?.Location?.match(/(?:^|\/)R=([^/]+)/)?.[1];
+
             nodeHosts.set(node.Id, {
                 Host: node.Host,
-                DC: node.PhysicalLocation?.DataCenterId,
+                DC: physicalLocation?.DataCenterId,
+                Rack,
             });
         }
         return nodeHosts;

package/src/utils/storageMetrics.ts

@@ -1,11 +1,7 @@
 import type {BytesSizes} from './bytesParsers';
-import {bytesSizes, getBytesSizeUnit, sizes} from './bytesParsers';
+import {bytesSizes, formatBytes, getBytesSizeUnit, sizes} from './bytesParsers';
 import {EMPTY_DATA_PLACEHOLDER, UNBREAKABLE_GAP} from './constants';
-import {
-    formatNumber,
-    formatPercent,
-    formatStorageValuesToGb,
-} from './dataFormatters/dataFormatters';
+import {formatNumber, formatPercent, roundToDecimalPlaces} from './dataFormatters/dataFormatters';
 import {parseOptionalNonNegativeNumber} from './utils';
 
 export interface FormatMetricBytesOptions {
@@ -165,27 +161,44 @@ export function formatMetricBytes(
         : EMPTY_DATA_PLACEHOLDER;
 }
 
-export function formatMetricPercent(value?: unknown) {
+export function formatMetricPercent(value?: unknown, fixedDecimalPlaces?: number) {
     const numericValue = parseOptionalNonNegativeNumber(value);
 
     if (numericValue === undefined) {
         return EMPTY_DATA_PLACEHOLDER;
     }
 
-    const precision = Number.isInteger(numericValue) ? 0 : 1;
+    const precision = fixedDecimalPlaces ?? (Number.isInteger(numericValue) ? 0 : 1);
+    const fixed =
+        fixedDecimalPlaces !== undefined && roundToDecimalPlaces(numericValue, precision) !== 0;
 
-    return formatPercent(numericValue / 100, precision) || EMPTY_DATA_PLACEHOLDER;
+    return formatPercent(numericValue / 100, precision, {fixed}) || EMPTY_DATA_PLACEHOLDER;
 }
 
-export function formatStorageMetricPair(value?: string | number, capacity?: string | number) {
+export function formatStorageMetricPair(
+    value?: string | number,
+    capacity?: string | number,
+    fixedDecimalPlaces?: number,
+) {
     const parsedValue = parseOptionalNonNegativeNumber(value);
     const parsedCapacity = parseOptionalNonNegativeNumber(capacity);
 
-    if (parsedValue === undefined || parsedCapacity === undefined) {
+    if (parsedValue === undefined && parsedCapacity === undefined) {
         return EMPTY_DATA_PLACEHOLDER;
     }
 
-    return formatStorageValuesToGb(parsedValue, parsedCapacity).join(' / ');
+    return [
+        formatBytes({
+            value: parsedValue,
+            size: 'gb',
+            precision: 1,
+            withSizeLabel: parsedCapacity === undefined,
+            fixedDecimalPlaces,
+        }),
+        formatBytes({value: parsedCapacity, size: 'gb', fixedDecimalPlaces}),
+    ]
+        .map((formattedValue) => formattedValue || EMPTY_DATA_PLACEHOLDER)
+        .join(' / ');
 }
 
 export function formatNormalizedMetricPercent(value?: number) {
@@ -195,7 +208,7 @@ export function formatNormalizedMetricPercent(value?: number) {
         return EMPTY_DATA_PLACEHOLDER;
     }
 
-    return formatPercent(parsedValue, 2, {fixed: true}) || EMPTY_DATA_PLACEHOLDER;
+    return formatMetricPercent(parsedValue * 100, 2);
 }
 
 export function formatMetricCount(value?: unknown) {
@@ -212,7 +225,7 @@ export function formatMetricCountPair(value?: unknown, capacity?: unknown) {
     const formattedValue = formatMetricCount(value);
     const formattedCapacity = formatMetricCount(capacity);
 
-    if (formattedValue === EMPTY_DATA_PLACEHOLDER || formattedCapacity === EMPTY_DATA_PLACEHOLDER) {
+    if (formattedValue === EMPTY_DATA_PLACEHOLDER && formattedCapacity === EMPTY_DATA_PLACEHOLDER) {
         return EMPTY_DATA_PLACEHOLDER;
     }
 

package/src/utils/timeParsers/formatDuration.ts

@@ -7,10 +7,15 @@ import i18n from './i18n';
  * Process time difference in ms and returns formated time.
  * By default only two major values are returned (days & hours, hours & minutes, minutes & seconds, etc.).
  * It can be altered with valuesCount arg
+ * Compact format omits milliseconds and spaces between numbers and unit labels.
  *
  * value - duration in ms
  */
-export const formatDurationToShortTimeFormat = (value: number, valuesCount: 1 | 2 = 2) => {
+export const formatDurationToShortTimeFormat = (
+    value: number,
+    valuesCount: 1 | 2 = 2,
+    {compact = false}: {compact?: boolean} = {},
+) => {
     const ms = value % 1000;
     let remain = Math.floor(value / 1000);
 
@@ -33,6 +38,22 @@ export const formatDurationToShortTimeFormat = (value: number, valuesCount: 1 |
         ms,
     };
 
+    if (compact) {
+        const units = [
+            {value: days, key: 'value_compact-days'},
+            {value: hours, key: 'value_compact-hours'},
+            {value: minutes, key: 'value_compact-minutes'},
+            {value: seconds, key: 'value_compact-seconds'},
+        ] as const;
+        const firstNonZeroUnit = units.findIndex((unit) => unit.value > 0);
+
+        return units
+            .slice(firstNonZeroUnit < 0 ? -1 : firstNonZeroUnit)
+            .slice(0, valuesCount)
+            .map(({key}) => i18n(key, duration))
+            .join(' ');
+    }
+
     if (valuesCount === 2) {
         if (days > 0) {
             return i18n('daysHours', duration);

package/src/utils/timeParsers/i18n/en.json

@@ -7,5 +7,9 @@
   "hours": "{{hours}}\u00a0h",
   "min": "{{minutes}}\u00a0m",
   "sec": "{{seconds}}\u00a0s",
-  "ms": "{{ms}}\u00a0ms"
+  "ms": "{{ms}}\u00a0ms",
+  "value_compact-days": "{{days}}d",
+  "value_compact-hours": "{{hours}}h",
+  "value_compact-minutes": "{{minutes}}min",
+  "value_compact-seconds": "{{seconds}}s"
 }

package/src/utils/timeParsers/i18n/ru.json

@@ -7,5 +7,9 @@
   "hours": "{{hours}}\u00a0ч",
   "min": "{{minutes}}\u00a0м",
   "sec": "{{seconds}}\u00a0с",
-  "ms": "{{ms}}\u00a0мс"
+  "ms": "{{ms}}\u00a0мс",
+  "value_compact-days": "{{days}}д",
+  "value_compact-hours": "{{hours}}ч",
+  "value_compact-minutes": "{{minutes}}мин",
+  "value_compact-seconds": "{{seconds}}с"
 }