fix: count pdisk-vdisk column width for skeletons

src/components/PaginatedTable/PaginatedTable.tsx

@@ -11,6 +11,7 @@ import type {
     FetchData,
     GetRowClassName,
     HandleTableColumnsResize,
+    PaginatedTableData,
     RenderControls,
     RenderEmptyDataMessage,
     RenderErrorMessage,
@@ -36,6 +37,7 @@ export interface PaginatedTableProps<T, F> {
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     renderErrorMessage?: RenderErrorMessage;
     containerClassName?: string;
+    onDataFetched?: (data: PaginatedTableData<T>) => void;
 }
 
 const DEFAULT_PAGINATION_LIMIT = 20;
@@ -56,6 +58,7 @@ export const PaginatedTable = <T, F>({
     renderErrorMessage,
     renderEmptyDataMessage,
     containerClassName,
+    onDataFetched,
 }: PaginatedTableProps<T, F>) => {
     const initialTotal = initialEntitiesCount || 0;
     const initialFound = initialEntitiesCount || 1;
@@ -84,11 +87,17 @@ export const PaginatedTable = <T, F>({
         return foundEntities % chunkSize || chunkSize;
     }, [foundEntities, chunkSize]);
 
-    const handleDataFetched = React.useCallback((total: number, found: number) => {
-        setTotalEntities(total);
-        setFoundEntities(found);
-        setIsInitialLoad(false);
-    }, []);
+    const handleDataFetched = React.useCallback(
+        (data?: PaginatedTableData<T>) => {
+            if (data) {
+                setTotalEntities(data.total);
+                setFoundEntities(data.found);
+                setIsInitialLoad(false);
+                onDataFetched?.(data);
+            }
+        },
+        [onDataFetched],
+    );
 
     // reset table on filters change
     React.useLayoutEffect(() => {

src/components/PaginatedTable/TableChunk.tsx

@@ -12,6 +12,7 @@ import type {
     Column,
     FetchData,
     GetRowClassName,
+    PaginatedTableData,
     RenderEmptyDataMessage,
     RenderErrorMessage,
     SortParams,
@@ -35,7 +36,7 @@ interface TableChunkProps<T, F> {
     getRowClassName?: GetRowClassName<T>;
     renderErrorMessage?: RenderErrorMessage;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
-    onDataFetched: (total: number, found: number) => void;
+    onDataFetched: (data?: PaginatedTableData<T>) => void;
 }
 
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
@@ -93,8 +94,12 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
 
     React.useEffect(() => {
         if (currentData && isActive) {
-            const {total = 0, found = 0} = currentData;
-            onDataFetched(total, found);
+            onDataFetched({
+                ...currentData,
+                data: currentData.data as T[],
+                found: currentData.found || 0,
+                total: currentData.total || 0,
+            });
         }
     }, [currentData, isActive, onDataFetched]);
 

src/components/nodesColumns/columns.tsx

@@ -370,6 +370,7 @@ export function getMissingDisksColumn<T extends {Missing?: number}>(): Column<T>
         render: ({row}) => row.Missing,
         align: DataTable.CENTER,
         defaultOrder: DataTable.DESCENDING,
+        width: 100,
     };
 }
 

src/containers/Storage/PDisk/PDisk.scss

@@ -1,11 +1,15 @@
+@import '../../../styles/mixins.scss';
+
 .pdisk-storage {
+    --pdisk-vdisk-width: 3px;
+    --pdisk-gap-width: 2px;
+
     position: relative;
 
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 
-    width: var(--pdisk-width);
     min-width: var(--pdisk-min-width);
 
     &__content {

src/containers/Storage/PDisk/PDisk.tsx

@@ -25,6 +25,7 @@ interface PDiskProps {
     className?: string;
     progressBarClassName?: string;
     viewContext?: StorageViewContext;
+    width?: number;
 }
 
 export const PDisk = ({
@@ -36,6 +37,7 @@ export const PDisk = ({
     className,
     progressBarClassName,
     viewContext,
+    width,
 }: PDiskProps) => {
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
@@ -79,7 +81,7 @@ export const PDisk = ({
     }
 
     return (
-        <div className={b(null, className)} ref={anchorRef}>
+        <div className={b(null, className)} ref={anchorRef} style={{width}}>
             {renderVDisks()}
             <HoverPopup
                 showPopup={showPopup}

src/containers/Storage/PaginatedStorageNodes.tsx

@@ -9,6 +9,7 @@ import {
     useViewerNodesHandlerHasGrouping,
 } from '../../store/reducers/capabilities/hooks';
 import {storageApi} from '../../store/reducers/storage/storage';
+import type {NodesGroupByField} from '../../types/api/nodes';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {useAdditionalNodesProps} from '../../utils/hooks/useAdditionalNodesProps';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
@@ -17,12 +18,14 @@ import type {PaginatedStorageProps} from './PaginatedStorage';
 import {StorageNodesControls} from './StorageControls/StorageControls';
 import {PaginatedStorageNodesTable} from './StorageNodes/PaginatedStorageNodesTable';
 import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
+import type {StorageNodesColumnsSettings} from './StorageNodes/columns/types';
 import {TableGroup} from './TableGroup/TableGroup';
 import {useExpandedGroups} from './TableGroup/useExpandedTableGroups';
 import i18n from './i18n';
 import {b, renderPaginatedTableErrorMessage} from './shared';
 import type {StorageViewContext} from './types';
 import {useStorageQueryParams} from './useStorageQueryParams';
+import {useStorageColumnsSettings} from './utils';
 
 import './Storage.scss';
 
@@ -68,9 +71,12 @@ function StorageNodesComponent({
 
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
 
+    const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
+
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
         viewContext,
+        columnsSettings,
     });
 
     const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
@@ -101,6 +107,7 @@ function StorageNodesComponent({
             renderErrorMessage={renderPaginatedTableErrorMessage}
             columns={columnsToShow}
             initialEntitiesCount={initialEntitiesCount}
+            onDataFetched={handleDataFetched}
         />
     );
 }
@@ -116,7 +123,7 @@ function GroupedStorageNodesComponent({
 
     const {searchValue, storageNodesGroupByParam, handleShowAllNodes} = useStorageQueryParams();
 
-    const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
+    const {columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
         viewContext,
     });
@@ -168,19 +175,15 @@ function GroupedStorageNodesComponent({
                         expanded={isExpanded}
                         onIsExpandedChange={setIsGroupExpanded}
                     >
-                        <PaginatedStorageNodesTable
+                        <StorageNodesTableGroupContent
                             database={database}
                             parentRef={parentRef}
                             nodeId={nodeId}
                             groupId={groupId}
                             searchValue={searchValue}
-                            visibleEntities={'all'}
-                            nodesUptimeFilter={NodesUptimeFilterValues.All}
-                            onShowAll={handleShowAllNodes}
+                            handleShowAllNodes={handleShowAllNodes}
                             filterGroup={name}
                             filterGroupBy={storageNodesGroupByParam}
-                            renderErrorMessage={renderPaginatedTableErrorMessage}
-                            columns={columnsToShow}
                             initialEntitiesCount={count}
                         />
                     </TableGroup>
@@ -206,12 +209,66 @@ function GroupedStorageNodesComponent({
     );
 }
 
+interface StorageNodesTableGroupContentProps {
+    database?: string;
+    parentRef: React.RefObject<HTMLElement>;
+    nodeId?: string | number;
+    groupId?: string | number;
+    searchValue: string;
+    handleShowAllNodes: VoidFunction;
+    filterGroup: string;
+    filterGroupBy?: NodesGroupByField;
+    viewContext?: StorageViewContext;
+    initialEntitiesCount: number;
+}
+
+function StorageNodesTableGroupContent({
+    database,
+    parentRef,
+    nodeId,
+    groupId,
+    searchValue,
+    handleShowAllNodes,
+    filterGroup,
+    filterGroupBy,
+    viewContext,
+    initialEntitiesCount,
+}: StorageNodesTableGroupContentProps) {
+    const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
+    const {columnsToShow} = useStorageNodesColumnsToSelect({
+        database,
+        viewContext,
+        columnsSettings,
+    });
+
+    return (
+        <PaginatedStorageNodesTable
+            database={database}
+            parentRef={parentRef}
+            nodeId={nodeId}
+            groupId={groupId}
+            searchValue={searchValue}
+            visibleEntities={'all'}
+            nodesUptimeFilter={NodesUptimeFilterValues.All}
+            onShowAll={handleShowAllNodes}
+            filterGroup={filterGroup}
+            filterGroupBy={filterGroupBy}
+            renderErrorMessage={renderPaginatedTableErrorMessage}
+            columns={columnsToShow}
+            initialEntitiesCount={initialEntitiesCount}
+            onDataFetched={handleDataFetched}
+        />
+    );
+}
+
 function useStorageNodesColumnsToSelect({
     database,
     viewContext,
+    columnsSettings,
 }: {
     database?: string;
     viewContext?: StorageViewContext;
+    columnsSettings?: StorageNodesColumnsSettings;
 }) {
     const additionalNodesProps = useAdditionalNodesProps();
     const {visibleEntities} = useStorageQueryParams();
@@ -221,5 +278,6 @@ function useStorageNodesColumnsToSelect({
         visibleEntities,
         database,
         viewContext,
+        columnsSettings,
     });
 }

src/containers/Storage/StorageNodes/PaginatedStorageNodesTable.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-import type {RenderControls, RenderErrorMessage} from '../../../components/PaginatedTable';
+import type {
+    PaginatedTableData,
+    RenderControls,
+    RenderErrorMessage,
+} from '../../../components/PaginatedTable';
 import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
@@ -40,6 +44,7 @@ interface PaginatedStorageNodesTableProps {
     renderControls?: RenderControls;
     renderErrorMessage: RenderErrorMessage;
     initialEntitiesCount?: number;
+    onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
 export const PaginatedStorageNodesTable = ({
@@ -57,6 +62,7 @@ export const PaginatedStorageNodesTable = ({
     renderControls,
     renderErrorMessage,
     initialEntitiesCount,
+    onDataFetched,
 }: PaginatedStorageNodesTableProps) => {
     const tableFilters = React.useMemo(() => {
         return {
@@ -111,6 +117,7 @@ export const PaginatedStorageNodesTable = ({
             getRowClassName={getRowUnavailableClassName}
             filters={tableFilters}
             tableName="storage-nodes"
+            onDataFetched={onDataFetched}
         />
     );
 };

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

@@ -7,12 +7,9 @@
 
     &__pdisks-wrapper {
         display: flex;
-        gap: var(--pdisk-margin);
+        gap: 10px;
 
-        width: var(--pdisks-container-width);
         height: 40px;
-
-        @include calculate-storage-nodes-pdisk-variables();
     }
 
     &__pdisks-item {