From 38c85b2a7647e1af6e38a23379eb352083df37ae Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Fri, 1 Dec 2023 16:12:15 +0300
Subject: [PATCH] fixup! feat(ClusterInfo): display groups stats

---
 .../Cluster/ClusterInfo/ClusterInfo.tsx       | 45 +++++++++++--------
 src/store/reducers/cluster/types.ts           |  2 +-
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
index 1858a0db0..d6c1c585e 100644
--- a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
+++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
@@ -28,6 +28,7 @@ import {
 import type {
     ClusterGroupsStats,
     DiskErasureGroupsStats,
+    DiskGroupsStats,
 } from '../../../store/reducers/cluster/types';
 
 import {VersionsBar} from '../VersionsBar/VersionsBar';
@@ -82,29 +83,35 @@ const GroupsStatsPopupContent = ({stats}: GroupsStatsPopupContentProps) => {
     );
 };
 
+interface DiskGroupsStatsProps {
+    stats: DiskGroupsStats;
+}
+
+const DiskGroupsStatsBars = ({stats}: DiskGroupsStatsProps) => {
+    return (
+        <div className={b('storage-groups-stats')}>
+            {Object.values(stats).map((erasureStats) => (
+                <ContentWithPopup
+                    placement={['right']}
+                    key={erasureStats.erasure}
+                    content={<GroupsStatsPopupContent stats={erasureStats} />}
+                >
+                    <ProgressViewer
+                        className={b('groups-stats-bar')}
+                        value={erasureStats.createdGroups}
+                        capacity={erasureStats.totalGroups}
+                    />
+                </ContentWithPopup>
+            ))}
+        </div>
+    );
+};
+
 const getGroupsStatsFields = (groupsStats: ClusterGroupsStats) => {
     return Object.keys(groupsStats).map((diskType) => {
         return {
             label: i18n('storage-groups', {diskType}),
-            value: (
-                <div className={b('storage-groups-stats')}>
-                    {Object.values(groupsStats[diskType]).map((erasureStats) => {
-                        return (
-                            <ContentWithPopup
-                                placement={['right']}
-                                key={erasureStats.erasure}
-                                content={<GroupsStatsPopupContent stats={erasureStats} />}
-                            >
-                                <ProgressViewer
-                                    className={b('groups-stats-bar')}
-                                    value={erasureStats.createdGroups}
-                                    capacity={erasureStats.totalGroups}
-                                />
-                            </ContentWithPopup>
-                        );
-                    })}
-                </div>
-            ),
+            value: <DiskGroupsStatsBars stats={groupsStats[diskType]} />,
         };
     });
 };
diff --git a/src/store/reducers/cluster/types.ts b/src/store/reducers/cluster/types.ts
index 8d91bf9e3..9f1ad4428 100644
--- a/src/store/reducers/cluster/types.ts
+++ b/src/store/reducers/cluster/types.ts
@@ -14,7 +14,7 @@ export interface DiskErasureGroupsStats {
 }
 
 /** Keys - erasure types */
-type DiskGroupsStats = Record<string, DiskErasureGroupsStats>;
+export type DiskGroupsStats = Record<string, DiskErasureGroupsStats>;
 
 /** Keys - PDisks types */
 export type ClusterGroupsStats = Record<string, DiskGroupsStats>;