ydb-embedded-ui 1.9.0 → 1.10.2

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [1.10.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.1...v1.10.2) (2022-08-17)
+
+
+### Bug Fixes
+
+* convert bytes on decimal scale ([db9b0a7](https://github.com/ydb-platform/ydb-embedded-ui/commit/db9b0a71fc5334f5a40992cc6abc0688782ad5d2))
+* display HDD instead of ROT as pdisk type ([bd9e5ba](https://github.com/ydb-platform/ydb-embedded-ui/commit/bd9e5ba4e594cb3a1f6a964f619f9824e083ae7c))
+* **InfoViewer:** accept default value formatter ([e03d8cc](https://github.com/ydb-platform/ydb-embedded-ui/commit/e03d8cc5de76e4ac00b05586ae6f6522a9708fb0))
+* **InfoViewer:** allow longer labels ([89060a3](https://github.com/ydb-platform/ydb-embedded-ui/commit/89060a381858b5beaa3c3cf3402c13c917705676))
+* **Overview:** display table r/o replicas ([6dbe0b4](https://github.com/ydb-platform/ydb-embedded-ui/commit/6dbe0b45fc5e3867f9d6141d270c15508a693e35))
+* **Overview:** format & group table info in overview ([1a35cfc](https://github.com/ydb-platform/ydb-embedded-ui/commit/1a35cfcd2075454c4a1f1fc4961a4b3106b6d225))
+* **QueryEditor:** save chosen run action ([b0fb436](https://github.com/ydb-platform/ydb-embedded-ui/commit/b0fb43651e0c6d1dc5d6a25f92716703402b556d))
+* use current i18n lang for numeral formatting ([5d58fcf](https://github.com/ydb-platform/ydb-embedded-ui/commit/5d58fcffde21924f3cbe6c28946c7a9f755a8490))
+
+## [1.10.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.0...v1.10.1) (2022-08-10)
+
+
+### Bug Fixes
+
+* **Tenant:** fix actions set for topics ([0c75bf4](https://github.com/ydb-platform/ydb-embedded-ui/commit/0c75bf4561966dd663ab1cd7c7b81ef6b4632e50))
+
+## [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/components/IndexInfoViewer/IndexInfoViewer.tsx

@@ -10,13 +10,16 @@ const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
 ]);
 
 const formatItem = createInfoFormatter<TIndexDescription>({
-    Type: (value) => value?.substring(10), // trims EIndexType prefix
-    State: (value) => value?.substring(11), // trims EIndexState prefix
-    KeyColumnNames: (value) => value?.join(', '),
-    DataColumnNames: (value) => value?.join(', '),
-}, {
-    KeyColumnNames: 'Columns',
-    DataColumnNames: 'Includes',
+    values: {
+        Type: (value) => value?.substring(10), // trims EIndexType prefix
+        State: (value) => value?.substring(11), // trims EIndexState prefix
+        KeyColumnNames: (value) => value?.join(', '),
+        DataColumnNames: (value) => value?.join(', '),
+    },
+    labels: {
+        KeyColumnNames: 'Columns',
+        DataColumnNames: 'Includes',
+    },
 });
 
 interface IndexInfoViewerProps {

package/dist/components/InfoViewer/InfoViewer.scss

@@ -27,11 +27,10 @@
 
     &__label {
         display: flex;
-        flex: 1 1 auto;
+        flex: 0 1 auto;
         align-items: baseline;
 
         min-width: 200px;
-        max-width: 200px;
 
         white-space: nowrap;
 

package/dist/components/InfoViewer/utils.ts

@@ -2,7 +2,7 @@ type LabelMap<T> = {
     [label in keyof T]?: string;
 }
 
-type FieldMappers<T> = {
+type ValueFormatters<T> = {
     [label in keyof T]?: (value: T[label]) => string | undefined;
 }
 
@@ -13,20 +13,28 @@ function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
 function formatValue<Shape, Key extends keyof Shape>(
     label: Key,
     value: Shape[Key],
-    mappers: FieldMappers<Shape>,
+    formatters: ValueFormatters<Shape>,
+    defaultFormatter?: (value: Shape[Key]) => string | undefined,
 ) {
-    const mapper = mappers[label];
-    const mappedValue = mapper ? mapper(value) : value;
+    const formatter = formatters[label] || defaultFormatter;
+    const formattedValue = formatter ? formatter(value) : value;
 
-    return String(mappedValue ?? '');
+    return String(formattedValue ?? '');
 }
 
-export function createInfoFormatter<Shape extends Record<string, any>>(
-    fieldMappers?: FieldMappers<Shape>,
-    labelMap?: LabelMap<Shape>,
-) {
+interface CreateInfoFormatterOptions<Shape> {
+    values?: ValueFormatters<Shape>,
+    labels?: LabelMap<Shape>,
+    defaultValueFormatter?: (value: Shape[keyof Shape]) => string | undefined,
+}
+
+export function createInfoFormatter<Shape extends Record<string, any>>({
+    values: valueFormatters,
+    labels: labelMap,
+    defaultValueFormatter,
+}: CreateInfoFormatterOptions<Shape>) {
     return <Key extends keyof Shape>(label: Key, value: Shape[Key]) => ({
         label: formatLabel(label, labelMap || {}),
-        value: formatValue(label, value, fieldMappers || {}),
+        value: formatValue(label, value, valueFormatters || {}, defaultValueFormatter),
     });
 }

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/DetailedOverview/DetailedOverview.tsx

@@ -60,20 +60,21 @@ function DetailedOverview(props: DetailedOverviewProps) {
         const isTenant = tenantName === currentSchemaPath;
         return (
             <div className={b()}>
-                <div className={b('section')}>
-                    {!isTenant && (
-                        <Overview type={type} tenantName={tenantName} />
-                    )}
-                    {isTenant && <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo}/>}
-                </div>
-                {isTenant && (
-                    <div className={b('section')}>
-                        <Healthcheck
-                            tenant={tenantName}
-                            preview={true}
-                            showMoreHandler={openModalHandler}
-                        />
-                    </div>
+                {isTenant ? (
+                    <>
+                        <div className={b('section')}>
+                            <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo} />
+                        </div>
+                        <div className={b('section')}>
+                            <Healthcheck
+                                tenant={tenantName}
+                                preview={true}
+                                showMoreHandler={openModalHandler}
+                            />
+                        </div>
+                    </>
+                ) : (
+                    <Overview type={type} tenantName={tenantName} />
                 )}
             </div>
         );

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/QueryEditor/QueryEditor.js

@@ -33,6 +33,7 @@ import {
     DEFAULT_SIZE_RESULT_PANE_KEY,
     DEFAULT_TABLE_SETTINGS,
     SAVED_QUERIES_KEY,
+    QUERY_INITIAL_RUN_ACTION_KEY,
 } from '../../../utils/constants';
 import {prepareQueryResponse} from '../../../utils/index';
 
@@ -538,7 +539,13 @@ function QueryEditor(props) {
     };
 
     const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries, selectRunAction} = props;
+        const {
+            executeQuery,
+            explainQuery,
+            savedQueries,
+            selectRunAction,
+            setSettingValue,
+        } = props;
         const {runAction} = executeQuery;
         const runIsDisabled = !executeQuery.input || executeQuery.loading;
         const runText = _.find(RUN_ACTIONS, {value: runAction}).content;
@@ -546,7 +553,10 @@ function QueryEditor(props) {
         const menuItems = RUN_ACTIONS.map((action) => {
             return {
                 text: action.content,
-                action: () => selectRunAction(action.value),
+                action: () => {
+                    selectRunAction(action.value);
+                    setSettingValue(QUERY_INITIAL_RUN_ACTION_KEY, action.value);
+                },
             };
         });