Skip to content

Commit a805a49

Browse files
bexsoftBenjamin Perez
andauthored
Added loaders to bucket information block (#141)
Co-authored-by: Benjamin Perez <[email protected]>
1 parent 296e4ff commit a805a49

File tree

2 files changed

+198
-192
lines changed

2 files changed

+198
-192
lines changed

portal-ui/bindata_assetfs.go

Lines changed: 147 additions & 170 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import Paper from "@material-ui/core/Paper";
2121
import Grid from "@material-ui/core/Grid";
2222
import Tabs from "@material-ui/core/Tabs";
2323
import Tab from "@material-ui/core/Tab";
24+
import CircularProgress from "@material-ui/core/CircularProgress";
2425
import api from "../../../../common/api";
2526
import { BucketEvent, BucketEventList, BucketInfo, BucketList } from "../types";
2627
import { Button } from "@material-ui/core";
@@ -86,7 +87,7 @@ const styles = (theme: Theme) =>
8687
gridGap: 8,
8788
justifyContent: "flex-start",
8889
alignItems: "center",
89-
"& div": {
90+
"& div:not(.MuiCircularProgress-root)": {
9091
display: "flex",
9192
alignItems: "center",
9293
},
@@ -127,10 +128,12 @@ interface IViewBucketState {
127128
info: BucketInfo | null;
128129
records: BucketEvent[];
129130
totalRecords: number;
130-
loading: boolean;
131+
loadingBucket: boolean;
132+
loadingEvents: boolean;
131133
loadingSize: boolean;
132134
error: string;
133135
deleteError: string;
136+
errBucket: string;
134137
setAccessPolicyScreenOpen: boolean;
135138
page: number;
136139
rowsPerPage: number;
@@ -147,10 +150,12 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
147150
info: null,
148151
records: [],
149152
totalRecords: 0,
150-
loading: false,
151-
loadingSize: false,
153+
loadingBucket: true,
154+
loadingEvents: true,
155+
loadingSize: true,
152156
error: "",
153157
deleteError: "",
158+
errBucket: "",
154159
setAccessPolicyScreenOpen: false,
155160
page: 0,
156161
rowsPerPage: 10,
@@ -163,7 +168,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
163168
};
164169

165170
fetchEvents() {
166-
this.setState({ loading: true }, () => {
171+
this.setState({ loadingBucket: true }, () => {
167172
const { page } = this.state;
168173
const { match } = this.props;
169174
const bucketName = match.params["bucketName"];
@@ -174,7 +179,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
174179
const total = get(res, "total", 0);
175180

176181
this.setState({
177-
loading: false,
182+
loadingEvents: false,
178183
records: events || [],
179184
totalRecords: total,
180185
error: "",
@@ -188,7 +193,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
188193
}
189194
})
190195
.catch((err: any) => {
191-
this.setState({ loading: false, error: err });
196+
this.setState({ loadingEvents: false, error: err });
192197
});
193198
});
194199
}
@@ -221,6 +226,21 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
221226
});
222227
}
223228

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+
224244
closeAddModalAndRefresh() {
225245
this.setState({ setAccessPolicyScreenOpen: false }, () => {
226246
this.loadInfo();
@@ -235,17 +255,6 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
235255
});
236256
}
237257

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-
249258
componentDidMount(): void {
250259
this.loadInfo();
251260
this.fetchEvents();
@@ -261,13 +270,15 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
261270
records,
262271
totalRecords,
263272
setAccessPolicyScreenOpen,
264-
loading,
273+
loadingEvents,
274+
loadingBucket,
265275
page,
266276
rowsPerPage,
267277
deleteOpen,
268278
addScreenOpen,
269279
selectedEvent,
270280
bucketSize,
281+
loadingSize,
271282
} = this.state;
272283

273284
const offset = page * rowsPerPage;
@@ -341,10 +352,28 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
341352
<div className={classes.gridContainer}>
342353
<div>Access Policy:</div>
343354
<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+
)}
345364
</div>
346365
<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>
348377
</div>
349378
</Paper>
350379
</div>
@@ -411,7 +440,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
411440
{ label: "Prefix", elementKey: "prefix" },
412441
{ label: "Suffix", elementKey: "suffix" },
413442
]}
414-
isLoading={loading}
443+
isLoading={loadingEvents}
415444
records={filteredRecords}
416445
entityName="Events"
417446
idField="id"

0 commit comments

Comments
 (0)