ydb-embedded-ui 1.9.0 → 1.10.2

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -3,63 +3,185 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import './SchemaInfoViewer.scss';
 
-import {formatCPU, formatBytes} from '../../../../utils';
+import {formatCPU, formatBytes, formatNumber, formatBps} from '../../../../utils';
 
-import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
+import {InfoViewer, createInfoFormatter} from '../../../../components/InfoViewer';
 
 const b = cn('schema-info-viewer');
 
+const formatTabletMetricsItem = createInfoFormatter({
+    values: {
+        CPU: formatCPU,
+        Memory: formatBytes,
+        Storage: formatBytes,
+        Network: formatBps,
+        ReadThroughput: formatBps,
+        WriteThroughput: formatBps,
+    },
+    defaultValueFormatter: formatNumber,
+});
+
+const formatFollowerGroupItem = createInfoFormatter({
+    values: {
+        FollowerCount: formatNumber,
+    },
+});
+
+const formatPartitionConfigItem = createInfoFormatter({
+    values: {
+        FollowerCount: formatNumber,
+        CrossDataCenterFollowerCount: formatNumber,
+    },
+});
+
+const formatTableStatsItem = createInfoFormatter({
+    values: {
+        DataSize: formatBytes,
+        IndexSize: formatBytes,
+        LastAccessTime: (value) => value > 0 ? new Date(Number(value)).toUTCString() : 'N/A',
+        LastUpdateTime: (value) => value > 0 ? new Date(Number(value)).toUTCString() : 'N/A',
+    },
+    defaultValueFormatter: formatNumber,
+});
+
+const formatTableStats = (fields) => Object.entries(fields)
+    .map(([label, value]) => formatTableStatsItem(label, value))
+    .filter(({value}) => Boolean(value));
+
 class SchemaInfoViewer extends React.Component {
     static propTypes = {
         data: PropTypes.object.isRequired,
     };
-    formatTabletMetricsValue = (key, value) => {
-        if (key === 'CPU') {
-            return formatCPU(value);
-        } else if (key === 'Memory' || key === 'Storage') {
-            return formatBytes(value);
-        } else {
-            return value;
+
+    renderItem(itemData, title) {
+        if (!Array.isArray(itemData) || !itemData.length) {
+            return null;
         }
-    };
+
+        return (
+            <div className={b('item')}>
+                <InfoViewer
+                    title={title}
+                    info={itemData}
+                />
+            </div>
+        );
+    }
+
+    renderContent(data) {
+        const {PathDescription = {}} = data;
+        const {TableStats = {}, TabletMetrics = {}, Table: {PartitionConfig = {}} = {}} = PathDescription;
+        const {
+            PartCount,
+            RowCount,
+            DataSize,
+            IndexSize,
+
+            LastAccessTime,
+            LastUpdateTime,
+
+            ImmediateTxCompleted,
+            PlannedTxCompleted,
+            TxRejectedByOverload,
+            TxRejectedBySpace,
+            TxCompleteLagMsec,
+            InFlightTxCount,
+
+            RowUpdates,
+            RowDeletes,
+            RowReads,
+            RangeReads,
+            RangeReadRows,
+
+            ...restTableStats
+        } = TableStats;
+        const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
+
+        const tableStatsInfo = [
+            formatTableStats({
+                PartCount,
+                RowCount,
+                DataSize,
+                IndexSize,
+            }),
+            formatTableStats({
+                LastAccessTime,
+                LastUpdateTime,
+            }),
+            formatTableStats({
+                ImmediateTxCompleted,
+                PlannedTxCompleted,
+                TxRejectedByOverload,
+                TxRejectedBySpace,
+                TxCompleteLagMsec,
+                InFlightTxCount,
+            }),
+            formatTableStats({
+                RowUpdates,
+                RowDeletes,
+                RowReads,
+                RangeReads,
+                RangeReadRows,
+            }),
+            formatTableStats(restTableStats),
+        ];
+
+        const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
+            formatTabletMetricsItem(key, TabletMetrics[key])
+        );
+
+        const partitionConfigInfo = [];
+
+        if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
+            partitionConfigInfo.push(...Object.keys(FollowerGroups[0]).map((key) =>
+                formatFollowerGroupItem(key, FollowerGroups[0][key])
+            ));
+        } else if (FollowerCount !== undefined) {
+            partitionConfigInfo.push(
+                formatPartitionConfigItem('FollowerCount', FollowerCount)
+            );
+        } else if (CrossDataCenterFollowerCount !== undefined) {
+            partitionConfigInfo.push(
+                formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount)
+            );
+        }
+
+        if ([
+            tabletMetricsInfo,
+            partitionConfigInfo,
+            tableStatsInfo.flat(),
+        ].flat().length === 0) {
+            return (
+                <div className={b('item')}>Empty</div>
+            );
+        }
+
+        return (
+            <div className={b('row')}>
+                {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
+                    <div className={b('col')}>
+                        {this.renderItem(tabletMetricsInfo, 'Tablet Metrics')}
+                        {this.renderItem(partitionConfigInfo, 'Partition Config')}
+                    </div>
+                ) : null}
+                <div className={b('col')}>
+                    {tableStatsInfo.map((info, index) => (
+                        <React.Fragment key={index}>
+                            {this.renderItem(info, index === 0 ? 'Table Stats' : undefined)}
+                        </React.Fragment>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         const {data} = this.props;
 
         if (data) {
-            const {PathDescription = {}} = data;
-            const {TableStats = {}, TabletMetrics = {}} = PathDescription;
-            const {PartCount, ...restTableStats} = TableStats;
-
-            const priorityInfo = [{
-                label: 'PartCount',
-                value: PartCount,
-            }].filter(({value}) => value !== undefined);
-
-            const tableStatsInfo = Object.keys(restTableStats).map((key) => ({
-                label: key,
-                value: TableStats[key].toString(),
-            }));
-
-            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')}>
-                        {generalInfo.length ? (
-                            <InfoViewer info={generalInfo}></InfoViewer>
-                        ) : (
-                            <div>Empty</div>
-                        )}
-                    </div>
+                    {this.renderContent(data)}
                 </div>
             );
         } else {

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.scss

@@ -1,6 +1,24 @@
 .schema-info-viewer {
     overflow: auto;
 
+    &__row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    &__col {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        & + & {
+            margin-left: 50px;
+        }
+    }
+
     &__item {
         margin-bottom: 20px;
 

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,46 @@ 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,
+            topic: JUST_COPY,
+
+            index: EMPTY_SET,
+        };
+
+        return nodeTypeToActions[type];
     };

package/dist/services/api.js

@@ -83,7 +83,6 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 path,
                 enums: true,
                 backup: false,
-                partition_config: false,
                 partition_stats: false,
                 partitioning_info: false,
             },
@@ -147,14 +146,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

@@ -1,7 +1,8 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 import {getValueFromLS, parseJson} from '../../utils/utils';
-import {QUERIES_HISTORY_KEY} from '../../utils/constants';
+import {QUERIES_HISTORY_KEY, QUERY_INITIAL_RUN_ACTION_KEY} from '../../utils/constants';
+import {readSavedSettingsValue} from './settings';
 
 const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
@@ -39,7 +40,7 @@ const initialState = {
                 ? MAXIMUM_QUERIES_IN_HISTORY - 1
                 : queriesHistoryInitial.length - 1,
     },
-    runAction: RUN_ACTIONS_VALUES.script,
+    runAction: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY, RUN_ACTIONS_VALUES.script),
     monacoHotKey: null,
 };
 
@@ -141,7 +142,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/settings.js

@@ -1,4 +1,11 @@
-import {ALL, defaultUserSettings, SAVED_QUERIES_KEY, THEME_KEY, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
+import {
+    defaultUserSettings,
+    ALL,
+    SAVED_QUERIES_KEY,
+    THEME_KEY,
+    TENANT_INITIAL_TAB_KEY,
+    QUERY_INITIAL_RUN_ACTION_KEY,
+} from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
 
@@ -7,24 +14,24 @@ const SET_SETTING_VALUE = 'settings/SET_VALUE';
 
 const userSettings = window.userSettings || {};
 const systemSettings = window.systemSettings || {};
-const theme = window.web_version
-    ? userSettings.theme || 'light'
-    : getValueFromLS(THEME_KEY, 'light');
-const savedQueries = window.web_version
-    ? userSettings[SAVED_QUERIES_KEY]
-    : getValueFromLS(SAVED_QUERIES_KEY, '[]');
-const savedTenantGeneralTab = window.web_version
-    ? userSettings[TENANT_INITIAL_TAB_KEY]
-    : getValueFromLS(TENANT_INITIAL_TAB_KEY);
+
+export function readSavedSettingsValue(key, defaultValue) {
+    const savedValue = window.web_version
+        ? userSettings[key]
+        : getValueFromLS(key);
+
+    return savedValue ?? defaultValue;
+}
 
 export const initialState = {
     problemFilter: ALL,
     userSettings: {
         ...defaultUserSettings,
         ...userSettings,
-        theme,
-        [SAVED_QUERIES_KEY]: savedQueries,
-        [TENANT_INITIAL_TAB_KEY]: savedTenantGeneralTab,
+        theme: readSavedSettingsValue(THEME_KEY, 'light'),
+        [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
+        [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
+        [QUERY_INITIAL_RUN_ACTION_KEY]: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY),
     },
     systemSettings,
 };

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') {