diff --git a/src/views/statistics/StatisticsView.js b/src/views/statistics/StatisticsView.js index 6d79a734b55c647b8138badc21db0a2377f6fe3c..f75fcb271d707cb8b7cb19c7ddf646e6e4968a23 100644 --- a/src/views/statistics/StatisticsView.js +++ b/src/views/statistics/StatisticsView.js @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { Paper, Grid, useTheme, makeStyles } from "@material-ui/core"; +import { Paper, Grid, useTheme, makeStyles, LinearProgress } from "@material-ui/core"; import { useStatistics } from "../../api/SwaggerApi"; import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar"; import { RootContainer } from "../../components/common/Container/RootContainer"; @@ -53,10 +53,13 @@ export function StatisticsView() { return ( <RootContainer> <Grid container direction="column" spacing={theme.spacing(0.5)}> - {statistics && + <Grid item xs={12}> + <h2>Statistics</h2> + </Grid> + + {statistics ? <> <Grid item xs={12}> - <h2>Statistics</h2> <PrimeKeyValueTable obj={prometheusStats} labels={["Network monitoring"]} /> </Grid> <Grid item xs={12}> @@ -66,8 +69,13 @@ export function StatisticsView() { <PrimeKeyValueTable obj={statistics.networkScopesIocCount} labels={["IOCs per network scope according to the deployment tool"]} /> </Grid> </> + : + <Grid item xs={12}> + <div style={{ width: "100%" }}><LinearProgress color="primary" /></div> + </Grid> } + <Grid item xs={12}> <Paper className={classes.paper}> <DeploymentLineChart title="Successful deployments over time by the deployment tool" chartLabel="Deployed IOCs in time" hook={useDeployedIOCStatistics} />