ydb-embedded-ui 4.16.1 → 4.17.0

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

@@ -0,0 +1,155 @@
+import cn from 'bem-cn-lite';
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+
+import {Loader} from '@gravity-ui/uikit';
+
+import {InfoViewer} from '../../../../components/InfoViewer';
+import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
+import {Tablet} from '../../../../components/Tablet';
+import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+import {formatCPU} from '../../../../utils';
+import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
+import {bytesToGB} from '../../../../utils/utils';
+import {mapDatabaseTypeToDBName} from '../../utils/schema';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import type {ETabletVolatileState} from '../../../../types/api/tenant';
+import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
+import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
+
+import i18n from './i18n';
+import './TenantOverview.scss';
+
+const b = cn('tenant-overview');
+
+interface OldTenantOverviewProps {
+    tenantName: string;
+    additionalTenantProps?: AdditionalTenantsProps;
+}
+
+export function OldTenantOverview({tenantName, additionalTenantProps}: OldTenantOverviewProps) {
+    const {tenant, loading, wasLoaded} = useTypedSelector((state) => state.tenant);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const dispatch = useDispatch();
+    const fetchTenant = useCallback(
+        (isBackground = true) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+            dispatch(getTenantInfo({path: tenantName}));
+        },
+        [dispatch, tenantName],
+    );
+
+    useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
+
+    const {
+        Metrics = {},
+        PoolStats,
+        StateStats = [],
+        MemoryUsed,
+        Name,
+        State,
+        CoresUsed,
+        StorageGroups,
+        StorageAllocatedSize,
+        Type,
+        SystemTablets,
+    } = tenant || {};
+
+    const tenantType = mapDatabaseTypeToDBName(Type);
+    const memoryRaw = MemoryUsed ?? Metrics.Memory;
+
+    const memory = (memoryRaw && bytesToGB(memoryRaw)) || i18n('no-data');
+    const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || i18n('no-data');
+    const storageGroups = StorageGroups ?? i18n('no-data');
+    const blobStorage =
+        (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || i18n('no-data');
+    const storageEfficiency =
+        Metrics.Storage && StorageAllocatedSize
+            ? `${((parseInt(Metrics.Storage) * 100) / parseInt(StorageAllocatedSize)).toFixed(2)}%`
+            : i18n('no-data');
+
+    const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
+
+    const cpu = formatCPU(cpuRaw);
+
+    const metricsInfo = [
+        {label: 'Type', value: Type},
+        {label: 'Memory', value: memory},
+        {label: 'CPU', value: cpu},
+        {label: 'Tablet storage', value: storage},
+        {label: 'Storage groups', value: storageGroups},
+        {label: 'Blob storage', value: blobStorage},
+        {label: 'Storage efficiency', value: storageEfficiency},
+    ];
+
+    const tabletsInfo = StateStats.filter(
+        (item): item is {VolatileState: ETabletVolatileState; Count: number} => {
+            return item.VolatileState !== undefined && item.Count !== undefined;
+        },
+    ).map((info) => {
+        return {label: TABLET_STATES[info.VolatileState], value: info.Count};
+    });
+
+    const renderName = () => {
+        return (
+            <div className={b('tenant-name-wrapper')}>
+                <EntityStatus
+                    status={State}
+                    name={Name || TENANT_DEFAULT_TITLE}
+                    withLeftTrim
+                    hasClipboardButton={Boolean(tenant)}
+                    clipboardButtonAlwaysVisible
+                />
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('top-label')}>{tenantType}</div>
+            <div className={b('top')}>
+                {renderName()}
+                {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
+            </div>
+            <div className={b('system-tablets')}>
+                {SystemTablets &&
+                    SystemTablets.map((tablet, tabletIndex) => (
+                        <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
+                    ))}
+            </div>
+            <div className={b('common-info')}>
+                <div>
+                    <div className={b('section-title')}>{i18n('title.pools')}</div>
+                    {PoolStats ? (
+                        <div className={b('section', {pools: true})}>
+                            {PoolStats.map((pool, poolIndex) => (
+                                <PoolUsage key={poolIndex} data={pool} />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="error">{i18n('no-pools-data')}</div>
+                    )}
+                </div>
+                <InfoViewer
+                    title={i18n('title.metrics')}
+                    className={b('section', {metrics: true})}
+                    info={metricsInfo}
+                />
+
+                <div className={b('section')}>
+                    <InfoViewer info={tabletsInfo} title="Tablets" />
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -1,7 +1,6 @@
-@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
-
 .tenant-overview {
     padding-bottom: 20px;
+
     &__loader {
         display: flex;
         justify-content: center;
@@ -22,10 +21,10 @@
     }
 
     &__top-label {
-        margin-bottom: detailedOverview.$section-title-margin;
+        margin-bottom: var(--diagnostics-section-title-margin);
 
         font-weight: 600;
-        line-height: detailedOverview.$section-title-line-height;
+        line-height: 24px;
         gap: 10px;
     }
 
@@ -50,7 +49,6 @@
         font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
         line-height: var(--yc-text-body-2-line-height);
-        //text-transform: uppercase;
     }
 
     &__section {

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

@@ -4,18 +4,17 @@ import {useDispatch} from 'react-redux';
 
 import {Loader} from '@gravity-ui/uikit';
 
-import {InfoViewer} from '../../../../components/InfoViewer';
-import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
-import {Tablet} from '../../../../components/Tablet';
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
-import {formatCPU} from '../../../../utils';
-import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
-import {bytesToGB} from '../../../../utils/utils';
+import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
+import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-import type {ETabletVolatileState} from '../../../../types/api/tenant';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
+import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
+import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
+import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
+import {useHealthcheck} from './useHealthcheck';
 
 import i18n from './i18n';
 import './TenantOverview.scss';
@@ -24,13 +23,30 @@ const b = cn('tenant-overview');
 
 interface TenantOverviewProps {
     tenantName: string;
-    additionalTenantInfo?: AdditionalTenantsProps;
+    additionalTenantProps?: AdditionalTenantsProps;
 }
 
-export function TenantOverview({tenantName, additionalTenantInfo}: TenantOverviewProps) {
-    const {tenant, loading, wasLoaded} = useTypedSelector((state) => state.tenant);
-    const {autorefresh} = useTypedSelector((state) => state.schema);
+export function TenantOverview({tenantName, additionalTenantProps}: TenantOverviewProps) {
     const dispatch = useDispatch();
+
+    const {
+        tenant,
+        loading: tenantLoading,
+        wasLoaded: tenantWasLoaded,
+        metricsTab,
+    } = useTypedSelector((state) => state.tenant);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {
+        issueTrees,
+        issuesStatistics,
+        selfCheckResult,
+        fetchHealthcheck,
+        loading: healthcheckLoading,
+        wasLoaded: healthCheckWasLoaded,
+        error: healthcheckError,
+    } = useHealthcheck(tenantName);
+
     const fetchTenant = useCallback(
         (isBackground = true) => {
             if (!isBackground) {
@@ -41,56 +57,30 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
         [dispatch, tenantName],
     );
 
-    useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
+    useAutofetcher(
+        (isBackground) => {
+            fetchTenant(isBackground);
+            fetchHealthcheck(isBackground);
+        },
+        [fetchTenant, fetchHealthcheck],
+        autorefresh,
+    );
 
-    const {
-        Metrics = {},
-        PoolStats,
-        StateStats = [],
-        MemoryUsed,
-        Name,
-        State,
-        CoresUsed,
-        StorageGroups,
-        StorageAllocatedSize,
-        Type,
-        SystemTablets,
-    } = tenant || {};
+    const {Name, State, Type} = tenant || {};
 
     const tenantType = mapDatabaseTypeToDBName(Type);
-    const memoryRaw = MemoryUsed ?? Metrics.Memory;
-
-    const memory = (memoryRaw && bytesToGB(memoryRaw)) || i18n('no-data');
-    const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || i18n('no-data');
-    const storageGroups = StorageGroups ?? i18n('no-data');
-    const blobStorage =
-        (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || i18n('no-data');
-    const storageEfficiency =
-        Metrics.Storage && StorageAllocatedSize
-            ? `${((parseInt(Metrics.Storage) * 100) / parseInt(StorageAllocatedSize)).toFixed(2)}%`
-            : i18n('no-data');
-
-    const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
-
-    const cpu = formatCPU(cpuRaw);
-
-    const metricsInfo = [
-        {label: 'Type', value: Type},
-        {label: 'Memory', value: memory},
-        {label: 'CPU', value: cpu},
-        {label: 'Tablet storage', value: storage},
-        {label: 'Storage groups', value: storageGroups},
-        {label: 'Blob storage', value: blobStorage},
-        {label: 'Storage efficiency', value: storageEfficiency},
-    ];
-
-    const tabletsInfo = StateStats.filter(
-        (item): item is {VolatileState: ETabletVolatileState; Count: number} => {
-            return item.VolatileState !== undefined && item.Count !== undefined;
-        },
-    ).map((info) => {
-        return {label: TABLET_STATES[info.VolatileState], value: info.Count};
-    });
+
+    const {cpu, storage, memory, cpuLimit, storageLimit, memoryLimit} =
+        calculateTenantMetrics(tenant);
+
+    const calculatedMetrics: TenantMetrics = {
+        memoryUsed: memory,
+        memoryLimit,
+        cpuUsed: cpu,
+        cpuLimit,
+        storageUsed: storage,
+        storageLimit,
+    };
 
     const renderName = () => {
         return (
@@ -106,7 +96,27 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
         );
     };
 
-    if (loading && !wasLoaded) {
+    const renderTabContent = () => {
+        switch (metricsTab) {
+            case TENANT_METRICS_TABS_IDS.cpu: {
+                return i18n('label.under-development');
+            }
+            case TENANT_METRICS_TABS_IDS.storage: {
+                return i18n('label.under-development');
+            }
+            case TENANT_METRICS_TABS_IDS.memory: {
+                return i18n('label.under-development');
+            }
+            case TENANT_METRICS_TABS_IDS.healthcheck: {
+                return <HealthcheckDetails issueTrees={issueTrees} error={healthcheckError} />;
+            }
+            default: {
+                return undefined;
+            }
+        }
+    };
+
+    if ((tenantLoading && !tenantWasLoaded) || (healthcheckLoading && !healthCheckWasLoaded)) {
         return (
             <div className={b('loader')}>
                 <Loader size="m" />
@@ -119,37 +129,17 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
             <div className={b('top-label')}>{tenantType}</div>
             <div className={b('top')}>
                 {renderName()}
-                {additionalTenantInfo?.getMonitoringLink?.(Name, Type)}
-            </div>
-            <div className={b('system-tablets')}>
-                {SystemTablets &&
-                    SystemTablets.map((tablet, tabletIndex) => (
-                        <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
-                    ))}
-            </div>
-            <div className={b('common-info')}>
-                <div>
-                    <div className={b('section-title')}>{i18n('title.pools')}</div>
-                    {PoolStats ? (
-                        <div className={b('section', {pools: true})}>
-                            {PoolStats.map((pool, poolIndex) => (
-                                <PoolUsage key={poolIndex} data={pool} />
-                            ))}
-                        </div>
-                    ) : (
-                        <div className="error">{i18n('no-pools-data')}</div>
-                    )}
-                </div>
-                <InfoViewer
-                    title={i18n('title.metrics')}
-                    className={b('section', {metrics: true})}
-                    info={metricsInfo}
-                />
-
-                <div className={b('section')}>
-                    <InfoViewer info={tabletsInfo} title="Tablets" />
-                </div>
+                {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
             </div>
+            <MetricsCards
+                metrics={calculatedMetrics}
+                issuesStatistics={issuesStatistics}
+                selfCheckResult={selfCheckResult}
+                fetchHealthcheck={fetchHealthcheck}
+                healthcheckLoading={healthcheckLoading}
+                healthcheckError={healthcheckError}
+            />
+            {renderTabContent()}
         </div>
     );
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -3,5 +3,7 @@
   "no-pools-data": "No pools data",
 
   "title.pools": "Pools",
-  "title.metrics": "Metrics"
+  "title.metrics": "Metrics",
+
+  "label.under-development": "This section is under development"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -3,5 +3,7 @@
   "no-pools-data": "Нет данных о пулах",
 
   "title.pools": "Пулы",
-  "title.metrics": "Метрики"
+  "title.metrics": "Метрики",
+
+  "label.under-development": "Этот раздел находится в разработке"
 }

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

@@ -0,0 +1,53 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+
+import {
+    getHealthcheckInfo,
+    selectIssuesStatistics,
+    selectIssuesTrees,
+    setDataWasNotLoaded,
+} from '../../../../store/reducers/healthcheckInfo';
+import type {IIssuesTree} from '../../../../types/store/healthcheck';
+import {type StatusFlag, SelfCheckResult} from '../../../../types/api/healthcheck';
+import type {IResponseError} from '../../../../types/api/error';
+import {useTypedSelector} from '../../../../utils/hooks/useTypedSelector';
+
+interface HealthcheckParams {
+    issueTrees: IIssuesTree[];
+    issuesStatistics: [StatusFlag, number][];
+    fetchHealthcheck: (isBackground?: boolean) => void;
+    loading: boolean;
+    wasLoaded: boolean;
+    error?: IResponseError;
+    selfCheckResult: SelfCheckResult;
+}
+
+export const useHealthcheck = (tenantName: string): HealthcheckParams => {
+    const dispatch = useDispatch();
+
+    const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
+    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
+    const issuesStatistics = useTypedSelector(selectIssuesStatistics);
+    const issueTrees = useTypedSelector(selectIssuesTrees);
+
+    const fetchHealthcheck = useCallback(
+        (isBackground = true) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getHealthcheckInfo(tenantName));
+        },
+        [dispatch, tenantName],
+    );
+
+    return {
+        issueTrees,
+        issuesStatistics,
+        fetchHealthcheck,
+        loading,
+        wasLoaded,
+        error,
+        selfCheckResult,
+    };
+};

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -19,8 +19,8 @@ const b = cn('object-general');
 
 interface ObjectGeneralProps {
     type?: EPathType;
-    additionalTenantInfo?: AdditionalTenantsProps;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalTenantProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
 }
 
 function ObjectGeneral(props: ObjectGeneralProps) {
@@ -33,7 +33,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     const {name: tenantName, tenantPage = initialPage} = queryParams;
 
     const renderTabContent = () => {
-        const {type, additionalTenantInfo, additionalNodesInfo} = props;
+        const {type, additionalTenantProps, additionalNodesProps} = props;
         switch (tenantPage) {
             case TENANT_PAGES_IDS.query: {
                 return <Query path={tenantName as string} theme={theme} type={type} />;
@@ -42,8 +42,8 @@ function ObjectGeneral(props: ObjectGeneralProps) {
                 return (
                     <Diagnostics
                         type={type}
-                        additionalTenantInfo={additionalTenantInfo}
-                        additionalNodesInfo={additionalNodesInfo}
+                        additionalTenantProps={additionalTenantProps}
+                        additionalNodesProps={additionalNodesProps}
                     />
                 );
             }

package/dist/containers/Tenant/Tenant.tsx

@@ -38,8 +38,8 @@ const initialTenantSummaryState = {
 };
 
 interface TenantProps {
-    additionalTenantInfo?: AdditionalTenantsProps;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalTenantProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
 }
 
 function Tenant(props: TenantProps) {
@@ -125,8 +125,8 @@ function Tenant(props: TenantProps) {
                     />
                     <ObjectGeneral
                         type={preloadedPathType || currentPathType}
-                        additionalTenantInfo={props.additionalTenantInfo}
-                        additionalNodesInfo={props.additionalNodesInfo}
+                        additionalTenantProps={props.additionalTenantProps}
+                        additionalNodesProps={props.additionalNodesProps}
                     />
                 </SplitPane>
             )}

package/dist/containers/Tenant/TenantPages.tsx

@@ -5,6 +5,7 @@ export const TenantTabsGroups = {
     summaryTab: 'summaryTab',
     queryTab: 'queryTab',
     diagnosticsTab: 'diagnosticsTab',
+    metricsTab: 'metricsTab',
 } as const;
 
 export const TENANT_INFO_TABS = [

package/dist/containers/Tenant/utils/queryTemplates.ts

@@ -69,42 +69,42 @@ export const createTopicTemplate = (path: string) => {
     return `-- docs: https://ydb.tech/en/docs/yql/reference/syntax/create_topic
 CREATE TOPIC \`${path}/my_topic\` (
     CONSUMER consumer1,
-    CONSUMER consumer2 WITH (read_from = Datetime('2022-12-01T12:13:22Z')) -- Sets up the message write time starting from which the consumer will receive data.
+    CONSUMER consumer2 WITH (read_from = Datetime('1970-01-01T00:00:00Z')) -- Sets up the message write time starting from which the consumer will receive data.
                                                                            -- Value type: Datetime OR Timestamp OR integer (unix-timestamp in the numeric format). 
                                                                            -- Default value: now
 ) WITH (
-    min_active_partitions = 5, -- Minimum number of topic partitions.
-    partition_count_limit = 10, -- Maximum number of active partitions in the topic. 0 is interpreted as unlimited.
-    retention_period = Interval('PT12H'), -- Data retention period in the topic. Value type: Interval, default value: 18h.
-    retention_storage_mb = 1, -- Limit on the maximum disk space occupied by the topic data. 
+    min_active_partitions = 1, -- Minimum number of topic partitions.
+    partition_count_limit = 0, -- Maximum number of active partitions in the topic. 0 is interpreted as unlimited.
+    retention_period = Interval('PT18H'), -- Data retention period in the topic. Value type: Interval.
+    retention_storage_mb = 0, -- Limit on the maximum disk space occupied by the topic data. 
                               -- When this value is exceeded, the older data is cleared, like under a retention policy. 
                               -- 0 is interpreted as unlimited.
-    partition_write_speed_bytes_per_second = 2097152, -- Maximum allowed write speed per partition.
-    partition_write_burst_bytes = 2097152 -- Write quota allocated for write bursts. 
-                                          -- When set to zero, the actual write_burst value is equalled to 
-                                          -- the quota value (this allows write bursts of up to one second).
+    partition_write_speed_bytes_per_second = 1048576, -- Maximum allowed write speed per partition.
+    partition_write_burst_bytes = 0 -- Write quota allocated for write bursts. 
+                                    -- When set to zero, the actual write_burst value is equalled to 
+                                    -- the quota value (this allows write bursts of up to one second).
 );`;
 };
 
 export const alterTopicTemplate = (path: string) => {
     return `-- docs: https://ydb.tech/en/docs/yql/reference/syntax/alter_topic
 ALTER TOPIC \`${path}\`
-    ADD CONSUMER new_consumer WITH (read_from = 0), -- Sets up the message write time starting from which the consumer will receive data.
-                                                    -- Value type: Datetime OR Timestamp OR integer (unix-timestamp in the numeric format).
-                                                    -- Default value: now
-    ALTER CONSUMER consumer1 SET (read_from = Datetime('2023-12-01T12:13:22Z')),
+    ADD CONSUMER new_consumer WITH (read_from = Datetime('1970-01-01T00:00:00Z')), -- Sets up the message write time starting from which the consumer will receive data.
+                                                                                   -- Value type: Datetime OR Timestamp OR integer (unix-timestamp in the numeric format).
+                                                                                   -- Default value: now
+    ALTER CONSUMER consumer1 SET (read_from = Datetime('1970-01-01T00:00:00Z')),
     DROP CONSUMER consumer2,
     SET (
-        min_active_partitions = 10, -- Minimum number of topic partitions.
-        partition_count_limit = 15, -- Maximum number of active partitions in the topic. 0 is interpreted as unlimited.
-        retention_period = Interval('PT36H'), -- Data retention period in the topic. Value type: Interval, default value: 18h.
-        retention_storage_mb = 10, -- Limit on the maximum disk space occupied by the topic data. 
-                                   -- When this value is exceeded, the older data is cleared, like under a retention policy. 
-                                   -- 0 is interpreted as unlimited.
-        partition_write_speed_bytes_per_second = 3145728, -- Maximum allowed write speed per partition.
-        partition_write_burst_bytes = 1048576 -- Write quota allocated for write bursts. 
-                                              -- When set to zero, the actual write_burst value is equalled to
-                                              -- the quota value (this allows write bursts of up to one second).
+        min_active_partitions = 1, -- Minimum number of topic partitions.
+        partition_count_limit = 0, -- Maximum number of active partitions in the topic. 0 is interpreted as unlimited.
+        retention_period = Interval('PT18H'), -- Data retention period in the topic. Value type: Interval.
+        retention_storage_mb = 0, -- Limit on the maximum disk space occupied by the topic data. 
+                                  -- When this value is exceeded, the older data is cleared, like under a retention policy. 
+                                  -- 0 is interpreted as unlimited.
+        partition_write_speed_bytes_per_second = 1048576, -- Maximum allowed write speed per partition.
+        partition_write_burst_bytes = 0 -- Write quota allocated for write bursts. 
+                                        -- When set to zero, the actual write_burst value is equalled to
+                                        -- the quota value (this allows write bursts of up to one second).
     );`;
 };
 

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

@@ -23,5 +23,8 @@
   "settings.useBackendParamsForTables.popover": "Filter and sort Nodes and Storage tables with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions"
+  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",
+
+  "settings.tenantDiagnostics.title": "Enable new database diagnostics design",
+  "settings.tenantDiagnostics.popover": "Adds indicators of database resources usage. Incomplete data may be displayed for some databases"
 }

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

@@ -23,5 +23,8 @@
   "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблиц Nodes и Storage с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях"
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",
+
+  "settings.tenantDiagnostics.title": "Включить новый дизайн для диагностики баз данных",
+  "settings.tenantDiagnostics.popover": "Добавляет индикаторы использования ресурсов базы данных. Для некоторых баз могут отображаться неполные данные"
 }

package/dist/containers/UserSettings/settings.ts

@@ -5,6 +5,7 @@ import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
     ENABLE_ADDITIONAL_QUERY_MODES,
+    ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
     THEME_KEY,
@@ -94,6 +95,11 @@ export const enableQueryModesForExplainSetting: SettingProps = {
     title: i18n('settings.enableAdditionalQueryModes.title'),
     helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
 };
+export const enableNewTenantDiagnosticsDesign: SettingProps = {
+    settingKey: ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
+    title: i18n('settings.tenantDiagnostics.title'),
+    helpPopoverContent: i18n('settings.tenantDiagnostics.popover'),
+};
 
 export const generalSection: SettingsSection = {
     id: 'generalSection',
@@ -108,6 +114,7 @@ export const experimentsSection: SettingsSection = {
         useNodesEndpointSetting,
         useBackendParamsForTables,
         enableQueryModesForExplainSetting,
+        enableNewTenantDiagnosticsDesign,
     ],
 };