@@ -21,6 +21,7 @@ import Paper from "@material-ui/core/Paper";
21
21
import Grid from "@material-ui/core/Grid" ;
22
22
import Tabs from "@material-ui/core/Tabs" ;
23
23
import Tab from "@material-ui/core/Tab" ;
24
+ import CircularProgress from "@material-ui/core/CircularProgress" ;
24
25
import api from "../../../../common/api" ;
25
26
import { BucketEvent , BucketEventList , BucketInfo , BucketList } from "../types" ;
26
27
import { Button } from "@material-ui/core" ;
@@ -86,7 +87,7 @@ const styles = (theme: Theme) =>
86
87
gridGap : 8 ,
87
88
justifyContent : "flex-start" ,
88
89
alignItems : "center" ,
89
- "& div" : {
90
+ "& div:not(.MuiCircularProgress-root) " : {
90
91
display : "flex" ,
91
92
alignItems : "center" ,
92
93
} ,
@@ -127,10 +128,12 @@ interface IViewBucketState {
127
128
info : BucketInfo | null ;
128
129
records : BucketEvent [ ] ;
129
130
totalRecords : number ;
130
- loading : boolean ;
131
+ loadingBucket : boolean ;
132
+ loadingEvents : boolean ;
131
133
loadingSize : boolean ;
132
134
error : string ;
133
135
deleteError : string ;
136
+ errBucket : string ;
134
137
setAccessPolicyScreenOpen : boolean ;
135
138
page : number ;
136
139
rowsPerPage : number ;
@@ -147,10 +150,12 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
147
150
info : null ,
148
151
records : [ ] ,
149
152
totalRecords : 0 ,
150
- loading : false ,
151
- loadingSize : false ,
153
+ loadingBucket : true ,
154
+ loadingEvents : true ,
155
+ loadingSize : true ,
152
156
error : "" ,
153
157
deleteError : "" ,
158
+ errBucket : "" ,
154
159
setAccessPolicyScreenOpen : false ,
155
160
page : 0 ,
156
161
rowsPerPage : 10 ,
@@ -163,7 +168,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
163
168
} ;
164
169
165
170
fetchEvents ( ) {
166
- this . setState ( { loading : true } , ( ) => {
171
+ this . setState ( { loadingBucket : true } , ( ) => {
167
172
const { page } = this . state ;
168
173
const { match } = this . props ;
169
174
const bucketName = match . params [ "bucketName" ] ;
@@ -174,7 +179,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
174
179
const total = get ( res , "total" , 0 ) ;
175
180
176
181
this . setState ( {
177
- loading : false ,
182
+ loadingEvents : false ,
178
183
records : events || [ ] ,
179
184
totalRecords : total ,
180
185
error : "" ,
@@ -188,7 +193,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
188
193
}
189
194
} )
190
195
. catch ( ( err : any ) => {
191
- this . setState ( { loading : false , error : err } ) ;
196
+ this . setState ( { loadingEvents : false , error : err } ) ;
192
197
} ) ;
193
198
} ) ;
194
199
}
@@ -221,6 +226,21 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
221
226
} ) ;
222
227
}
223
228
229
+ loadInfo ( ) {
230
+ const { match } = this . props ;
231
+ const bucketName = match . params [ "bucketName" ] ;
232
+ this . setState ( { loadingBucket : true } , ( ) => {
233
+ api
234
+ . invoke ( "GET" , `/api/v1/buckets/${ bucketName } ` )
235
+ . then ( ( res : BucketInfo ) => {
236
+ this . setState ( { loadingBucket : false , info : res } ) ;
237
+ } )
238
+ . catch ( ( err ) => {
239
+ this . setState ( { loadingBucket : false , errBucket : err } ) ;
240
+ } ) ;
241
+ } ) ;
242
+ }
243
+
224
244
closeAddModalAndRefresh ( ) {
225
245
this . setState ( { setAccessPolicyScreenOpen : false } , ( ) => {
226
246
this . loadInfo ( ) ;
@@ -235,17 +255,6 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
235
255
} ) ;
236
256
}
237
257
238
- loadInfo ( ) {
239
- const { match } = this . props ;
240
- const bucketName = match . params [ "bucketName" ] ;
241
- api
242
- . invoke ( "GET" , `/api/v1/buckets/${ bucketName } ` )
243
- . then ( ( res : BucketInfo ) => {
244
- this . setState ( { info : res } ) ;
245
- } )
246
- . catch ( ( err ) => { } ) ;
247
- }
248
-
249
258
componentDidMount ( ) : void {
250
259
this . loadInfo ( ) ;
251
260
this . fetchEvents ( ) ;
@@ -261,13 +270,15 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
261
270
records,
262
271
totalRecords,
263
272
setAccessPolicyScreenOpen,
264
- loading,
273
+ loadingEvents,
274
+ loadingBucket,
265
275
page,
266
276
rowsPerPage,
267
277
deleteOpen,
268
278
addScreenOpen,
269
279
selectedEvent,
270
280
bucketSize,
281
+ loadingSize,
271
282
} = this . state ;
272
283
273
284
const offset = page * rowsPerPage ;
@@ -341,10 +352,28 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
341
352
< div className = { classes . gridContainer } >
342
353
< div > Access Policy:</ div >
343
354
< div className = { classes . capitalizeFirst } >
344
- { accessPolicy . toLowerCase ( ) }
355
+ { loadingBucket ? (
356
+ < CircularProgress
357
+ color = "primary"
358
+ size = { 16 }
359
+ variant = "indeterminate"
360
+ />
361
+ ) : (
362
+ accessPolicy . toLowerCase ( )
363
+ ) }
345
364
</ div >
346
365
< div > Reported Usage:</ div >
347
- < div > { niceBytes ( bucketSize ) } </ div >
366
+ < div >
367
+ { loadingSize ? (
368
+ < CircularProgress
369
+ color = "primary"
370
+ size = { 16 }
371
+ variant = "indeterminate"
372
+ />
373
+ ) : (
374
+ niceBytes ( bucketSize )
375
+ ) }
376
+ </ div >
348
377
</ div >
349
378
</ Paper >
350
379
</ div >
@@ -411,7 +440,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
411
440
{ label : "Prefix" , elementKey : "prefix" } ,
412
441
{ label : "Suffix" , elementKey : "suffix" } ,
413
442
] }
414
- isLoading = { loading }
443
+ isLoading = { loadingEvents }
415
444
records = { filteredRecords }
416
445
entityName = "Events"
417
446
idField = "id"
0 commit comments