ydb-embedded-ui 4.33.0 → 5.1.0

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { StringParam, useQueryParam } from 'use-query-params';
+import { cn } from '../../../../../utils/cn';
+import { useTypedSelector } from '../../../../../utils/hooks';
+import { TimeFrameSelector } from '../../../../../components/TimeFrameSelector/TimeFrameSelector';
+import { MetricChart, } from '../../../../../components/MetricChart';
+import './TenantDashboard.scss';
+const CHART_WIDTH = 428;
+const CHART_WIDTH_FULL = 872;
+const b = cn('ydb-tenant-dashboard');
+export const TenantDashboard = ({ charts }) => {
+    const [isDashboardHidden, setIsDashboardHidden] = useState(true);
+    const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    // Refetch data only if dashboard successfully loaded
+    const shouldRefresh = autorefresh && !isDashboardHidden;
+    /**
+     * 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) => {
+        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;
+    const chartHeight = CHART_WIDTH / 1.5;
+    const renderContent = () => {
+        return charts.map((chartConfig) => {
+            const chartId = chartConfig.metrics.map(({ target }) => target).join('&');
+            return (_jsx(MetricChart, { title: chartConfig.title, metrics: chartConfig.metrics, timeFrame: timeFrame, chartOptions: chartConfig.options, autorefresh: shouldRefresh, width: chartWidth, height: chartHeight, onChartDataStatusChange: handleChartDataStatusChange, isChartVisible: !isDashboardHidden }, chartId));
+        });
+    };
+    return (_jsxs("div", Object.assign({ className: b(null), style: { display: isDashboardHidden ? 'none' : undefined } }, { children: [_jsx("div", Object.assign({ className: b('controls') }, { children: _jsx(TimeFrameSelector, { value: timeFrame, onChange: setTimeframe }) })), _jsx("div", Object.assign({ className: b('charts') }, { children: renderContent() }))] })));
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface TenantMemoryProps {
+    path: string;
+}
+export declare function TenantMemory({ path }: TenantMemoryProps): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
+import { memoryDashboardConfig } from './memoryDashboardConfig';
+import { TopNodesByMemory } from './TopNodesByMemory';
+export function TenantMemory({ path }) {
+    return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { charts: memoryDashboardConfig }), _jsx(TopNodesByMemory, { path: path })] }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AdditionalNodesProps } from '../../../../../types/additionalProps';
+interface TopNodesByMemoryProps {
+    path: string;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+export declare function TopNodesByMemory({ path, additionalNodesProps }: TopNodesByMemoryProps): JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import { useCallback } from 'react';
+import { useAutofetcher, useTypedSelector, useSearchQuery } from '../../../../../utils/hooks';
+import { getTopNodesByMemory, selectTopNodesByMemory, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { getTopNodesByMemoryColumns } from '../../../../Nodes/getNodesColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopNodesByMemory({ path, additionalNodesProps }) {
+    const dispatch = useDispatch();
+    const query = useSearchQuery();
+    const { wasLoaded, loading, error } = useTypedSelector((state) => state.topNodesByMemory);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const topNodes = useTypedSelector(selectTopNodesByMemory);
+    const columns = getTopNodesByMemoryColumns({
+        getNodeRef: additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef,
+    });
+    const fetchNodes = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(getTopNodesByMemory({ tenant: path }));
+    }, [dispatch, path]);
+    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-memory'),
+        link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes })),
+    });
+    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/memoryDashboardConfig.d.ts

@@ -0,0 +1,2 @@
+import type { ChartConfig } from '../TenantDashboard/TenantDashboard';
+export declare const memoryDashboardConfig: ChartConfig[];

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/memoryDashboardConfig.js

@@ -0,0 +1,15 @@
+import i18n from '../i18n';
+export const memoryDashboardConfig = [
+    {
+        title: i18n('charts.memory-usage'),
+        metrics: [
+            {
+                target: 'resources.memory.used_bytes',
+                title: i18n('charts.memory-usage'),
+            },
+        ],
+        options: {
+            dataType: 'size',
+        },
+    },
+];

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../../../types/additionalProps';
+import './TenantOverview.scss';
+interface TenantOverviewProps {
+    tenantName: string;
+    additionalTenantProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+export declare function TenantOverview({ tenantName, additionalTenantProps, additionalNodesProps, }: TenantOverviewProps): JSX.Element;
+export {};

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { Loader } from '@gravity-ui/uikit';
+import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+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 { getTenantInfo, setDataWasNotLoaded } from '../../../../store/reducers/tenant/tenant';
+import { calculateTenantMetrics } from '../../../../store/reducers/tenants/utils';
+import { TenantCpu } from './TenantCpu/TenantCpu';
+import { HealthcheckDetails } from './Healthcheck/HealthcheckDetails';
+import { MetricsCards } from './MetricsCards/MetricsCards';
+import { TenantStorage } from './TenantStorage/TenantStorage';
+import { TenantMemory } from './TenantMemory/TenantMemory';
+import { DefaultOverviewContent } from './DefaultOverviewContent/DefaultOverviewContent';
+import { useHealthcheck } from './useHealthcheck';
+import './TenantOverview.scss';
+import { b } from './utils';
+export function TenantOverview({ tenantName, additionalTenantProps, additionalNodesProps, }) {
+    var _a;
+    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) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(getTenantInfo({ path: tenantName }));
+    }, [dispatch, tenantName]);
+    useAutofetcher((isBackground) => {
+        fetchTenant(isBackground);
+        fetchHealthcheck(isBackground);
+    }, [fetchTenant, fetchHealthcheck], autorefresh);
+    const { Name, State, Type } = tenant || {};
+    const tenantType = mapDatabaseTypeToDBName(Type);
+    const { cpu, blobStorage, tabletStorage, memory, cpuUsage, blobStorageLimit, tabletStorageLimit, memoryLimit, } = calculateTenantMetrics(tenant);
+    // If there is table storage limit (data_size_hard_quota),
+    // use it for metric card instead of blob storage limit
+    // When datasize exceeds or equals to quota
+    // all write operations to the database are finished with error
+    const isTabletStorageLimitSet = tabletStorageLimit && tabletStorageLimit > 0;
+    const storageUsed = isTabletStorageLimitSet ? tabletStorage : blobStorage;
+    const storageLimit = isTabletStorageLimitSet ? tabletStorageLimit : blobStorageLimit;
+    const calculatedMetrics = {
+        memoryUsed: memory,
+        memoryLimit,
+        cpuUsed: cpu,
+        cpuUsage,
+        storageUsed,
+        storageLimit,
+    };
+    const storageMetrics = {
+        blobStorageUsed: blobStorage,
+        blobStorageLimit,
+        tabletStorageUsed: tabletStorage,
+        tabletStorageLimit,
+    };
+    const renderName = () => {
+        return (_jsx("div", Object.assign({ className: b('tenant-name-wrapper') }, { children: _jsx(EntityStatus, { status: State, name: Name || TENANT_DEFAULT_TITLE, withLeftTrim: true, hasClipboardButton: Boolean(tenant), clipboardButtonAlwaysVisible: true }) })));
+    };
+    const renderTabContent = () => {
+        switch (metricsTab) {
+            case TENANT_METRICS_TABS_IDS.cpu: {
+                return _jsx(TenantCpu, { path: tenantName, additionalNodesProps: additionalNodesProps });
+            }
+            case TENANT_METRICS_TABS_IDS.storage: {
+                return _jsx(TenantStorage, { tenantName: tenantName, metrics: storageMetrics });
+            }
+            case TENANT_METRICS_TABS_IDS.memory: {
+                return _jsx(TenantMemory, { path: tenantName });
+            }
+            case TENANT_METRICS_TABS_IDS.healthcheck: {
+                return (_jsx(HealthcheckDetails, { issueTrees: issueTrees, loading: healthcheckLoading, wasLoaded: healthCheckWasLoaded, error: healthcheckError }));
+            }
+            default: {
+                return _jsx(DefaultOverviewContent, {});
+            }
+        }
+    };
+    if (tenantLoading && !tenantWasLoaded) {
+        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
+    }
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('info') }, { children: [_jsx("div", Object.assign({ className: b('top-label') }, { children: tenantType })), _jsxs("div", Object.assign({ className: b('top') }, { children: [renderName(), (_a = additionalTenantProps === null || additionalTenantProps === void 0 ? void 0 : additionalTenantProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantProps, Name, Type)] })), _jsx(MetricsCards, { metrics: calculatedMetrics, issuesStatistics: issuesStatistics, selfCheckResult: selfCheckResult, fetchHealthcheck: fetchHealthcheck, healthcheckLoading: healthcheckLoading, healthCheckWasLoaded: healthCheckWasLoaded, healthcheckError: healthcheckError })] })), renderTabContent()] })));
+}

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

@@ -23,6 +23,7 @@
         margin-bottom: 10px;
 
         line-height: 24px;
+        gap: 4px;
     }
 
     &__top-label {

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { DataTableProps } from '@gravity-ui/react-data-table';
+import type { IResponseError } from '../../../../types/api/error';
+interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
+    title: ReactNode;
+    loading?: boolean;
+    wasLoaded?: boolean;
+    error?: IResponseError;
+    tableClassNameModifiers?: {
+        [name: string]: string | boolean | undefined;
+    };
+}
+export declare function TenantOverviewTableLayout<T>({ title, error, loading, wasLoaded, tableClassNameModifiers, ...props }: TenantOverviewTableLayoutProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '../../../../utils/constants';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { b } from './utils';
+export function TenantOverviewTableLayout(_a) {
+    var { title, error, loading, wasLoaded, tableClassNameModifiers = {} } = _a, props = __rest(_a, ["title", "error", "loading", "wasLoaded", "tableClassNameModifiers"]);
+    const renderContent = () => {
+        if (error) {
+            return _jsx(ResponseError, { error: error });
+        }
+        if (loading && !wasLoaded) {
+            return _jsx(TableSkeleton, { rows: TENANT_OVERVIEW_TABLES_LIMIT });
+        }
+        return (_jsx(DataTable, Object.assign({ theme: "yandex-cloud", settings: TENANT_OVERVIEW_TABLES_SETTINGS }, props)));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: title })), _jsx("div", Object.assign({ className: b('table', tableClassNameModifiers) }, { children: renderContent() }))] }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import '../TenantOverview.scss';
+export interface TenantStorageMetrics {
+    blobStorageUsed?: number;
+    blobStorageLimit?: number;
+    tabletStorageUsed?: number;
+    tabletStorageLimit?: number;
+}
+interface TenantStorageProps {
+    tenantName: string;
+    metrics: TenantStorageMetrics;
+}
+export declare function TenantStorage({ tenantName, metrics }: TenantStorageProps): JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
+import { ProgressViewer } from '../../../../../components/ProgressViewer/ProgressViewer';
+import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
+import { formatStorageValues } from '../../../../../utils/dataFormatters/dataFormatters';
+import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
+import '../TenantOverview.scss';
+import { storageDashboardConfig } from './storageDashboardConfig';
+import { TopTables } from './TopTables';
+import { TopGroups } from './TopGroups';
+import { b } from '../utils';
+import i18n from '../i18n';
+export function TenantStorage({ tenantName, metrics }) {
+    const { blobStorageUsed, tabletStorageUsed, blobStorageLimit, tabletStorageLimit } = metrics;
+    const info = [
+        {
+            label: (_jsx(LabelWithPopover, { text: i18n('storage.tablet-storage-title'), popoverContent: i18n('storage.tablet-storage-description') })),
+            value: (_jsx(ProgressViewer, { value: tabletStorageUsed, capacity: tabletStorageLimit, formatValues: formatStorageValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
+        },
+        {
+            label: (_jsx(LabelWithPopover, { text: i18n('storage.db-storage-title'), popoverContent: i18n('storage.db-storage-description') })),
+            value: (_jsx(ProgressViewer, { value: blobStorageUsed, capacity: blobStorageLimit, formatValues: formatStorageValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { charts: storageDashboardConfig }), _jsx(InfoViewer, { className: b('storage-info'), title: "Storage details", info: info }), _jsx(TopTables, { path: tenantName }), _jsx(TopGroups, { tenant: tenantName })] }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface TopGroupsProps {
+    tenant?: string;
+}
+export declare function TopGroups({ tenant }: TopGroupsProps): JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useAutofetcher, useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
+import { setDataWasNotLoaded, getTopStorageGroups, selectTopStorageGroups, } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { getStorageTopGroupsColumns } from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopGroups({ tenant }) {
+    const dispatch = useDispatch();
+    const query = useSearchQuery();
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const { loading, wasLoaded, error } = useTypedSelector((state) => state.topStorageGroups);
+    const topGroups = useTypedSelector(selectTopStorageGroups);
+    const columns = getStorageTopGroupsColumns();
+    const fetchData = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(getTopStorageGroups({ tenant }));
+    }, [dispatch, tenant]);
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const title = getSectionTitle({
+        entity: i18n('groups'),
+        postfix: i18n('by-usage'),
+        link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage })),
+    });
+    return (_jsx(TenantOverviewTableLayout, { data: topGroups || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import '../TenantOverview.scss';
+interface TopTablesProps {
+    path: string;
+}
+export declare function TopTables({ path }: TopTablesProps): JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router';
+import DataTable from '@gravity-ui/react-data-table';
+import { useAutofetcher, useTypedSelector } from '../../../../../utils/hooks';
+import { fetchTopTables, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
+import { formatBytes, getSizeWithSignificantDigits } from '../../../../../utils/bytesParsers';
+import { LinkToSchemaObject } from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import { CellWithPopover } from '../../../../../components/CellWithPopover/CellWithPopover';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+import '../TenantOverview.scss';
+export function TopTables({ path }) {
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const { loading, wasLoaded, error, data: { result: data = undefined } = {}, } = useTypedSelector((state) => state.executeTopTables);
+    useAutofetcher((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(fetchTopTables(path));
+    }, [dispatch, path], autorefresh);
+    const formatSize = (value) => {
+        const size = getSizeWithSignificantDigits((data === null || data === void 0 ? void 0 : data.length) ? Number(data[0].Size) : 0, 0);
+        return formatBytes({ value, size, precision: 1 });
+    };
+    const columns = [
+        {
+            name: 'Size',
+            width: 80,
+            sortable: false,
+            render: ({ row }) => formatSize(Number(row.Size)),
+            align: DataTable.RIGHT,
+        },
+        {
+            name: 'Path',
+            sortable: false,
+            render: ({ row }) => row.Path ? (_jsx(CellWithPopover, Object.assign({ content: row.Path }, { children: _jsx(LinkToSchemaObject, Object.assign({ path: String(row.Path), location: location }, { children: row.Path })) }))) : null,
+        },
+    ];
+    const title = getSectionTitle({
+        entity: i18n('tables'),
+        postfix: i18n('by-size'),
+    });
+    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/storageDashboardConfig.d.ts

@@ -0,0 +1,2 @@
+import type { ChartConfig } from '../TenantDashboard/TenantDashboard';
+export declare const storageDashboardConfig: ChartConfig[];

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/storageDashboardConfig.js

@@ -0,0 +1,15 @@
+import i18n from '../i18n';
+export const storageDashboardConfig = [
+    {
+        title: i18n('charts.storage-usage'),
+        metrics: [
+            {
+                target: 'resources.storage.used_bytes',
+                title: i18n('charts.storage-usage'),
+            },
+        ],
+        options: {
+            dataType: 'size',
+        },
+    },
+];

package/dist/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.d.ts

@@ -0,0 +1,8 @@
+interface GetSectionTitleParams {
+    entity: string;
+    postfix: string;
+    prefix?: string;
+    link?: string;
+}
+export declare const getSectionTitle: ({ prefix, entity, postfix, link, }: GetSectionTitleParams) => string | JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { InternalLink } from '../../../../components/InternalLink/InternalLink';
+import i18n from './i18n';
+// Titles are formed by the principle "Top entities by parameter"
+export const getSectionTitle = ({ prefix = i18n('top'), entity, postfix, link, }) => {
+    if (link) {
+        return (_jsxs(_Fragment, { children: [prefix, " ", _jsx(InternalLink, Object.assign({ to: link }, { children: entity })), " ", postfix] }));
+    }
+    return `${prefix} ${entity} ${postfix}`;
+};

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

@@ -1,33 +1,28 @@
 {
-  "no-data": "No data",
-  "no-pools-data": "No pools data",
-
-  "top-nodes.empty-data": "No such nodes",
-
-  "title.pools": "Pools",
-  "title.metrics": "Metrics",
-
-  "top-groups.empty-data": "No such groups",
-
-  "top": "Top",
-
-  "nodes": "nodes",
-  "shards": "shards",
-  "groups": "groups",
-  "queries": "queries",
-  "tables": "tables",
-
-  "by-pools-usage": "by pools usage",
-  "by-cpu-time": "by cpu time",
-  "by-cpu-usage": "by cpu usage",
-  "by-load": "by load",
-  "by-memory": "by memory",
-  "by-usage": "by usage",
-  "by-size": "by size",
-
-  "charts.queries-per-second": "Queries per second",
-  "charts.transaction-latency": "Transactions latencies {{percentile}}",
-  "charts.cpu-usage": "CPU usage",
-  "charts.storage-usage": "Storage usage",
-  "charts.memory-usage": "Memory usage"
+    "no-data": "No data",
+    "no-pools-data": "No pools data",
+    "top-nodes.empty-data": "No such nodes",
+    "top-groups.empty-data": "No such groups",
+    "top": "Top",
+    "nodes": "nodes",
+    "shards": "shards",
+    "groups": "groups",
+    "queries": "queries",
+    "tables": "tables",
+    "by-pools-usage": "by pools usage",
+    "by-cpu-time": "by cpu time",
+    "by-cpu-usage": "by cpu usage",
+    "by-load": "by load",
+    "by-memory": "by memory",
+    "by-usage": "by usage",
+    "by-size": "by size",
+    "charts.queries-per-second": "Queries per second",
+    "charts.transaction-latency": "Transactions latencies {{percentile}}",
+    "charts.cpu-usage": "CPU cores used",
+    "charts.storage-usage": "Tablet storage usage",
+    "charts.memory-usage": "Memory usage",
+    "storage.tablet-storage-title": "Tablet storage",
+    "storage.tablet-storage-description": "Size of user data and indexes stored in schema objects (tables, topics, etc.)",
+    "storage.db-storage-title": "Database storage",
+    "storage.db-storage-description": "Size of data stored in distributed storage with all overheads for redundancy"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/index.js

@@ -0,0 +1,5 @@
+import { i18n, Lang } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-diagnostics-tenant-overview';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,14 @@
+import type { IIssuesTree } from '../../../../types/store/healthcheck';
+import { type StatusFlag, SelfCheckResult } from '../../../../types/api/healthcheck';
+import type { IResponseError } from '../../../../types/api/error';
+interface HealthcheckParams {
+    issueTrees: IIssuesTree[];
+    issuesStatistics: [StatusFlag, number][];
+    fetchHealthcheck: (isBackground?: boolean) => void;
+    loading: boolean;
+    wasLoaded: boolean;
+    error?: IResponseError;
+    selfCheckResult: SelfCheckResult;
+}
+export declare const useHealthcheck: (tenantName: string) => HealthcheckParams;
+export {};

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

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { getHealthcheckInfo, selectIssuesStatistics, selectIssuesTrees, setDataWasNotLoaded, } from '../../../../store/reducers/healthcheckInfo';
+import { SelfCheckResult } from '../../../../types/api/healthcheck';
+import { useTypedSelector } from '../../../../utils/hooks/useTypedSelector';
+export const useHealthcheck = (tenantName) => {
+    const dispatch = useDispatch();
+    const { data, loading, wasLoaded, error } = useTypedSelector((state) => state.healthcheckInfo);
+    const selfCheckResult = (data === null || data === void 0 ? void 0 : 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/Diagnostics/TenantOverview/utils.d.ts

@@ -0,0 +1,10 @@
+export declare const b: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};

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

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

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.d.ts

@@ -0,0 +1,8 @@
+import type { EPathType } from '../../../../types/api/schema';
+import './TopQueries.scss';
+interface TopQueriesProps {
+    path: string;
+    type?: EPathType;
+}
+export declare const TopQueries: ({ path, type }: TopQueriesProps) => JSX.Element;
+export {};