diff --git a/src/components/IOC/IOCTable.js b/src/components/IOC/IOCTable.js
index ba5ae45c0440b467fb1f1f6d541acf6e4606b142..ea410d5542da44532a80bfe991d5c80c3ce4be9f 100644
--- a/src/components/IOC/IOCTable.js
+++ b/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) {
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index de1a186aa4eb05756b67af2750a72c960bda6a9d..04ce216f81e1a6b8adc062709bea2c16511c1d83 100644
--- a/src/views/IOC/IOCListView.js
+++ b/src/views/IOC/IOCListView.js
@@ -1,4 +1,4 @@
-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 >
);
}
diff --git a/src/views/deployments/DeploymentsView.js b/src/views/deployments/DeploymentsView.js
index dda1235d51f48a8a422bedb6653709a0d0e24b8d..814212c8f1144272ce7f5ef97abb1c38738a47fc 100644
--- a/src/views/deployments/DeploymentsView.js
+++ b/src/views/deployments/DeploymentsView.js
@@ -1,6 +1,6 @@
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>