ydb-embedded-ui 4.13.0 → 4.14.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [4.14.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.13.0...v4.14.0) (2023-08-11)
+
+
+### Features
+
+* **Nodes:** filter and sort on backend ([#503](https://github.com/ydb-platform/ydb-embedded-ui/issues/503)) ([2e8ab8e](https://github.com/ydb-platform/ydb-embedded-ui/commit/2e8ab8e9965db61ec281f7340b89dd3967b639df))
+* **Query:** add explanation to query duration ([#501](https://github.com/ydb-platform/ydb-embedded-ui/issues/501)) ([a5f5140](https://github.com/ydb-platform/ydb-embedded-ui/commit/a5f5140a23864147d8495e3c6b94709e5e710a9b))
+
+
+### Bug Fixes
+
+* **Header:** add icons for nodes and tablets ([#500](https://github.com/ydb-platform/ydb-embedded-ui/issues/500)) ([862660c](https://github.com/ydb-platform/ydb-embedded-ui/commit/862660c1928c2c2b626e4417cd043f0bd5a65df9))
+* **Query:** fix query method selector help text ([#504](https://github.com/ydb-platform/ydb-embedded-ui/issues/504)) ([65cdf9e](https://github.com/ydb-platform/ydb-embedded-ui/commit/65cdf9ee93277c193cc1ad036b2cb38d2ae15b71))
+* **Query:** transfer API calls to a new line ([#499](https://github.com/ydb-platform/ydb-embedded-ui/issues/499)) ([de3d540](https://github.com/ydb-platform/ydb-embedded-ui/commit/de3d5404310f32ba05598bb99a1afb1b65ab45a1))
+* **SchemaTree:** transfer Show Preview to SchemaTree ([#505](https://github.com/ydb-platform/ydb-embedded-ui/issues/505)) ([46220c4](https://github.com/ydb-platform/ydb-embedded-ui/commit/46220c4b2cd111acf12712b4693744c52aaf7231))
+
 ## [4.13.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.12.0...v4.13.0) (2023-08-04)
 
 

package/dist/components/Tablet/Tablet.scss

@@ -1,17 +1,8 @@
 .tablet {
-    display: flex;
-    justify-content: center;
-
-    width: 23px;
-    height: 18px;
-
-    font-size: 10px;
     cursor: pointer;
-    text-transform: uppercase;
 
     color: var(--yc-color-text-complementary);
-    border: 1px solid var(--yc-color-base-generic-medium-hover);
-    border-radius: 4px;
+    border-color: var(--yc-color-base-generic-medium-hover);
 
     &__wrapper {
         margin-right: 2px;
@@ -25,12 +16,6 @@
         padding: 10px;
     }
 
-    &__type {
-        line-height: 17px;
-
-        color: var(--yc-color-text-complementary);
-    }
-
     &_status_gray {
         background-color: var(--yc-color-text-complementary);
     }

package/dist/components/Tablet/Tablet.tsx

@@ -5,6 +5,7 @@ import {getTabletLabel} from '../../utils/constants';
 import routes, {createHref} from '../../routes';
 
 import {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
+import {TabletIcon} from '../TabletIcon/TabletIcon';
 import {InternalLink} from '../InternalLink';
 import {TabletTooltipContent} from '../TooltipsContent';
 
@@ -18,10 +19,11 @@ interface TabletProps {
 }
 
 export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId} = tablet;
+    const {TabletId: id, NodeId, Type} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath = id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName});
+    const tabletPath =
+        id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName, type: Type});
 
     return (
         <ContentWithPopup
@@ -29,9 +31,7 @@ export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
             content={<TabletTooltipContent data={tablet} className={b('popup-content')} />}
         >
             <InternalLink to={tabletPath}>
-                <div className={b({status})}>
-                    <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
-                </div>
+                <TabletIcon className={b({status})} text={getTabletLabel(tablet.Type)} />
             </InternalLink>
         </ContentWithPopup>
     );

package/dist/components/TabletIcon/TabletIcon.scss

@@ -0,0 +1,17 @@
+.tablet-icon {
+    display: flex;
+    justify-content: center;
+
+    width: 23px;
+    height: 16px;
+
+    font-size: 10px;
+    text-transform: uppercase;
+
+    border: 1px solid;
+    border-radius: 4px;
+
+    &__type {
+        line-height: 14px;
+    }
+}

package/dist/components/TabletIcon/TabletIcon.tsx

@@ -0,0 +1,18 @@
+import cn from 'bem-cn-lite';
+
+import './TabletIcon.scss';
+
+interface TabletIconProps {
+    text?: string;
+    className?: string;
+}
+
+const b = cn('tablet-icon');
+
+export const TabletIcon = ({text, className}: TabletIconProps) => {
+    return (
+        <div className={b(null, className)}>
+            <div className={b('type')}>{text || 'T'}</div>
+        </div>
+    );
+};

package/dist/containers/Header/Header.scss

@@ -15,6 +15,8 @@
         align-items: center;
 
         &__icon {
+            display: flex;
+
             margin-right: 3px;
         }
     }

package/dist/containers/Header/Header.tsx

@@ -3,7 +3,7 @@ import {useHistory, useLocation} from 'react-router';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
-import {Breadcrumbs, Icon} from '@gravity-ui/uikit';
+import {Breadcrumbs} from '@gravity-ui/uikit';
 
 import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 
@@ -91,12 +91,7 @@ function Header({mainPage}: HeaderProps) {
                             }
                             return (
                                 <span className={b('breadcrumb')}>
-                                    <Icon
-                                        width={16}
-                                        height={16}
-                                        data={icon}
-                                        className={b('breadcrumb__icon')}
-                                    />
+                                    <div className={b('breadcrumb__icon')}>{icon}</div>
                                     {text}
                                 </span>
                             );

package/dist/containers/Header/{breadcrumbs.ts → breadcrumbs.tsx}

@@ -1,5 +1,9 @@
-import nodesRightIcon from '@gravity-ui/icons/svgs/nodes-right.svg';
-import databaseIcon from '@gravity-ui/icons/svgs/database.svg';
+import {
+    NodesRight as ClusterIcon,
+    Database as DatabaseIcon,
+    Cpu as ComputeNodeIcon,
+    HardDrive as StorageNodeIcon,
+} from '@gravity-ui/icons';
 
 import type {
     BreadcrumbsOptions,
@@ -15,8 +19,9 @@ import {
     TENANT_PAGE,
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
+import {TabletIcon} from '../../components/TabletIcon/TabletIcon';
 import routes, {createHref} from '../../routes';
-import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
+import {CLUSTER_DEFAULT_TITLE, getTabletLabel} from '../../utils/constants';
 
 import {getClusterPath} from '../Cluster/utils';
 import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
@@ -29,7 +34,7 @@ const prepareTenantName = (tenantName: string) => {
 export interface RawBreadcrumbItem {
     text: string;
     link?: string;
-    icon?: SVGIconData;
+    icon?: JSX.Element;
 }
 
 const getClusterBreadcrumbs = (
@@ -42,7 +47,7 @@ const getClusterBreadcrumbs = (
         {
             text: clusterName || CLUSTER_DEFAULT_TITLE,
             link: getClusterPath(clusterTab, query),
-            icon: nodesRightIcon,
+            icon: <ClusterIcon />,
         },
     ];
 };
@@ -56,7 +61,7 @@ const getTenantBreadcrumbs = (
     const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
     const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
 
-    return [...getClusterBreadcrumbs(options, query), {text, link, icon: databaseIcon}];
+    return [...getClusterBreadcrumbs(options, query), {text, link, icon: <DatabaseIcon />}];
 };
 
 const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
@@ -81,8 +86,13 @@ const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBre
 
     const text = nodeId ? `Node ${nodeId}` : 'Node';
     const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
+    const icon = isStorageNode ? <StorageNodeIcon /> : <ComputeNodeIcon />;
 
-    breadcrumbs.push({text, link});
+    breadcrumbs.push({
+        text,
+        link,
+        icon,
+    });
 
     return breadcrumbs;
 };
@@ -123,12 +133,13 @@ const getTabletBreadcrubms = (
     options: TabletBreadcrumbsOptions,
     query = {},
 ): RawBreadcrumbItem[] => {
-    const {tabletId} = options;
+    const {tabletId, tabletType} = options;
 
     const breadcrumbs = getTabletsBreadcrubms(options, query);
 
     breadcrumbs.push({
         text: tabletId || 'Tablet',
+        icon: <TabletIcon text={getTabletLabel(tabletType)} />,
     });
 
     return breadcrumbs;

package/dist/containers/Nodes/Nodes.tsx

@@ -3,9 +3,11 @@ import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
 
 import DataTable from '@gravity-ui/react-data-table';
+import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
 
 import type {EPathType} from '../../types/api/schema';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import type {NodesSortParams} from '../../store/reducers/nodes/types';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
@@ -17,7 +19,13 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/
 import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
-import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
+import {
+    useAutofetcher,
+    useSetting,
+    useTypedSelector,
+    useNodesRequestParams,
+    useTableSort,
+} from '../../utils/hooks';
 import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
 import {
@@ -26,6 +34,8 @@ import {
     setSearchValue,
     resetNodesState,
     getComputeNodes,
+    setDataWasNotLoaded,
+    setSort,
 } from '../../store/reducers/nodes/nodes';
 import {selectFilteredNodes} from '../../store/reducers/nodes/selectors';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
@@ -58,8 +68,16 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
         dispatch(resetNodesState());
     }, [dispatch, path]);
 
-    const {wasLoaded, loading, error, nodesUptimeFilter, searchValue, totalNodes} =
-        useTypedSelector((state) => state.nodes);
+    const {
+        wasLoaded,
+        loading,
+        error,
+        nodesUptimeFilter,
+        searchValue,
+        sortOrder = ASCENDING,
+        sortValue = 'NodeId',
+        totalNodes,
+    } = useTypedSelector((state) => state.nodes);
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -67,18 +85,39 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 
-    const fetchNodes = useCallback(() => {
-        // For not DB entities we always use /compute endpoint instead of /nodes
-        // since /nodes can return data only for tenants
-        if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
-            dispatch(getComputeNodes({path}));
-        } else {
-            dispatch(getNodes({tenant: path}));
-        }
-    }, [dispatch, path, type, useNodesEndpoint]);
+    const requestParams = useNodesRequestParams({
+        filter: searchValue,
+        problemFilter,
+        nodesUptimeFilter,
+        sortOrder,
+        sortValue,
+    });
+
+    const fetchNodes = useCallback(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            const params = requestParams || {};
+
+            // For not DB entities we always use /compute endpoint instead of /nodes
+            // since /nodes can return data only for tenants
+            if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
+                dispatch(getComputeNodes({path, ...params}));
+            } else {
+                dispatch(getNodes({tenant: path, ...params}));
+            }
+        },
+        [dispatch, path, type, useNodesEndpoint, requestParams],
+    );
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
 
+    const [sort, handleSort] = useTableSort({sortValue, sortOrder}, (sortParams) =>
+        dispatch(setSort(sortParams as NodesSortParams)),
+    );
+
     const handleSearchQueryChange = (value: string) => {
         dispatch(setSearchValue(value));
     };
@@ -132,10 +171,8 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
                 data={nodes || []}
                 columns={columns}
                 settings={DEFAULT_TABLE_SETTINGS}
-                initialSortOrder={{
-                    columnId: 'NodeId',
-                    order: DataTable.ASCENDING,
-                }}
+                sortOrder={sort}
+                onSort={handleSort}
                 emptyDataMessage={i18n('empty.default')}
                 rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
             />

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -6,26 +6,42 @@ import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
 
-import type {NodeAddress} from '../../utils/nodes';
+import {isSortableNodesProperty, type NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
 
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 
+const NODES_COLUMNS_IDS = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Version: 'Version',
+    Uptime: 'Uptime',
+    Memory: 'Memory',
+    CPU: 'CPU',
+    LoadAverage: 'LoadAverage',
+    Tablets: 'Tablets',
+};
+
 interface GetNodesColumnsProps {
     tabletsPath?: string;
     getNodeRef?: (node?: NodeAddress) => string | null;
 }
 
-export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {
+export function getNodesColumns({
+    tabletsPath,
+    getNodeRef,
+}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
     const columns: Column<NodesPreparedEntity>[] = [
         {
-            name: 'NodeId',
+            name: NODES_COLUMNS_IDS.NodeId,
             header: '#',
             width: '80px',
             align: DataTable.RIGHT,
         },
         {
-            name: 'Host',
+            name: NODES_COLUMNS_IDS.Host,
             render: ({row}) => {
                 return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
             },
@@ -33,21 +49,21 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             align: DataTable.LEFT,
         },
         {
-            name: 'DataCenter',
+            name: NODES_COLUMNS_IDS.DC,
             header: 'DC',
             align: DataTable.LEFT,
             render: ({row}) => (row.DataCenter ? row.DataCenter : '—'),
             width: '60px',
         },
         {
-            name: 'Rack',
+            name: NODES_COLUMNS_IDS.Rack,
             header: 'Rack',
             align: DataTable.LEFT,
             render: ({row}) => (row.Rack ? row.Rack : '—'),
             width: '80px',
         },
         {
-            name: 'Version',
+            name: NODES_COLUMNS_IDS.Version,
             width: '200px',
             align: DataTable.LEFT,
             render: ({row}) => {
@@ -55,14 +71,14 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             },
         },
         {
-            name: 'Uptime',
+            name: NODES_COLUMNS_IDS.Uptime,
             header: 'Uptime',
             sortAccessor: ({StartTime}) => StartTime && -StartTime,
             align: DataTable.RIGHT,
             width: '110px',
         },
         {
-            name: 'MemoryUsed',
+            name: NODES_COLUMNS_IDS.Memory,
             header: 'Memory',
             sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
             defaultOrder: DataTable.DESCENDING,
@@ -77,7 +93,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             width: '120px',
         },
         {
-            name: 'PoolStats',
+            name: NODES_COLUMNS_IDS.CPU,
             header: 'CPU',
             sortAccessor: ({PoolStats = []}) =>
                 PoolStats.reduce((acc, item) => {
@@ -93,7 +109,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             width: '120px',
         },
         {
-            name: 'LoadAverage',
+            name: NODES_COLUMNS_IDS.LoadAverage,
             header: 'Load average',
             sortAccessor: ({LoadAverage = []}) =>
                 LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
@@ -112,7 +128,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             width: '140px',
         },
         {
-            name: 'Tablets',
+            name: NODES_COLUMNS_IDS.Tablets,
             width: '430px',
             render: ({row}) => {
                 return row.Tablets ? (
@@ -129,5 +145,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
         },
     ];
 
-    return columns;
+    return columns.map((column) => {
+        return {...column, sortable: isSortableNodesProperty(column.name)};
+    });
 }

package/dist/containers/Tablet/Tablet.tsx

@@ -13,6 +13,7 @@ import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import '../../services/api';
 import {parseQuery} from '../../routes';
 
+import type {EType} from '../../types/api/tablet';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Tag} from '../../components/Tag';
@@ -48,10 +49,14 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
-    const {nodeId: queryNodeId, tenantName: queryTenantName} = parseQuery(location);
-
+    const {
+        nodeId: queryNodeId,
+        tenantName: queryTenantName,
+        type: queryTabletType,
+    } = parseQuery(location);
     const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
     const tenantName = tenantPath || queryTenantName?.toString();
+    const type = tablet.Type || (queryTabletType?.toString() as EType | undefined);
 
     // NOTE: should be reviewed when migrating to React 18
     useEffect(() => {
@@ -79,9 +84,10 @@ export const Tablet = () => {
                 nodeIds: nodeId ? [nodeId] : [],
                 tenantName,
                 tabletId: id,
+                tabletType: type,
             }),
         );
-    }, [dispatch, tenantName, id, nodeId]);
+    }, [dispatch, tenantName, id, nodeId, type]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (

package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.scss

@@ -5,4 +5,12 @@
     margin-left: 10px;
 
     color: var(--yc-color-text-complementary);
+
+    &__item-with-popover {
+        white-space: nowrap;
+    }
+
+    &__popover {
+        max-width: 300px;
+    }
 }

package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.tsx

@@ -1,6 +1,9 @@
 import block from 'bem-cn-lite';
 
 import {formatDurationToShortTimeFormat, parseUsToMs} from '../../../../utils/timeParsers';
+import {LabelWithPopover} from '../../../../components/LabelWithPopover';
+
+import i18n from '../i18n';
 
 import './QueryDuration.scss';
 
@@ -17,5 +20,14 @@ export const QueryDuration = ({duration}: QueryDurationProps) => {
 
     const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
 
-    return <span className={b()}>{parsedDuration}</span>;
+    return (
+        <span className={b()}>
+            <LabelWithPopover
+                className={b('item-with-popover')}
+                contentClassName={b('popover')}
+                text={parsedDuration}
+                popoverContent={i18n('query-duration.description')}
+            />
+        </span>
+    );
 };

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss

@@ -67,6 +67,8 @@
     }
 
     &__popover {
-        max-width: 340px;
+        max-width: 420px;
+
+        white-space: pre-wrap;
     }
 }

package/dist/containers/Tenant/Query/i18n/en.json

@@ -17,8 +17,10 @@
   "preview.not-available": "Preview is not available",
   "preview.close": "Close preview",
 
-  "method-description.script": "For YQL-scripts combining DDL and DML. API call: schema.scripting",
-  "method-description.scan": "Read-only queries, potentially reading a lot of data. API call: table.ExecuteScan",
-  "method-description.data": "DML queries for changing and fetching data in serialization mode. API call: table.executeDataQuery",
-  "method-description.query": "Any queries. An experimental API call supposed to replace all existing methods. API Call: query.ExecuteScript"
+  "method-description.script": "For YQL-scripts combining DDL and DML.\nAPI call: schema.scripting",
+  "method-description.scan": "Read-only queries, potentially reading a lot of data.\nAPI call: table.ExecuteScan",
+  "method-description.data": "DML queries for changing and fetching data in serialization mode.\nAPI call: table.executeDataQuery",
+  "method-description.query": "Any query. An experimental API call supposed to replace all existing methods.\nAPI Call: query.ExecuteScript",
+
+  "query-duration.description": "Duration of server-side query execution"
 }

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -17,8 +17,10 @@
   "preview.not-available": "Предпросмотр недоступен",
   "preview.close": "Закрыть предпросмотр",
 
-  "method-description.script": "Для скриптов, совмещающих DDL и DML-конструкции. API call: schema.scripting",
-  "method-description.scan": "Только читающие запросы, потенциально читающие много данных. API call: table.ExecuteScan",
-  "method-description.data": "DML-запросы для изменения и выборки данных в режиме изоляции Serializable. API call: table.executeDataQuery",
-  "method-description.query": "Любые запросы. Экспериментальный перспективный метод, который в будущем заменит все остальные. API call: query.ExecuteScript"
+  "method-description.script": "Для скриптов, совмещающих DDL и DML-конструкции.\nAPI call: schema.scripting",
+  "method-description.scan": "Только читающие запросы, потенциально читающие много данных.\nAPI call: table.ExecuteScan",
+  "method-description.data": "DML-запросы для изменения и выборки данных в режиме изоляции Serializable.\nAPI call: table.executeDataQuery",
+  "method-description.query": "Любые запросы. Экспериментальный перспективный метод, который в будущем заменит все остальные.\nAPI call: query.ExecuteScript",
+
+  "query-duration.description": "Время выполнения запроса на стороне сервера"
 }

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -9,6 +9,7 @@ import {useQueryModes} from '../../../../utils/hooks';
 
 import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
+import {getControls} from '../../utils/schemaControls';
 
 interface SchemaTreeProps {
     rootPath: string;
@@ -78,6 +79,9 @@ export function SchemaTree(props: SchemaTreeProps) {
                 setActivePath: handleActivePathUpdate,
                 setQueryMode,
             })}
+            renderAdditionalNodeElements={getControls(dispatch, {
+                setActivePath: handleActivePathUpdate,
+            })}
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -6,7 +6,6 @@ import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-component
 import type {QueryMode} from '../../../types/store/query';
 import type {SetQueryModeIfAvailable} from '../../../utils/hooks';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
@@ -109,12 +108,6 @@ const bindActions = (
                 });
             }
         },
-        openPreview: () => {
-            dispatch(setShowPreview(true));
-            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
-            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-            setActivePath(path);
-        },
     };
 };
 
@@ -125,14 +118,13 @@ export const getActions =
     (path: string, type: NavigationTreeNodeType) => {
         const actions = bindActions(path, dispatch, additionalEffects);
         const copyItem = {text: i18n('actions.copyPath'), action: actions.copyPath};
-        const openPreview = {text: i18n('actions.openPreview'), action: actions.openPreview};
 
         const DIR_SET: ActionsSet = [
             [copyItem],
             [{text: i18n('actions.createTable'), action: actions.createTable}],
         ];
         const TABLE_SET: ActionsSet = [
-            [openPreview, copyItem],
+            [copyItem],
             [
                 {text: i18n('actions.alterTable'), action: actions.alterTable},
                 {text: i18n('actions.selectQuery'), action: actions.selectQuery},
@@ -141,7 +133,7 @@ export const getActions =
         ];
 
         const EXTERNAL_TABLE_SET = [
-            [openPreview, copyItem],
+            [copyItem],
             [
                 {
                     text: i18n('actions.selectQuery'),
@@ -169,6 +161,7 @@ export const getActions =
 
             index_table: JUST_COPY,
             topic: JUST_COPY,
+            stream: JUST_COPY,
 
             index: JUST_COPY,
 

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/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/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/index.ts

@@ -2,3 +2,6 @@ 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/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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.2.2"
+    "ydb-ui-components": "^3.3.1"
   },
   "scripts": {
     "start": "react-app-rewired start",