CE-2131: Statistics improvement

src/components/statistics/ActiveIOCChart/ActiveIOCChart.js

 import React from "react";
 import { useCurrentlyActiveIOCs } from "../../../api/SwaggerApi";
 import { useEffect } from "react";
-import { LinearProgress, useTheme } from "@mui/material";
+import { LinearProgress, useTheme, Typography } from "@mui/material";
 import { circularPalette } from "../../common/Helper";
 import {
   BarChart,
@@ -60,9 +60,7 @@ export default function ActiveIOCChart({ title }) {
 
   return activeIocs ? (
     <>
-      <div style={{ textAlign: "center" }}>
-        <h3>{title}</h3>
-      </div>
+      <Typography variant="h2">{title}</Typography>
       <ResponsiveContainer
         width="100%"
         aspect={2}

src/components/statistics/DeploymentLineChart/DeploymentLineChart.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useEffect } from "react";
 import { formatDateOnly } from "../../common/Helper";
 import { circularPalette } from "../../common/Helper";
-import { LinearProgress, useTheme } from "@mui/material";
+import { LinearProgress, useTheme, Typography } from "@mui/material";
 import {
   AreaChart,
   Area,
@@ -25,9 +25,7 @@ export default function DeploymentLineChart({ title, chartLabel, hook }) {
 
   return iocDeployments ? (
     <>
-      <div style={{ textAlign: "center" }}>
-        <h3>{title}</h3>
-      </div>
+      <Typography variant="h2">{title}</Typography>
       <ResponsiveContainer
         width="100%"
         aspect={3}

src/components/statistics/HostStatistics/HostStatistics.js

@@ -24,29 +24,17 @@ export function HostStatistics() {
     fcn: client.apis.Statistics.calculateStatistics,
     call: false
   });
-  const { value: hostsWithoutIssues, wrapper: getHostsWithoutIssues } =
-    useAPIMethod({
-      fcn: client.apis.Statistics.calculateStatistics,
-      call: false
-    });
 
   useEffect(() => {
     getHostsRegistered({ statistics_type: "HOSTS_REGISTERED" });
     getHostsWithIocs({ statistics_type: "HOSTS_WITH_IOCS" });
     getHostsReachable({ statistics_type: "HOSTS_REACHABLE" });
-    getHostsWithoutIssues({ statistics_type: "HOSTS_WITHOUT_ISSUE" });
-  }, [
-    getHostsRegistered,
-    getHostsWithIocs,
-    getHostsReachable,
-    getHostsWithoutIssues
-  ]);
+  }, [getHostsRegistered, getHostsWithIocs, getHostsReachable]);
 
   const hostStats = {
     "Registered IOC-hosts": renderValue(hostsRegistered?.value),
     "IOC-hosts with IOCs": renderValue(hostsWithIocs?.value),
-    "Reachable IOC-hosts with IOCs": renderValue(hostsReachable?.value),
-    "Issue free IOC-hosts with IOCs": renderValue(hostsWithoutIssues?.value)
+    "Reachable IOC-hosts with IOCs": renderValue(hostsReachable?.value)
   };
 
   return (

src/components/statistics/IOCStatistics/IOCStatistics.js

@@ -25,29 +25,17 @@ export function IOCStatistics() {
     fcn: client.apis.Statistics.calculateStatistics,
     call: false
   });
-  const { value: iocsWithoutIssues, wrapper: getIocsWithoutIssues } =
-    useAPIMethod({
-      fcn: client.apis.Statistics.calculateStatistics,
-      call: false
-    });
 
   useEffect(() => {
     getIocsRegistered({ statistics_type: "IOCS_REGISTERED" });
     getIocsDeployed({ statistics_type: "IOCS_DEPLOYED" });
     getIocsReachable({ statistics_type: "IOCS_RUNNING" });
-    getIocsWithoutIssues({ statistics_type: "IOCS_RUNNING_WITHOUT_ISSUE" });
-  }, [
-    getIocsDeployed,
-    getIocsReachable,
-    getIocsRegistered,
-    getIocsWithoutIssues
-  ]);
+  }, [getIocsDeployed, getIocsReachable, getIocsRegistered]);
 
   const iocStats = {
     "Registered IOCs": renderValue(iocsRegistered?.value),
     "Deployed IOCs": renderValue(iocsDeployed?.value),
-    "Running IOCs": renderValue(iocsReachable?.value),
-    "Issue-free and running IOCs": renderValue(iocsWithoutIssues?.value)
+    "Running IOCs": renderValue(iocsReachable?.value)
   };
 
   return (

src/components/statistics/OperationChart/OperationChart.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useEffect } from "react";
 import { formatDateOnly } from "../../common/Helper";
 import { circularPalette } from "../../common/Helper";
-import { LinearProgress, useTheme } from "@mui/material";
+import { LinearProgress, useTheme, Typography } from "@mui/material";
 import {
   AreaChart,
   Area,
@@ -24,9 +24,7 @@ export default function OperationChart({ title, hook }) {
 
   return iocDeployments ? (
     <>
-      <div style={{ textAlign: "center" }}>
-        <h3>{title}</h3>
-      </div>
+      <Typography variant="h2">{title}</Typography>
       <ResponsiveContainer
         width="100%"
         aspect={3}

src/views/statistics/StatisticsView.js

 import React, { useContext, useEffect } from "react";
 import { styled } from "@mui/material/styles";
-import { Paper, Grid, useTheme, Typography } from "@mui/material";
+import { Paper, Grid, useTheme } from "@mui/material";
 import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
 import { RootContainer } from "../../components/common/Container/RootContainer";
 import ActiveIOCChart from "../../components/statistics/ActiveIOCChart";
@@ -38,13 +38,6 @@ export function StatisticsView() {
         container
         spacing={theme.spacing(0.5)}
       >
-        <Grid
-          item
-          xs={12}
-        >
-          <Typography variant="h2">Statistics</Typography>
-        </Grid>
-
         <Grid
           item
           xs={6}