Merge branch 'CE-2159-Minor-adjustments' into 'develop'

CE-2159: Minor-adjustments

See merge request !379

src/components/navigation/NavigationMenu/NavigationMenu.js

@@ -107,7 +107,7 @@ const NavigationMenu = ({ children }) => {
     defaultTitle: applicationTitle(),
     defaultActionButton: <LoginControls />,
     defaultOpen: false,
-    widthOpen: "240px",
+    widthOpen: "170px", // default size 240px
     widthClosed: "57px",
     defaultIconMenuButton: <CreateIOCButton />,
     defaultHelpButton: <IconMenuButton {...helpButtonProps} />

src/components/statistics/ActiveIOCChart/ActiveIOCChart.js

@@ -66,7 +66,12 @@ export default function ActiveIOCChart({ title }) {
 
   return activeIocs ? (
     <>
-      <Typography variant="h2">{title}</Typography>
+      <Typography
+        variant="h2"
+        sx={{ marginBottom: 4 }}
+      >
+        {title}
+      </Typography>
       <ResponsiveContainer
         width="100%"
         aspect={2}

src/components/statistics/DeploymentLineChart/DeploymentLineChart.js

@@ -29,7 +29,12 @@ export default function DeploymentLineChart({
 
   return iocDeployments ? (
     <>
-      <Typography variant="h2">{title}</Typography>
+      <Typography
+        variant="h2"
+        sx={{ marginBottom: 4 }}
+      >
+        {title}
+      </Typography>
       <ResponsiveContainer
         width="100%"
         aspect={3}

src/components/statistics/HostStatistics/HostStatistics.js

 import React, { useContext, useEffect } from "react";
-import { Paper, Skeleton } from "@mui/material";
+import { Box, Skeleton } from "@mui/material";
 import { KeyValueTable, useAPIMethod } from "@ess-ics/ce-ui-common";
 import { apiContext } from "../../../api/DeployApi";
 
@@ -38,7 +38,7 @@ export function HostStatistics() {
   };
 
   return (
-    <Paper>
+    <Box>
       <KeyValueTable
         obj={hostStats}
         variant="table"
@@ -49,6 +49,6 @@ export function HostStatistics() {
         }}
         sx={{ border: 0 }}
       />
-    </Paper>
+    </Box>
   );
 }

src/components/statistics/IOCStatistics/IOCStatistics.js

 import React, { useContext, useEffect } from "react";
-import { Paper, Skeleton } from "@mui/material";
+import { Box, Skeleton } from "@mui/material";
 import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
 import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
@@ -39,7 +39,7 @@ export function IOCStatistics() {
   };
 
   return (
-    <Paper>
+    <Box>
       <KeyValueTable
         obj={iocStats}
         keyOptions={{ headerName: "IOC statistics" }}
@@ -49,6 +49,6 @@ export function IOCStatistics() {
         }}
         sx={{ border: 0 }}
       />
-    </Paper>
+    </Box>
   );
 }

src/views/jobs/JobListView.js

 import React, { useContext, useState, useCallback, useMemo } from "react";
-import {
-  Grid,
-  FormControlLabel,
-  Switch,
-  Typography,
-  Container,
-  TextField,
-  Autocomplete
-} from "@mui/material";
+import { Grid, Container, TextField, Autocomplete } from "@mui/material";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
-import { userContext, RootPaper, useAPIMethod } from "@ess-ics/ce-ui-common";
+import { RootPaper, useAPIMethod } from "@ess-ics/ce-ui-common";
 import { initRequestParams } from "../../components/common/Helper";
 import { useEffect } from "react";
 import { SearchBar } from "../../components/common/SearchBar/SearchBar";
-import AccessControl from "../../components/auth/AccessControl";
 import useUrlState from "@ahooksjs/use-url-state";
 import {
   serialize,
@@ -40,7 +31,6 @@ export function JobListView() {
   const [urlState, setUrlState] = useUrlState(
     {
       tab: "0",
-      own: "false",
       rows: "20",
       page: "0",
       query: "",
@@ -49,7 +39,6 @@ export function JobListView() {
     { navigateMode: "replace" }
   );
 
-  const { user } = useContext(userContext);
   const [deploymentStatus, setDeploymentStatus] = useState(null);
 
   const handleTabChange = (event, tab) => {
@@ -76,11 +65,6 @@ export function JobListView() {
     urlState.tab && changeTab(deserialize(urlState.tab));
   }, [urlState]);
 
-  const handleChangeOwn = (event) => {
-    const own = event.target.checked;
-    setUrlState({ own: serialize(own), page: "0" });
-  };
-
   const urlPagination = useMemo(() => {
     return {
       rows: deserialize(urlState.rows),
@@ -129,10 +113,6 @@ export function JobListView() {
       deserialize(urlState.query)
     );
 
-    if (deserialize(urlState.own)) {
-      requestParams.user = user?.loginName;
-    }
-
     if (deploymentStatus) {
       requestParams.status = deploymentStatus;
     }
@@ -146,9 +126,7 @@ export function JobListView() {
     getOperations,
     urlPagination,
     urlState.query,
-    urlState.own,
     urlState.job_type,
-    user,
     deploymentStatus
   ]);
 
@@ -244,29 +222,6 @@ export function JobListView() {
               autoSelect
             />
           </Grid>
-          <Grid item>
-            <AccessControl
-              allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
-              renderNoAccess={() => <></>}
-            >
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={deserialize(urlState.own)}
-                    onChange={handleChangeOwn}
-                  />
-                }
-                label={
-                  <Typography
-                    variant="body2"
-                    fontWeight="bold"
-                  >
-                    Only my jobs
-                  </Typography>
-                }
-              />
-            </AccessControl>
-          </Grid>
         </Grid>
         <Grid
           item

src/views/jobs/JobLogAccessControl.js

 import React, { useContext, useEffect } from "react";
-import { RootContainer } from "../../components/common/Container/RootContainer";
 import AccessControl from "../../components/auth/AccessControl";
 import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
 import { JobListView } from "./JobListView";
@@ -10,10 +9,8 @@ export function JobLogAccessControl() {
   useEffect(() => setTitle(applicationTitle("Log")), [setTitle]);
 
   return (
-    <RootContainer>
-      <AccessControl allowedRoles={[]}>
-        <JobListView />
-      </AccessControl>
-    </RootContainer>
+    <AccessControl allowedRoles={[]}>
+      <JobListView />
+    </AccessControl>
   );
 }

src/views/statistics/StatisticsView.js

 import React, { useContext, useEffect } from "react";
 import { styled } from "@mui/material/styles";
-import { Paper, Grid, useTheme } from "@mui/material";
-import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
-import { RootContainer } from "../../components/common/Container/RootContainer";
+import { Grid, useTheme, Box } from "@mui/material";
+import {
+  GlobalAppBarContext,
+  useAPIMethod,
+  RootPaper
+} from "@ess-ics/ce-ui-common";
 import ActiveIOCChart from "../../components/statistics/ActiveIOCChart";
 import DeploymentLineChart from "../../components/statistics/DeploymentLineChart";
 import { HostStatistics } from "../../components/statistics/HostStatistics";
@@ -10,16 +13,16 @@ import { IOCStatistics } from "../../components/statistics/IOCStatistics";
 import OperationChart from "../../components/statistics/OperationChart/OperationChart";
 import { applicationTitle } from "../../components/common/Helper";
 import { apiContext } from "../../api/DeployApi";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
 
 const PREFIX = "StatisticsView";
 
 const classes = {
-  paper: `${PREFIX}-paper`
+  box: `${PREFIX}-paper`
 };
 
-const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
-  [`& .${classes.paper}`]: {
+const StyledRootPaper = styled(RootPaper)(({ theme }) => ({
+  padding: theme.spacing(0),
+  [`& .${classes.box}`]: {
     padding: theme.spacing(4)
   }
 }));
@@ -43,10 +46,10 @@ export function StatisticsView() {
     });
 
   return (
-    <StyledRootContainer>
+    <StyledRootPaper>
       <Grid
         container
-        spacing={theme.spacing(0.5)}
+        spacing={theme.spacing(2)}
       >
         <Grid
           item
@@ -66,36 +69,36 @@ export function StatisticsView() {
           item
           xs={12}
         >
-          <Paper className={classes.paper}>
+          <Box className={classes.box}>
             <OperationChart
               title="Operations over time"
               iocDeployments={operationStatistics}
               getIOCDeployments={getOperationStatistics}
             />
-          </Paper>
+          </Box>
         </Grid>
         <Grid
           item
           xs={12}
         >
-          <Paper className={classes.paper}>
+          <Box className={classes.box}>
             <ActiveIOCChart title="Number of IOCs detected per network" />
-          </Paper>
+          </Box>
         </Grid>
         <Grid
           item
           xs={12}
         >
-          <Paper className={classes.paper}>
+          <Box className={classes.box}>
             <DeploymentLineChart
               title="Number of IOCs detected over time"
               chartLabel="Active IOCs over time"
               iocDeployments={iocsOverTime}
               getIOCDeployments={getIocsOverTime}
             />
-          </Paper>
+          </Box>
         </Grid>
       </Grid>
-    </StyledRootContainer>
+    </StyledRootPaper>
   );
 }