ydb-embedded-ui 4.33.0 → 5.1.0

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

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router';
+import cn from 'bem-cn-lite';
+import DataTable from '@gravity-ui/react-data-table';
+import { Loader } from '@gravity-ui/uikit';
+import { DateRange } from '../../../../components/DateRange';
+import { Search } from '../../../../components/Search';
+import { changeUserInput } from '../../../../store/reducers/executeQuery';
+import { TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../store/reducers/tenant/constants';
+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 { 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');
+export const TopQueries = ({ path, type }) => {
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const history = useHistory();
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const { loading, wasLoaded, error, data: { result: data = undefined } = {}, filters: storeFilters, } = useTypedSelector((state) => state.executeTopQueries);
+    const rawColumns = getTopQueriesColumns();
+    const preventFetch = useRef(false);
+    // some filters sync between redux state and URL
+    // component state is for default values,
+    // default values are determined from the query response, and should not propagate to URL
+    const [filters, setFilters] = useState(storeFilters);
+    useEffect(() => {
+        dispatch(setTopQueriesFilters(filters));
+    }, [dispatch, filters]);
+    const columns = rawColumns.map((column) => (Object.assign(Object.assign({}, column), { sortable: isSortableTopQueriesProperty(column.name) })));
+    const setDefaultFiltersFromResponse = (responseData) => {
+        var _a, _b;
+        const intervalEnd = (_b = (_a = responseData === null || responseData === void 0 ? void 0 : responseData.result) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.IntervalEnd;
+        if (intervalEnd) {
+            const to = new Date(intervalEnd).getTime();
+            const from = new Date(to - HOUR_IN_SECONDS * 1000).getTime();
+            setFilters((currentFilters) => {
+                // request without filters returns the latest interval with data
+                // only in this case should update filters in ui
+                // also don't update if user already interacted with controls
+                const shouldUpdateFilters = !currentFilters.from && !currentFilters.to;
+                if (!shouldUpdateFilters) {
+                    return currentFilters;
+                }
+                preventFetch.current = true;
+                return Object.assign(Object.assign({}, currentFilters), { from, to });
+            });
+        }
+    };
+    useAutofetcher((isBackground) => {
+        if (preventFetch.current) {
+            preventFetch.current = false;
+            return;
+        }
+        if (!isBackground) {
+            dispatch(setTopQueriesState({
+                wasLoaded: false,
+                data: undefined,
+            }));
+        }
+        // @ts-expect-error
+        // typed dispatch required, remove error expectation after adding it
+        dispatch(fetchTopQueries({ database: path, filters })).then(setDefaultFiltersFromResponse);
+    }, [dispatch, filters, path], autorefresh);
+    const handleRowClick = useCallback((row) => {
+        const { QueryText: input } = row;
+        dispatch(changeUserInput({ input }));
+        const queryParams = parseQuery(location);
+        const queryPath = getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.query, [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery }));
+        history.push(queryPath);
+    }, [dispatch, history, location]);
+    const handleTextSearchUpdate = (text) => {
+        setFilters((currentFilters) => (Object.assign(Object.assign({}, currentFilters), { text })));
+    };
+    const handleDateRangeChange = (value) => {
+        setFilters((currentFilters) => (Object.assign(Object.assign({}, currentFilters), value)));
+    };
+    const renderLoader = () => {
+        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
+    };
+    const renderContent = () => {
+        if (loading && !wasLoaded) {
+            return renderLoader();
+        }
+        if (error && !error.isCancelled) {
+            return _jsx("div", Object.assign({ className: "error" }, { children: prepareQueryError(error) }));
+        }
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+        return (_jsx("div", Object.assign({ className: b('table') }, { children: _jsx(DataTable, { columns: columns, data: data, settings: QUERY_TABLE_SETTINGS, onRowClick: handleRowClick, theme: "yandex-cloud" }) })));
+    };
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(Search, { value: filters.text, onChange: handleTextSearchUpdate, placeholder: i18n('filter.text.placeholder'), className: b('search') }), _jsx(DateRange, { from: filters.from, to: filters.to, onChange: handleDateRangeChange })] })), renderContent()] })));
+};

package/dist/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.d.ts

@@ -0,0 +1,5 @@
+import { type Column } from '@gravity-ui/react-data-table';
+import type { KeyValueRow } from '../../../../types/api/query';
+import './TopQueries.scss';
+export declare const getTopQueriesColumns: () => Column<KeyValueRow>[];
+export declare const getTenantOverviewTopQueriesColumns: () => Column<KeyValueRow>[];

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import DataTable from '@gravity-ui/react-data-table';
+import { formatDateTime, formatNumber } from '../../../../utils/dataFormatters/dataFormatters';
+import { generateHash } from '../../../../utils/generateHash';
+import { TruncatedQuery, OneLineQueryWithPopover, } from '../../../../components/TruncatedQuery/TruncatedQuery';
+import { parseUsToMs } from '../../../../utils/timeParsers';
+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',
+    Duration: 'Duration',
+};
+const cpuTimeUsColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.CPUTimeUs,
+    sortAccessor: (row) => Number(row.CPUTimeUs),
+    width: 120,
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+const queryTextColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.QueryText,
+    sortAccessor: (row) => Number(row.CPUTimeUs),
+    render: ({ row }) => {
+        var _a;
+        return (_jsx("div", Object.assign({ className: b('query') }, { children: _jsx(TruncatedQuery, { value: (_a = row.QueryText) === null || _a === void 0 ? void 0 : _a.toString(), maxQueryHeight: MAX_QUERY_HEIGHT }) })));
+    },
+    sortable: false,
+};
+const endTimeColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.EndTime,
+    render: ({ row }) => formatDateTime(new Date(row.EndTime).getTime()),
+    align: DataTable.RIGHT,
+};
+const readRowsColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.ReadRows,
+    render: ({ row }) => formatNumber(row.ReadRows),
+    sortAccessor: (row) => Number(row.ReadRows),
+    align: DataTable.RIGHT,
+};
+const readBytesColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.ReadBytes,
+    render: ({ row }) => formatNumber(row.ReadBytes),
+    sortAccessor: (row) => Number(row.ReadBytes),
+    align: DataTable.RIGHT,
+};
+const userSIDColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.UserSID,
+    render: ({ row }) => _jsx("div", Object.assign({ className: b('user-sid') }, { children: row.UserSID || '–' })),
+    sortAccessor: (row) => String(row.UserSID),
+    align: DataTable.LEFT,
+};
+const oneLineQueryTextColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.OneLineQueryText,
+    header: 'QueryText',
+    render: ({ row }) => { var _a; return _jsx(OneLineQueryWithPopover, { value: (_a = row.QueryText) === null || _a === void 0 ? void 0 : _a.toString() }); },
+    sortable: false,
+};
+const queryHashColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.QueryHash,
+    render: ({ row }) => generateHash(String(row.QueryText)),
+    width: 130,
+    sortable: false,
+};
+const durationColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.Duration,
+    header: 'Duration, ms',
+    render: ({ row }) => { var _a; return formatNumber(parseUsToMs((_a = row.Duration) !== null && _a !== void 0 ? _a : undefined)); },
+    sortAccessor: (row) => Number(row.Duration),
+    align: DataTable.RIGHT,
+};
+export const getTopQueriesColumns = () => {
+    return [
+        cpuTimeUsColumn,
+        queryTextColumn,
+        endTimeColumn,
+        durationColumn,
+        readRowsColumn,
+        readBytesColumn,
+        userSIDColumn,
+    ];
+};
+export const getTenantOverviewTopQueriesColumns = () => {
+    return [queryHashColumn, oneLineQueryTextColumn, cpuTimeUsColumn];
+};

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

@@ -1,4 +1,4 @@
 {
-  "no-data": "No data",
-  "filter.text.placeholder": "Search by query text..."
+    "no-data": "No data",
+    "filter.text.placeholder": "Search by query text..."
 }

package/dist/containers/Tenant/Diagnostics/TopQueries/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/TopQueries/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-diagnostics-top-queries';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

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

@@ -1,4 +1,4 @@
 {
-  "no-data": "Нет данных",
-  "filter.text.placeholder": "Искать по тексту запроса..."
+    "no-data": "Нет данных",
+    "filter.text.placeholder": "Искать по тексту запроса..."
 }

package/dist/containers/Tenant/Diagnostics/TopQueries/index.js

@@ -0,0 +1 @@
+export * from './TopQueries';

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/Filters.d.ts

@@ -0,0 +1,9 @@
+import { type IShardsWorkloadFilters } from '../../../../../store/reducers/shardsWorkload/types';
+import './Filters.scss';
+interface FiltersProps {
+    value: IShardsWorkloadFilters;
+    onChange: (value: Partial<IShardsWorkloadFilters>) => void;
+    className?: string;
+}
+export declare const Filters: ({ value, onChange, className }: FiltersProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioButton } from '@gravity-ui/uikit';
+import { DateRange } from '../../../../../components/DateRange';
+import { EShardsWorkloadMode, } from '../../../../../store/reducers/shardsWorkload/types';
+import { isEnumMember } from '../../../../../utils/typecheckers';
+import i18n from '../i18n';
+import { b } from '../TopShards';
+import './Filters.scss';
+export const Filters = ({ value, onChange, className }) => {
+    const handleModeChange = (mode) => {
+        if (!isEnumMember(EShardsWorkloadMode, mode)) {
+            const values = Object.values(EShardsWorkloadMode).join(', ');
+            throw new Error(`Unexpected TopShards mode "${mode}". Should be one of: ${values}`);
+        }
+        onChange({ mode });
+    };
+    const handleDateRangeChange = (dateRange) => {
+        onChange(Object.assign({ mode: EShardsWorkloadMode.History }, dateRange));
+    };
+    const from = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.from;
+    const to = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.to;
+    return (_jsxs("div", Object.assign({ className: b('filters', className) }, { children: [_jsxs(RadioButton, Object.assign({ value: value.mode, onUpdate: handleModeChange }, { children: [_jsx(RadioButton.Option, Object.assign({ value: EShardsWorkloadMode.Immediate }, { children: i18n('filters.mode.immediate') })), _jsx(RadioButton.Option, Object.assign({ value: EShardsWorkloadMode.History }, { children: i18n('filters.mode.history') }))] })), _jsx(DateRange, { from: from, to: to, onChange: handleDateRangeChange })] })));
+};

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/index.js

@@ -0,0 +1 @@
+export * from './Filters';

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.d.ts

@@ -0,0 +1,18 @@
+import type { EPathType } from '../../../../types/api/schema';
+import './TopShards.scss';
+export declare const b: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};
+interface TopShardsProps {
+    tenantPath: string;
+    type?: EPathType;
+}
+export declare const TopShards: ({ tenantPath, type }: TopShardsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import cn from 'bem-cn-lite';
+import { useLocation } from 'react-router';
+import DataTable from '@gravity-ui/react-data-table';
+import { Loader } from '@gravity-ui/uikit';
+import { sendShardQuery, setShardsState, setShardsQueryFilters, } from '../../../../store/reducers/shardsWorkload/shardsWorkload';
+import { EShardsWorkloadMode, } from '../../../../store/reducers/shardsWorkload/types';
+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 { 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 TABLE_SETTINGS = Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false, externalSort: true, disableSortReset: true, defaultOrder: DataTable.DESCENDING });
+const tableColumnsNames = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    DataSize: 'DataSize',
+    Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
+};
+function prepareDateTimeValue(value) {
+    if (!value) {
+        return '–';
+    }
+    return formatDateTime(new Date(value).getTime());
+}
+function stringToDataTableSortOrder(value) {
+    return value
+        ? value.split(',').map((columnId) => ({
+            columnId,
+            order: DataTable.DESCENDING,
+        }))
+        : undefined;
+}
+function stringToQuerySortOrder(value) {
+    return value
+        ? value.split(',').map((columnId) => ({
+            columnId,
+            order: 'DESC',
+        }))
+        : undefined;
+}
+function dataTableToStringSortOrder(value = []) {
+    const sortOrders = Array.isArray(value) ? value : [value];
+    return sortOrders.map(({ columnId }) => columnId).join(',');
+}
+function fillDateRangeFor(value) {
+    value.to = Date.now();
+    value.from = value.to - HOUR_IN_SECONDS * 1000;
+    return value;
+}
+export const TopShards = ({ tenantPath, type }) => {
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const { loading, data: { result: data = undefined } = {}, filters: storeFilters, error, wasLoaded, } = useTypedSelector((state) => state.shardsWorkload);
+    // default filters shouldn't propagate into URL until user interacts with the control
+    // redux initial value can't be used, as it synchronizes with URL
+    const [filters, setFilters] = useState(() => {
+        const defaultValue = Object.assign({}, storeFilters);
+        if (!defaultValue.mode) {
+            defaultValue.mode = EShardsWorkloadMode.Immediate;
+        }
+        if (!defaultValue.from && !defaultValue.to) {
+            fillDateRangeFor(defaultValue);
+        }
+        return defaultValue;
+    });
+    const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
+    useAutofetcher(() => {
+        dispatch(sendShardQuery({
+            database: tenantPath,
+            path: currentSchemaPath,
+            sortOrder: stringToQuerySortOrder(sortOrder),
+            filters,
+        }));
+    }, [dispatch, tenantPath, currentSchemaPath, sortOrder, filters], autorefresh);
+    // don't show loader for requests triggered by table sort, only for path change
+    useEffect(() => {
+        dispatch(setShardsState({
+            wasLoaded: false,
+            data: undefined,
+        }));
+    }, [dispatch, currentSchemaPath, tenantPath, filters]);
+    const onSort = (newSortOrder) => {
+        // 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,
+        // which would cause an excess state change, to avoid repeating requests
+        setSortOrder(dataTableToStringSortOrder(newSortOrder));
+    };
+    const handleFiltersChange = (value) => {
+        const newStateValue = Object.assign({}, value);
+        const isDateRangePristine = !storeFilters.from && !storeFilters.to && !value.from && !value.to;
+        if (isDateRangePristine) {
+            switch (value.mode) {
+                case EShardsWorkloadMode.Immediate:
+                    newStateValue.from = newStateValue.to = undefined;
+                    break;
+                case EShardsWorkloadMode.History:
+                    // should default to the current datetime every time history mode activates
+                    fillDateRangeFor(newStateValue);
+                    break;
+            }
+        }
+        dispatch(setShardsQueryFilters(value));
+        setFilters((state) => (Object.assign(Object.assign({}, state), newStateValue)));
+    };
+    const tableColumns = useMemo(() => {
+        const rawColumns = getShardsWorkloadColumns(tenantPath, location);
+        const columns = rawColumns.map((column) => (Object.assign(Object.assign({}, column), { sortable: isSortableTopShardsProperty(column.name) })));
+        if (filters.mode === EShardsWorkloadMode.History) {
+            // after NodeId
+            columns.splice(5, 0, {
+                name: tableColumnsNames.PeakTime,
+                render: ({ row }) => {
+                    return prepareDateTimeValue(row.PeakTime);
+                },
+                sortable: false,
+            });
+            columns.push({
+                name: tableColumnsNames.IntervalEnd,
+                render: ({ row }) => {
+                    return prepareDateTimeValue(row.IntervalEnd);
+                },
+            });
+        }
+        return columns;
+    }, [filters.mode, tenantPath, location]);
+    const renderLoader = () => {
+        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
+    };
+    const renderContent = () => {
+        if (loading && !wasLoaded) {
+            return renderLoader();
+        }
+        if (error && !error.isCancelled) {
+            return _jsx("div", Object.assign({ className: "error" }, { children: prepareQueryError(error) }));
+        }
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+        return (_jsx("div", Object.assign({ className: b('table') }, { children: _jsx(DataTable, { columns: tableColumns, data: data, settings: TABLE_SETTINGS, theme: "yandex-cloud", onSort: onSort, sortOrder: stringToDataTableSortOrder(sortOrder) }) })));
+    };
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Filters, { value: filters, onChange: handleFiltersChange }), filters.mode === EShardsWorkloadMode.History && _jsx("div", { children: i18n('description') }), renderContent()] })));
+};

package/dist/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.d.ts

@@ -0,0 +1,5 @@
+import type { Location } from 'history';
+import { type Column } from '@gravity-ui/react-data-table';
+import type { KeyValueRow } from '../../../../types/api/query';
+export declare const getShardsWorkloadColumns: (schemaPath: string, location: Location) => Column<KeyValueRow<import("../../../../types/api/query").CellValue>>[];
+export declare const getTopShardsColumns: (schemaPath: string, location: Location) => Column<KeyValueRow<import("../../../../types/api/query").CellValue>>[];

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+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',
+};
+const tableColumnsNames = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    DataSize: 'DataSize (B)',
+    Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
+};
+function prepareCPUWorkloadValue(value) {
+    return `${roundToPrecision(Number(value) * 100, 2)}%`;
+}
+const getPathColumn = (schemaPath, location) => ({
+    name: TOP_SHARDS_COLUMNS_IDS.Path,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.Path],
+    render: ({ row }) => {
+        // row.Path - relative schema path
+        return (_jsx(LinkToSchemaObject, Object.assign({ path: schemaPath + row.Path, location: location }, { children: row.Path })));
+    },
+    sortable: false,
+});
+const cpuCoresColumn = {
+    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 = {
+    name: TOP_SHARDS_COLUMNS_IDS.DataSize,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.DataSize],
+    render: ({ row }) => {
+        return formatNumber(row.DataSize);
+    },
+    align: DataTable.RIGHT,
+};
+const tabletIdColumn = {
+    name: TOP_SHARDS_COLUMNS_IDS.TabletId,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.TabletId],
+    render: ({ row }) => {
+        if (!row.TabletId) {
+            return '–';
+        }
+        return (_jsx(InternalLink, Object.assign({ to: createHref(routes.tablet, { id: row.TabletId }) }, { children: row.TabletId })));
+    },
+    sortable: false,
+};
+const nodeIdColumn = {
+    name: TOP_SHARDS_COLUMNS_IDS.NodeId,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.NodeId],
+    render: ({ row }) => {
+        if (!row.NodeId) {
+            return '–';
+        }
+        return _jsx(InternalLink, Object.assign({ to: getDefaultNodePath(row.NodeId) }, { children: row.NodeId }));
+    },
+    align: DataTable.RIGHT,
+};
+const topShardsCpuCoresColumn = {
+    name: TOP_SHARDS_COLUMNS_IDS.CPUCores,
+    header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.CPUCores],
+    render: ({ row }) => {
+        return (_jsx(UsageLabel, { value: roundToPrecision(Number(row.CPUCores) * 100, 2), theme: getLoadSeverityForShard(Number(row.CPUCores) * 100) }));
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+const inFlightTxCountColumn = {
+    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, location) => {
+    return [
+        getPathColumn(schemaPath, location),
+        cpuCoresColumn,
+        dataSizeColumn,
+        tabletIdColumn,
+        nodeIdColumn,
+        inFlightTxCountColumn,
+    ];
+};
+export const getTopShardsColumns = (schemaPath, location) => {
+    return [tabletIdColumn, getPathColumn(schemaPath, location), topShardsCpuCoresColumn];
+};

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

@@ -1,6 +1,6 @@
 {
-  "no-data": "No data",
-  "filters.mode.immediate": "Immediate",
-  "filters.mode.history": "Historical",
-  "description": "Historical data only tracks shards with CPU load over 70%"
+    "no-data": "No data",
+    "filters.mode.immediate": "Immediate",
+    "filters.mode.history": "Historical",
+    "description": "Historical data only tracks shards with CPU load over 70%"
 }

package/dist/containers/Tenant/Diagnostics/TopShards/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/TopShards/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-diagnostics-top-shards';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

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

@@ -1,6 +1,6 @@
 {
-  "no-data": "Нет данных",
-  "filters.mode.immediate": "Мгновенные",
-  "filters.mode.history": "Исторические",
-  "description": "Исторические данные хранятся только о шардах с загрузкой CPU выше 70%"
+    "no-data": "Нет данных",
+    "filters.mode.immediate": "Мгновенные",
+    "filters.mode.history": "Исторические",
+    "description": "Исторические данные хранятся только о шардах с загрузкой CPU выше 70%"
 }

package/dist/containers/Tenant/Diagnostics/TopShards/index.js

@@ -0,0 +1 @@
+export * from './TopShards';

package/dist/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.d.ts

@@ -0,0 +1,8 @@
+import type { TEvDescribeSchemeResult } from '../../../../types/api/schema';
+import './ExternalDataSource.scss';
+export declare const ExternalDataSourceInfo: ({ data }: {
+    data?: TEvDescribeSchemeResult | undefined;
+}) => JSX.Element;
+export declare const ExternalDataSourceSummary: ({ data }: {
+    data?: TEvDescribeSchemeResult | undefined;
+}) => JSX.Element;