ydb-embedded-ui 4.12.0 → 4.14.0

package/dist/containers/Tenant/utils/schemaControls.tsx

@@ -0,0 +1,69 @@
+import {Dispatch} from 'react';
+
+import {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
+import {Button} from '@gravity-ui/uikit';
+
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
+import {IconWrapper} from '../../../components/Icon';
+
+import i18n from '../i18n';
+
+interface ControlsAdditionalEffects {
+    setActivePath: (path: string) => void;
+}
+
+const bindActions = (
+    path: string,
+    dispatch: Dispatch<any>,
+    additionalEffects: ControlsAdditionalEffects,
+) => {
+    const {setActivePath} = additionalEffects;
+
+    return {
+        openPreview: () => {
+            dispatch(setShowPreview(true));
+            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+            setActivePath(path);
+        },
+    };
+};
+
+type Controls = ReturnType<Required<NavigationTreeProps>['renderAdditionalNodeElements']>;
+
+export const getControls =
+    (dispatch: Dispatch<any>, additionalEffects: ControlsAdditionalEffects) =>
+    (path: string, type: NavigationTreeNodeType) => {
+        const options = bindActions(path, dispatch, additionalEffects);
+        const openPreview = (
+            <Button
+                view="flat-secondary"
+                onClick={options.openPreview}
+                title={i18n('actions.openPreview')}
+                size="s"
+            >
+                <IconWrapper name="tablePreview" />
+            </Button>
+        );
+
+        const nodeTypeToControls: Record<NavigationTreeNodeType, Controls> = {
+            database: undefined,
+            directory: undefined,
+
+            table: openPreview,
+            column_table: openPreview,
+
+            index_table: undefined,
+            topic: undefined,
+            stream: undefined,
+
+            index: undefined,
+
+            external_table: openPreview,
+            external_data_source: undefined,
+        };
+
+        return nodeTypeToControls[type];
+    };

package/dist/containers/UserSettings/i18n/en.json

@@ -15,6 +15,9 @@
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
+  "settings.useBackendParamsForTables.title": "Offload tables filters and sorting to backend",
+  "settings.useBackendParamsForTables.popover": "Filter and sort Nodes table with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
+
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
   "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'YQL - QueryService' modes. May not work on some versions"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -15,6 +15,9 @@
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
+  "settings.useBackendParamsForTables.title": "Перенести фильтры и сортировку таблиц на бэкенд",
+  "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблицы Nodes с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
+
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
   "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'YQL - QueryService'. Может работать некорректно на некоторых версиях"
 }

package/dist/containers/UserSettings/settings.ts

@@ -7,6 +7,7 @@ import {
     ENABLE_ADDITIONAL_QUERY_MODES,
     INVERTED_DISKS_KEY,
     THEME_KEY,
+    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 
@@ -58,6 +59,11 @@ export const useNodesEndpointSetting: SettingProps = {
     title: i18n('settings.useNodesEndpoint.title'),
     helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
 };
+export const useBackendParamsForTables: SettingProps = {
+    settingKey: USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    title: i18n('settings.useBackendParamsForTables.title'),
+    helpPopoverContent: i18n('settings.useBackendParamsForTables.popover'),
+};
 export const enableQueryModesForExplainSetting: SettingProps = {
     settingKey: ENABLE_ADDITIONAL_QUERY_MODES,
     title: i18n('settings.enableAdditionalQueryModes.title'),
@@ -72,7 +78,12 @@ export const generalSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [invertedDisksSetting, useNodesEndpointSetting, enableQueryModesForExplainSetting],
+    settings: [
+        invertedDisksSetting,
+        useNodesEndpointSetting,
+        useBackendParamsForTables,
+        enableQueryModesForExplainSetting,
+    ],
 };
 
 export const generalPage: SettingsPage = {

package/dist/index.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './containers/App/App';
 import {Provider} from 'react-redux';
+
+import '@gravity-ui/uikit/styles/styles.scss';
+
+import App from './containers/App/App';
 import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
-import '@gravity-ui/uikit/styles/styles.scss';
 import HistoryContext from './contexts/HistoryContext';
 
+import './styles/constants.scss';
+import './index.css';
+
 const {store, history} = configureStore();
 window.store = store;
 

package/dist/services/api.ts

@@ -32,6 +32,7 @@ import type {ComputeApiRequestParams, NodesApiRequestParams} from '../store/redu
 import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
+import {prepareSortValue} from '../utils/filters';
 
 const config = {withCredentials: !window.custom_backend};
 
@@ -82,24 +83,35 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         });
     }
     getNodes(
-        {visibleEntities, type = 'any', tablets = true, ...params}: NodesApiRequestParams,
+        {
+            visibleEntities,
+            type = 'any',
+            tablets = true,
+            sortOrder,
+            sortValue,
+            ...params
+        }: NodesApiRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
+        const sort = prepareSortValue(sortValue, sortOrder);
+
         return this.get<TNodesInfo>(
             this.getPath('/viewer/json/nodes?enums=true'),
-            {
-                with: visibleEntities,
-                type,
-                tablets,
-                ...params,
-            },
-            {
-                concurrentId,
-            },
+            {with: visibleEntities, type, tablets, sort, ...params},
+            {concurrentId},
         );
     }
-    getCompute(params: ComputeApiRequestParams) {
-        return this.get<TComputeInfo>(this.getPath('/viewer/json/compute?enums=true'), params);
+    getCompute(
+        {sortOrder, sortValue, ...params}: ComputeApiRequestParams,
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        const sort = prepareSortValue(sortValue, sortOrder);
+
+        return this.get<TComputeInfo>(
+            this.getPath('/viewer/json/compute?enums=true'),
+            {sort, ...params},
+            {concurrentId},
+        );
     }
     getStorageInfo(
         {tenant, visibleEntities, nodeId}: StorageApiRequestParams,

package/dist/store/reducers/header/types.ts

@@ -1,4 +1,5 @@
 import type {ClusterTab} from '../../../containers/Cluster/utils';
+import type {EType} from '../../../types/api/tablet';
 
 import {setHeaderBreadcrumbs} from './header';
 
@@ -23,6 +24,7 @@ export interface TabletsBreadcrumbsOptions extends TenantBreadcrumbsOptions {
 
 export interface TabletBreadcrumbsOptions extends TabletsBreadcrumbsOptions {
     tabletId?: string;
+    tabletType?: EType;
 }
 
 export type BreadcrumbsOptions =

package/dist/store/reducers/nodes/nodes.ts

@@ -10,6 +10,7 @@ import type {
     ComputeApiRequestParams,
     NodesAction,
     NodesApiRequestParams,
+    NodesSortParams,
     NodesState,
 } from './types';
 import {prepareComputeNodesData, prepareNodesData} from './utils';
@@ -20,6 +21,7 @@ const RESET_NODES_STATE = 'nodes/RESET_NODES_STATE';
 const SET_NODES_UPTIME_FILTER = 'nodes/SET_NODES_UPTIME_FILTER';
 const SET_DATA_WAS_NOT_LOADED = 'nodes/SET_DATA_WAS_NOT_LOADED';
 const SET_SEARCH_VALUE = 'nodes/SET_SEARCH_VALUE';
+const SET_SORT = 'nodes/SET_SORT';
 
 const initialState = {
     loading: false,
@@ -47,6 +49,10 @@ const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) =
             };
         }
         case FETCH_NODES.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
@@ -74,7 +80,13 @@ const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) =
                 searchValue: action.data,
             };
         }
-
+        case SET_SORT: {
+            return {
+                ...state,
+                sortValue: action.data.sortValue,
+                sortOrder: action.data.sortOrder,
+            };
+        }
         case SET_DATA_WAS_NOT_LOADED: {
             return {
                 ...state,
@@ -85,13 +97,11 @@ const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) =
             return state;
     }
 };
+const concurrentId = 'getNodes';
 
 export function getNodes({type = 'any', ...params}: NodesApiRequestParams) {
     return createApiRequest({
-        request: window.api.getNodes({
-            type,
-            ...params,
-        }),
+        request: window.api.getNodes({type, ...params}, {concurrentId}),
         actions: FETCH_NODES,
         dataHandler: prepareNodesData,
     });
@@ -99,7 +109,7 @@ export function getNodes({type = 'any', ...params}: NodesApiRequestParams) {
 
 export function getComputeNodes({version = EVersion.v2, ...params}: ComputeApiRequestParams) {
     return createApiRequest({
-        request: window.api.getCompute({version, ...params}),
+        request: window.api.getCompute({version, ...params}, {concurrentId}),
         actions: FETCH_NODES,
         dataHandler: prepareComputeNodesData,
     });
@@ -130,4 +140,11 @@ export const setSearchValue = (value: string) => {
     } as const;
 };
 
+export const setSort = (sortParams: NodesSortParams) => {
+    return {
+        type: SET_SORT,
+        data: sortParams,
+    } as const;
+};
+
 export default nodes;

package/dist/store/reducers/nodes/selectors.ts

@@ -1,10 +1,10 @@
 import {Selector, createSelector} from 'reselect';
-import {escapeRegExp} from 'lodash';
 
 import {EFlag} from '../../../types/api/enums';
 import {calcUptimeInSeconds} from '../../../utils';
 import {HOUR_IN_SECONDS} from '../../../utils/constants';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import {prepareSearchValue} from '../../../utils/filters';
 
 import type {ProblemFilterValue} from '../settings/types';
 import type {NodesPreparedEntity, NodesStateSlice} from './types';
@@ -41,7 +41,7 @@ const filterNodesBySearchValue = (nodesList: NodesPreparedEntity[] = [], searchV
     if (!searchValue) {
         return nodesList;
     }
-    const re = new RegExp(escapeRegExp(searchValue), 'i');
+    const re = prepareSearchValue(searchValue);
 
     return nodesList.filter((node) => {
         return node.Host ? re.test(node.Host) || re.test(String(node.NodeId)) : true;

package/dist/store/reducers/nodes/types.ts

@@ -1,3 +1,5 @@
+import type {OrderType} from '@gravity-ui/react-data-table';
+
 import type {IResponseError} from '../../../types/api/error';
 import type {TEndpoint, TPoolStats} from '../../../types/api/nodes';
 import type {
@@ -9,13 +11,14 @@ import type {EFlag} from '../../../types/api/enums';
 import type {ApiRequestAction} from '../../utils';
 import type {VisibleEntities} from '../storage/types';
 
-import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import type {NodesSortValue, NodesUptimeFilterValues} from '../../../utils/nodes';
 import {
     FETCH_NODES,
     resetNodesState,
     setDataWasNotLoaded,
     setNodesUptimeFilter,
     setSearchValue,
+    setSort,
 } from './nodes';
 
 // Since nodes from different endpoints can have different types,
@@ -42,6 +45,8 @@ export interface NodesState {
     wasLoaded: boolean;
     nodesUptimeFilter: NodesUptimeFilterValues;
     searchValue: string;
+    sortValue?: NodesSortValue;
+    sortOrder?: OrderType;
     data?: NodesPreparedEntity[];
     totalNodes?: number;
     error?: IResponseError;
@@ -49,17 +54,21 @@ export interface NodesState {
 
 export type NodeType = 'static' | 'dynamic' | 'any';
 
-interface RequestParams {
+export interface NodesSortParams {
+    sortOrder?: OrderType;
+    sortValue?: NodesSortValue;
+}
+
+export interface NodesGeneralRequestParams extends NodesSortParams {
     filter?: string; // NodeId or Host
     uptime?: number; // return nodes with less uptime in seconds
     problems_only?: boolean; // return nodes with SystemState !== EFlag.Green
-    sort?: string; // Sort by one of ESort params (may differ for /nodes and /compute)
 
     offser?: number;
     limit?: number;
 }
 
-export interface NodesApiRequestParams extends RequestParams {
+export interface NodesApiRequestParams extends NodesGeneralRequestParams {
     tenant?: string;
     type?: NodeType;
     visibleEntities?: VisibleEntities; // "with" param
@@ -67,7 +76,7 @@ export interface NodesApiRequestParams extends RequestParams {
     tablets?: boolean;
 }
 
-export interface ComputeApiRequestParams extends RequestParams {
+export interface ComputeApiRequestParams extends NodesGeneralRequestParams {
     path: string;
     version?: EVersion; // only v2 works with filters
 }
@@ -90,6 +99,7 @@ export type NodesAction =
           | ReturnType<typeof setDataWasNotLoaded>
           | ReturnType<typeof setNodesUptimeFilter>
           | ReturnType<typeof setSearchValue>
+          | ReturnType<typeof setSort>
           | ReturnType<typeof resetNodesState>
       );
 

package/dist/store/reducers/settings/settings.ts

@@ -13,6 +13,7 @@ import {
     ENABLE_ADDITIONAL_QUERY_MODES,
     CLUSTER_INFO_HIDDEN_KEY,
     LAST_USED_QUERY_ACTION_KEY,
+    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {getValueFromLS, parseJson} from '../../../utils/utils';
@@ -76,6 +77,10 @@ export const initialState = {
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
         [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
         [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'true'),
+        [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: readSavedSettingsValue(
+            USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+            'false',
+        ),
     },
     systemSettings,
 };

package/dist/styles/constants.scss

@@ -0,0 +1,3 @@
+:root {
+    --tenant-object-info-max-value-width: 300px;
+}

package/dist/types/api/compute.ts

@@ -65,15 +65,3 @@ export enum EVersion {
     v1 = 'v1',
     v2 = 'v2', // only this versions works with sorting
 }
-
-export enum ESort {
-    NodeId = 'NodeId',
-    Host = 'Host',
-    DC = 'DC',
-    Rack = 'Rack',
-    Version = 'Version',
-    Uptime = 'Uptime',
-    Memory = 'Memory',
-    CPU = 'CPU',
-    LoadAverage = 'LoadAverage',
-}

package/dist/types/api/nodes.ts

@@ -101,15 +101,3 @@ enum EConfigState {
     'Consistent' = 'Consistent',
     'Outdated' = 'Outdated',
 }
-
-export enum ESort {
-    NodeId = 'NodeId',
-    Host = 'Host',
-    DC = 'DC',
-    Rack = 'Rack',
-    Version = 'Version',
-    Uptime = 'Uptime',
-    Memory = 'Memory',
-    CPU = 'CPU',
-    LoadAverage = 'LoadAverage',
-}

package/dist/utils/constants.ts

@@ -119,3 +119,6 @@ export const CLUSTER_INFO_HIDDEN_KEY = 'clusterInfoHidden';
 
 // Remain "tab" in key name for backward compatibility
 export const TENANT_INITIAL_PAGE_KEY = 'saved_tenant_initial_tab';
+
+// Send filters and sort params to backend for Nodes and Storage tables
+export const USE_BACKEND_PARAMS_FOR_TABLES_KEY = 'useBackendParamsForTables';

package/dist/utils/filters.ts

@@ -0,0 +1,23 @@
+import {escapeRegExp} from 'lodash';
+
+import type {OrderType} from '@gravity-ui/react-data-table';
+import {DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
+
+export const prepareSortValue = (
+    sortValue: string | undefined,
+    sortOrder: OrderType = DESCENDING,
+) => {
+    if (!sortValue) {
+        return '';
+    }
+
+    if (sortOrder === DESCENDING) {
+        return '-' + sortValue;
+    }
+
+    return sortValue;
+};
+
+export const prepareSearchValue = (searchValue = '') => {
+    return new RegExp(escapeRegExp(searchValue), 'i');
+};

package/dist/utils/hooks/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "useQueryModes.queryModeCannotBeSet": "Query mode \"{{mode}}\" cannot be set. You need to turn in additional query modes in settings to enable it"
+}

package/dist/utils/hooks/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-hooks';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/utils/hooks/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "useQueryModes.queryModeCannotBeSet": "Режим выполнения запроса \"{{mode}}\" недоступен. Вам необходимо включить дополнительные режимы выполнения запросов в настройках"
+}

package/dist/utils/hooks/index.ts

@@ -1,3 +1,7 @@
 export * from './useAutofetcher';
 export * from './useTypedSelector';
 export * from './useSetting';
+export * from './useQueryModes';
+export * from './useTableSort';
+
+export * from './useNodesRequestParams';

package/dist/utils/hooks/useNodesRequestParams.ts

@@ -0,0 +1,46 @@
+import {useMemo} from 'react';
+
+import type {NodesGeneralRequestParams} from '../../store/reducers/nodes/types';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import {ProblemFilterValues} from '../../store/reducers/settings/settings';
+
+import {HOUR_IN_SECONDS, USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../constants';
+import {NodesUptimeFilterValues} from '../nodes';
+import {useSetting} from './useSetting';
+
+interface NodesRawRequestParams
+    extends Omit<NodesGeneralRequestParams, 'problems_only' | 'uptime'> {
+    problemFilter?: ProblemFilterValue;
+    nodesUptimeFilter?: NodesUptimeFilterValues;
+}
+
+export const useNodesRequestParams = ({
+    filter,
+    problemFilter,
+    nodesUptimeFilter,
+    sortOrder,
+    sortValue,
+}: NodesRawRequestParams) => {
+    const [useBackendParamsForTables] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+
+    // If backend params are enabled, update params value to use them in fetch request
+    // Otherwise no params will be updated, no hooks that depend on requestParams will be triggered
+    return useMemo(() => {
+        if (useBackendParamsForTables) {
+            const problemsOnly = problemFilter === ProblemFilterValues.PROBLEMS;
+            const uptime =
+                nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime
+                    ? HOUR_IN_SECONDS
+                    : undefined;
+
+            return {
+                filter,
+                problems_only: problemsOnly,
+                uptime,
+                sortOrder,
+                sortValue,
+            };
+        }
+        return undefined;
+    }, [useBackendParamsForTables, filter, problemFilter, nodesUptimeFilter, sortOrder, sortValue]);
+};

package/dist/utils/hooks/useQueryModes.ts

@@ -0,0 +1,34 @@
+import type {QueryMode} from '../../types/store/query';
+import {ENABLE_ADDITIONAL_QUERY_MODES, QUERY_INITIAL_MODE_KEY} from '../constants';
+import {isNewQueryMode} from '../query';
+import createToast from '../createToast';
+import {useSetting} from './useSetting';
+import i18n from './i18n';
+
+export type SetQueryModeIfAvailable = (
+    value: QueryMode,
+    errorMessage?: string | undefined,
+) => boolean;
+
+export const useQueryModes = (): [QueryMode, SetQueryModeIfAvailable] => {
+    const [queryMode, setQueryMode] = useSetting<QueryMode>(QUERY_INITIAL_MODE_KEY);
+    const [enableAdditionalQueryModes] = useSetting<boolean>(ENABLE_ADDITIONAL_QUERY_MODES);
+
+    const setQueryModeIfAvailable: SetQueryModeIfAvailable = (value, errorMessage) => {
+        if (isNewQueryMode(value) && !enableAdditionalQueryModes) {
+            createToast({
+                name: 'QueryModeCannotBeSet',
+                title: errorMessage ?? i18n('useQueryModes.queryModeCannotBeSet', {mode: value}),
+                type: 'error',
+            });
+
+            return false;
+        } else {
+            setQueryMode(value);
+
+            return true;
+        }
+    };
+
+    return [queryMode, setQueryModeIfAvailable];
+};

package/dist/utils/hooks/useTableSort.ts

@@ -0,0 +1,37 @@
+import {useMemo} from 'react';
+
+import {OrderType, SortOrder} from '@gravity-ui/react-data-table';
+import {DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
+
+interface SortParams {
+    sortValue: string | undefined;
+    sortOrder: OrderType | undefined;
+}
+
+type HandleSort = (rawValue: SortOrder | SortOrder[] | undefined) => void;
+
+export const useTableSort = (
+    {sortValue, sortOrder = DESCENDING}: SortParams,
+    onSort: (params: SortParams) => void,
+): [SortOrder | undefined, HandleSort] => {
+    const sort: SortOrder | undefined = useMemo(() => {
+        if (!sortValue) {
+            return undefined;
+        }
+
+        return {
+            columnId: sortValue,
+            order: sortOrder,
+        };
+    }, [sortValue, sortOrder]);
+
+    const handleSort: HandleSort = (rawValue) => {
+        const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
+        onSort({
+            sortValue: value?.columnId,
+            sortOrder: value?.order,
+        });
+    };
+
+    return [sort, handleSort];
+};

package/dist/utils/nodes.ts

@@ -2,6 +2,7 @@ import type {TSystemStateInfo} from '../types/api/nodes';
 import type {TNodeInfo} from '../types/api/nodesList';
 import type {NodesPreparedEntity} from '../store/reducers/nodes/types';
 import type {NodesMap} from '../types/store/nodesList';
+import type {ValueOf} from '../types/common';
 import {EFlag} from '../types/api/enums';
 
 export enum NodesUptimeFilterValues {
@@ -31,3 +32,27 @@ export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
         return nodesMap;
     }, new Map());
 };
+
+/**
+ * Values to sort /compute v2 and /nodes responses
+ *
+ * For actual values go to:\
+ * /nodes: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_nodes.h\
+ * /compute: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_compute.h
+ */
+export const NODES_SORT_VALUES = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Version: 'Version',
+    Uptime: 'Uptime',
+    Memory: 'Memory',
+    CPU: 'CPU',
+    LoadAverage: 'LoadAverage',
+} as const;
+
+export type NodesSortValue = ValueOf<typeof NODES_SORT_VALUES>;
+
+export const isSortableNodesProperty = (value: string): value is NodesSortValue =>
+    Object.values(NODES_SORT_VALUES).includes(value as NodesSortValue);