ydb-embedded-ui 4.19.3 → 4.20.1

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -1,26 +1,20 @@
 import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
+import {useLocation} from 'react-router';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Popover} from '@gravity-ui/uikit';
 
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {
     fetchTopTables,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
-import {
-    TENANT_OVERVIEW_TABLES_LIMIT,
-    TENANT_OVERVIEW_TABLES_SETTINGS,
-} from '../../../../../utils/constants';
 import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
-import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
-import {ResponseError} from '../../../../../components/Errors/ResponseError';
-
-import './TenantStorage.scss';
+import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
-const b = cn('tenant-overview-storage');
+import '../TenantOverview.scss';
 
 interface TopTablesProps {
     path: string;
@@ -28,6 +22,7 @@ interface TopTablesProps {
 
 export function TopTables({path}: TopTablesProps) {
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -67,39 +62,25 @@ export function TopTables({path}: TopTablesProps) {
         {
             name: 'Path',
             sortable: false,
-            render: ({row}) => (
-                <div className={b('cell-with-popover-wrapper')}>
-                    <Popover className={b('cell-with-popover')} content={row.Path}>
-                        {row.Path}
-                    </Popover>
-                </div>
-            ),
+            render: ({row}) =>
+                row.Path ? (
+                    <CellWithPopover content={row.Path}>
+                        <LinkToSchemaObject path={String(row.Path)} location={location}>
+                            {row.Path}
+                        </LinkToSchemaObject>
+                    </CellWithPopover>
+                ) : null,
         },
     ];
 
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} />;
-        }
-
-        if (loading && !wasLoaded) {
-            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
-        }
-
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                columns={columns}
-                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
-                data={data || []}
-            />
-        );
-    };
-
     return (
-        <>
-            <div className={b('title')}>Top tables by size</div>
-            <div className={b('table')}>{renderContent()}</div>
-        </>
+        <TenantOverviewTableLayout
+            data={data || []}
+            columns={columns}
+            title="Top tables by size"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+        />
     );
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -2,10 +2,10 @@
   "no-data": "No data",
   "no-pools-data": "No pools data",
 
+  "top-nodes.empty-data": "No such nodes",
+
   "title.pools": "Pools",
   "title.metrics": "Metrics",
 
-  "top-groups.empty-data": "No such groups",
-
-  "label.under-development": "This section is under development"
+  "top-groups.empty-data": "No such groups"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -2,10 +2,10 @@
   "no-data": "Нет данных",
   "no-pools-data": "Нет данных о пулах",
 
+  "top-nodes.empty-data": "Нет узлов",
+
   "title.pools": "Пулы",
   "title.metrics": "Метрики",
 
-  "top-groups.empty-data": "Нет групп",
-
-  "label.under-development": "Этот раздел находится в разработке"
+  "top-groups.empty-data": "Нет групп"
 }

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

@@ -39,8 +39,6 @@
     &__query {
         overflow: hidden;
 
-        width: 500px;
-
         vertical-align: top;
         white-space: pre-wrap;
         text-overflow: ellipsis;

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

@@ -1,91 +1,45 @@
 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 {isSortableTopQueriesProperty} from '../../../../utils/diagnostics';
 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 +59,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         data: {result: data = undefined} = {},
         filters: storeFilters,
     } = useTypedSelector((state) => state.executeTopQueries);
+    const rawColumns = getTopQueriesColumns();
 
     const preventFetch = useRef(false);
 
@@ -117,6 +72,11 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         dispatch(setTopQueriesFilters(filters));
     }, [dispatch, filters]);
 
+    const columns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableTopQueriesProperty(column.name),
+    }));
+
     const setDefaultFiltersFromResponse = (responseData?: IQueryResult) => {
         const intervalEnd = responseData?.result?.[0]?.IntervalEnd;
 
@@ -173,9 +133,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 +178,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,102 @@
+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 {generateHash} from '../../../../utils/generateHash';
+import {
+    TruncatedQuery,
+    OneLineQueryWithPopover,
+} 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',
+    OneLineQueryText: 'OneLineQueryText',
+    QueryHash: 'QueryHash',
+};
+
+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,
+};
+
+const oneLineQueryTextColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.OneLineQueryText,
+    header: 'QueryText',
+    render: ({row}) => <OneLineQueryWithPopover value={row.QueryText?.toString()} />,
+    sortable: false,
+};
+
+const queryHashColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.QueryHash,
+    render: ({row}) => generateHash(String(row.QueryText)),
+    width: 130,
+    sortable: false,
+};
+
+export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
+    return [
+        cpuTimeUsColumn,
+        queryTextColumn,
+        endTimeColumn,
+        readRowsColumn,
+        readBytesColumn,
+        userSIDColumn,
+    ];
+};
+
+export const getTenantOverviewTopQueriesColumns = (): Column<KeyValueRow>[] => {
+    return [queryHashColumn, oneLineQueryTextColumn, 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 (