ydb-embedded-ui 1.8.7 → 1.10.0

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/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -28,29 +28,33 @@ class SchemaInfoViewer extends React.Component {
         if (data) {
             const {PathDescription = {}} = data;
             const {TableStats = {}, TabletMetrics = {}} = PathDescription;
-            const tableStatsInfo =
-                TableStats &&
-                Object.keys(TableStats).map((key) => ({
-                    label: key,
-                    value: TableStats[key].toString(),
-                }));
+            const {PartCount, ...restTableStats} = TableStats;
 
-            const tabletMetricsInfo =
-                TableStats &&
-                Object.keys(TabletMetrics).map((key) => ({
-                    label: key,
-                    value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
-                }));
+            const priorityInfo = [{
+                label: 'PartCount',
+                value: PartCount,
+            }].filter(({value}) => value !== undefined);
 
-            let generalInfo = Object.assign(tableStatsInfo, tabletMetricsInfo);
-            generalInfo = Object.assign(generalInfo);
+            const tableStatsInfo = Object.keys(restTableStats).map((key) => ({
+                label: key,
+                value: TableStats[key].toString(),
+            }));
 
-            const infoLength = Object.keys(generalInfo).length;
+            const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) => ({
+                label: key,
+                value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
+            }));
 
+            const generalInfo = [
+                ...priorityInfo,
+                ...tabletMetricsInfo,
+                ...tableStatsInfo,
+            ];
+ 
             return (
                 <div className={b()}>
                     <div className={b('item')}>
-                        {infoLength ? (
+                        {generalInfo.length ? (
                             <InfoViewer info={generalInfo}></InfoViewer>
                         ) : (
                             <div>Empty</div>

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

@@ -61,6 +61,7 @@ export function SchemaTree(props: SchemaTreeProps) {
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}
+            virtualize
         />
     );
 }

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

@@ -54,6 +54,8 @@ interface TPathDescription {
 
     ColumnStoreDescription?: unknown;
     ColumnTableDescription?: unknown;
+
+    TableIndex?: TIndexDescription;
 }
 
 interface TDirEntry {
@@ -80,15 +82,42 @@ interface TDirEntry {
     Version?: TPathVersion;
 }
 
+export interface TIndexDescription {
+    Name?: string;
+    /** uint64 */
+    LocalPathId?: string;
+
+    Type?: EIndexType;
+    State?: EIndexState;
+
+    KeyColumnNames?: string[];
+
+    /** uint64 */
+    SchemaVersion?: string;
+
+    /** uint64 */
+    PathOwnerId?: string;
+
+    DataColumnNames?: string[];
+    /** uint64 */
+    DataSize?: string;
+}
+
 // incomplete
 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 {
@@ -112,6 +141,19 @@ enum EPathState {
     EPathStateMoving = 'EPathStateMoving',
 }
 
+enum EIndexType {
+    EIndexTypeInvalid = 'EIndexTypeInvalid',
+    EIndexTypeGlobal = 'EIndexTypeGlobal',
+    EIndexTypeGlobalAsync = 'EIndexTypeGlobalAsync',
+}
+
+enum EIndexState {
+    EIndexStateInvalid = 'EIndexStateInvalid',
+    EIndexStateReady = 'EIndexStateReady',
+    EIndexStateNotReady = 'EIndexStateNotReady',
+    EIndexStateWriteOnly = 'EIndexStateWriteOnly',
+}
+
 // incomplete
 interface TPathVersion {
     /** uint64 */