feat: vdisks in 2 rows

src/containers/Storage/Disks/Disks.scss

@@ -26,7 +26,7 @@
     }
 
     &__pdisk-item {
-        width: 80px;
+        min-width: 80px;
     }
     &__pdisk-progress-bar {
         --progress-bar-full-height: 20px;

src/containers/Storage/PDisk/PDisk.scss

@@ -1,28 +1,42 @@
 .pdisk-storage {
+    --pdisk-vdisk-width: 3px;
+    --pdisk-gap-width: 2px;
+
     position: relative;
 
-    width: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    width: calc(
+        var(--pdisk-max-slots, 1) * var(--pdisk-vdisk-width) + (var(--pdisk-max-slots, 1) - 1) *
+            var(--pdisk-gap-width)
+    );
+    min-width: 120px;
 
     &__content {
         position: relative;
 
         display: block;
+        flex: 1;
 
-        border-radius: 4px; // to match interactive area with disk shape
+        border-radius: 4px;
     }
 
     &__vdisks {
         display: flex;
-        // this breaks disks relative sizes, but disks rarely exceed one line
-        flex-wrap: wrap;
-        gap: 2px;
+        flex: 0 0 auto;
+        gap: var(--pdisk-gap-width);
 
         margin-bottom: 4px;
+
+        white-space: nowrap;
     }
 
     &__vdisks-item {
-        flex-basis: 3px;
-        flex-shrink: 0;
+        flex: 0 0 var(--pdisk-vdisk-width);
+
+        min-width: var(--pdisk-vdisk-width);
 
         .stack__layer {
             .data-table__row:hover & {

src/containers/Storage/PDisk/PDisk.tsx

@@ -16,6 +16,8 @@ import './PDisk.scss';
 
 const b = cn('pdisk-storage');
 
+const PDISK_MAX_SLOTS_CSS_VAR = '--pdisk-max-slots';
+
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: PreparedVDisk[];
@@ -25,6 +27,7 @@ interface PDiskProps {
     className?: string;
     progressBarClassName?: string;
     viewContext?: StorageViewContext;
+    maximumSlotsPerDisk?: string;
 }
 
 export const PDisk = ({
@@ -36,6 +39,7 @@ export const PDisk = ({
     className,
     progressBarClassName,
     viewContext,
+    maximumSlotsPerDisk,
 }: PDiskProps) => {
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
@@ -73,7 +77,17 @@ export const PDisk = ({
     }
 
     return (
-        <div className={b(null, className)} ref={anchorRef}>
+        <div
+            className={b(null, className)}
+            ref={anchorRef}
+            style={
+                maximumSlotsPerDisk
+                    ? ({
+                          [PDISK_MAX_SLOTS_CSS_VAR]: maximumSlotsPerDisk,
+                      } as React.CSSProperties)
+                    : undefined
+            }
+        >
             {renderVDisks()}
             <HoverPopup
                 showPopup={showPopup}

src/containers/Storage/StorageNodes/columns/StorageNodesColumns.scss

@@ -5,20 +5,14 @@
 
     &__pdisks-wrapper {
         display: flex;
-        justify-content: left;
-        align-items: flex-end;
+        gap: 10px;
 
-        width: max-content;
+        width: 100%;
         height: 40px;
     }
-    &__pdisks-item {
-        flex-grow: 1;
-
-        max-width: 200px;
-        margin-right: 10px;
 
-        &:last-child {
-            margin-right: 0px;
-        }
+    &__pdisks-item {
+        display: flex;
+        flex-shrink: 0;
     }
 }

src/containers/Storage/StorageNodes/columns/columns.tsx

@@ -45,7 +45,12 @@ const getPDisksColumn = ({viewContext}: GetStorageNodesColumnsParams): StorageNo
 
                         return (
                             <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                                <PDisk data={pDisk} vDisks={vDisks} viewContext={viewContext} />
+                                <PDisk
+                                    data={pDisk}
+                                    vDisks={vDisks}
+                                    viewContext={viewContext}
+                                    maximumSlotsPerDisk={row.MaximumSlotsPerDisk}
+                                />
                             </div>
                         );
                     })}

src/store/reducers/storage/__tests__/calculateMaximumSlotsPerDisk.test.ts

@@ -0,0 +1,190 @@
+import type {TNodeInfo} from '../../../../types/api/nodes';
+import {TPDiskState} from '../../../../types/api/pdisk';
+import {EVDiskState} from '../../../../types/api/vdisk';
+import type {TVDiskID} from '../../../../types/api/vdisk';
+import {calculateMaximumSlotsPerDisk} from '../utils';
+
+const createVDiskId = (id: number): TVDiskID => ({
+    GroupID: id,
+    GroupGeneration: 1,
+    Ring: 1,
+    Domain: 1,
+    VDisk: id,
+});
+
+describe('calculateMaximumSlotsPerDisk', () => {
+    it('should return providedMaximumSlotsPerDisk when it is provided', () => {
+        const nodes: TNodeInfo[] = [];
+        const providedMaximumSlotsPerDisk = '5';
+
+        expect(calculateMaximumSlotsPerDisk(nodes, providedMaximumSlotsPerDisk)).toBe('5');
+    });
+
+    it('should return "1" for empty nodes array', () => {
+        const nodes: TNodeInfo[] = [];
+
+        expect(calculateMaximumSlotsPerDisk(nodes)).toBe('1');
+    });
+
+    it('should return "1" for undefined nodes', () => {
+        expect(calculateMaximumSlotsPerDisk(undefined)).toBe('1');
+    });
+
+    it('should return "1" for nodes without PDisks or VDisks', () => {
+        const nodes: TNodeInfo[] = [
+            {
+                NodeId: 1,
+                SystemState: {},
+            },
+        ];
+
+        expect(calculateMaximumSlotsPerDisk(nodes)).toBe('1');
+    });
+
+    it('should calculate maximum slots correctly for single node with one PDisk and multiple VDisks', () => {
+        const nodes: TNodeInfo[] = [
+            {
+                NodeId: 1,
+                SystemState: {},
+                PDisks: [
+                    {
+                        PDiskId: 1,
+                        State: TPDiskState.Normal,
+                    },
+                ],
+                VDisks: [
+                    {
+                        VDiskId: createVDiskId(1),
+                        PDiskId: 1,
+                        VDiskState: EVDiskState.OK,
+                    },
+                    {
+                        VDiskId: createVDiskId(2),
+                        PDiskId: 1,
+                        VDiskState: EVDiskState.OK,
+                    },
+                ],
+            },
+        ];
+
+        expect(calculateMaximumSlotsPerDisk(nodes)).toBe('2');
+    });
+
+    it('should calculate maximum slots across multiple nodes', () => {
+        const nodes: TNodeInfo[] = [
+            {
+                NodeId: 1,
+                SystemState: {},
+                PDisks: [
+                    {
+                        PDiskId: 1,
+                        State: TPDiskState.Normal,
+                    },
+                ],
+                VDisks: [
+                    {
+                        VDiskId: createVDiskId(1),
+                        PDiskId: 1,
+                        VDiskState: EVDiskState.OK,
+                    },
+                ],
+            },
+            {
+                NodeId: 2,
+                SystemState: {},
+                PDisks: [
+                    {
+                        PDiskId: 2,
+                        State: TPDiskState.Normal,
+                    },
+                ],
+                VDisks: [
+                    {
+                        VDiskId: createVDiskId(2),
+                        PDiskId: 2,
+                        VDiskState: EVDiskState.OK,
+                    },
+                    {
+                        VDiskId: createVDiskId(3),
+                        PDiskId: 2,
+                        VDiskState: EVDiskState.OK,
+                    },
+                    {
+                        VDiskId: createVDiskId(4),
+                        PDiskId: 2,
+                        VDiskState: EVDiskState.OK,
+                    },
+                ],
+            },
+        ];
+
+        expect(calculateMaximumSlotsPerDisk(nodes)).toBe('3');
+    });
+
+    it('should handle nodes with multiple PDisks', () => {
+        const nodes: TNodeInfo[] = [
+            {
+                NodeId: 1,
+                SystemState: {},
+                PDisks: [
+                    {
+                        PDiskId: 1,
+                        State: TPDiskState.Normal,
+                    },
+                    {
+                        PDiskId: 2,
+                        State: TPDiskState.Normal,
+                    },
+                ],
+                VDisks: [
+                    {
+                        VDiskId: createVDiskId(1),
+                        PDiskId: 1,
+                        VDiskState: EVDiskState.OK,
+                    },
+                    {
+                        VDiskId: createVDiskId(2),
+                        PDiskId: 1,
+                        VDiskState: EVDiskState.OK,
+                    },
+                    {
+                        VDiskId: createVDiskId(3),
+                        PDiskId: 2,
+                        VDiskState: EVDiskState.OK,
+                    },
+                ],
+            },
+        ];
+
+        expect(calculateMaximumSlotsPerDisk(nodes)).toBe('2');
+    });
+
+    it('should ignore VDisks with non-matching PDiskId', () => {
+        const nodes: TNodeInfo[] = [
+            {
+                NodeId: 1,
+                SystemState: {},
+                PDisks: [
+                    {
+                        PDiskId: 1,
+                        State: TPDiskState.Normal,
+                    },
+                ],
+                VDisks: [
+                    {
+                        VDiskId: createVDiskId(1),
+                        PDiskId: 1,
+                        VDiskState: EVDiskState.OK,
+                    },
+                    {
+                        VDiskId: createVDiskId(2),
+                        PDiskId: 2, // Non-matching PDiskId
+                        VDiskState: EVDiskState.OK,
+                    },
+                ],
+            },
+        ];
+
+        expect(calculateMaximumSlotsPerDisk(nodes)).toBe('1');
+    });
+});

src/store/reducers/storage/types.ts

@@ -35,6 +35,7 @@ export interface PreparedStorageNode extends PreparedNodeSystemState {
     VDisks?: PreparedVDisk[];
 
     Missing: number;
+    MaximumSlotsPerDisk: string;
 }
 
 export interface PreparedStorageGroupFilters {