diff --git a/package-lock.json b/package-lock.json
index d9b9a0dee0100b4245ebbb42acb60583259772df..e404371eef675dc4be8e475d7af0fa0f32b785e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "^0.5.0",
+ "@ess-ics/ce-ui-common": "^0.5.2",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
@@ -2655,9 +2655,9 @@
}
},
"node_modules/@ess-ics/ce-ui-common": {
- "version": "0.5.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-0.5.0.tgz",
- "integrity": "sha1-inPHY3jh1frYoaBCh2qTJAaoZYQ=",
+ "version": "0.5.2",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-0.5.2.tgz",
+ "integrity": "sha1-aCY34N8VWQdzw/X00QvE5vIkzSE=",
"dependencies": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
@@ -41722,9 +41722,9 @@
"dev": true
},
"@ess-ics/ce-ui-common": {
- "version": "0.5.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-0.5.0.tgz",
- "integrity": "sha1-inPHY3jh1frYoaBCh2qTJAaoZYQ=",
+ "version": "0.5.2",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-0.5.2.tgz",
+ "integrity": "sha1-aCY34N8VWQdzw/X00QvE5vIkzSE=",
"requires": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index ad53ac618cb135c5f76ec7f2f21c326e53ad8403..16dbf31db0a9aa98180be87ab78476ed44bf6eb4 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "^0.5.0",
+ "@ess-ics/ce-ui-common": "^0.5.2",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
diff --git a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
index 4a034dbd8c1a1ef8bd9951b8b246f180efea3657..e3d91a729ab75f61e386abd2dabc4efa16deb843 100644
--- a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
+++ b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
@@ -7,17 +7,14 @@ import React, {
} from "react";
import { useNavigate } from "react-router-dom";
import {
+ Box,
Button,
Typography,
Grid,
Tooltip,
LinearProgress
} from "@mui/material";
-import {
- SimpleAccordion,
- ConfirmationDialog,
- useAPIMethod
-} from "@ess-ics/ce-ui-common";
+import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
import Alert from "@mui/material/Alert";
import AccessControl from "../../auth/AccessControl";
import { IocActiveDeployment } from "../../../api/DataTypes";
@@ -113,11 +110,14 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
onClose={onClose}
onConfirm={onConfirm}
/>
-
- <SimpleAccordion
- summary="Change deployment status to not deployed (e.g. if IOC has been manually removed)"
- defaultExpanded
- >
+ <Box sx={{ pt: 2 }}>
+ <Typography
+ sx={{ my: 2.5 }}
+ variant="h3"
+ >
+ Change deployment status to not deployed (e.g. if IOC has been
+ manually removed)
+ </Typography>
<Grid
container
spacing={1}
@@ -155,7 +155,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
</Tooltip>
</Grid>
</Grid>
- </SimpleAccordion>
+ </Box>
</>
</AccessControl>
);
diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
index 2ee8c6653d9479f8433257ee51db268f80758937..6b442ab30e904b8f197d3220614f426bd0fd6110 100644
--- a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
+++ b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
@@ -6,12 +6,9 @@ import React, {
useContext
} from "react";
import AccessControl from "../../auth/AccessControl";
+import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
import {
- SimpleAccordion,
- ConfirmationDialog,
- useAPIMethod
-} from "@ess-ics/ce-ui-common";
-import {
+ Box,
Button,
Typography,
Grid,
@@ -147,10 +144,13 @@ export default function ChangeHostAdmin({
onClose={onClose}
onConfirm={onConfirm}
/>
- <SimpleAccordion
- summary="Change deployment host"
- defaultExpanded
- >
+ <Box sx={{ pt: 2 }}>
+ <Typography
+ sx={{ my: 2.5 }}
+ variant="h3"
+ >
+ Change deployment host
+ </Typography>
<Grid
container
spacing={1}
@@ -234,7 +234,7 @@ export default function ChangeHostAdmin({
</Tooltip>
</Grid>
</Grid>
- </SimpleAccordion>
+ </Box>
</AccessControl>
</>
);
diff --git a/src/components/IOC/IOCBadge/IOCBadge.js b/src/components/IOC/IOCBadge/IOCBadge.js
index 83d6c39e838bbafc2c2d1f60da788f04a40ce39d..afe564baee9c1f8fbaef24bd04b9c8e4b91b7b10 100644
--- a/src/components/IOC/IOCBadge/IOCBadge.js
+++ b/src/components/IOC/IOCBadge/IOCBadge.js
@@ -2,12 +2,13 @@ import React from "react";
import { IconBadge } from "../../common/Badge/IconBadge";
import { IOCStatusIcon } from "../IOCIcons";
-export function IOCBadge({ ioc }) {
+export function IOCBadge({ ioc, ...rest }) {
return (
<IconBadge
icon={<IOCStatusIcon ioc={ioc} />}
title={ioc.namingName ?? ioc.name}
subheader={ioc.activeDeployment?.host?.fqdn || "---"}
+ {...rest}
/>
);
}
diff --git a/src/components/IOC/IOCDelete/IOCDelete.js b/src/components/IOC/IOCDelete/IOCDelete.js
index 47908811574b596fa25a68530228e73a8a7050df..f505f0f46138ac5841324fcc1d087de626f93c50 100644
--- a/src/components/IOC/IOCDelete/IOCDelete.js
+++ b/src/components/IOC/IOCDelete/IOCDelete.js
@@ -6,8 +6,8 @@ import React, {
useMemo
} from "react";
import { useNavigate } from "react-router-dom";
-import { Button, Typography, Grid, Tooltip } from "@mui/material";
-import { SimpleAccordion, ConfirmationDialog } from "@ess-ics/ce-ui-common";
+import { Box, Button, Typography, Grid, Tooltip } from "@mui/material";
+import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
import Alert from "@mui/material/Alert";
import AccessControl from "../../auth/AccessControl";
import { apiContext } from "../../../api/DeployApi";
@@ -92,10 +92,13 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
onConfirm={onConfirm}
/>
- <SimpleAccordion
- summary="Delete IOC"
- defaultExpanded
- >
+ <Box sx={{ pt: 2 }}>
+ <Typography
+ sx={{ my: 2.5 }}
+ variant="h3"
+ >
+ Delete IOC
+ </Typography>
<Grid
container
spacing={1}
@@ -149,7 +152,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
</AccessControl>
</Grid>
</Grid>
- </SimpleAccordion>
+ </Box>
</>
);
}
diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
index 515dbec7772f1bfc91ed7f4482bc16400efac83f..b2f37986cd2f05ce4ec81bc4d270b7343adff7bb 100644
--- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
+++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
@@ -1,10 +1,7 @@
import React, { useState, useEffect, useCallback, useContext } from "react";
+import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
import {
- SimpleAccordion,
- ConfirmationDialog,
- useAPIMethod
-} from "@ess-ics/ce-ui-common";
-import {
+ Box,
Button,
CircularProgress,
TextField,
@@ -271,10 +268,13 @@ export default function IOCDetailAdmin({
onClose={onClose}
onConfirm={onConfirm}
/>
- <SimpleAccordion
- summary="Modify IOC"
- defaultExpanded
- >
+ <Box sx={{ pt: 2 }}>
+ <Typography
+ sx={{ my: 2.5 }}
+ variant="h3"
+ >
+ Modify IOC
+ </Typography>
<form
onSubmit={onSubmit}
style={{
@@ -303,8 +303,6 @@ export default function IOCDetailAdmin({
{error ? <Alert severity="error">{error}</Alert> : <></>}
- <br />
- <br />
<Tooltip title={disabledButtonTitle}>
<span>
<Button
@@ -323,7 +321,7 @@ export default function IOCDetailAdmin({
</span>
</Tooltip>
</form>
- </SimpleAccordion>
+ </Box>
</>
);
}
diff --git a/src/components/IOC/IOCDetails/IOCDetails.js b/src/components/IOC/IOCDetails/IOCDetails.js
index 769591b093385c3b2b4d7c18a8764d091fbd0a29..8c18dc517a776e094a676755abff0ea87dd3e9e7 100644
--- a/src/components/IOC/IOCDetails/IOCDetails.js
+++ b/src/components/IOC/IOCDetails/IOCDetails.js
@@ -1,6 +1,6 @@
import { Grid, Box } from "@mui/material";
import React from "react";
-import { KeyValueTable, SimpleAccordion } from "@ess-ics/ce-ui-common";
+import { KeyValueTable } from "@ess-ics/ce-ui-common";
import { IOCBadge } from "../IOCBadge";
import AccessControl from "../../auth/AccessControl";
@@ -70,17 +70,16 @@ export function IOCDetails({ ioc, getSubset = defaultSubset, alert, buttons }) {
item
xs={12}
>
- <SimpleAccordion
- defaultExpanded
- summary={<IOCBadge ioc={ioc} />}
- >
- <KeyValueTable
- obj={subset}
- variant="overline"
- sx={{ border: 0 }}
- valueOptions={{ headerName: "" }}
- />
- </SimpleAccordion>
+ <IOCBadge
+ ioc={ioc}
+ sx={{ mt: 2.5 }}
+ />
+ <KeyValueTable
+ obj={subset}
+ variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
+ />
</Grid>
</Grid>
</>
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index 7950b2a2f786ad4ad487add5b5b5385b543dd7a6..450b88ee13ed3dac6b5d6e7b2c3fe770c42e4cc4 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -14,9 +14,12 @@ import Popover from "../../common/Popover";
import { AlertBannerList } from "@ess-ics/ce-ui-common";
function AlertMessagesPopoverContents({ title, alerts }) {
- // for now filter out links on alerts due to issues with
+ // Filter out INFO level alerts
+ // And for now filter out links on alerts due to issues with
// focus behavior of popovers
- const alertsWithoutLinks = (alerts || []).map((alert) => ({
+ const alertsWithoutLinks = (
+ alerts.filter((alert) => alert?.type.toLowerCase() !== "info") || []
+ ).map((alert) => ({
...alert,
link: undefined
}));
diff --git a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
index fd133eafc253e44561c258d885dbc089f70ddc26..36847ebd1ea7b5655fcccef788a4e7dba5610b1e 100644
--- a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
+++ b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
@@ -90,19 +90,11 @@ export function IOCLiveStatus({ ioc }) {
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
>
- <SimpleAccordion
- summary="IOC log stream"
- expanded={deserialize(state.procserv_log_open)}
- onChange={(event, expanded) =>
- setState({ procserv_log_open: serialize(expanded) })
- }
- >
- <LokiContainer
- csEntryId={liveIOC.activeDeployment?.host.csEntryId}
- iocName={ioc.namingName}
- isDeployed={isIocDeployed(ioc)}
- />
- </SimpleAccordion>
+ <LokiContainer
+ csEntryId={liveIOC.activeDeployment?.host.csEntryId}
+ iocName={ioc.namingName}
+ isDeployed={isIocDeployed(ioc)}
+ />
<SimpleAccordion
summary="Records"
expanded={deserialize(state.records_open)}
diff --git a/src/components/IOC/IOCManage/IOCManage.js b/src/components/IOC/IOCManage/IOCManage.js
index f9387bc30638ab3939cff7afd909c8dcb6ac87a5..0c02f871227662407b4d865896a2caab66ab05b8 100644
--- a/src/components/IOC/IOCManage/IOCManage.js
+++ b/src/components/IOC/IOCManage/IOCManage.js
@@ -11,15 +11,12 @@ import { DeployIOC } from "../DeployIOC";
import { UndeployIOC } from "../UndeployIOC";
import {
userContext,
- SimpleAccordion,
useAPIMethod,
AlertBannerList
} from "@ess-ics/ce-ui-common";
import AccessControl from "../../auth/AccessControl";
import { DeploymentStatus } from "../../../api/DataTypes";
import { IOCService } from "../IOCService";
-import useUrlState from "@ahooksjs/use-url-state";
-import { serialize, deserialize } from "../../common/URLState/URLState";
import { JobTable } from "../../Job";
import { apiContext } from "../../../api/DeployApi";
@@ -36,13 +33,6 @@ export function IOCManage({
onPage
}) {
const { user } = useContext(userContext);
- const [state, setState] = useUrlState(
- {
- log_open: "true"
- },
- { navigateMode: "replace" }
- );
-
const client = useContext(apiContext);
const [deployDialogOpen, setDeployDialogOpen] = useState(false);
@@ -224,20 +214,12 @@ export function IOCManage({
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
>
- <SimpleAccordion
- summary="Log"
- expanded={deserialize(state.log_open)}
- onChange={(event, expanded) =>
- setState({ log_open: serialize(expanded) })
- }
- >
- <JobTable
- jobs={operations}
- pagination={pagination}
- onPage={onPage}
- loading={operationsLoading}
- />
- </SimpleAccordion>
+ <JobTable
+ jobs={operations}
+ pagination={pagination}
+ onPage={onPage}
+ loading={operationsLoading}
+ />
<DeployIOC
open={deployDialogOpen}
setOpen={setDeployDialogOpen}
diff --git a/src/components/IOC/IOCTable/IOCTable.js b/src/components/IOC/IOCTable/IOCTable.js
index 587e42ffc048083b2564379b85820d31e82c0878..9e9c8f70ddaaaae0cafdfbe9686f342d746bba36 100644
--- a/src/components/IOC/IOCTable/IOCTable.js
+++ b/src/components/IOC/IOCTable/IOCTable.js
@@ -168,6 +168,7 @@ export function IOCTable({
pagination={pagination}
onPage={onPage}
loading={loading}
+ disableHover
/>
);
}
diff --git a/src/components/Job/JobTable.js b/src/components/Job/JobTable.js
index ffa2c9176b80ef405308e6dd4b9178cbac799f72..42d3f372fb5946dccfdde903674ba4fcd8abf389 100644
--- a/src/components/Job/JobTable.js
+++ b/src/components/Job/JobTable.js
@@ -1,6 +1,6 @@
import React from "react";
import { Table } from "@ess-ics/ce-ui-common";
-import { Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
import { EllipsisTextLink, noWrapText } from "../common/Helper";
import { JobTypeIcon } from "./JobIcons";
import { formatDate } from "../common/Helper";
@@ -53,12 +53,7 @@ function createTableRow(job, colorStyle) {
href={`/iocs/${job.iocId}`}
/>
),
- version: (
- <EllipsisTextLink
- text={job.gitReference}
- href={`/jobs/${job?.id}`}
- />
- ),
+ version: job.gitReference,
host: job.host?.hostName ? (
<EllipsisTextLink
text={job.host?.hostName}
@@ -94,12 +89,15 @@ export function JobTable({
const [columns, createRow] = tableTypeSpecifics[rowType];
return (
- <Table
- columns={columns}
- rows={jobs?.map((job) => createRow(job))}
- pagination={pagination}
- onPage={onPage}
- loading={loading}
- />
+ <Box sx={{ pt: 2 }}>
+ <Table
+ columns={columns}
+ rows={jobs?.map((job) => createRow(job))}
+ pagination={pagination}
+ onPage={onPage}
+ loading={loading}
+ disableHover
+ />
+ </Box>
);
}
diff --git a/src/components/common/Badge/IconBadge.js b/src/components/common/Badge/IconBadge.js
index 0e1a00959323ae1ca0b46284ee2ce75f0c393e8c..53d22469ee575add13b2cc59286e505a6366bd20 100644
--- a/src/components/common/Badge/IconBadge.js
+++ b/src/components/common/Badge/IconBadge.js
@@ -1,11 +1,12 @@
import { Grid, Typography } from "@mui/material";
import React from "react";
-export function IconBadge({ icon, secondaryIcon, title, subheader }) {
+export function IconBadge({ icon, secondaryIcon, title, subheader, ...rest }) {
return (
<Grid
container
alignItems="center"
+ {...rest}
>
<Grid
item
diff --git a/src/components/common/Loki/LokiContainer.js b/src/components/common/Loki/LokiContainer.js
index e3fc892967529e465a4b524b907564be17187466..9f9a58d218195049ea6f1de750c2875eb39f3b13 100644
--- a/src/components/common/Loki/LokiContainer.js
+++ b/src/components/common/Loki/LokiContainer.js
@@ -1,5 +1,5 @@
import React, { useContext, useMemo } from "react";
-import { Container } from "@mui/material";
+import { Box, Typography } from "@mui/material";
import { LokiPanel } from "./LokiPanel";
import { apiContext } from "../../../api/DeployApi";
import { useAPIMethod } from "@ess-ics/ce-ui-common";
@@ -15,14 +15,20 @@ export function LokiContainer({ csEntryId, iocName, isDeployed }) {
return (
<>
{iocHost && (
- <Container>
+ <Box sx={{ pt: 2 }}>
+ <Typography
+ sx={{ my: 2.5 }}
+ variant="h3"
+ >
+ IOC log stream
+ </Typography>
<LokiPanel
host={iocHost}
isSyslog={false}
iocName={iocName}
isDeployed={isDeployed}
/>
- </Container>
+ </Box>
)}
</>
);
diff --git a/src/components/common/Loki/LokiPanel.js b/src/components/common/Loki/LokiPanel.js
index 9661b00eee1398d19e4278b09cd9b725d24d2cfd..4a4bfe0f4d8ca2ec5389a4b618db73e8f7862002 100644
--- a/src/components/common/Loki/LokiPanel.js
+++ b/src/components/common/Loki/LokiPanel.js
@@ -7,13 +7,13 @@ import React, {
} from "react";
import { styled } from "@mui/material/styles";
import {
+ Box,
Grid,
Select,
MenuItem,
InputLabel,
FormControl,
- LinearProgress,
- Container
+ LinearProgress
} from "@mui/material";
import { formatDate } from "../Helper.js";
import { Console } from "../Console/Console";
@@ -291,7 +291,7 @@ export function LokiPanel({ host, iocName, isSyslog, isDeployed }) {
return (
<Root>
- <Container maxWidth="xl">
+ <Box>
{sysLogData || procServLog || !isDeployed ? (
<Grid
container
@@ -318,7 +318,7 @@ export function LokiPanel({ host, iocName, isSyslog, isDeployed }) {
<LinearProgress color="primary" />
</div>
)}
- </Container>
+ </Box>
</Root>
);
}
diff --git a/src/components/common/SearchBar/SearchBar.js b/src/components/common/SearchBar/SearchBar.js
index 885133b869edf44830a7f19ce8cef27e66e8b848..0167563def2036b3db44e193efb48f9f371bd3bf 100644
--- a/src/components/common/SearchBar/SearchBar.js
+++ b/src/components/common/SearchBar/SearchBar.js
@@ -1,9 +1,4 @@
-import React, {
- CircularProgress,
- Container,
- Fade,
- TextField
-} from "@mui/material";
+import React, { CircularProgress, Fade, TextField } from "@mui/material";
import { Check } from "@mui/icons-material";
import { useEffect, useState } from "react";
import { useEffectAfterMount } from "../../../hooks/MountEffects";
@@ -63,7 +58,7 @@ export function SearchBar({
const LoadingAnimation = loading ? Loading : Finished;
return (
- <Container>
+ <>
<TextField
fullWidth
variant="outlined"
@@ -74,9 +69,9 @@ export function SearchBar({
InputProps={{
endAdornment: showAnimation && LoadingAnimation
}}
+ sx={{ mb: 3 }}
/>
- <div> </div>
{children}
- </Container>
+ </>
);
}
diff --git a/src/components/host/HostBadge.js b/src/components/host/HostBadge.js
index b43c418a68bad89b2fd1535acdcbf593d9e756bd..80e6132f83b088b4f37bdc344608ecdab307c87b 100644
--- a/src/components/host/HostBadge.js
+++ b/src/components/host/HostBadge.js
@@ -3,12 +3,13 @@ import { IconBadge } from "../common/Badge/IconBadge";
import { HostStatusIcon } from "./HostIcons";
import { extractMainNetwork } from "../common/Helper";
-export function HostBadge({ host }) {
+export function HostBadge({ host, ...rest }) {
return (
<IconBadge
icon={<HostStatusIcon host={host} />}
title={host.csEntryHost?.fqdn}
subheader={extractMainNetwork(host?.csEntryHost?.interfaces, "---")}
+ {...rest}
/>
);
}
diff --git a/src/components/host/HostTable.js b/src/components/host/HostTable.js
index b2b4254c56c115b52664f60c0dfc1d0ace95ab05..45c8fcf0cceb772cfd5f3435d53c01a22eb722bb 100644
--- a/src/components/host/HostTable.js
+++ b/src/components/host/HostTable.js
@@ -63,6 +63,7 @@ export function HostTable({ hosts, pagination, onPage, loading }) {
pagination={pagination}
onPage={onPage}
loading={loading}
+ disableHover
/>
);
}
diff --git a/src/components/records/RecordBadge.js b/src/components/records/RecordBadge.js
index d66fef066a7ca7c283528c117b5f1d5f4e8d2ceb..286e976fc0ffc8e8766405104c4ef11ab53c80c7 100644
--- a/src/components/records/RecordBadge.js
+++ b/src/components/records/RecordBadge.js
@@ -2,12 +2,13 @@ import React from "react";
import { IconBadge } from "../common/Badge/IconBadge";
import { RecordStatusIcon } from "./RecordIcons";
-export function RecordBadge({ record }) {
+export function RecordBadge({ record, ...rest }) {
return (
<IconBadge
icon={<RecordStatusIcon record={record} />}
title={record.name}
subheader={record.iocName}
+ {...rest}
/>
);
}
diff --git a/src/components/records/RecordSearch.js b/src/components/records/RecordSearch.js
index f31261a5a5ad68147b4d80c644cdd1b1e201dedd..4a3a859a37e48a5d3f8efe50b73caebd51021a63 100644
--- a/src/components/records/RecordSearch.js
+++ b/src/components/records/RecordSearch.js
@@ -159,7 +159,7 @@ export function RecordSearch({ iocName, rowType }) {
search={setSearch}
query={deserialize(urlState.query)}
loading={loading || !dataReady}
- placeholder="Search in Record"
+ placeholder="Search"
>
<RecordTable
records={records}
diff --git a/src/components/records/RecordTable.js b/src/components/records/RecordTable.js
index 9e73236f78734620454067b851fba17d1d11b041..e917d83f384233e1767a74a0f5a2d16d0712b236 100644
--- a/src/components/records/RecordTable.js
+++ b/src/components/records/RecordTable.js
@@ -155,6 +155,7 @@ export function RecordTable({
pagination={pagination}
onPage={onPage}
loading={loading}
+ disableHover
/>
);
}
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index eb64c08e2dbac6217bb31653af3a696e9775c705..669aaae8ff8e543608210e27dcbaf85ac6a208d8 100644
--- a/src/views/IOC/IOCListView.js
+++ b/src/views/IOC/IOCListView.js
@@ -157,7 +157,7 @@ export function IOCListView() {
search={setSearch}
query={deserialize(urlState.query)}
loading={loading}
- placeholder="Search in IOC name"
+ placeholder="Search"
>
<IOCTable
iocs={iocs?.iocList}
diff --git a/src/views/UserPage/UserDetailsAccessControl.js b/src/views/UserPage/UserDetailsAccessControl.js
index 69f010ee62998df1f944a217b27073b57903c6c9..a3f0ee838351aee48ab2e9b966fedab57e734556 100644
--- a/src/views/UserPage/UserDetailsAccessControl.js
+++ b/src/views/UserPage/UserDetailsAccessControl.js
@@ -1,14 +1,14 @@
import React from "react";
-import { RootContainer } from "../../components/common/Container/RootContainer";
+import { RootPaper } from "@ess-ics/ce-ui-common";
import AccessControl from "../../components/auth/AccessControl";
import { UserDetailsContainer } from "./UserDetailsContainer";
export function UserDetailsAccessControl() {
return (
- <RootContainer>
+ <RootPaper>
<AccessControl allowedRoles={[]}>
<UserDetailsContainer />
</AccessControl>
- </RootContainer>
+ </RootPaper>
);
}
diff --git a/src/views/UserPage/UserPageView.js b/src/views/UserPage/UserPageView.js
index 71d3681abb06f0e66c8576353067a13488718e0d..f889d92b030a322e2a871746760d015b79dd9bc8 100644
--- a/src/views/UserPage/UserPageView.js
+++ b/src/views/UserPage/UserPageView.js
@@ -1,6 +1,6 @@
import React, { useContext, useEffect } from "react";
import { Grid } from "@mui/material";
-import { GlobalAppBarContext, RootPaper } from "@ess-ics/ce-ui-common";
+import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
import { applicationTitle } from "../../components/common/Helper";
import { UserProfile } from "../../components/common/User/UserProfile";
import { UserIocList } from "../../components/common/User/UserIOCList";
@@ -11,30 +11,28 @@ export function UserPageView({ userName, userInfo }) {
useEffect(() => setTitle(applicationTitle(userName)), [setTitle, userName]);
return (
- <RootPaper>
+ <Grid
+ container
+ spacing={1}
+ >
<Grid
- container
- spacing={1}
+ item
+ xs={12}
>
- <Grid
- item
- xs={12}
- >
- <UserProfile userInfo={userInfo} />
- </Grid>
- <Grid
- item
- xs={12}
- >
- <UserIocList userName={userName} />
- </Grid>
- <Grid
- item
- xs={12}
- >
- <UserOperationList userName={userName} />
- </Grid>
+ <UserProfile userInfo={userInfo} />
</Grid>
- </RootPaper>
+ <Grid
+ item
+ xs={12}
+ >
+ <UserIocList userName={userName} />
+ </Grid>
+ <Grid
+ item
+ xs={12}
+ >
+ <UserOperationList userName={userName} />
+ </Grid>
+ </Grid>
);
}
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index 19ccd06a11089d424a38ac6b585b67ad7cae1227..790fd4062b4c120dd12ee44c02d43dd2ed737708 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -1,5 +1,6 @@
import React, { useEffect, useCallback, useContext, useMemo } from "react";
import {
+ Box,
Link,
Container,
IconButton,
@@ -195,19 +196,19 @@ export function HostDetailsView({ id, host }) {
</IconButton>
{host && <AlertBannerList alerts={host.alerts} />}
- <Card
- variant="outlined"
- sx={{ marginTop: 2 }}
- >
- <CardContent>{host && <HostBadge host={host} />}</CardContent>
- </Card>
- <SimpleAccordion
- summary="Deployed IOCs"
- expanded={deserialize(urlState.iocs_open)}
- onChange={(event, expanded) =>
- setUrlState({ iocs_open: serialize(expanded) })
- }
- >
+ {host && (
+ <HostBadge
+ host={host}
+ sx={{ mt: 2.5 }}
+ />
+ )}
+ <Box sx={{ pt: 2 }}>
+ <Typography
+ sx={{ my: 2.5 }}
+ variant="h3"
+ >
+ Deployed IOCs
+ </Typography>
<IOCTable
iocs={iocs?.deployedIocs}
loading={loading || !dataReady}
@@ -215,7 +216,7 @@ export function HostDetailsView({ id, host }) {
pagination={pagination}
onPage={onPage}
/>
- </SimpleAccordion>
+ </Box>
<AccessControl
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
@@ -241,25 +242,26 @@ export function HostDetailsView({ id, host }) {
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
>
- <SimpleAccordion
- summary="Host log stream"
- expanded={deserialize(urlState.syslog_open)}
- onChange={(event, expanded) =>
- setUrlState({ syslog_open: serialize(expanded) })
- }
- >
+ <Box sx={{ pt: 2 }}>
+ <Typography
+ sx={{ my: 2.5 }}
+ variant="h3"
+ >
+ Host log stream
+ </Typography>
{host && (
- <Container>
- <LokiPanel
- host={host}
- isSyslog
- isDeployed
- />
- </Container>
+ <LokiPanel
+ host={host}
+ isSyslog
+ isDeployed
+ />
)}
- </SimpleAccordion>
+ </Box>
</AccessControl>
- <Card variant="outlined">
+ <Card
+ variant="outlined"
+ sx={{ mt: 2 }}
+ >
<CardContent>
<Container>
<Typography
diff --git a/src/views/jobs/JobListView.js b/src/views/jobs/JobListView.js
index 0ac7543df179c508ec01a41b554261ccf8913eec..0d6ade23e747eae1f53987dbfe66c48b37a0288a 100644
--- a/src/views/jobs/JobListView.js
+++ b/src/views/jobs/JobListView.js
@@ -154,7 +154,7 @@ export function JobListView() {
search={setSearch}
query={deserialize(urlState.query)}
loading={loading}
- placeholder="Search in IOC name or user"
+ placeholder="Search"
>
<JobTable
jobs={operations?.operations}
diff --git a/src/views/records/RecordDetailsView.js b/src/views/records/RecordDetailsView.js
index b21c8e05aa6ad58ea796e72ec1351b2f05bb4d9b..6a0fceba059ff4e875d24c51d63ef44c0fcad311 100644
--- a/src/views/records/RecordDetailsView.js
+++ b/src/views/records/RecordDetailsView.js
@@ -16,7 +16,6 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import {
RootPaper,
KeyValueTable,
- SimpleAccordion,
GlobalAppBarContext
} from "@ess-ics/ce-ui-common";
import { RecordBadge } from "../../components/records/RecordBadge";
@@ -154,17 +153,18 @@ export function RecordDetailsView() {
<ArrowBackIcon />
</IconButton>
{record && (
- <SimpleAccordion
- defaultExpanded
- summary={<RecordBadge record={record} />}
- >
+ <>
+ <RecordBadge
+ record={record}
+ sx={{ mt: 2.5 }}
+ />
<KeyValueTable
obj={getSubset(record)}
variant="overline"
sx={{ border: 0 }}
valueOptions={{ headerName: "" }}
/>
- </SimpleAccordion>
+ </>
)}
</>
)}
diff --git a/src/views/records/RecordListView.js b/src/views/records/RecordListView.js
index 4f44f34b5240885afee0b0e6afda23da5c5f2386..b91b07aa0dc3d6c61fdcd8d01a139c209629ae30 100644
--- a/src/views/records/RecordListView.js
+++ b/src/views/records/RecordListView.js
@@ -158,7 +158,7 @@ export function RecordListView() {
search={setSearch}
query={deserialize(urlState.query)}
loading={loading || !dataReady}
- placeholder="Search in Record"
+ placeholder="Search"
>
<RecordTable
records={records}