ydb-embedded-ui 4.19.3 → 4.20.0

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

@@ -1,91 +1,44 @@
 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} from '@gravity-ui/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import {Search} from '../../../../components/Search';
-import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
-import {
-    fetchTopQueries,
-    setTopQueriesFilters,
-    setTopQueriesState,
-} from '../../../../store/reducers/executeTopQueries';
 
-import type {KeyValueRow} from '../../../../types/api/query';
 import type {EPathType} from '../../../../types/api/schema';
-import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
+import type {ITopQueriesFilters} from '../../../../store/reducers/executeTopQueries/types';
 
 import {
     TENANT_PAGE,
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../../store/reducers/tenant/constants';
-import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
+import {
+    setTopQueriesFilters,
+    setTopQueriesState,
+    fetchTopQueries,
+} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
 import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
-
-import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+import {parseQuery} from '../../../../routes';
+import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import {isColumnEntityType} from '../../utils/schema';
 import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
+import {getTopQueriesColumns} from './getTopQueriesColumns';
 
 import i18n from './i18n';
 import './TopQueries.scss';
 
 const b = cn('kv-top-queries');
 
-const COLUMNS: Column<KeyValueRow>[] = [
-    {
-        name: 'CPUTimeUs',
-        sortAccessor: (row) => Number(row.CPUTimeUs),
-        align: DataTable.RIGHT,
-    },
-    {
-        name: 'QueryText',
-        width: 500,
-        sortable: false,
-        render: ({row}) => (
-            <div className={b('query')}>
-                <TruncatedQuery
-                    value={row.QueryText?.toString()}
-                    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: 'UserSID',
-        render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
-        sortAccessor: (row) => String(row.UserSID),
-        align: DataTable.LEFT,
-    },
-];
-
 interface TopQueriesProps {
     path: string;
     type?: EPathType;
@@ -105,6 +58,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         data: {result: data = undefined} = {},
         filters: storeFilters,
     } = useTypedSelector((state) => state.executeTopQueries);
+    const columns = getTopQueriesColumns();
 
     const preventFetch = useRef(false);
 
@@ -173,9 +127,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
 
             dispatch(changeUserInput({input}));
 
-            const queryParams = qs.parse(location.search, {
-                ignoreQueryPrefix: true,
-            });
+            const queryParams = parseQuery(location);
 
             const queryPath = getTenantPath({
                 ...queryParams,
@@ -220,7 +172,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         return (
             <div className={b('table')}>
                 <DataTable
-                    columns={COLUMNS}
+                    columns={columns}
                     data={data}
                     settings={QUERY_TABLE_SETTINGS}
                     onRowClick={handleRowClick}

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

@@ -0,0 +1,82 @@
+import cn from 'bem-cn-lite';
+
+import DataTable, {type Column} from '@gravity-ui/react-data-table';
+
+import type {KeyValueRow} from '../../../../types/api/query';
+import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {MAX_QUERY_HEIGHT} from '../../utils/constants';
+
+import './TopQueries.scss';
+
+const b = cn('kv-top-queries');
+
+const TOP_QUERIES_COLUMNS_IDS = {
+    CPUTimeUs: 'CPUTimeUs',
+    QueryText: 'QueryText',
+    EndTime: 'EndTime',
+    ReadRows: 'ReadRows',
+    ReadBytes: 'ReadBytes',
+    UserSID: 'UserSID',
+};
+
+const cpuTimeUsColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.CPUTimeUs,
+    sortAccessor: (row) => Number(row.CPUTimeUs),
+    width: 120,
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const queryTextColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.QueryText,
+    sortAccessor: (row) => Number(row.CPUTimeUs),
+    render: ({row}) => (
+        <div className={b('query')}>
+            <TruncatedQuery value={row.QueryText?.toString()} maxQueryHeight={MAX_QUERY_HEIGHT} />
+        </div>
+    ),
+    sortable: false,
+};
+
+const endTimeColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.EndTime,
+    render: ({row}) => formatDateTime(new Date(row.EndTime as string).getTime()),
+    align: DataTable.RIGHT,
+};
+
+const readRowsColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.ReadRows,
+    render: ({row}) => formatNumber(row.ReadRows),
+    sortAccessor: (row) => Number(row.ReadRows),
+    align: DataTable.RIGHT,
+};
+
+const readBytesColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.ReadBytes,
+    render: ({row}) => formatNumber(row.ReadBytes),
+    sortAccessor: (row) => Number(row.ReadBytes),
+    align: DataTable.RIGHT,
+};
+
+const userSIDColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.UserSID,
+    render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
+    sortAccessor: (row) => String(row.UserSID),
+    align: DataTable.LEFT,
+};
+
+export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
+    return [
+        cpuTimeUsColumn,
+        queryTextColumn,
+        endTimeColumn,
+        readRowsColumn,
+        readBytesColumn,
+        userSIDColumn,
+    ];
+};
+
+export const getTenantOverviewTopQueriesColumns = (): Column<KeyValueRow>[] => {
+    return [queryTextColumn, cpuTimeUsColumn];
+};

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

@@ -4,8 +4,8 @@ import {DateRange, DateRangeValues} from '../../../../../components/DateRange';
 
 import {
     EShardsWorkloadMode,
-    IShardsWorkloadFilters,
-} from '../../../../../types/store/shardsWorkload';
+    type IShardsWorkloadFilters,
+} from '../../../../../store/reducers/shardsWorkload/types';
 
 import {isEnumMember} from '../../../../../utils/typecheckers';
 

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

@@ -1,43 +1,38 @@
-import {useState, useContext, useEffect, useMemo} from 'react';
+import {useState, useEffect, useMemo} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
+import {useLocation} from 'react-router';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
-import {InternalLink} from '../../../../components/InternalLink';
-
-import HistoryContext from '../../../../contexts/HistoryContext';
-
-import routes, {createHref} from '../../../../routes';
-
 import {
     sendShardQuery,
     setShardsState,
     setShardsQueryFilters,
-} from '../../../../store/reducers/shardsWorkload';
-import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema/schema';
-import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
+} from '../../../../store/reducers/shardsWorkload/shardsWorkload';
+import {
+    EShardsWorkloadMode,
+    type IShardsWorkloadFilters,
+} from '../../../../store/reducers/shardsWorkload/types';
 
 import type {EPathType} from '../../../../types/api/schema';
 import type {CellValue, KeyValueRow} from '../../../../types/api/query';
 
-import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
+import {formatDateTime} from '../../../../utils/dataFormatters/dataFormatters';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
-
-import {getDefaultNodePath} from '../../../Node/NodePages';
-
+import {isSortableTopShardsProperty} from '../../../../utils/diagnostics';
 import {isColumnEntityType} from '../../utils/schema';
 
 import {Filters} from './Filters';
+import {getShardsWorkloadColumns} from './getTopShardsColumns';
 
 import i18n from './i18n';
 import './TopShards.scss';
 
 export const b = cn('top-shards');
-const bLink = cn('yc-link');
 
 const TABLE_SETTINGS: Settings = {
     ...DEFAULT_TABLE_SETTINGS,
@@ -58,10 +53,6 @@ const tableColumnsNames = {
     IntervalEnd: 'IntervalEnd',
 };
 
-function prepareCPUWorkloadValue(value: string | number) {
-    return `${(Number(value) * 100).toFixed(2)}%`;
-}
-
 function prepareDateTimeValue(value: CellValue) {
     if (!value) {
         return '–';
@@ -105,6 +96,7 @@ interface TopShardsProps {
 
 export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
@@ -159,8 +151,6 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
         );
     }, [dispatch, currentSchemaPath, tenantPath, filters]);
 
-    const history = useContext(HistoryContext);
-
     const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
         // 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,
@@ -190,81 +180,12 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     };
 
     const tableColumns = useMemo(() => {
-        const onSchemaClick = (schemaPath: string) => {
-            return () => {
-                dispatch(setCurrentSchemaPath(schemaPath));
-                dispatch(getSchema({path: schemaPath}));
-                history.go(0);
-            };
-        };
-
-        const columns: Column<KeyValueRow>[] = [
-            {
-                name: tableColumnsNames.Path,
-                render: ({row}) => {
-                    // row.Path - relative schema path
-                    return (
-                        <span
-                            onClick={onSchemaClick(tenantPath + row.Path)}
-                            className={bLink({view: 'normal'})}
-                        >
-                            {row.Path}
-                        </span>
-                    );
-                },
-                sortable: false,
-            },
-            {
-                name: tableColumnsNames.CPUCores,
-                render: ({row}) => {
-                    return prepareCPUWorkloadValue(row.CPUCores || 0);
-                },
-                align: DataTable.RIGHT,
-            },
-            {
-                name: tableColumnsNames.DataSize,
-                header: 'DataSize (B)',
-                render: ({row}) => {
-                    return formatNumber(row.DataSize);
-                },
-                align: DataTable.RIGHT,
-            },
-            {
-                name: tableColumnsNames.TabletId,
-                render: ({row}) => {
-                    if (!row.TabletId) {
-                        return '–';
-                    }
-                    return (
-                        <InternalLink to={createHref(routes.tablet, {id: row.TabletId})}>
-                            {row.TabletId}
-                        </InternalLink>
-                    );
-                },
-                sortable: false,
-            },
-            {
-                name: tableColumnsNames.NodeId,
-                render: ({row}) => {
-                    if (!row.NodeId) {
-                        return '–';
-                    }
-                    return (
-                        <InternalLink to={getDefaultNodePath(row.NodeId)}>
-                            {row.NodeId}
-                        </InternalLink>
-                    );
-                },
-                align: DataTable.RIGHT,
-                sortable: false,
-            },
-            {
-                name: tableColumnsNames.InFlightTxCount,
-                render: ({row}) => formatNumber(row.InFlightTxCount),
-                align: DataTable.RIGHT,
-                sortable: false,
-            },
-        ];
+        const rawColumns: Column<KeyValueRow>[] = getShardsWorkloadColumns(tenantPath, location);
+
+        const columns: Column<KeyValueRow>[] = rawColumns.map((column) => ({
+            ...column,
+            sortable: isSortableTopShardsProperty(column.name),
+        }));
 
         if (filters.mode === EShardsWorkloadMode.History) {
             // after NodeId
@@ -284,7 +205,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
         }
 
         return columns;
-    }, [dispatch, filters.mode, history, tenantPath]);
+    }, [filters.mode, tenantPath, location]);
 
     const renderLoader = () => {
         return (

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

@@ -0,0 +1,138 @@
+import type {Location} from 'history';
+
+import DataTable, {type Column} from '@gravity-ui/react-data-table';
+
+import type {KeyValueRow} from '../../../../types/api/query';
+import type {ValueOf} from '../../../../types/common';
+import {formatNumber, roundToPrecision} from '../../../../utils/dataFormatters/dataFormatters';
+import {getLoadSeverityForShard} from '../../../../store/reducers/tenantOverview/topShards/utils';
+import {InternalLink} from '../../../../components/InternalLink';
+import routes, {createHref} from '../../../../routes';
+import {getDefaultNodePath} from '../../../Node/NodePages';
+import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
+import {LinkToSchemaObject} from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+
+const TOP_SHARDS_COLUMNS_IDS = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    DataSize: 'DataSize',
+    Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
+} as const;
+
+type TopShardsColumns = ValueOf<typeof TOP_SHARDS_COLUMNS_IDS>;
+
+const tableColumnsNames: Record<TopShardsColumns, string> = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    DataSize: 'DataSize (B)',
+    Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
+};
+
+function prepareCPUWorkloadValue(value: string | number) {
+    return `${roundToPrecision(Number(value) * 100, 2)}%`;
+}
+
+const getPathColumn = (schemaPath: string, location: Location): Column<KeyValueRow> => ({
+    name: TOP_SHARDS_COLUMNS_IDS.Path,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.Path],
+    render: ({row}) => {
+        // row.Path - relative schema path
+        return (
+            <LinkToSchemaObject path={schemaPath + row.Path} location={location}>
+                {row.Path}
+            </LinkToSchemaObject>
+        );
+    },
+    sortable: false,
+});
+
+const cpuCoresColumn: Column<KeyValueRow> = {
+    name: TOP_SHARDS_COLUMNS_IDS.CPUCores,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.CPUCores],
+    render: ({row}) => {
+        return prepareCPUWorkloadValue(row.CPUCores || 0);
+    },
+    align: DataTable.RIGHT,
+};
+
+const dataSizeColumn: Column<KeyValueRow> = {
+    name: TOP_SHARDS_COLUMNS_IDS.DataSize,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.DataSize],
+    render: ({row}) => {
+        return formatNumber(row.DataSize);
+    },
+    align: DataTable.RIGHT,
+};
+
+const tabletIdColumn: Column<KeyValueRow> = {
+    name: TOP_SHARDS_COLUMNS_IDS.TabletId,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.TabletId],
+    render: ({row}) => {
+        if (!row.TabletId) {
+            return '–';
+        }
+        return (
+            <InternalLink to={createHref(routes.tablet, {id: row.TabletId})}>
+                {row.TabletId}
+            </InternalLink>
+        );
+    },
+    sortable: false,
+};
+
+const nodeIdColumn: Column<KeyValueRow> = {
+    name: TOP_SHARDS_COLUMNS_IDS.NodeId,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.NodeId],
+    render: ({row}) => {
+        if (!row.NodeId) {
+            return '–';
+        }
+        return <InternalLink to={getDefaultNodePath(row.NodeId)}>{row.NodeId}</InternalLink>;
+    },
+    align: DataTable.RIGHT,
+};
+
+const topShardsCpuCoresColumn: Column<KeyValueRow> = {
+    name: TOP_SHARDS_COLUMNS_IDS.CPUCores,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.CPUCores],
+    render: ({row}) => {
+        return (
+            <UsageLabel
+                value={roundToPrecision(Number(row.CPUCores) * 100, 2)}
+                theme={getLoadSeverityForShard(Number(row.CPUCores) * 100)}
+            />
+        );
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const inFlightTxCountColumn: Column<KeyValueRow> = {
+    name: TOP_SHARDS_COLUMNS_IDS.InFlightTxCount,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.InFlightTxCount],
+    render: ({row}) => formatNumber(row.InFlightTxCount),
+    align: DataTable.RIGHT,
+};
+
+export const getShardsWorkloadColumns = (schemaPath: string, location: Location) => {
+    return [
+        getPathColumn(schemaPath, location),
+        cpuCoresColumn,
+        dataSizeColumn,
+        tabletIdColumn,
+        nodeIdColumn,
+        inFlightTxCountColumn,
+    ];
+};
+
+export const getTopShardsColumns = (schemaPath: string, location: Location) => {
+    return [tabletIdColumn, getPathColumn(schemaPath, location), topShardsCpuCoresColumn];
+};

package/dist/containers/Tenant/Info/ExternalTable/ExternalTable.tsx

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 
 import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {useTypedSelector} from '../../../../utils/hooks';
-import {createHref, parseQuery} from '../../../../routes';
+import {createExternalUILink, parseQuery} from '../../../../routes';
 import {formatCommonItem} from '../../../../components/InfoViewer/formatters';
 import {InfoViewer, InfoViewerItem} from '../../../../components/InfoViewer';
 import {ExternalLinkWithIcon} from '../../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
@@ -72,9 +72,7 @@ const ExternalTable = ({data, prepareData}: ExternalTableProps) => {
     const location = useLocation();
     const query = parseQuery(location);
 
-    // embedded version could be located in some folder (e.g. host/some_folder/app_router_path)
-    // window.location has the full pathname, while location from router ignores path to project
-    const pathToDataSource = createHref(window.location.pathname, undefined, {
+    const pathToDataSource = createExternalUILink({
         ...query,
         schema: data?.PathDescription?.ExternalTableDescription?.DataSourcePath,
     });