diff --git a/src/containers/Nodes/Nodes.tsx b/src/containers/Nodes/Nodes.tsx index deab620ded..aa2f0e8a34 100644 --- a/src/containers/Nodes/Nodes.tsx +++ b/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} /> + ); }; 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) = = (row) => { return b('node', {unavailable: isUnavailableNode(row)}); }; @@ -102,6 +107,13 @@ export const PaginatedNodes = ({ label={'Nodes'} loading={!inited} /> + ); }; @@ -125,20 +137,11 @@ export const PaginatedNodes = ({ return ; }; - const rawColumns = getNodesColumns({ - getNodeRef: additionalNodesProps?.getNodeRef, - database, - }); - - const columns = rawColumns.map((column) => { - return {...column, sortable: isSortableNodesProperty(column.name)}; - }); - return ( { + return {...column, sortable: isSortableNodesProperty(column.name)}; + }); } export function getTopNodesByLoadColumns( diff --git a/src/containers/Nodes/columns/constants.ts b/src/containers/Nodes/columns/constants.ts index 461589d7bd..8fbcf9ab7a 100644 --- a/src/containers/Nodes/columns/constants.ts +++ b/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; +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 = { diff --git a/src/containers/Nodes/columns/hooks.ts b/src/containers/Nodes/columns/hooks.ts new file mode 100644 index 0000000000..90bb10a58c --- /dev/null +++ b/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, + ); +}