Merge branch 'match-page-widths-ICSHWI-9279' into 'develop'

Match page widths ICSHWI-9279

See merge request !166

src/views/IOC/IOCListView.js

@@ -94,40 +94,38 @@ export function IOCListView() {
 
   return (
     <RootContainer>
-      <Container>
-        <Paper className={classes.root}>
-          <Grid container spacing={1} >
-            <Container>
-              <Grid container spacing={1} justify="space-between">
-                <Grid item xs={8}>
-                  <Tabs
-                    value={selectedTab}
-                    onChange={handleTabChange}
-                    indicatorColor="primary"
-                    textColor="primary">
-                    <Tab label={<Typography variant="h5">All</Typography>} />
-                    <Tab label={<Typography variant="h5">Deployed</Typography>} />
-                    <Tab label={<Typography variant="h5">Undeployed</Typography>} />
-                  </Tabs>
-                </Grid>
-                <Grid item >
-                  <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
-                    renderNoAccess={() => <></>} >
-                    <FormControlLabel className={classes.formControl}
-                      control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
-                      label={<Typography variant="h5">My IOCs</Typography>}
-                    />
-                  </AccessControl>
-                </Grid>
+      <Paper className={classes.root}>
+        <Grid container spacing={1} >
+          <Container>
+            <Grid container spacing={1} justify="space-between">
+              <Grid item xs={8}>
+                <Tabs
+                  value={selectedTab}
+                  onChange={handleTabChange}
+                  indicatorColor="primary"
+                  textColor="primary">
+                  <Tab label={<Typography variant="h5">All</Typography>} />
+                  <Tab label={<Typography variant="h5">Deployed</Typography>} />
+                  <Tab label={<Typography variant="h5">Undeployed</Typography>} />
+                </Tabs>
               </Grid>
-            </Container>
+              <Grid item >
+                <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
+                  renderNoAccess={() => <></>} >
+                  <FormControlLabel className={classes.formControl}
+                    control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
+                    label={<Typography variant="h5">My IOCs</Typography>}
+                  />
+                </AccessControl>
+              </Grid>
+            </Grid>
+          </Container>
           <Grid item xs={12} md={12}>
             {content}
           </Grid>
         </Grid>
       </Paper>
-    </Container>
-    </RootContainer >
+    </RootContainer>
   );
 }
 

src/views/about/AboutView.js

@@ -3,14 +3,13 @@ import {
   Paper,
   Link,
   Typography,
-  makeStyles
+  makeStyles,
 } from "@material-ui/core";
 import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
 import { RootContainer } from "../../components/common/Container/RootContainer";
 
 const useStyles = makeStyles((theme) => ({
   paper: {
-    maxWidth: "80%",
     padding: theme.spacing(4),
   },
 }));
@@ -24,6 +23,7 @@ export function AboutView() {
     <RootContainer>
       <h2>About</h2>
       <Paper className={classes.paper}>
+
         <Typography variant="body1">
           This is the <Link href="https://confluence.esss.lu.se/x/CVGQFg" target="_blank" rel="noreferrer">beta</Link> version of the deployment part of the CCDB ecosystem (working name CCCE). It is a tool that manages IOCs on host machines, using Ansible to perform the necessary configuration management. This tool will set up IOC-hosts and deploy IOC(s) in a consistent manner, and will configure all necessary services towards this purpose. The tool also integrates with various other systems to enable monitoring of IOCs and hosts, and enables some limited remote execution features. Please note that this is a developmental version, and that
           <ol>
@@ -38,11 +38,11 @@ export function AboutView() {
 
           <p>Users without access can only access a subset of the features of the application.</p>
 
-          <p>If you wish to visualise or interact directly with the REST API, you can use the <Link 
+          <p>If you wish to visualise or interact directly with the REST API, you can use the <Link
             href={`${window.SERVER_ADDRESS}${window.API_BASE_ENDPOINT}.html`} target="_blank" rel="noreferrer">Swagger UI</Link>.</p>
-          
+
           <hr />
-          
+
           <h3>Application info</h3>
           <table>
             <tr>

src/views/help/HelpView.js

@@ -11,7 +11,6 @@ import { RootContainer } from "../../components/common/Container/RootContainer";
 
 const useStyles = makeStyles((theme) => ({
   paper: {
-    maxWidth: "80%",
     padding: theme.spacing(4),
   },
 }));

src/views/host/HostListView.js

@@ -3,7 +3,6 @@ import {
     Paper,
     Grid,
     Hidden,
-    Container
 } from '@material-ui/core';
 import { RootContainer } from "../../components/common/Container/RootContainer";
 import { HostList } from '../../components/host/HostList';
@@ -15,9 +14,9 @@ import { initRequestParams, transformHostQuery } from "../../components/common/H
 import { SearchBar } from "../../components/common/SearchBar/SearchBar";
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    marginBottom: theme.spacing(2),
-  },
+    root: {
+        marginBottom: theme.spacing(2),
+    },
 }));
 
 export function HostListView() {
@@ -31,48 +30,46 @@ export function HostListView() {
         first: 0,
         rows: 20,
         page: 0
-      });
-      
-      const [columnSort, setColumnSort] = useState({
+    });
+
+    const [columnSort, setColumnSort] = useState({
         sortField: null,
         sortOrder: null
-      });
+    });
 
-      const rowsPerPage = [20, 50];
+    const rowsPerPage = [20, 50];
 
     useEffect(() => {
-        
+
         let requestParams = initRequestParams(lazyParams, transformHostQuery(query), columnSort);
 
         getHosts(requestParams);
     }, [getHosts, lazyParams, query, columnSort])
-   
+
     const content = (
         <>
-        <SearchBar search={setQuery} loading={loading}>
-            <Hidden smUp>
-                <HostList hosts={hosts.hostList}/>
-            </Hidden>
-            <Hidden xsDown>
-                <HostTable hosts={hosts.hostList} loading={loading}
-                    totalCount={hosts.totalCount} lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort}
-                    rowsPerPage={rowsPerPage} />
-            </Hidden>
-        </SearchBar>
+            <SearchBar search={setQuery} loading={loading}>
+                <Hidden smUp>
+                    <HostList hosts={hosts.hostList} />
+                </Hidden>
+                <Hidden xsDown>
+                    <HostTable hosts={hosts.hostList} loading={loading}
+                        totalCount={hosts.totalCount} lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort}
+                        rowsPerPage={rowsPerPage} />
+                </Hidden>
+            </SearchBar>
         </>
     );
 
     return (
         <RootContainer>
-            <Container>
-                <Paper className={classes.root}>
-                    <Grid container spacing={1} justify="flex-end">
-                        <Grid item xs={12} md={12}>
-                            {content}
-                        </Grid>
+            <Paper className={classes.root}>
+                <Grid container spacing={1} justify="flex-end">
+                    <Grid item xs={12} md={12}>
+                        {content}
                     </Grid>
-                </Paper>
-            </Container>
+                </Grid>
+            </Paper>
         </RootContainer>
     );
 }
\ No newline at end of file

src/views/statistics/StatisticsView.js

@@ -68,7 +68,6 @@ export function StatisticsView() {
             <Paper>
                 <DeploymentLineChart title="IOC deployment history graph (Prometheus)" chartLabel="Active IOCs in time" hook={useActiveIOCHistory}/>
             </Paper>
-
         </RootContainer>
     )
 }
\ No newline at end of file