ydb-embedded-ui 4.32.0 → 5.0.0

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

@@ -0,0 +1,44 @@
+import i18n from '../i18n';
+export const defaultDashboardConfig = [
+    {
+        title: i18n('charts.queries-per-second'),
+        metrics: [
+            {
+                target: 'queries.requests',
+                title: i18n('charts.queries-per-second'),
+            },
+        ],
+    },
+    {
+        title: i18n('charts.transaction-latency', { percentile: '' }),
+        metrics: [
+            {
+                target: 'queries.latencies.p50',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p50',
+                }),
+            },
+            {
+                target: 'queries.latencies.p75',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p75',
+                }),
+            },
+            {
+                target: 'queries.latencies.p90',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p90',
+                }),
+            },
+            {
+                target: 'queries.latencies.p99',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p99',
+                }),
+            },
+        ],
+        options: {
+            dataType: 'ms',
+        },
+    },
+];

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { IResponseError } from '../../../../../types/api/error';
+import type { IIssuesTree } from '../../../../../types/store/healthcheck';
+import './Healthcheck.scss';
+interface HealthcheckDetailsProps {
+    issueTrees?: IIssuesTree[];
+    loading?: boolean;
+    wasLoaded?: boolean;
+    error?: IResponseError;
+}
+export declare function HealthcheckDetails(props: HealthcheckDetailsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { ResponseError } from '../../../../../components/Errors/ResponseError';
+import { Loader } from '../../../../../components/Loader';
+import IssueTree from './IssuesViewer/IssueTree';
+import i18n from './i18n';
+import './Healthcheck.scss';
+const b = cn('healthcheck');
+export function HealthcheckDetails(props) {
+    const { issueTrees, loading, wasLoaded, error } = props;
+    const renderContent = () => {
+        if (error) {
+            return _jsx(ResponseError, { error: error, defaultMessage: i18n('no-data') });
+        }
+        if (loading && !wasLoaded) {
+            return _jsx(Loader, { size: "m" });
+        }
+        if (!issueTrees || !issueTrees.length) {
+            return i18n('status_message.ok');
+        }
+        return (_jsx(_Fragment, { children: issueTrees.map((issueTree) => (_jsx(IssueTree, { issueTree: issueTree }, issueTree.id))) }));
+    };
+    return (_jsx("div", Object.assign({ className: b('details') }, { children: _jsx("div", Object.assign({ className: b('details-content-wrapper') }, { children: renderContent() })) })));
+}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SelfCheckResult, type StatusFlag } from '../../../../../types/api/healthcheck';
+import type { IResponseError } from '../../../../../types/api/error';
+import './Healthcheck.scss';
+interface HealthcheckPreviewProps {
+    selfCheckResult: SelfCheckResult;
+    issuesStatistics?: [StatusFlag, number][];
+    loading?: boolean;
+    wasLoaded?: boolean;
+    onUpdate: VoidFunction;
+    error?: IResponseError;
+    active?: boolean;
+}
+export declare function HealthcheckPreview(props: HealthcheckPreviewProps): JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { Button, Icon } from '@gravity-ui/uikit';
+import updateArrow from '../../../../../assets/icons/update-arrow.svg';
+import { DiagnosticCard } from '../../../../../components/DiagnosticCard/DiagnosticCard';
+import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
+import { ResponseError } from '../../../../../components/Errors/ResponseError';
+import { Loader } from '../../../../../components/Loader';
+import i18n from './i18n';
+import './Healthcheck.scss';
+const b = cn('healthcheck');
+export function HealthcheckPreview(props) {
+    const { selfCheckResult, issuesStatistics, loading, wasLoaded, onUpdate, error, active } = props;
+    const renderHeader = () => {
+        const modifier = selfCheckResult.toLowerCase();
+        if (loading && !wasLoaded) {
+            return null;
+        }
+        return (_jsxs("div", Object.assign({ className: b('preview-header') }, { children: [_jsxs("div", Object.assign({ className: b('preview-title-wrapper') }, { children: [_jsx("div", Object.assign({ className: b('preview-title') }, { children: i18n('title.healthcheck') })), _jsx(Button, Object.assign({ size: "s", onClick: onUpdate, loading: loading, view: "flat-secondary" }, { children: _jsx(Icon, { data: updateArrow, width: 20, height: 20 }) }))] })), _jsx("div", Object.assign({ className: b('self-check-status-indicator', { [modifier]: true }) }, { children: selfCheckResult }))] })));
+    };
+    const renderContent = () => {
+        if (error) {
+            return _jsx(ResponseError, { error: error, defaultMessage: i18n('no-data') });
+        }
+        if (loading && !wasLoaded) {
+            return _jsx(Loader, { size: "m" });
+        }
+        return (_jsx("div", Object.assign({ className: b('preview-content') }, { children: !issuesStatistics || !issuesStatistics.length ? (i18n('status_message.ok')) : (_jsxs(_Fragment, { children: [_jsx("div", { children: i18n('label.issues') }), _jsx("div", Object.assign({ className: b('issues-statistics') }, { children: issuesStatistics.map(([status, count]) => (_jsx(EntityStatus, { mode: "icons", status: status, label: count.toString(), size: "l" }, status))) }))] })) })));
+    };
+    return (_jsxs(DiagnosticCard, Object.assign({ className: b('preview'), active: active }, { children: [renderHeader(), renderContent()] })));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.d.ts

@@ -0,0 +1,7 @@
+import { IIssuesTree } from '../../../../../../types/store/healthcheck';
+import './IssueTree.scss';
+interface IssuesViewerProps {
+    issueTree: IIssuesTree;
+}
+declare const IssueTree: ({ issueTree }: IssuesViewerProps) => JSX.Element;
+export default IssueTree;

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.js

@@ -0,0 +1,42 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import cn from 'bem-cn-lite';
+import _omit from 'lodash/omit';
+import JSONTree from 'react-json-inspector';
+import { TreeView } from 'ydb-ui-components';
+import { IssueTreeItem } from './IssueTreeItem';
+import './IssueTree.scss';
+const b = cn('issue-tree');
+const IssueTree = ({ issueTree }) => {
+    const [collapsedIssues, setCollapsedIssues] = useState({});
+    const renderTree = useCallback((data) => {
+        return data.map((item) => {
+            const { id } = item;
+            const { status, message, type, reasonsItems, level } = item, rest = __rest(item, ["status", "message", "type", "reasonsItems", "level"]);
+            const isCollapsed = typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id];
+            const toggleCollapsed = () => {
+                setCollapsedIssues((collapsedIssues) => (Object.assign(Object.assign({}, collapsedIssues), { [id]: !isCollapsed })));
+            };
+            return (_jsxs(TreeView, Object.assign({ name: _jsx(IssueTreeItem, { status: status, message: message, type: type }), collapsed: isCollapsed, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed, level: level - 1 }, { children: [renderInfoPanel(_omit(rest, ['reason'])), renderTree(reasonsItems || [])] }), id));
+        });
+    }, [issueTree, collapsedIssues]);
+    const renderInfoPanel = useCallback((info) => {
+        if (!info) {
+            return null;
+        }
+        return (_jsx("div", Object.assign({ className: b('info-panel') }, { children: _jsx(JSONTree, { data: info, search: false, isExpanded: () => true, className: b('inspector') }) })));
+    }, [issueTree]);
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx("div", Object.assign({ className: b('block') }, { children: renderTree([issueTree]) })) })));
+};
+export default IssueTree;

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.d.ts

@@ -0,0 +1,9 @@
+import './IssueTreeItem.scss';
+interface IssueRowProps {
+    status: string;
+    message: string;
+    type: string;
+    onClick?: VoidFunction;
+}
+export declare const IssueTreeItem: ({ status, message, type, onClick }: IssueRowProps) => JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import EntityStatus from '../../../../../../../components/EntityStatus/EntityStatus';
+import './IssueTreeItem.scss';
+const b = cn('issue-tree-item');
+export const IssueTreeItem = ({ status, message, type, onClick }) => {
+    return (_jsxs("div", Object.assign({ className: b(), onClick: onClick }, { children: [_jsx("div", Object.assign({ className: b('field', { status: true }) }, { children: _jsx(EntityStatus, { mode: "icons", status: status, name: type }) })), _jsx("div", Object.assign({ className: b('field', { message: true }) }, { children: message }))] })));
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/index.js

@@ -0,0 +1 @@
+export * from './IssueTreeItem';

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

@@ -1,8 +1,8 @@
 {
-  "title.healthcheck": "Healthcheck",
-  "label.update": "Update",
-  "label.show-details": "Show details",
-  "label.issues": "Issues:",
-  "status_message.ok": "No issues",
-  "no-data": "no healthcheck data"
+    "title.healthcheck": "Healthcheck",
+    "label.update": "Update",
+    "label.show-details": "Show details",
+    "label.issues": "Issues:",
+    "status_message.ok": "No issues",
+    "no-data": "no healthcheck data"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/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/Healthcheck/i18n/index.js

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

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

@@ -1,8 +1,8 @@
 {
-  "title.healthcheck": "Healthcheck",
-  "label.update": "Обновить",
-  "label.show-details": "Посмотреть подробности",
-  "label.issues": "Проблемы:",
-  "status_message.ok": "Нет проблем",
-  "no-data": "нет данных healthcheck"
+    "title.healthcheck": "Healthcheck",
+    "label.update": "Обновить",
+    "label.show-details": "Посмотреть подробности",
+    "label.issues": "Проблемы:",
+    "status_message.ok": "Нет проблем",
+    "no-data": "нет данных healthcheck"
 }

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { MetricStatus } from '../../../../../../store/reducers/tenants/types';
+import './MetricCard.scss';
+interface MetricCardProps {
+    active?: boolean;
+    progress?: number;
+    label?: string;
+    status?: MetricStatus;
+    resourcesUsed?: string;
+}
+export declare function MetricCard({ active, progress, label, status, resourcesUsed }: MetricCardProps): JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { CircularProgressBar } from '../../../../../../components/CircularProgressBar/CircularProgressBar';
+import { DiagnosticCard } from '../../../../../../components/DiagnosticCard/DiagnosticCard';
+import { formatUsage } from '../../../../../../store/reducers/tenants/utils';
+import i18n from '../../i18n';
+import './MetricCard.scss';
+const b = cn('ydb-metrics-card');
+export function MetricCard({ active, progress, label, status, resourcesUsed }) {
+    const renderContent = () => {
+        return (_jsxs("div", Object.assign({ className: b('content') }, { children: [progress && _jsx("div", Object.assign({ className: b('progress') }, { children: formatUsage(progress) })), resourcesUsed ? (_jsx("div", Object.assign({ className: b('resources') }, { children: resourcesUsed }))) : (i18n('no-data'))] })));
+    };
+    return (_jsxs(DiagnosticCard, Object.assign({ className: b({ active }), active: active }, { children: [_jsx("div", Object.assign({ className: b('header') }, { children: label && _jsx("div", Object.assign({ className: b('label') }, { children: label })) })), _jsx(CircularProgressBar, { size: 172, strokeWidth: 11, progress: progress || 0, content: renderContent(), status: status, circleBgClassName: b('progress-bar-circle-bg') })] })));
+}

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { SelfCheckResult, StatusFlag } from '../../../../../types/api/healthcheck';
+import type { IResponseError } from '../../../../../types/api/error';
+import './MetricsCards.scss';
+export interface TenantMetrics {
+    memoryUsed?: number;
+    memoryLimit?: number;
+    cpuUsed?: number;
+    cpuUsage?: number;
+    storageUsed?: number;
+    storageLimit?: number;
+}
+interface MetricsCardsProps {
+    metrics?: TenantMetrics;
+    issuesStatistics?: [StatusFlag, number][];
+    selfCheckResult: SelfCheckResult;
+    fetchHealthcheck: VoidFunction;
+    healthcheckLoading?: boolean;
+    healthCheckWasLoaded?: boolean;
+    healthcheckError?: IResponseError;
+}
+export declare function MetricsCards({ metrics, issuesStatistics, selfCheckResult, fetchHealthcheck, healthcheckLoading, healthCheckWasLoaded, healthcheckError, }: MetricsCardsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { Link, useLocation } from 'react-router-dom';
+import { TENANT_METRICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { useTypedSelector } from '../../../../../utils/hooks';
+import { parseQuery } from '../../../../../routes';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { calculateUsage, cpuUsageToStatus, storageUsageToStatus, memoryUsageToStatus, formatTenantMetrics, } from '../../../../../store/reducers/tenants/utils';
+import { HealthcheckPreview } from '../Healthcheck/HealthcheckPreview';
+import { MetricCard } from './MetricCard/MetricCard';
+import './MetricsCards.scss';
+const b = cn('metrics-cards');
+export function MetricsCards({ metrics, issuesStatistics, selfCheckResult, fetchHealthcheck, healthcheckLoading, healthCheckWasLoaded, healthcheckError, }) {
+    const location = useLocation();
+    const { memoryUsed, memoryLimit, cpuUsed, cpuUsage, storageUsed, storageLimit } = metrics || {};
+    const { metricsTab } = useTypedSelector((state) => state.tenant);
+    const storageUsage = calculateUsage(storageUsed, storageLimit);
+    const memoryUsage = calculateUsage(memoryUsed, memoryLimit);
+    const cpuStatus = cpuUsageToStatus(cpuUsage);
+    const storageStatus = storageUsageToStatus(storageUsage);
+    const memoryStatus = memoryUsageToStatus(memoryUsage);
+    const { cpu, storage, memory } = formatTenantMetrics({
+        cpu: cpuUsed,
+        storage: storageUsed,
+        memory: memoryUsed,
+    });
+    const queryParams = parseQuery(location);
+    // Allow tabs untoggle behaviour
+    const getTabIfNotActive = (tab) => {
+        if (tab === metricsTab) {
+            return '';
+        }
+        return tab;
+    };
+    const tabLinks = {
+        [TENANT_METRICS_TABS_IDS.cpu]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.cpu) })),
+        [TENANT_METRICS_TABS_IDS.storage]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.storage) })),
+        [TENANT_METRICS_TABS_IDS.memory]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.memory) })),
+        [TENANT_METRICS_TABS_IDS.healthcheck]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.healthcheck) })),
+    };
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Link, Object.assign({ to: tabLinks.cpu, className: b('tab') }, { children: _jsx(MetricCard, { label: "CPU", progress: cpuUsage, status: cpuStatus, resourcesUsed: cpu, active: metricsTab === TENANT_METRICS_TABS_IDS.cpu }) })), _jsx(Link, Object.assign({ to: tabLinks.storage, className: b('tab') }, { children: _jsx(MetricCard, { label: "Storage", progress: storageUsage, status: storageStatus, resourcesUsed: storage, active: metricsTab === TENANT_METRICS_TABS_IDS.storage }) })), _jsx(Link, Object.assign({ to: tabLinks.memory, className: b('tab') }, { children: _jsx(MetricCard, { label: "Memory", progress: memoryUsage, status: memoryStatus, resourcesUsed: memory, active: metricsTab === TENANT_METRICS_TABS_IDS.memory }) })), _jsx(Link, Object.assign({ to: tabLinks.healthcheck, className: b('tab') }, { children: _jsx(HealthcheckPreview, { selfCheckResult: selfCheckResult, issuesStatistics: issuesStatistics, onUpdate: fetchHealthcheck, loading: healthcheckLoading, wasLoaded: healthCheckWasLoaded, error: healthcheckError, active: metricsTab === TENANT_METRICS_TABS_IDS.healthcheck }) }))] })));
+}

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
+import { cpuDashboardConfig } from './cpuDashboardConfig';
+import { TopNodesByLoad } from './TopNodesByLoad';
+import { TopNodesByCpu } from './TopNodesByCpu';
+import { TopShards } from './TopShards';
+import { TopQueries } from './TopQueries';
+export function TenantCpu({ path, additionalNodesProps }) {
+    return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { charts: cpuDashboardConfig }), _jsx(TopNodesByLoad, { path: path, additionalNodesProps: additionalNodesProps }), _jsx(TopNodesByCpu, { path: path, additionalNodesProps: additionalNodesProps }), _jsx(TopShards, { path: path }), _jsx(TopQueries, { path: path })] }));
+}

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import { useCallback } from 'react';
+import { useAutofetcher, useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
+import { getTopNodesByCpu, selectTopNodesByCpu, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { getTopNodesByCpuColumns } from '../../../../Nodes/getNodesColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopNodesByCpu({ path, additionalNodesProps }) {
+    const dispatch = useDispatch();
+    const query = useSearchQuery();
+    const { wasLoaded, loading, error } = useTypedSelector((state) => state.topNodesByCpu);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const topNodes = useTypedSelector(selectTopNodesByCpu);
+    const columns = getTopNodesByCpuColumns(additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef);
+    const fetchNodes = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(getTopNodesByCpu({ tenant: path }));
+    }, [dispatch, path]);
+    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-pools-usage'),
+        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/TenantCpu/TopNodesByLoad.d.ts

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import { useCallback } from 'react';
+import { useAutofetcher, useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
+import { getTopNodesByLoad, selectTopNodesByLoad, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { getTopNodesByLoadColumns } from '../../../../Nodes/getNodesColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopNodesByLoad({ path, additionalNodesProps }) {
+    const dispatch = useDispatch();
+    const query = useSearchQuery();
+    const { wasLoaded, loading, error } = useTypedSelector((state) => state.topNodesByLoad);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const topNodes = useTypedSelector(selectTopNodesByLoad);
+    const columns = getTopNodesByLoadColumns(additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef);
+    const fetchNodes = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(getTopNodesByLoad({ tenant: path }));
+    }, [dispatch, path]);
+    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-load'),
+        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/TenantCpu/TopQueries.d.ts

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router';
+import { useCallback } from 'react';
+import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../../store/reducers/tenant/constants';
+import { fetchTenantOverviewTopQueries, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
+import { changeUserInput } from '../../../../../store/reducers/executeQuery';
+import { useAutofetcher, useTypedSelector } from '../../../../../utils/hooks';
+import { parseQuery } from '../../../../../routes';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { getTenantOverviewTopQueriesColumns } from '../../TopQueries/getTopQueriesColumns';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopQueries({ path }) {
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const history = useHistory();
+    const query = parseQuery(location);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const { loading, wasLoaded, error, data: { result: data = undefined } = {}, } = useTypedSelector((state) => state.tenantOverviewTopQueries);
+    const columns = getTenantOverviewTopQueriesColumns();
+    useAutofetcher((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(fetchTenantOverviewTopQueries(path));
+    }, [dispatch, path], autorefresh);
+    const handleRowClick = useCallback((row) => {
+        const { QueryText: input } = row;
+        dispatch(changeUserInput({ input }));
+        const queryParams = parseQuery(location);
+        const queryPath = getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.query, [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery }));
+        history.push(queryPath);
+    }, [dispatch, history, location]);
+    const title = getSectionTitle({
+        entity: i18n('queries'),
+        postfix: i18n('by-cpu-time'),
+        link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries })),
+    });
+    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, onRowClick: handleRowClick, title: title, loading: loading, wasLoaded: wasLoaded, error: error, tableClassNameModifiers: { 'top-queries': true } }));
+}

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

@@ -0,0 +1,5 @@
+interface TopShardsProps {
+    path: string;
+}
+export declare const TopShards: ({ path }: TopShardsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router';
+import { useAutofetcher, useTypedSelector } from '../../../../../utils/hooks';
+import { parseQuery } from '../../../../../routes';
+import { sendTenantOverviewTopShardsQuery, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { getTopShardsColumns } from '../../TopShards/getTopShardsColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export const TopShards = ({ path }) => {
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const query = parseQuery(location);
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const { loading, data: { result: data = undefined } = {}, error, wasLoaded, } = useTypedSelector((state) => state.tenantOverviewTopShards);
+    useAutofetcher((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        dispatch(sendTenantOverviewTopShardsQuery(path, currentSchemaPath));
+    }, [dispatch, path, currentSchemaPath], autorefresh);
+    const columns = getTopShardsColumns(path, location);
+    const title = getSectionTitle({
+        entity: i18n('shards'),
+        postfix: i18n('by-cpu-usage'),
+        link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards })),
+    });
+    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error, tableClassNameModifiers: { 'top-queries': true } }));
+};

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

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

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

@@ -0,0 +1,12 @@
+import i18n from '../i18n';
+export const cpuDashboardConfig = [
+    {
+        title: i18n('charts.cpu-usage'),
+        metrics: [
+            {
+                target: 'resources.cpu.usage',
+                title: i18n('charts.cpu-usage'),
+            },
+        ],
+    },
+];

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

@@ -0,0 +1,12 @@
+import { type ChartOptions, type MetricDescription } from '../../../../../components/MetricChart';
+import './TenantDashboard.scss';
+export interface ChartConfig {
+    metrics: MetricDescription[];
+    title: string;
+    options?: ChartOptions;
+}
+interface TenantDashboardProps {
+    charts: ChartConfig[];
+}
+export declare const TenantDashboard: ({ charts }: TenantDashboardProps) => JSX.Element;
+export {};