feat(Nodes): add columns setup (#1320)

Author: artemmufazalov

src/containers/Nodes/Nodes.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
+import {TableColumnSetup} from '@gravity-ui/uikit';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
@@ -33,13 +34,12 @@ import {
 } from '../../utils/hooks';
 import {
     NodesUptimeFilterValues,
-    isSortableNodesProperty,
     isUnavailableNode,
     nodesUptimeFilterValuesSchema,
 } from '../../utils/nodes';
 
-import {getNodesColumns} from './columns/columns';
 import {NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
+import {useNodesSelectedColumns} from './columns/hooks';
 import i18n from './i18n';
 
 import './Nodes.scss';
@@ -65,6 +65,11 @@ export const Nodes = ({path, database, additionalNodesProps = {}}: NodesProps) =
     const problemFilter = useTypedSelector(selectProblemFilter);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
+    const {columnsToShow, columnsToSelect, setColumns} = useNodesSelectedColumns({
+        getNodeRef: additionalNodesProps.getNodeRef,
+        database,
+    });
+
     const {
         currentData: data,
         isLoading,
@@ -114,20 +119,18 @@ export const Nodes = ({path, database, additionalNodesProps = {}}: NodesProps) =
                     label={'Nodes'}
                     loading={isLoading}
                 />
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
+                />
             </React.Fragment>
         );
     };
 
     const renderTable = () => {
-        const rawColumns = getNodesColumns({
-            getNodeRef: additionalNodesProps.getNodeRef,
-            database,
-        });
-
-        const columns = rawColumns.map((column) => {
-            return {...column, sortable: isSortableNodesProperty(column.name)};
-        });
-
         if (nodes.length === 0) {
             if (
                 problemFilter !== ProblemFilterValues.ALL ||
@@ -141,7 +144,7 @@ export const Nodes = ({path, database, additionalNodesProps = {}}: NodesProps) =
             <ResizeableDataTable
                 columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
                 data={nodes || []}
-                columns={columns}
+                columns={columnsToShow}
                 settings={DEFAULT_TABLE_SETTINGS}
                 sortOrder={sort}
                 onSort={handleSort}

src/containers/Nodes/PaginatedNodes.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {TableColumnSetup} from '@gravity-ui/uikit';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
@@ -27,13 +28,12 @@ import {cn} from '../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {
     NodesUptimeFilterValues,
-    isSortableNodesProperty,
     isUnavailableNode,
     nodesUptimeFilterValuesSchema,
 } from '../../utils/nodes';
 
-import {getNodesColumns} from './columns/columns';
 import {NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
+import {useNodesSelectedColumns} from './columns/hooks';
 import {getNodes} from './getNodes';
 import i18n from './i18n';
 
@@ -69,6 +69,11 @@ export const PaginatedNodes = ({
         return {path, database, searchValue, problemFilter, uptimeFilter};
     }, [path, database, searchValue, problemFilter, uptimeFilter]);
 
+    const {columnsToShow, columnsToSelect, setColumns} = useNodesSelectedColumns({
+        getNodeRef: additionalNodesProps?.getNodeRef,
+        database,
+    });
+
     const getRowClassName: GetRowClassName<NodesPreparedEntity> = (row) => {
         return b('node', {unavailable: isUnavailableNode(row)});
     };
@@ -102,6 +107,13 @@ export const PaginatedNodes = ({
                     label={'Nodes'}
                     loading={!inited}
                 />
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
+                />
             </React.Fragment>
         );
     };
@@ -125,20 +137,11 @@ export const PaginatedNodes = ({
         return <ResponseError error={error} />;
     };
 
-    const rawColumns = getNodesColumns({
-        getNodeRef: additionalNodesProps?.getNodeRef,
-        database,
-    });
-
-    const columns = rawColumns.map((column) => {
-        return {...column, sortable: isSortableNodesProperty(column.name)};
-    });
-
     return (
         <ResizeablePaginatedTable
             columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
             parentContainer={parentContainer}
-            columns={columns}
+            columns={columnsToShow}
             fetchData={getNodes}
             limit={50}
             renderControls={renderControls}

src/containers/Nodes/columns/columns.tsx

@@ -12,6 +12,7 @@ import {getLoadSeverityForNode} from '../../../store/reducers/nodes/utils';
 import type {GetNodeRefFunc} from '../../../types/additionalProps';
 import {EMPTY_DATA_PLACEHOLDER} from '../../../utils/constants';
 import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
+import {isSortableNodesProperty} from '../../../utils/nodes';
 
 import {NODES_COLUMNS_IDS, NODES_COLUMNS_TITLES} from './constants';
 import type {GetNodesColumnsProps, NodesColumn} from './types';
@@ -213,7 +214,7 @@ const sessionsColumn: NodesColumn = {
 };
 
 export function getNodesColumns({database, getNodeRef}: GetNodesColumnsProps): NodesColumn[] {
-    return [
+    const columns = [
         nodeIdColumn,
         getHostColumn(getNodeRef, database),
         dataCenterColumn,
@@ -225,6 +226,10 @@ export function getNodesColumns({database, getNodeRef}: GetNodesColumnsProps): N
         loadAverageColumn,
         getTabletsColumn(database),
     ];
+
+    return columns.map((column) => {
+        return {...column, sortable: isSortableNodesProperty(column.name)};
+    });
 }
 
 export function getTopNodesByLoadColumns(

src/containers/Nodes/columns/constants.ts

@@ -3,6 +3,7 @@ import type {ValueOf} from '../../../types/common';
 import i18n from './i18n';
 
 export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
+export const NODES_TABLE_SELECTED_COLUMNS_LS_KEY = 'nodesTableSelectedColumns';
 
 export const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
@@ -23,6 +24,21 @@ export const NODES_COLUMNS_IDS = {
 
 type NodesColumnId = ValueOf<typeof NODES_COLUMNS_IDS>;
 
+export const DEFAULT_NODES_COLUMNS: NodesColumnId[] = [
+    'NodeId',
+    'Host',
+    'DC',
+    'Rack',
+    'Version',
+    'Uptime',
+    'Memory',
+    'CPU',
+    'LoadAverage',
+    'Tablets',
+];
+
+export const REQUIRED_NODES_COLUMNS: NodesColumnId[] = ['NodeId'];
+
 // This code is running when module is initialized and correct language may not be set yet
 // get functions guarantee that i18n fields will be inited on render with current render language
 export const NODES_COLUMNS_TITLES = {

src/containers/Nodes/columns/hooks.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
+
+import {getNodesColumns} from './columns';
+import {
+    DEFAULT_NODES_COLUMNS,
+    NODES_COLUMNS_TITLES,
+    NODES_TABLE_SELECTED_COLUMNS_LS_KEY,
+    REQUIRED_NODES_COLUMNS,
+} from './constants';
+import type {GetNodesColumnsProps} from './types';
+
+export function useNodesSelectedColumns(params: GetNodesColumnsProps) {
+    const columns = React.useMemo(() => {
+        return getNodesColumns(params);
+    }, [params]);
+
+    return useSelectedColumns(
+        columns,
+        NODES_TABLE_SELECTED_COLUMNS_LS_KEY,
+        NODES_COLUMNS_TITLES,
+        DEFAULT_NODES_COLUMNS,
+        REQUIRED_NODES_COLUMNS,
+    );
+}