ydb-embedded-ui 3.4.4 → 3.5.0

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss

@@ -19,14 +19,6 @@
         white-space: normal;
     }
 
-    &__lags-popover-content {
-        max-width: 300px;
-
-        div:nth-child(1) {
-            margin-bottom: 10px;
-        }
-    }
-
     &__messages-popover-content {
         max-width: 200px;
     }

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
-import {WriteLagImage, ReadLagImage} from '../../../../../components/LagImages';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 
 import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -28,37 +28,23 @@ export const ReadSessionHeader = () => (
 export const WriteLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
-        popoverContent={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.writeLags')}</div>
-                <div>
-                    <WriteLagImage />
-                </div>
-            </div>
-        }
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );
 
 export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
-        popoverContent={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.readLags')}</div>
-                <div>
-                    <ReadLagImage />
-                </div>
-            </div>
-        }
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.writeLags')} type="write" />}
     />
 );
 
 export const UnreadMessagesHeader = () => (
     <LabelWithPopover
         className={b('messages')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]}
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]}
         popoverContent={
             <div className={b('messages-popover-content')}>{i18n('headers.unread')}</div>
         }
@@ -68,7 +54,7 @@ export const UnreadMessagesHeader = () => (
 export const UncommitedMessagesHeader = () => (
     <LabelWithPopover
         className={b('messages')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]}
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]}
         popoverContent={
             <div className={b('messages-popover-content')}>{i18n('headers.uncommited')}</div>
         }

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

@@ -25,27 +25,33 @@
         @include search();
     }
 
-    &__result {
+    &__table {
         overflow: auto;
         flex-grow: 1;
 
         .data-table {
-            &,
-            &__table {
-                width: 100%;
-            }
-
-            &__td {
-                vertical-align: top;
-                white-space: pre;
-                word-break: break-word;
-            }
-
             &__row {
-                max-height: 80px;
-
                 cursor: pointer;
             }
         }
     }
+
+    &__query {
+        overflow: hidden;
+
+        width: 500px;
+
+        vertical-align: top;
+        white-space: pre-wrap;
+        text-overflow: ellipsis;
+        word-break: break-word;
+    }
+
+    &__user-sid {
+        overflow: hidden;
+
+        max-width: 200px;
+
+        text-overflow: ellipsis;
+    }
 }

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.d.ts

@@ -77,6 +77,10 @@ interface Window {
             consumer?: string;
         }) => Promise<import('../types/api/consumer').DescribeConsumerResult>;
         getHostInfo: () => Promise<import('../types/api/systemState').TEvSystemStateResponse>;
+        getNodeInfo: (
+            id?: string,
+        ) => Promise<import('../types/api/systemState').TEvSystemStateResponse>;
+        getNodesList: () => Promise<import('../types/api/nodesList').TEvNodesInfo>;
         [method: string]: Function;
     };
 }

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/{nodesList.js → nodesList.ts}

@@ -1,11 +1,19 @@
+import type {Reducer} from 'redux';
+
+import type {
+    NodesListState,
+    NodesListAction,
+    NodesListRootStateSlice,
+    NodesMap,
+} from '../../types/store/nodesList';
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_NODES_LIST = createRequestActionTypes('tenants', 'FETCH_NODES_LIST');
+export const FETCH_NODES_LIST = createRequestActionTypes('nodesList', 'FETCH_NODES_LIST');
 
 const initialState = {loading: true, wasLoaded: false, data: []};
 
-const nodesList = function (state = initialState, action) {
+const nodesList: Reducer<NodesListState, NodesListAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_NODES_LIST.REQUEST: {
             return {
@@ -36,13 +44,17 @@ const nodesList = function (state = initialState, action) {
 
 export function getNodesList() {
     return createApiRequest({
-        request: window.api.getNodeInfo(),
+        request: window.api.getNodesList(),
         actions: FETCH_NODES_LIST,
-        dataHandler: (data) => {
-            const {SystemStateInfo: nodes = []} = data;
-            return nodes;
-        },
     });
 }
 
+export const selectNodesMap = (state: NodesListRootStateSlice) =>
+    state.nodesList.data?.reduce<NodesMap>((nodesMap, node) => {
+        if (node.Id && node.Host) {
+            nodesMap.set(node.Id, node.Host);
+        }
+        return nodesMap;
+    }, new Map());
+
 export default nodesList;