ydb-embedded-ui 6.26.1 → 6.27.1

package/dist/containers/Cluster/Cluster.scss

@@ -1,6 +1,6 @@
 @import '../../styles/mixins.scss';
 
-.cluster {
+.ydb-cluster {
     position: relative;
 
     overflow: auto;
@@ -27,28 +27,55 @@
         height: var(--g-text-header-1-line-height);
     }
 
-    &__tabs {
-        position: sticky;
-        left: 0;
+    &__tabs-sticky-wrapper {
+        z-index: 3;
 
+        margin-top: 20px;
+        margin-right: -20px;
+        padding-right: 20px;
+        @include sticky-top();
+    }
+    &__tabs {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
         @include tabs-wrapper-styles();
     }
 
     &__sticky-wrapper {
         position: sticky;
         z-index: 4;
-        top: 56px;
+        top: 66px;
         left: 0;
     }
 
     &__auto-refresh-control {
         float: right;
 
-        margin-top: -40px;
+        margin-top: -46px;
+
+        background-color: var(--g-color-base-background);
+    }
+    .ydb-table-with-controls-layout__controls-wrapper {
+        top: 40px;
+    }
+
+    &__tablets {
+        .data-table__sticky_moving {
+            // Place table head right after controls
+            top: 60px !important;
+        }
+    }
+
+    &__fake-block {
+        position: sticky;
+        z-index: 3;
+        top: 40px;
+
+        height: 20px;
 
         background-color: var(--g-color-base-background);
     }
+
+    .ydb-table-with-controls-layout {
+        --data-table-sticky-top-offset: 102px;
+    }
 }

package/dist/containers/Cluster/ClusterDashboard/ClusterDashboard.d.ts

@@ -0,0 +1,10 @@
+import type { ClusterGroupsStats } from '../../../store/reducers/cluster/types';
+import type { TClusterInfo } from '../../../types/api/cluster';
+import './ClusterDashboard.scss';
+interface ClusterDashboardProps {
+    cluster: TClusterInfo;
+    groupStats?: ClusterGroupsStats;
+    loading?: boolean;
+}
+export declare function ClusterDashboard(props: ClusterDashboardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Cluster/ClusterDashboard/ClusterDashboard.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from '@gravity-ui/uikit';
+import { Tags } from '../../../components/Tags';
+import { isClusterInfoV2 } from '../../../types/api/cluster';
+import { valueIsDefined } from '../../../utils';
+import { formatNumber } from '../../../utils/dataFormatters/dataFormatters';
+import i18n from '../i18n';
+import { ClusterDashboardSkeleton, ClusterMetricsCard } from './components/ClusterMetricsCard';
+import { ClusterMetricsCores } from './components/ClusterMetricsCores';
+import { ClusterMetricsMemory } from './components/ClusterMetricsMemory';
+import { ClusterMetricsStorage } from './components/ClusterMetricsStorage';
+import { b } from './shared';
+import { getDCInfo, getNodesRolesInfo, getStorageGroupStats, getTotalStorageGroupsUsed, } from './utils';
+import './ClusterDashboard.scss';
+function Amount({ value }) {
+    if (!valueIsDefined(value)) {
+        return null;
+    }
+    return (_jsx(Text, { variant: "subheader-3", color: "secondary", children: formatNumber(value) }));
+}
+export function ClusterDashboard(props) {
+    return (_jsx("div", { className: b(), children: _jsxs(Flex, { gap: 4, wrap: true, children: [_jsx(Flex, { gap: 4, wrap: "nowrap", children: _jsx(ClusterDoughnuts, { ...props }) }), _jsx("div", { className: b('cards-container'), children: _jsx(ClusterDashboardCards, { ...props }) })] }) }));
+}
+function ClusterDoughnuts({ cluster, loading }) {
+    if (loading) {
+        return _jsx(ClusterDashboardSkeleton, {});
+    }
+    const metricsCards = [];
+    if (isClusterInfoV2(cluster)) {
+        const { CoresUsed, NumberOfCpus } = cluster;
+        if (valueIsDefined(CoresUsed) && valueIsDefined(NumberOfCpus)) {
+            metricsCards.push(_jsx(ClusterMetricsCores, { value: CoresUsed, capacity: NumberOfCpus }, "cores"));
+        }
+    }
+    const { StorageTotal, StorageUsed } = cluster;
+    if (valueIsDefined(StorageTotal) && valueIsDefined(StorageUsed)) {
+        metricsCards.push(_jsx(ClusterMetricsStorage, { value: StorageUsed, capacity: StorageTotal }, "storage"));
+    }
+    const { MemoryTotal, MemoryUsed } = cluster;
+    if (valueIsDefined(MemoryTotal) && valueIsDefined(MemoryUsed)) {
+        metricsCards.push(_jsx(ClusterMetricsMemory, { value: MemoryUsed, capacity: MemoryTotal }, "memory"));
+    }
+    return metricsCards;
+}
+function ClusterDashboardCards({ cluster, groupStats = {}, loading }) {
+    if (loading) {
+        return null;
+    }
+    const cards = [];
+    const nodesRoles = getNodesRolesInfo(cluster);
+    cards.push(_jsx(ClusterMetricsCard, { size: "l", title: i18n('label_nodes'), children: _jsxs(Flex, { gap: 2, direction: "column", children: [_jsx(Amount, { value: cluster === null || cluster === void 0 ? void 0 : cluster.NodesAlive }), (nodesRoles === null || nodesRoles === void 0 ? void 0 : nodesRoles.length) ? _jsx(Tags, { tags: nodesRoles, gap: 3 }) : null] }) }, 'roles'));
+    if (Object.keys(groupStats).length) {
+        const tags = getStorageGroupStats(groupStats);
+        const total = getTotalStorageGroupsUsed(groupStats);
+        cards.push(_jsx(ClusterMetricsCard, { size: "l", title: i18n('label_storage-groups'), children: _jsxs(Flex, { gap: 2, direction: "column", children: [_jsx(Amount, { value: total }), _jsx(Tags, { tags: tags, gap: 3 })] }) }, 'groups'));
+    }
+    const dataCenters = getDCInfo(cluster);
+    if (dataCenters === null || dataCenters === void 0 ? void 0 : dataCenters.length) {
+        cards.push(_jsx(ClusterMetricsCard, { size: "l", title: i18n('label_hosts'), children: _jsxs(Flex, { gap: 2, direction: "column", children: [_jsx(Amount, { value: cluster === null || cluster === void 0 ? void 0 : cluster.Hosts }), _jsx(Tags, { tags: dataCenters, gap: 3 })] }) }, 'hosts'));
+    }
+    if (cluster.Tenants) {
+        cards.push(_jsx(ClusterMetricsCard, { size: "l", title: i18n('label_databases'), children: _jsx(Amount, { value: cluster === null || cluster === void 0 ? void 0 : cluster.Tenants }) }, "tenants"));
+    }
+    return cards;
+}
+//# sourceMappingURL=ClusterDashboard.js.map

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

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

package/dist/containers/Cluster/ClusterDashboard/ClusterDashboard.scss

@@ -0,0 +1,46 @@
+.ydb-cluster-dashboard {
+    position: sticky;
+    left: 0;
+
+    padding-top: 16px;
+    &__card {
+        display: flex;
+        flex-direction: column;
+
+        height: 252px;
+    }
+    &__card_size_s {
+        height: unset;
+    }
+    &__card_size_l {
+        width: 100%;
+        height: unset;
+    }
+    &__skeleton-wrapper {
+        padding: unset;
+
+        border: unset;
+    }
+    &__doughnut {
+        margin-top: auto;
+    }
+    &__cards {
+        display: flex;
+    }
+    &__card-title {
+        margin-bottom: var(--g-spacing-2);
+    }
+    &__skeleton {
+        height: 100%;
+    }
+    &__cards-container {
+        display: grid;
+        grid-template-columns: repeat(2, max-content);
+        grid-template-rows: repeat(2, 118px);
+        grid-auto-flow: column dense;
+        gap: var(--g-spacing-4);
+    }
+    &__double-height {
+        grid-row: span 2;
+    }
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { DiagnosticCardProps } from '../../../../components/DiagnosticCard/DiagnosticCard';
+import type { ProgressStatus } from '../../../../utils/progress';
+interface ClusterMetricsDougnutCardProps extends ClusterMetricsCommonCardProps {
+    status: ProgressStatus;
+    fillWidth: number;
+}
+interface ClusterMetricsCommonCardProps {
+    children?: React.ReactNode;
+    title?: string;
+    size?: DiagnosticCardProps['size'];
+    className?: string;
+}
+export declare function ClusterMetricsCard({ children, title, size, className, }: ClusterMetricsCommonCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClusterMetricsCardDoughnut({ title, children, size, ...rest }: ClusterMetricsDougnutCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClusterDashboardSkeleton(): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import { DiagnosticCard } from '../../../../components/DiagnosticCard/DiagnosticCard';
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton';
+import { b } from '../shared';
+export function ClusterMetricsCard({ children, title, size, className, }) {
+    return (_jsxs(DiagnosticCard, { className: b('card', { size }, className), size: size, interactive: false, children: [title ? (_jsx(Text, { variant: "subheader-3", className: b('card-title'), children: title })) : null, children] }));
+}
+export function ClusterMetricsCardDoughnut({ title, children, size, ...rest }) {
+    return (_jsx(ClusterMetricsCard, { title: title, size: size, children: _jsx(DoughnutMetrics, { ...rest, className: b('doughnut'), children: children }) }));
+}
+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/ClusterDashboard/components/ClusterMetricsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsCard.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterDashboard/components/ClusterMetricsCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAC,cAAc,EAAC,MAAM,sDAAsD,CAAC;AACpF,OAAO,EAAC,eAAe,EAAC,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAC,QAAQ,EAAC,MAAM,0CAA0C,CAAC;AAElE,OAAO,EAAC,CAAC,EAAC,MAAM,WAAW,CAAC;AAc5B,MAAM,UAAU,kBAAkB,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GACmB;IAC5B,OAAO,CACH,MAAC,cAAc,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,aAClF,KAAK,CAAC,CAAC,CAAC,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,EAAC,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YACjD,KAAK,GACH,CACV,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACI,CACpB,CAAC;AACN,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,EACsB;IAC7B,OAAO,CACH,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,YACxC,KAAC,eAAe,OAAK,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,YAC9C,QAAQ,GACK,GACD,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/ClusterDashboard/components/ClusterMetricsCores.d.ts

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { formatNumberCustom } from '../../../../utils/dataFormatters/dataFormatters';
+import i18n from '../../i18n';
+import { useDiagramValues } from '../utils';
+import { ClusterMetricsCardDoughnut } from './ClusterMetricsCard';
+function formatCoresLegend({ value, capacity }) {
+    return `${formatNumberCustom(value)} / ${formatNumberCustom(capacity)}\n${i18n('context_cores')}`;
+}
+export function ClusterMetricsCores({ value, capacity, ...rest }) {
+    const { status, percents, legend, fill } = useDiagramValues({
+        value,
+        capacity,
+        legendFormatter: formatCoresLegend,
+        ...rest,
+    });
+    return (_jsxs(ClusterMetricsCardDoughnut, { status: status, fillWidth: fill, title: i18n('title_cpu'), children: [_jsx(DoughnutMetrics.Legend, { children: legend }), _jsx(DoughnutMetrics.Value, { children: percents })] }));
+}
+//# sourceMappingURL=ClusterMetricsCores.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsCores.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterDashboard/components/ClusterMetricsCores.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAC,kBAAkB,EAAC,MAAM,iDAAiD,CAAC;AACnF,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAC,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AAIhE,SAAS,iBAAiB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAoC;IAC3E,OAAO,GAAG,kBAAkB,CAAC,KAAK,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;AACtG,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAA2B;IACpF,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;IACH,OAAO,CACH,MAAC,0BAA0B,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,aACjF,KAAC,eAAe,CAAC,MAAM,cAAE,MAAM,GAA0B,EACzD,KAAC,eAAe,CAAC,KAAK,cAAE,QAAQ,GAAyB,IAChC,CAChC,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/ClusterDashboard/components/ClusterMetricsMemory.d.ts

@@ -0,0 +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 {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { formatStorageValues } from '../../../../utils/dataFormatters/dataFormatters';
+import i18n from '../../i18n';
+import { useDiagramValues } from '../utils';
+import { ClusterMetricsCardDoughnut } from './ClusterMetricsCard';
+function formatStorageLegend({ value, capacity }) {
+    const formatted = formatStorageValues(value, capacity, undefined, '\n');
+    return `${formatted[0]} / ${formatted[1]}`;
+}
+export function ClusterMetricsMemory({ value, capacity, ...rest }) {
+    const { status, percents, legend, fill } = useDiagramValues({
+        value,
+        capacity,
+        legendFormatter: formatStorageLegend,
+        ...rest,
+    });
+    return (_jsxs(ClusterMetricsCardDoughnut, { status: status, fillWidth: fill, title: i18n('title_memory'), children: [_jsx(DoughnutMetrics.Legend, { children: legend }), _jsx(DoughnutMetrics.Value, { children: percents })] }));
+}
+//# sourceMappingURL=ClusterMetricsMemory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsMemory.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterDashboard/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,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AAIhE,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,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAA4B;IACtF,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,MAAC,0BAA0B,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,aACpF,KAAC,eAAe,CAAC,MAAM,cAAE,MAAM,GAA0B,EACzD,KAAC,eAAe,CAAC,KAAK,cAAE,QAAQ,GAAyB,IAChC,CAChC,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/ClusterDashboard/components/ClusterMetricsStorage.d.ts

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DoughnutMetrics } from '../../../../components/DoughnutMetrics/DoughnutMetrics';
+import { formatStorageValues } from '../../../../utils/dataFormatters/dataFormatters';
+import i18n from '../../i18n';
+import { useDiagramValues } from '../utils';
+import { ClusterMetricsCardDoughnut } from './ClusterMetricsCard';
+function formatStorageLegend({ value, capacity }) {
+    const formatted = formatStorageValues(value, capacity, undefined, '\n');
+    return `${formatted[0]} / ${formatted[1]}`;
+}
+export function ClusterMetricsStorage({ value, capacity, ...rest }) {
+    const { status, percents, legend, fill } = useDiagramValues({
+        value,
+        capacity,
+        legendFormatter: formatStorageLegend,
+        ...rest,
+    });
+    return (_jsxs(ClusterMetricsCardDoughnut, { status: status, fillWidth: fill, title: i18n('title_storage'), children: [_jsx(DoughnutMetrics.Legend, { children: legend }), _jsx(DoughnutMetrics.Value, { children: percents })] }));
+}
+//# sourceMappingURL=ClusterMetricsStorage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterMetricsStorage.js","sourceRoot":"","sources":["../../../../../src/containers/Cluster/ClusterDashboard/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,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AAIhE,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,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAA6B;IACxF,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,MAAC,0BAA0B,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,aACrF,KAAC,eAAe,CAAC,MAAM,cAAE,MAAM,GAA0B,EACzD,KAAC,eAAe,CAAC,KAAK,cAAE,QAAQ,GAAyB,IAChC,CAChC,CAAC;AACN,CAAC"}

package/dist/containers/Cluster/ClusterDashboard/shared.d.ts

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

package/dist/containers/Cluster/ClusterDashboard/shared.js

@@ -0,0 +1,3 @@
+import { cn } from '../../../utils/cn';
+export const b = cn('ydb-cluster-dashboard');
+//# sourceMappingURL=shared.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/containers/Cluster/ClusterDashboard/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/ClusterDashboard/utils.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ClusterGroupsStats } from '../../../store/reducers/cluster/types';
+import type { TClusterInfo } from '../../../types/api/cluster';
+import type { ClusterMetricsCommonProps } from './shared';
+export declare function useDiagramValues({ value, capacity, colorizeProgress, warningThreshold, dangerThreshold, inverseColorize, legendFormatter, }: ClusterMetricsCommonProps & {
+    legendFormatter: (params: {
+        value: number;
+        capacity: number;
+    }) => string;
+}): {
+    status: import("../../../utils/progress").ProgressStatus;
+    percents: string;
+    legend: string;
+    fill: number;
+};
+export declare function getDCInfo(cluster: TClusterInfo): string[] | undefined;
+export declare function getNodesRolesInfo(cluster: TClusterInfo): React.ReactNode[];
+export declare function getStorageGroupStats(groupStats: ClusterGroupsStats): React.ReactNode[];
+export declare const getTotalStorageGroupsUsed: (groupStats: ClusterGroupsStats) => number;

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

@@ -0,0 +1,63 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { isClusterInfoV2 } from '../../../types/api/cluster';
+import { formatNumber, formatPercent } from '../../../utils/dataFormatters/dataFormatters';
+import { calculateProgressStatus } from '../../../utils/progress';
+import { DiskGroupsErasureStats } from '../ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStatsBars';
+export function useDiagramValues({ value, capacity, colorizeProgress = true, warningThreshold = 60, dangerThreshold = 80, inverseColorize = false, legendFormatter, }) {
+    const parsedValue = parseFloat(String(value));
+    const parsedCapacity = parseFloat(String(capacity));
+    let fillWidth = (parsedValue / parsedCapacity) * 100 || 0;
+    fillWidth = fillWidth > 100 ? 100 : fillWidth;
+    const normalizedFillWidth = fillWidth < 1 ? 0.5 : fillWidth;
+    const status = calculateProgressStatus({
+        fillWidth,
+        warningThreshold,
+        dangerThreshold,
+        colorizeProgress,
+        inverseColorize,
+    });
+    const percents = formatPercent(fillWidth / 100);
+    const legend = legendFormatter({
+        value: parsedValue,
+        capacity: parsedCapacity,
+    });
+    return { status, percents, legend, fill: normalizedFillWidth };
+}
+export function getDCInfo(cluster) {
+    var _a;
+    if (isClusterInfoV2(cluster) && cluster.MapDataCenters) {
+        return Object.keys(cluster.MapDataCenters);
+    }
+    return (_a = cluster.DataCenters) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+}
+const rolesToShow = ['storage', 'tenant'];
+export function getNodesRolesInfo(cluster) {
+    const nodesRoles = [];
+    if (isClusterInfoV2(cluster) && cluster.MapNodeRoles) {
+        for (const [role, count] of Object.entries(cluster.MapNodeRoles)) {
+            if (rolesToShow.includes(role.toLowerCase())) {
+                nodesRoles.push(_jsxs(React.Fragment, { children: [role, ": ", formatNumber(count)] }, role));
+            }
+        }
+    }
+    return nodesRoles;
+}
+export function getStorageGroupStats(groupStats) {
+    const result = [];
+    Object.entries(groupStats).forEach(([storageType, stats]) => {
+        Object.values(stats).forEach((erasureStats) => {
+            result.push(_jsxs(DiskGroupsErasureStats, { stats: erasureStats, children: [storageType, ": ", formatNumber(erasureStats.createdGroups), " /", ' ', formatNumber(erasureStats.totalGroups)] }, `${storageType}|${erasureStats.erasure}`));
+        });
+    });
+    return result;
+}
+export const getTotalStorageGroupsUsed = (groupStats) => {
+    return Object.values(groupStats).reduce((acc, data) => {
+        Object.values(data).forEach((erasureStats) => {
+            acc += erasureStats.createdGroups;
+        });
+        return acc;
+    }, 0);
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/containers/Cluster/ClusterDashboard/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,8CAA8C,CAAC;AACzF,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,sBAAsB,EAAC,MAAM,mEAAmE,CAAC;AAIzG,MAAM,UAAU,gBAAgB,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,gBAAgB,GAAG,EAAE,EACrB,eAAe,GAAG,EAAE,EACpB,eAAe,GAAG,KAAK,EACvB,eAAe,GAGlB;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;IAC9C,MAAM,mBAAmB,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5D,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;IAChD,MAAM,MAAM,GAAG,eAAe,CAAC;QAC3B,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,cAAc;KAC3B,CAAC,CAAC;IAEH,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAC,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAqB;;IAC3C,IAAI,eAAe,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;QACrD,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,MAAA,OAAO,CAAC,WAAW,0CAAE,MAAM,CAAC,OAAO,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAE1C,MAAM,UAAU,iBAAiB,CAAC,OAAqB;IACnD,MAAM,UAAU,GAAsB,EAAE,CAAC;IACzC,IAAI,eAAe,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC;QACnD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YAC/D,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;gBAC3C,UAAU,CAAC,IAAI,CACX,MAAC,KAAK,CAAC,QAAQ,eACV,IAAI,QAAI,YAAY,CAAC,KAAK,CAAC,KADX,IAAI,CAER,CACpB,CAAC;YACN,CAAC;QACL,CAAC;IACL,CAAC;IACD,OAAO,UAAU,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,UAA8B;IAC/D,MAAM,MAAM,GAAsB,EAAE,CAAC;IAErC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE;QACxD,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,EAAE;YAC1C,MAAM,CAAC,IAAI,CACP,MAAC,sBAAsB,IACnB,KAAK,EAAE,YAAY,aAGlB,WAAW,QAAI,YAAY,CAAC,YAAY,CAAC,aAAa,CAAC,QAAI,GAAG,EAC9D,YAAY,CAAC,YAAY,CAAC,WAAW,CAAC,KAHlC,GAAG,WAAW,IAAI,YAAY,CAAC,OAAO,EAAE,CAIxB,CAC5B,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAA8B,EAAE,EAAE;IACxE,OAAO,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QAClD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,EAAE;YACzC,GAAG,IAAI,YAAY,CAAC,aAAa,CAAC;QACtC,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,CAAC;IACf,CAAC,EAAE,CAAC,CAAC,CAAC;AACV,CAAC,CAAC"}

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.d.ts

@@ -1,4 +1,3 @@
-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';
@@ -7,10 +6,9 @@ import './ClusterInfo.scss';
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
     versionToColor?: VersionToColorMap;
-    groupsStats?: ClusterGroupsStats;
     loading?: boolean;
     error?: IResponseError;
     additionalClusterProps?: AdditionalClusterProps;
 }
-export declare const ClusterInfo: ({ cluster, versionToColor, groupsStats, loading, error, additionalClusterProps, }: ClusterInfoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClusterInfo: ({ cluster, loading, error, additionalClusterProps, }: ClusterInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,24 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import { InfoViewer } from '../../../components/InfoViewer/InfoViewer';
 import { InfoViewerSkeleton } from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import { backend, customBackend } from '../../../store';
-import { DEVELOPER_UI_TITLE } from '../../../utils/constants';
-import { useTypedSelector } from '../../../utils/hooks';
 import { b } from './shared';
-import { getInfo, useGetVersionValues } from './utils';
+import { getInfo } from './utils';
 import './ClusterInfo.scss';
-export const ClusterInfo = ({ cluster, versionToColor, groupsStats = {}, loading, error, additionalClusterProps = {}, }) => {
-    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
-    const versionsValues = useGetVersionValues(cluster, versionToColor);
-    let internalLink = backend + '/internal';
-    if (singleClusterMode && !customBackend) {
-        internalLink = `/internal`;
-    }
+export const ClusterInfo = ({ cluster, loading, error, additionalClusterProps = {}, }) => {
     const { info = [], links = [] } = additionalClusterProps;
-    const clusterInfo = getInfo(cluster !== null && cluster !== void 0 ? cluster : {}, versionsValues, groupsStats, info, [
-        { title: DEVELOPER_UI_TITLE, url: internalLink },
-        ...links,
-    ]);
+    const clusterInfo = getInfo(cluster !== null && cluster !== void 0 ? cluster : {}, info, links);
     const getContent = () => {
         if (loading) {
             return _jsx(InfoViewerSkeleton, { className: b('skeleton'), rows: 9 });

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

@@ -1 +1 @@
-{"version":3,"file":"ClusterInfo.js","sourceRoot":"","sources":["../../../../src/containers/Cluster/ClusterInfo/ClusterInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAC,UAAU,EAAC,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAC,kBAAkB,EAAC,MAAM,2DAA2D,CAAC;AAC7F,OAAO,EAAC,OAAO,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAMtD,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAC,CAAC,EAAC,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAC,OAAO,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAW5B,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EACxB,OAAO,EACP,cAAc,EACd,WAAW,GAAG,EAAE,EAChB,OAAO,EACP,KAAK,EACL,sBAAsB,GAAG,EAAE,GACZ,EAAE,EAAE;IACnB,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAE/E,MAAM,cAAc,GAAG,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAEpE,IAAI,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;IAEzC,IAAI,iBAAiB,IAAI,CAAC,aAAa,EAAE,CAAC;QACtC,YAAY,GAAG,WAAW,CAAC;IAC/B,CAAC;IAED,MAAM,EAAC,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAC,GAAG,sBAAsB,CAAC;IAEvD,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,IAAI,EAAE;QAC1E,EAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,YAAY,EAAC;QAC9C,GAAG,KAAK;KACX,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,KAAC,kBAAkB,IAAC,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,GAAI,CAAC;QACrE,CAAC;QAED,IAAI,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,GAAI,CAAC;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACd,KAAK,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,EACtE,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,UAAU,EAAE,GAAO,IAC7C,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"ClusterInfo.js","sourceRoot":"","sources":["../../../../src/containers/Cluster/ClusterInfo/ClusterInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAC,UAAU,EAAC,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAC,kBAAkB,EAAC,MAAM,2DAA2D,CAAC;AAM7F,OAAO,EAAC,CAAC,EAAC,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAC,OAAO,EAAC,MAAM,SAAS,CAAC;AAEhC,OAAO,oBAAoB,CAAC;AAU5B,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EACxB,OAAO,EACP,OAAO,EACP,KAAK,EACL,sBAAsB,GAAG,EAAE,GACZ,EAAE,EAAE;IACnB,MAAM,EAAC,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAC,GAAG,sBAAsB,CAAC;IAEvD,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAExD,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,KAAC,kBAAkB,IAAC,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,GAAI,CAAC;QACrE,CAAC;QAED,IAAI,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,GAAI,CAAC;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACd,KAAK,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,EACtE,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,UAAU,EAAE,GAAO,IAC7C,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -1,7 +1,7 @@
 @import '../../../styles/mixins';
 
 .cluster-info {
-    padding-top: 20px;
+    padding: 20px 0;
 
     &__skeleton {
         margin-top: 5px;
@@ -11,16 +11,6 @@
         @include body-2-typography();
     }
 
-    &__system-tablets {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-
-        & .tablet {
-            margin-top: 2px;
-        }
-    }
-
     &__metrics {
         margin: 0 -15px;
         padding: 0 15px !important;
@@ -53,11 +43,4 @@
 
         margin-left: 5px;
     }
-    &__dc-count {
-        text-transform: lowercase;
-    }
-    &__nodes-states {
-        display: flex;
-        gap: var(--g-spacing-half);
-    }
 }

package/dist/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStatsBars.d.ts

@@ -1,7 +1,8 @@
-import type { DiskGroupsStats } from '../../../../../store/reducers/cluster/types';
+import type { DiskErasureGroupsStats } from '../../../../../store/reducers/cluster/types';
 import './DiskGroupsStatsBars.scss';
 interface DiskGroupsStatsProps {
-    stats: DiskGroupsStats;
+    stats: DiskErasureGroupsStats;
+    children: React.ReactNode;
 }
-export declare const DiskGroupsStatsBars: ({ stats }: DiskGroupsStatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DiskGroupsErasureStats: ({ stats, children }: DiskGroupsStatsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStatsBars.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { DefinitionList } from '@gravity-ui/components';
 import { ContentWithPopup } from '../../../../../components/ContentWithPopup/ContentWithPopup';
-import { InfoViewer } from '../../../../../components/InfoViewer';
-import { ProgressViewer } from '../../../../../components/ProgressViewer/ProgressViewer';
 import { formatBytes, getSizeWithSignificantDigits } from '../../../../../utils/bytesParsers';
 import { cn } from '../../../../../utils/cn';
 import i18n from '../../../i18n';
 import './DiskGroupsStatsBars.scss';
 const b = cn('ydb-disk-groups-stats');
-export const DiskGroupsStatsBars = ({ stats }) => {
-    return (_jsx("div", { className: b(), children: Object.values(stats).map((erasureStats) => (_jsx(ContentWithPopup, { placement: ['right'], content: _jsx(GroupsStatsPopupContent, { stats: erasureStats }), children: _jsx(ProgressViewer, { className: b('bar'), value: erasureStats.createdGroups, capacity: erasureStats.totalGroups }) }, erasureStats.erasure))) }));
+export const DiskGroupsErasureStats = ({ stats, children }) => {
+    return (_jsx("div", { className: b(), children: _jsx(ContentWithPopup, { placement: ['right'], pinOnClick: true, content: _jsx(GroupsStatsPopupContent, { stats: stats }), children: children }) }));
 };
 function GroupsStatsPopupContent({ stats }) {
     const { diskType, erasure, allocatedSize, availableSize } = stats;
@@ -18,26 +17,26 @@ function GroupsStatsPopupContent({ stats }) {
     const usage = Math.round((allocatedSize / (allocatedSize + availableSize)) * 100);
     const info = [
         {
-            label: i18n('disk-type'),
-            value: diskType,
+            name: i18n('disk-type'),
+            content: diskType,
         },
         {
-            label: i18n('erasure'),
-            value: erasure,
+            name: i18n('erasure'),
+            content: erasure,
         },
         {
-            label: i18n('allocated'),
-            value: convertedAllocatedSize,
+            name: i18n('allocated'),
+            content: convertedAllocatedSize,
         },
         {
-            label: i18n('available'),
-            value: convertedAvailableSize,
+            name: i18n('available'),
+            content: convertedAvailableSize,
         },
         {
-            label: i18n('usage'),
-            value: usage + '%',
+            name: i18n('usage'),
+            content: usage + '%',
         },
     ];
-    return _jsx(InfoViewer, { dots: true, info: info, className: b('popup-content'), size: "s" });
+    return _jsx(DefinitionList, { items: info, className: b('popup-content'), responsive: true });
 }
 //# sourceMappingURL=DiskGroupsStatsBars.js.map