ydb-embedded-ui 6.1.0 → 6.2.0

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

@@ -2,37 +2,3 @@ export const renderExplainNode = (node) => {
     const parts = node.name.split('|');
     return parts.length > 1 ? parts[1] : node.name;
 };
-export function getColors() {
-    const colorsMap = {
-        success: '--g-color-text-positive',
-        error: '--g-color-text-danger',
-        warning: '--g-color-text-warning',
-        errorBackground: '--g-color-base-danger-medium',
-        warningBackground: '--g-color-base-warning-medium',
-        mute: '--g-color-line-generic',
-        stroke: '--g-color-text-hint',
-        fill: '--g-color-base-generic-ultralight',
-        nodeFill: '--g-color-base-float',
-        nodeShadow: '--g-color-sfx-shadow',
-        titleColor: '--g-color-text-primary',
-        textColor: '--g-color-text-complementary',
-        buttonBorderColor: '--g-color-line-generic',
-        // groupBorderColor: '--g-color-celestial-thunder',
-        // groupFill: '--g-color-celestial',
-        titleHoverColor: '--g-color-text-link-hover',
-        nodeHover: '--g-color-base-float-hover',
-        specialHover: '--g-color-line-focus',
-    };
-    const style = getComputedStyle(document.body);
-    const colors = Object.keys(colorsMap).reduce((acc, key) => {
-        const color = style.getPropertyValue(colorsMap[key]).replace(/ /g, '');
-        if (color) {
-            acc[key] = color;
-        }
-        return acc;
-    }, {});
-    const getCommonColor = (name) => {
-        return style.getPropertyValue(`--g-color-${name}`).replace(/ /g, '');
-    };
-    return Object.assign(Object.assign({}, colors), { getCommonColor });
-}

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

@@ -1,8 +1,9 @@
-@import '../../../../styles/mixins.scss';
+@use '../../../../styles/mixins.scss';
 
 .kv-preview {
     height: 100%;
-    @include query-data-table;
+    @include mixins.flex-container();
+    @include mixins.query-data-table();
 
     &__header {
         position: sticky;
@@ -48,9 +49,11 @@
     &__result {
         overflow: auto;
 
+        width: 100%;
+
         // This fixes last row display for ordinary preview (not fullscreen)
         height: calc(100% - 40px);
-        padding: 0 10px;
+        padding-left: 10px;
 
         // Fix white space footer block for fullscreen preview
         .kv-fullscreen & {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DataTable from '@gravity-ui/react-data-table';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { selectQueriesHistory } from '../../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
@@ -11,6 +11,7 @@ import { MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import i18n from '../i18n';
 import './QueriesHistory.scss';
 const b = cn('ydb-queries-history');
+const QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY = 'queriesHistoryTableColumnsWidth';
 function QueriesHistory({ changeUserInput }) {
     const dispatch = useTypedDispatch();
     const [queryMode, setQueryMode] = useQueryModes();
@@ -35,6 +36,7 @@ function QueriesHistory({ changeUserInput }) {
                 return (_jsx("div", { className: b('query'), children: _jsx(TruncatedQuery, { value: row.queryText, maxQueryHeight: MAX_QUERY_HEIGHT }) }));
             },
             sortable: false,
+            width: 600,
         },
         {
             name: 'syntax',
@@ -46,6 +48,6 @@ function QueriesHistory({ changeUserInput }) {
             width: 200,
         },
     ];
-    return (_jsx("div", { className: b(), children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) }));
+    return (_jsx("div", { className: b(), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY, columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) }));
 }
 export default QueriesHistory;

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

@@ -7,7 +7,6 @@
     padding: 0 16px;
 
     @include flex-container();
-    @include table-styles;
 
     &__table-row {
         cursor: pointer;

package/dist/containers/Tenant/Query/QueryEditor/helpers.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { AUTOCOMPLETE_ON_ENTER, ENABLE_AUTOCOMPLETE, useSetting } from '../../../../lib';
+import { AUTOCOMPLETE_ON_ENTER, ENABLE_AUTOCOMPLETE } from '../../../../utils/constants';
+import { useSetting } from '../../../../utils/hooks';
 export const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,

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

@@ -3,6 +3,7 @@ import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { Button, Dialog } from '@gravity-ui/uikit';
 import { Icon } from '../../../../components/Icon';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
@@ -16,6 +17,7 @@ const b = cn('ydb-saved-queries');
 const DeleteDialog = ({ visible, queryName, onCancelClick, onConfirmClick }) => {
     return (_jsxs(Dialog, { open: visible, hasCloseButton: false, size: "s", onClose: onCancelClick, onEnterKeyDown: onConfirmClick, children: [_jsx(Dialog.Header, { caption: i18n('delete-dialog.header') }), _jsxs(Dialog.Body, { className: b('dialog-body'), children: [i18n('delete-dialog.question'), _jsx("span", { className: b('dialog-query-name'), children: ` ${queryName}?` })] }), _jsx(Dialog.Footer, { textButtonApply: i18n('delete-dialog.delete'), textButtonCancel: i18n('delete-dialog.cancel'), onClickButtonCancel: onCancelClick, onClickButtonApply: onConfirmClick })] }));
 };
+const SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY = 'savedQueriesTableColumnsWidth';
 export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) => {
     const dispatch = useTypedDispatch();
     const [isDeleteDialogVisible, setIsDeleteDialogVisible] = React.useState(false);
@@ -56,9 +58,10 @@ export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) =
             header: 'Query Text',
             render: ({ row: query }) => (_jsxs("div", { className: b('query'), children: [_jsx("div", { className: b('query-body'), children: _jsx(TruncatedQuery, { value: query.body, maxQueryHeight: MAX_QUERY_HEIGHT }) }), _jsxs("span", { className: b('controls'), children: [_jsx(Button, { view: "flat-secondary", children: _jsx(Icon, { name: "pencil", viewBox: "0 0 24 24" }) }), _jsx(Button, { view: "flat-secondary", onClick: onDeleteQueryClick(query.name), children: _jsx(Icon, { name: "trash", viewBox: "0 0 24 24" }) })] })] })),
             sortable: false,
+            resizeMinWidth: 650,
         },
     ];
-    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b(), children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: savedQueries, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('saved.empty'), rowClassName: () => b('row'), onRowClick: (row) => onQueryClick(row.body, row.name), initialSortOrder: {
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b(), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY, columns: columns, data: savedQueries, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('saved.empty'), rowClassName: () => b('row'), onRowClick: (row) => onQueryClick(row.body, row.name), initialSortOrder: {
                         columnId: 'name',
                         order: DataTable.ASCENDING,
                     } }) }), _jsx(DeleteDialog, { visible: isDeleteDialogVisible, queryName: queryNameToDelete, onCancelClick: onCancelDeleteClick, onConfirmClick: onConfirmDeleteClick })] }));

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

@@ -9,7 +9,6 @@
     padding: 0 16px;
 
     @include flex-container();
-    @include table-styles;
 
     &__row {
         cursor: pointer;

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.d.ts

@@ -1,10 +1,9 @@
 import type { EPathType } from '../../../../types/api/schema';
 import './SchemaViewer.scss';
 interface SchemaViewerProps {
-    className?: string;
     type?: EPathType;
     path?: string;
     withFamilies?: boolean;
 }
-export declare const SchemaViewer: ({ className, type, path, withFamilies }: SchemaViewerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SchemaViewer: ({ type, path, withFamilies }: SchemaViewerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
 import { useTypedSelector } from '../../../../utils/hooks';
-import { SchemaViewerColumns, prepareColumnDescriptions, prepareFamilies, prepareSchemaTableColumns, } from './helpers';
+import { SCHEMA_COLUMNS_WIDTH_LS_KEY, SchemaViewerColumns, prepareColumnDescriptions, prepareFamilies, prepareSchemaTableColumns, } from './helpers';
 import './SchemaViewer.scss';
 const b = cn('schema-viewer');
-export const SchemaViewer = ({ className, type, path, withFamilies = false }) => {
+export const SchemaViewer = ({ type, path, withFamilies = false }) => {
     const { data, loading } = useTypedSelector((state) => state.schema);
     const currentObjectData = path ? data[path] : undefined;
     const { columns, keyColumnIds } = prepareColumnDescriptions(type, currentObjectData);
     const families = prepareFamilies(currentObjectData);
-    return (_jsx("div", { className: b(null, className), children: loading ? (_jsx(TableSkeleton, {})) : (_jsx(DataTable, { theme: "yandex-cloud", data: columns, columns: prepareSchemaTableColumns({
+    return (_jsx("div", { className: b(null), children: loading ? (_jsx(TableSkeleton, {})) : (_jsx(ResizeableDataTable, { columnsWidthLSKey: SCHEMA_COLUMNS_WIDTH_LS_KEY, data: columns, columns: prepareSchemaTableColumns({
                 type,
                 b,
                 families,

package/dist/containers/Tenant/Schema/SchemaViewer/helpers.d.ts

@@ -16,6 +16,7 @@ export declare function prepareColumnDescriptions(type?: EPathType, scheme?: TEv
     keyColumnIds: number[];
 };
 export declare function prepareFamilies(scheme?: TEvDescribeSchemeResult): Record<number, TFamilyDescription>;
+export declare const SCHEMA_COLUMNS_WIDTH_LS_KEY = "schemaTableColumnsWidth";
 export declare function prepareSchemaTableColumns(options: {
     type?: EPathType;
     b: ClassNameFormatter;

package/dist/containers/Tenant/Schema/SchemaViewer/helpers.js

@@ -69,6 +69,7 @@ export function prepareFamilies(scheme) {
         return acc;
     }, {})) !== null && _e !== void 0 ? _e : {});
 }
+export const SCHEMA_COLUMNS_WIDTH_LS_KEY = 'schemaTableColumnsWidth';
 export function prepareSchemaTableColumns(options) {
     const keyColumnsOrderValues = options.keyColumnIds.reduce((result, keyColumnId, index) => {
         // Put columns with negative values, so they will be the first with ascending sort
@@ -79,14 +80,15 @@ export function prepareSchemaTableColumns(options) {
     const columns = [
         {
             name: SchemaViewerColumns.id,
-            width: 40,
+            width: 60,
         },
     ];
     if (!isExternalTable(options.type)) {
         // External tables don't have key columns
         columns.push({
             name: SchemaViewerColumns.key,
-            width: 40,
+            width: 70,
+            resizeMinWidth: 70,
             // Table should start with key columns on sort click
             defaultOrder: DataTable.ASCENDING,
             // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns

package/dist/containers/Tenants/Tenants.js

@@ -8,6 +8,7 @@ import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
 import { PoolsGraph } from '../../components/PoolsGraph/PoolsGraph';
 import { ProblemFilter } from '../../components/ProblemFilter';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
 import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { TabletsStatistic } from '../../components/TabletsStatistic';
@@ -22,6 +23,7 @@ import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getTenantPath } from '../Tenant/TenantPages';
 import './Tenants.scss';
 const b = cn('tenants');
+const DATABASES_COLUMNS_WIDTH_LS_KEY = 'databasesTableColumnsWidth';
 export const Tenants = ({ additionalTenantsProps }) => {
     const dispatch = useTypedDispatch();
     const { currentData, isFetching, error } = tenantsApi.useGetTenantsInfoQuery({ clusterName }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
@@ -75,6 +77,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
             {
                 name: 'Type',
                 width: 200,
+                resizeMinWidth: 150,
                 render: ({ row }) => {
                     if (row.Type !== 'Serverless') {
                         return row.Type;
@@ -138,6 +141,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
                 name: 'PoolStats',
                 header: 'Pools',
                 width: 100,
+                resizeMinWidth: 60,
                 sortAccessor: ({ PoolStats = [] }) => PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
                 defaultOrder: DataTable.DESCENDING,
                 align: DataTable.LEFT,
@@ -147,7 +151,8 @@ export const Tenants = ({ additionalTenantsProps }) => {
                 name: 'Tablets',
                 header: 'Tablets States',
                 sortable: false,
-                width: 430,
+                width: 500,
+                resizeMinWidth: 500,
                 render: ({ row }) => {
                     const backend = getTenantBackend(row);
                     return row.Tablets ? (_jsx(TabletsStatistic, { path: row.Name, tablets: row.Tablets, nodeIds: row.NodeIds || [], backend: backend })) : ('—');
@@ -157,10 +162,10 @@ export const Tenants = ({ additionalTenantsProps }) => {
         if (filteredTenants.length === 0 && problemFilter !== ProblemFilterValues.ALL) {
             return _jsx(Illustration, { name: "thumbsUp", width: "200" });
         }
-        return (_jsx(DataTable, { theme: "yandex-cloud", data: filteredTenants, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: "No such tenants" }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: DATABASES_COLUMNS_WIDTH_LS_KEY, data: filteredTenants, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: "No such tenants" }));
     };
     if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, className: b('table'), children: renderTable() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderTable() })] }));
 };

package/dist/containers/Tenants/Tenants.scss

@@ -25,20 +25,28 @@
         }
     }
 
-    &__table {
-        @include table-styles;
+    &__type {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
     }
 
     &__type-value {
-        margin-right: 10px;
+        overflow: hidden;
+
+        width: min-content;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
     &__type-button {
-        visibility: hidden;
+        display: none;
     }
 
     .data-table__row:hover &__type-button {
-        visibility: visible;
+        display: block;
     }
 
     &__name-wrapper {

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -23,8 +23,6 @@
 
         @include freeze-nth-column(1);
         @include freeze-nth-column(2, 80px);
-
-        @include table-styles;
     }
 
     .ydb-tree-view {

package/dist/containers/Versions/NodesTable/NodesTable.js

@@ -3,15 +3,18 @@ import DataTable from '@gravity-ui/react-data-table';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
 import { formatBytes } from '../../../utils/dataFormatters/dataFormatters';
 import { isUnavailableNode } from '../../../utils/nodes';
 import { getDefaultNodePath } from '../../Node/NodePages';
+const VERSIONS_COLUMNS_WIDTH_LS_KEY = 'versionsTableColumnsWidth';
 const columns = [
     {
         name: 'NodeId',
         header: '#',
-        width: '80px',
+        width: 80,
+        resizeMinWidth: 80,
         align: DataTable.LEFT,
         render: ({ row }) => row.NodeId,
     },
@@ -25,7 +28,7 @@ const columns = [
             const nodePath = !isUnavailableNode(row) && row.NodeId ? getDefaultNodePath(row.NodeId) : undefined;
             return (_jsx(EntityStatus, { name: title, path: nodePath, hasClipboardButton: true, showStatus: false }));
         },
-        width: '400px',
+        width: 400,
         align: DataTable.LEFT,
     },
     {
@@ -34,14 +37,14 @@ const columns = [
         render: ({ row }) => row.Endpoints
             ? row.Endpoints.map(({ Name, Address }) => `${Name} ${Address}`).join(', ')
             : '-',
-        width: '300px',
+        width: 300,
         align: DataTable.LEFT,
     },
     {
         name: 'uptime',
         header: 'Uptime',
         sortAccessor: ({ StartTime }) => StartTime && -StartTime,
-        width: '120px',
+        width: 120,
         align: DataTable.LEFT,
         render: ({ row }) => row.uptime,
     },
@@ -51,7 +54,7 @@ const columns = [
         sortAccessor: ({ MemoryUsed = 0 }) => Number(MemoryUsed),
         defaultOrder: DataTable.DESCENDING,
         render: ({ row }) => (row.MemoryUsed ? formatBytes(row.MemoryUsed) : '—'),
-        width: '120px',
+        width: 120,
         align: DataTable.RIGHT,
     },
     {
@@ -60,7 +63,7 @@ const columns = [
         sortAccessor: ({ MemoryLimit = 0 }) => Number(MemoryLimit),
         defaultOrder: DataTable.DESCENDING,
         render: ({ row }) => (row.MemoryLimit ? formatBytes(row.MemoryLimit) : '—'),
-        width: '120px',
+        width: 120,
         align: DataTable.RIGHT,
     },
     {
@@ -68,7 +71,8 @@ const columns = [
         header: 'Pools',
         sortAccessor: ({ PoolStats = [] }) => PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
         defaultOrder: DataTable.DESCENDING,
-        width: '120px',
+        width: 80,
+        resizeMinWidth: 60,
         render: ({ row }) => (row.PoolStats ? _jsx(PoolsGraph, { pools: row.PoolStats }) : '—'),
         align: DataTable.LEFT,
     },
@@ -77,11 +81,12 @@ const columns = [
         header: 'Load average',
         sortAccessor: ({ LoadAverage = [] }) => LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
         defaultOrder: DataTable.DESCENDING,
-        width: '200px',
+        width: 140,
+        resizeMinWidth: 140,
         render: ({ row }) => row.LoadAverage && row.LoadAverage.length > 0 ? (_jsx(ProgressViewer, { value: row.LoadAverage[0], percents: true, capacity: 100, colorizeProgress: true })) : ('—'),
         align: DataTable.LEFT,
     },
 ];
 export const NodesTable = ({ nodes }) => {
-    return (_jsx(DataTable, { theme: "yandex-cloud", data: nodes, columns: columns, settings: DEFAULT_TABLE_SETTINGS }));
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: VERSIONS_COLUMNS_WIDTH_LS_KEY, data: nodes, columns: columns, settings: DEFAULT_TABLE_SETTINGS }));
 };

package/dist/styles/mixins.scss

@@ -96,13 +96,6 @@
 
 @mixin query-data-table() {
     & .data-table {
-        $_: &;
-
-        &__table {
-            border-spacing: 0;
-            border-collapse: separate;
-        }
-
         &__th,
         &__td {
             vertical-align: middle;
@@ -114,11 +107,6 @@
             }
         }
 
-        &__row,
-        &__sticky th {
-            height: 40px;
-        }
-
         &__th {
             box-shadow: inset 0 -1px 0 0 var(--g-tabs-color-divider);
         }
@@ -170,41 +158,6 @@
     }
 }
 
-@mixin table-styles {
-    & .data-table {
-        &__table {
-            width: 100%;
-        }
-
-        &__row,
-        &__sticky th {
-            height: 40px;
-        }
-
-        &__box {
-            .data-table__table-wrapper {
-                padding-bottom: 20px;
-            }
-
-            &_sticky-head_fixed {
-                overflow: initial;
-            }
-        }
-    }
-}
-
-@mixin table-sticky-styles {
-    & .data-table {
-        &__th {
-            height: auto;
-        }
-    }
-
-    & {
-        padding-bottom: 20px;
-    }
-}
-
 @mixin json-tree-styles {
     // stylelint-disable
     font-family: var(--g-font-family-monospace) !important;

package/dist/utils/constants.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import type { Settings } from '@gravity-ui/react-data-table';
 export declare const AUTO_RELOAD_INTERVAL: number;
 export declare const DEFAULT_POLLING_INTERVAL: number;
 export declare const KILOBYTE = 1000;
@@ -66,19 +68,32 @@ export declare const DEFAULT_IS_TENANT_SUMMARY_COLLAPSED = "default-is-tenant-su
 export declare const DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED = "default-is-tenant-common-info-collapsed";
 export declare const DEFAULT_IS_QUERY_RESULT_COLLAPSED = "default-is-query-result-collapsed";
 export declare const DEFAULT_CLUSTER_TAB_KEY = "default-cluster-tab";
-export declare const DEFAULT_TABLE_SETTINGS: {
-    readonly displayIndices: false;
-    readonly stickyHead: "moving";
-    readonly syncHeadOnResize: true;
-    readonly dynamicRender: true;
-    readonly highlightRows: true;
-};
+export declare const DEFAULT_TABLE_SETTINGS: Settings;
 export declare const TENANT_OVERVIEW_TABLES_SETTINGS: {
     readonly stickyHead: "fixed";
     readonly dynamicRender: false;
-    readonly displayIndices: false;
-    readonly syncHeadOnResize: true;
-    readonly highlightRows: true;
+    readonly displayIndices?: boolean | undefined;
+    readonly stickyTop?: number | "auto" | undefined;
+    readonly syncHeadOnResize?: boolean | undefined;
+    readonly stickyFooter?: import("@gravity-ui/react-data-table").HeadPosition | undefined;
+    readonly stickyBottom?: number | "auto" | undefined;
+    readonly dynamicInnerRef?: import("react").Ref<ReactList> | undefined;
+    readonly dynamicRenderType?: "simple" | "uniform" | "variable" | undefined;
+    readonly dynamicItemSizeEstimator?: any;
+    readonly dynamicItemSizeGetter?: any;
+    readonly dynamicRenderMinSize?: number | undefined;
+    readonly dynamicRenderUseStaticSize?: boolean | undefined;
+    readonly dynamicRenderThreshold?: number | undefined;
+    readonly dynamicRenderScrollParentGetter?: any;
+    readonly dynamicRenderScrollParentViewportSizeGetter?: (() => number) | undefined;
+    readonly sortable?: boolean | undefined;
+    readonly externalSort?: boolean | undefined;
+    readonly disableSortReset?: boolean | undefined;
+    readonly defaultOrder?: import("@gravity-ui/react-data-table").OrderType | undefined;
+    readonly defaultResizeable?: boolean | undefined;
+    readonly highlightRows?: boolean | undefined;
+    readonly stripedRows?: boolean | undefined;
+    readonly headerMod?: "multiline" | "pre" | undefined;
 };
 export declare const QUERY_INITIAL_MODE_KEY = "query_initial_mode";
 export declare const LAST_USED_QUERY_ACTION_KEY = "last_used_query_action";

package/dist/utils/hooks/useTableResize.d.ts

@@ -1,7 +1,2 @@
-import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
-import type { Column as VirtualTableColumn } from '../../components/VirtualTable';
-export type Column<T> = VirtualTableColumn<T> & DataTableColumn<T>;
-export type TableColumnsWidthSetup = Record<string, number>;
-export type HandleTableColumnsResize = (newSetup: TableColumnsWidthSetup) => void;
-export declare const updateColumnsWidth: <T>(columns: Column<T>[], columnsWidthSetup: TableColumnsWidthSetup) => Column<T>[];
-export declare const useTableResize: (localStorageKey: string) => [TableColumnsWidthSetup, HandleTableColumnsResize];
+import type { ColumnWidthByName, HandleResize } from '@gravity-ui/react-data-table';
+export declare const useTableResize: (localStorageKey?: string) => [ColumnWidthByName, HandleResize];

package/dist/utils/hooks/useTableResize.js

@@ -1,29 +1,17 @@
 import React from 'react';
-import { DEFAULT_RESIZEABLE } from '../../components/VirtualTable';
+import { useTableResize as libUseTableResize } from '@gravity-ui/react-data-table';
 import { settingsManager } from '../../services/settings';
-export const updateColumnsWidth = (columns, columnsWidthSetup) => {
-    return columns.map((column) => {
-        var _a, _b;
-        const resizeable = (_a = column.resizeable) !== null && _a !== void 0 ? _a : DEFAULT_RESIZEABLE;
-        if (!resizeable) {
-            return column;
-        }
-        return Object.assign(Object.assign({}, column), { width: (_b = columnsWidthSetup[column.name]) !== null && _b !== void 0 ? _b : column.width });
-    });
-};
 export const useTableResize = (localStorageKey) => {
-    const [tableColumnsWidthSetup, setTableColumnsWidth] = React.useState(() => {
-        const setupFromLS = settingsManager.readUserSettingsValue(localStorageKey, {});
-        return setupFromLS;
-    });
-    const handleSetupChange = React.useCallback((newSetup) => {
-        setTableColumnsWidth((previousSetup) => {
-            // ResizeObserver callback may be triggered only for currently resized column
-            // or for the whole set of columns
-            const setup = Object.assign(Object.assign({}, previousSetup), newSetup);
-            settingsManager.setUserSettingsValue(localStorageKey, setup);
-            return setup;
-        });
+    const getSizes = React.useCallback(() => {
+        if (!localStorageKey) {
+            return {};
+        }
+        return settingsManager.readUserSettingsValue(localStorageKey, {});
+    }, [localStorageKey]);
+    const saveSizes = React.useCallback((value) => {
+        if (localStorageKey) {
+            settingsManager.setUserSettingsValue(localStorageKey, value);
+        }
     }, [localStorageKey]);
-    return [tableColumnsWidthSetup, handleSetupChange];
+    return libUseTableResize({ saveSizes, getSizes });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "files": [
     "dist"
   ],
@@ -12,15 +12,15 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/axios-wrapper": "^1.4.1",
-    "@gravity-ui/chartkit": "^5.3.0",
-    "@gravity-ui/components": "^3.4.1",
-    "@gravity-ui/date-utils": "^2.2.0",
-    "@gravity-ui/i18n": "^1.4.0",
+    "@gravity-ui/chartkit": "^5.5.0",
+    "@gravity-ui/components": "^3.6.0",
+    "@gravity-ui/date-utils": "^2.4.0",
+    "@gravity-ui/i18n": "^1.5.0",
     "@gravity-ui/icons": "^2.9.1",
-    "@gravity-ui/navigation": "^2.7.0",
-    "@gravity-ui/paranoid": "^1.4.1",
-    "@gravity-ui/react-data-table": "^2.0.1",
-    "@gravity-ui/uikit": "^6.10.2",
+    "@gravity-ui/navigation": "^2.10.0",
+    "@gravity-ui/paranoid": "^2.0.1",
+    "@gravity-ui/react-data-table": "^2.1.1",
+    "@gravity-ui/uikit": "^6.15.0",
     "@gravity-ui/websql-autocomplete": "^8.1.0",
     "@reduxjs/toolkit": "^2.2.3",
     "axios": "^1.6.8",
@@ -122,7 +122,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
-    "@gravity-ui/eslint-config": "^3.1.1",
+    "@gravity-ui/eslint-config": "^3.2.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",

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

@@ -1,8 +0,0 @@
-.top-shards {
-    &__filters {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
-        gap: 16px;
-    }
-}