ydb-embedded-ui 8.25.0 → 8.26.0

package/dist/containers/Cluster/ClusterInfo/utils/utils.js

@@ -1,12 +1,13 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Flex } from '@gravity-ui/uikit';
+import { EntityStatus } from '../../../../components/EntityStatusNew/EntityStatus';
 import { ProgressViewer } from '../../../../components/ProgressViewer/ProgressViewer';
 import { Tags } from '../../../../components/Tags';
 import { isClusterInfoV2 } from '../../../../types/api/cluster';
 import { formatNumber } from '../../../../utils/dataFormatters/dataFormatters';
 import i18n from '../../i18n';
-import { NodesState } from '../components/NodesState/NodesState';
+import { DiskGroupsStats } from '../components/DiskGroupsStatsBars/DiskGroupsStats';
 import { b } from '../shared';
 const COLORS_PRIORITY = {
     Green: 5,
@@ -18,30 +19,30 @@ const COLORS_PRIORITY = {
 };
 const getDCInfo = (cluster) => {
     if (isClusterInfoV2(cluster) && cluster.MapDataCenters) {
-        return Object.entries(cluster.MapDataCenters).map(([dc, count]) => (_jsxs(React.Fragment, { children: [dc, ": ", formatNumber(count)] }, dc)));
+        return Object.entries(cluster.MapDataCenters).map(([dc, count]) => (_jsxs(React.Fragment, { children: [dc, " : ", formatNumber(count)] }, dc)));
     }
     return undefined;
 };
 export const getInfo = (cluster, additionalInfo) => {
     var _a;
     const info = [];
+    const dataCenters = getDCInfo(cluster);
+    if (dataCenters === null || dataCenters === void 0 ? void 0 : dataCenters.length) {
+        info.push({
+            label: i18n('label_dc'),
+            value: _jsx(Tags, { tags: dataCenters, gap: 1, className: b('dc') }),
+        });
+    }
     if (isClusterInfoV2(cluster) && cluster.MapNodeStates) {
         const arrayNodesStates = Object.entries(cluster.MapNodeStates);
         // sort stack to achieve order "green, orange, yellow, red, blue, grey"
         arrayNodesStates.sort((a, b) => COLORS_PRIORITY[b[0]] - COLORS_PRIORITY[a[0]]);
         const nodesStates = arrayNodesStates.map(([state, count]) => {
-            return (_jsx(NodesState, { state: state, children: formatNumber(count) }, state));
+            return (_jsx(EntityStatus.Label, { withStatusName: false, status: state, size: "xs", iconSize: 12, children: formatNumber(count) }, state));
         });
         info.push({
             label: i18n('label_nodes-state'),
-            value: _jsx(Flex, { gap: 2, children: nodesStates }),
-        });
-    }
-    const dataCenters = getDCInfo(cluster);
-    if (dataCenters === null || dataCenters === void 0 ? void 0 : dataCenters.length) {
-        info.push({
-            label: i18n('label_dc'),
-            value: _jsx(Tags, { tags: dataCenters, gap: 2, className: b('dc') }),
+            value: _jsx(Flex, { gap: 1, children: nodesStates }),
         });
     }
     info.push({
@@ -51,4 +52,13 @@ export const getInfo = (cluster, additionalInfo) => {
     info.push(...additionalInfo);
     return info;
 };
+export function getStorageGroupStats(groupStats) {
+    const result = [];
+    Object.entries(groupStats).forEach(([storageType, stats]) => {
+        Object.values(stats).forEach((erasureStats) => {
+            result.push(_jsx(DiskGroupsStats, { stats: erasureStats, storageType: storageType }, `${storageType}|${erasureStats.erasure}`));
+        });
+    });
+    return result;
+}
 //# sourceMappingURL=utils.js.map

package/dist/containers/Cluster/ClusterInfo/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterInfo/utils/utils.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterInfo/utils/utils.tsx"],"names":[],"mappings":"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"}

package/dist/containers/Cluster/{ClusterDashboard/ClusterDashboard.d.ts → ClusterOverview/ClusterOverview.d.ts}

@@ -1,12 +1,15 @@
 import type { ClusterGroupsStats } from '../../../store/reducers/cluster/types';
+import type { AdditionalClusterProps } from '../../../types/additionalProps';
 import type { TClusterInfo } from '../../../types/api/cluster';
 import type { IResponseError } from '../../../types/api/error';
-import './ClusterDashboard.scss';
-interface ClusterDashboardProps {
+import './ClusterOverview.scss';
+interface ClusterOverviewProps {
     cluster: TClusterInfo;
     groupStats?: ClusterGroupsStats;
     loading?: boolean;
     error?: IResponseError | string;
+    additionalClusterProps?: AdditionalClusterProps;
+    collapsed?: boolean;
 }
-export declare function ClusterDashboard({ cluster, ...props }: ClusterDashboardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClusterOverview(props: ClusterOverviewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Cluster/ClusterOverview/ClusterOverview.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowToggle, Disclosure, Flex, Icon, Text } from '@gravity-ui/uikit';
+import { ResponseError } from '../../../components/Errors/ResponseError';
+import { useClusterDashboardAvailable } from '../../../store/reducers/capabilities/hooks';
+import { isClusterInfoV2, isClusterInfoV5 } from '../../../types/api/cluster';
+import { valueIsDefined } from '../../../utils';
+import { EXPAND_CLUSTER_DASHBOARD } from '../../../utils/constants';
+import { useSetting } from '../../../utils/hooks/useSetting';
+import { ClusterInfo } from '../ClusterInfo/ClusterInfo';
+import i18n from '../i18n';
+import { getTotalStorageGroupsUsed } from '../utils';
+import { ClusterDashboardSkeleton } from './components/ClusterMetricsCard';
+import { ClusterMetricsCores } from './components/ClusterMetricsCores';
+import { ClusterMetricsMemory } from './components/ClusterMetricsMemory';
+import { ClusterMetricsNetwork } from './components/ClusterMetricsNetwork';
+import { ClusterMetricsStorage } from './components/ClusterMetricsStorage';
+import { b } from './shared';
+import overviewIcon from '../../../assets/icons/overview.svg';
+import './ClusterOverview.scss';
+export function ClusterOverview(props) {
+    const [expandDashboard, setExpandDashboard] = useSetting(EXPAND_CLUSTER_DASHBOARD);
+    if (props.error) {
+        return _jsx(ResponseError, { error: props.error, className: b('error') });
+    }
+    return (_jsx(Flex, { direction: "column", className: b('overview-wrapper', { collapsed: !expandDashboard }), children: _jsxs(Disclosure, { arrowPosition: "end", expanded: expandDashboard, onUpdate: () => setExpandDashboard(!expandDashboard), children: [_jsx(Disclosure.Summary, { children: (disclosureProps) => (_jsxs("div", { ...disclosureProps, className: b('disclosure-summary'), children: [_jsxs(Flex, { alignItems: "center", justifyContent: "space-between", width: '100%', children: [_jsxs(Flex, { gap: 2, alignItems: "center", children: [_jsx(Icon, { data: overviewIcon, size: 16 }), _jsx(Text, { variant: "body-2", color: "primary", className: b('title'), children: i18n('label_overview') })] }), !expandDashboard && _jsx(ClusterDashboard, { ...props, collapsed: true })] }), _jsx(ArrowToggle, { size: 16, direction: disclosureProps.expanded ? 'top' : 'bottom' })] })) }), _jsx(ClusterDashboard, { ...props }), _jsx(ClusterInfo, { ...props })] }) }));
+}
+function ClusterDashboard({ collapsed, ...props }) {
+    const isClusterDashboardAvailable = useClusterDashboardAvailable();
+    if (!isClusterDashboardAvailable) {
+        return null;
+    }
+    return (_jsx(Flex, { wrap: true, className: b('dashboard-wrapper', { collapsed }), children: _jsx(ClusterDoughnuts, { ...props, collapsed: collapsed }) }));
+}
+function ClusterDoughnuts({ cluster, groupStats = {}, loading, collapsed }) {
+    if (loading) {
+        return _jsx(ClusterDashboardSkeleton, {});
+    }
+    const metricsCards = [];
+    if (isClusterInfoV2(cluster)) {
+        const { CoresUsed, NumberOfCpus, CoresTotal } = cluster;
+        const total = CoresTotal !== null && CoresTotal !== void 0 ? CoresTotal : NumberOfCpus;
+        if (valueIsDefined(CoresUsed) && valueIsDefined(total)) {
+            metricsCards.push(_jsx(ClusterMetricsCores, { value: CoresUsed, capacity: total, collapsed: collapsed }, "cores"));
+        }
+    }
+    const { StorageTotal, StorageUsed } = cluster;
+    if (valueIsDefined(StorageTotal) && valueIsDefined(StorageUsed)) {
+        const total = getTotalStorageGroupsUsed(groupStats);
+        metricsCards.push(_jsx(ClusterMetricsStorage, { value: StorageUsed, capacity: StorageTotal, groups: total, collapsed: collapsed }, "storage"));
+    }
+    const { MemoryTotal, MemoryUsed } = cluster;
+    if (valueIsDefined(MemoryTotal) && valueIsDefined(MemoryUsed)) {
+        metricsCards.push(_jsx(ClusterMetricsMemory, { value: MemoryUsed, capacity: MemoryTotal, collapsed: collapsed }, "memory"));
+    }
+    if (isClusterInfoV5(cluster)) {
+        const { NetworkUtilization, NetworkWriteThroughput } = cluster;
+        if (valueIsDefined(NetworkUtilization)) {
+            metricsCards.push(_jsx(ClusterMetricsNetwork, { percentsValue: NetworkUtilization, throughput: NetworkWriteThroughput, collapsed: collapsed }, "network"));
+        }
+    }
+    return metricsCards;
+}
+//# sourceMappingURL=ClusterOverview.js.map

package/dist/containers/Cluster/ClusterOverview/ClusterOverview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterOverview.js","sourceRoot":"","sources":["../../../../src/containers/Cluster/ClusterOverview/ClusterOverview.tsx"],"names":[],"mappings":"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"}

package/dist/containers/Cluster/ClusterOverview/ClusterOverview.scss

@@ -0,0 +1,70 @@
+@use '../../../styles/mixins.scss';
+
+.ydb-cluster-dashboard {
+    &__dashboard-wrapper {
+        gap: var(--g-spacing-6);
+
+        padding-top: var(--g-spacing-4);
+    }
+
+    &__dashboard-wrapper_collapsed {
+        gap: var(--g-spacing-1);
+
+        margin-right: var(--g-spacing-4);
+        margin-left: auto;
+        padding-top: unset;
+    }
+
+    &__error {
+        @include mixins.body-2-typography();
+    }
+
+    &__skeleton-wrapper {
+        padding: unset;
+
+        border: unset;
+    }
+    &__skeleton {
+        height: 100%;
+    }
+    &__overview-wrapper {
+        --g-button-background-color-hover: var(--g-color-base-background);
+        --g-button-padding: 0;
+        position: sticky;
+        left: 0;
+
+        padding: var(--g-spacing-4);
+
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: 5px;
+
+        .g-button:active {
+            transform: unset;
+        }
+    }
+
+    &__overview-wrapper_collapsed {
+        &:hover {
+            border-color: var(--g-color-line-generic-hover);
+        }
+    }
+
+    &__disclosure-summary {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        width: 100%;
+        height: 28px;
+
+        cursor: pointer;
+        .g-button__text {
+            width: 100%;
+        }
+    }
+
+    &__card {
+        min-width: 280px;
+        height: 132px;
+    }
+}

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsCard.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ProgressStatus } from '../../../../utils/progress';
+interface ClusterMetricsDougnutCardProps extends ClusterMetricsCommonCardProps {
+    status: ProgressStatus;
+    fillWidth: number;
+    legend: {
+        main?: string;
+        secondary?: string;
+        note?: React.ReactNode;
+    };
+}
+interface ClusterMetricsCommonCardProps {
+    children?: React.ReactNode;
+    title?: string;
+    className?: string;
+    collapsed?: boolean;
+}
+export declare function ClusterMetricsCard({ children, className }: ClusterMetricsCommonCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClusterMetricsCardContent({ title, children, legend, collapsed, ...rest }: ClusterMetricsDougnutCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClusterDashboardSkeleton(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Flex } from '@gravity-ui/uikit';
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { EntityStatus } from '../../../../components/EntityStatusNew/EntityStatus';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton';
+import { EFlag } from '../../../../types/api/enums';
+import { b } from '../shared';
+const ProgressStatusToEFlag = {
+    good: EFlag.Green,
+    warning: EFlag.Yellow,
+    danger: EFlag.Red,
+};
+export function ClusterMetricsCard({ children, className }) {
+    return (_jsx(Flex, { gap: "6", alignItems: "center", className: b('card', className), children: children }));
+}
+export function ClusterMetricsCardContent({ title, children, legend, collapsed, ...rest }) {
+    const { main: mainLegend, secondary: secondaryLegend, note: legendNote } = legend;
+    if (collapsed) {
+        const { status, fillWidth } = rest;
+        const normalizedFillWidth = fillWidth.toFixed(fillWidth > 0 ? 0 : 1);
+        return (_jsx(EntityStatus.Label, { withStatusName: false, status: ProgressStatusToEFlag[status], children: `${title} : ${normalizedFillWidth}%` }));
+    }
+    return (_jsxs(ClusterMetricsCard, { children: [_jsx(DoughnutMetrics, { ...rest, children: children }), _jsxs("div", { className: b('legend-wrapper'), children: [mainLegend && _jsx(DoughnutMetrics.Legend, { children: mainLegend }), secondaryLegend && (_jsx(DoughnutMetrics.Legend, { color: "secondary", note: legendNote, variant: "body-1", children: secondaryLegend }))] })] }));
+}
+function ClusterMetricsCardSkeleton() {
+    return (_jsx(ClusterMetricsCard, { className: b('skeleton-wrapper'), children: _jsx(Skeleton, { className: b('skeleton') }) }));
+}
+export function ClusterDashboardSkeleton() {
+    return (_jsxs(React.Fragment, { children: [_jsx(ClusterMetricsCardSkeleton, {}), _jsx(ClusterMetricsCardSkeleton, {}), _jsx(ClusterMetricsCardSkeleton, {})] }));
+}
+//# sourceMappingURL=ClusterMetricsCard.js.map

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsCard.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterOverview/components/ClusterMetricsCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,eAAe,EAAC,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAC,YAAY,EAAC,MAAM,qDAAqD,CAAC;AACjF,OAAO,EAAC,QAAQ,EAAC,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAC,KAAK,EAAC,MAAM,6BAA6B,CAAC;AAElD,OAAO,EAAC,CAAC,EAAC,MAAM,WAAW,CAAC;AAE5B,MAAM,qBAAqB,GAAkC;IACzD,IAAI,EAAE,KAAK,CAAC,KAAK;IACjB,OAAO,EAAE,KAAK,CAAC,MAAM;IACrB,MAAM,EAAE,KAAK,CAAC,GAAG;CACpB,CAAC;AAeF,MAAM,UAAU,kBAAkB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAgC;IACnF,OAAO,CACH,KAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,YAC5D,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,EACtC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACsB;IAC7B,MAAM,EAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAC,GAAG,MAAM,CAAC;IAEhF,IAAI,SAAS,EAAE,CAAC;QACZ,MAAM,EAAC,MAAM,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC;QACjC,MAAM,mBAAmB,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErE,OAAO,CACH,KAAC,YAAY,CAAC,KAAK,IAAC,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,qBAAqB,CAAC,MAAM,CAAC,YAC3E,GAAG,KAAK,MAAM,mBAAmB,GAAG,GACpB,CACxB,CAAC;IACN,CAAC;IACD,OAAO,CACH,MAAC,kBAAkB,eACf,KAAC,eAAe,OAAK,IAAI,YAAG,QAAQ,GAAmB,EACvD,eAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,aAC9B,UAAU,IAAI,KAAC,eAAe,CAAC,MAAM,cAAE,UAAU,GAA0B,EAC3E,eAAe,IAAI,CAChB,KAAC,eAAe,CAAC,MAAM,IAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,QAAQ,YACvE,eAAe,GACK,CAC5B,IACC,IACW,CACxB,CAAC;AACN,CAAC;AAED,SAAS,0BAA0B;IAC/B,OAAO,CACH,KAAC,kBAAkB,IAAC,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,YAChD,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,GAAI,GACrB,CACxB,CAAC;AACN,CAAC;AAED,MAAM,UAAU,wBAAwB;IACpC,OAAO,CACH,MAAC,KAAK,CAAC,QAAQ,eACX,KAAC,0BAA0B,KAAG,EAC9B,KAAC,0BAA0B,KAAG,EAC9B,KAAC,0BAA0B,KAAG,IACjB,CACpB,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsCores.d.ts

@@ -0,0 +1,5 @@
+import type { ClusterMetricsCommonProps } from '../shared';
+interface ClusterMetricsCoresProps extends ClusterMetricsCommonProps {
+}
+export declare function ClusterMetricsCores({ collapsed, value, capacity, ...rest }: ClusterMetricsCoresProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsCores.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { formatNumber, formatNumericValues } from '../../../../utils/dataFormatters/dataFormatters';
+import i18n from '../../i18n';
+import { getDiagramValues } from '../utils';
+import { ClusterMetricsCardContent } from './ClusterMetricsCard';
+function formatCoresLegend({ value, capacity }) {
+    let formatted = [];
+    if (capacity < 10000) {
+        formatted = [formatNumber(Math.round(value)), formatNumber(Math.round(capacity))];
+    }
+    else {
+        formatted = formatNumericValues(value, capacity, undefined, '', true);
+    }
+    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]} ${i18n('context_cores')}`;
+}
+export function ClusterMetricsCores({ collapsed, value, capacity, ...rest }) {
+    const { status, percents, legend, fill } = getDiagramValues({
+        value,
+        capacity,
+        legendFormatter: formatCoresLegend,
+        ...rest,
+    });
+    return (_jsx(ClusterMetricsCardContent, { collapsed: collapsed, status: status, fillWidth: fill, title: i18n('title_cpu'), legend: {
+            main: legend,
+            secondary: i18n('context_cpu'),
+            note: i18n('context_cpu-description'),
+        }, children: _jsx(DoughnutMetrics.Value, { children: percents }) }));
+}
+//# sourceMappingURL=ClusterMetricsCores.js.map

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsCores.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsCores.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterOverview/components/ClusterMetricsCores.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAC,YAAY,EAAE,mBAAmB,EAAC,MAAM,iDAAiD,CAAC;AAClG,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AAI/D,SAAS,iBAAiB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAoC;IAC3E,IAAI,SAAS,GAAG,EAAE,CAAC;IACnB,IAAI,QAAQ,GAAG,KAAM,EAAE,CAAC;QACpB,SAAS,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtF,CAAC;SAAM,CAAC;QACJ,SAAS,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC;IACD,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;AAC5F,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACgB;IACvB,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,GAAG,gBAAgB,CAAC;QACtD,KAAK;QACL,QAAQ;QACR,eAAe,EAAE,iBAAiB;QAClC,GAAG,IAAI;KACV,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,yBAAyB,IACtB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,EACxB,MAAM,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;YAC9B,IAAI,EAAE,IAAI,CAAC,yBAAyB,CAAC;SACxC,YAED,KAAC,eAAe,CAAC,KAAK,cAAE,QAAQ,GAAyB,GACjC,CAC/B,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/{ClusterDashboard → ClusterOverview}/components/ClusterMetricsMemory.d.ts

@@ -1,5 +1,5 @@
 import type { ClusterMetricsCommonProps } from '../shared';
 interface ClusterMetricsMemoryProps extends ClusterMetricsCommonProps {
 }
-export declare function ClusterMetricsMemory({ value, capacity, ...rest }: ClusterMetricsMemoryProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClusterMetricsMemory({ value, capacity, collapsed, ...rest }: ClusterMetricsMemoryProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsMemory.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { formatStorageValues } from '../../../../utils/dataFormatters/dataFormatters';
+import i18n from '../../i18n';
+import { getDiagramValues } from '../utils';
+import { ClusterMetricsCardContent } from './ClusterMetricsCard';
+function formatStorageLegend({ value, capacity }) {
+    const formatted = formatStorageValues(value, capacity, undefined, '\n');
+    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]}`;
+}
+export function ClusterMetricsMemory({ value, capacity, collapsed, ...rest }) {
+    const { status, percents, legend, fill } = getDiagramValues({
+        value,
+        capacity,
+        legendFormatter: formatStorageLegend,
+        ...rest,
+    });
+    return (_jsx(ClusterMetricsCardContent, { status: status, fillWidth: fill, title: i18n('title_memory'), collapsed: collapsed, legend: {
+            main: legend,
+            secondary: i18n('context_memory'),
+            note: i18n('context_memory-description'),
+        }, children: _jsx(DoughnutMetrics.Value, { children: percents }) }));
+}
+//# sourceMappingURL=ClusterMetricsMemory.js.map

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsMemory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsMemory.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterOverview/components/ClusterMetricsMemory.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAC,mBAAmB,EAAC,MAAM,iDAAiD,CAAC;AACpF,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AAI/D,SAAS,mBAAmB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAoC;IAC7E,MAAM,SAAS,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACxE,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACiB;IACxB,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,GAAG,gBAAgB,CAAC;QACtD,KAAK;QACL,QAAQ;QACR,eAAe,EAAE,mBAAmB;QACpC,GAAG,IAAI;KACV,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,yBAAyB,IACtB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,EAC3B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC;YACjC,IAAI,EAAE,IAAI,CAAC,4BAA4B,CAAC;SAC3C,YAED,KAAC,eAAe,CAAC,KAAK,cAAE,QAAQ,GAAyB,GACjC,CAC/B,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsNetwork.d.ts

@@ -0,0 +1,7 @@
+import type { ClusterMetricsBaseProps } from '../shared';
+interface ClusterMetricsNetworkProps extends ClusterMetricsBaseProps {
+    percentsValue: number;
+    throughput?: string;
+}
+export declare function ClusterMetricsNetwork({ percentsValue, throughput, collapsed, ...rest }: ClusterMetricsNetworkProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsNetwork.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { formatBytes } from '../../../../utils/bytesParsers';
+import { SHOW_NETWORK_UTILIZATION } from '../../../../utils/constants';
+import { useSetting } from '../../../../utils/hooks/useSetting';
+import i18n from '../../i18n';
+import { calculateBaseDiagramValues } from '../utils';
+import { ClusterMetricsCardContent } from './ClusterMetricsCard';
+function formatStorageLegend(value) {
+    return formatBytes({ value, withSpeedLabel: true });
+}
+export function ClusterMetricsNetwork({ percentsValue, throughput, collapsed, ...rest }) {
+    const [showNetworkUtilization] = useSetting(SHOW_NETWORK_UTILIZATION);
+    if (!showNetworkUtilization) {
+        return null;
+    }
+    const { status, percents, fill } = calculateBaseDiagramValues({
+        fillWidth: percentsValue * 100,
+        ...rest,
+    });
+    const legend = formatStorageLegend(throughput);
+    return (_jsx(ClusterMetricsCardContent, { status: status, fillWidth: fill, title: i18n('title_network'), collapsed: collapsed, legend: {
+            main: legend,
+            secondary: i18n('context_network'),
+            note: i18n('context_network-description'),
+        }, children: _jsx(DoughnutMetrics.Value, { children: percents }) }));
+}
+//# sourceMappingURL=ClusterMetricsNetwork.js.map

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsNetwork.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsNetwork.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterOverview/components/ClusterMetricsNetwork.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAC,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAC,UAAU,EAAC,MAAM,oCAAoC,CAAC;AAC9D,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AAO/D,SAAS,mBAAmB,CAAC,KAAc;IACvC,OAAO,WAAW,CAAC,EAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EAClC,aAAa,EACb,UAAU,EACV,SAAS,EACT,GAAG,IAAI,EACkB;IACzB,MAAM,CAAC,sBAAsB,CAAC,GAAG,UAAU,CAAU,wBAAwB,CAAC,CAAC;IAC/E,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAC,GAAG,0BAA0B,CAAC;QACxD,SAAS,EAAE,aAAa,GAAG,GAAG;QAC9B,GAAG,IAAI;KACV,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAE/C,OAAO,CACH,KAAC,yBAAyB,IACtB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,EAC5B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC;YAClC,IAAI,EAAE,IAAI,CAAC,6BAA6B,CAAC;SAC5C,YAED,KAAC,eAAe,CAAC,KAAK,cAAE,QAAQ,GAAyB,GACjC,CAC/B,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/{ClusterDashboard → ClusterOverview}/components/ClusterMetricsStorage.d.ts

@@ -1,5 +1,6 @@
 import type { ClusterMetricsCommonProps } from '../shared';
 interface ClusterMetricsStorageProps extends ClusterMetricsCommonProps {
+    groups: number;
 }
-export declare function ClusterMetricsStorage({ value, capacity, ...rest }: ClusterMetricsStorageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClusterMetricsStorage({ value, capacity, groups, collapsed, ...rest }: ClusterMetricsStorageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsStorage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { formatStorageValues } from '../../../../utils/dataFormatters/dataFormatters';
+import i18n from '../../i18n';
+import { getDiagramValues } from '../utils';
+import { ClusterMetricsCardContent } from './ClusterMetricsCard';
+function formatStorageLegend({ value, capacity }) {
+    const formatted = formatStorageValues(value, capacity, undefined, '\n');
+    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]}`;
+}
+export function ClusterMetricsStorage({ value, capacity, groups, collapsed, ...rest }) {
+    const { status, percents, legend, fill } = getDiagramValues({
+        value,
+        capacity,
+        legendFormatter: formatStorageLegend,
+        ...rest,
+    });
+    return (_jsx(ClusterMetricsCardContent, { status: status, fillWidth: fill, title: i18n('title_storage'), collapsed: collapsed, legend: {
+            main: legend,
+            secondary: i18n('context_storage', { count: groups }),
+            note: i18n('context_storage-description'),
+        }, children: _jsx(DoughnutMetrics.Value, { children: percents }) }));
+}
+//# sourceMappingURL=ClusterMetricsStorage.js.map

package/dist/containers/Cluster/ClusterOverview/components/ClusterMetricsStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsStorage.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterOverview/components/ClusterMetricsStorage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAC,mBAAmB,EAAC,MAAM,iDAAiD,CAAC;AACpF,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AAM/D,SAAS,mBAAmB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAoC;IAC7E,MAAM,SAAS,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACxE,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACkB;IACzB,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,GAAG,gBAAgB,CAAC;QACtD,KAAK;QACL,QAAQ;QACR,eAAe,EAAE,mBAAmB;QACpC,GAAG,IAAI;KACV,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,yBAAyB,IACtB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,EAC5B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;YACnD,IAAI,EAAE,IAAI,CAAC,6BAA6B,CAAC;SAC5C,YAED,KAAC,eAAe,CAAC,KAAK,cAAE,QAAQ,GAAyB,GACjC,CAC/B,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/{ClusterDashboard → ClusterOverview}/shared.d.ts

@@ -1,9 +1,12 @@
 export declare const b: import("@bem-react/classname").ClassNameFormatter;
-export interface ClusterMetricsCommonProps {
-    value: number | string;
-    capacity: number | string;
+export interface ClusterMetricsBaseProps {
     colorizeProgress?: boolean;
     inverseColorize?: boolean;
     warningThreshold?: number;
     dangerThreshold?: number;
+    collapsed?: boolean;
+}
+export interface ClusterMetricsCommonProps extends ClusterMetricsBaseProps {
+    value: number | string;
+    capacity: number | string;
 }

package/dist/containers/Cluster/ClusterOverview/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/containers/Cluster/ClusterOverview/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,mBAAmB,CAAC;AACrC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,CAAC"}

package/dist/containers/Cluster/ClusterOverview/utils.d.ts

@@ -0,0 +1,19 @@
+import type { ClusterMetricsBaseProps, ClusterMetricsCommonProps } from './shared';
+export declare function calculateBaseDiagramValues({ colorizeProgress, warningThreshold, dangerThreshold, inverseColorize, fillWidth, }: ClusterMetricsBaseProps & {
+    fillWidth: number;
+}): {
+    status: import("../../../utils/progress").ProgressStatus;
+    percents: string;
+    fill: number;
+};
+export declare function getDiagramValues({ value, capacity, legendFormatter, ...rest }: ClusterMetricsCommonProps & {
+    legendFormatter: (params: {
+        value: number;
+        capacity: number;
+    }) => string;
+}): {
+    legend: string;
+    status: import("../../../utils/progress").ProgressStatus;
+    percents: string;
+    fill: number;
+};

package/dist/containers/Cluster/ClusterOverview/utils.js

@@ -0,0 +1,32 @@
+import { formatPercent } from '../../../utils/dataFormatters/dataFormatters';
+import { calculateProgressStatus } from '../../../utils/progress';
+export function calculateBaseDiagramValues({ colorizeProgress = true, warningThreshold, dangerThreshold, inverseColorize = false, fillWidth, }) {
+    const normalizedFillWidth = Math.max(fillWidth, 0.5);
+    const status = calculateProgressStatus({
+        fillWidth,
+        warningThreshold,
+        dangerThreshold,
+        colorizeProgress,
+        inverseColorize,
+    });
+    const percents = formatPercent(fillWidth / 100);
+    return { status, percents, fill: normalizedFillWidth };
+}
+export function getDiagramValues({ value, capacity, legendFormatter, ...rest }) {
+    const parsedValue = parseFloat(String(value));
+    const parsedCapacity = parseFloat(String(capacity));
+    let fillWidth = (parsedValue / parsedCapacity) * 100 || 0;
+    fillWidth = fillWidth > 100 ? 100 : fillWidth;
+    const legend = legendFormatter({
+        value: parsedValue,
+        capacity: parsedCapacity,
+    });
+    return {
+        ...calculateBaseDiagramValues({
+            fillWidth,
+            ...rest,
+        }),
+        legend,
+    };
+}
+//# sourceMappingURL=utils.js.map

package/dist/containers/Cluster/ClusterOverview/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/containers/Cluster/ClusterOverview/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,8CAA8C,CAAC;AAC3E,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAIhE,MAAM,UAAU,0BAA0B,CAAC,EACvC,gBAAgB,GAAG,IAAI,EACvB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAAG,KAAK,EACvB,SAAS,GACmC;IAC5C,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,uBAAuB,CAAC;QACnC,SAAS;QACT,gBAAgB;QAChB,eAAe;QACf,gBAAgB;QAChB,eAAe;KAClB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,aAAa,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC;IAEhD,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,GAAG,IAAI,EAGV;IACG,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpD,IAAI,SAAS,GAAG,CAAC,WAAW,GAAG,cAAc,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;IAC1D,SAAS,GAAG,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9C,MAAM,MAAM,GAAG,eAAe,CAAC;QAC3B,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,cAAc;KAC3B,CAAC,CAAC;IACH,OAAO;QACH,GAAG,0BAA0B,CAAC;YAC1B,SAAS;YACT,GAAG,IAAI;SACV,CAAC;QACF,MAAM;KACT,CAAC;AACN,CAAC"}

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

@@ -1,13 +1,10 @@
 {
-    "disk-type": "Disk Type",
     "erasure": "Erasure",
     "allocated": "Allocated",
     "available": "Available",
     "usage": "Usage",
     "label_nodes-state": "Nodes state",
     "label_dc": "Nodes data centers",
-    "storage-size": "Storage size",
-    "storage-groups": "Storage groups, {{diskType}}",
     "links": "Links",
     "link_cores": "Coredumps",
     "link_logging": "Logging",
@@ -15,12 +12,25 @@
     "context_cores": "cores",
     "title_cpu": "CPU",
     "title_storage": "Storage",
+    "title_storage-groups": "Storage Groups",
     "title_memory": "Memory",
-    "title_info": "Info",
+    "title_network": "Network",
     "title_links": "Links",
-    "label_nodes": "Nodes",
-    "label_hosts": "Hosts",
-    "label_storage-groups": "Storage groups",
-    "label_databases": "Databases",
-    "label_load": "Load"
+    "title_details": "Details",
+    "label_overview": "Overview",
+    "label_load": "Load",
+    "context_of": "of",
+    "context_cpu": "CPU load",
+    "context_memory": "Memory used",
+    "context_storage": [
+        "Storage: {{count}} group",
+        "Storage: {{count}} groups",
+        "Storage: {{count}} groups",
+        "Storage: {{count}} groups"
+    ],
+    "context_network": "Network Evaluation",
+    "context_cpu-description": "CPU load is calculated as the cumulative usage across all actor system pools on all nodes in the cluster",
+    "context_memory-description": "Memory usage is the total memory consumed by all nodes in the cluster",
+    "context_storage-description": "Storage usage is a cumulative usage of raw disk space of all media types",
+    "context_network-description": "Network usage is the average outgoing bandwidth usage across all nodes in the cluster"
 }

package/dist/containers/Cluster/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "links" | "erasure" | "usage" | "storage-groups" | "title_storage" | "disk-type" | "allocated" | "available" | "label_nodes-state" | "label_dc" | "storage-size" | "link_cores" | "link_logging" | "link_slo-logs" | "context_cores" | "title_cpu" | "title_memory" | "title_info" | "title_links" | "label_nodes" | "label_hosts" | "label_storage-groups" | "label_databases" | "label_load", params?: import("@gravity-ui/i18n").Params) => string;
+declare const _default: (key: "links" | "erasure" | "usage" | "title_storage" | "allocated" | "available" | "label_nodes-state" | "label_dc" | "link_cores" | "link_logging" | "link_slo-logs" | "context_cores" | "title_cpu" | "title_storage-groups" | "title_memory" | "title_network" | "title_links" | "title_details" | "label_overview" | "label_load" | "context_of" | "context_cpu" | "context_memory" | "context_storage" | "context_network" | "context_cpu-description" | "context_memory-description" | "context_storage-description" | "context_network-description", params?: import("@gravity-ui/i18n").Params) => string;
 export default _default;