ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-06-11 20:21:36 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Show loader on aggregation interval change or refresh.

Browse Source
This commit is contained in:
Orne Brocaar
2022-07-19 11:13:47 +01:00
parent b5c1fd4082
commit 11d433a394
1 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ui/src/views/devices/DeviceDashboard.tsx
View File

@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
import moment from "moment"; import moment from "moment";
import { ReloadOutlined } from "@ant-design/icons"; import { ReloadOutlined } from "@ant-design/icons";
import { Descriptions, Space, Card, Statistic, Row, Col, Tabs, Radio, RadioChangeEvent, Button } from "antd"; import { Descriptions, Space, Card, Statistic, Row, Col, Tabs, Radio, RadioChangeEvent, Button, Spin } from "antd";
import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb"; import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb";
import { import {
@ -31,6 +31,8 @@ interface IState {
metricsAggregation: Aggregation; metricsAggregation: Aggregation;
deviceMetrics?: GetDeviceMetricsResponse; deviceMetrics?: GetDeviceMetricsResponse;
deviceLinkMetrics?: GetDeviceLinkMetricsResponse; deviceLinkMetrics?: GetDeviceLinkMetricsResponse;
deviceMetricsLoaded: boolean;
deviceLinkMetricsLoaded: boolean;
} }
class DeviceDashboard extends Component<IProps, IState> { class DeviceDashboard extends Component<IProps, IState> {
@ -39,6 +41,8 @@ class DeviceDashboard extends Component<IProps, IState> {
this.state = { this.state = {
metricsAggregation: Aggregation.DAY, metricsAggregation: Aggregation.DAY,
deviceMetricsLoaded: false,
deviceLinkMetricsLoaded: false,
}; };
} }
@ -59,8 +63,16 @@ class DeviceDashboard extends Component<IProps, IState> {
start = start.subtract(12, "months"); start = start.subtract(12, "months");
} }
this.loadLinkMetrics(start.toDate(), end.toDate(), agg); this.setState(
this.loadDeviceMetrics(start.toDate(), end.toDate(), agg); {
deviceMetricsLoaded: false,
deviceLinkMetricsLoaded: false,
},
() => {
this.loadLinkMetrics(start.toDate(), end.toDate(), agg);
this.loadDeviceMetrics(start.toDate(), end.toDate(), agg);
},
);
}; };
loadDeviceMetrics = (start: Date, end: Date, agg: Aggregation) => { loadDeviceMetrics = (start: Date, end: Date, agg: Aggregation) => {
@ -79,6 +91,7 @@ class DeviceDashboard extends Component<IProps, IState> {
DeviceStore.getMetrics(req, (resp: GetDeviceMetricsResponse) => { DeviceStore.getMetrics(req, (resp: GetDeviceMetricsResponse) => {
this.setState({ this.setState({
deviceMetrics: resp, deviceMetrics: resp,
deviceMetricsLoaded: true,
}); });
}); });
}; };
@ -99,6 +112,7 @@ class DeviceDashboard extends Component<IProps, IState> {
DeviceStore.getLinkMetrics(req, (resp: GetDeviceLinkMetricsResponse) => { DeviceStore.getLinkMetrics(req, (resp: GetDeviceLinkMetricsResponse) => {
this.setState({ this.setState({
deviceLinkMetrics: resp, deviceLinkMetrics: resp,
deviceLinkMetricsLoaded: true,
}); });
}); });
}; };
@ -164,14 +178,23 @@ class DeviceDashboard extends Component<IProps, IState> {
lastSeenAt = moment(this.props.lastSeenAt).format("YYYY-MM-DD HH:mm:ss"); lastSeenAt = moment(this.props.lastSeenAt).format("YYYY-MM-DD HH:mm:ss");
} }
const loading = !this.state.deviceLinkMetricsLoaded || !this.state.deviceMetrics;
const aggregations = ( const aggregations = (
<Space direction="horizontal"> <Space direction="horizontal">
{loading && <Spin size="small" />}
<Radio.Group value={this.state.metricsAggregation} onChange={this.onMetricsAggregationChange} size="small"> <Radio.Group value={this.state.metricsAggregation} onChange={this.onMetricsAggregationChange} size="small">
<Radio.Button value={Aggregation.HOUR}>24h</Radio.Button> <Radio.Button value={Aggregation.HOUR} disabled={loading}>
<Radio.Button value={Aggregation.DAY}>31d</Radio.Button> 24h
<Radio.Button value={Aggregation.MONTH}>1y</Radio.Button> </Radio.Button>
<Radio.Button value={Aggregation.DAY} disabled={loading}>
31d
</Radio.Button>
<Radio.Button value={Aggregation.MONTH} disabled={loading}>
1y
</Radio.Button>
</Radio.Group> </Radio.Group>
<Button type="primary" size="small" icon={<ReloadOutlined />} onClick={this.loadMetrics} /> <Button type="primary" size="small" icon={<ReloadOutlined />} onClick={this.loadMetrics} disabled={loading} />
</Space> </Space>
); );