ydb-embedded-ui 22.0.0 → 22.2.0

package/src/containers/Storage/PDisks/PDisks.tsx

@@ -1,56 +1,191 @@
 import React from 'react';
 
+import {isNil} from 'lodash';
+
 import {cn} from '../../../utils/cn';
+import type {
+    PDiskDisplayStateGetter,
+    VDiskDisplayStateGetter,
+} from '../../../utils/disks/displayState';
+import {VDisksGroupBy} from '../../../utils/disks/groupBy';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
-import {PDisk} from '../PDisk/';
+import {PDiskWithVDisks} from '../PDisk/';
 import type {StorageViewContext} from '../types';
+import {useStorageNodesPDiskDisplayStateGetter} from '../useStoragePDiskDisplayStateGetter';
+import {useNodesVDisksGroupByParam} from '../useStorageQueryParams';
+import {useStorageNodesVDiskDisplayStateGetter} from '../useStorageVDiskDisplayStateGetter';
 import {isPdiskActive} from '../utils';
+import {useVirtualizedDiskList} from '../utils/useVirtualizedDiskList';
 
 import './PDisks.scss';
 
 const b = cn('ydb-storage-pdisks');
+const EMPTY_VDISKS: PreparedVDisk[] = [];
 
 interface PDisksProps {
     pDisks?: PreparedPDisk[];
     vDisks?: PreparedVDisk[];
     viewContext?: StorageViewContext;
     pDiskWidth?: number;
+    pDiskHeight?: number;
+    expertMode?: boolean;
+}
+
+interface PDiskItemProps {
+    pDisk: PreparedPDisk;
+    vDisks?: PreparedVDisk[];
+    viewContext?: StorageViewContext;
+    pDiskWidth?: number;
+    expertMode: boolean;
+    isAllVDisksLayout: boolean;
+    getPDiskDisplayState?: PDiskDisplayStateGetter;
+    getVDiskDisplayState?: VDiskDisplayStateGetter;
+    highlighted: boolean;
+    highlightedDisk?: string;
+    setHighlightedDisk: (id?: string) => void;
 }
 
-export function PDisks({pDisks = [], vDisks = [], viewContext, pDiskWidth}: PDisksProps) {
+const PDiskItem = React.memo(function PDiskItem({
+    pDisk,
+    vDisks,
+    viewContext,
+    pDiskWidth,
+    expertMode,
+    isAllVDisksLayout,
+    getPDiskDisplayState,
+    getVDiskDisplayState,
+    highlighted,
+    highlightedDisk,
+    setHighlightedDisk,
+}: PDiskItemProps) {
+    const id = pDisk.StringifiedId;
+    const onShowPopup = React.useCallback(() => setHighlightedDisk(id), [id, setHighlightedDisk]);
+    const onHidePopup = React.useCallback(
+        () => setHighlightedDisk(undefined),
+        [setHighlightedDisk],
+    );
+
+    return (
+        <PDiskWithVDisks
+            data={pDisk}
+            inactive={!isPdiskActive(pDisk, viewContext)}
+            vDisks={vDisks}
+            viewContext={viewContext}
+            width={pDiskWidth}
+            withIcon={expertMode}
+            withVDiskIcons={expertMode}
+            getVDiskDisplayState={getVDiskDisplayState}
+            expertMode={expertMode}
+            isAllVDisksLayout={isAllVDisksLayout}
+            showTypeLabel={expertMode}
+            getDisplayState={getPDiskDisplayState}
+            showPopup={highlighted}
+            onShowPopup={onShowPopup}
+            onHidePopup={onHidePopup}
+            highlighted={highlighted}
+            highlightedDisk={highlightedDisk}
+            setHighlightedDisk={setHighlightedDisk}
+        />
+    );
+});
+
+export const PDisks = React.memo(function PDisks({
+    pDisks = [],
+    vDisks = EMPTY_VDISKS,
+    viewContext,
+    pDiskWidth,
+    pDiskHeight,
+    expertMode = false,
+}: PDisksProps) {
     const [highlightedDisk, setHighlightedDisk] = React.useState<string | undefined>();
+    const {containerRef, shouldRenderDisk, getPlaceholderProps} = useVirtualizedDiskList(
+        pDisks,
+        pDisks.every((disk) => !isNil(disk.NodeId) && !isNil(disk.PDiskId)),
+    );
+    const vDisksGroupBy = useNodesVDisksGroupByParam();
+    const isAllVDisksLayout = expertMode && vDisksGroupBy === VDisksGroupBy.All;
+    const getStoragePDiskDisplayState = useStorageNodesPDiskDisplayStateGetter();
+    const getStorageVDiskDisplayState = useStorageNodesVDiskDisplayStateGetter();
+    const vDisksByPDisk = React.useMemo(() => {
+        const disks = new Map<PreparedVDisk['PDiskId'], PreparedVDisk[]>();
+        for (const vDisk of vDisks) {
+            const relatedDisks = disks.get(vDisk.PDiskId);
+            if (relatedDisks) {
+                relatedDisks.push(vDisk);
+            } else {
+                disks.set(vDisk.PDiskId, [vDisk]);
+            }
+        }
+        return disks;
+    }, [vDisks]);
+
+    React.useEffect(() => {
+        setHighlightedDisk((id) =>
+            pDisks.some((disk) => disk.StringifiedId === id) ||
+            vDisks.some((disk) => disk.StringifiedId === id)
+                ? id
+                : undefined,
+        );
+    }, [pDisks, vDisks]);
 
     if (!pDisks.length) {
         return null;
     }
 
     return (
-        <div className={b('pdisks-wrapper')}>
-            {pDisks.map((pDisk) => {
+        <div className={b('pdisks-wrapper')} ref={containerRef} style={{height: pDiskHeight}}>
+            {pDisks.map((pDisk, index) => {
                 const id = pDisk.StringifiedId;
-
-                const relatedVDisks = vDisks.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
-
                 const highlighted = id !== undefined && highlightedDisk === id;
+                const relatedVDisks = vDisksByPDisk.get(pDisk.PDiskId);
+                // Keep the popup anchor mounted until interaction and delayed close finish.
+                const hasOpenPopup =
+                    highlighted ||
+                    Boolean(
+                        highlightedDisk &&
+                            relatedVDisks?.some((vDisk) => vDisk.StringifiedId === highlightedDisk),
+                    );
 
                 return (
-                    <div className={b('pdisks-item')} key={id}>
-                        <PDisk
-                            data={pDisk}
-                            inactive={!isPdiskActive(pDisk, viewContext)}
-                            vDisks={relatedVDisks}
-                            viewContext={viewContext}
-                            width={pDiskWidth}
-                            showPopup={highlighted}
-                            onShowPopup={() => setHighlightedDisk(id)}
-                            onHidePopup={() => setHighlightedDisk(undefined)}
-                            highlighted={highlighted}
-                            highlightedDisk={highlightedDisk}
-                            setHighlightedDisk={setHighlightedDisk}
-                        />
+                    // Keep the full row geometry while offscreen disks are unmounted.
+                    <div
+                        className={b('pdisks-item')}
+                        key={id || index}
+                        data-disk-id={id}
+                        style={{width: pDiskWidth}}
+                        tabIndex={-1}
+                        {...(hasOpenPopup ? undefined : getPlaceholderProps(index))}
+                    >
+                        {(shouldRenderDisk(index) || hasOpenPopup) && (
+                            <PDiskItem
+                                pDisk={pDisk}
+                                vDisks={relatedVDisks}
+                                viewContext={viewContext}
+                                pDiskWidth={pDiskWidth}
+                                expertMode={expertMode}
+                                isAllVDisksLayout={isAllVDisksLayout}
+                                getPDiskDisplayState={
+                                    expertMode ? getStoragePDiskDisplayState : undefined
+                                }
+                                getVDiskDisplayState={
+                                    expertMode ? getStorageVDiskDisplayState : undefined
+                                }
+                                highlighted={highlighted}
+                                highlightedDisk={
+                                    relatedVDisks?.some(
+                                        (vDisk) =>
+                                            !vDisk.StringifiedId ||
+                                            vDisk.StringifiedId === highlightedDisk,
+                                    )
+                                        ? highlightedDisk
+                                        : undefined
+                                }
+                                setHighlightedDisk={setHighlightedDisk}
+                            />
+                        )}
                     </div>
                 );
             })}
         </div>
     );
-}
+});

package/src/containers/Storage/PaginatedStorage.tsx

@@ -4,6 +4,8 @@ import {PaginatedStorageGroups} from './PaginatedStorageGroups';
 import {PaginatedStorageNodes} from './PaginatedStorageNodes';
 import type {StorageViewContext} from './types';
 import {
+    useSaveNodesPDisksGroupBy,
+    useSaveNodesVDisksGroupBy,
     useSavePDisksGroupBy,
     useSaveStorageExpertMode,
     useSaveStorageType,
@@ -31,6 +33,8 @@ export const PaginatedStorage = (props: PaginatedStorageProps) => {
     useSaveStorageExpertMode();
     useSaveVDisksGroupBy();
     useSavePDisksGroupBy();
+    useSaveNodesVDisksGroupBy();
+    useSaveNodesPDisksGroupBy();
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const isNodes = storageType === 'nodes';

package/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx

@@ -61,6 +61,7 @@ export const StorageGroupGroup = React.memo(function StorageGroupGroup({
             onIsExpandedChange={onIsExpandedChange}
         >
             <PaginatedTableWithLayout
+                inheritKeyboardNavigation
                 initialState={{sortParams: undefined}}
                 table={
                     <PaginatedStorageGroupsTable

package/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx

@@ -19,7 +19,7 @@ import {
     getStorageGroupsGroupByOptions,
 } from '../PaginatedStorageGroupsTable/columns/constants';
 import type {StorageGroupsColumn} from '../PaginatedStorageGroupsTable/columns/types';
-import {StorageExpertModePanel} from '../StorageExpertModePanel/StorageExpertModePanel';
+import {StorageGroupsExpertModePanel} from '../StorageExpertModePanel/StorageGroupsExpertModePanel';
 import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
 import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
 import i18n from '../i18n';
@@ -90,6 +90,7 @@ export function StorageGroupsControls({
         <Flex direction="column" gap={2} width="100%">
             <Flex gap={2} alignItems="center" wrap className={b('controls-row')}>
                 <Search
+                    tableFilter
                     value={groupsSearchValue}
                     onChange={handleTextFilterGroupsChange}
                     placeholder={i18n('controls_groups-search-placeholder')}
@@ -137,7 +138,7 @@ export function StorageGroupsControls({
                 ) : null}
             </Flex>
             {canUseStorageExpertMode && isStorageExpertMode && isVDisksPDisksColumnVisible ? (
-                <StorageExpertModePanel />
+                <StorageGroupsExpertModePanel />
             ) : null}
         </Flex>
     );

package/src/containers/Storage/PaginatedStorageGroupsTable/PaginatedStorageGroupsTable.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 
+import {useHistory} from 'react-router-dom';
+
 import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
 import type {RenderErrorMessage} from '../../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
+import {useStorageGroupPath} from '../../../routes';
 import {useCapabilitiesLoaded} from '../../../store/reducers/capabilities/hooks';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {VisibleEntities} from '../../../store/reducers/storage/types';
 import type {GroupsGroupByField} from '../../../types/api/storage';
 import {cn} from '../../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../utils/constants';
 
 import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage';
 import {STORAGE_GROUPS_COLUMNS_IDS, STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
@@ -61,6 +65,8 @@ export const PaginatedStorageGroupsTable = ({
     renderErrorMessage,
     initialEntitiesCount,
 }: PaginatedStorageGroupsTableProps) => {
+    const history = useHistory();
+    const getStorageGroupPath = useStorageGroupPath();
     const capabilitiesLoaded = useCapabilitiesLoaded();
 
     const fetchData = useGroupsGetter();
@@ -109,6 +115,13 @@ export const PaginatedStorageGroupsTable = ({
     return (
         <LoaderWrapper loading={!capabilitiesLoaded}>
             <ResizeablePaginatedTable
+                getKeyboardRowKey={(group) => group.GroupId}
+                getKeyboardRowLabel={(group) => group.GroupId?.toString() || EMPTY_DATA_PLACEHOLDER}
+                onKeyboardActivate={(group) => {
+                    if (group.GroupId !== undefined) {
+                        history.push(getStorageGroupPath(group.GroupId));
+                    }
+                }}
                 columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
                 scrollContainerRef={scrollContainerRef}
                 columns={columns}

package/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx

@@ -16,7 +16,7 @@ import {TableGroup} from '../TableGroup/TableGroup';
 import {useExpandedGroups} from '../TableGroup/useExpandedTableGroups';
 import i18n from '../i18n';
 import {b} from '../shared';
-import {useStorageQueryParams} from '../useStorageQueryParams';
+import {useIsStorageExpertMode, useStorageQueryParams} from '../useStorageQueryParams';
 import {useStorageColumnsSettings} from '../utils';
 
 import {StorageNodesControls} from './StorageNodesControls';
@@ -39,6 +39,7 @@ interface StorageNodeGroupProps {
     onIsExpandedChange: (name: string, isExpanded: boolean) => void;
     handleShowAllNodes: VoidFunction;
     onDataFetched: (data: any) => void;
+    rowHeight: number;
 }
 
 export const StorageNodeGroup = React.memo(function StorageNodeGroup({
@@ -55,6 +56,7 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
     onIsExpandedChange,
     handleShowAllNodes,
     onDataFetched,
+    rowHeight,
 }: StorageNodeGroupProps) {
     return (
         <TableGroup
@@ -66,6 +68,7 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
             onIsExpandedChange={onIsExpandedChange}
         >
             <PaginatedTableWithLayout
+                inheritKeyboardNavigation
                 initialState={{sortParams: undefined}}
                 table={
                     <PaginatedStorageNodesTable
@@ -82,6 +85,7 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
                         renderErrorMessage={renderPaginatedTableErrorMessage}
                         columns={columns}
                         initialEntitiesCount={count}
+                        rowHeight={rowHeight}
                         onDataFetched={onDataFetched}
                     />
                 }
@@ -105,7 +109,10 @@ export function GroupedStorageNodesComponent({
     const {nodesSearchValue, storageNodesGroupByParam, handleShowAllNodes} =
         useStorageQueryParams();
 
-    const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
+    const expertMode = useIsStorageExpertMode();
+    const {handleDataFetched, columnsSettings, rowHeight} = useStorageColumnsSettings({
+        expertMode,
+    });
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
         viewContext,
@@ -173,6 +180,7 @@ export function GroupedStorageNodesComponent({
                         onIsExpandedChange={setIsGroupExpanded}
                         handleShowAllNodes={handleShowAllNodes}
                         columns={columnsToShow}
+                        rowHeight={rowHeight}
                         onDataFetched={handleDataFetched}
                     />
                 );

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx

@@ -4,7 +4,7 @@ import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabili
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {PaginatedStorageProps} from '../PaginatedStorage';
 import {PaginatedStorageNodesTable} from '../PaginatedStorageNodesTable/PaginatedStorageNodesTable';
-import {useStorageQueryParams} from '../useStorageQueryParams';
+import {useIsStorageExpertMode, useStorageQueryParams} from '../useStorageQueryParams';
 import {useStorageColumnsSettings} from '../utils';
 
 import {StorageNodesControlsWithTableState} from './StorageNodesControls';
@@ -23,7 +23,10 @@ export function StorageNodesComponent({
 
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
 
-    const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
+    const expertMode = useIsStorageExpertMode();
+    const {handleDataFetched, columnsSettings, rowHeight} = useStorageColumnsSettings({
+        expertMode,
+    });
 
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
@@ -60,6 +63,7 @@ export function StorageNodesComponent({
                     renderErrorMessage={renderPaginatedTableErrorMessage}
                     columns={columnsToShow}
                     initialEntitiesCount={initialEntitiesCount}
+                    rowHeight={rowHeight}
                     onDataFetched={handleDataFetched}
                 />
             }

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx

@@ -1,18 +1,26 @@
 import React from 'react';
 
-import {Select, Text} from '@gravity-ui/uikit';
+import {ChartTreemap} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Select, Text} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount';
 import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext';
 import {Search} from '../../../components/Search/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
-import {useBlobStorageCapacityMetricsEnabled} from '../../../store/reducers/capabilities/hooks';
+import {
+    useBlobStorageCapacityMetricsAvailable,
+    useBlobStorageCapacityMetricsEnabled,
+} from '../../../store/reducers/capabilities/hooks';
+import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
+import {useSetting} from '../../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {getStorageNodesGroupByOptions} from '../PaginatedStorageNodesTable/columns/constants';
+import {StorageNodesExpertModePanel} from '../StorageExpertModePanel/StorageNodesExpertModePanel';
 import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
 import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
 import i18n from '../i18n';
 import {b} from '../shared';
-import {useStorageQueryParams} from '../useStorageQueryParams';
+import {useIsStorageExpertMode, useStorageQueryParams} from '../useStorageQueryParams';
 
 interface StorageControlsProps {
     withTypeSelector?: boolean;
@@ -42,8 +50,15 @@ export function StorageNodesControls({
         handleVisibleEntitiesChange,
         handleUptimeFilterChange,
         handleStorageNodesGroupByParamChange,
+        handleStorageExpertModeChange,
     } = useStorageQueryParams();
 
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+    const [storageExpertModeSettingEnabled] = useSetting<boolean>(
+        SETTING_KEYS.ENABLE_STORAGE_EXPERT_MODE,
+    );
+    const isStorageExpertMode = useIsStorageExpertMode();
+    const storageExpertModeAvailable = useBlobStorageCapacityMetricsAvailable();
     const blobMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
 
     const nodesGroupByOptions = React.useMemo(
@@ -55,48 +70,68 @@ export function StorageNodesControls({
         handleStorageNodesGroupByParamChange(value[0]);
     };
 
+    const canUseStorageExpertMode =
+        storageExpertModeAvailable &&
+        storageExpertModeSettingEnabled &&
+        Boolean(isUserAllowedToMakeChanges);
+
     return (
-        <React.Fragment>
-            <Search
-                value={nodesSearchValue}
-                onChange={handleTextFilterNodesChange}
-                placeholder={i18n('controls_nodes-search-placeholder')}
-                className={b('search')}
-            />
-            {withTypeSelector && (
-                <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
-            )}
-            {withGroupBySelect ? null : (
-                <StorageVisibleEntitiesFilter
-                    value={visibleEntities}
-                    onChange={handleVisibleEntitiesChange}
+        <Flex direction="column" gap={2} width="100%">
+            <Flex gap={2} alignItems="center" wrap className={b('controls-row')}>
+                <Search
+                    tableFilter
+                    value={nodesSearchValue}
+                    onChange={handleTextFilterNodesChange}
+                    placeholder={i18n('controls_nodes-search-placeholder')}
+                    className={b('search')}
                 />
-            )}
-            {withGroupBySelect ? null : (
-                <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
-            )}
-            {withGroupBySelect ? (
-                <React.Fragment>
-                    <Text variant="body-2">{i18n('controls_group-by-placeholder')}</Text>
-                    <Select
-                        hasClear
-                        placeholder={'-'}
-                        width={150}
-                        defaultValue={
-                            storageNodesGroupByParam ? [storageNodesGroupByParam] : undefined
-                        }
-                        onUpdate={handleGroupBySelectUpdate}
-                        options={nodesGroupByOptions}
+                {withTypeSelector && (
+                    <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+                )}
+                {withGroupBySelect ? null : (
+                    <StorageVisibleEntitiesFilter
+                        value={visibleEntities}
+                        onChange={handleVisibleEntitiesChange}
                     />
-                </React.Fragment>
+                )}
+                {withGroupBySelect ? null : (
+                    <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
+                )}
+                {withGroupBySelect ? (
+                    <React.Fragment>
+                        <Text variant="body-2">{i18n('controls_group-by-placeholder')}</Text>
+                        <Select
+                            hasClear
+                            placeholder={'-'}
+                            width={150}
+                            defaultValue={
+                                storageNodesGroupByParam ? [storageNodesGroupByParam] : undefined
+                            }
+                            onUpdate={handleGroupBySelectUpdate}
+                            options={nodesGroupByOptions}
+                        />
+                    </React.Fragment>
+                ) : null}
+                <EntitiesCount
+                    label={i18n('nodes')}
+                    loading={entitiesLoading}
+                    total={entitiesCountTotal}
+                    current={entitiesCountCurrent}
+                />
+                {canUseStorageExpertMode ? (
+                    <Button
+                        selected={isStorageExpertMode}
+                        onClick={() => handleStorageExpertModeChange(!isStorageExpertMode)}
+                    >
+                        <Icon data={ChartTreemap} />
+                        {i18n('controls_expert-mode')}
+                    </Button>
+                ) : null}
+            </Flex>
+            {canUseStorageExpertMode && isStorageExpertMode ? (
+                <StorageNodesExpertModePanel />
             ) : null}
-            <EntitiesCount
-                label={i18n('nodes')}
-                loading={entitiesLoading}
-                total={entitiesCountTotal}
-                current={entitiesCountCurrent}
-            />
-        </React.Fragment>
+        </Flex>
     );
 }
 

package/src/containers/Storage/PaginatedStorageNodes/nodeExpertModeLayout.ts

@@ -0,0 +1,103 @@
+import type {PreparedVDisk} from '../../../utils/disks/types';
+
+export const NODE_EXPERT_PDISK_WIDTH = 165;
+export const NODE_EXPERT_VDISKS_PER_ROW = 8;
+export const NODE_EXPERT_ALL_VDISKS_PER_ROW = 4;
+export const NODE_EXPERT_ALL_VDISK_WIDTH = 45;
+
+const NODE_EXPERT_VDISK_MIN_WIDTH = 10;
+const NODE_EXPERT_VDISK_GAP = 2;
+const NODE_EXPERT_VDISK_HEIGHT = 14;
+const NODE_EXPERT_VDISK_ROW_GAP = 2;
+const NODE_EXPERT_VDISK_PDISK_GAP = 6;
+const NODE_EXPERT_VDISK_SIZE_INDICATOR_HEIGHT = 2;
+const NODE_EXPERT_VDISK_SIZE_INDICATOR_GAP = 2;
+const PDISK_HEIGHT = 20;
+const TABLE_CELL_VERTICAL_PADDING = 10;
+const TABLE_ROW_BORDER = 1;
+
+export const STORAGE_NODES_DEFAULT_ROW_HEIGHT = 51;
+export const STORAGE_NODES_DEFAULT_PDISK_HEIGHT = 40;
+export const NODE_EXPERT_ALL_PDISK_WIDTH =
+    NODE_EXPERT_ALL_VDISKS_PER_ROW * NODE_EXPERT_ALL_VDISK_WIDTH +
+    (NODE_EXPERT_ALL_VDISKS_PER_ROW - 1) * NODE_EXPERT_VDISK_GAP;
+
+export interface NodeExpertVDiskLayoutItem {
+    vDisk: PreparedVDisk;
+    width: number;
+}
+
+function getVDiskWeight(vDisk: PreparedVDisk) {
+    const allocatedSize = Number(vDisk.AllocatedSize);
+
+    return Number.isFinite(allocatedSize) && allocatedSize > 0 ? allocatedSize : 1;
+}
+
+export function calculateNodeExpertVDiskRows(
+    vDisks: PreparedVDisk[],
+    pDiskWidth = NODE_EXPERT_PDISK_WIDTH,
+): NodeExpertVDiskLayoutItem[][] {
+    const rows: PreparedVDisk[][] = [];
+
+    for (let index = 0; index < vDisks.length; index += NODE_EXPERT_VDISKS_PER_ROW) {
+        rows.push(vDisks.slice(index, index + NODE_EXPERT_VDISKS_PER_ROW));
+    }
+
+    if (rows.length === 0) {
+        return [];
+    }
+
+    // The densest row constrains one shared scale so VDisk widths stay comparable across rows.
+    const scale = Math.min(
+        ...rows.map((row) => {
+            const gapsWidth = NODE_EXPERT_VDISK_GAP * Math.max(row.length - 1, 0);
+            const minimumItemsWidth = NODE_EXPERT_VDISK_MIN_WIDTH * row.length;
+            const availableGrowth = Math.max(pDiskWidth - gapsWidth - minimumItemsWidth, 0);
+            const totalWeight = row.reduce((sum, vDisk) => sum + getVDiskWeight(vDisk), 0);
+
+            return availableGrowth / totalWeight;
+        }),
+    );
+
+    return rows.map((row) =>
+        row.map((vDisk) => ({
+            vDisk,
+            width: NODE_EXPERT_VDISK_MIN_WIDTH + getVDiskWeight(vDisk) * scale,
+        })),
+    );
+}
+
+export function getNodeExpertVDiskRowsCount(maximumSlotsPerDisk: number, isAllMode = false) {
+    const slotsCount =
+        Number.isFinite(maximumSlotsPerDisk) && maximumSlotsPerDisk > 0
+            ? Math.ceil(maximumSlotsPerDisk)
+            : 1;
+
+    const disksPerRow = isAllMode ? NODE_EXPERT_ALL_VDISKS_PER_ROW : NODE_EXPERT_VDISKS_PER_ROW;
+
+    return Math.max(1, Math.ceil(slotsCount / disksPerRow));
+}
+
+export function getNodeExpertPDiskHeight(maximumSlotsPerDisk: number, isAllMode = false) {
+    const rowsCount = getNodeExpertVDiskRowsCount(maximumSlotsPerDisk, isAllMode);
+    const vDiskHeight = isAllMode
+        ? NODE_EXPERT_VDISK_HEIGHT +
+          NODE_EXPERT_VDISK_SIZE_INDICATOR_HEIGHT +
+          NODE_EXPERT_VDISK_SIZE_INDICATOR_GAP
+        : NODE_EXPERT_VDISK_HEIGHT;
+
+    return (
+        rowsCount * vDiskHeight +
+        (rowsCount - 1) * NODE_EXPERT_VDISK_ROW_GAP +
+        NODE_EXPERT_VDISK_PDISK_GAP +
+        PDISK_HEIGHT
+    );
+}
+
+export function getStorageNodesExpertRowHeight(maximumSlotsPerDisk: number, isAllMode = false) {
+    return (
+        getNodeExpertPDiskHeight(maximumSlotsPerDisk, isAllMode) +
+        TABLE_CELL_VERTICAL_PADDING +
+        TABLE_ROW_BORDER
+    );
+}