ydb-embedded-ui 4.31.2 → 4.33.0

package/dist/containers/Node/Node.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import {useLocation, useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
@@ -8,7 +8,7 @@ import {Link} from 'react-router-dom';
 
 import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
 import {Tablets} from '../Tablets';
-import {Storage} from '../Storage/Storage';
+import {StorageWrapper} from '../Storage/StorageWrapper';
 import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
@@ -38,6 +38,8 @@ interface NodeProps {
 }
 
 function Node(props: NodeProps) {
+    const container = useRef<HTMLDivElement>(null);
+
     const dispatch = useDispatch();
     const location = useLocation();
 
@@ -50,7 +52,7 @@ function Node(props: NodeProps) {
     const {id: nodeId, activeTab} = match.params;
     const {tenantName: tenantNameFromQuery} = parseQuery(location);
 
-    const {activeTabVerified, nodeTabs} = React.useMemo(() => {
+    const {activeTabVerified, nodeTabs} = useMemo(() => {
         const hasStorage = node?.Roles?.find((el) => el === STORAGE_ROLE);
 
         let actualActiveTab = activeTab;
@@ -69,7 +71,7 @@ function Node(props: NodeProps) {
         return {activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs};
     }, [activeTab, node]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         const tenantName = node?.Tenants?.[0] || tenantNameFromQuery?.toString();
 
         dispatch(
@@ -81,7 +83,7 @@ function Node(props: NodeProps) {
         );
     }, [dispatch, node, nodeId, tenantNameFromQuery]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         const fetchData = () => dispatch(getNodeInfo(nodeId));
         fetchData();
         autofetcher.start();
@@ -119,7 +121,7 @@ function Node(props: NodeProps) {
             case STORAGE: {
                 return (
                     <div className={b('storage')}>
-                        <Storage nodeId={nodeId} />
+                        <StorageWrapper nodeId={nodeId} parentContainer={container.current} />
                     </div>
                 );
             }
@@ -146,7 +148,7 @@ function Node(props: NodeProps) {
     } else {
         if (node) {
             return (
-                <div className={b(null, props.className)}>
+                <div className={b(null, props.className)} ref={container}>
                     <BasicNodeViewer
                         node={node}
                         additionalNodesProps={props.additionalNodesProps}

package/dist/containers/Nodes/NodesWrapper.tsx

@@ -6,6 +6,7 @@ import {VirtualNodes} from './VirtualNodes';
 import {Nodes} from './Nodes';
 
 interface NodesWrapperProps {
+    path?: string;
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }

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';
@@ -38,26 +39,30 @@ import './Nodes.scss';
 const b = cn('ydb-nodes');
 
 interface NodesProps {
+    path?: string;
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }
 
-export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps) => {
+export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: NodesProps) => {
     const [searchValue, setSearchValue] = useState('');
     const [problemFilter, setProblemFilter] = useState<ProblemFilterValue>(ProblemFilterValues.ALL);
     const [uptimeFilter, setUptimeFilter] = useState<NodesUptimeFilterValues>(
         NodesUptimeFilterValues.All,
     );
 
+    const [tableColumnsWidthSetup, setTableColumnsWidth] = useTableResize('nodesTableColumnsWidth');
+
     const filters = useMemo(() => {
-        return [searchValue, problemFilter, uptimeFilter];
-    }, [searchValue, problemFilter, uptimeFilter]);
+        return [path, searchValue, problemFilter, uptimeFilter];
+    }, [path, searchValue, problemFilter, uptimeFilter]);
 
     const fetchData = useCallback<FetchData<NodesPreparedEntity>>(
         async (limit, offset, {sortOrder, columnId} = {}) => {
             return await getNodes({
                 limit,
                 offset,
+                path,
                 filter: searchValue,
                 problems_only: getProblemParamValue(problemFilter),
                 uptime: getUptimeParamValue(uptimeFilter),
@@ -65,7 +70,7 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps
                 sortValue: columnId as NodesSortValue,
             });
         },
-        [problemFilter, searchValue, uptimeFilter],
+        [path, problemFilter, searchValue, uptimeFilter],
     );
 
     const getRowClassName: GetRowClassName<NodesPreparedEntity> = (row) => {
@@ -116,7 +121,7 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps
         getNodeRef: additionalNodesProps?.getNodeRef,
     });
 
-    const columns = rawColumns.map((column) => {
+    const columns = updateColumnsWidth(rawColumns, tableColumnsWidthSetup).map((column) => {
         return {...column, sortable: isSortableNodesProperty(column.name)};
     });
 
@@ -131,6 +136,7 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps
             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/Diagnostics.scss

@@ -45,7 +45,8 @@
                 padding-top: 0;
             }
 
-            .data-table__sticky_moving {
+            .data-table__sticky_moving,
+            .ydb-virtual-table__head {
                 top: 46px !important;
             }
         }

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

@@ -1,4 +1,4 @@
-import {useMemo} from 'react';
+import {useMemo, useRef} from 'react';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
@@ -20,8 +20,8 @@ import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/consta
 import {Loader} from '../../../components/Loader';
 
 import {Heatmap} from '../../Heatmap';
-import {Nodes} from '../../Nodes';
-import {Storage} from '../../Storage/Storage';
+import {NodesWrapper} from '../../Nodes/NodesWrapper';
+import {StorageWrapper} from '../../Storage/StorageWrapper';
 import {Tablets} from '../../Tablets';
 
 import Describe from './Describe/Describe';
@@ -49,6 +49,8 @@ interface DiagnosticsProps {
 const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
+    const container = useRef<HTMLDivElement>(null);
+
     const dispatch = useDispatch();
     const {currentSchemaPath, autorefresh, wasLoaded} = useSelector((state: any) => state.schema);
     const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
@@ -121,9 +123,10 @@ function Diagnostics(props: DiagnosticsProps) {
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
                 return (
-                    <Nodes
+                    <NodesWrapper
                         path={currentSchemaPath}
                         additionalNodesProps={props.additionalNodesProps}
+                        parentContainer={container.current}
                     />
                 );
             }
@@ -131,7 +134,9 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Tablets path={currentSchemaPath} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
-                return <Storage tenant={tenantNameString} />;
+                return (
+                    <StorageWrapper tenant={tenantNameString} parentContainer={container.current} />
+                );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return <Network path={tenantNameString} />;
@@ -196,7 +201,7 @@ function Diagnostics(props: DiagnosticsProps) {
     }
 
     return (
-        <div className={b()}>
+        <div className={b()} ref={container}>
             {renderTabs()}
             <div className={b('page-wrapper')}>{renderTabContent()}</div>
         </div>

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

@@ -19,12 +19,9 @@
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It could return incorrect data on some versions",
 
-  "settings.useVirtualTables.title": "Use table with data load on scroll for Nodes and Storage cluster tabs",
+  "settings.useVirtualTables.title": "Use table with data load on scroll for Nodes and Storage tabs",
   "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

@@ -19,12 +19,9 @@
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на некоторых версиях",
 
-  "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage кластера",
+  "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage",
   "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';