ydb-embedded-ui 21.1.0 → 22.1.0

package/src/containers/Storage/StorageExpertModePanel/components/getSpaceLegendSelection.ts

@@ -4,7 +4,7 @@ import {loadFromSessionStorage, saveToSessionStorage} from '../../../../utils';
 export const SPACE_LEGEND_STORAGE_KEY = 'ydb-space-legend-inactive';
 export const SPACE_LEGEND_CHANGE_EVENT = 'spaceLegendChange';
 
-export type SpaceLegendSelectionScope = 'vdisks' | 'pdisks';
+export type SpaceLegendSelectionScope = 'vdisks' | 'pdisks' | 'nodes-vdisks' | 'nodes-pdisks';
 
 // By default, GREEN and CYAN are inactive (deselected)
 const defaultInactive = new Set([ECapacityAlert.GREEN, ECapacityAlert.CYAN]);

package/src/containers/Storage/StorageExpertModePanel/components/renderExpertModeLegend.tsx

@@ -0,0 +1,58 @@
+import type {PDisksGroupByValue, VDisksGroupByValue} from '../constants';
+import {PDisksGroupBy, VDisksGroupBy} from '../constants';
+
+import {AllLegend} from './AllLegend';
+import {CompactionLegend} from './CompactionLegend';
+import {FrontQueuesLegend} from './FrontQueuesLegend';
+import {PDiskDecommitLegend} from './PDiskDecommitLegend';
+import {PDiskDeviceLegend} from './PDiskDeviceLegend';
+import {PDiskDriveLegend} from './PDiskDriveLegend';
+import {PDiskMaintenanceLegend} from './PDiskMaintenanceLegend';
+import {PDiskStateLegend} from './PDiskStateLegend';
+import {SpaceLegend} from './SpaceLegend';
+import {StateLegend} from './StateLegend';
+import type {SpaceLegendSelectionScope} from './getSpaceLegendSelection';
+
+export function renderVDiskLegend(
+    vdisksGroupBy: VDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+) {
+    switch (vdisksGroupBy) {
+        case VDisksGroupBy.State:
+            return <StateLegend />;
+        case VDisksGroupBy.Space:
+            return <SpaceLegend selectionScope={selectionScope} />;
+        case VDisksGroupBy.FrontQueues:
+            return <FrontQueuesLegend />;
+        case VDisksGroupBy.Compaction:
+            return <CompactionLegend />;
+        case VDisksGroupBy.All:
+            return <AllLegend selectionScope={selectionScope} />;
+        default:
+            return null;
+    }
+}
+
+export function renderPDiskLegend(
+    pdisksGroupBy: PDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+) {
+    switch (pdisksGroupBy) {
+        case PDisksGroupBy.State:
+            return <PDiskStateLegend />;
+        case PDisksGroupBy.Space:
+            return <SpaceLegend selectionScope={selectionScope} />;
+        case PDisksGroupBy.Drive:
+            return <PDiskDriveLegend />;
+        case PDisksGroupBy.Decommit:
+            return <PDiskDecommitLegend />;
+        case PDisksGroupBy.Maintenance:
+            return <PDiskMaintenanceLegend />;
+        case PDisksGroupBy.Device:
+            return <PDiskDeviceLegend />;
+        case PDisksGroupBy.All:
+            return <AllLegend selectionScope={selectionScope} />;
+        default:
+            return null;
+    }
+}

package/src/containers/Storage/StorageExpertModePanel/constants.ts

@@ -19,7 +19,33 @@ export const PDisksGroupBy = {
 
 export type PDisksGroupByValue = (typeof PDisksGroupBy)[keyof typeof PDisksGroupBy];
 
+export const NODES_VDISKS_GROUP_BY_VALUES = [
+    VDisksGroupBy.State,
+    VDisksGroupBy.Space,
+    VDisksGroupBy.FrontQueues,
+    VDisksGroupBy.Compaction,
+    VDisksGroupBy.All,
+] as const;
+export type NodesVDisksGroupByValue = (typeof NODES_VDISKS_GROUP_BY_VALUES)[number];
+
+export const NODES_PDISKS_GROUP_BY_VALUES = [
+    PDisksGroupBy.State,
+    PDisksGroupBy.Space,
+    PDisksGroupBy.Drive,
+    PDisksGroupBy.Decommit,
+    PDisksGroupBy.Maintenance,
+    PDisksGroupBy.Device,
+    PDisksGroupBy.All,
+] as const;
+export type NodesPDisksGroupByValue = (typeof NODES_PDISKS_GROUP_BY_VALUES)[number];
+
 export const vdisksGroupBySchema = z.nativeEnum(VDisksGroupBy).catch(VDisksGroupBy.State);
 export const pdisksGroupBySchema = z.nativeEnum(PDisksGroupBy).catch(PDisksGroupBy.State);
+export const nodesVdisksGroupBySchema = z
+    .enum(NODES_VDISKS_GROUP_BY_VALUES)
+    .catch(VDisksGroupBy.State);
+export const nodesPdisksGroupBySchema = z
+    .enum(NODES_PDISKS_GROUP_BY_VALUES)
+    .catch(PDisksGroupBy.State);
 
 export const b = cn('ydb-storage-expert-mode-panel');

package/src/containers/Storage/StorageExpertModePanel/i18n/en.json

@@ -20,7 +20,7 @@
   "value_error": "Error",
   "value_attention": "Attention",
   "value_stopped": "Stopped",
-  "value_no-data": "N/D",
+  "value_no-data": "No data",
   "drive_active": "Active",
   "drive_inactive": "Inactive",
   "drive_to-be-removed": "To be removed",
@@ -32,7 +32,7 @@
   "value_decommit-none": "No decommission",
   "value_maintenance-long-term-planned": "Long term planned",
   "value_maintenance-no-new-vdisks": "No new VDisks",
-  "value_maintenance-no-request": "No request",
+  "value_maintenance-no-request": "Unset / None",
   "context_no-statistics": "No statistics available",
   "label_capacity-alerts": "Capacity alerts:",
   "capacity-alerts_all": "All",

package/src/containers/Storage/TableGroup/TableGroup.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ArrowToggle, Label, Text} from '@gravity-ui/uikit';
 
+import {TableKeyboardNavigationGroupContext} from '../../../components/TableKeyboardNavigation/TableKeyboardNavigation';
 import {cn} from '../../../utils/cn';
 
 import './TableGroup.scss';
@@ -48,7 +49,11 @@ export const TableGroup = ({
 
     const renderContent = () => {
         if (expanded) {
-            return <div className={b('content')}>{children}</div>;
+            return (
+                <TableKeyboardNavigationGroupContext.Provider value={title}>
+                    <div className={b('content')}>{children}</div>
+                </TableKeyboardNavigationGroupContext.Provider>
+            );
         }
 
         return null;

package/src/containers/Storage/VDisks/VDisks.scss

@@ -4,7 +4,10 @@
     }
 
     &__item {
+        flex-shrink: 0;
+
         width: 55px;
+        min-height: var(--g-text-subheader-2-line-height);
         margin-right: var(--g-spacing-1);
 
         &_with-dc-margin {

package/src/containers/Storage/VDisks/VDisks.tsx

@@ -7,10 +7,13 @@ import type {PreparedVDisk} from '../../../utils/disks/types';
 import {DISKS_POPUP_DEBOUNCE_TIMEOUT} from '../shared';
 import type {StorageViewContext} from '../types';
 import {isVdiskActive, useVDisksWithDCMargins} from '../utils';
+import {useVirtualizedDiskList} from '../utils/useVirtualizedDiskList';
 
 import './VDisks.scss';
 
 const b = cn('ydb-storage-vdisks');
+const EMPTY_VDISKS: PreparedVDisk[] = [];
+const VDiskItem = React.memo(VDiskWithDonorsStack);
 
 interface VDisksProps {
     vDisks?: PreparedVDisk[];
@@ -19,17 +22,34 @@ interface VDisksProps {
     withIcon?: boolean;
 }
 
-export function VDisks({vDisks, viewContext, erasure, withIcon}: VDisksProps) {
+export const VDisks = React.memo(function VDisks({
+    vDisks = EMPTY_VDISKS,
+    viewContext,
+    erasure,
+    withIcon,
+}: VDisksProps) {
     const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
 
     const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
+    const {containerRef, shouldRenderDisk, getPlaceholderProps} = useVirtualizedDiskList(
+        vDisks,
+        vDisks.every((disk) => Boolean(disk.StringifiedId)),
+    );
+
+    React.useEffect(() => {
+        setHighlightedVDisk((id) =>
+            vDisks.some((disk) => disk.StringifiedId === id) ? id : undefined,
+        );
+    }, [vDisks]);
 
     return (
-        <div className={b('wrapper')}>
-            {vDisks?.map((vDisk, index) => (
-                <VDiskWithDonorsStack
+        <div className={b('wrapper')} ref={containerRef}>
+            {vDisks.map((vDisk, index) => (
+                <VDiskItem
                     withIcon={withIcon}
-                    key={vDisk.StringifiedId}
+                    renderContent={shouldRenderDisk(index)}
+                    placeholderProps={getPlaceholderProps(index)}
+                    key={vDisk.StringifiedId || index}
                     data={vDisk}
                     inactive={!isVdiskActive(vDisk, viewContext)}
                     delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
@@ -37,11 +57,13 @@ export function VDisks({vDisks, viewContext, erasure, withIcon}: VDisksProps) {
                     className={b('item', {
                         'with-dc-margin': vDisksWithDCMargins.includes(index),
                     })}
-                    highlightedVDisk={highlightedVDisk}
+                    highlightedVDisk={
+                        highlightedVDisk === vDisk.StringifiedId ? highlightedVDisk : undefined
+                    }
                     setHighlightedVDisk={setHighlightedVDisk}
                     progressBarClassName={b('vdisks-progress-bar')}
                 />
             ))}
         </div>
     );
-}
+});

package/src/containers/Storage/useStoragePDiskDisplayStateGetter.ts

@@ -25,10 +25,15 @@ import {
 } from '../../utils/disks/severityCalculators';
 
 import {EXPERT_MODE_ALL_PDISK_WIDTH, EXPERT_MODE_PDISK_WIDTH} from './Disks/constants';
+import type {SpaceLegendSelectionScope} from './StorageExpertModePanel/components/getSpaceLegendSelection';
 import {useSpaceLegendSelection} from './StorageExpertModePanel/components/useSpaceLegendSelection';
 import {PDisksGroupBy} from './StorageExpertModePanel/constants';
 import type {PDisksGroupByValue} from './StorageExpertModePanel/constants';
-import {useIsStorageExpertMode, usePDisksGroupByParam} from './useStorageQueryParams';
+import {
+    useIsStorageExpertMode,
+    useNodesPDisksGroupByParam,
+    usePDisksGroupByParam,
+} from './useStorageQueryParams';
 
 function getMode(groupBy: PDisksGroupByValue): DiskDisplayMode | undefined {
     switch (groupBy) {
@@ -51,18 +56,6 @@ function getMode(groupBy: PDisksGroupByValue): DiskDisplayMode | undefined {
     }
 }
 
-function requiresWhiteboardData(groupBy: PDisksGroupByValue) {
-    return groupBy === PDisksGroupBy.State || groupBy === PDisksGroupBy.Device;
-}
-
-function hasBSCStatusData(pDisk: Parameters<PDiskDisplayStateGetter>[0]) {
-    return (
-        pDisk.DriveStatus !== undefined ||
-        pDisk.DecommitStatus !== undefined ||
-        pDisk.MaintenanceStatus !== undefined
-    );
-}
-
 function getAllocatedPercent(pDisk: Parameters<PDiskDisplayStateGetter>[0]) {
     const whiteboardAllocatedPercent = pDisk.WhiteboardSize?.AllocatedPercent;
 
@@ -87,43 +80,54 @@ function isAllModeHealthy(pDisk: Parameters<PDiskDisplayStateGetter>[0]) {
 function getAllModeIndicators(
     pDisk: Parameters<PDiskDisplayStateGetter>[0],
     isCapacityAlertInactive: boolean,
+    hasWhiteboardData = true,
 ): PDiskAllModeIndicatorsState {
     const capacityAlertIcon = isCapacityAlertInactive
         ? undefined
         : calculateSpaceIcon({CapacityAlert: pDisk.PDiskCapacityAlert});
-    const driveDisplayState = getPDiskDriveDisplayState(pDisk.DriveStatus);
-    const decommitDisplayState = getPDiskDecommitDisplayState(pDisk.DecommitStatus);
-    const maintenanceDisplayState = getPDiskMaintenanceDisplayState(pDisk.MaintenanceStatus);
+    const driveIcon = getBSCStatusDisplayState(pDisk, 'drive', hasWhiteboardData)?.icon;
+    const decommitIcon = getBSCStatusDisplayState(pDisk, 'decommit', hasWhiteboardData)?.icon;
+    const maintenanceIcon = getBSCStatusDisplayState(pDisk, 'maintenance', hasWhiteboardData)?.icon;
     const deviceIcon = calculateFlagPairIcon(pDisk.Device, pDisk.Realtime);
-    const driveIcon = pDisk.DriveStatus === undefined ? CircleQuestionFill : driveDisplayState.icon;
-    const decommitIcon =
-        pDisk.DecommitStatus === undefined ? CircleQuestionFill : decommitDisplayState.icon;
-    const maintenanceIcon =
-        pDisk.MaintenanceStatus === undefined ? CircleQuestionFill : maintenanceDisplayState.icon;
 
     return {
-        ...(capacityAlertIcon ? {capacityAlert: capacityAlertIcon} : {}),
+        ...(capacityAlertIcon && (hasWhiteboardData || isCapacityAlert(pDisk.PDiskCapacityAlert))
+            ? {capacityAlert: capacityAlertIcon}
+            : {}),
         ...(driveIcon ? {drive: driveIcon} : {}),
         ...(decommitIcon ? {decommit: decommitIcon} : {}),
         ...(maintenanceIcon ? {maintenance: maintenanceIcon} : {}),
-        ...(deviceIcon ? {device: deviceIcon} : {}),
+        ...(deviceIcon && hasWhiteboardData ? {device: deviceIcon} : {}),
     };
 }
 
-function getMissingAllModeDisplayState(
+function getMissingPDiskDisplayState(
     pDisk: Parameters<PDiskDisplayStateGetter>[0],
+    mode: DiskDisplayMode | undefined,
+    inactiveAlerts: Set<ECapacityAlert>,
 ): PDiskDisplayState {
+    const isCapacityAlertInactive =
+        isCapacityAlert(pDisk.PDiskCapacityAlert) && inactiveAlerts.has(pDisk.PDiskCapacityAlert);
+    let icon: PDiskDisplayState['icon'] = getBSCStatusDisplayState(pDisk, mode, false)?.icon;
+    if (mode === 'space' && isCapacityAlert(pDisk.PDiskCapacityAlert) && !isCapacityAlertInactive) {
+        icon = calculateSpaceIcon({CapacityAlert: pDisk.PDiskCapacityAlert});
+    }
+
     return {
         severity: NOT_AVAILABLE_SEVERITY,
-        icon: undefined,
-        mode: 'all',
+        icon,
+        mode,
+        isNoData: true,
         isLegendInactive: false,
         showNoDataPlaceholder: true,
-        allocatedPercent: getAllocatedPercent(pDisk),
-        showAllocatedPercentLabel: false,
+        allocatedPercent:
+            mode === 'all' || mode === 'space' ? getAllocatedPercent(pDisk) : undefined,
+        showAllocatedPercentLabel: mode !== 'all',
         iconPlacement: 'inline',
-        width: EXPERT_MODE_ALL_PDISK_WIDTH,
-        allMode: {indicators: {}},
+        width: mode === 'all' ? EXPERT_MODE_ALL_PDISK_WIDTH : EXPERT_MODE_PDISK_WIDTH,
+        ...(mode === 'all'
+            ? {allMode: {indicators: getAllModeIndicators(pDisk, isCapacityAlertInactive, false)}}
+            : {}),
     };
 }
 
@@ -157,96 +161,43 @@ function getAllModeDisplayState(
     };
 }
 
-function getMissingStatusDisplayState(mode: DiskDisplayMode | undefined): PDiskDisplayState {
-    return {
-        severity: NOT_AVAILABLE_SEVERITY,
-        icon: undefined,
-        mode,
-        isLegendInactive: false,
-        showNoDataPlaceholder: true,
-        allocatedPercent: undefined,
-        width: mode ? EXPERT_MODE_PDISK_WIDTH : undefined,
-    };
-}
-
-interface GetStatusModeDisplayStateParams {
-    hasWhiteboardData: boolean;
-    mode: DiskDisplayMode | undefined;
-    pDisk: Parameters<PDiskDisplayStateGetter>[0];
-    pdisksGroupBy: PDisksGroupByValue;
-}
-
-function getStatusModeDisplayState({
-    hasWhiteboardData,
-    mode,
-    pDisk,
-    pdisksGroupBy,
-}: GetStatusModeDisplayStateParams): PDiskDisplayState | undefined {
-    if (pdisksGroupBy === PDisksGroupBy.Drive) {
-        if (!hasWhiteboardData && pDisk.DriveStatus === undefined) {
-            return getMissingStatusDisplayState(mode);
-        }
-
-        const driveDisplayState = getPDiskDriveDisplayState(pDisk.DriveStatus);
-
-        return {
-            ...driveDisplayState,
-            icon: pDisk.DriveStatus === undefined ? CircleQuestionFill : driveDisplayState.icon,
-            mode,
-            isLegendInactive: false,
-            showNoDataPlaceholder: false,
-            allocatedPercent: undefined,
-            width: EXPERT_MODE_PDISK_WIDTH,
-        };
-    }
-
-    if (pdisksGroupBy === PDisksGroupBy.Decommit) {
-        if (!hasWhiteboardData && pDisk.DecommitStatus === undefined) {
-            return getMissingStatusDisplayState(mode);
-        }
-
-        const decommitDisplayState = getPDiskDecommitDisplayState(pDisk.DecommitStatus);
-
-        return {
-            ...decommitDisplayState,
-            icon:
-                pDisk.DecommitStatus === undefined ? CircleQuestionFill : decommitDisplayState.icon,
-            mode,
-            isLegendInactive: false,
-            showNoDataPlaceholder: false,
-            allocatedPercent: undefined,
-            width: EXPERT_MODE_PDISK_WIDTH,
-        };
-    }
-
-    if (pdisksGroupBy === PDisksGroupBy.Maintenance) {
-        if (!hasWhiteboardData && pDisk.MaintenanceStatus === undefined) {
-            return getMissingStatusDisplayState(mode);
-        }
-
-        const maintenanceDisplayState = getPDiskMaintenanceDisplayState(pDisk.MaintenanceStatus);
-
-        return {
-            ...maintenanceDisplayState,
-            icon:
-                pDisk.MaintenanceStatus === undefined
-                    ? CircleQuestionFill
-                    : maintenanceDisplayState.icon,
-            mode,
-            isLegendInactive: false,
-            showNoDataPlaceholder: false,
-            allocatedPercent: undefined,
-            width: EXPERT_MODE_PDISK_WIDTH,
-        };
+function getBSCStatusDisplayState(
+    pDisk: Parameters<PDiskDisplayStateGetter>[0],
+    mode: DiskDisplayMode | undefined,
+    hasWhiteboardData: boolean,
+) {
+    let status: string | undefined;
+    let displayState: ReturnType<typeof getPDiskDriveDisplayState>;
+
+    switch (mode) {
+        case 'drive':
+            status = pDisk.DriveStatus;
+            displayState = getPDiskDriveDisplayState(pDisk.DriveStatus);
+            break;
+        case 'decommit':
+            status = pDisk.DecommitStatus;
+            displayState = getPDiskDecommitDisplayState(pDisk.DecommitStatus);
+            break;
+        case 'maintenance':
+            status = pDisk.MaintenanceStatus;
+            displayState = getPDiskMaintenanceDisplayState(pDisk.MaintenanceStatus);
+            break;
+        default:
+            return undefined;
     }
 
-    return undefined;
+    return {
+        ...displayState,
+        icon: status === undefined && hasWhiteboardData ? CircleQuestionFill : displayState.icon,
+    };
 }
 
-export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
+function usePDiskDisplayStateGetter(
+    pdisksGroupBy: PDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+): PDiskDisplayStateGetter {
     const isExpertMode = useIsStorageExpertMode();
-    const pdisksGroupBy = usePDisksGroupByParam();
-    const inactiveAlerts = useSpaceLegendSelection('pdisks');
+    const inactiveAlerts = useSpaceLegendSelection(selectionScope);
 
     return React.useCallback(
         (pDisk) => {
@@ -255,31 +206,25 @@ export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
             }
 
             const mode = getMode(pdisksGroupBy);
-            const hasWhiteboardData = pDisk.WhiteboardSize !== undefined;
-
-            if (
-                pdisksGroupBy === PDisksGroupBy.All &&
-                !hasWhiteboardData &&
-                !hasBSCStatusData(pDisk)
-            ) {
-                return getMissingAllModeDisplayState(pDisk);
-            }
+            const hasWhiteboardData = pDisk.HasWhiteboardData ?? pDisk.WhiteboardSize !== undefined;
 
-            if (!hasWhiteboardData && requiresWhiteboardData(pdisksGroupBy)) {
-                return getMissingStatusDisplayState(mode);
+            if (!hasWhiteboardData) {
+                return getMissingPDiskDisplayState(pDisk, mode, inactiveAlerts);
             }
 
             const allocatedPercent = getAllocatedPercent(pDisk);
 
             if (pdisksGroupBy === PDisksGroupBy.Space) {
                 const capacityAlert = pDisk.PDiskCapacityAlert;
+                const isCapacityAlertInactive =
+                    isCapacityAlert(capacityAlert) && inactiveAlerts.has(capacityAlert);
 
                 return {
                     severity: calculateSpaceSeverity({CapacityAlert: capacityAlert}),
                     icon: calculateSpaceIcon({CapacityAlert: capacityAlert}),
                     mode,
-                    isLegendInactive:
-                        isCapacityAlert(capacityAlert) && inactiveAlerts.has(capacityAlert),
+                    isLegendInactive: isCapacityAlertInactive,
+                    borderless: isCapacityAlertInactive,
                     showNoDataPlaceholder: false,
                     allocatedPercent,
                     width: EXPERT_MODE_PDISK_WIDTH,
@@ -290,15 +235,17 @@ export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
                 return getAllModeDisplayState(pDisk, inactiveAlerts);
             }
 
-            const statusDisplayState = getStatusModeDisplayState({
-                hasWhiteboardData,
-                mode,
-                pDisk,
-                pdisksGroupBy,
-            });
+            const statusDisplayState = getBSCStatusDisplayState(pDisk, mode, hasWhiteboardData);
 
             if (statusDisplayState) {
-                return statusDisplayState;
+                return {
+                    ...statusDisplayState,
+                    mode,
+                    isLegendInactive: false,
+                    showNoDataPlaceholder: false,
+                    allocatedPercent: undefined,
+                    width: EXPERT_MODE_PDISK_WIDTH,
+                };
             }
 
             if (pdisksGroupBy === PDisksGroupBy.Device) {
@@ -335,3 +282,15 @@ export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
         [inactiveAlerts, isExpertMode, pdisksGroupBy],
     );
 }
+
+export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
+    const pdisksGroupBy = usePDisksGroupByParam();
+
+    return usePDiskDisplayStateGetter(pdisksGroupBy, 'pdisks');
+}
+
+export function useStorageNodesPDiskDisplayStateGetter(): PDiskDisplayStateGetter {
+    const pdisksGroupBy = useNodesPDisksGroupByParam();
+
+    return usePDiskDisplayStateGetter(pdisksGroupBy, 'nodes-pdisks');
+}