feat(Storage): display vdisks over pdisks

Author: ariser

src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,7 +1,7 @@
 .storage-disk-progress-bar {
     $block: &;
 
-    $border-width: 2px;
+    $border-width: 1px;
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
@@ -10,7 +10,7 @@
     display: block;
 
     min-width: 50px;
-    height: var(--yc-text-body-2-line-height);
+    height: var(--yc-text-body-3-line-height);
 
     text-align: center;
 
@@ -19,6 +19,17 @@
     border-radius: $outer-border-radius;
     background-color: var(--yc-color-infographics-misc-light);
 
+    &_compact {
+        min-width: 0;
+        height: 12px;
+
+        border-radius: 2px;
+
+        #{$block}__filled {
+            border-radius: 1px;
+        }
+    }
+
     #{$block}__filled {
         background-color: var(--yc-color-infographics-misc-medium);
     }
@@ -89,7 +100,7 @@
 
         font-size: var(--yc-text-body-1-font-size);
         // bar height minus borders
-        line-height: calc(var(--yc-text-body-2-line-height) - #{$border-width * 2});
+        line-height: calc(var(--yc-text-body-3-line-height) - #{$border-width * 2});
 
         color: inherit;
     }

src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -27,15 +27,21 @@ const severityToColor = Object.entries(EDiskStateSeverity).reduce(
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
     severity?: EDiskStateSeverity;
+    compact?: boolean;
 }
 
 export function DiskStateProgressBar({
     diskAllocatedPercent = -1,
     severity,
+    compact,
 }: DiskStateProgressBarProps) {
     const inverted = useSelector((state) => JSON.parse(getSettingValue(state, INVERTED_DISKS_KEY)));
 
     const renderAllocatedPercent = () => {
+        if (compact) {
+            return <div className={b('filled')} style={{width: '100%'}} />;
+        }
+
         return (
             diskAllocatedPercent >= 0 && (
                 <React.Fragment>
@@ -55,7 +61,7 @@ export function DiskStateProgressBar({
         );
     };
 
-    const mods: Record<string, boolean | undefined> = {inverted};
+    const mods: Record<string, boolean | undefined> = {inverted, compact};
 
     const color = severity !== undefined && severityToColor[severity];
     if (color) {

src/containers/Storage/PDisk/PDisk.scss

@@ -3,18 +3,33 @@
 
     width: 120px;
 
-    border-radius: 4px; // to match interactive area with disk shape
-
     &__content {
+        position: relative;
+
         border-radius: 4px; // to match interactive area with disk shape
     }
 
+    &__vdisks {
+        display: flex;
+        // this breaks disks relative sizes, but disks rarely exceed one line
+        flex-wrap: wrap;
+        gap: 2px;
+
+        margin-bottom: 4px;
+    }
+
+    &__vdisks-item {
+        flex-basis: 5px;
+        flex-shrink: 0;
+    }
+
     &__media-type {
         position: absolute;
         top: 0;
         right: 4px;
 
         font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-3-line-height);
 
         color: var(--yc-color-text-secondary);
     }

src/containers/Storage/PDisk/PDisk.tsx

@@ -4,13 +4,18 @@ import cn from 'bem-cn-lite';
 import {InternalLink} from '../../../components/InternalLink';
 
 import routes, {createHref} from '../../../routes';
+import {getVDisksForPDisk} from '../../../store/reducers/storage';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
+import {TVDiskStateInfo} from '../../../types/api/vdisk';
+import {stringifyVdiskId} from '../../../utils';
+import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
 
 import {STRUCTURE} from '../../Node/NodePages';
 
 import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
 import {PDiskPopup} from '../PDiskPopup';
+import {VDisk} from '../VDisk';
 
 import {NOT_AVAILABLE_SEVERITY} from '../utils';
 
@@ -51,6 +56,12 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
     // NodeId in data is required for the popup
     const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
 
+    const vdisks: TVDiskStateInfo[] | undefined = useTypedSelector((state) =>
+        // @ts-expect-error selector is correct, but js infers broken type
+        // unignore after rewriting reducer in ts
+        getVDisksForPDisk(state, nodeId, data.PDiskId),
+    );
+
     const [severity, setSeverity] = useState(getStateSeverity(data.State));
     const [isPopupVisible, setIsPopupVisible] = useState(false);
 
@@ -83,17 +94,44 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
             : undefined;
     }, [data]);
 
+    const renderVDisks = () => {
+        if (!vdisks?.length) {
+            return null;
+        }
+
+        return (
+            <div className={b('vdisks')}>
+                {vdisks.map((vdisk) => (
+                    <div
+                        key={stringifyVdiskId(vdisk.VDiskId)}
+                        className={b('vdisks-item')}
+                        style={{
+                            // 1 is small enough for empty disks to be of the minimum width
+                            // but if all of them are empty, `flex-grow: 1` would size them evenly
+                            flexGrow: (Number(vdisk.AllocatedSize) || 1),
+                        }}
+                    >
+                        <VDisk data={vdisk} compact />
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
     return (
         <React.Fragment>
             <PDiskPopup data={data} anchorRef={anchor} open={isPopupVisible} />
-            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
+            <div className={b()} ref={anchor}>
+                {renderVDisks()}
                 <InternalLink
                     to={createHref(
                         routes.node,
                         {id: nodeId, activeTab: STRUCTURE},
                         {pdiskId: data.PDiskId || ''},
                     )}
                     className={b('content')}
+                    onMouseEnter={showPopup}
+                    onMouseLeave={hidePopup}
                 >
                     <DiskStateProgressBar
                         diskAllocatedPercent={pdiskAllocatedPercent}

src/containers/Storage/StorageNodes/StorageNodes.scss

@@ -4,6 +4,7 @@
         overflow-x: auto;
         overflow-y: hidden;
         justify-content: left;
+        align-items: flex-end;
 
         width: max-content;
     }

src/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -183,7 +183,10 @@ function StorageNodes({
             theme="yandex-cloud"
             data={data}
             columns={columns}
-            settings={tableSettings}
+            settings={{
+                ...tableSettings,
+                dynamicRenderType: 'variable',
+            }}
             initialSortOrder={setSortOrder(visibleEntities)}
             emptyDataMessage={i18n('empty.default')}
         />

src/containers/Storage/VDisk/VDisk.tsx

@@ -49,9 +49,10 @@ interface VDiskProps {
     data?: TVDiskStateInfo;
     poolName?: string;
     nodes?: NodesHosts;
+    compact?: boolean;
 }
 
-export const VDisk = ({data = {}, poolName, nodes}: VDiskProps) => {
+export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
     const [severity, setSeverity] = useState(getStateSeverity(data.VDiskState));
     const [isPopupVisible, setIsPopupVisible] = useState(false);
 
@@ -131,12 +132,14 @@ export const VDisk = ({data = {}, poolName, nodes}: VDiskProps) => {
                         <DiskStateProgressBar
                             diskAllocatedPercent={vdiskAllocatedPercent}
                             severity={severity}
+                            compact={compact}
                         />
                     </InternalLink>
                 ) : (
                     <DiskStateProgressBar
                         diskAllocatedPercent={vdiskAllocatedPercent}
                         severity={severity}
+                        compact={compact}
                     />
                 )}
             </div>

src/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -128,7 +128,7 @@ export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) =
         >
             {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
             <InfoViewer title="VDisk" info={vdiskInfo} size="s" />
-            <InfoViewer title="PDisk" info={pdiskInfo} size="s" />
+            {pdiskInfo && <InfoViewer title="PDisk" info={pdiskInfo} size="s" />}
         </Popup>
     );
 };

src/store/reducers/storage.js

@@ -317,6 +317,19 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
     });
 });
 
+export const getVDisksForPDisk = createSelector(
+    getStorageNodes,
+    (_state, nodeId) => nodeId,
+    (_state, _nodeId, pdiskId) => pdiskId,
+    (storageNodes, nodeId, pdiskId) => {
+        const targetNode = storageNodes?.find((node) => node.NodeId === nodeId);
+        return targetNode?.VDisks?.filter((vdisk) => vdisk.PDiskId === pdiskId).map((data) => ({
+            ...data,
+            NodeId: nodeId,
+        }));
+    },
+);
+
 export const getFlatListStorage = createSelector(
     [getStorageType, getFlatListStorageGroups, getFlatListStorageNodes],
     (storageType, groupsList, nodesList) => {

src/types/api/nodes.ts

@@ -1,6 +1,7 @@
 import {EFlag} from './enums';
 import {TPDiskStateInfo} from './pdisk';
 import {TTabletStateInfo} from './tablet';
+import {TVDiskStateInfo} from './vdisk';
 
 // endpoint: /viewer/json/nodes
 // source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
@@ -19,6 +20,7 @@ export interface TNodeInfo {
     NodeId: number;
     SystemState: TSystemStateInfo;
     PDisks?: TPDiskStateInfo[];
+    VDisks?: TVDiskStateInfo[];
     Tablets?: TTabletStateInfo[];
 }