feat(Nodes,Storage): enable both tablets and pdisks columns

src/components/NetworkTable/columns.tsx

@@ -1,5 +1,3 @@
-import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
-import type {Column} from '../../utils/tableUtils/types';
 import {
     getClockSkewColumn,
     getConnectionsColumn,
@@ -16,10 +14,10 @@ import {
     getUptimeColumn,
 } from '../nodesColumns/columns';
 import {isSortableNodesColumn} from '../nodesColumns/constants';
-import type {GetNodesColumnsParams} from '../nodesColumns/types';
+import type {GetNodesColumnsParams, NodesColumn} from '../nodesColumns/types';
 
 export function getNetworkTableNodesColumns(params: GetNodesColumnsParams) {
-    const columns: Column<NodesPreparedEntity>[] = [
+    const columns: NodesColumn[] = [
         getNodeIdColumn(),
         getNetworkHostColumn(params),
         getDataCenterColumn(),

src/components/nodesColumns/types.ts

@@ -1,6 +1,15 @@
+import type {StorageNodesColumnsSettings} from '../../containers/Storage/PaginatedStorageNodesTable/columns/types';
+import type {StorageViewContext} from '../../containers/Storage/types';
+import type {PreparedStorageNode} from '../../store/reducers/storage/types';
 import type {GetNodeRefFunc} from '../../types/additionalProps';
+import type {Column} from '../../utils/tableUtils/types';
 
 export interface GetNodesColumnsParams {
     getNodeRef?: GetNodeRefFunc;
     database?: string;
+
+    viewContext?: StorageViewContext;
+    columnsSettings?: StorageNodesColumnsSettings;
 }
+
+export type NodesColumn = Column<PreparedStorageNode>;

src/containers/Nodes/Nodes.tsx

@@ -1,29 +1,29 @@
 import React from 'react';
 
-import type {Column} from '../../components/PaginatedTable';
 import {
     NODES_COLUMNS_IDS,
     isMonitoringUserNodesColumn,
     isViewerUserNodesColumn,
 } from '../../components/nodesColumns/constants';
 import type {NodesColumnId} from '../../components/nodesColumns/constants';
+import type {NodesColumn} from '../../components/nodesColumns/types';
 import {useBridgeModeEnabled} from '../../store/reducers/capabilities/hooks';
-import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 import type {NodesGroupByField} from '../../types/api/nodes';
 import {
     useIsUserAllowedToMakeChanges,
     useIsViewerUser,
 } from '../../utils/hooks/useIsUserAllowedToMakeChanges';
+import {useStorageColumnsSettings} from '../Storage/utils';
 
 import {PaginatedNodes} from './PaginatedNodes';
-import {getNodesColumns} from './columns/columns';
 import {
     ALL_NODES_GROUP_BY_PARAMS,
     DEFAULT_NODES_COLUMNS,
     NODES_TABLE_SELECTED_COLUMNS_LS_KEY,
     REQUIRED_NODES_COLUMNS,
 } from './columns/constants';
+import {useGetNodesColumns} from './columns/hooks';
 
 import './Nodes.scss';
 
@@ -34,7 +34,7 @@ export interface NodesProps {
     scrollContainerRef: React.RefObject<HTMLElement>;
     additionalNodesProps?: AdditionalNodesProps;
     withPeerRoleFilter?: boolean;
-    columns?: Column<NodesPreparedEntity>[];
+    columns?: NodesColumn[];
     defaultColumnsIds?: NodesColumnId[];
     requiredColumnsIds?: NodesColumnId[];
     selectedColumnsKey?: string;
@@ -48,12 +48,21 @@ export function Nodes({
     scrollContainerRef,
     additionalNodesProps,
     withPeerRoleFilter,
-    columns = getNodesColumns({database, getNodeRef: additionalNodesProps?.getNodeRef}),
+    columns: externalColumns,
     defaultColumnsIds = DEFAULT_NODES_COLUMNS,
     requiredColumnsIds = REQUIRED_NODES_COLUMNS,
     selectedColumnsKey = NODES_TABLE_SELECTED_COLUMNS_LS_KEY,
     groupByParams = ALL_NODES_GROUP_BY_PARAMS,
 }: NodesProps) {
+    const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
+
+    const columns = useGetNodesColumns({
+        columns: externalColumns,
+        database,
+        getNodeRef: additionalNodesProps?.getNodeRef,
+        columnsSettings,
+    });
+
     const bridgeModeEnabled = useBridgeModeEnabled();
 
     const columnsWithPile = React.useMemo(() => {
@@ -107,6 +116,7 @@ export function Nodes({
             requiredColumnsIds={requiredColumnsIds}
             selectedColumnsKey={selectedColumnsKey}
             groupByParams={effectiveGroupByParams}
+            onDataFetched={handleDataFetched}
         />
     );
 }

src/containers/Nodes/NodesTable.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 
 import {Illustration} from '../../components/Illustration';
+import type {PaginatedTableData} from '../../components/PaginatedTable';
 import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
 import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
-import type {NodesFilters, NodesPreparedEntity} from '../../store/reducers/nodes/types';
+import type {NodesColumn} from '../../components/nodesColumns/types';
+import type {NodesFilters} from '../../store/reducers/nodes/types';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import type {PreparedStorageNode} from '../../store/reducers/storage/types';
 import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {renderPaginatedTableErrorMessage} from '../../utils/renderPaginatedTableErrorMessage';
-import type {Column} from '../../utils/tableUtils/types';
 
 import {getNodes} from './getNodes';
 import i18n from './i18n';
@@ -27,10 +29,12 @@ interface NodesTableProps {
     filterGroup?: string;
     filterGroupBy?: NodesGroupByField;
 
-    columns: Column<NodesPreparedEntity>[];
+    columns: NodesColumn[];
     scrollContainerRef: React.RefObject<HTMLElement>;
 
     initialEntitiesCount?: number;
+
+    onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
 export function NodesTable({
@@ -46,6 +50,7 @@ export function NodesTable({
     columns,
     scrollContainerRef,
     initialEntitiesCount,
+    onDataFetched,
 }: NodesTableProps) {
     const tableFilters: NodesFilters = React.useMemo(() => {
         return {
@@ -91,6 +96,7 @@ export function NodesTable({
             getRowClassName={getRowClassName}
             filters={tableFilters}
             tableName="nodes"
+            onDataFetched={onDataFetched}
         />
     );
 }

src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 import {isNil} from 'lodash';
 
 import {ResponseError} from '../../../components/Errors/ResponseError';
-import type {Column} from '../../../components/PaginatedTable';
+import type {PaginatedTableData} from '../../../components/PaginatedTable';
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
 import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants';
 import type {NodesColumnId} from '../../../components/nodesColumns/constants';
+import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {nodesApi} from '../../../store/reducers/nodes/nodes';
-import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
+import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField, NodesPeerRole} from '../../../types/api/nodes';
 import {useAutoRefreshInterval} from '../../../utils/hooks';
 import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
@@ -32,9 +33,10 @@ interface NodeGroupProps {
     searchValue: string;
     peerRoleFilter?: NodesPeerRole;
     groupByParam?: NodesGroupByField;
-    columns: Column<NodesPreparedEntity>[];
+    columns: NodesColumn[];
     scrollContainerRef: React.RefObject<HTMLElement>;
     onIsExpandedChange: (name: string, isExpanded: boolean) => void;
+    onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
 const NodeGroup = React.memo(function NodeGroup({
@@ -50,6 +52,7 @@ const NodeGroup = React.memo(function NodeGroup({
     columns,
     scrollContainerRef,
     onIsExpandedChange,
+    onDataFetched,
 }: NodeGroupProps) {
     return (
         <TableGroup
@@ -76,6 +79,7 @@ const NodeGroup = React.memo(function NodeGroup({
                         initialEntitiesCount={count}
                         columns={columns}
                         scrollContainerRef={scrollContainerRef}
+                        onDataFetched={onDataFetched}
                     />
                 }
                 tableWrapperProps={{
@@ -92,11 +96,12 @@ interface GroupedNodesComponentProps {
     databaseFullPath?: string;
     scrollContainerRef: React.RefObject<HTMLElement>;
     withPeerRoleFilter?: boolean;
-    columns: Column<NodesPreparedEntity>[];
+    columns: NodesColumn[];
     defaultColumnsIds: NodesColumnId[];
     requiredColumnsIds: NodesColumnId[];
     selectedColumnsKey: string;
     groupByParams: NodesGroupByField[];
+    onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
 export function GroupedNodesComponent({
@@ -110,6 +115,7 @@ export function GroupedNodesComponent({
     requiredColumnsIds,
     selectedColumnsKey,
     groupByParams,
+    onDataFetched,
 }: GroupedNodesComponentProps) {
     const {searchValue, peerRoleFilter, groupByParam} = useNodesPageQueryParams(
         groupByParams,
@@ -147,11 +153,7 @@ export function GroupedNodesComponent({
     );
 
     const isLoading = currentData === undefined && isFetching;
-    const {
-        NodeGroups: tableGroups,
-        FoundNodes: found = 0,
-        TotalNodes: total = 0,
-    } = currentData || {};
+    const {tableGroups, found = 0, total = 0} = currentData || {};
 
     const {expandedGroups, setIsGroupExpanded} = useExpandedGroups(tableGroups);
 
@@ -186,6 +188,7 @@ export function GroupedNodesComponent({
                         columns={columnsToShow}
                         scrollContainerRef={scrollContainerRef}
                         onIsExpandedChange={setIsGroupExpanded}
+                        onDataFetched={onDataFetched}
                     />
                 );
             });

src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
-import type {Column} from '../../../components/PaginatedTable';
+import type {PaginatedTableData} from '../../../components/PaginatedTable';
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
 import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants';
 import type {NodesColumnId} from '../../../components/nodesColumns/constants';
+import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks';
-import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
 import {useProblemFilter} from '../../../store/reducers/settings/hooks';
+import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
 import {NodesTable} from '../NodesTable';
@@ -21,11 +22,12 @@ interface NodesComponentProps {
     databaseFullPath?: string;
     scrollContainerRef: React.RefObject<HTMLElement>;
     withPeerRoleFilter?: boolean;
-    columns: Column<NodesPreparedEntity>[];
+    columns: NodesColumn[];
     defaultColumnsIds: NodesColumnId[];
     requiredColumnsIds: NodesColumnId[];
     selectedColumnsKey: string;
     groupByParams: NodesGroupByField[];
+    onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
 export function NodesComponent({
@@ -39,6 +41,7 @@ export function NodesComponent({
     requiredColumnsIds,
     selectedColumnsKey,
     groupByParams,
+    onDataFetched,
 }: NodesComponentProps) {
     const {searchValue, uptimeFilter, peerRoleFilter} = useNodesPageQueryParams(
         groupByParams,
@@ -83,6 +86,7 @@ export function NodesComponent({
                     peerRoleFilter={peerRoleFilter}
                     columns={columnsToShow}
                     scrollContainerRef={scrollContainerRef}
+                    onDataFetched={onDataFetched}
                 />
             }
             tableWrapperProps={{

src/containers/Nodes/PaginatedNodes/PaginatedNodes.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
-import type {Column} from '../../../components/PaginatedTable';
+import type {PaginatedTableData} from '../../../components/PaginatedTable';
 import type {NodesColumnId} from '../../../components/nodesColumns/constants';
+import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {
     useCapabilitiesLoaded,
     useViewerNodesHandlerHasGrouping,
 } from '../../../store/reducers/capabilities/hooks';
-import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
 import {useProblemFilter} from '../../../store/reducers/settings/hooks';
+import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {useNodesPageQueryParams} from '../useNodesPageQueryParams';
@@ -24,11 +25,12 @@ export interface PaginatedNodesProps {
     database?: string;
     scrollContainerRef: React.RefObject<HTMLElement>;
     withPeerRoleFilter?: boolean;
-    columns: Column<NodesPreparedEntity>[];
+    columns: NodesColumn[];
     defaultColumnsIds: NodesColumnId[];
     requiredColumnsIds: NodesColumnId[];
     selectedColumnsKey: string;
     groupByParams: NodesGroupByField[];
+    onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
 export function PaginatedNodes(props: PaginatedNodesProps) {

src/containers/Nodes/columns/columns.tsx

@@ -15,26 +15,26 @@ import {
     getVersionColumn,
 } from '../../../components/nodesColumns/columns';
 import {isSortableNodesColumn} from '../../../components/nodesColumns/constants';
-import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
-import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
-import type {Column} from '../../../utils/tableUtils/types';
+import type {GetNodesColumnsParams, NodesColumn} from '../../../components/nodesColumns/types';
+import {getPDisksColumn} from '../../Storage/PaginatedStorageNodesTable/columns/columns';
 
-export function getNodesColumns(params: GetNodesColumnsParams): Column<NodesPreparedEntity>[] {
-    const columns = [
-        getNodeIdColumn<NodesPreparedEntity>(),
-        getHostColumn<NodesPreparedEntity>(params),
-        getNodeNameColumn<NodesPreparedEntity>(),
-        getDataCenterColumn<NodesPreparedEntity>(),
-        getPileNameColumn<NodesPreparedEntity>(),
-        getRackColumn<NodesPreparedEntity>(),
-        getUptimeColumn<NodesPreparedEntity>(),
-        getCpuColumn<NodesPreparedEntity>(),
-        getPoolsColumn<NodesPreparedEntity>(),
-        getRAMColumn<NodesPreparedEntity>(),
-        getMemoryColumn<NodesPreparedEntity>(),
-        getLoadAverageColumn<NodesPreparedEntity>(),
-        getVersionColumn<NodesPreparedEntity>(),
-        getTabletsColumn<NodesPreparedEntity>(params),
+export function getNodesColumns(params: GetNodesColumnsParams): NodesColumn[] {
+    const columns: NodesColumn[] = [
+        getNodeIdColumn(),
+        getHostColumn(params),
+        getNodeNameColumn(),
+        getDataCenterColumn(),
+        getPileNameColumn(),
+        getRackColumn(),
+        getUptimeColumn(),
+        getCpuColumn(),
+        getPoolsColumn(),
+        getRAMColumn(),
+        getMemoryColumn(),
+        getLoadAverageColumn(),
+        getVersionColumn(),
+        getPDisksColumn(params),
+        getTabletsColumn(params),
     ];
 
     return columns.map((column) => {