ydb-embedded-ui 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [1.10.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.9.0...v1.10.0) (2022-08-10)
+
+
+### Features
+
+* **TopShards:** add DataSize column ([cbcd047](https://github.com/ydb-platform/ydb-embedded-ui/commit/cbcd047d277f699a67bc002a5542f3b9f6a0c942))
+* **TopShards:** sort table data on backend ([dc28c5c](https://github.com/ydb-platform/ydb-embedded-ui/commit/dc28c5c75b0036480bf804d49f82fc54eac98c8e))
+
+
+### Bug Fixes
+
+* add concurrentId for sendQuery request ([dc6b32a](https://github.com/ydb-platform/ydb-embedded-ui/commit/dc6b32a8fd51064ddeca2fc60a0f08a725216334))
+* **Storage:** display pdisk type in tooltip ([2b03a35](https://github.com/ydb-platform/ydb-embedded-ui/commit/2b03a35fc11ddeae3bdd30a0690b324ae917f5c3))
+* **Tablet:** change Kill to Restart ([dd585b1](https://github.com/ydb-platform/ydb-embedded-ui/commit/dd585b1d1a6a5ddb484a702523773b169900f582))
+* **Tenant:** add missing schema node types ([62a0ecb](https://github.com/ydb-platform/ydb-embedded-ui/commit/62a0ecb848dbcee53e18535cbf7c03a731d0cfeb))
+* **Tenant:** ensure correct behavior for new schema node types ([f80c381](https://github.com/ydb-platform/ydb-embedded-ui/commit/f80c38152656e8bbbe51ec38b29fc0d954c361cc))
+* **Tenant:** use new schema icons ([389a921](https://github.com/ydb-platform/ydb-embedded-ui/commit/389a9214c64b1adb183fa0c6caa6f2ec536dbef3))
+* **TopShards:** disable virtualization for table ([006d3d9](https://github.com/ydb-platform/ydb-embedded-ui/commit/006d3d9fb9a4744b8bb4ad03e53693199213f80e))
+* **TopShards:** format DataSize value ([c51ce66](https://github.com/ydb-platform/ydb-embedded-ui/commit/c51ce66286f6454f7252d1194628ee5a50aafba2))
+* **TopShards:** only allow DESC sort ([6aa326f](https://github.com/ydb-platform/ydb-embedded-ui/commit/6aa326fc4b8165f00f8b3ecf5becdb0943ed57af))
+* **TopShards:** substring tenant name out of shards path ([9e57672](https://github.com/ydb-platform/ydb-embedded-ui/commit/9e5767222c7dac7734c68abd08067cea507b1e15))
+
 ## [1.9.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.8...v1.9.0) (2022-07-29)
 
 

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -8,6 +8,8 @@ import {bytesToGB} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 //@ts-ignore
 import {getPDiskId} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -20,38 +22,29 @@ import './Pdisk.scss';
 const b = cn('pdisk-storage');
 
 const stateSeverity = {
-    Initial: 0,
-    Normal: 1,
-    InitialFormatRead: 3,
-    InitialSysLogRead: 3,
-    InitialCommonLogRead: 3,
-    InitialFormatReadError: 5,
-    InitialSysLogReadError: 5,
-    InitialSysLogParseError: 5,
-    InitialCommonLogReadError: 5,
-    InitialCommonLogParseError: 5,
-    CommonLoggerInitError: 5,
-    OpenFileError: 5,
-    ChunkQuotaError: 5,
-    DeviceIoError: 5,
+    [TPDiskState.Initial]: 0,
+    [TPDiskState.Normal]: 1,
+    [TPDiskState.InitialFormatRead]: 3,
+    [TPDiskState.InitialSysLogRead]: 3,
+    [TPDiskState.InitialCommonLogRead]: 3,
+    [TPDiskState.InitialFormatReadError]: 5,
+    [TPDiskState.InitialSysLogReadError]: 5,
+    [TPDiskState.InitialSysLogParseError]: 5,
+    [TPDiskState.InitialCommonLogReadError]: 5,
+    [TPDiskState.InitialCommonLogParseError]: 5,
+    [TPDiskState.CommonLoggerInitError]: 5,
+    [TPDiskState.OpenFileError]: 5,
+    [TPDiskState.ChunkQuotaError]: 5,
+    [TPDiskState.DeviceIoError]: 5,
 };
 
-type PDiskState = keyof typeof stateSeverity;
-
-interface PDiskProps {
-    NodeId: number;
-    Host?: string;
-    Path?: string;
-    Realtime?: string;
-    Device?: string;
-    AvailableSize?: string;
-    TotalSize?: string;
-    State?: PDiskState;
-    PDiskId: number;
-}
+type PDiskProps = TPDiskStateInfo;
+
+const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
+    key !== undefined && key in stateSeverity;
 
-const getStateSeverity = (pDiskState?: PDiskState) => {
-    return pDiskState ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
+const getStateSeverity = (pDiskState?: TPDiskState) => {
+    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
 };
 
 function Pdisk(props: PDiskProps) {
@@ -76,8 +69,7 @@ function Pdisk(props: PDiskProps) {
     };
     /* eslint-disable */
     const preparePdiskData = () => {
-        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Host, Path, Realtime, Device} =
-            props;
+        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = props;
         const errorColors = [
             diskProgressColors[colorSeverity.Orange as keyof typeof diskProgressColors],
             diskProgressColors[colorSeverity.Red as keyof typeof diskProgressColors],
@@ -89,9 +81,9 @@ function Pdisk(props: PDiskProps) {
         ];
 
         pdiskData.push({property: 'State', value: State || 'not available'});
+        pdiskData.push({property: 'Type', value: getPDiskType(props) || 'unknown'});
         NodeId && pdiskData.push({property: 'Node Id', value: NodeId});
 
-        Host && pdiskData.push({property: 'Host', value: Host});
         Path && pdiskData.push({property: 'Path', value: Path});
         pdiskData.push({
             property: 'Available',
@@ -151,7 +143,7 @@ function Pdisk(props: PDiskProps) {
                     href={createHref(
                         routes.node,
                         {id: props.NodeId, activeTab: STRUCTURE},
-                        {pdiskId: props.PDiskId},
+                        {pdiskId: props.PDiskId || ''},
                     )}
                 />
             </div>

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -7,6 +7,7 @@ import {Popup} from '@yandex-cloud/uikit';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -169,6 +170,7 @@ function Vdisk(props) {
                 property: 'State',
                 value: PDisk.State || 'not available',
             });
+            pdiskData.push({property: 'Type', value: getPDiskType(PDisk) || 'unknown'});
             PDisk.NodeId && pdiskData.push({property: 'Node Id', value: PDisk.NodeId});
             PDisk.NodeId &&
                 nodes[PDisk.NodeId] &&

package/dist/containers/Tablet/Tablet.js

@@ -199,7 +199,7 @@ class Tablet extends React.Component {
                 return (
                     <CriticalActionDialog
                         visible={dialogVisible}
-                        text="The tablet will be killed. Do you want to proceed?"
+                        text="The tablet will be restarted. Do you want to proceed?"
                         onClose={this.hideDialog}
                         onConfirm={this._onKillClick}
                     />
@@ -363,7 +363,7 @@ class Tablet extends React.Component {
                                 disabled={this.isDisabledKill()}
                                 className={b('control')}
                             >
-                                Kill
+                                Restart
                             </Button>
                             {this.hasHiveId() ? (
                                 <React.Fragment>

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -13,6 +13,11 @@ export enum GeneralPagesIds {
     'graph' = 'graph',
 }
 
+type Page = {
+    id: GeneralPagesIds,
+    title: string,
+};
+
 const overview = {
     id: GeneralPagesIds.overview,
     title: 'Overview',
@@ -76,17 +81,22 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
-export const getPagesByType = (type?: EPathType) => {
-    switch (type) {
-        case EPathType.EPathTypeColumnStore:
-        case EPathType.EPathTypeSubDomain:
-            return DATABASE_PAGES;
-        case EPathType.EPathTypeColumnTable:
-        case EPathType.EPathTypeTable:
-            return TABLE_PAGES;
-        case EPathType.EPathTypeDir:
-        case EPathType.EPathTypeTableIndex:
-        default:
-            return DIR_PAGES;
-    }
-}
+// verbose mapping to guarantee correct tabs for new path types
+// TS will error when a new type is added but not mapped here
+const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
+    [EPathType.EPathTypeInvalid]: undefined,
+
+    [EPathType.EPathTypeSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeExtSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeColumnStore]: DATABASE_PAGES,
+
+    [EPathType.EPathTypeTable]: TABLE_PAGES,
+    [EPathType.EPathTypeColumnTable]: TABLE_PAGES,
+
+    [EPathType.EPathTypeDir]: DIR_PAGES,
+    [EPathType.EPathTypeTableIndex]: DIR_PAGES,
+    [EPathType.EPathTypeCdcStream]: DIR_PAGES,
+};
+
+export const getPagesByType = (type?: EPathType) =>
+    (type && pathTypeToPages[type]) || DIR_PAGES;

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -8,9 +8,10 @@ import Icon from '../../../../components/Icon/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-import {EPathType} from '../../../../types/api/schema';
 import {prepareQueryError} from '../../../../utils';
 
+import {isColumnEntityType, isTableType} from '../../utils/schema';
+
 import './HotKeys.scss';
 
 const b = cn('hot-keys');
@@ -42,8 +43,7 @@ function HotKeys({
     type,
 }) {
     const fetchData = () => {
-        // ColumnTables excluded intentionally
-        if (type === EPathType.EPathTypeTable) {
+        if (isTableType(type) && !isColumnEntityType(type)) {
             getHotKeys(currentSchemaPath);
         }
     };

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useMemo} from 'react';
+import {ReactNode, useEffect, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
@@ -8,8 +8,8 @@ import {Loader} from '@yandex-cloud/uikit';
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
 import {IndexInfoViewer} from '../../../../components/IndexInfoViewer/IndexInfoViewer';
 
-import type {EPathType} from '../../../../types/api/schema';
-import {isColumnEntityType, isTableType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
+import {EPathType} from '../../../../types/api/schema';
+import {isColumnEntityType, isTableType} from '../../utils/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 //@ts-ignore
 import {getSchema} from '../../../../store/reducers/schema';
@@ -114,16 +114,23 @@ function Overview(props: OverviewProps) {
     };
 
     const renderContent = () => {
-        switch (mapPathTypeToNavigationTreeType(props.type)) {
-            case 'index':
-                return (
-                    <IndexInfoViewer data={schemaData} />
-                );
-            default:
-                return (
-                    <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
-                );
-        }
+        // verbose mapping to guarantee a correct render for new path types
+        // TS will error when a new type is added but not mapped here
+        const pathTypeToComponent: Record<EPathType, (() => ReactNode) | undefined> = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeTableIndex]: () => <IndexInfoViewer data={schemaData} />,
+            [EPathType.EPathTypeExtSubDomain]: undefined,
+            [EPathType.EPathTypeColumnStore]: undefined,
+            [EPathType.EPathTypeColumnTable]: undefined,
+            [EPathType.EPathTypeCdcStream]: undefined,
+        };
+
+        return (props.type && pathTypeToComponent[props.type]?.()) || (
+            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+        );
     }
 
     return loading && !wasLoaded ? (

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.js

@@ -1,4 +1,4 @@
-import {useContext, useEffect, useMemo} from 'react';
+import {useState, useContext, useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import {Loader} from '@yandex-cloud/uikit';
@@ -14,15 +14,25 @@ import HistoryContext from '../../../../contexts/HistoryContext';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {isColumnEntityType} from '../../utils/schema';
 import {prepareQueryError} from '../../../../utils';
+import {i18n} from '../../../../utils/i18n';
 
 import './TopShards.scss';
 
 const b = cn('top-shards');
 const bLink = cn('yc-link');
 
+const TABLE_SETTINGS = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRender: false, // no more than 20 rows
+    externalSort: true,
+    disableSortReset: true,
+    defaultOrder: DataTable.DESCENDING,
+};
+
 const tableColumnsNames = {
     TabletId: 'TabletId',
     CPUCores: 'CPUCores',
+    DataSize: 'DataSize',
     Path: 'Path',
 };
 
@@ -32,6 +42,28 @@ function prepareCPUWorkloadValue(value) {
     return `${(value * 100).toFixed(2)}%`;
 }
 
+function prepareDateSizeValue(value) {
+    return new Intl.NumberFormat(i18n.lang).format(value);
+}
+
+function stringToDataTableSortOrder(value) {
+    return value && value.split(',').map((columnId) => ({
+        columnId,
+        order: DataTable.DESCENDING,
+    }));
+}
+
+function stringToQuerySortOrder(value) {
+    return value && value.split(',').map((columnId) => ({
+        columnId,
+        order: 'DESC',
+    }));
+}
+
+function dataTableToStringSortOrder(value = []) {
+    return value.map(({columnId}) => columnId).join(',');
+}
+
 function TopShards({
     sendShardQuery,
     currentSchemaPath,
@@ -46,25 +78,40 @@ function TopShards({
     setShardQueryOptions,
     type,
 }) {
+    const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
+
     useEffect(() => {
+        autofetcher.stop();
+
         if (autorefresh) {
             autofetcher.start();
-            autofetcher.fetch(() => sendShardQuery({database: path, path: currentSchemaPath}));
-        } else {
-            autofetcher.stop();
+            autofetcher.fetch(() => sendShardQuery({
+                database: path,
+                path: currentSchemaPath,
+                sortOrder: stringToQuerySortOrder(sortOrder),
+            }));
         }
+
         return () => {
             autofetcher.stop();
         };
-    }, [autorefresh]);
+    }, [autorefresh, currentSchemaPath, path, sendShardQuery, sortOrder]);
 
+    // don't show loader for requests triggered by table sort, only for path change
     useEffect(() => {
-        sendShardQuery({database: path, path: currentSchemaPath});
         setShardQueryOptions({
             wasLoaded: false,
             data: undefined,
         });
-    }, [currentSchemaPath]);
+    }, [currentSchemaPath, path, setShardQueryOptions]);
+
+    useEffect(() => {
+        sendShardQuery({
+            database: path,
+            path: currentSchemaPath,
+            sortOrder: stringToQuerySortOrder(sortOrder),
+        });
+    }, [currentSchemaPath, path, sendShardQuery, sortOrder]);
 
     const history = useContext(HistoryContext);
 
@@ -76,6 +123,13 @@ function TopShards({
         };
     };
 
+    const onSort = (newSortOrder) => {
+        // omit information about sort order to disable ASC order, only DESC makes sense for top shards
+        // use a string (and not the DataTable default format) to prevent reference change,
+        // which would cause an excess state change, to avoid repeating requests
+        setSortOrder(dataTableToStringSortOrder(newSortOrder));
+    };
+
     const tableColumns = useMemo(() => {
         return [
             {
@@ -83,11 +137,16 @@ function TopShards({
                 // eslint-disable-next-line
                 render: ({value}) => {
                     return (
-                        <span onClick={onSchemaClick(value)} className={bLink({view: 'normal'})}>
+                        <span
+                            // tenant name is substringed out in sql query but is needed here
+                            onClick={onSchemaClick(path + value)}
+                            className={bLink({view: 'normal'})}
+                        >
                             {value}
                         </span>
                     );
                 },
+                sortable: false,
             },
             {
                 name: tableColumnsNames.CPUCores,
@@ -97,6 +156,14 @@ function TopShards({
                 },
                 align: DataTable.RIGHT,
             },
+            {
+                name: tableColumnsNames.DataSize,
+                header: 'DataSize (B)',
+                render: ({value}) => {
+                    return prepareDateSizeValue(value);
+                },
+                align: DataTable.RIGHT,
+            },
             {
                 name: tableColumnsNames.TabletId,
                 // eslint-disable-next-line
@@ -107,6 +174,7 @@ function TopShards({
                         </InternalLink>
                     );
                 },
+                sortable: false,
             },
         ];
     }, []);
@@ -123,7 +191,7 @@ function TopShards({
         if (isColumnEntityType(type)) {
             return 'No data';
         }
-        if (error) {
+        if (error && !error.isCancelled) {
             return prepareQueryError(error);
         }
 
@@ -132,9 +200,11 @@ function TopShards({
                 <DataTable
                     columns={tableColumns}
                     data={data}
-                    settings={DEFAULT_TABLE_SETTINGS}
+                    settings={TABLE_SETTINGS}
                     className={b('table')}
                     theme="yandex-cloud"
+                    onSort={onSort}
+                    sortOrder={stringToDataTableSortOrder(sortOrder)}
                 />
             </div>
         ) : (

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

@@ -1,43 +1,88 @@
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
 import {EPathSubType, EPathType} from '../../../types/api/schema';
 
-const mapTablePathSubTypeToNavigationTreeType = (subType?: EPathSubType) => {
-    switch (subType) {
-        case EPathSubType.EPathSubTypeSyncIndexImplTable:
-        case EPathSubType.EPathSubTypeAsyncIndexImplTable:
-            return 'index_table';
-        default:
-            return 'table';
-    }
+// this file contains verbose mappings that are typed in a way that ensures
+// correctness when a new node type or a new path type is added
+// TS will error if a new entity is added but not mapped here
+
+const pathSubTypeToNodeType: Record<EPathSubType, NavigationTreeNodeType | undefined> = {
+    [EPathSubType.EPathSubTypeSyncIndexImplTable]: 'index_table',
+    [EPathSubType.EPathSubTypeAsyncIndexImplTable]: 'index_table',
+
+    [EPathSubType.EPathSubTypeStreamImpl]: undefined,
+    [EPathSubType.EPathSubTypeEmpty]: undefined,
+};
+
+const pathTypeToNodeType: Record<EPathType, NavigationTreeNodeType | undefined> = {
+    [EPathType.EPathTypeInvalid]: undefined,
+
+    [EPathType.EPathTypeSubDomain]: 'database',
+    [EPathType.EPathTypeExtSubDomain]: 'database',
+
+    [EPathType.EPathTypeDir]: 'directory',
+    [EPathType.EPathTypeColumnStore]: 'directory',
+
+    [EPathType.EPathTypeTable]: 'table',
+
+    [EPathType.EPathTypeTableIndex]: 'index',
+
+    [EPathType.EPathTypeColumnTable]: 'column_table',
+
+    [EPathType.EPathTypeCdcStream]: 'topic',
 };
 
 export const mapPathTypeToNavigationTreeType = (
     type: EPathType = EPathType.EPathTypeDir,
     subType?: EPathSubType,
     defaultType: NavigationTreeNodeType = 'directory'
-): NavigationTreeNodeType => {
-    switch (type) {
-        case EPathType.EPathTypeSubDomain:
-            return 'database';
-        case EPathType.EPathTypeTable:
-        case EPathType.EPathTypeColumnTable:
-            return mapTablePathSubTypeToNavigationTreeType(subType);
-        case EPathType.EPathTypeDir:
-        case EPathType.EPathTypeColumnStore:
-            return 'directory';
-        case EPathType.EPathTypeTableIndex:
-            return 'index';
-        default:
-            return defaultType;
-    }
+): NavigationTreeNodeType =>
+    (subType && pathSubTypeToNodeType[subType]) || pathTypeToNodeType[type] || defaultType;
+
+// ====================
+
+const pathTypeToIsTable: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeTable]: true,
+    [EPathType.EPathTypeColumnTable]: true,
+
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeSubDomain]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeExtSubDomain]: false,
+    [EPathType.EPathTypeColumnStore]: false,
+    [EPathType.EPathTypeCdcStream]: false,
 };
 
-export const isTableType = (type?: EPathType) =>
-    mapPathTypeToNavigationTreeType(type) === 'table';
+export const isTableType = (pathType?: EPathType) =>
+    (pathType && pathTypeToIsTable[pathType]) ?? false;
+
+// ====================
+
+const pathSubTypeToIsIndexImpl: Record<EPathSubType, boolean> = {
+    [EPathSubType.EPathSubTypeSyncIndexImplTable]: true,
+    [EPathSubType.EPathSubTypeAsyncIndexImplTable]: true,
+
+    [EPathSubType.EPathSubTypeStreamImpl]: false,
+    [EPathSubType.EPathSubTypeEmpty]: false,
+};
 
 export const isIndexTable = (subType?: EPathSubType) =>
-    mapTablePathSubTypeToNavigationTreeType(subType) === 'index_table';
+    (subType && pathSubTypeToIsIndexImpl[subType]) ?? false;
+
+// ====================
+
+const pathTypeToIsColumn: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeColumnStore]: true,
+    [EPathType.EPathTypeColumnTable]: true,
+
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeTable]: false,
+    [EPathType.EPathTypeSubDomain]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeExtSubDomain]: false,
+    [EPathType.EPathTypeCdcStream]: false,
+};
 
 export const isColumnEntityType = (type?: EPathType) =>
-    type === EPathType.EPathTypeColumnStore ||
-    type === EPathType.EPathTypeColumnTable;
+    (type && pathTypeToIsColumn[type]) ?? false;

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

@@ -1,5 +1,5 @@
 import {Dispatch} from 'react';
-import type {NavigationTreeNodeType} from 'ydb-ui-components';
+import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema';
@@ -73,6 +73,8 @@ const bindActions = (
     };
 };
 
+type ActionsSet = ReturnType<Required<NavigationTreeProps>['getActions']>;
+
 export const getActions = (
     dispatch: Dispatch<any>,
     setActivePath: (path: string) => void,
@@ -81,35 +83,43 @@ export const getActions = (
         const actions = bindActions(path, dispatch, setActivePath);
         const copyItem = {text: 'Copy path', action: actions.copyPath};
 
-        switch (type) {
-            case 'database':
-            case 'directory':
-                return [
-                    [
-                        copyItem,
-                    ],
-                    [
-                        {text: 'Create table...', action: actions.createTable},
-                    ],
-                ];
-            case 'table':
-                return [
-                    [
-                        {text: 'Open preview', action: actions.openPreview},
-                        copyItem,
-                    ],
-                    [
-                        {text: 'Alter table...', action: actions.alterTable},
-                        {text: 'Select query...', action: actions.selectQuery},
-                        {text: 'Upsert query...', action: actions.upsertQuery},
-                    ],
-                ];
-            case 'index_table':
-                return [
-                    copyItem,
-                ];
-            case 'index':
-            default:
-                return [];
-        }
+        const DIR_SET: ActionsSet = [
+            [
+                copyItem,
+            ],
+            [
+                {text: 'Create table...', action: actions.createTable},
+            ],
+        ];
+        const TABLE_SET: ActionsSet = [
+            [
+                {text: 'Open preview', action: actions.openPreview},
+                copyItem,
+            ],
+            [
+                {text: 'Alter table...', action: actions.alterTable},
+                {text: 'Select query...', action: actions.selectQuery},
+                {text: 'Upsert query...', action: actions.upsertQuery},
+            ],
+        ];
+
+        const JUST_COPY: ActionsSet = [
+            copyItem,
+        ];
+
+        const EMPTY_SET: ActionsSet = [];
+
+        // verbose mapping to guarantee a correct actions set for new node types
+        // TS will error when a new type is added in the lib but is not mapped here
+        const nodeTypeToActions: Record<NavigationTreeNodeType, ActionsSet> = {
+            database: DIR_SET,
+            directory: DIR_SET,
+            table: TABLE_SET,
+            column_table: TABLE_SET,
+            index_table: JUST_COPY,
+            index: EMPTY_SET,
+            topic: DIR_SET,
+        };
+
+        return nodeTypeToActions[type];
     };

package/dist/services/api.js

@@ -147,14 +147,19 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             state: 0,
         });
     }
-    sendQuery(query, database, action, stats) {
-        return this.post(this.getPath('/viewer/json/query'), {
-            query,
-            database,
-            action,
-            stats,
-            timeout: 600000,
-        });
+    sendQuery({query, database, action, stats}, {concurrentId} = {}) {
+        return this.post(
+            this.getPath('/viewer/json/query'),
+            {
+                query,
+                database,
+                action,
+                stats,
+                timeout: 600000,
+            },
+            null,
+            {concurrentId},
+        );
     }
     getExplainQuery(query, database) {
         return this.post(this.getPath('/viewer/json/query'), {

package/dist/store/reducers/executeQuery.js

@@ -141,7 +141,7 @@ const executeQuery = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery(query, database, action, 'profile'),
+        request: window.api.sendQuery({query, database, action, stats: 'profile'}),
         actions: SEND_QUERY,
         dataHandler: (result) => {
             const resultData = result.result ?? result;

package/dist/store/reducers/executeTopQueries.js

@@ -47,7 +47,7 @@ const executeTopQueries = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery(query, database, action),
+        request: window.api.sendQuery({query, database, action}),
         actions: SEND_QUERY,
         dataHandler: (result) => {
             if (result && typeof result === 'string') {

package/dist/store/reducers/olapStats.js

@@ -52,7 +52,11 @@ const olapStats = (state = initialState, action) => {
 
 export const getOlapStats = ({path = ''}) => {
     return createApiRequest({
-        request: window.api.sendQuery(createOlatStatsQuery(path), path, queryAction),
+        request: window.api.sendQuery({
+            query: createOlatStatsQuery(path),
+            database: path,
+            action: queryAction,
+        }),
         actions: FETCH_OLAP_STATS,
         dataHandler: (result) => {
             if (result && typeof result === 'string') {

package/dist/store/reducers/preview.js

@@ -47,7 +47,7 @@ const preview = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery(query, database, action),
+        request: window.api.sendQuery({query, database, action}),
         actions: SEND_QUERY,
         dataHandler: (data) => {
             if (!Array.isArray(data)) {

package/dist/store/reducers/shardsWorkload.js

@@ -9,8 +9,30 @@ const initialState = {
     wasLoaded: false,
 };
 
-function createShardQuery(path) {
-    return `SELECT Path, TabletId, CPUCores FROM \`.sys/partition_stats\` WHERE Path='${path}' OR Path LIKE '${path}/%' ORDER BY CPUCores DESC LIMIT 20`;
+function formatSortOrder({columnId, order}) {
+    return `${columnId} ${order}`;
+}
+
+function createShardQuery(path, sortOrder, tenantName) {
+    const orderBy = Array.isArray(sortOrder) ?
+        `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` :
+        '';
+
+    const pathSelect = tenantName ?
+        `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path` :
+        'Path';
+
+    return `SELECT
+    ${pathSelect},
+    TabletId,
+    CPUCores,
+    DataSize
+FROM \`.sys/partition_stats\`
+WHERE
+    Path='${path}'
+    OR Path LIKE '${path}/%'
+${orderBy}
+LIMIT 20`;
 }
 
 const queryAction = 'execute-scan';
@@ -51,9 +73,15 @@ const shardsWorkload = (state = initialState, action) => {
     }
 };
 
-export const sendShardQuery = ({database, path = ''}) => {
+export const sendShardQuery = ({database, path = '', sortOrder}) => {
     return createApiRequest({
-        request: window.api.sendQuery(createShardQuery(path), database, queryAction),
+        request: window.api.sendQuery({
+            query: createShardQuery(path, sortOrder, database),
+            database,
+            action: queryAction,
+        }, {
+            concurrentId: 'topShards',
+        }),
         actions: SEND_SHARD_QUERY,
         dataHandler: (result) => {
             if (result && typeof result === 'string') {

package/dist/types/api/schema.ts

@@ -108,10 +108,16 @@ export enum EPathType {
     EPathTypeInvalid = 'EPathTypeInvalid',
     EPathTypeDir = 'EPathTypeDir',
     EPathTypeTable = 'EPathTypeTable',
+
     EPathTypeSubDomain = 'EPathTypeSubDomain',
+
+    EPathTypeTableIndex = 'EPathTypeTableIndex', 
+    EPathTypeExtSubDomain = 'EPathTypeExtSubDomain',
+
     EPathTypeColumnStore = 'EPathTypeColumnStore',
     EPathTypeColumnTable = 'EPathTypeColumnTable',
-    EPathTypeTableIndex = 'EPathTypeTableIndex', 
+    EPathTypeCdcStream = 'EPathTypeCdcStream',
+
 }
 
 export enum EPathSubType {

package/dist/types/api/storage.ts

@@ -6,7 +6,7 @@ enum EFlag {
     Red = 'Red',
 }
 
-enum TPDiskState {
+export enum TPDiskState {
     Initial = 'Initial',
     InitialFormatRead = 'InitialFormatRead',
     InitialFormatReadError = 'InitialFormatReadError',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "2.4.0"
+    "ydb-ui-components": "2.4.1"
   },
   "scripts": {
     "start": "react-app-rewired start",