fixup! feat(ClusterInfo): display groups stats

ydb-platform · Dec 1, 2023 · 38c85b2 · 38c85b2
1 parent 79e5347
commit 38c85b2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git 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
@@ -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>;