feat(Storage): add columns setup (#1321)

Author: artemmufazalov

src/containers/Cluster/Cluster.tsx

@@ -173,10 +173,7 @@ export function Cluster({
                         getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage)).pathname
                     }
                 >
-                    <StorageWrapper
-                        parentContainer={container.current}
-                        additionalNodesProps={additionalNodesProps}
-                    />
+                    <StorageWrapper parentContainer={container.current} />
                 </Route>
                 <Route
                     path={

src/containers/PDiskPage/PDiskGroups/PDiskGroups.tsx

@@ -6,29 +6,29 @@
     overflow: auto;
 
     height: 100%;
+    padding: 0 20px;
 
-    &__info-content {
+    &__meta,
+    &__title,
+    &__info,
+    &__controls,
+    &__tabs {
         position: sticky;
         left: 0;
 
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-
-        padding: 20px;
+        margin-bottom: 20px;
     }
 
-    &__tabs-content {
-        padding-left: 20px;
+    &__meta {
+        margin-top: 20px;
     }
 
-    &__meta,
-    &__title,
-    &__info,
-    &__controls,
     &__tabs {
-        position: sticky;
-        left: 0;
+        margin-bottom: 0;
+    }
+
+    &__disk-distribution {
+        padding: 20px 0;
     }
 
     &__title {

src/containers/PDiskPage/PDiskGroups/utils.ts

@@ -24,10 +24,10 @@ 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 {DecommissionButton} from './DecommissionButton/DecommissionButton';
 import {DecommissionLabel} from './DecommissionLabel/DecommissionLabel';
-import {PDiskGroups} from './PDiskGroups/PDiskGroups';
 import {PDiskSpaceDistribution} from './PDiskSpaceDistribution/PDiskSpaceDistribution';
 import {pDiskPageKeyset} from './i18n';
 
@@ -37,7 +37,7 @@ const pdiskPageCn = cn('ydb-pdisk-page');
 
 const PDISK_TABS_IDS = {
     diskDistribution: 'diskDistribution',
-    groups: 'groups',
+    storage: 'storage',
 } as const;
 
 const PDISK_PAGE_TABS = [
@@ -48,9 +48,9 @@ const PDISK_PAGE_TABS = [
         },
     },
     {
-        id: PDISK_TABS_IDS.groups,
+        id: PDISK_TABS_IDS.storage,
         get title() {
-            return pDiskPageKeyset('groups');
+            return pDiskPageKeyset('storage');
         },
     },
 ];
@@ -231,13 +231,15 @@ export function PDiskPage() {
     const renderTabsContent = () => {
         switch (pDiskTab) {
             case 'diskDistribution': {
-                return pDiskData ? <PDiskSpaceDistribution data={pDiskData} /> : null;
-            }
-            case 'groups': {
-                return pDiskParamsDefined ? (
-                    <PDiskGroups nodeId={nodeId} pDiskId={pDiskId} />
+                return pDiskData ? (
+                    <div className={pdiskPageCn('disk-distribution')}>
+                        <PDiskSpaceDistribution data={pDiskData} />
+                    </div>
                 ) : null;
             }
+            case 'storage': {
+                return pDiskParamsDefined ? <Storage nodeId={nodeId} pDiskId={pDiskId} /> : null;
+            }
             default:
                 return null;
         }
@@ -252,16 +254,14 @@ export function PDiskPage() {
 
     return (
         <div className={pdiskPageCn(null)}>
-            <div className={pdiskPageCn('info-content')}>
-                {renderHelmet()}
-                {renderPageMeta()}
-                {renderPageTitle()}
-                {renderControls()}
-                {renderError()}
-                {renderInfo()}
-                {renderTabs()}
-            </div>
-            <div className={pdiskPageCn('tabs-content')}>{renderTabsContent()}</div>
+            {renderHelmet()}
+            {renderPageMeta()}
+            {renderPageTitle()}
+            {renderControls()}
+            {renderError()}
+            {renderInfo()}
+            {renderTabs()}
+            {renderTabsContent()}
         </div>
     );
 }

src/containers/PDiskPage/PDiskPage.scss

@@ -3,7 +3,7 @@
   "pdisk": "PDisk",
   "node": "Node",
 
-  "groups": "Groups",
+  "storage": "Storage",
   "disk-distribution": "Disk distribution",
 
   "empty-slot": "Empty slot",

src/containers/PDiskPage/PDiskPage.tsx

@@ -3,42 +3,59 @@ import {StringParam, useQueryParams} from 'use-query-params';
 import {AccessDenied} from '../../components/Errors/403/AccessDenied';
 import {ResponseError} from '../../components/Errors/ResponseError/ResponseError';
 import type {RenderControls, RenderErrorMessage} from '../../components/PaginatedTable';
-import {STORAGE_TYPES, VISIBLE_ENTITIES} from '../../store/reducers/storage/constants';
+import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
+import {VISIBLE_ENTITIES} from '../../store/reducers/storage/constants';
 import {storageTypeSchema, visibleEntitiesSchema} from '../../store/reducers/storage/types';
 import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
-import type {AdditionalNodesProps} from '../../types/additionalProps';
 import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../utils/nodes';
+import {useAdditionalNodeProps} from '../AppWithClusters/useClusterData';
 
 import {StorageControls} from './StorageControls/StorageControls';
 import {PaginatedStorageGroups} from './StorageGroups/PaginatedStorageGroups';
+import {useStorageGroupsSelectedColumns} from './StorageGroups/columns/hooks';
 import {PaginatedStorageNodes} from './StorageNodes/PaginatedStorageNodes';
-
-import './Storage.scss';
+import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
 
 interface PaginatedStorageProps {
     database?: string;
     nodeId?: string;
     parentContainer?: Element | null;
-    additionalNodesProps?: AdditionalNodesProps;
 }
 
-export const PaginatedStorage = ({
-    database,
-    nodeId,
-    parentContainer,
-    additionalNodesProps,
-}: PaginatedStorageProps) => {
+export const PaginatedStorage = ({database, nodeId, parentContainer}: PaginatedStorageProps) => {
+    const {balancer} = useClusterBaseInfo();
+    const additionalNodesProps = useAdditionalNodeProps({balancer});
+
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
         visible: StringParam,
         search: StringParam,
         uptimeFilter: StringParam,
     });
     const storageType = storageTypeSchema.parse(queryParams.type);
+    const isGroups = storageType === 'groups';
+    const isNodes = storageType === 'nodes';
+
     const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible);
     const searchValue = queryParams.search ?? '';
     const nodesUptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
 
+    const {
+        columnsToShow: storageNodesColumnsToShow,
+        columnsToSelect: storageNodesColumnsToSelect,
+        setColumns: setStorageNodesSelectedColumns,
+    } = useStorageNodesSelectedColumns({
+        additionalNodesProps,
+        visibleEntities,
+        database,
+    });
+
+    const {
+        columnsToShow: storageGroupsColumnsToShow,
+        columnsToSelect: storageGroupsColumnsToSelect,
+        setColumns: setStorageGroupsSelectedColumns,
+    } = useStorageGroupsSelectedColumns(visibleEntities);
+
     const handleTextFilterChange = (value: string) => {
         setQueryParams({search: value || undefined}, 'replaceIn');
     };
@@ -70,11 +87,19 @@ export const PaginatedStorage = ({
     };
 
     const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
+        const columnsToSelect = isGroups
+            ? storageGroupsColumnsToSelect
+            : storageNodesColumnsToSelect;
+
+        const handleSelectedColumnsUpdate = isGroups
+            ? setStorageGroupsSelectedColumns
+            : setStorageNodesSelectedColumns;
+
         return (
             <StorageControls
                 searchValue={searchValue}
                 handleSearchValueChange={handleTextFilterChange}
-                withTypeSelector={!nodeId}
+                withTypeSelector
                 storageType={storageType}
                 handleStorageTypeChange={handleStorageTypeChange}
                 visibleEntities={visibleEntities}
@@ -85,6 +110,8 @@ export const PaginatedStorage = ({
                 entitiesCountCurrent={foundEntities}
                 entitiesCountTotal={totalEntities}
                 entitiesLoading={!inited}
+                columnsToSelect={columnsToSelect}
+                handleSelectedColumnsUpdate={handleSelectedColumnsUpdate}
             />
         );
     };
@@ -97,18 +124,18 @@ export const PaginatedStorage = ({
         return <ResponseError error={error} />;
     };
 
-    if (storageType === STORAGE_TYPES.nodes) {
+    if (isNodes) {
         return (
             <PaginatedStorageNodes
                 searchValue={searchValue}
                 visibleEntities={visibleEntities}
                 nodesUptimeFilter={nodesUptimeFilter}
                 database={database}
-                additionalNodesProps={additionalNodesProps}
                 onShowAll={handleShowAllNodes}
                 parentContainer={parentContainer}
                 renderControls={renderControls}
                 renderErrorMessage={renderErrorMessage}
+                columns={storageNodesColumnsToShow}
             />
         );
     }
@@ -123,6 +150,7 @@ export const PaginatedStorage = ({
             parentContainer={parentContainer}
             renderControls={renderControls}
             renderErrorMessage={renderErrorMessage}
+            columns={storageGroupsColumnsToShow}
         />
     );
 };