ydb-embedded-ui 3.4.5 → 3.5.0

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

@@ -1,5 +1,7 @@
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {useDispatch} from 'react-redux';
+import {useHistory, useLocation} from 'react-router';
+import qs from 'qs';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
@@ -21,13 +23,14 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
 
-import {formatDateTime} from '../../../../utils';
+import {formatDateTime, formatNumber} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
+import routes, {createHref} from '../../../../routes';
 
 import {isColumnEntityType} from '../../utils/schema';
-import {TenantGeneralTabsIds} from '../../TenantPages';
+import {TenantGeneralTabsIds, TenantTabsGroups} from '../../TenantPages';
 
 import i18n from './i18n';
 import './TopQueries.scss';
@@ -43,19 +46,41 @@ const MAX_QUERY_HEIGHT = 10;
 const COLUMNS: Column<KeyValueRow>[] = [
     {
         name: 'CPUTimeUs',
-        width: 140,
-        sortAccessor: (row) => Number(row['CPUTimeUs']),
+        sortAccessor: (row) => Number(row.CPUTimeUs),
+        align: DataTable.RIGHT,
     },
     {
         name: 'QueryText',
         width: 500,
         sortable: false,
-        render: ({value}) => <TruncatedQuery value={value} maxQueryHeight={MAX_QUERY_HEIGHT} />,
+        render: ({row}) => (
+            <div className={b('query')}>
+                <TruncatedQuery value={row.QueryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+            </div>
+        ),
+    },
+    {
+        name: 'EndTime',
+        render: ({row}) => formatDateTime(new Date(row.EndTime as string).getTime()),
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'ReadRows',
+        render: ({row}) => formatNumber(row.ReadRows),
+        sortAccessor: (row) => Number(row.ReadRows),
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'ReadBytes',
+        render: ({row}) => formatNumber(row.ReadBytes),
+        sortAccessor: (row) => Number(row.ReadBytes),
+        align: DataTable.RIGHT,
     },
     {
-        name: 'IntervalEnd',
-        width: 140,
-        render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+        name: 'UserSID',
+        render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
+        sortAccessor: (row) => String(row.UserSID),
+        align: DataTable.LEFT,
     },
 ];
 
@@ -65,8 +90,10 @@ interface TopQueriesProps {
     type?: EPathType;
 }
 
-export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
+export const TopQueries = ({path, type}: TopQueriesProps) => {
     const dispatch = useDispatch();
+    const location = useLocation();
+    const history = useHistory();
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -144,9 +171,19 @@ export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
             const {QueryText: input} = row;
 
             dispatch(changeUserInput({input}));
-            changeSchemaTab(TenantGeneralTabsIds.query);
+
+            const queryParams = qs.parse(location.search, {
+                ignoreQueryPrefix: true,
+            });
+
+            const queryPath = createHref(routes.tenant, undefined, {
+                ...queryParams,
+                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
+            });
+
+            history.push(queryPath);
         },
-        [changeSchemaTab, dispatch],
+        [dispatch, history, location],
     );
 
     const handleTextSearchUpdate = (text: string) => {
@@ -179,7 +216,7 @@ export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
         }
 
         return (
-            <div className={b('result')}>
+            <div className={b('table')}>
                 <DataTable
                     columns={COLUMNS}
                     data={data}

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

@@ -20,6 +20,7 @@ import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema
 import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
 
 import type {EPathType} from '../../../../types/api/schema';
+import type {CellValue, KeyValueRow} from '../../../../types/api/query';
 
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
@@ -57,10 +58,17 @@ const tableColumnsNames = {
     IntervalEnd: 'IntervalEnd',
 };
 
-function prepareCPUWorkloadValue(value: string) {
+function prepareCPUWorkloadValue(value: string | number) {
     return `${(Number(value) * 100).toFixed(2)}%`;
 }
 
+function prepareDateTimeValue(value: CellValue) {
+    if (!value) {
+        return '–';
+    }
+    return formatDateTime(new Date(value).getTime());
+}
+
 function stringToDataTableSortOrder(value: string): SortOrder[] | undefined {
     return value
         ? value.split(',').map((columnId) => ({
@@ -190,16 +198,17 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             };
         };
 
-        const columns: Column<any>[] = [
+        const columns: Column<KeyValueRow>[] = [
             {
                 name: tableColumnsNames.Path,
-                render: ({value: relativeNodePath}) => {
+                render: ({row}) => {
+                    // row.Path - relative schema path
                     return (
                         <span
-                            onClick={onSchemaClick(tenantPath + relativeNodePath)}
+                            onClick={onSchemaClick(tenantPath + row.Path)}
                             className={bLink({view: 'normal'})}
                         >
-                            {relativeNodePath as string}
+                            {row.Path}
                         </span>
                     );
                 },
@@ -207,25 +216,28 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             },
             {
                 name: tableColumnsNames.CPUCores,
-                render: ({value}) => {
-                    return prepareCPUWorkloadValue(value as string);
+                render: ({row}) => {
+                    return prepareCPUWorkloadValue(row.CPUCores || 0);
                 },
                 align: DataTable.RIGHT,
             },
             {
                 name: tableColumnsNames.DataSize,
                 header: 'DataSize (B)',
-                render: ({value}) => {
-                    return formatNumber(value as number);
+                render: ({row}) => {
+                    return formatNumber(row.DataSize);
                 },
                 align: DataTable.RIGHT,
             },
             {
                 name: tableColumnsNames.TabletId,
-                render: ({value}) => {
+                render: ({row}) => {
+                    if (!row.TabletId) {
+                        return '–';
+                    }
                     return (
-                        <InternalLink to={createHref(routes.tablet, {id: value})}>
-                            {value as string}
+                        <InternalLink to={createHref(routes.tablet, {id: row.TabletId})}>
+                            {row.TabletId}
                         </InternalLink>
                     );
                 },
@@ -233,10 +245,13 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             },
             {
                 name: tableColumnsNames.NodeId,
-                render: ({value: nodeId}) => {
+                render: ({row}) => {
+                    if (!row.NodeId) {
+                        return '–';
+                    }
                     return (
-                        <InternalLink to={getDefaultNodePath(nodeId as string)}>
-                            {nodeId as string}
+                        <InternalLink to={getDefaultNodePath(row.NodeId)}>
+                            {row.NodeId}
                         </InternalLink>
                     );
                 },
@@ -245,7 +260,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             },
             {
                 name: tableColumnsNames.InFlightTxCount,
-                render: ({value}) => formatNumber(value as number),
+                render: ({row}) => formatNumber(row.InFlightTxCount),
                 align: DataTable.RIGHT,
                 sortable: false,
             },
@@ -255,12 +270,16 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             // after NodeId
             columns.splice(5, 0, {
                 name: tableColumnsNames.PeakTime,
-                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
+                render: ({row}) => {
+                    return prepareDateTimeValue(row.PeakTime);
+                },
                 sortable: false,
             });
             columns.push({
                 name: tableColumnsNames.IntervalEnd,
-                render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+                render: ({row}) => {
+                    return prepareDateTimeValue(row.IntervalEnd);
+                },
             });
         }
 

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -544,6 +544,7 @@ function QueryEditor(props) {
                     </Button>
                     <DropdownMenu
                         items={menuItems}
+                        popupClassName={b('select-query-action-popup')}
                         switcher={
                             <Button
                                 view="action"

package/dist/routes.ts

@@ -28,7 +28,7 @@ export const CLUSTER_PAGES = {
 
 export function createHref(
     route: string,
-    params?: object,
+    params?: Record<string, string | number>,
     query: Record<string | number, string | number | string[] | number[] | undefined> = {},
 ) {
     let extendedQuery = query;

package/dist/services/api.js

@@ -96,9 +96,9 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 enums: true,
                 backup: false,
                 private: true,
-                partition_config: false,
-                partition_stats: false,
-                partitioning_info: false,
+                partition_config: true,
+                partition_stats: true,
+                partitioning_info: true,
                 subs: 1,
             },
             {concurrentId: concurrentId || `getSchema|${path}`},

package/dist/store/reducers/{executeQuery.js → executeQuery.ts}

@@ -1,13 +1,25 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import type {Reducer} from 'redux';
+
+import type {Actions} from '../../types/api/query';
+import type {
+    ExecuteQueryAction,
+    ExecuteQueryState,
+    MonacoHotKeyAction,
+    RunAction,
+} from '../../types/store/executeQuery';
 import {getValueFromLS, parseJson} from '../../utils/utils';
 import {QUERIES_HISTORY_KEY, QUERY_INITIAL_RUN_ACTION_KEY} from '../../utils/constants';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
+import '../../services/api';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
 import {readSavedSettingsValue} from './settings';
 
 const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
-const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
+export const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
+
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
 const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
 const GO_TO_PREVIOUS_QUERY = 'query/GO_TO_PREVIOUS_QUERY';
@@ -15,21 +27,21 @@ const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
 const SELECT_RUN_ACTION = 'query/SELECT_RUN_ACTION';
 const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
 
-const queriesHistoryInitial = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
+const queriesHistoryInitial: string[] = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
 
 const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
 export const RUN_ACTIONS_VALUES = {
     script: 'execute-script',
     scan: 'execute-scan',
-};
+} as const;
 
 export const MONACO_HOT_KEY_ACTIONS = {
     sendQuery: 'sendQuery',
     goPrev: 'goPrev',
     goNext: 'goNext',
     getExplain: 'getExplain',
-};
+} as const;
 
 const initialState = {
     loading: false,
@@ -45,7 +57,10 @@ const initialState = {
     monacoHotKey: null,
 };
 
-const executeQuery = (state = initialState, action) => {
+const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
+    state = initialState,
+    action,
+) => {
     switch (action.type) {
         case SEND_QUERY.REQUEST: {
             return {
@@ -141,51 +156,66 @@ const executeQuery = (state = initialState, action) => {
     }
 };
 
-export const sendQuery = ({query, database, action}) => {
+export const sendQuery = ({
+    query,
+    database,
+    action,
+}: {
+    query: string;
+    database: string;
+    action: Actions;
+}) => {
     return createApiRequest({
-        request: window.api.sendQuery({schema: 'modern', query, database, action, stats: 'profile'}),
+        request: window.api.sendQuery({
+            schema: 'modern',
+            query,
+            database,
+            action,
+            stats: 'profile',
+        }),
         actions: SEND_QUERY,
         dataHandler: parseQueryAPIExecuteResponse,
     });
 };
 
-export const saveQueryToHistory = (query) => {
+export const saveQueryToHistory = (query: string) => {
     return {
         type: SAVE_QUERY_TO_HISTORY,
         data: query,
-    };
+    } as const;
 };
 
-export const selectRunAction = (value) => {
+export const selectRunAction = (value: RunAction) => {
     return {
         type: SELECT_RUN_ACTION,
         data: value,
-    };
+    } as const;
 };
 
 export const goToPreviousQuery = () => {
     return {
         type: GO_TO_PREVIOUS_QUERY,
-    };
+    } as const;
 };
 
 export const goToNextQuery = () => {
     return {
         type: GO_TO_NEXT_QUERY,
-    };
+    } as const;
 };
 
-export const changeUserInput = ({input}) => {
-    return (dispatch) => {
-        dispatch({type: CHANGE_USER_INPUT, data: {input}});
-    };
+export const changeUserInput = ({input}: {input: string}) => {
+    return {
+        type: CHANGE_USER_INPUT,
+        data: {input},
+    } as const;
 };
 
-export const setMonacoHotKey = (value) => {
+export const setMonacoHotKey = (value: MonacoHotKeyAction) => {
     return {
         type: MONACO_HOT_KEY,
         data: value,
-    };
+    } as const;
 };
 
 export default executeQuery;

package/dist/store/reducers/executeTopQueries.ts

@@ -66,7 +66,11 @@ const getQueryText = (path: string, filters?: ITopQueriesFilters) => {
 SELECT
     CPUTime as CPUTimeUs,
     QueryText,
-    IntervalEnd
+    IntervalEnd,
+    EndTime,
+    ReadRows,
+    ReadBytes,
+    UserSID
 FROM \`${path}/.sys/top_queries_by_cpu_time_one_hour\`
 WHERE ${filterConditions || 'true'}
 `;

package/dist/store/reducers/{olapStats.js → olapStats.ts}

@@ -1,11 +1,13 @@
-import '../../services/api';
+import type {Reducer} from 'redux';
+
+import type {OlapStatsAction, OlapStatsState} from '../../types/store/olapStats';
 
+import '../../services/api';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_OLAP_STATS = createRequestActionTypes('query', 'SEND_OLAP_STATS_QUERY');
-const SET_OLAP_STATS_OPTIONS = createRequestActionTypes('query', 'SET_OLAP_STATS_OPTIONS');
+export const FETCH_OLAP_STATS = createRequestActionTypes('query', 'SEND_OLAP_STATS_QUERY');
 const RESET_LOADING_STATE = 'olapStats/RESET_LOADING_STATE';
 
 const initialState = {
@@ -13,13 +15,13 @@ const initialState = {
     wasLoaded: false,
 };
 
-function createOlatStatsQuery(path) {
+function createOlatStatsQuery(path: string) {
     return `SELECT * FROM \`${path}/.sys/primary_index_stats\``;
 }
 
 const queryAction = 'execute-scan';
 
-const olapStats = (state = initialState, action) => {
+const olapStats: Reducer<OlapStatsState, OlapStatsAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_OLAP_STATS.REQUEST: {
             return {
@@ -44,11 +46,6 @@ const olapStats = (state = initialState, action) => {
                 loading: false,
             };
         }
-        case SET_OLAP_STATS_OPTIONS:
-            return {
-                ...state,
-                ...action.data,
-            };
         case RESET_LOADING_STATE: {
             return {
                 ...state,
@@ -73,17 +70,10 @@ export const getOlapStats = ({path = ''}) => {
     });
 };
 
-export function setOlapStatsOptions(options) {
-    return {
-        type: SET_OLAP_STATS_OPTIONS,
-        data: options,
-    };
-}
-
 export function resetLoadingState() {
     return {
         type: RESET_LOADING_STATE,
-    };
+    } as const;
 }
 
 export default olapStats;

package/dist/store/reducers/settings.js

@@ -38,7 +38,7 @@ export const initialState = {
     problemFilter: ALL,
     userSettings: {
         ...userSettings,
-        [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'light'),
+        [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'system'),
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,

package/dist/store/reducers/storage.js

@@ -243,13 +243,11 @@ export const getFlatListStorageGroups = createSelector([getStoragePools], (stora
                     const limitSizeBytes = _.reduce(
                         group.VDisks,
                         (acc, vDisk) => {
-                            return (
-                                acc +
-                                (Number(vDisk.AvailableSize) ||
-                                    Number(vDisk.PDisk?.AvailableSize) ||
-                                    0) +
-                                (Number(vDisk.AllocatedSize) || 0)
-                            );
+                            const {AvailableSize, AllocatedSize, PDisk} = vDisk;
+                            const available = (AvailableSize ?? PDisk?.AvailableSize) || 0;
+                            const allocated = AllocatedSize || 0;
+
+                            return acc + Number(available) + Number(allocated);
                         },
                         0,
                     );

package/dist/types/api/query.ts

@@ -30,7 +30,7 @@ export type Schemas = 'classic' | 'modern' | 'ydb' | undefined;
 
 // common types
 
-type CellValue = string | number | null | undefined;
+export type CellValue = string | number | null | undefined;
 
 export type KeyValueRow<T = CellValue> = {
     [key: string]: T;
@@ -63,6 +63,7 @@ export type ExecuteYdbResponse = {
     result: KeyValueRow[];
 } & CommonFields;
 
+// prettier-ignore
 type ExecuteResponse<Schema extends Schemas> =
     | CommonFields // result can be undefined for queries like `insert into`
     | (Schema extends 'modern'
@@ -102,6 +103,7 @@ type ExplainResponse = CommonFields;
 
 // deprecated response from older versions, backward compatibility
 
+// prettier-ignore
 type DeprecatedExplainResponse<Action extends ExplainActions> = 
     Action extends 'explain-ast'
         ? ({result: {ast: AST}} & Required<DeprecatedCommonFields>) | {ast: AST}
@@ -121,6 +123,7 @@ export type QueryAPIExplainResponse<Action extends ExplainActions> =
     | DeprecatedExplainResponse<Action>
     | null;
 
+// prettier-ignore
 export type QueryAPIResponse<Action extends Actions, Schema extends Schemas = undefined> = 
     Action extends ExecuteActions
         ? QueryAPIExecuteResponse<Schema>