ydb-embedded-ui 4.32.0 → 4.33.0

package/dist/components/CellWithPopover/CellWithPopover.scss

@@ -1,13 +1,20 @@
 .ydb-cell-with-popover {
     display: flex;
 
+    max-width: 100%;
+
     &__popover {
         display: inline-block;
         overflow: hidden;
 
         max-width: 100%;
 
+        vertical-align: middle;
         white-space: nowrap;
         text-overflow: ellipsis;
+
+        .yc-popover__handler {
+            display: inline;
+        }
     }
 }

package/dist/components/Loader/Loader.tsx

@@ -7,11 +7,12 @@ const b = cn('ydb-loader');
 
 interface LoaderProps {
     size?: LoaderSize;
+    className?: string;
 }
 
-export const Loader = ({size = 'm'}: LoaderProps) => {
+export const Loader = ({size = 'm', className}: LoaderProps) => {
     return (
-        <div className={b()}>
+        <div className={b(null, className)}>
             <KitLoader size={size} />
         </div>
     );

package/dist/components/MetricChart/MetricChart.tsx

@@ -6,13 +6,19 @@ import ChartKit, {settings} from '@gravity-ui/chartkit';
 import type {IResponseError} from '../../types/api/error';
 import type {TimeFrame} from '../../utils/timeframes';
 import {useAutofetcher} from '../../utils/hooks';
+
 import {COLORS} from '../../utils/versions';
 import {cn} from '../../utils/cn';
 
 import {Loader} from '../Loader';
 import {ResponseError} from '../Errors/ResponseError';
 
-import type {ChartOptions, MetricDescription, PreparedMetricsData} from './types';
+import type {
+    ChartOptions,
+    MetricDescription,
+    OnChartDataStatusChange,
+    PreparedMetricsData,
+} from './types';
 import {convertResponse} from './convertReponse';
 import {getDefaultDataFormatter} from './getDefaultDataFormatter';
 import {getChartData} from './getChartData';
@@ -102,6 +108,15 @@ interface DiagnosticsChartProps {
     width?: number;
 
     chartOptions?: ChartOptions;
+
+    onChartDataStatusChange?: OnChartDataStatusChange;
+
+    /**
+     * YAGR charts don't render correctly inside not visible elements\
+     * So if chart is used inside component with 'display:none', it will be empty, when visibility change\
+     * Pass isChartVisible prop to ensure proper chart render
+     */
+    isChartVisible?: boolean;
 }
 
 export const MetricChart = ({
@@ -112,6 +127,8 @@ export const MetricChart = ({
     width = 400,
     height = width / 1.5,
     chartOptions,
+    onChartDataStatusChange,
+    isChartVisible,
 }: DiagnosticsChartProps) => {
     const mounted = useRef(false);
 
@@ -127,6 +144,20 @@ export const MetricChart = ({
         initialChartState,
     );
 
+    useEffect(() => {
+        if (error) {
+            return onChartDataStatusChange?.('error');
+        }
+        if (loading && !wasLoaded) {
+            return onChartDataStatusChange?.('loading');
+        }
+        if (!loading && wasLoaded) {
+            return onChartDataStatusChange?.('success');
+        }
+
+        return undefined;
+    }, [loading, wasLoaded, error, onChartDataStatusChange]);
+
     const fetchChartData = useCallback(
         async (isBackground: boolean) => {
             dispatch(setChartDataLoading());
@@ -146,7 +177,9 @@ export const MetricChart = ({
                 });
 
                 // Hack to prevent setting value to state, if component unmounted
-                if (!mounted.current) return;
+                if (!mounted.current) {
+                    return;
+                }
 
                 // In some cases error could be in response with 200 status code
                 // It happens when request is OK, but chart data cannot be returned due to some reason
@@ -155,10 +188,14 @@ export const MetricChart = ({
                     const preparedData = convertResponse(response, metrics);
                     dispatch(setChartData(preparedData));
                 } else {
-                    dispatch(setChartError({statusText: response.error}));
+                    const err = {statusText: response.error};
+
+                    throw err;
                 }
             } catch (err) {
-                if (!mounted.current) return;
+                if (!mounted.current) {
+                    return;
+                }
 
                 dispatch(setChartError(err as IResponseError));
             }
@@ -175,6 +212,10 @@ export const MetricChart = ({
             return <Loader />;
         }
 
+        if (!isChartVisible) {
+            return null;
+        }
+
         return (
             <div className={b('chart')}>
                 <ChartKit type="yagr" data={convertedData} />

package/dist/components/MetricChart/index.ts

@@ -1,2 +1,2 @@
-export type {MetricDescription, Metric, ChartOptions} from './types';
+export * from './types';
 export {MetricChart} from './MetricChart';

package/dist/components/MetricChart/types.ts

@@ -30,3 +30,6 @@ export type ChartDataType = 'ms' | 'size';
 export interface ChartOptions {
     dataType?: ChartDataType;
 }
+
+export type ChartDataStatus = 'loading' | 'success' | 'error';
+export type OnChartDataStatusChange = (newStatus: ChartDataStatus) => void;

package/dist/components/VirtualTable/TableHead.tsx

@@ -1,14 +1,21 @@
-import {useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+
+import type {
+    HandleTableColumnsResize,
+    TableColumnsWidthSetup,
+} from '../../utils/hooks/useTableResize';
 
 import type {Column, OnSort, SortOrderType, SortParams} from './types';
 import {ASCENDING, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING} from './constants';
 import {b} from './shared';
 
+const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
+
 // Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
 const SortIcon = ({order}: {order?: SortOrderType}) => {
     return (
         <svg
-            className={b('icon', {desc: order === DESCENDING})}
+            className={b('sort-icon', {desc: order === DESCENDING})}
             viewBox="0 0 10 6"
             width="10"
             height="6"
@@ -27,7 +34,7 @@ interface ColumnSortIconProps {
 const ColumnSortIcon = ({sortOrder, sortable, defaultSortOrder}: ColumnSortIconProps) => {
     if (sortable) {
         return (
-            <span className={b('sort-icon', {shadow: !sortOrder})}>
+            <span className={b('sort-icon-container', {shadow: !sortOrder})}>
                 <SortIcon order={sortOrder || defaultSortOrder} />
             </span>
         );
@@ -36,9 +43,84 @@ const ColumnSortIcon = ({sortOrder, sortable, defaultSortOrder}: ColumnSortIconP
     }
 };
 
+interface TableHeadCellProps<T> {
+    column: Column<T>;
+    sortOrder?: SortOrderType;
+    defaultSortOrder: SortOrderType;
+    onSort?: (columnName: string) => void;
+    rowHeight: number;
+    onCellMount?: (element: Element) => void;
+    onCellUnMount?: (element: Element) => void;
+}
+
+export const TableHeadCell = <T,>({
+    column,
+    sortOrder,
+    defaultSortOrder,
+    onSort,
+    rowHeight,
+    onCellMount,
+    onCellUnMount,
+}: TableHeadCellProps<T>) => {
+    const cellWrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const cellWrapper = cellWrapperRef.current;
+        if (cellWrapper) {
+            onCellMount?.(cellWrapper);
+        }
+        return () => {
+            if (cellWrapper) {
+                onCellUnMount?.(cellWrapper);
+            }
+        };
+    }, [onCellMount, onCellUnMount]);
+
+    const content = column.header ?? column.name;
+
+    return (
+        <th>
+            <div
+                ref={cellWrapperRef}
+                className={b('head-cell-wrapper', {
+                    resizeable: column.resizeable,
+                })}
+                style={{
+                    height: `${rowHeight}px`,
+                    width: `${column.width}px`,
+                }}
+                {...{
+                    [COLUMN_NAME_HTML_ATTRIBUTE]: column.name,
+                }}
+            >
+                <div
+                    className={b(
+                        'head-cell',
+                        {align: column.align, sortable: column.sortable},
+                        column.className,
+                    )}
+                    onClick={() => {
+                        if (column.sortable) {
+                            onSort?.(column.name);
+                        }
+                    }}
+                >
+                    <div className={b('head-cell-content')}>{content}</div>
+                    <ColumnSortIcon
+                        sortOrder={sortOrder}
+                        sortable={column.sortable}
+                        defaultSortOrder={defaultSortOrder}
+                    />
+                </div>
+            </div>
+        </th>
+    );
+};
+
 interface TableHeadProps<T> {
     columns: Column<T>[];
     onSort?: OnSort;
+    onColumnsResize?: HandleTableColumnsResize;
     defaultSortOrder?: SortOrderType;
     rowHeight?: number;
 }
@@ -46,11 +128,44 @@ interface TableHeadProps<T> {
 export const TableHead = <T,>({
     columns,
     onSort,
+    onColumnsResize,
     defaultSortOrder = DEFAULT_SORT_ORDER,
     rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
 }: TableHeadProps<T>) => {
     const [sortParams, setSortParams] = useState<SortParams>({});
 
+    const isTableResizeable = Boolean(onColumnsResize);
+
+    const resizeObserver: ResizeObserver | undefined = useMemo(() => {
+        if (!isTableResizeable) {
+            return undefined;
+        }
+
+        return new ResizeObserver((entries) => {
+            const columnsWidth: TableColumnsWidthSetup = {};
+            entries.forEach((entry) => {
+                // @ts-ignore ignore custrom property usage
+                const id = entry.target.attributes[COLUMN_NAME_HTML_ATTRIBUTE]?.value;
+                columnsWidth[id] = entry.contentRect.width;
+            });
+
+            onColumnsResize?.(columnsWidth);
+        });
+    }, [onColumnsResize, isTableResizeable]);
+
+    const handleCellMount = useCallback(
+        (element: Element) => {
+            resizeObserver?.observe(element);
+        },
+        [resizeObserver],
+    );
+    const handleCellUnMount = useCallback(
+        (element: Element) => {
+            resizeObserver?.unobserve(element);
+        },
+        [resizeObserver],
+    );
+
     const handleSort = (columnId: string) => {
         let newSortParams: SortParams = {};
 
@@ -95,34 +210,20 @@ export const TableHead = <T,>({
             <thead className={b('head')}>
                 <tr>
                     {columns.map((column) => {
-                        const content = column.header ?? column.name;
                         const sortOrder =
                             sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
 
                         return (
-                            <th
+                            <TableHeadCell
                                 key={column.name}
-                                className={b(
-                                    'th',
-                                    {align: column.align, sortable: column.sortable},
-                                    column.className,
-                                )}
-                                style={{
-                                    height: `${rowHeight}px`,
-                                }}
-                                onClick={() => {
-                                    handleSort(column.name);
-                                }}
-                            >
-                                <div className={b('head-cell')}>
-                                    {content}
-                                    <ColumnSortIcon
-                                        sortOrder={sortOrder}
-                                        sortable={column.sortable}
-                                        defaultSortOrder={defaultSortOrder}
-                                    />
-                                </div>
-                            </th>
+                                column={column}
+                                sortOrder={sortOrder}
+                                defaultSortOrder={defaultSortOrder}
+                                onSort={handleSort}
+                                rowHeight={rowHeight}
+                                onCellMount={handleCellMount}
+                                onCellUnMount={handleCellUnMount}
+                            />
                         );
                     })}
                 </tr>

package/dist/components/VirtualTable/TableRow.tsx

@@ -8,14 +8,25 @@ import {b} from './shared';
 
 interface TableCellProps {
     height: number;
+    width: number;
     align?: AlignType;
     children: ReactNode;
     className?: string;
 }
 
-const TableRowCell = ({children, className, height, align = DEFAULT_ALIGN}: TableCellProps) => {
+const TableRowCell = ({
+    children,
+    className,
+    height,
+    width,
+    align = DEFAULT_ALIGN,
+}: TableCellProps) => {
+    // Additional maxWidth to ensure overflow hidden for <td>
     return (
-        <td className={b('td', {align: align}, className)} style={{height: `${height}px`}}>
+        <td
+            className={b('row-cell', {align: align}, className)}
+            style={{height: `${height}px`, width: `${width}px`, maxWidth: `${width}px`}}
+        >
             {children}
         </td>
     );
@@ -35,6 +46,7 @@ export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowPro
                     <TableRowCell
                         key={`${column.name}${index}`}
                         height={height}
+                        width={column.width}
                         align={column.align}
                         className={column.className}
                     >
@@ -64,6 +76,7 @@ export const TableRow = <T,>({row, index, columns, getRowClassName, height}: Tab
                     <TableRowCell
                         key={`${column.name}${index}`}
                         height={height}
+                        width={column.width}
                         align={column.align}
                         className={column.className}
                     >

package/dist/components/VirtualTable/VirtualTable.scss

@@ -6,8 +6,6 @@
     --virtual-table-cell-vertical-padding: 5px;
     --virtual-table-cell-horizontal-padding: 10px;
 
-    --virtual-table-sort-icon-space: 18px;
-
     --virtual-table-border-color: var(--g-color-base-generic-hover);
     --virtual-table-hover-color: var(--g-color-base-float-hover);
 
@@ -21,6 +19,10 @@
         table-layout: fixed;
         border-spacing: 0;
         border-collapse: separate;
+
+        th {
+            padding: 0;
+        }
     }
 
     &__row {
@@ -40,96 +42,96 @@
         @include sticky-top();
     }
 
-    &__th {
-        position: relative;
-
-        padding: var(--virtual-table-cell-vertical-padding)
-            var(--virtual-table-cell-horizontal-padding);
-
-        font-weight: bold;
-        cursor: default;
-        text-align: left;
+    &__sort-icon-container {
+        display: flex;
+        justify-content: center;
 
-        border-bottom: $cell-border;
+        color: inherit;
 
-        &_sortable {
-            cursor: pointer;
+        &_shadow {
+            opacity: 0.15;
+        }
+    }
 
-            #{$block}__head-cell {
-                padding-right: var(--virtual-table-sort-icon-space);
-            }
+    &__sort-icon {
+        &_desc {
+            transform: rotate(180deg);
+        }
+    }
 
-            &#{$block}__th_align_right {
-                #{$block}__head-cell {
-                    padding-right: 0;
-                    padding-left: var(--virtual-table-sort-icon-space);
-                }
+    &__head-cell-wrapper {
+        display: flex;
+        overflow-x: hidden;
 
-                #{$block}__sort-icon {
-                    right: auto;
-                    left: 0;
+        border-bottom: $cell-border;
 
-                    transform: translate(0, -50%) scaleX(-1);
-                }
-            }
+        &_resizeable {
+            resize: horizontal;
         }
     }
 
     &__head-cell {
-        position: relative;
-
-        display: inline-block;
-        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
 
-        box-sizing: border-box;
+        width: 100%;
         max-width: 100%;
+        padding: var(--virtual-table-cell-vertical-padding)
+            var(--virtual-table-cell-horizontal-padding);
 
-        vertical-align: top;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        &_align {
+            &_left {
+                justify-content: left;
+            }
+            &_center {
+                justify-content: center;
+            }
+            &_right {
+                justify-content: right;
+            }
+        }
     }
 
-    &__sort-icon {
-        position: absolute;
-        top: 50%;
-        right: 0;
-
-        display: inline-flex;
+    &__head-cell {
+        gap: 8px;
 
-        color: inherit;
+        font-weight: bold;
+        cursor: default;
 
-        transform: translate(0, -50%);
+        &_sortable {
+            cursor: pointer;
 
-        &_shadow {
-            opacity: 0.15;
+            &#{$block}__head-cell_align_right {
+                flex-direction: row-reverse;
+            }
         }
     }
 
-    &__icon {
-        vertical-align: top;
+    // Separate head cell content class for correct text ellipsis overflow
+    &__head-cell-content {
+        overflow: hidden;
 
-        &_desc {
-            transform: rotate(180deg);
-        }
+        width: min-content;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
-    &__td {
-        overflow: hidden;
+    &__row-cell {
+        display: table-cell;
+        overflow-x: hidden;
 
+        width: 100%;
+        max-width: 100%;
         padding: var(--virtual-table-cell-vertical-padding)
             var(--virtual-table-cell-horizontal-padding);
 
+        vertical-align: middle;
         white-space: nowrap;
         text-overflow: ellipsis;
 
         border-bottom: $cell-border;
-    }
-
-    &__td,
-    &__th {
-        height: 40px;
-
-        vertical-align: middle;
 
         &_align {
             &_left {

package/dist/components/VirtualTable/VirtualTable.tsx

@@ -1,5 +1,7 @@
 import {useState, useReducer, useRef, useCallback, useEffect} from 'react';
 
+import type {HandleTableColumnsResize} from '../../utils/hooks/useTableResize';
+
 import type {IResponseError} from '../../types/api/error';
 import {getArray} from '../../utils';
 
@@ -45,9 +47,12 @@ interface VirtualTableProps<T> {
     rowHeight?: number;
     parentContainer?: Element | null;
     initialSortParams?: SortParams;
+    onColumnsResize?: HandleTableColumnsResize;
+
     renderControls?: RenderControls;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     renderErrorMessage?: RenderErrorMessage;
+
     dependencyArray?: unknown[]; // Fully reload table on params change
 }
 
@@ -59,6 +64,7 @@ export const VirtualTable = <T,>({
     rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
     parentContainer,
     initialSortParams,
+    onColumnsResize,
     renderControls,
     renderEmptyDataMessage,
     renderErrorMessage,
@@ -258,7 +264,11 @@ export const VirtualTable = <T,>({
     const renderTable = () => {
         return (
             <table className={b('table')}>
-                <TableHead columns={columns} onSort={handleSort} />
+                <TableHead
+                    columns={columns}
+                    onSort={handleSort}
+                    onColumnsResize={onColumnsResize}
+                />
                 {renderData()}
             </table>
         );

package/dist/components/VirtualTable/types.ts

@@ -28,6 +28,7 @@ export interface Column<T> {
     header?: ReactNode;
     className?: string;
     sortable?: boolean;
+    resizeable?: boolean;
     render: (props: {row: T; index: number}) => ReactNode;
     width: number;
     align: AlignType;

package/dist/containers/Nodes/VirtualNodes.tsx

@@ -13,6 +13,7 @@ import {
     isSortableNodesProperty,
     isUnavailableNode,
 } from '../../utils/nodes';
+import {updateColumnsWidth, useTableResize} from '../../utils/hooks/useTableResize';
 
 import {Search} from '../../components/Search';
 import {ProblemFilter} from '../../components/ProblemFilter';
@@ -50,6 +51,8 @@ export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: Node
         NodesUptimeFilterValues.All,
     );
 
+    const [tableColumnsWidthSetup, setTableColumnsWidth] = useTableResize('nodesTableColumnsWidth');
+
     const filters = useMemo(() => {
         return [path, searchValue, problemFilter, uptimeFilter];
     }, [path, searchValue, problemFilter, uptimeFilter]);
@@ -118,7 +121,7 @@ export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: Node
         getNodeRef: additionalNodesProps?.getNodeRef,
     });
 
-    const columns = rawColumns.map((column) => {
+    const columns = updateColumnsWidth(rawColumns, tableColumnsWidthSetup).map((column) => {
         return {...column, sortable: isSortableNodesProperty(column.name)};
     });
 
@@ -133,6 +136,7 @@ export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: Node
             renderEmptyDataMessage={renderEmptyDataMessage}
             dependencyArray={filters}
             getRowClassName={getRowClassName}
+            onColumnsResize={setTableColumnsWidth}
         />
     );
 };

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -89,6 +89,7 @@ const versionColumn: NodesColumn = {
         return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
     },
     sortable: false,
+    resizeable: true,
 };
 
 const uptimeColumn: NodesColumn = {

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -100,14 +100,14 @@ const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?
         {label: 'Partitioning by load', value: partitioningByLoad},
         {
             label: 'Min number of partitions',
-            value: PartitioningPolicy.MinPartitionsCount || 0,
+            value: formatNumber(PartitioningPolicy.MinPartitionsCount || 0),
         },
     );
 
     if (PartitioningPolicy.MaxPartitionsCount) {
         generalTableInfo.push({
             label: 'Max number of partitions',
-            value: PartitioningPolicy.MaxPartitionsCount || 0,
+            value: formatNumber(PartitioningPolicy.MaxPartitionsCount),
         });
     }
 

package/dist/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/DefaultOverviewContent.tsx

@@ -0,0 +1,6 @@
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import {defaultDashboardConfig} from './defaultDashboardConfig';
+
+export const DefaultOverviewContent = () => {
+    return <TenantDashboard charts={defaultDashboardConfig} />;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/{DefaultDashboard.tsx → DefaultOverviewContent/defaultDashboardConfig.ts}

@@ -1,7 +1,7 @@
-import {type ChartConfig, TenantDashboard} from './TenantDashboard/TenantDashboard';
-import i18n from './i18n';
+import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
 
-const defaultDashboardConfig: ChartConfig[] = [
+export const defaultDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.queries-per-second'),
         metrics: [
@@ -44,7 +44,3 @@ const defaultDashboardConfig: ChartConfig[] = [
         },
     },
 ];
-
-export const DefaultDashboard = () => {
-    return <TenantDashboard charts={defaultDashboardConfig} />;
-};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx

@@ -1,5 +1,6 @@
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
-import {CpuDashboard} from './CpuDashboard';
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import {cpuDashboardConfig} from './cpuDashboardConfig';
 import {TopNodesByLoad} from './TopNodesByLoad';
 import {TopNodesByCpu} from './TopNodesByCpu';
 import {TopShards} from './TopShards';
@@ -13,7 +14,7 @@ interface TenantCpuProps {
 export function TenantCpu({path, additionalNodesProps}: TenantCpuProps) {
     return (
         <>
-            <CpuDashboard />
+            <TenantDashboard charts={cpuDashboardConfig} />
             <TopNodesByLoad path={path} additionalNodesProps={additionalNodesProps} />
             <TopNodesByCpu path={path} additionalNodesProps={additionalNodesProps} />
             <TopShards path={path} />

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/{CpuDashboard.tsx → cpuDashboardConfig.ts}

@@ -1,7 +1,7 @@
-import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
-const cpuDashboardConfig: ChartConfig[] = [
+export const cpuDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.cpu-usage'),
         metrics: [
@@ -12,7 +12,3 @@ const cpuDashboardConfig: ChartConfig[] = [
         ],
     },
 ];
-
-export const CpuDashboard = () => {
-    return <TenantDashboard charts={cpuDashboardConfig} />;
-};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx

@@ -1,14 +1,15 @@
+import {useState} from 'react';
 import {StringParam, useQueryParam} from 'use-query-params';
 
 import {cn} from '../../../../../utils/cn';
 import type {TimeFrame} from '../../../../../utils/timeframes';
-import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
-import {DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY} from '../../../../../utils/constants';
+import {useTypedSelector} from '../../../../../utils/hooks';
 import {TimeFrameSelector} from '../../../../../components/TimeFrameSelector/TimeFrameSelector';
 import {
     type ChartOptions,
     MetricChart,
     type MetricDescription,
+    type ChartDataStatus,
 } from '../../../../../components/MetricChart';
 
 import './TenantDashboard.scss';
@@ -29,15 +30,29 @@ interface TenantDashboardProps {
 }
 
 export const TenantDashboard = ({charts}: TenantDashboardProps) => {
+    const [isDashboardHidden, setIsDashboardHidden] = useState<boolean>(true);
+
     const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam);
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
-    const [chartsEnabled] = useSetting(DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY);
+    // Refetch data only if dashboard successfully loaded
+    const shouldRefresh = autorefresh && !isDashboardHidden;
 
-    if (!chartsEnabled) {
-        return null;
-    }
+    /**
+     * Charts should be hidden, if they are not enabled:
+     * 1. GraphShard is not enabled
+     * 2. ydb version does not have /viewer/json/render endpoint (400, 404, CORS error, etc.)
+     *
+     * If at least one chart successfully loaded, dashboard should be shown
+     * @link https://github.com/ydb-platform/ydb-embedded-ui/issues/659
+     * @todo disable only for specific errors ('GraphShard is not enabled') after ydb-stable-24 is generally used
+     */
+    const handleChartDataStatusChange = (chartStatus: ChartDataStatus) => {
+        if (chartStatus === 'success') {
+            setIsDashboardHidden(false);
+        }
+    };
 
     // If there is only one chart, display it with full width
     const chartWidth = charts.length === 1 ? CHART_WIDTH_FULL : CHART_WIDTH;
@@ -45,23 +60,26 @@ export const TenantDashboard = ({charts}: TenantDashboardProps) => {
 
     const renderContent = () => {
         return charts.map((chartConfig) => {
+            const chartId = chartConfig.metrics.map(({target}) => target).join('&');
             return (
                 <MetricChart
-                    key={chartConfig.metrics.map(({target}) => target).join('&')}
+                    key={chartId}
                     title={chartConfig.title}
                     metrics={chartConfig.metrics}
                     timeFrame={timeFrame as TimeFrame}
                     chartOptions={chartConfig.options}
-                    autorefresh={autorefresh}
+                    autorefresh={shouldRefresh}
                     width={chartWidth}
                     height={chartHeight}
+                    onChartDataStatusChange={handleChartDataStatusChange}
+                    isChartVisible={!isDashboardHidden}
                 />
             );
         });
     };
 
     return (
-        <div className={b(null)}>
+        <div className={b(null)} style={{display: isDashboardHidden ? 'none' : undefined}}>
             <div className={b('controls')}>
                 <TimeFrameSelector value={timeFrame as TimeFrame} onChange={setTimeframe} />
             </div>

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx

@@ -1,4 +1,5 @@
-import {MemoryDashboard} from './MemoryDashboard';
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import {memoryDashboardConfig} from './memoryDashboardConfig';
 import {TopNodesByMemory} from './TopNodesByMemory';
 
 interface TenantMemoryProps {
@@ -8,7 +9,7 @@ interface TenantMemoryProps {
 export function TenantMemory({path}: TenantMemoryProps) {
     return (
         <>
-            <MemoryDashboard />
+            <TenantDashboard charts={memoryDashboardConfig} />
             <TopNodesByMemory path={path} />
         </>
     );

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/{MemoryDashboard.tsx → memoryDashboardConfig.ts}

@@ -1,7 +1,7 @@
-import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
-const memoryDashboardConfig: ChartConfig[] = [
+export const memoryDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.memory-usage'),
         metrics: [
@@ -15,7 +15,3 @@ const memoryDashboardConfig: ChartConfig[] = [
         },
     },
 ];
-
-export const MemoryDashboard = () => {
-    return <TenantDashboard charts={memoryDashboardConfig} />;
-};

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

@@ -1,4 +1,3 @@
-import cn from 'bem-cn-lite';
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
@@ -17,12 +16,11 @@ import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
 import {TenantStorage} from './TenantStorage/TenantStorage';
 import {TenantMemory} from './TenantMemory/TenantMemory';
-import {DefaultDashboard} from './DefaultDashboard';
+import {DefaultOverviewContent} from './DefaultOverviewContent/DefaultOverviewContent';
 import {useHealthcheck} from './useHealthcheck';
 
 import './TenantOverview.scss';
-
-const b = cn('tenant-overview');
+import {b} from './utils';
 
 interface TenantOverviewProps {
     tenantName: string;
@@ -141,7 +139,7 @@ export function TenantOverview({
                 );
             }
             default: {
-                return <DefaultDashboard />;
+                return <DefaultOverviewContent />;
             }
         }
     };

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

@@ -1,5 +1,4 @@
 import type {ReactNode} from 'react';
-import cn from 'bem-cn-lite';
 
 import DataTable from '@gravity-ui/react-data-table';
 import type {DataTableProps} from '@gravity-ui/react-data-table';
@@ -11,8 +10,7 @@ import {
 import type {IResponseError} from '../../../../types/api/error';
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
-
-const b = cn('tenant-overview');
+import {b} from './utils';
 
 interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
     title: ReactNode;

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

@@ -1,17 +1,16 @@
-import cn from 'bem-cn-lite';
-
 import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
 import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+
 import '../TenantOverview.scss';
 
-import {StorageDashboard} from './StorageDashboard';
+import {storageDashboardConfig} from './storageDashboardConfig';
 import {TopTables} from './TopTables';
 import {TopGroups} from './TopGroups';
-
-const b = cn('tenant-overview');
+import {b} from '../utils';
 
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
@@ -61,9 +60,10 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
             ),
         },
     ];
+
     return (
         <>
-            <StorageDashboard />
+            <TenantDashboard charts={storageDashboardConfig} />
             <InfoViewer className={b('storage-info')} title="Storage details" info={info} />
             <TopTables path={tenantName} />
             <TopGroups tenant={tenantName} />

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/{StorageDashboard.tsx → storageDashboardConfig.ts}

@@ -1,7 +1,7 @@
-import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
-const storageDashboardConfig: ChartConfig[] = [
+export const storageDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.storage-usage'),
         metrics: [
@@ -15,7 +15,3 @@ const storageDashboardConfig: ChartConfig[] = [
         },
     },
 ];
-
-export const StorageDashboard = () => {
-    return <TenantDashboard charts={storageDashboardConfig} />;
-};

package/dist/containers/Tenant/Diagnostics/TenantOverview/utils.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../../../utils/cn';
+
+export const b = cn('tenant-overview');

package/dist/containers/UserSettings/i18n/en.json

@@ -23,8 +23,5 @@
   "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
 
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
-  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
-
-  "settings.displayChartsInDbDiagnostics.title": "Display charts in database diagnostics",
-  "settings.displayChartsInDbDiagnostics.popover": "Incorrect data may be displayed (shows data only for the database related to the current node), does not work well on static nodes"
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -23,8 +23,5 @@
   "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
 
   "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
-  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще",
-
-  "settings.displayChartsInDbDiagnostics.title": "Показывать графики в диагностике базы данных",
-  "settings.displayChartsInDbDiagnostics.popover": "Могут отображаться неправильные данные (показывает данные только для базы, относящейся к текущей ноде), плохо работает на статических нодах"
+  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
 }

package/dist/containers/UserSettings/settings.ts

@@ -10,7 +10,6 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     QUERY_USE_MULTI_SCHEMA_KEY,
-    DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 
@@ -95,11 +94,6 @@ export const queryUseMultiSchemaSetting: SettingProps = {
     title: i18n('settings.queryUseMultiSchema.title'),
     helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
 };
-export const displayChartsInDbDiagnosticsSetting: SettingProps = {
-    settingKey: DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
-    title: i18n('settings.displayChartsInDbDiagnostics.title'),
-    helpPopoverContent: i18n('settings.displayChartsInDbDiagnostics.popover'),
-};
 
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
@@ -109,12 +103,7 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [
-        useNodesEndpointSetting,
-        useVirtualTables,
-        queryUseMultiSchemaSetting,
-        displayChartsInDbDiagnosticsSetting,
-    ],
+    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
 };
 
 export const generalPage: SettingsPage = {

package/dist/services/settings.ts

@@ -3,7 +3,6 @@ import {TENANT_PAGES_IDS} from '../store/reducers/tenant/constants';
 import {
     ASIDE_HEADER_COMPACT_KEY,
     CLUSTER_INFO_HIDDEN_KEY,
-    DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
     LAST_USED_QUERY_ACTION_KEY,
@@ -38,7 +37,6 @@ export const DEFAULT_USER_SETTINGS: SettingsObject = {
     [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
     [CLUSTER_INFO_HIDDEN_KEY]: true,
     [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
-    [DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY]: false,
 };
 
 class SettingsManager {

package/dist/utils/constants.ts

@@ -127,5 +127,3 @@ export const USE_BACKEND_PARAMS_FOR_TABLES_KEY = 'useBackendParamsForTables';
 
 // Enable schema that supports multiple resultsets
 export const QUERY_USE_MULTI_SCHEMA_KEY = 'queryUseMultiSchema';
-
-export const DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY = 'displayChartsInDbDiagnostics';

package/dist/utils/hooks/useTableResize.ts

@@ -0,0 +1,53 @@
+import {useCallback, useState} from 'react';
+import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
+import type {Column as VirtualTableColumn} from '../../components/VirtualTable';
+import {settingsManager} from '../../services/settings';
+
+export type Column<T> = VirtualTableColumn<T> & DataTableColumn<T>;
+
+export type TableColumnsWidthSetup = Record<string, number>;
+
+export type HandleTableColumnsResize = (newSetup: TableColumnsWidthSetup) => void;
+
+export const updateColumnsWidth = <T>(
+    columns: Column<T>[],
+    columnsWidthSetup: TableColumnsWidthSetup,
+) => {
+    return columns.map((column) => {
+        if (!column.resizeable) {
+            return column;
+        }
+        return {...column, width: columnsWidthSetup[column.name] ?? column.width};
+    });
+};
+
+export const useTableResize = (
+    localStorageKey: string,
+): [TableColumnsWidthSetup, HandleTableColumnsResize] => {
+    const [tableColumnsWidthSetup, setTableColumnsWidth] = useState<TableColumnsWidthSetup>(() => {
+        const setupFromLS = settingsManager.readUserSettingsValue(
+            localStorageKey,
+            {},
+        ) as TableColumnsWidthSetup;
+
+        return setupFromLS;
+    });
+
+    const handleSetupChange: HandleTableColumnsResize = useCallback(
+        (newSetup) => {
+            setTableColumnsWidth((previousSetup) => {
+                // ResizeObserver callback may be triggered only for currently resized column
+                // or for the whole set of columns
+                const setup = {
+                    ...previousSetup,
+                    ...newSetup,
+                };
+                settingsManager.setUserSettingsValue(localStorageKey, setup);
+                return setup;
+            });
+        },
+        [localStorageKey],
+    );
+
+    return [tableColumnsWidthSetup, handleSetupChange];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.32.0",
+  "version": "4.33.0",
   "files": [
     "dist"
   ],