Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • andersharrisson/ce-deploy-ui
  • ccce/dev/ce-deploy-ui
2 results
Show changes
Commits on Source (12)
Hide whitespace changes
Inline Side-by-side
Showing
with 232 additions and 210 deletions
src/api/DataTypes.js
View file @ 1381ef36
......@@ -169,3 +169,13 @@ export class CommandStatus {
}
}
export class IocActiveDeployment {
constructor(activeDeployment) {
this.activeDeployment = activeDeployment;
}
failedDeployment() {
return this.activeDeployment && ('successful'.localeCompare(this.activeDeployment?.jobStatus, undefined, { sensitivity: 'base' }) !== 0);
}
}
src/components/IOC/AdministerUndeployment.js
View file @ 1381ef36
......@@ -9,6 +9,7 @@ import { ConfirmationDialog } from "../dialog/ConfirmationDialog";
import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
import { Alert } from "@material-ui/lab";
import AccessControl from '../auth/AccessControl';
import { IocActiveDeployment } from '../../api/DataTypes';
const useStyles = makeStyles({
undeployButton: {
......@@ -68,14 +69,14 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
}
}, [response, history]);
let iocIsDeployed = ioc.activeDeployment && !ioc.activeDeployment.undeployment;
const failedDeployment = new IocActiveDeployment(ioc.activeDeployment).failedDeployment();
let disabledButtonTitle = "";
if (buttonDisabled || ioc.operationInProgress) {
disabledButtonTitle = "There is an ongoing operation, you cannot 'undeploy' the IOC right now";
} else {
if (!iocIsDeployed) {
disabledButtonTitle = "IOC is not deployed, you cannot 'undeploy' it"
if (!failedDeployment) {
disabledButtonTitle = "IOC doesn't have failed (un)deployment, you cannot 'undeploy' it"
}
}
......@@ -100,7 +101,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
<Grid item xs={12}>
<Tooltip title={disabledButtonTitle}>
<span>
<Button className={classes.undeployButton} onClick={openUndeployModal} disabled={buttonDisabled || ioc.operationInProgress || !iocIsDeployed} >SET DEPLOYMENT STATE TO NOT DEPLOYED</Button>
<Button className={classes.undeployButton} onClick={openUndeployModal} disabled={buttonDisabled || ioc.operationInProgress || !failedDeployment} >SET DEPLOYMENT STATE TO NOT DEPLOYED</Button>
</span>
</Tooltip>
</Grid>
......
src/components/IOC/GitRefLink.js
View file @ 1381ef36
......@@ -23,5 +23,5 @@ export default function GitRefLink({ioc}) {
//calculate the endpoint for tag/commitId
url = url + '-/tree/' + ioc.sourceVersion;
return <Typography><MuiLink href={url} target="_blank" rel="noreferrer">{ioc.sourceVersion}</MuiLink></Typography>
return <Typography display="inline"><MuiLink href={url} target="_blank" rel="noreferrer">{ioc.sourceVersionShort}</MuiLink></Typography>
}
\ No newline at end of file
src/components/IOC/IOCDetailAdmin.js
View file @ 1381ef36
......@@ -84,7 +84,7 @@ export default function IOCDetailAdmin({ ioc, getIOC, resetTab, buttonDisabled }
}
}, [uioc, getIOC, resetTab]);
let iocIsDeployed = ioc.activeDeployment && !ioc.activeDeployment.undeployment;
const iocIsDeployed = ioc.activeDeployment;
let nameDisabledTitle = "";
if (iocIsDeployed) {
......@@ -105,7 +105,7 @@ export default function IOCDetailAdmin({ ioc, getIOC, resetTab, buttonDisabled }
renderInput={(params) => <TextField {...params} label="IOC name" variant="outlined" required />}
onChange={(event, value, reason) => { setName(value); setError(null); }}
onInputChange={(event, value, reason) => { event && onNameKeyUp(event.nativeEvent) }}
disabled={disabled}
disabled={disabled || iocIsDeployed}
autoSelect
/>
</span>
......@@ -127,7 +127,7 @@ export default function IOCDetailAdmin({ ioc, getIOC, resetTab, buttonDisabled }
getOptionLabel={(option) => { return option.url }}
onChange={(event, value, reason) => {setGitId(value.id); setError(null);}}
renderInput={(params) => <TextField {...params} label="Git repository" variant="outlined" fullWidth required />}
disabled={disabled}
disabled={disabled || iocIsDeployed}
autoSelect
/>
);
......@@ -144,7 +144,7 @@ export default function IOCDetailAdmin({ ioc, getIOC, resetTab, buttonDisabled }
defaultValue={owner}
renderInput={(params) => <TextField {...params} label="Owner" variant="outlined" fullWidth required />}
onChange={(event, value, reason) => {setOwner(value); setError(null);}}
disabled={disabled}
disabled={disabled || iocIsDeployed}
autoSelect
/>
);
......@@ -189,7 +189,7 @@ export default function IOCDetailAdmin({ ioc, getIOC, resetTab, buttonDisabled }
<br /><br />
<Tooltip title={disabledButtonTitle}>
<span>
<Button color="primary" variant="contained" disabled={buttonDisabled || ioc.operationInProgress} type="submit">Modify IOC</Button>
<Button color="primary" variant="contained" disabled={buttonDisabled || ioc.operationInProgress || iocIsDeployed} type="submit">Modify IOC</Button>
</span>
</Tooltip>
</form>
......
src/components/IOC/IOCLiveStatus.js
View file @ 1381ef36
import React, { useCallback, useContext, useEffect } from "react";
import { Typography } from "@material-ui/core";
import { Typography, Link as MuiLink } from "@material-ui/core";
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
import { IOCDetails } from "./IOCDetails";
import { Link } from 'react-router-dom';
......@@ -31,6 +31,9 @@ export function IOCLiveStatus({ ioc, currentCommand, commands, getCommands, butt
const deploymentStatus = new DeploymentStatus(ioc.activeDeployment, deploymentJob);
const showControls = deploymentStatus.wasSuccessful();
let subset = {
"CCDB name":
<Typography><MuiLink href={`${window.CCDB_ADDRESS}?name=${ioc.namingName}`}
target="_blank" rel="noreferrer">{ioc.namingName}</MuiLink></Typography>,
"Git reference": <GitRefLink ioc={ioc} />,
"Description": ioc.description,
"Owner": ioc.owner,
......
src/components/IOC/IOCLiveStatus.spec.js
View file @ 1381ef36
......@@ -44,7 +44,7 @@ function commonTests() {
cy.contains("CCCE:SC-IOC-001");
// Expected in Info table:
cy.contains("ee3ae2a8b9e7e83e4eb511eee340716e9d541056") // git reference
cy.contains("ee3ae2a8") // git reference
cy.contains("Test IOC for CCCE") // description
cy.contains("johnsparger") // owner
cy.contains("ccce-w40.cslab.esss.lu.se") // deployed on
......
src/components/IOC/IOCManage.js
View file @ 1381ef36
......@@ -5,9 +5,7 @@ import { DeployIOC } from "../../components/IOC/DeployIOC";
import { UndeployIOC } from "../../components/IOC/UndeployIOC";
import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
import { useUpdateAndDeployIoc, useCreateUndeployment, useDeploymentListForIOC } from "../../api/SwaggerApi";
import GitRefLink from "./GitRefLink";
import AlertMessages from "./AlertMessages";
import { Link } from 'react-router-dom';
import { DeploymentAsyncList } from "../../components/deployments/DeploymentAsyncList";
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
import { initRequestParams } from "../common/Helper";
......@@ -80,33 +78,10 @@ export function IOCManage({ ioc, getIOC, buttonDisabled }) {
const getSubset = (ioc) => {
ioc = { ...ioc };
const {
description,
// active,
} = ioc;
const { sourceUrl: git } = ioc;
let host = ioc.activeDeployment?.host.fqdn;
//create link if host is set
if (ioc.activeDeployment) {
host =
<Typography>
{ioc.activeDeployment.host.csEntryId ?
<Link to={`/hosts/${ioc.activeDeployment.host.csEntryId}`}>{ioc.activeDeployment.host.fqdn}</Link>
:
<>{ioc.activeDeployment.host.fqdn}</>
}
</Typography>
}
return {
"CCDB name": <Typography><MuiLink href={`${window.CCDB_ADDRESS}?name=${ioc.namingName}`}
target="_blank" rel="noreferrer">{ioc.namingName}</MuiLink></Typography>,
description,
"Owner": ioc.owner,
git: <Typography><MuiLink href={git} target="_blank" rel="noreferrer">{git}</MuiLink></Typography>,
"Git reference" : ioc.sourceVersion ? <GitRefLink ioc={ioc} /> : '---',
"target host": host || '---',
git: <Typography><MuiLink href={git} target="_blank" rel="noreferrer">{git}</MuiLink></Typography>
};
};
......
src/components/IOC/IOCService.js
View file @ 1381ef36
......@@ -10,29 +10,30 @@ import { Alert } from "@material-ui/lab";
import { theme } from "../../style/Theme";
import { initRequestParams } from "../common/Helper";
import AccessControl from "../auth/AccessControl";
import { essColors } from "../../style/Palette";
const useStyles = makeStyles({
startButton: {
backgroundColor: '#4caf50',
backgroundColor: essColors.grass,
color: '#FFFFFF',
"&:disabled": {
backgroundColor: '#e0e0e0',
color: '#afaba6',
},
"&:hover": {
backgroundColor: '#005a00',
backgroundColor: essColors.grass_op,
color: '#FFFFFF',
}
},
stopButton: {
backgroundColor: '#aa2e25',
backgroundColor: essColors.navy,
color: '#FFFFFF',
"&:disabled": {
backgroundColor: '#e0e0e0',
color: '#afaba6',
},
"&:hover": {
backgroundColor: '#6c0000',
backgroundColor: essColors.navy_op,
color: '#FFFFFF',
}
},
......
src/components/IOC/IOCTable.js
View file @ 1381ef36
......@@ -6,26 +6,26 @@ import { IOCStatusIcon } from './IOCIcons';
import { noWrapText } from '../common/Helper';
const ownIocsColumns = [
{ id: "status", label: 'Status', width: '8%' },
{ id: "namingName", label: 'IOC name', width: '20%', sortable: false },
{ id: "host", label: 'Host', width: '15%', sortable: false },
{ id: "network", label: 'Network', width: '15%', sortable: false },
{ id: "sourceVersion", label: 'Git reference', width: '8%', sortable: false },
{ id: "status", label: 'Status', width: '80px', textAlign: "center"},
{ 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: false },
]
const exploreIocsColumns = [
{ id: "status", label: 'Status', width: '8%' },
{ id: "namingName", label: 'IOC name', width: '20%', sortable: true },
{ id: "host", label: 'Host', width: '15%', sortable: false },
{ id: "network", label: 'Network', width: '15%', sortable: false },
{ id: "owner", label: 'Owner', width: '10%', sortable: true },
{ id: "sourceVersion", label: 'Git reference', width: '8%', sortable: true },
{ id: "status", label: 'Status', width: '80px', textAlign: "center"},
{ 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: "owner", label: 'Owner', width: '15ch', sortable: true },
{ id: "sourceVersion", label: 'Version', width: '15ch', sortable: false },
]
const hostDetailsColumns = [
{ id: "status", label: 'Status', width: '8%' },
{ id: "namingName", label: 'Name', width: '30%', sortable: false },
{ id: "sourceVersion", label: 'Git reference', width: '8%', sortable: false },
{ id: "status", label: 'Status', width: '80px', textAlign: "center"},
{ id: "namingName", label: 'IOC Name', width: '25ch', sortable: true },
{ id: "sourceVersion", label: 'Version', width: '15ch', sortable: false },
]
function createGitVersionField(version, shortVersion) {
......@@ -65,7 +65,7 @@ function createTableRowForOwnIocs(ioc) {
return {
id: id,
status:
<Grid container direction="column" justifyContent="center" alignItems="center">
<Grid container direction="column" justifyContent="flex-start" alignItems="center">
<IOCStatusIcon ioc={ioc} />
</Grid>,
namingName: noWrapText(namingName ?? "---"),
......
src/components/common/table/CustomTable.js
View file @ 1381ef36
......@@ -14,7 +14,7 @@ export function CustomTable(props) {
const {columns, rows, handleRowClick, itemLink, totalCount, lazyParams, setLazyParams, columnSort, setColumnSort, rowsPerPage, loading=false, paginator=true} = props;
const dynamicColumns = columns.map((col,i) => {
return <Column key={col.id} field={col.id} header={col.label} style={{width: col.width}} body={col.body} sortable={col.sortable}/>;
return <Column key={col.id} field={col.id} header={col.label} style={{width: col.width, textAlign: col.textAlign}} body={col.body} sortable={col.sortable}/>;
});
const handleClick = (event) => {
......
src/components/deployments/DeploymentsTable.js
View file @ 1381ef36
......@@ -13,13 +13,13 @@ const formatDeploymentDate = (value) => {
}
const columns = [
{ id: 'type', label: 'Type', width: '5%'},
{ id: 'ioc', label: 'IOC Name', width: '20%', sortable: true },
{ id: 'host', label: 'Host', width: '19%', sortable: false },
{ id: 'network', label: 'Network', width: '15%', sortable: false },
{ id: 'user', label: 'User', width: '12%', sortable: true },
{ id: 'version', label: 'Git reference', width: '10%', sortable: true },
{ id: 'start', label: 'Start date', width: '15%', sortable: true }
{ id: 'type', label: 'Type', width: '80px', textAlign: "center"},
{ id: 'ioc', label: 'IOC Name', width: '25ch', sortable: true },
{ id: 'host', label: 'Host', width: '22ch', sortable: false },
{ id: 'network', label: 'Network', width: '20ch', sortable: false },
{ id: 'user', label: 'User', width: '15ch', sortable: true },
{ id: 'version', label: 'Version', width: '15ch', sortable: true },
{ id: 'start', label: 'Start date', width: '20ch', sortable: true }
];
function createGitVersionField(version, shortVersion) {
......
src/components/host/HostTable.js
View file @ 1381ef36
......@@ -6,12 +6,12 @@ import { HostStatusIcon } from './HostIcons';
import { noWrapText } from '../common/Helper';
const columns = [
{ id: 'bulb', label: 'Status', width: '6%' },
{ id: 'host', label: 'Host', width: '24%' },
{ id: 'description', label: 'Description', width: '28%' },
{ id: 'network', label: 'Network', width: '15%' },
{ id: 'scope', label: 'Scope', width: '15%' },
{ id: 'deviceType', label: 'Device Type', width: '12%' },
{ id: 'bulb', label: 'Status', width: '80px', textAlign: "center" },
{ id: 'host', label: 'Host', width: '22ch' },
{ id: 'description', label: 'Description', width: '30ch' },
{ id: 'network', label: 'Network', width: '22ch' },
{ id: 'scope', label: 'Scope', width: '20ch' },
{ id: 'deviceType', label: 'Device Type', width: '20ch' },
];
export function rowDescription(description) {
......
src/style/Palette.js
View file @ 1381ef36
......@@ -5,7 +5,9 @@ export const essColors = {
orange: '#ff7d00',
forest: '#006646',
grass: '#99be00',
grass_op: '#99be00cc',
navy: '#003366',
navy_op: '#003366cc',
black: '#000000',
white: '#ffffff',
};
......
src/views/IOC/IOCListView.js
View file @ 1381ef36
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,59 +63,68 @@ 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>
);
return (
<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}>
<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>}
/>
</Box>
</AccessControl>
</Grid>
<Grid item xs={12} md={12}>
{content}
</AccessControl>
</Grid>
</Grid>
</Container>
<Grid item xs={12} md={12}>
{content}
</Grid>
</Paper>
</Container>
</Grid>
</Paper>
</RootContainer>
);
}
......
src/views/about/AboutView.js
View file @ 1381ef36
......@@ -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/deployments/DeploymentDetailsContainer.spec.js
View file @ 1381ef36
......@@ -8,7 +8,7 @@ function commonTests() {
// Expected in Info table:
cy.contains("CCCE:SC-IOC-001") // ioc name
cy.contains("ee3ae2a8b9e7e83e4eb511eee340716e9d541056") // git reference
cy.contains("ee3ae2a8") // git reference
cy.contains("jsparger-test.cslab.esss.lu.se") // host
cy.contains("https://gitlab.esss.lu.se/ccce/dev/iocs/ccce-demo-w38.git") // git repository
cy.contains("https://awx-lab-01.cslab.esss.lu.se/#/jobs/playbook/3925") // awx job link
......
src/views/deployments/DeploymentsView.js
View file @ 1381ef36
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>
......
src/views/help/HelpView.js
View file @ 1381ef36
......@@ -11,7 +11,6 @@ import { RootContainer } from "../../components/common/Container/RootContainer";
const useStyles = makeStyles((theme) => ({
paper: {
maxWidth: "80%",
padding: theme.spacing(4),
},
}));
......
src/views/home/HomeView.js
View file @ 1381ef36
import { Container, Grid, Paper, Button, Box, Typography } from "@material-ui/core";
import React, { useState} from "react";
import React, { useState } from "react";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import { CreateIOC } from "../../components/IOC/CreateIOC";
import { KeyValueTable } from "../../components/common/KeyValueTable/KeyValueTable";
......@@ -44,51 +44,56 @@ export function HomeView() {
const closeModal = () => {
setIOCFormOpen(false);
}
}
return (
<Container>
<Paper className={classes.root}>
<Grid container spacing={1} justify="flex-end">
<Grid item xs={10}>
<Box display="flex" flexDirection="row" p={2} m={1}>
<Grid container spacing={1} justify="flex-end">
<Grid item xs={10}>
<Box display="flex" flexDirection="row" p={2} m={1}>
<Typography variant="h2">
My statistics
</Typography>
</Box>
</Grid>
<Grid item xs={2}>
<Box display="flex" flexDirection="row-reverse" p={2} m={1}>
<Button variant="contained" color="secondary" onClick={() => { setIOCFormOpen(true) }}>New IOC</Button>
</Box>
</Grid>
{statistics &&
<Grid item xs={12}>
<KeyValueTable obj={{"Total number of my IOCs": statistics.numberOfActiveIocs}} variant="table" />
</Grid>
}
</Box>
</Grid>
<Grid item xs={2}>
<Box display="flex" flexDirection="row-reverse" p={2} m={1}>
<Button variant="contained" color="secondary" onClick={() => { setIOCFormOpen(true) }}>New IOC</Button>
</Box>
</Grid>
{statistics &&
<Grid item xs={12}>
<SimpleAccordion summary="My IOCs with alarms" defaultExpanded>
<IOCAsyncList iocs={iocsWithAlarms} asyncDetails={false} rowType="own" loading={loading}
lazyParams={lazyParams} setLazyParams={setLazyParams}
columnSort={columnSort} setColumnSort={setColumnSort}
totalCount={iocsWithAlarms?.length}
paginator={false} />
</SimpleAccordion>
<KeyValueTable
obj={{
"Total number of my IOCs": statistics.numberOfActiveIocs,
"Number of my IOCs with issues": iocsWithAlarms.length
}}
variant="table" />
</Grid>
}
<Grid item xs={12}>
<SimpleAccordion summary="My IOCs with alarms" defaultExpanded>
<IOCAsyncList iocs={iocsWithAlarms} asyncDetails={false} rowType="own" loading={loading}
lazyParams={lazyParams} setLazyParams={setLazyParams}
columnSort={columnSort} setColumnSort={setColumnSort}
totalCount={iocsWithAlarms?.length}
paginator={false} />
</SimpleAccordion>
</Grid>
{announcements?.announcementsText &&
</Grid>
{announcements?.announcementsText &&
<Grid container justify="flex-start" className={classes.announcements}>
<Grid item xs={12}>
<ReactMarkdown>
{announcements.announcementsText}
</ReactMarkdown>
<ReactMarkdown>
{announcements.announcementsText}
</ReactMarkdown>
</Grid>
</Grid>
}
<SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
<CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} isUpdateIoc={false} submitCallback={closeModal} hook={useCreateIOC} title="Create new IOC" buttonText="Create"/>
</SimpleModal>
}
<SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
<CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} isUpdateIoc={false} submitCallback={closeModal} hook={useCreateIOC} title="Create new IOC" buttonText="Create" />
</SimpleModal>
</Paper>
</Container>
);
......
src/views/host/HostListView.js
View file @ 1381ef36
......@@ -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