11import * as React from "react" ;
22import { Link } from "@fluentui/react" ;
3- import { Divider , Toolbar , ToolbarButton } from "@fluentui/react-components " ;
4- import { ArrowClockwise20Regular } from "@fluentui/react-icons " ;
3+ import { MachineService } from "@hpcc-js/comms " ;
4+ import { scopedLogger } from "@hpcc-js/util " ;
55import { ComponentDetails as ComponentDetailsWidget , Summary as SummaryWidget } from "src/DiskUsage" ;
66import nlsHPCC from "src/nlsHPCC" ;
77import * as Utility from "src/Utility" ;
88import { AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter" ;
9- import { HolyGrail } from "../layouts/HolyGrail" ;
10- import { SizeMe } from "../layouts/SizeMe" ;
9+ import { ReflexContainer , ReflexElement , ReflexSplitter , classNames , styles } from "../layouts/react-reflex" ;
1110import { pushUrl } from "../util/history" ;
1211import { FluentGrid , useFluentStoreState } from "./controls/Grid" ;
13- import { FolderUsageCards } from "./cards/DiskUsageCard" ;
14- import { useTargetClusterUsageEx } from "../hooks/diskUsage" ;
1512
16- //
17- // Disk Usage Components
18- //
13+ const logger = scopedLogger ( "src-react/components/DiskUsage.tsx" ) ;
14+
15+ const machineService = new MachineService ( { baseUrl : "" } ) ;
1916
2017interface SummaryProps {
2118 cluster ?: string ;
@@ -37,17 +34,15 @@ export const Summary: React.FunctionComponent<SummaryProps> = ({
3734 return < AutosizeHpccJSComponent widget = { summary } > </ AutosizeHpccJSComponent > ;
3835} ;
3936
40- interface ClusterUsageProps {
37+ interface DetailsProps {
4138 cluster : string ;
4239}
4340
44- export const ClusterUsage : React . FunctionComponent < ClusterUsageProps > = ( {
41+ export const Details : React . FunctionComponent < DetailsProps > = ( {
4542 cluster
4643} ) => {
4744
4845 const { refreshTable } = useFluentStoreState ( { } ) ;
49- const [ refreshToken , setRefreshToken ] = React . useState ( 0 ) ;
50- const { data : usage , refresh } = useTargetClusterUsageEx ( cluster ) ;
5146
5247 // Grid ---
5348 const columns = React . useMemo ( ( ) => {
@@ -77,48 +72,51 @@ export const ClusterUsage: React.FunctionComponent<ClusterUsageProps> = ({
7772
7873 type Columns = typeof columns ;
7974 type Row = { __hpcc_id : string } & { [ K in keyof Columns ] : string | number } ;
80- const data = React . useMemo < Row [ ] > ( ( ) => {
81- const rows : Row [ ] = [ ] ;
82- ( usage ?? [ ] ) . forEach ( component => {
83- component . ComponentUsages . forEach ( cu => {
84- cu . MachineUsages . forEach ( mu => {
85- mu . DiskUsages . forEach ( ( du , i ) => {
86- rows . push ( {
87- __hpcc_id : `__usage_${ i } ,
88- PercentUsed : Math . round ( ( du . InUse / du . Total ) * 100 ) ,
89- Component : cu . Name ,
90- IPAddress : mu . Name ,
91- Type : du . Name ,
92- Path : du . Path ,
93- InUse : Utility . convertedSize ( du . InUse ) ,
94- Total : Utility . convertedSize ( du . Total )
75+ const [ data , setData ] = React . useState < Row [ ] > ( [ ] ) ;
76+
77+ const refreshData = React . useCallback ( ( ) => {
78+ machineService . GetTargetClusterUsageEx ( [ cluster ] )
79+ . then ( response => {
80+ const _data : Row [ ] = [ ] ;
81+ if ( response ) {
82+ response . forEach ( component => {
83+ component . ComponentUsages . forEach ( cu => {
84+ cu . MachineUsages . forEach ( mu => {
85+ mu . DiskUsages . forEach ( ( du , i ) => {
86+ _data . push ( {
87+ __hpcc_id : `__usage_${ i } ,
88+ PercentUsed : Math . round ( ( du . InUse / du . Total ) * 100 ) ,
89+ Component : cu . Name ,
90+ IPAddress : mu . Name ,
91+ Type : du . Name ,
92+ Path : du . Path ,
93+ InUse : Utility . convertedSize ( du . InUse ) ,
94+ Total : Utility . convertedSize ( du . Total )
95+ } ) ;
96+ } ) ;
97+ } ) ;
9598 } ) ;
9699 } ) ;
97- } ) ;
98- } ) ;
99- } ) ;
100- return rows ;
101- } , [ usage ] ) ;
102-
103- return < HolyGrail
104- header = {
105- < Toolbar >
106- < ToolbarButton appearance = "subtle" icon = { < ArrowClockwise20Regular /> } aria-label = { nlsHPCC . Refresh } onClick = { ( ) => { refresh ( ) ; setRefreshToken ( t => t + 1 ) ; } } >
107- { nlsHPCC . Refresh }
108- </ ToolbarButton >
109- </ Toolbar >
110- }
111- main = { < SizeMe > { ( { size } ) => {
112- return < div style = { { position : "relative" , width : "100%" , height : "100%" } } >
113- < div style = { { position : "absolute" , width : "100%" , height : `${ size . height } , overflowY : "auto" } } >
114- < Divider > { nlsHPCC . Category } </ Divider >
115- < FolderUsageCards cluster = { cluster } refreshToken = { refreshToken } />
116- < Divider > { nlsHPCC . Folders } </ Divider >
117- < FluentGrid data = { data } primaryID = "__hpcc_id" sort = { { attribute : "__hpcc_id" , descending : false } } columns = { columns } setSelection = { ( ) => null } setTotal = { ( ) => null } refresh = { refreshTable } />
118- </ div >
119- </ div > ;
120- } } </ SizeMe > }
121- /> ;
100+ }
101+ setData ( _data ) ;
102+ } )
103+ . catch ( err => logger . error ( err ) )
104+ ;
105+ } , [ cluster ] ) ;
106+
107+ React . useEffect ( ( ) => {
108+ refreshData ( ) ;
109+ } , [ refreshData ] ) ;
110+
111+ return < FluentGrid
112+ data = { data }
113+ primaryID = { "__hpcc_id" }
114+ sort = { { attribute : "__hpcc_id" , descending : false } }
115+ columns = { columns }
116+ setSelection = { ( ) => null }
117+ setTotal = { ( ) => null }
118+ refresh = { refreshTable }
119+ > </ FluentGrid > ;
122120} ;
123121
124122interface MachineUsageProps {
@@ -137,3 +135,23 @@ export const MachineUsage: React.FunctionComponent<MachineUsageProps> = ({
137135
138136 return < AutosizeHpccJSComponent widget = { summary } > </ AutosizeHpccJSComponent > ;
139137} ;
138+
139+ interface ClusterUsageProps {
140+ cluster : string ;
141+ }
142+
143+ export const ClusterUsage : React . FunctionComponent < ClusterUsageProps > = ( {
144+ cluster
145+ } ) => {
146+ return < ReflexContainer orientation = "horizontal" >
147+ < ReflexElement minSize = { 100 } size = { 100 } style = { { overflow : "hidden" } } >
148+ < Summary cluster = { cluster } />
149+ </ ReflexElement >
150+ < ReflexSplitter style = { styles . reflexSplitter } >
151+ < div className = { classNames . reflexSplitterDiv } > </ div >
152+ </ ReflexSplitter >
153+ < ReflexElement style = { { overflow : "hidden" } } >
154+ < Details cluster = { cluster } />
155+ </ ReflexElement >
156+ </ ReflexContainer > ;
157+ } ;
0 commit comments