1- import React from 'react' ;
2-
3- import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup' ;
41import { ResponseError } from '../../../components/Errors/ResponseError' ;
5- import type { InfoViewerItem } from '../../../components/InfoViewer/InfoViewer' ;
62import { InfoViewer } from '../../../components/InfoViewer/InfoViewer' ;
73import { InfoViewerSkeleton } from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton' ;
8- import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon' ;
9- import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer' ;
10- import { Tablet } from '../../../components/Tablet' ;
11- import { Tags } from '../../../components/Tags' ;
124import { backend , customBackend } from '../../../store' ;
13- import type {
14- ClusterGroupsStats ,
15- DiskErasureGroupsStats ,
16- DiskGroupsStats ,
17- } from '../../../store/reducers/cluster/types' ;
18- import { nodesApi } from '../../../store/reducers/nodes/nodes' ;
19- import type { AdditionalClusterProps , ClusterLink } from '../../../types/additionalProps' ;
5+ import type { ClusterGroupsStats } from '../../../store/reducers/cluster/types' ;
6+ import type { AdditionalClusterProps } from '../../../types/additionalProps' ;
207import type { TClusterInfo } from '../../../types/api/cluster' ;
218import type { IResponseError } from '../../../types/api/error' ;
22- import type { VersionToColorMap , VersionValue } from '../../../types/versions' ;
23- import { formatBytes , getSizeWithSignificantDigits } from '../../../utils/bytesParsers' ;
24- import { cn } from '../../../utils/cn' ;
9+ import type { VersionToColorMap } from '../../../types/versions' ;
2510import { DEVELOPER_UI_TITLE } from '../../../utils/constants' ;
26- import { formatStorageValues } from '../../../utils/dataFormatters/dataFormatters' ;
2711import { useTypedSelector } from '../../../utils/hooks' ;
28- import { parseNodeGroupsToVersionsValues , parseNodesToVersionsValues } from '../../../utils/versions' ;
29- import { VersionsBar } from '../VersionsBar/VersionsBar' ;
30- import i18n from '../i18n' ;
3112
32- import { compareTablets } from './utils' ;
13+ import { b } from './shared' ;
14+ import { getInfo , useGetVersionValues } from './utils' ;
3315
3416import './ClusterInfo.scss' ;
3517
36- const b = cn ( 'cluster-info' ) ;
37-
38- interface GroupsStatsPopupContentProps {
39- stats : DiskErasureGroupsStats ;
40- }
41-
42- const GroupsStatsPopupContent = ( { stats} : GroupsStatsPopupContentProps ) => {
43- const { diskType, erasure, allocatedSize, availableSize} = stats ;
44-
45- const sizeToConvert = getSizeWithSignificantDigits ( Math . max ( allocatedSize , availableSize ) , 2 ) ;
46-
47- const convertedAllocatedSize = formatBytes ( { value : allocatedSize , size : sizeToConvert } ) ;
48- const convertedAvailableSize = formatBytes ( { value : availableSize , size : sizeToConvert } ) ;
49-
50- const usage = Math . round ( ( allocatedSize / ( allocatedSize + availableSize ) ) * 100 ) ;
51-
52- const info = [
53- {
54- label : i18n ( 'disk-type' ) ,
55- value : diskType ,
56- } ,
57- {
58- label : i18n ( 'erasure' ) ,
59- value : erasure ,
60- } ,
61- {
62- label : i18n ( 'allocated' ) ,
63- value : convertedAllocatedSize ,
64- } ,
65- {
66- label : i18n ( 'available' ) ,
67- value : convertedAvailableSize ,
68- } ,
69- {
70- label : i18n ( 'usage' ) ,
71- value : usage + '%' ,
72- } ,
73- ] ;
74-
75- return (
76- < InfoViewer dots = { true } info = { info } className = { b ( 'groups-stats-popup-content' ) } size = "s" />
77- ) ;
78- } ;
79-
80- interface DiskGroupsStatsProps {
81- stats : DiskGroupsStats ;
82- }
83-
84- const DiskGroupsStatsBars = ( { stats} : DiskGroupsStatsProps ) => {
85- return (
86- < div className = { b ( 'storage-groups-stats' ) } >
87- { Object . values ( stats ) . map ( ( erasureStats ) => (
88- < ContentWithPopup
89- placement = { [ 'right' ] }
90- key = { erasureStats . erasure }
91- content = { < GroupsStatsPopupContent stats = { erasureStats } /> }
92- >
93- < ProgressViewer
94- className = { b ( 'groups-stats-bar' ) }
95- value = { erasureStats . createdGroups }
96- capacity = { erasureStats . totalGroups }
97- />
98- </ ContentWithPopup >
99- ) ) }
100- </ div >
101- ) ;
102- } ;
103-
104- const getGroupsStatsFields = ( groupsStats : ClusterGroupsStats ) => {
105- return Object . keys ( groupsStats ) . map ( ( diskType ) => {
106- return {
107- label : i18n ( 'storage-groups' , { diskType} ) ,
108- value : < DiskGroupsStatsBars stats = { groupsStats [ diskType ] } /> ,
109- } ;
110- } ) ;
111- } ;
112-
113- const getInfo = (
114- cluster : TClusterInfo ,
115- versionsValues : VersionValue [ ] ,
116- groupsStats : ClusterGroupsStats ,
117- additionalInfo : InfoViewerItem [ ] ,
118- links : ClusterLink [ ] ,
119- ) => {
120- const info : InfoViewerItem [ ] = [ ] ;
121-
122- if ( cluster . DataCenters ) {
123- info . push ( {
124- label : i18n ( 'dc' ) ,
125- value : < Tags tags = { cluster . DataCenters } /> ,
126- } ) ;
127- }
128-
129- if ( cluster . SystemTablets ) {
130- const tablets = cluster . SystemTablets . slice ( 0 ) . sort ( compareTablets ) ;
131- info . push ( {
132- label : i18n ( 'tablets' ) ,
133- value : (
134- < div className = { b ( 'system-tablets' ) } >
135- { tablets . map ( ( tablet , tabletIndex ) => (
136- < Tablet key = { tabletIndex } tablet = { tablet } />
137- ) ) }
138- </ div >
139- ) ,
140- } ) ;
141- }
142-
143- if ( cluster . Tenants ) {
144- info . push ( {
145- label : i18n ( 'databases' ) ,
146- value : cluster . Tenants ,
147- } ) ;
148- }
149-
150- info . push (
151- {
152- label : i18n ( 'nodes' ) ,
153- value : < ProgressViewer value = { cluster ?. NodesAlive } capacity = { cluster ?. NodesTotal } /> ,
154- } ,
155- {
156- label : i18n ( 'load' ) ,
157- value : < ProgressViewer value = { cluster ?. LoadAverage } capacity = { cluster ?. NumberOfCpus } /> ,
158- } ,
159- {
160- label : i18n ( 'storage-size' ) ,
161- value : (
162- < ProgressViewer
163- value = { cluster ?. StorageUsed }
164- capacity = { cluster ?. StorageTotal }
165- formatValues = { formatStorageValues }
166- />
167- ) ,
168- } ,
169- ) ;
170-
171- if ( Object . keys ( groupsStats ) . length ) {
172- info . push ( ...getGroupsStatsFields ( groupsStats ) ) ;
173- }
174-
175- info . push (
176- ...additionalInfo ,
177- {
178- label : i18n ( 'links' ) ,
179- value : (
180- < div className = { b ( 'links' ) } >
181- { links . map ( ( { title, url} ) => (
182- < LinkWithIcon key = { title } title = { title } url = { url } />
183- ) ) }
184- </ div >
185- ) ,
186- } ,
187- {
188- label : i18n ( 'versions' ) ,
189- value : < VersionsBar versionsValues = { versionsValues } /> ,
190- } ,
191- ) ;
192-
193- return info ;
194- } ;
195-
19618interface ClusterInfoProps {
19719 cluster ?: TClusterInfo ;
19820 versionToColor ?: VersionToColorMap ;
@@ -212,20 +34,7 @@ export const ClusterInfo = ({
21234} : ClusterInfoProps ) => {
21335 const singleClusterMode = useTypedSelector ( ( state ) => state . singleClusterMode ) ;
21436
215- const { currentData} = nodesApi . useGetNodesQuery ( {
216- tablets : false ,
217- group : 'Version' ,
218- } ) ;
219-
220- const versionsValues = React . useMemo ( ( ) => {
221- if ( ! currentData ) {
222- return [ ] ;
223- }
224- if ( Array . isArray ( currentData . NodeGroups ) ) {
225- return parseNodeGroupsToVersionsValues ( currentData . NodeGroups , versionToColor ) ;
226- }
227- return parseNodesToVersionsValues ( currentData . Nodes , versionToColor ) ;
228- } , [ currentData , versionToColor ] ) ;
37+ const versionsValues = useGetVersionValues ( cluster , versionToColor ) ;
22938
23039 let internalLink = backend + '/internal' ;
23140
0 commit comments