ydb-embedded-ui 6.1.0 → 6.2.1

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;
-};

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.js

@@ -15,10 +15,11 @@ import './Preview.scss';
 const b = cn('kv-preview');
 export const Preview = ({ database, type }) => {
     const dispatch = useTypedDispatch();
+    const isPreviewAvailable = isTableType(type);
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
-    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh });
+    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh, skip: !isPreviewAvailable });
     const loading = isFetching && currentData === undefined;
     const data = currentData !== null && currentData !== void 0 ? currentData : {};
     const handleClosePreview = () => {
@@ -31,7 +32,7 @@ export const Preview = ({ database, type }) => {
         return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));
     }
     let message;
-    if (!isTableType(type)) {
+    if (!isPreviewAvailable) {
         message = _jsx("div", { className: b('message-container'), children: i18n('preview.not-available') });
     }
     else if (error) {

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 });
@@ -53,10 +55,10 @@ export const Tenants = ({ additionalTenantsProps }) => {
                     var _a;
                     const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
-                    return (_jsxs("div", { className: b('name-wrapper'), children: [_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
-                                    name: row.Name,
-                                    backend,
-                                }) }), (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type)] }));
+                    return (_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
+                            name: row.Name,
+                            backend,
+                        }), additionalControls: _jsx("span", { className: b('monitoring-button'), children: (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type) }) }));
                 },
                 width: 440,
                 sortable: true,
@@ -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,26 +25,32 @@
         }
     }
 
-    &__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 {
-        display: flex;
-        align-items: center;
-        gap: 4px;
+    &__monitoring-button {
+        margin-left: 4px;
     }
 
     &__name {

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;