Merge branch 'filter-currently-deployed-IOCs-ICSHWI-9273' into 'develop'

Filter currently deployed IOCs ICSHWI-9273

See merge request !164

src/components/IOC/IOCTable.js

@@ -10,7 +10,7 @@ const ownIocsColumns = [
   { id: "namingName", label: 'IOC Name', width: '25ch', sortable: true },
   { id: "host", label: 'Host', width: '20ch', sortable: false },
   { id: "network", label: 'Network', width: '22ch', sortable: false },
-  { id: "sourceVersion", label: 'Version', width: '15ch', sortable: true },
+  { id: "sourceVersion", label: 'Version', width: '15ch', sortable: false },
 ]
 
 const exploreIocsColumns = [
@@ -19,13 +19,13 @@ const exploreIocsColumns = [
   { id: "host", label: 'Host', width: '20ch', sortable: false },
   { id: "network", label: 'Network', width: '22ch', sortable: false },
   { id: "owner", label: 'Owner', width: '15ch', sortable: true },
-  { id: "sourceVersion", label: 'Version', width: '15ch', sortable: true },
+  { id: "sourceVersion", label: 'Version', width: '15ch', sortable: false },
 ]
 
 const hostDetailsColumns = [
   { id: "status", label: 'Status', width: '80px', textAlign: "center"},
   { id: "namingName", label: 'IOC Name', width: '25ch', sortable: true },
-  { id: "sourceVersion", label: 'Version', width: '15ch', sortable: true },
+  { id: "sourceVersion", label: 'Version', width: '15ch', sortable: false },
 ]
 
 function createGitVersionField(version, shortVersion) {

src/views/IOC/IOCListView.js

-import { Container, Grid, Paper, FormControlLabel, Switch, Typography, Box } from "@material-ui/core";
+import { Container, Grid, Paper, FormControlLabel, Switch, Typography, Tabs, Tab } from "@material-ui/core";
 import { RootContainer } from "../../components/common/Container/RootContainer";
 import React, { useState, useEffect, useContext } from "react"
 import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
@@ -20,15 +20,31 @@ export function IOCListView() {
   const [iocList, setIocList] = useState([]);
   const [query, setQuery] = useState("");
   const [ownOnly, setOwnOnly] = useState(false);
-  const {user} = useContext(userContext);
+  const [selectedTab, setSelectedTab] = useState(0);
+  const [deploymentStatus, setDeploymentStatus] = useState("ALL");
+  const { user } = useContext(userContext);
   const classes = useStyles();
 
+  const handleTabChange = (event, tab) => {
+    setSelectedTab(tab);
+
+    if (tab === 0) {
+      setDeploymentStatus("ALL");
+    }
+    else if (tab === 1) {
+      setDeploymentStatus("DEPLOYED");
+    }
+    else if (tab === 2) {
+      setDeploymentStatus("NOT_DEPLOYED");
+    }
+  };
+
   const [lazyParams, setLazyParams] = useState({
     first: 0,
     rows: 20,
     page: 0
   });
-  
+
   const [columnSort, setColumnSort] = useState({
     sortField: null,
     sortOrder: null
@@ -47,34 +63,32 @@ export function IOCListView() {
 
   useEffect(() => {
     let requestParams = initRequestParams(lazyParams, query, columnSort);
-    
-    if(ownOnly) {
+
+    if (ownOnly) {
       requestParams.owner = user?.loginName;
     }
 
-    if(columnSort.sortField === "owner") {
+    if (columnSort.sortField === "owner") {
       requestParams.orderBy = "OWNER";
     }
-  
-    if(columnSort.sortField === "namingName") {
+
+    if (columnSort.sortField === "namingName") {
       requestParams.orderBy = "IOC_NAME";
     }
-  
-    if(columnSort.sortField === "sourceVersion") {
-      requestParams.orderBy = "GIT_REFERENCE";
-    }
+
+    requestParams.deploymentStatus = deploymentStatus;
 
     getIocs(requestParams);
-  }, [getIocs, lazyParams, columnSort, query, user, ownOnly])
+  }, [getIocs, lazyParams, columnSort, query, user, ownOnly, deploymentStatus])
 
   const title = "IOCs";
   useGlobalAppBar(title);
 
   let content = (
     <SearchBar search={setQuery} loading={loading}>
-        <IOCAsyncList iocs={iocList} setIocs={setIocList} loading={loading} rowType="explore" 
-          lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort} totalCount={iocs.totalCount} 
-          rowsPerPage={rowsPerPage} />
+      <IOCAsyncList iocs={iocList} setIocs={setIocList} loading={loading} rowType="explore"
+        lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort} totalCount={iocs.totalCount}
+        rowsPerPage={rowsPerPage} />
     </SearchBar>
   );
 
@@ -82,25 +96,38 @@ export function IOCListView() {
     <RootContainer>
       <Container>
         <Paper className={classes.root}>
-          <Grid container spacing={1}>
-            <Grid item xs={12} md={12}>
-              <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
-              renderNoAccess={() => <></>} >
-                <Box display="flex" justifyContent="end" p={2} m={1}>
-                  <FormControlLabel className={classes.formControl}
-                    control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
-                    label={<Typography variant="h5">My IOCs</Typography>}
-                  />
-                </Box>
-              </AccessControl>
-            </Grid>
-            <Grid item xs={12} md={12}>
-              {content}
-            </Grid>
+          <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>
+              </Grid>
+            </Container>
+          <Grid item xs={12} md={12}>
+            {content}
           </Grid>
-        </Paper>
-      </Container>
-    </RootContainer>
+        </Grid>
+      </Paper>
+    </Container>
+    </RootContainer >
   );
 }
 

src/views/deployments/DeploymentsView.js

 import React, { useContext, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Paper, Grid, FormControlLabel, Switch, Typography } from '@material-ui/core';
+import { Paper, Grid, FormControlLabel, Switch, Typography, Container } from '@material-ui/core';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import { DeploymentAsyncList } from "../../components/deployments/DeploymentAsyncList";
@@ -29,7 +29,7 @@ export function DeploymentsView() {
   const [query, setQuery] = useState("");
   const [selectedTab, setSelectedTab] = useState(0);
   const [ownOnly, setOwnOnly] = useState(false);
-  const {user} = useContext(userContext);
+  const { user } = useContext(userContext);
   const [deploymentStatus, setDeploymentStatus] = useState(null);
   const [deploymentList, setDeploymentList] = useState([]);
 
@@ -60,7 +60,7 @@ export function DeploymentsView() {
     rows: 20,
     page: 0
   });
-  
+
   const [columnSort, setColumnSort] = useState({
     sortField: null,
     sortOrder: null
@@ -72,27 +72,27 @@ export function DeploymentsView() {
 
     let requestParams = initRequestParams(lazyParams, query, columnSort);
 
-    if(ownOnly) {
+    if (ownOnly) {
       requestParams.user = user?.loginName;
     }
-  
-    if(columnSort.sortField === "start") {
+
+    if (columnSort.sortField === "start") {
       requestParams.orderBy = "START_TIME";
     }
-  
-    if(columnSort.sortField === "user") {
+
+    if (columnSort.sortField === "user") {
       requestParams.orderBy = "CREATED_BY";
     }
-  
-    if(columnSort.sortField === "ioc") {
+
+    if (columnSort.sortField === "ioc") {
       requestParams.orderBy = "IOC_NAME";
     }
-  
-    if(columnSort.sortField === "version") {
+
+    if (columnSort.sortField === "version") {
       requestParams.orderBy = "GIT_REFERENCE";
     }
-  
-    if(deploymentStatus) {
+
+    if (deploymentStatus) {
       requestParams.status = deploymentStatus;
     }
 
@@ -106,38 +106,42 @@ export function DeploymentsView() {
 
   const content = (
     <SearchBar search={setQuery} loading={loading}>
-        <DeploymentAsyncList
-          deployments={deploymentList} setDeployments={setDeploymentList} loading={loading}
-          totalCount={deployments.totalCount} lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort}
-          rowsPerPage={rowsPerPage} />
+      <DeploymentAsyncList
+        deployments={deploymentList} setDeployments={setDeploymentList} loading={loading}
+        totalCount={deployments.totalCount} lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort}
+        rowsPerPage={rowsPerPage} />
     </SearchBar>
   );
 
   return (
     <Paper className={classes.paper}>
-      <Grid container spacing={1} justify="flex-start">
-        <Grid item xs={12} md={10}>
-          <Tabs
-            value={selectedTab}
-            onChange={handleTabChange}
-            indicatorColor="primary"
-            textColor="primary">
-            <Tab label={<Typography variant="h5">All</Typography>} />
-            <Tab label={<Typography variant="h5">Running</Typography>} />
-            <Tab label={<Typography variant="h5">Finished</Typography>} />
-            <Tab label={<Typography variant="h5">Queued</Typography>} />
-          </Tabs>
-        </Grid>
-        <Grid item xs={8} md={2}>
-          <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
-            renderNoAccess={() => <></>} >
-
-            <FormControlLabel className={classes.formControl}
-              control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
-              label={<Typography variant="h5">My deployments</Typography>}
-            />
-          </AccessControl>
-        </Grid>
+      <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">Running</Typography>} />
+                <Tab label={<Typography variant="h5">Finished</Typography>} />
+                <Tab label={<Typography variant="h5">Queued</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 deployments</Typography>}
+                />
+              </AccessControl>
+            </Grid>
+          </Grid>
+        </Container>
         <Grid item xs={12} md={12}>
           {content}
         </Grid>