Skip to content
Snippets Groups Projects
Commit 1b329933 authored by John Sparger's avatar John Sparger
Browse files

Change "Only my IOC hosts" control from tab to slider so UI is consistent with... 

Change "Only my IOC hosts" control from tab to slider so UI is consistent with other list views ICSHWI-9761
parent de1a3099
No related branches found
No related tags found
3 merge requests!270Merging develop branch to master in order to create RC,!222Fixing missing time interval parameter for logs,!210Change "Only my IOC hosts" control from tab to slider so UI is consistent with other list views ICSHWI-9761
Hide whitespace changes
Inline Side-by-side
src/views/IOC/IOCListView.js
+ 112
− 114
View file @ 1b329933
......@@ -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>
);
}
src/views/host/HostListView.js
+ 43
− 26
View file @ 1b329933
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>
......
src/views/jobs/JobListView.js
+ 35
− 37
View file @ 1b329933
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment