feat: add dimming to vdisk page (nodes) and pdisk page (vdisks)

src/components/PaginatedTable/TableChunk.tsx

@@ -104,8 +104,8 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     }, [currentData, isActive, onDataFetched]);
 
     const chunkOffset = id * limit;
-    const remainingLenght = totalLength - chunkOffset;
-    const calculatedChunkLength = remainingLenght < limit ? remainingLenght : limit;
+    const remainingLength = totalLength - chunkOffset;
+    const calculatedChunkLength = remainingLength < limit ? remainingLength : limit;
 
     const dataLength = currentData?.data?.length || calculatedChunkLength;
 

src/containers/PDiskPage/PDiskPage.tsx

@@ -25,7 +25,7 @@ import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
 import {getPDiskId, getSeverityColor} from '../../utils/disks/helpers';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
-import {Storage} from '../Storage/Storage';
+import {StorageWrapper} from '../Storage/StorageWrapper';
 
 import {DecommissionButton} from './DecommissionButton/DecommissionButton';
 import {DecommissionLabel} from './DecommissionLabel/DecommissionLabel';
@@ -244,7 +244,9 @@ export function PDiskPage() {
                 ) : null;
             }
             case 'storage': {
-                return pDiskParamsDefined ? <Storage nodeId={nodeId} pDiskId={pDiskId} /> : null;
+                return pDiskParamsDefined ? (
+                    <StorageWrapper nodeId={nodeId} pDiskId={pDiskId} />
+                ) : null;
             }
             default:
                 return null;

src/containers/Storage/Disks/Disks.tsx

@@ -6,16 +6,16 @@ import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskId} from '../../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../../utils/disks/types';
 import {PDisk} from '../PDisk';
+import type {StorageViewContext} from '../types';
 import {isVdiskActive} from '../utils';
-import type {VDiskViewContext} from '../utils';
 
 import './Disks.scss';
 
 const b = cn('ydb-storage-disks');
 
 interface DisksProps {
     vDisks?: PreparedVDisk[];
-    viewContext?: VDiskViewContext;
+    viewContext?: StorageViewContext;
 }
 
 export function Disks({vDisks = [], viewContext}: DisksProps) {

src/containers/Storage/PDisk/PDisk.tsx

@@ -11,8 +11,8 @@ import {cn} from '../../../utils/cn';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
 import {STRUCTURE} from '../../Node/NodePages';
+import type {StorageViewContext} from '../types';
 import {isVdiskActive} from '../utils';
-import type {VDiskViewContext} from '../utils';
 
 import './PDisk.scss';
 
@@ -26,7 +26,7 @@ interface PDiskProps {
     onHidePopup?: VoidFunction;
     className?: string;
     progressBarClassName?: string;
-    viewContext?: VDiskViewContext;
+    viewContext?: StorageViewContext;
 }
 
 export const PDisk = ({

src/containers/Storage/PaginatedStorage.tsx

@@ -1,14 +1,20 @@
 import {PaginatedStorageGroups} from './PaginatedStorageGroups';
 import {PaginatedStorageNodes} from './PaginatedStorageNodes';
+import type {StorageViewContext} from './types';
 import {useStorageQueryParams} from './useStorageQueryParams';
+import {getStorageGroupsInitialEntitiesCount, getStorageNodesInitialEntitiesCount} from './utils';
 
 export interface PaginatedStorageProps {
     database?: string;
     nodeId?: string | number;
     groupId?: string | number;
     pDiskId?: string | number;
 
+    viewContext: StorageViewContext;
+
     parentContainer?: Element | null;
+
+    initialEntitiesCount?: number;
 }
 
 export const PaginatedStorage = (props: PaginatedStorageProps) => {
@@ -17,8 +23,18 @@ export const PaginatedStorage = (props: PaginatedStorageProps) => {
     const isNodes = storageType === 'nodes';
 
     if (isNodes) {
-        return <PaginatedStorageNodes {...props} />;
+        return (
+            <PaginatedStorageNodes
+                initialEntitiesCount={getStorageNodesInitialEntitiesCount(props.viewContext)}
+                {...props}
+            />
+        );
     }
 
-    return <PaginatedStorageGroups {...props} />;
+    return (
+        <PaginatedStorageGroups
+            initialEntitiesCount={getStorageGroupsInitialEntitiesCount(props.viewContext)}
+            {...props}
+        />
+    );
 };

src/containers/Storage/PaginatedStorageGroups.tsx

@@ -54,13 +54,15 @@ function StorageGroupsComponent({
     nodeId,
     groupId,
     pDiskId,
+    viewContext,
     parentContainer,
+    initialEntitiesCount,
 }: PaginatedStorageProps) {
     const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
 
     const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
         visibleEntities,
-        nodeId: nodeId?.toString(),
+        viewContext,
     });
 
     const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
@@ -90,6 +92,7 @@ function StorageGroupsComponent({
             renderControls={renderControls}
             renderErrorMessage={renderPaginatedTableErrorMessage}
             columns={columnsToShow}
+            initialEntitiesCount={initialEntitiesCount}
         />
     );
 }
@@ -99,14 +102,16 @@ function GroupedStorageGroupsComponent({
     nodeId,
     groupId,
     pDiskId,
+
+    viewContext,
 }: PaginatedStorageProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {searchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} =
         useStorageQueryParams();
 
     const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
         visibleEntities,
-        nodeId: nodeId?.toString(),
+        viewContext,
     });
 
     const {currentData, isFetching, error} = storageApi.useGetStorageGroupsInfoQuery(

src/containers/Storage/PaginatedStorageNodes.tsx

@@ -22,6 +22,7 @@ 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 './Storage.scss';
@@ -60,14 +61,16 @@ function StorageNodesComponent({
     database,
     nodeId,
     groupId,
+    viewContext,
     parentContainer,
+    initialEntitiesCount,
 }: PaginatedStorageProps) {
     const {searchValue, visibleEntities, nodesUptimeFilter, handleShowAllNodes} =
         useStorageQueryParams();
 
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
-        groupId: groupId?.toString(),
+        viewContext,
     });
 
     const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
@@ -97,18 +100,24 @@ function StorageNodesComponent({
             renderControls={renderControls}
             renderErrorMessage={renderPaginatedTableErrorMessage}
             columns={columnsToShow}
+            initialEntitiesCount={initialEntitiesCount}
         />
     );
 }
 
-function GroupedStorageNodesComponent({database, groupId, nodeId}: PaginatedStorageProps) {
+function GroupedStorageNodesComponent({
+    database,
+    groupId,
+    nodeId,
+    viewContext,
+}: PaginatedStorageProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {searchValue, storageNodesGroupByParam, handleShowAllNodes} = useStorageQueryParams();
 
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
-        groupId: groupId?.toString(),
+        viewContext,
     });
 
     const {currentData, isFetching, error} = storageApi.useGetStorageNodesInfoQuery(
@@ -193,10 +202,10 @@ function GroupedStorageNodesComponent({database, groupId, nodeId}: PaginatedStor
 
 function useStorageNodesColumnsToSelect({
     database,
-    groupId,
+    viewContext,
 }: {
     database?: string;
-    groupId?: string;
+    viewContext: StorageViewContext;
 }) {
     const {balancer} = useClusterBaseInfo();
     const {additionalNodesProps} = useAdditionalNodeProps({balancer});
@@ -206,6 +215,6 @@ function useStorageNodesColumnsToSelect({
         additionalNodesProps,
         visibleEntities,
         database,
-        groupId,
+        viewContext,
     });
 }

src/containers/Storage/Storage.tsx

@@ -22,6 +22,7 @@ import {useStorageGroupsSelectedColumns} from './StorageGroups/columns/hooks';
 import {StorageNodesTable} from './StorageNodes/StorageNodesTable';
 import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
 import {b} from './shared';
+import type {StorageViewContext} from './types';
 import {useStorageQueryParams} from './useStorageQueryParams';
 import {defaultSortNode, getDefaultSortGroup} from './utils';
 
@@ -32,9 +33,11 @@ interface StorageProps {
     nodeId?: string | number;
     groupId?: string | number;
     pDiskId?: string | number;
+
+    viewContext: StorageViewContext;
 }
 
-export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
+export const Storage = ({database, viewContext, nodeId, groupId, pDiskId}: StorageProps) => {
     const {balancer} = useClusterBaseInfo();
     const {additionalNodesProps} = useAdditionalNodeProps({balancer});
 
@@ -75,14 +78,14 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
         additionalNodesProps,
         visibleEntities,
         database,
-        groupId: groupId?.toString(),
+        viewContext,
     });
 
     const {
         columnsToShow: storageGroupsColumnsToShow,
         columnsToSelect: storageGroupsColumnsToSelect,
         setColumns: setStorageGroupsSelectedColumns,
-    } = useStorageGroupsSelectedColumns({visibleEntities, nodeId: nodeId?.toString()});
+    } = useStorageGroupsSelectedColumns({visibleEntities, viewContext});
 
     const nodesQuery = storageApi.useGetStorageNodesInfoQuery(
         {

src/containers/Storage/StorageGroups/columns/columns.tsx

@@ -220,7 +220,7 @@ const getVDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => (
                 <VDiskWithDonorsStack
                     key={stringifyVdiskId(vDisk.VDiskId)}
                     data={vDisk}
-                    inactive={!isVdiskActive(vDisk, data)}
+                    inactive={!isVdiskActive(vDisk, data?.viewContext)}
                     className={b('vdisks-item')}
                 />
             ))}
@@ -237,7 +237,7 @@ const getDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => ({
     header: STORAGE_GROUPS_COLUMNS_TITLES.VDisksPDisks,
     className: b('disks-column'),
     render: ({row}) => {
-        return <Disks vDisks={row.VDisks} viewContext={data} />;
+        return <Disks vDisks={row.VDisks} viewContext={data?.viewContext} />;
     },
     align: DataTable.CENTER,
     width: 900,

src/containers/Storage/StorageGroups/columns/hooks.ts

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants';
 import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
+import type {StorageViewContext} from '../../types';
 
 import {getStorageGroupsColumns} from './columns';
 import {
@@ -13,17 +14,17 @@ import {
 } from './constants';
 import type {GetStorageGroupsColumnsParams} from './types';
 
-export function useGetStorageGroupsColumns(nodeId?: string) {
+export function useGetStorageGroupsColumns(viewContext: StorageViewContext) {
     return React.useMemo(() => {
-        return getStorageGroupsColumns({nodeId});
-    }, [nodeId]);
+        return getStorageGroupsColumns({viewContext});
+    }, [viewContext]);
 }
 
 export function useStorageGroupsSelectedColumns({
     visibleEntities,
-    nodeId,
+    viewContext,
 }: GetStorageGroupsColumnsParams) {
-    const columns = useGetStorageGroupsColumns(nodeId);
+    const columns = useGetStorageGroupsColumns(viewContext);
 
     const requiredColumns = React.useMemo(() => {
         if (visibleEntities === VISIBLE_ENTITIES.missing) {

src/containers/Storage/StorageGroups/columns/types.ts

@@ -2,17 +2,18 @@ import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
 
 import type {Column as PaginatedTableColumn} from '../../../../components/PaginatedTable';
 import type {PreparedStorageGroup, VisibleEntities} from '../../../../store/reducers/storage/types';
+import type {StorageViewContext} from '../../types';
 
 export type StorageGroupsColumn = PaginatedTableColumn<PreparedStorageGroup> &
     DataTableColumn<PreparedStorageGroup>;
 
 export interface GetStorageColumnsData {
-    nodeId?: string;
+    viewContext: StorageViewContext;
 }
 
 export interface GetStorageGroupsColumnsParams {
     visibleEntities?: VisibleEntities;
-    nodeId?: string;
+    viewContext: StorageViewContext;
 }
 
 export type StorageColumnsGetter = (data?: GetStorageColumnsData) => StorageGroupsColumn[];

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

@@ -16,7 +16,7 @@ const b = cn('ydb-storage-nodes-columns');
 const getStorageNodesColumns = ({
     additionalNodesProps,
     database,
-    groupId,
+    viewContext,
 }: GetStorageNodesColumnsParams) => {
     const getNodeRef = additionalNodesProps?.getNodeRef;
 
@@ -81,7 +81,7 @@ const getStorageNodesColumns = ({
 
                             return (
                                 <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                                    <PDisk data={pDisk} vDisks={vDisks} viewContext={{groupId}} />
+                                    <PDisk data={pDisk} vDisks={vDisks} viewContext={viewContext} />
                                 </div>
                             );
                         })}

src/containers/Storage/StorageNodes/columns/hooks.ts

@@ -17,11 +17,15 @@ export function useStorageNodesSelectedColumns({
     visibleEntities,
     database,
     additionalNodesProps,
-    groupId,
+    viewContext,
 }: GetStorageNodesColumnsParams) {
     const columns = React.useMemo(() => {
-        return getPreparedStorageNodesColumns({database, additionalNodesProps, groupId});
-    }, [database, additionalNodesProps, groupId]);
+        return getPreparedStorageNodesColumns({
+            database,
+            additionalNodesProps,
+            viewContext,
+        });
+    }, [database, additionalNodesProps, viewContext]);
 
     const requiredColumns = React.useMemo(() => {
         if (visibleEntities === VISIBLE_ENTITIES.missing) {

src/containers/Storage/StorageNodes/columns/types.ts

@@ -3,6 +3,7 @@ import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
 import type {Column as PaginatedTableColumn} from '../../../../components/PaginatedTable';
 import type {PreparedStorageNode, VisibleEntities} from '../../../../store/reducers/storage/types';
 import type {AdditionalNodesProps} from '../../../../types/additionalProps';
+import type {StorageViewContext} from '../../types';
 
 export type StorageNodesColumn = PaginatedTableColumn<PreparedStorageNode> &
     DataTableColumn<PreparedStorageNode>;
@@ -11,5 +12,5 @@ export interface GetStorageNodesColumnsParams {
     additionalNodesProps: AdditionalNodesProps | undefined;
     visibleEntities?: VisibleEntities;
     database?: string;
-    groupId?: string;
+    viewContext: StorageViewContext;
 }