ydb-embedded-ui 6.1.0 → 6.2.0

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
 import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
 import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
-import { getTopNodesByCpuColumns } from '../../../../Nodes/getNodesColumns';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getTopNodesByCpuColumns, } from '../../../../Nodes/getNodesColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
@@ -19,5 +19,5 @@ export function TopNodesByCpu({ path, additionalNodesProps }) {
         postfix: i18n('by-pools-usage'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
 import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
 import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
-import { getTopNodesByLoadColumns } from '../../../../Nodes/getNodesColumns';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getTopNodesByLoadColumns, } from '../../../../Nodes/getNodesColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
@@ -19,5 +19,5 @@ export function TopNodesByLoad({ path, additionalNodesProps }) {
         postfix: i18n('by-load'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
 }

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

@@ -7,10 +7,11 @@ import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUER
 import { topQueriesApi } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
 import { useTypedDispatch, useTypedSelector } from '../../../../../utils/hooks';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
-import { getTenantOverviewTopQueriesColumns } from '../../TopQueries/getTopQueriesColumns';
+import { TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, getTenantOverviewTopQueriesColumns, } from '../../TopQueries/getTopQueriesColumns';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
+import { b } from '../utils';
 export function TopQueries({ path }) {
     const dispatch = useTypedDispatch();
     const location = useLocation();
@@ -33,5 +34,5 @@ export function TopQueries({ path }) {
         postfix: i18n('by-cpu-time'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, onRowClick: handleRowClick, title: title, loading: loading, error: error, tableClassNameModifiers: { 'top-queries': true } }));
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, onRowClick: handleRowClick, title: title, loading: loading, error: error, rowClassName: () => b('top-queries-row') }));
 }

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

@@ -5,7 +5,7 @@ import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenan
 import { topShardsApi } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
 import { useTypedSelector } from '../../../../../utils/hooks';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
-import { getTopShardsColumns } from '../../TopShards/getTopShardsColumns';
+import { TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, getTopShardsColumns, } from '../../TopShards/getTopShardsColumns';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
@@ -22,5 +22,5 @@ export const TopShards = ({ path }) => {
         postfix: i18n('by-cpu-usage'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, error: error, tableClassNameModifiers: { 'top-queries': true } }));
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, title: title, loading: loading, error: error }));
 };

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
 import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
 import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
-import { getTopNodesByMemoryColumns } from '../../../../Nodes/getNodesColumns';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getTopNodesByMemoryColumns, } from '../../../../Nodes/getNodesColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
@@ -21,5 +21,5 @@ export function TopNodesByMemory({ path, additionalNodesProps }) {
         postfix: i18n('by-memory'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
 }

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

@@ -51,10 +51,6 @@
     }
 
     &__table {
-        width: var(--diagnostics-section-table-width);
-
-        @include table-styles();
-
         &:not(:last-child) {
             margin-bottom: var(--diagnostics-section-margin);
         }
@@ -64,10 +60,10 @@
 
             vertical-align: middle;
         }
+    }
 
-        &_top-queries tr {
-            cursor: pointer;
-        }
+    &__top-queries-row {
+        cursor: pointer;
     }
 
     &__storage-info {

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { DataTableProps } from '@gravity-ui/react-data-table';
-interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
+import type { ResizeableDataTableProps } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+interface TenantOverviewTableLayoutProps<T> extends ResizeableDataTableProps<T> {
     title: React.ReactNode;
     loading?: boolean;
     error?: unknown;

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
 import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '../../../../utils/constants';
 import { b } from './utils';
@@ -15,7 +15,7 @@ export function TenantOverviewTableLayout(_a) {
         if (loading) {
             return _jsx(TableSkeleton, { rows: TENANT_OVERVIEW_TABLES_LIMIT });
         }
-        return (_jsx(DataTable, Object.assign({ theme: "yandex-cloud", settings: TENANT_OVERVIEW_TABLES_SETTINGS }, props)));
+        return _jsx(ResizeableDataTable, Object.assign({ settings: TENANT_OVERVIEW_TABLES_SETTINGS }, props));
     };
     return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('table', tableClassNameModifiers), children: renderContent() })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
 import { topStorageGroupsApi } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
 import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
-import { getStorageTopGroupsColumns } from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+import { STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, getStorageTopGroupsColumns, } from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
@@ -19,5 +19,5 @@ export function TopGroups({ tenant }) {
         postfix: i18n('by-usage'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topGroups || [], columns: columns, title: title, loading: loading, error: error }));
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, data: topGroups || [], columns: columns, title: title, loading: loading, error: error }));
 }

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

@@ -10,6 +10,7 @@ import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 import '../TenantOverview.scss';
+const TOP_TABLES_COLUMNS_WIDTH_LS_KEY = 'topTablesTableColumnsWidth';
 export function TopTables({ path }) {
     const location = useLocation();
     const { autorefresh } = useTypedSelector((state) => state.schema);
@@ -23,13 +24,14 @@ export function TopTables({ path }) {
     const columns = [
         {
             name: 'Size',
-            width: 80,
+            width: 100,
             sortable: false,
             render: ({ row }) => formatSize(Number(row.Size)),
             align: DataTable.RIGHT,
         },
         {
             name: 'Path',
+            width: 700,
             sortable: false,
             render: ({ row }) => row.Path ? (_jsx(CellWithPopover, { content: row.Path, children: _jsx(LinkToSchemaObject, { path: String(row.Path), location: location, children: row.Path }) })) : null,
         },
@@ -38,5 +40,5 @@ export function TopTables({ path }) {
         entity: i18n('tables'),
         postfix: i18n('by-size'),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, error: error }));
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_TABLES_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, title: title, loading: loading, error: error }));
 }

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
-import { Loader } from '@gravity-ui/uikit';
 import { useHistory, useLocation } from 'react-router';
 import { DateRange } from '../../../../components/DateRange';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { Search } from '../../../../components/Search';
+import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { parseQuery } from '../../../../routes';
 import { changeUserInput } from '../../../../store/reducers/executeQuery';
 import { setTopQueriesFilters, topQueriesApi, } from '../../../../store/reducers/executeTopQueries/executeTopQueries';
@@ -16,7 +16,7 @@ import { prepareQueryError } from '../../../../utils/query';
 import { TenantTabsGroups, getTenantPath } from '../../TenantPages';
 import { QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import { isColumnEntityType } from '../../utils/schema';
-import { getTopQueriesColumns } from './getTopQueriesColumns';
+import { TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, getTopQueriesColumns } from './getTopQueriesColumns';
 import i18n from './i18n';
 import './TopQueries.scss';
 const b = cn('kv-top-queries');
@@ -47,20 +47,17 @@ export const TopQueries = ({ path, type }) => {
     const handleDateRangeChange = (value) => {
         dispatch(setTopQueriesFilters(value));
     };
-    const renderLoader = () => {
-        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
-    };
     const renderContent = () => {
-        if (loading) {
-            return renderLoader();
-        }
         if (error && typeof error === 'object' && !error.isCancelled) {
             return _jsx("div", { className: "error", children: prepareQueryError(error) });
         }
         if (!data || isColumnEntityType(type)) {
             return i18n('no-data');
         }
-        return (_jsx("div", { className: b('table'), children: _jsx(DataTable, { columns: columns, data: data, settings: QUERY_TABLE_SETTINGS, onRowClick: handleRowClick, theme: "yandex-cloud" }) }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, columns: columns, data: data, settings: QUERY_TABLE_SETTINGS, onRowClick: handleRowClick, rowClassName: () => b('row') }));
+    };
+    const renderControls = () => {
+        return (_jsxs(React.Fragment, { 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 })] }));
     };
-    return (_jsxs("div", { className: b(), children: [_jsxs("div", { 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()] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
 };

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

@@ -8,39 +8,17 @@
 
     @include query-data-table;
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-    }
-
-    &__controls {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
-
-        margin-bottom: 10px;
-    }
-
     &__search {
         @include search();
     }
 
-    &__table {
-        overflow: auto;
-        flex-grow: 1;
-
-        .data-table {
-            &__row {
-                cursor: pointer;
-            }
-        }
+    &__row {
+        cursor: pointer;
     }
 
     &__query {
         overflow: hidden;
 
-        width: 500px;
-
         vertical-align: top;
         white-space: pre-wrap;
         text-overflow: ellipsis;

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

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

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

@@ -8,6 +8,7 @@ import { parseUsToMs } from '../../../../utils/timeParsers';
 import { MAX_QUERY_HEIGHT } from '../../utils/constants';
 import './TopQueries.scss';
 const b = cn('kv-top-queries');
+export const TOP_QUERIES_COLUMNS_WIDTH_LS_KEY = 'topQueriesColumnsWidth';
 const TOP_QUERIES_COLUMNS_IDS = {
     CPUTimeUs: 'CPUTimeUs',
     QueryText: 'QueryText',
@@ -34,23 +35,27 @@ const queryTextColumn = {
         return (_jsx("div", { className: b('query'), children: _jsx(TruncatedQuery, { value: (_a = row.QueryText) === null || _a === void 0 ? void 0 : _a.toString(), maxQueryHeight: MAX_QUERY_HEIGHT }) }));
     },
     sortable: false,
+    width: 500,
 };
 const endTimeColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.EndTime,
     render: ({ row }) => formatDateTime(new Date(row.EndTime).getTime()),
     align: DataTable.RIGHT,
+    width: 200,
 };
 const readRowsColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.ReadRows,
     render: ({ row }) => formatNumber(row.ReadRows),
     sortAccessor: (row) => Number(row.ReadRows),
     align: DataTable.RIGHT,
+    width: 150,
 };
 const readBytesColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.ReadBytes,
     render: ({ row }) => formatNumber(row.ReadBytes),
     sortAccessor: (row) => Number(row.ReadBytes),
     align: DataTable.RIGHT,
+    width: 150,
 };
 const userSIDColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.UserSID,
@@ -63,6 +68,7 @@ const oneLineQueryTextColumn = {
     header: 'QueryText',
     render: ({ row }) => { var _a; return _jsx(OneLineQueryWithPopover, { value: (_a = row.QueryText) === null || _a === void 0 ? void 0 : _a.toString() }); },
     sortable: false,
+    width: 500,
 };
 const queryHashColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.QueryHash,
@@ -76,6 +82,7 @@ const durationColumn = {
     render: ({ row }) => { var _a; return formatNumber(parseUsToMs((_a = row.Duration) !== null && _a !== void 0 ? _a : undefined)); },
     sortAccessor: (row) => Number(row.Duration),
     align: DataTable.RIGHT,
+    width: 150,
 };
 export const getTopQueriesColumns = () => {
     return [

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

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

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { RadioButton } from '@gravity-ui/uikit';
 import { DateRange } from '../../../../../components/DateRange';
 import { EShardsWorkloadMode } from '../../../../../store/reducers/shardsWorkload/types';
 import { isEnumMember } from '../../../../../utils/typecheckers';
-import { b } from '../TopShards';
 import i18n from '../i18n';
-import './Filters.scss';
-export const Filters = ({ value, onChange, className }) => {
+export const Filters = ({ value, onChange }) => {
     const handleModeChange = (mode) => {
         if (!isEnumMember(EShardsWorkloadMode, mode)) {
             const values = Object.values(EShardsWorkloadMode).join(', ');
@@ -19,5 +18,5 @@ export const Filters = ({ value, onChange, className }) => {
     };
     const from = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.from;
     const to = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.to;
-    return (_jsxs("div", { className: b('filters', className), children: [_jsxs(RadioButton, { value: value.mode, onUpdate: handleModeChange, children: [_jsx(RadioButton.Option, { value: EShardsWorkloadMode.Immediate, children: i18n('filters.mode.immediate') }), _jsx(RadioButton.Option, { value: EShardsWorkloadMode.History, children: i18n('filters.mode.history') })] }), _jsx(DateRange, { from: from, to: to, onChange: handleDateRangeChange })] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs(RadioButton, { value: value.mode, onUpdate: handleModeChange, children: [_jsx(RadioButton.Option, { value: EShardsWorkloadMode.Immediate, children: i18n('filters.mode.immediate') }), _jsx(RadioButton.Option, { value: EShardsWorkloadMode.History, children: i18n('filters.mode.history') })] }), _jsx(DateRange, { from: from, to: to, onChange: handleDateRangeChange })] }));
 };

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

@@ -1,6 +1,5 @@
 import type { EPathType } from '../../../../types/api/schema';
 import './TopShards.scss';
-export declare const b: import("@bem-react/classname").ClassNameFormatter;
 interface TopShardsProps {
     tenantPath: string;
     type?: EPathType;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
-import { Loader } from '@gravity-ui/uikit';
 import { useLocation } from 'react-router';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { setShardsQueryFilters, shardApi, } from '../../../../store/reducers/shardsWorkload/shardsWorkload';
 import { EShardsWorkloadMode } from '../../../../store/reducers/shardsWorkload/types';
 import { cn } from '../../../../utils/cn';
@@ -13,10 +14,10 @@ import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { prepareQueryError } from '../../../../utils/query';
 import { isColumnEntityType } from '../../utils/schema';
 import { Filters } from './Filters';
-import { getShardsWorkloadColumns } from './getTopShardsColumns';
+import { TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, getShardsWorkloadColumns } from './getTopShardsColumns';
 import i18n from './i18n';
 import './TopShards.scss';
-export const b = cn('top-shards');
+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',
@@ -129,20 +130,17 @@ export const TopShards = ({ tenantPath, type }) => {
         }
         return columns;
     }, [filters.mode, tenantPath, location]);
-    const renderLoader = () => {
-        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
+    const renderControls = () => {
+        return _jsx(Filters, { value: filters, onChange: handleFiltersChange });
     };
     const renderContent = () => {
-        if (loading) {
-            return renderLoader();
-        }
         if (error && typeof error === 'object' && !error.isCancelled) {
             return _jsx("div", { className: "error", children: prepareQueryError(error) });
         }
         if (!data || isColumnEntityType(type)) {
             return i18n('no-data');
         }
-        return (_jsx("div", { className: b('table'), children: _jsx(DataTable, { columns: tableColumns, data: data, settings: TABLE_SETTINGS, theme: "yandex-cloud", onSort: onSort, sortOrder: stringToDataTableSortOrder(sortOrder) }) }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, columns: tableColumns, data: data, settings: TABLE_SETTINGS, onSort: onSort, sortOrder: stringToDataTableSortOrder(sortOrder) }));
     };
-    return (_jsxs("div", { className: b(), children: [_jsx(Filters, { value: filters, onChange: handleFiltersChange }), filters.mode === EShardsWorkloadMode.History && _jsx("div", { children: i18n('description') }), renderContent()] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), filters.mode === EShardsWorkloadMode.History && (_jsx("div", { className: b('hint'), children: i18n('description') })), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
 };

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

@@ -1,19 +1,8 @@
 .top-shards {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+    &__hint {
+        position: sticky;
+        left: 0;
 
-    height: 100%;
-
-    background-color: var(--g-color-base-background);
-
-    &__loader {
-        display: flex;
-        justify-content: center;
-    }
-
-    &__table {
-        overflow: auto;
-        flex-grow: 1;
+        width: max-content;
     }
 }

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

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

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

@@ -7,6 +7,7 @@ import routes, { createHref } from '../../../../routes';
 import { getLoadSeverityForShard } from '../../../../store/reducers/tenantOverview/topShards/utils';
 import { formatNumber, roundToPrecision } from '../../../../utils/dataFormatters/dataFormatters';
 import { getDefaultNodePath } from '../../../Node/NodePages';
+export const TOP_SHARDS_COLUMNS_WIDTH_LS_KEY = 'topShardsColumnsWidth';
 const TOP_SHARDS_COLUMNS_IDS = {
     TabletId: 'TabletId',
     CPUCores: 'CPUCores',
@@ -38,6 +39,7 @@ const getPathColumn = (schemaPath, location) => ({
         return (_jsx(LinkToSchemaObject, { path: schemaPath + row.Path, location: location, children: row.Path }));
     },
     sortable: false,
+    width: 300,
 });
 const cpuCoresColumn = {
     name: TOP_SHARDS_COLUMNS_IDS.CPUCores,
@@ -65,6 +67,7 @@ const tabletIdColumn = {
         return (_jsx(InternalLink, { to: createHref(routes.tablet, { id: row.TabletId }), children: row.TabletId }));
     },
     sortable: false,
+    width: 190,
 };
 const nodeIdColumn = {
     name: TOP_SHARDS_COLUMNS_IDS.NodeId,
@@ -85,6 +88,8 @@ const topShardsCpuCoresColumn = {
     },
     align: DataTable.RIGHT,
     sortable: false,
+    width: 140,
+    resizeMinWidth: 140,
 };
 const inFlightTxCountColumn = {
     name: TOP_SHARDS_COLUMNS_IDS.InFlightTxCount,

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.js

@@ -106,7 +106,7 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
                 return _jsx(Acl, {});
             }
             case TENANT_SUMMARY_TABS_IDS.schema: {
-                return (_jsx(SchemaViewer, { className: b('schema'), type: type, path: currentSchemaPath }));
+                return _jsx(SchemaViewer, { type: type, path: currentSchemaPath });
             }
             default: {
                 return renderObjectOverview();

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -77,12 +77,6 @@
         flex-direction: column;
     }
 
-    &__schema {
-        display: flex;
-        overflow: auto;
-        flex-grow: 1;
-    }
-
     &__info-controls {
         display: flex;
         gap: 4px;

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss

@@ -7,7 +7,7 @@
         flex-grow: 1;
         flex-direction: column;
 
-        padding: 0px 10px;
+        padding-left: 10px;
 
         @include query-data-table();
         & .data-table__table-wrapper {
@@ -20,8 +20,6 @@
         flex-direction: column;
 
         width: 100%;
-        margin-top: 10px;
-        padding: 0 10px 10px;
     }
 
     &__result-tabs {
@@ -59,7 +57,6 @@
         gap: 4px;
     }
     &__inspector {
-        max-width: calc(100% - 50px);
         padding: 15px 10px;
         @include json-tree-styles();
         &_fullscreen {
@@ -70,21 +67,4 @@
             padding: 10px;
         }
     }
-
-    &__fullscreen-table-wrapper {
-        overflow: auto;
-
-        width: 100%;
-        height: 100%;
-        margin: 20px;
-
-        background-color: var(--g-color-base-background);
-        @include table-styles();
-        table {
-            width: 100% !important;
-        }
-        .data-table__table-wrapper {
-            padding: 0 !important;
-        }
-    }
 }

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { TextOverflow, getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
+import { getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
 import { Loader, RadioButton } from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 import Divider from '../../../../components/Divider/Divider';
@@ -14,7 +14,7 @@ import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
-import { getColors, renderExplainNode } from './utils';
+import { renderExplainNode } from './utils';
 import './ExplainResult.scss';
 import 'react-json-inspector/json-inspector.css';
 const b = cn('ydb-query-explain-result');
@@ -46,7 +46,7 @@ function GraphRoot(props) {
             throw new Error("Can't find element with id #graphRoot");
         }
         graphRoot.innerHTML = '';
-        paranoid.current = getTopology('graphRoot', data, Object.assign(Object.assign({}, opts), { colors: getColors() }), shapes);
+        paranoid.current = getTopology('graphRoot', data, opts, shapes);
         paranoid.current.render();
         return () => {
             paranoid.current = undefined;
@@ -109,7 +109,7 @@ export function ExplainResult(props) {
                 hidden: activeOption !== ExplainOptionIds.schema,
             }), children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
                     renderNodeTitle: renderExplainNode,
-                    textOverflow: TextOverflow.Normal,
+                    textOverflow: 'normal',
                     initialZoomFitsCanvas: true,
                 }, shapes: {
                     node: getYdbPlanNodeShape,

package/dist/containers/Tenant/Query/ExplainResult/utils.d.ts

@@ -1,5 +1,2 @@
 import type { GraphNode } from '@gravity-ui/paranoid';
 export declare const renderExplainNode: (node: GraphNode) => string;
-export declare function getColors(): {
-    getCommonColor: (name: string) => string;
-};