From 1b32993356bf6c34043f99f19738f0c1d0e65085 Mon Sep 17 00:00:00 2001
From: John Sparger <john.sparger@ess.eu>
Date: Tue, 20 Sep 2022 10:09:13 +0000
Subject: [PATCH] Change "Only my IOC hosts" control from tab to slider so UI
is consistent with other list views ICSHWI-9761
---
src/views/IOC/IOCListView.js | 226 ++++++++++++++++-----------------
src/views/host/HostListView.js | 69 ++++++----
src/views/jobs/JobListView.js | 72 +++++------
3 files changed, 190 insertions(+), 177 deletions(-)
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index 89b7c630..3f8d36aa 100644
--- a/src/views/IOC/IOCListView.js
+++ b/src/views/IOC/IOCListView.js
@@ -10,122 +10,120 @@ import { SearchBar } from "../../components/common/SearchBar/SearchBar";
import AccessControl from '../../components/auth/AccessControl';
const useStyles = makeStyles((theme) => ({
- root: {
- marginBottom: theme.spacing(2),
- },
+ root: {
+ marginBottom: theme.spacing(2),
+ },
}));
export function IOCListView() {
- const [iocs, getIocs, /*reset*/, loading] = useIOCSearch();
- const [iocList, setIocList] = useState([]);
- const [query, setQuery] = useState("");
- const [ownOnly, setOwnOnly] = useState(false);
- 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
- });
-
- const handleChangeOwn = (event) => {
- const own = event.target.checked;
- setOwnOnly(own);
- };
-
- const rowsPerPage = [20, 50];
-
- useEffect(() => {
- setIocList(iocs.iocList);
- }, [iocs, setIocList])
-
- useEffect(() => {
- let requestParams = initRequestParams(lazyParams, query, columnSort);
-
- if (ownOnly) {
- requestParams.owner = user?.loginName;
- }
-
- if (columnSort.sortField === "owner") {
- requestParams.order_by = "OWNER";
- }
-
- if (columnSort.sortField === "namingName") {
- requestParams.order_by = "IOC_NAME";
- }
-
- requestParams.deployment_status = deploymentStatus;
-
- getIocs(requestParams);
- }, [getIocs, lazyParams, columnSort, query, user, ownOnly, deploymentStatus])
-
- const title = "IOCs";
- useGlobalAppBar(title);
-
- let content = (
- <SearchBar search={setQuery} loading={loading} placeholder="search in IOC name or user">
- <IOCAsyncList iocs={iocList} setIocs={setIocList} loading={loading} rowType="explore"
- lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort} totalCount={iocs.totalCount}
- rowsPerPage={rowsPerPage} />
- </SearchBar>
- );
-
- return (
- <RootContainer>
- <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">Only Deployed</Typography>} />
- <Tab label={<Typography variant="h5">Only Not Deployed</Typography>} />
- </Tabs>
- </Grid>
- <Grid item >
- <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
- renderNoAccess={() => <></>} >
- <FormControlLabel className={classes.formControl}
- control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
- label={<Typography variant="h5">Only my IOCs</Typography>}
- />
- </AccessControl>
- </Grid>
- </Grid>
- </Container>
- <Grid item xs={12} md={12}>
- {content}
- </Grid>
- </Grid>
- </Paper>
- </RootContainer>
- );
+ const [iocs, getIocs, /*reset*/, loading] = useIOCSearch();
+ const [iocList, setIocList] = useState([]);
+ const [query, setQuery] = useState("");
+ const [ownOnly, setOwnOnly] = useState(false);
+ 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
+ });
+
+ const handleChangeOwn = (event) => {
+ const own = event.target.checked;
+ setOwnOnly(own);
+ };
+
+ const rowsPerPage = [20, 50];
+
+ useEffect(() => {
+ setIocList(iocs.iocList);
+ }, [iocs, setIocList])
+
+ useEffect(() => {
+ let requestParams = initRequestParams(lazyParams, query, columnSort);
+
+ if (ownOnly) {
+ requestParams.owner = user?.loginName;
+ }
+
+ if (columnSort.sortField === "owner") {
+ requestParams.order_by = "OWNER";
+ }
+
+ if (columnSort.sortField === "namingName") {
+ requestParams.order_by = "IOC_NAME";
+ }
+
+ requestParams.deployment_status = deploymentStatus;
+
+ getIocs(requestParams);
+ }, [getIocs, lazyParams, columnSort, query, user, ownOnly, deploymentStatus])
+
+ const title = "IOCs";
+ useGlobalAppBar(title);
+
+ let content = (
+ <SearchBar search={setQuery} loading={loading} placeholder="search in IOC name or user">
+ <IOCAsyncList iocs={iocList} setIocs={setIocList} loading={loading} rowType="explore"
+ lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort} totalCount={iocs.totalCount}
+ rowsPerPage={rowsPerPage} />
+ </SearchBar>
+ );
+
+ return (
+ <RootContainer>
+ <Paper className={classes.root}>
+ <Grid container spacing={1}>
+ <Grid container spacing={1} component={Container} justify="space-between" alignItems="center" style={{ display: "flex" }} >
+ <Grid item>
+ <Tabs
+ value={selectedTab}
+ onChange={handleTabChange}
+ indicatorColor="primary"
+ textColor="primary">
+ <Tab label={<Typography variant="h5">All</Typography>} />
+ <Tab label={<Typography variant="h5">Only Deployed</Typography>} />
+ <Tab label={<Typography variant="h5">Only Not Deployed</Typography>} />
+ </Tabs>
+ </Grid>
+ <Grid item>
+ <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
+ renderNoAccess={() => <></>} >
+ <FormControlLabel className={classes.formControl}
+ control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
+ label={<Typography variant="h5">Only my IOCs</Typography>}
+ />
+ </AccessControl>
+ </Grid>
+ </Grid>
+ <Grid item xs={12} md={12}>
+ {content}
+ </Grid>
+ </Grid>
+ </Paper>
+ </RootContainer>
+ );
}
diff --git a/src/views/host/HostListView.js b/src/views/host/HostListView.js
index 7c6ffe47..eef6af8a 100644
--- a/src/views/host/HostListView.js
+++ b/src/views/host/HostListView.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
import {
Container,
Paper,
@@ -6,7 +6,9 @@ import {
Hidden,
Tabs,
Tab,
- Typography
+ Typography,
+ FormControlLabel,
+ Switch
} from '@material-ui/core';
import { RootContainer } from "../../components/common/Container/RootContainer";
import { HostList } from '../../components/host/HostList';
@@ -16,6 +18,7 @@ import { useGlobalAppBar } from '../../components/navigation/GlobalAppBar/Global
import { makeStyles } from '@material-ui/core/styles';
import { initRequestParams, transformHostQuery } from "../../components/common/Helper";
import { SearchBar } from "../../components/common/SearchBar/SearchBar";
+import AccessControl from "../../components/auth/AccessControl";
const useStyles = makeStyles((theme) => ({
root: {
@@ -23,18 +26,22 @@ const useStyles = makeStyles((theme) => ({
},
}));
+const NoAccess = () => <></>
+
export function HostListView() {
useGlobalAppBar("IOC hosts");
const [hosts, getHosts, /*reset*/, loading] = useCSEntrySearch();
const [hostFilter, setHostFilter] = useState("ALL");
const [selectedTab, setSelectedTab] = useState(0);
+ const [ownOnly, setOwnOnly] = useState(false);
const [query, setQuery] = useState("");
const classes = useStyles();
- const handleTabChange = (event, tab) => {
+ const hideOwnSlider = selectedTab === 2;
+
+ const handleTabChange = useCallback((event, tab) => {
setSelectedTab(tab);
-
if (tab === 0) {
setHostFilter("ALL");
}
@@ -44,10 +51,14 @@ export function HostListView() {
else if (tab === 2) {
setHostFilter("NO_IOCS");
}
- else if (tab === 3) {
- setHostFilter("OWN");
- }
- };
+ }, []);
+
+
+
+ const handleChangeOwn = useCallback((event) => {
+ const own = event.target.checked;
+ setOwnOnly(own);
+ }, [])
const [lazyParams, setLazyParams] = useState({
first: 0,
@@ -64,10 +75,10 @@ export function HostListView() {
useEffect(() => {
let requestParams = initRequestParams(lazyParams, transformHostQuery(query), columnSort);
- requestParams.filter = hostFilter;
+ requestParams.filter = ((hostFilter !== "NO_IOCS") && ownOnly) ? "OWN" : hostFilter;
getHosts(requestParams);
- }, [getHosts, lazyParams, query, columnSort, hostFilter])
+ }, [getHosts, lazyParams, query, columnSort, hostFilter, ownOnly])
const content = (
<>
@@ -87,23 +98,29 @@ export function HostListView() {
return (
<RootContainer>
<Paper className={classes.root}>
- <Grid container spacing={1} justify="flex-end">
- <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">Only hosts with IOCs</Typography>} />
- <Tab label={<Typography variant="h5">Only hosts without IOCs</Typography>} />
- <Tab label={<Typography variant="h5">Only my IOC-hosts</Typography>} />
- </Tabs>
- </Grid>
+ <Grid container spacing={1}>
+ <Grid container spacing={1} component={Container} justify="space-between" alignItems="center" style={{display: "flex"}} >
+ <Grid item>
+ <Tabs
+ value={selectedTab}
+ onChange={handleTabChange}
+ indicatorColor="primary"
+ textColor="primary">
+ <Tab label={<Typography variant="h5">All</Typography>} />
+ <Tab label={<Typography variant="h5">Only hosts with IOCs</Typography>} />
+ <Tab label={<Typography variant="h5">Only hosts without IOCs</Typography>} />
+ </Tabs>
</Grid>
- </Container>
+ <Grid item>
+ <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
+ renderNoAccess={NoAccess} >
+ <FormControlLabel className={classes.formControl}
+ control={<Switch disabled={hideOwnSlider} checked={ownOnly} onChange={handleChangeOwn} />}
+ label={<Typography noWrap variant="h5">Only my IOC hosts</Typography>}
+ />
+ </AccessControl>
+ </Grid>
+ </Grid>
<Grid item xs={12} md={12}>
{content}
</Grid>
diff --git a/src/views/jobs/JobListView.js b/src/views/jobs/JobListView.js
index f75ecf02..12a73f6b 100644
--- a/src/views/jobs/JobListView.js
+++ b/src/views/jobs/JobListView.js
@@ -123,45 +123,43 @@ export function JobListView() {
return (
<Paper className={classes.paper}>
- <Grid container spacing={1} >
- <Container>
- <Grid container spacing={1} justify="space-between">
- <Grid item xs={7}>
- <Tabs
- value={selectedTab}
- onChange={handleTabChange}
- indicatorColor="primary"
- textColor="primary">
- <Tab label={<Typography variant="h5">All</Typography>} />
- <Tab label={<Typography variant="h5">Only Running</Typography>} />
- <Tab label={<Typography variant="h5">Only Finished</Typography>} />
- <Tab label={<Typography variant="h5">Only Queued</Typography>} />
- </Tabs>
- </Grid>
- <Grid item xs={3}>
- <Autocomplete
- id="combo-box-demo"
- options={[{label: "Show all"}, {label: "Only deployments", filter: "DEPLOYMENT"}, {label: "Only commands", filter: "COMMAND"}]}
- defaultValue = { {label: "Show all"} }
- getOptionLabel={(option) => option.label}
- getOptionSelected={(option, value) => option.label === value.label}
- style={{ width: "100%" }}
- renderInput={(params) => <TextField {...params} label="Job type" variant="outlined" />}
- onChange={(event, value, reason) => setJobType(value?.filter)}
- autoSelect
+ <Grid container spacing={1}>
+ <Grid container spacing={1} component={Container} justify="space-between" alignItems="center" style={{ display: "flex" }} >
+ <Grid item>
+ <Tabs
+ value={selectedTab}
+ onChange={handleTabChange}
+ indicatorColor="primary"
+ textColor="primary">
+ <Tab label={<Typography variant="h5">All</Typography>} />
+ <Tab label={<Typography variant="h5">Only Running</Typography>} />
+ <Tab label={<Typography variant="h5">Only Finished</Typography>} />
+ <Tab label={<Typography variant="h5">Only Queued</Typography>} />
+ </Tabs>
+ </Grid>
+ <Grid item xs={3}>
+ <Autocomplete
+ id="combo-box-demo"
+ options={[{ label: "Show all" }, { label: "Only deployments", filter: "DEPLOYMENT" }, { label: "Only commands", filter: "COMMAND" }]}
+ defaultValue={{ label: "Show all" }}
+ getOptionLabel={(option) => option.label}
+ getOptionSelected={(option, value) => option.label === value.label}
+ style={{ width: "100%" }}
+ renderInput={(params) => <TextField {...params} label="Job type" variant="outlined" />}
+ onChange={(event, value, reason) => setJobType(value?.filter)}
+ autoSelect
+ />
+ </Grid>
+ <Grid item >
+ <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
+ renderNoAccess={() => <></>} >
+ <FormControlLabel className={classes.formControl}
+ control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
+ label={<Typography variant="h5">Only my jobs</Typography>}
/>
- </Grid>
- <Grid item >
- <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
- renderNoAccess={() => <></>} >
- <FormControlLabel className={classes.formControl}
- control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
- label={<Typography variant="h5">Only my jobs</Typography>}
- />
- </AccessControl>
- </Grid>
+ </AccessControl>
</Grid>
- </Container>
+ </Grid>
<Grid item xs={12} md={12}>
{content}
</Grid>
--
GitLab