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,
+ );
+}