diff --git a/.storybook/preview.js b/.storybook/preview.js
index eba645974b03a5615d3c0ce608d0bd410bc56f6b..c65f7d7a28f7315a7ee573991ed5384004bf1959 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,5 @@
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { handlers } from "../src/mocks/handlers"
-import "../src/index.css";
// Initialize MSW
initialize();
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index cf0f1630a03ee9cca74ee9e5aadd8355b0cbebde..0000000000000000000000000000000000000000
--- a/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i,700");
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,600,600italic,900italic,900");
-@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,600,400italic,600italic");
-
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.js b/src/App.js
index e4d199025551fe57f7f034fcacc968a0de78c74e..765e9f765515185fbf85202a738f12a00a0f99de 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
import React, { useContext, useEffect } from "react";
-import "./App.css";
import { Navigate, Route, Routes, BrowserRouter } from "react-router-dom";
import { StyledEngineProvider } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
diff --git a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
index 3d0052591d2b488b745b50877445ab5c407ae58e..583795d74fc2398e7f7bbb70d8726751e8633ded 100644
--- a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
+++ b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
@@ -1,37 +1,14 @@
import React, { useState, useRef, useEffect } from "react";
-import { styled } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import { Button, Typography, Grid, Tooltip } from "@mui/material";
import { useUndeployInDb } from "../../../api/SwaggerApi";
-import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
+import { SimpleAccordion } from "@ess-ics/ce-ui-common";
import { ConfirmationDialog } from "../../dialog/ConfirmationDialog";
import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
import Alert from "@mui/material/Alert";
import AccessControl from "../../auth/AccessControl";
import { IocActiveDeployment } from "../../../api/DataTypes";
-const PREFIX = "AdministerUndeployment";
-
-const classes = {
- undeployButton: `${PREFIX}-undeployButton`
-};
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled("div")({
- [`& .${classes.undeployButton}`]: {
- backgroundColor: "#aa2e25",
- color: "#FFFFFF",
- "&:disabled": {
- backgroundColor: "#e0e0e0",
- color: "#afaba6"
- },
- "&:hover": {
- backgroundColor: "#6c0000",
- color: "#FFFFFF"
- }
- }
-});
-
export default function AdministerUndeployment({ ioc, buttonDisabled }) {
const navigate = useNavigate();
@@ -42,7 +19,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
// for the dialog
const [error, setError] = useState();
const [adHocDialogOpen, setAdHocDialogOpen] = useState(false);
- const [adHocDialogTitle, setAdHocDiatlogTitle] = useState();
+ const [adHocDialogTitle, setAdHocDialogTitle] = useState();
const [adHocDialogDescription, setAdHocDialogDescription] = useState();
const callbackRef = useRef();
@@ -50,9 +27,9 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
// Setting up dialog properties
const openUndeployModal = () => {
- setAdHocDiatlogTitle("Administratively 'undeploy' IOC");
+ setAdHocDialogTitle("Administratively 'undeploy' IOC");
setAdHocDialogDescription(
- <Root>
+ <>
<Typography style={{ display: "inline-block" }}>
Are you sure want to administer IOC as undeployed
</Typography>
@@ -62,7 +39,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
{" "}
{ioc.namingName}?{" "}
</Typography>
- </Root>
+ </>
);
callbackRef.current = undeployIoc;
setAdHocDialogOpen(true);
@@ -95,67 +72,66 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
}
return (
- <Root>
- <AccessControl
- allowedRoles={["DeploymentToolAdmin"]}
- renderNoAccess={() => <></>}
- >
- <>
- <SimpleModal
+ <AccessControl
+ allowedRoles={["DeploymentToolAdmin"]}
+ renderNoAccess={() => <></>}
+ >
+ <>
+ <SimpleModal
+ open={adHocDialogOpen}
+ setOpen={setAdHocDialogOpen}
+ >
+ <ConfirmationDialog
open={adHocDialogOpen}
setOpen={setAdHocDialogOpen}
- >
- <ConfirmationDialog
- open={adHocDialogOpen}
- setOpen={setAdHocDialogOpen}
- title={adHocDialogTitle}
- description={adHocDialogDescription}
- callback={callbackRef.current}
- />
- </SimpleModal>
+ title={adHocDialogTitle}
+ description={adHocDialogDescription}
+ callback={callbackRef.current}
+ />
+ </SimpleModal>
- <SimpleAccordion
- summary="Change deployment status to not deployed (e.g. if IOC has been manually removed)"
- defaultExpanded
+ <SimpleAccordion
+ summary="Change deployment status to not deployed (e.g. if IOC has been manually removed)"
+ defaultExpanded
+ >
+ <Grid
+ container
+ spacing={1}
>
- <Grid
- container
- spacing={1}
- >
- {error ? (
- <Grid
- item
- xs={12}
- >
- <Alert severity="error">{error}</Alert>
- </Grid>
- ) : (
- <></>
- )}
+ {error ? (
<Grid
item
xs={12}
>
- <Tooltip title={disabledButtonTitle}>
- <span>
- <Button
- className={classes.undeployButton}
- onClick={openUndeployModal}
- disabled={
- buttonDisabled ||
- ioc.operationInProgress ||
- !failedDeployment
- }
- >
- SET DEPLOYMENT STATE TO NOT DEPLOYED
- </Button>
- </span>
- </Tooltip>
+ <Alert severity="error">{error}</Alert>
</Grid>
+ ) : (
+ <></>
+ )}
+ <Grid
+ item
+ xs={12}
+ >
+ <Tooltip title={disabledButtonTitle}>
+ <span>
+ <Button
+ onClick={openUndeployModal}
+ disabled={
+ buttonDisabled ||
+ ioc.operationInProgress ||
+ !failedDeployment
+ }
+ color="error"
+ variant="contained"
+ >
+ SET DEPLOYMENT STATE TO NOT DEPLOYED
+ </Button>
+ </span>
+ </Tooltip>
</Grid>
- </SimpleAccordion>
- </>
- </AccessControl>
- </Root>
+ </Grid>
+ </SimpleAccordion>
+ </>
+ </AccessControl>
);
}
diff --git a/src/components/IOC/AlertMessages/AlertMessages.js b/src/components/IOC/AlertMessages/AlertMessages.js
index e06128b25c37a8bc722d6bd52ce8c66665e283ce..e99dd3af3b592294bf6a1685c0f8f2fd842fbe83 100644
--- a/src/components/IOC/AlertMessages/AlertMessages.js
+++ b/src/components/IOC/AlertMessages/AlertMessages.js
@@ -1,20 +1,7 @@
import React from "react";
-import { styled } from "@mui/material/styles";
import { Button, Grid } from "@mui/material";
import Alert from "@mui/material/Alert";
-const PREFIX = "AlertMessages";
-
-const classes = {
- infoBadge: `${PREFIX}-infoBadge`
-};
-
-const StyledGrid = styled(Grid)(({ theme }) => ({
- [`& .${classes.infoBadge}`]: {
- backgroundColor: theme.infoBadge.bgColor
- }
-}));
-
export default function AlertMessages({ alerts }) {
function determineSeverity(alarmType) {
return ["error", "warning", "success"].includes(alarmType?.toLowerCase())
@@ -22,14 +9,8 @@ export default function AlertMessages({ alerts }) {
: "info";
}
- function determineClassName(alarmType) {
- if (alarmType === "INFO") {
- return classes.infoBadge;
- }
- }
-
return (
- <StyledGrid
+ <Grid
id="ioc-alerts"
container
spacing={1}
@@ -41,7 +22,6 @@ export default function AlertMessages({ alerts }) {
key={alert?.message || alert}
>
<Alert
- className={determineClassName(alert?.type)}
severity={determineSeverity(alert?.type)}
action={
alert?.link && (
@@ -55,11 +35,12 @@ export default function AlertMessages({ alerts }) {
</Button>
)
}
+ component="p"
>
{alert?.message}
</Alert>
</Grid>
))}
- </StyledGrid>
+ </Grid>
);
}
diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
index 69cf3eee75eb6c8277bb004fb073417a384b5037..7c45ca7e469d5cf79740df60f5be8ecf19ea2991 100644
--- a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
+++ b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect, useCallback } from "react";
import AccessControl from "../../auth/AccessControl";
-import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
+import { SimpleAccordion } from "@ess-ics/ce-ui-common";
import {
Button,
Typography,
diff --git a/src/components/IOC/IOCDelete/IOCDelete.js b/src/components/IOC/IOCDelete/IOCDelete.js
index b70e36ff415f58d7b81fd4df565a3533393a7c68..32e88f6a859f6e45250f74bd131ffeed76d320c3 100644
--- a/src/components/IOC/IOCDelete/IOCDelete.js
+++ b/src/components/IOC/IOCDelete/IOCDelete.js
@@ -1,36 +1,13 @@
import React, { useState, useRef, useEffect } from "react";
-import { styled } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import { Button, Typography, Grid, Tooltip } from "@mui/material";
import { useDeleteIOC } from "../../../api/SwaggerApi";
-import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
+import { SimpleAccordion } from "@ess-ics/ce-ui-common";
import { ConfirmationDialog } from "../../dialog/ConfirmationDialog";
import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
import Alert from "@mui/material/Alert";
import AccessControl from "../../auth/AccessControl";
-const PREFIX = "IOCDelete";
-
-const classes = {
- deleteButton: `${PREFIX}-deleteButton`
-};
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled("div")({
- [`& .${classes.deleteButton}`]: {
- backgroundColor: "#aa2e25",
- color: "#FFFFFF",
- "&:disabled": {
- backgroundColor: "#e0e0e0",
- color: "#afaba6"
- },
- "&:hover": {
- backgroundColor: "#6c0000",
- color: "#FFFFFF"
- }
- }
-});
-
export default function IOCDelete({ ioc, buttonDisabled }) {
const navigate = useNavigate();
@@ -51,7 +28,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
const openDeleteModal = () => {
setAdHocDiatlogTitle("Deleting IOC");
setAdHocDialogDescription(
- <Root>
+ <>
<Typography style={{ display: "inline-block" }}>
Are you sure want to delete
</Typography>
@@ -61,7 +38,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
{" "}
{ioc.namingName}?{" "}
</Typography>
- </Root>
+ </>
);
callbackRef.current = deleteIoc;
setAdHocDialogOpen(true);
@@ -86,7 +63,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
}
return (
- <Root>
+ <>
<SimpleModal
open={adHocDialogOpen}
setOpen={setAdHocDialogOpen}
@@ -128,7 +105,8 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
<Tooltip title={"Only admins can delete the IOC"}>
<span>
<Button
- className={classes.deleteButton}
+ color="error"
+ variant="contained"
disabled
>
Delete IOC
@@ -140,13 +118,14 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
<Tooltip title={disabledButtonTitle}>
<span>
<Button
- className={classes.deleteButton}
onClick={openDeleteModal}
disabled={
buttonDisabled ||
ioc.operationInProgress ||
ioc.activeDeployment
}
+ color="error"
+ variant="contained"
>
Delete IOC
</Button>
@@ -156,6 +135,6 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
</Grid>
</Grid>
</SimpleAccordion>
- </Root>
+ </>
);
}
diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
index 90f8a3acd58607d0d58d5c98a63b6e4b99fa6c50..ac55cd42ae6f05a68e62340ae35bbcdcd71835f8 100644
--- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
+++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import { styled } from "@mui/material/styles";
-import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
+import { SimpleAccordion } from "@ess-ics/ce-ui-common";
import {
Button,
CircularProgress,
diff --git a/src/components/IOC/IOCDetails/IOCDetails.js b/src/components/IOC/IOCDetails/IOCDetails.js
index 33d3242a820930a4259415e734fa92d2c178c468..eda7ad2ec03ce93ae90b051251d641e2622200e6 100644
--- a/src/components/IOC/IOCDetails/IOCDetails.js
+++ b/src/components/IOC/IOCDetails/IOCDetails.js
@@ -1,7 +1,6 @@
import { Grid, Box } from "@mui/material";
import React from "react";
-import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
-import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
+import { KeyValueTable, SimpleAccordion } from "@ess-ics/ce-ui-common";
import { IOCBadge } from "../IOCBadge";
import AccessControl from "../../auth/AccessControl";
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index a4e0f35fc456c90c55884cdd72b5e1708e158731..95d52e15ff842c8f4febf41ebfb5ad11414d6e1e 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -24,7 +24,7 @@ function AlertMessagesPopoverContents({ title, alerts }) {
return (
<div style={{ maxWidth: "75vw" }}>
<Typography
- style={{
+ sx={{
fontWeight: alertsWithoutLinks.length > 0 ? "bold" : "normal"
}}
>
diff --git a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
index 1ed9c3d4bfbc87de76cfe14ebfaebe314d64d6f1..85be7b355944f94589ce1d68176fed9f77a48feb 100644
--- a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
+++ b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
@@ -1,7 +1,6 @@
import React, { useCallback } from "react";
-import { styled } from "@mui/material/styles";
import { Typography, Link as MuiLink } from "@mui/material";
-import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
+import { SimpleAccordion } from "@ess-ics/ce-ui-common";
import { IOCDetails } from "../IOCDetails";
import { Link as ReactRouterLink } from "react-router-dom";
import { LokiContainer } from "../../common/Loki/LokiContainer";
@@ -13,19 +12,6 @@ import { IocActiveDeployment } from "../../../api/DataTypes";
import useUrlState from "@ahooksjs/use-url-state";
import { serialize, deserialize } from "../../common/URLState/URLState";
-const PREFIX = "IOCLiveStatus";
-
-const classes = {
- iocNotDeployed: `${PREFIX}-iocNotDeployed`
-};
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled("div")(({ theme }) => ({
- [`& .${classes.iocNotDeployed}`]: {
- color: theme.iocNotDeployed.color
- }
-}));
-
export function IOCLiveStatus({ ioc }) {
const [state, setState] = useUrlState(
{
@@ -44,9 +30,7 @@ export function IOCLiveStatus({ ioc }) {
).hasDeployment();
// if IOC is not deployed some fields has to show '---' value
- const grayOutNoText = (
- <Typography className={classes.iocNotDeployed}>---</Typography>
- );
+ const grayOutNoText = <Typography color="gray">---</Typography>;
let subset = {
Description: ioc.description,
@@ -70,7 +54,7 @@ export function IOCLiveStatus({ ioc }) {
{ioc.activeDeployment?.host.fqdn}
</MuiLink>
) : (
- <Root>{ioc.activeDeployment?.host.fqdn}</Root>
+ ioc.activeDeployment?.host.fqdn
)}
</Typography>
) : (
diff --git a/src/components/IOC/IOCManage/IOCManage.js b/src/components/IOC/IOCManage/IOCManage.js
index fbbde3987f9bfa5e228e8d5babb7d77dc33794fe..9378005ee141188290d0f67c4bc5404dc424e27a 100644
--- a/src/components/IOC/IOCManage/IOCManage.js
+++ b/src/components/IOC/IOCManage/IOCManage.js
@@ -9,9 +9,8 @@ import {
useCreateUndeployment,
useJobById
} from "../../../api/SwaggerApi";
-import { userContext } from "@ess-ics/ce-ui-common";
+import { userContext, SimpleAccordion } from "@ess-ics/ce-ui-common";
import AlertMessages from "../AlertMessages";
-import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
import AccessControl from "../../auth/AccessControl";
import { DeploymentStatus } from "../../../api/DataTypes";
import { IOCService } from "../IOCService";
diff --git a/src/components/IOC/IOCService/IOCService.js b/src/components/IOC/IOCService/IOCService.js
index 8263bffb083643e418e75bee1285ea766811addf..6f42bda0666a16a8cbbf60a39948003d81b08645 100644
--- a/src/components/IOC/IOCService/IOCService.js
+++ b/src/components/IOC/IOCService/IOCService.js
@@ -14,43 +14,32 @@ import { notificationContext } from "../../common/notification/Notifications";
import Alert from "@mui/material/Alert";
import { initRequestParams } from "../../common/Helper";
import AccessControl from "../../auth/AccessControl";
-import { essColors } from "../../../style/Palette";
import { useNavigate } from "react-router-dom";
-const PREFIX = "IOCService";
-
-const classes = {
- startButton: `${PREFIX}-startButton`,
- stopButton: `${PREFIX}-stopButton`
-};
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled("div")({
- [`& .${classes.startButton}`]: {
- backgroundColor: essColors.grass,
- color: "#FFFFFF",
- "&:disabled": {
- backgroundColor: "#e0e0e0",
- color: "#afaba6"
- },
- "&:hover": {
- backgroundColor: essColors.grass_op,
- color: "#FFFFFF"
- }
+const StartButton = styled(Button)(({ theme }) => ({
+ backgroundColor: theme.palette.essGrass.main,
+ color: theme.palette.essWhite.main,
+ "&:disabled": {
+ backgroundColor: theme.palette.grey[300],
+ color: theme.palette.grey[500]
},
- [`& .${classes.stopButton}`]: {
- backgroundColor: essColors.navy,
- color: "#FFFFFF",
- "&:disabled": {
- backgroundColor: "#e0e0e0",
- color: "#afaba6"
- },
- "&:hover": {
- backgroundColor: essColors.navy_op,
- color: "#FFFFFF"
- }
+ "&:hover": {
+ backgroundColor: theme.palette.essGrass.main,
+ color: theme.palette.essWhite.main
}
-});
+}));
+const StopButton = styled(Button)(({ theme }) => ({
+ backgroundColor: theme.palette.essNavy.main,
+ color: theme.palette.essWhite.main,
+ "&:disabled": {
+ backgroundColor: theme.palette.grey[300],
+ color: theme.palette.grey[500]
+ },
+ "&:hover": {
+ backgroundColor: theme.palette.essNavy.main,
+ color: theme.palette.essWhite.main
+ }
+}));
export function IOCService({
ioc,
@@ -124,7 +113,7 @@ export function IOCService({
const openStartModal = () => {
setAdHocDiatlogTitle("Starting IOC");
setAdHocDialogDescription(
- <Root>
+ <>
<Typography style={{ display: "inline-block" }}>
Are you sure want to start
</Typography>
@@ -134,7 +123,7 @@ export function IOCService({
{" "}
{ioc.namingName}?{" "}
</Typography>
- </Root>
+ </>
);
callbackRef.current = start;
setAdHocDialogOpen(true);
@@ -143,7 +132,7 @@ export function IOCService({
const openStopModal = () => {
setAdHocDiatlogTitle("Stopping IOC");
setAdHocDialogDescription(
- <Root>
+ <>
<Typography style={{ display: "inline-block" }}>
Are you sure want to stop
</Typography>
@@ -153,7 +142,7 @@ export function IOCService({
{" "}
{ioc.namingName}?{" "}
</Typography>
- </Root>
+ </>
);
callbackRef.current = stop;
setAdHocDialogOpen(true);
@@ -172,63 +161,59 @@ export function IOCService({
}
return (
- <Root>
- <AccessControl
- allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
- renderNoAccess={() => "You are not authorized to control this IOC"}
+ <AccessControl
+ allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
+ renderNoAccess={() => "You are not authorized to control this IOC"}
+ >
+ <SimpleModal
+ open={adHocDialogOpen}
+ setOpen={setAdHocDialogOpen}
>
- <SimpleModal
+ <ConfirmationDialog
open={adHocDialogOpen}
setOpen={setAdHocDialogOpen}
- >
- <ConfirmationDialog
- open={adHocDialogOpen}
- setOpen={setAdHocDialogOpen}
- title={adHocDialogTitle}
- description={adHocDialogDescription}
- callback={callbackRef.current}
- />
- </SimpleModal>
-
+ title={adHocDialogTitle}
+ description={adHocDialogDescription}
+ callback={callbackRef.current}
+ />
+ </SimpleModal>
+
+ <Grid
+ container
+ spacing={1}
+ >
+ <Grid item>
+ <Tooltip title={disabledStopButtonTitle}>
+ <StopButton
+ onClick={openStopModal}
+ disabled={buttonDisabled}
+ >
+ Stop
+ </StopButton>
+ </Tooltip>
+ </Grid>
+ <Grid item>
+ <Tooltip title={disabledStartButtonTitle}>
+ <StartButton
+ onClick={openStartModal}
+ disabled={buttonDisabled}
+ >
+ Start
+ </StartButton>
+ </Tooltip>
+ </Grid>
<Grid
- container
- spacing={1}
+ item
+ xs={12}
+ md={12}
>
- <Grid item>
- <Tooltip title={disabledStopButtonTitle}>
- <Button
- className={classes.stopButton}
- onClick={openStopModal}
- disabled={buttonDisabled}
- >
- Stop
- </Button>
- </Tooltip>
- </Grid>
- <Grid item>
- <Tooltip title={disabledStartButtonTitle}>
- <Button
- className={classes.startButton}
- onClick={openStartModal}
- disabled={buttonDisabled}
- >
- Start
- </Button>
- </Tooltip>
- </Grid>
- <Grid
- item
- xs={12}
- md={12}
- >
- {error ? (
- <Alert severity="error">{error}</Alert>
- ) : (
- inProgress && <LinearProgress color="primary" />
- )}
- </Grid>
+ {error ? (
+ <Alert severity="error">{error}</Alert>
+ ) : (
+ inProgress && <LinearProgress color="primary" />
+ )}
</Grid>
- </AccessControl>
- </Root>
+ </Grid>
+ </AccessControl>
);
}
diff --git a/src/components/IOC/IOCTable/IOCDescription.js b/src/components/IOC/IOCTable/IOCDescription.js
index 6db104fffb46774b97d3dac1a73039bc61b1670e..68fdf85abbfd3a84e025cceb34d1e9581f040362 100644
--- a/src/components/IOC/IOCTable/IOCDescription.js
+++ b/src/components/IOC/IOCTable/IOCDescription.js
@@ -13,7 +13,7 @@ function createIocDescription(description) {
enterDelay={400}
>
<Typography
- style={{
+ sx={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
diff --git a/src/components/Job/JobDetails.js b/src/components/Job/JobDetails.js
index dd729e7de3ec7150ea96588c6b38e37b42ed0451..206b8967d9e1a1231eb8be6a8008dd80f697849b 100644
--- a/src/components/Job/JobDetails.js
+++ b/src/components/Job/JobDetails.js
@@ -1,5 +1,4 @@
import React, { useEffect, useState, useMemo } from "react";
-import { styled } from "@mui/material/styles";
import {
Grid,
Typography,
@@ -9,8 +8,7 @@ import {
Link as MuiLink
} from "@mui/material";
import { DeploymentStepper } from "../deployments/DeploymentStepper";
-import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
-import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
+import { KeyValueTable, SimpleAccordion } from "@ess-ics/ce-ui-common";
import { JobBadge } from "./JobBadge";
import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
import { Link as ReactRouterLink } from "react-router-dom";
@@ -20,18 +18,6 @@ import AccessControl from "../auth/AccessControl";
import { AWXJobDetails } from "../../api/DataTypes";
import AlertMessages from "../IOC/AlertMessages";
-const PREFIX = "JobDetails";
-
-const classes = {
- csentryIdInvalid: `${PREFIX}-csentryIdInvalid`
-};
-
-const StyledGrid = styled(Grid)(({ theme }) => ({
- [`& .${classes.csentryIdInvalid}`]: {
- color: theme.csentryIdInvalid.color
- }
-}));
-
function createAlert(operation, job) {
const jobDetails = new AWXJobDetails(operation.type, job);
const message = jobDetails.message();
@@ -78,11 +64,7 @@ export function JobDetails({ operation, job }) {
}
// gray out hostname if it is from cache
- return (
- <Typography className={classes.csentryIdInvalid}>
- {operation.host.fqdn}
- </Typography>
- );
+ return <Typography color="gray">{operation.host.fqdn}</Typography>;
}
const deploymentDetails = {
@@ -135,7 +117,7 @@ export function JobDetails({ operation, job }) {
};
return (
- <StyledGrid
+ <Grid
container
spacing={1}
>
@@ -217,6 +199,6 @@ export function JobDetails({ operation, job }) {
)}
</Grid>
</AccessControl>
- </StyledGrid>
+ </Grid>
);
}
diff --git a/src/components/auth/AccessDenied/AccessDenied.js b/src/components/auth/AccessDenied/AccessDenied.js
index 493b24b212ba7017b318bec072406a4485dcc5c1..d043e51746b264d154d475c836869c69a47197b3 100644
--- a/src/components/auth/AccessDenied/AccessDenied.js
+++ b/src/components/auth/AccessDenied/AccessDenied.js
@@ -1,64 +1,12 @@
import React from "react";
-import { styled } from "@mui/material/styles";
-import { Paper, Typography, Box, Button } from "@mui/material";
-import { RootContainer } from "../../common/Container/RootContainer";
-import { useRedirect } from "../../../hooks/Redirect";
-
-const PREFIX = "AccessDenied";
-
-const classes = {
- paper: `${PREFIX}-paper`
-};
-
-const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
- [`& .${classes.paper}`]: {
- maxWidth: "80%",
- padding: theme.spacing(4)
- }
-}));
+import { ServerErrorPage } from "@ess-ics/ce-ui-common";
export default function AccessDenied() {
- const redirect = useRedirect();
-
- const goHome = () => {
- redirect("/iocs");
- };
-
return (
- <StyledRootContainer>
- <Paper className={classes.paper}>
- <Box
- display="flex"
- justifyContent="center"
- p={2}
- m={1}
- >
- <Typography variant="h4">Access denied</Typography>
- </Box>
- <Box
- display="flex"
- justifyContent="center"
- >
- <Typography variant="body1">
- You do not have permission to access this page. Please contact an
- administrator to request access.
- </Typography>
- </Box>
- <Box
- display="flex"
- justifyContent="center"
- p={2}
- m={1}
- >
- <Button
- variant="contained"
- color="secondary"
- onClick={goHome}
- >
- Return to Home
- </Button>
- </Box>
- </Paper>
- </StyledRootContainer>
+ <ServerErrorPage
+ message="You do not have permission to access this page. Please contact an administrator to request access"
+ status={401}
+ supportHref={window.SUPPORT_URL}
+ />
);
}
diff --git a/src/components/auth/Login/Login.js b/src/components/auth/Login/Login.js
index 08466f5c8b4dbfce46c42b54b1f50f0a1465a9fb..4f75b05b355c6b31b37e67b5baedf42ab6c2a801 100644
--- a/src/components/auth/Login/Login.js
+++ b/src/components/auth/Login/Login.js
@@ -6,7 +6,8 @@ import {
Dialog,
DialogContent,
Box,
- LinearProgress
+ LinearProgress,
+ Stack
} from "@mui/material";
import Alert from "@mui/material/Alert";
@@ -45,7 +46,10 @@ export function LoginForm({ login, error, resetError, onSubmitCallback }) {
}, [error]);
return (
- <form>
+ <Stack
+ component="form"
+ spacing={1}
+ >
<TextField
id="username"
className={classes.textField}
@@ -77,7 +81,7 @@ export function LoginForm({ login, error, resetError, onSubmitCallback }) {
Login
</Button>
{loading && <LinearProgress />}
- </form>
+ </Stack>
);
}
diff --git a/src/components/common/Accordion/SimpleAccordion.js b/src/components/common/Accordion/SimpleAccordion.js
deleted file mode 100644
index fae95e3d4d9eba7b85a28cafc3c4b1f60ce8346b..0000000000000000000000000000000000000000
--- a/src/components/common/Accordion/SimpleAccordion.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import {
- Accordion,
- AccordionDetails,
- AccordionSummary,
- Container,
- Typography
-} from "@mui/material";
-import { ExpandMore } from "@mui/icons-material";
-import React from "react";
-
-export function SimpleAccordion({ summary, children, ...rest }) {
- if (typeof summary === "string") {
- summary = (
- <Container>
- <Typography variant="h6">{summary}</Typography>
- </Container>
- );
- }
-
- if (typeof children === "string") {
- children = (
- <Container>
- <Typography>{children}</Typography>
- </Container>
- );
- }
-
- return (
- <Accordion {...rest}>
- <AccordionSummary expandIcon={<ExpandMore />}>{summary}</AccordionSummary>
- <AccordionDetails>{children}</AccordionDetails>
- </Accordion>
- );
-}
diff --git a/src/components/common/Accordion/index.js b/src/components/common/Accordion/index.js
deleted file mode 100644
index 5ee421810fa6f798f7e24f23d46cd2b8386708db..0000000000000000000000000000000000000000
--- a/src/components/common/Accordion/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { SimpleAccordion } from "./SimpleAccordion";
-
-export { SimpleAccordion };
-export default SimpleAccordion;
diff --git a/src/components/common/Console/Console.js b/src/components/common/Console/Console.js
index d8948b859fcc20c5413b64c7b223d402e8d04465..d8a071390e0a631bf5f674d240bb6c138e2b97a9 100644
--- a/src/components/common/Console/Console.js
+++ b/src/components/common/Console/Console.js
@@ -60,13 +60,14 @@ export function Console({
container
spacing={0}
justifyContent="flex-end"
+ paddingBottom={1}
>
<Grid
item
xs={9}
>
{dialogHeader}
- <div style={{ height: 10 }} />
+ {/* <div style={{ height: 10 }} /> */}
</Grid>
<Grid
item
diff --git a/src/components/common/Console/LogDialog.js b/src/components/common/Console/LogDialog.js
index 6c2bf9e1992c2613bbed9b2e910f98cbaea2c1d8..71899f61597cb192b33799022bece8af2eaa4e63 100644
--- a/src/components/common/Console/LogDialog.js
+++ b/src/components/common/Console/LogDialog.js
@@ -1,18 +1,5 @@
import React from "react";
-import { styled } from "@mui/material/styles";
import { Dialog, DialogContent, DialogTitle } from "@mui/material";
-const PREFIX = "LogDialog";
-
-const classes = {
- title: `${PREFIX}-title`
-};
-
-const StyledDialog = styled(Dialog)(() => ({
- [`& .${classes.title}`]: {
- backgroundColor: "#0099dc",
- color: "#FFFFFF"
- }
-}));
export function LogDialog({ open, setOpen, title, content }) {
const handleClose = () => {
@@ -20,19 +7,22 @@ export function LogDialog({ open, setOpen, title, content }) {
};
return (
- <StyledDialog
+ <Dialog
open={open}
onClose={handleClose}
fullWidth
maxWidth="xl"
+ // TODO: Replace with common element
+ // styles appear to match...
+ sx={{
+ "& .MuiDialogTitle-root": {
+ backgroundColor: "primary.main",
+ color: "essWhite.main"
+ }
+ }}
>
- <DialogTitle
- id="log-dialog-title"
- className={classes.title}
- >
- {title}
- </DialogTitle>
+ <DialogTitle id="log-dialog-title">{title}</DialogTitle>
<DialogContent>{content}</DialogContent>
- </StyledDialog>
+ </Dialog>
);
}
diff --git a/src/components/common/User/UserProfile.js b/src/components/common/User/UserProfile.js
index 934a4f00f41e294fe117410cf47817733a39d50b..2568a45e6fad77d002ebcf940c99eb0311ce209a 100644
--- a/src/components/common/User/UserProfile.js
+++ b/src/components/common/User/UserProfile.js
@@ -31,7 +31,8 @@ export function UserProfile({ userInfo }) {
</Typography>
<Typography
component="h3"
- variant="h4"
+ variant="h3"
+ fontWeight="bold"
>
{`@${userInfo?.loginName}`}
</Typography>
diff --git a/src/components/common/snackbar/Snackbar.js b/src/components/common/snackbar/Snackbar.js
index fc1ea1c5c7c3b861a15d3de39c4d2921ecd5fa59..fbceee246a18c35c92b0246232209a3428239f6d 100644
--- a/src/components/common/snackbar/Snackbar.js
+++ b/src/components/common/snackbar/Snackbar.js
@@ -1,24 +1,6 @@
import React from "react";
-import { styled } from "@mui/material/styles";
import { useSnackbar } from "notistack";
import { Button } from "@mui/material";
-const PREFIX = "Snackbar";
-
-const classes = {
- text: `${PREFIX}-text`
-};
-
-const StyledButton = styled(Button)(({ theme }) => ({
- [`&.${classes.text}`]: {
- color: "#f0f0f0",
- borderColor: "#f0f0f0",
- "&:hover": {
- backgroundColor: "#8d8d8d",
- borderColor: "#8d8d8d",
- boxShadow: "none"
- }
- }
-}));
export function useCustomSnackbar() {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
@@ -26,15 +8,25 @@ export function useCustomSnackbar() {
function showError(errorMessage, severity = "error") {
console.error("Snackbar: " + errorMessage);
const action = (key) => (
- <StyledButton
+ <Button
variant="text"
- className={classes.text}
onClick={() => {
closeSnackbar(key);
}}
+ sx={{
+ // Note all colors must be absolute or theme defaults because
+ // Snackbar loads before the custom ThemeProvider theme loads
+ color: "#f0f0f0",
+ borderColor: "#f0f0f0",
+ "&:hover": {
+ backgroundColor: "#8d8d8d",
+ borderColor: "#8d8d8d",
+ boxShadow: "none"
+ }
+ }}
>
Dismiss
- </StyledButton>
+ </Button>
);
enqueueSnackbar(errorMessage, {
variant: severity,
diff --git a/src/components/deployments/DeploymentDetails.js b/src/components/deployments/DeploymentDetails.js
deleted file mode 100644
index 2b7bca3ba4a5dd6486fb21d57019230cee6bc69b..0000000000000000000000000000000000000000
--- a/src/components/deployments/DeploymentDetails.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { styled } from "@mui/material/styles";
-import {
- Grid,
- Typography,
- Card,
- CardContent,
- Container,
- Link as MuiLink
-} from "@mui/material";
-import { DeploymentStepper } from "./DeploymentStepper";
-import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
-import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
-import { DeploymentBadge } from "./DeploymentBadge";
-import { DeploymentJobOutput } from "./DeploymentJobOutput";
-import { Link as ReactRouterLink } from "react-router-dom";
-import { formatDate } from "../common/Helper";
-import GitRefLink from "../IOC/GitRefLink";
-import AccessControl from "../auth/AccessControl";
-import { AWXJobDetails, DeploymentStatus } from "../../api/DataTypes";
-import AlertMessages from "../IOC/AlertMessages";
-
-const PREFIX = "DeploymentDetails";
-
-const classes = {
- csentryIdInvalid: `${PREFIX}-csentryIdInvalid`
-};
-
-const StyledGrid = styled(Grid)(({ theme }) => ({
- [`& .${classes.csentryIdInvalid}`]: {
- color: theme.csentryIdInvalid.color
- }
-}));
-
-function createAlert(deployment, deploymentJob) {
- const deploymentStatus = new DeploymentStatus(deployment, deploymentJob);
- const message = deploymentStatus.message();
- const severity = deploymentStatus.severity();
- return {
- type: severity,
- message: message
- };
-}
-
-export function DeploymentDetails({ deployment, deploymentJob }) {
- let deplAlert = deployment.alerts;
-
- const finishedJob = useMemo(
- () =>
- deployment &&
- new DeploymentStatus(deployment, deploymentJob).isFinished(),
- [deployment, deploymentJob]
- );
-
- const [alert, setAlert] = useState(
- createAlert(deployment, deploymentJob, finishedJob)
- );
-
- const jobDetails = useMemo(
- () =>
- new AWXJobDetails(
- deployment.undeployment ? "UNDEPLOY" : "DEPLOY",
- deploymentJob
- ),
- [deployment, deploymentJob]
- );
-
- useEffect(() => {
- setAlert(createAlert(deployment, deploymentJob));
- }, [deployment, deploymentJob]);
-
- function calculateHostText() {
- // host is resolvable => show link for users
- if (deployment.host.csEntryId && deployment.host.csEntryIdValid) {
- return (
- <Typography>
- <MuiLink
- component={ReactRouterLink}
- to={`/hosts/${deployment.host.csEntryId}`}
- underline="hover"
- >
- {deployment.host.fqdn}
- </MuiLink>
- </Typography>
- );
- }
-
- // gray out hostname if it is from cache
- return (
- <Typography className={classes.csentryIdInvalid}>
- {deployment.host.fqdn}
- </Typography>
- );
- }
-
- const deploymentDetails = {
- Revision: (
- <GitRefLink
- url={deployment?.sourceUrl}
- revision={deployment?.sourceVersion}
- />
- ),
- host: calculateHostText(),
- user: deployment.createdBy,
- repository: (
- <Typography>
- <MuiLink
- href={deployment.sourceUrl}
- target="_blank"
- rel="noreferrer"
- underline="hover"
- >
- {deployment.sourceUrl}
- </MuiLink>
- </Typography>
- ),
- "AWX job link": (
- <Typography>
- <MuiLink
- href={deployment.awxJobUrl}
- target="_blank"
- rel="noreferrer"
- underline="hover"
- >
- {deployment.awxJobUrl}
- </MuiLink>
- </Typography>
- ),
- "created time": formatDate(deployment?.createdAt),
- "awx job start time": deploymentJob?.started
- ? formatDate(deploymentJob.started)
- : "-"
- };
-
- return (
- <StyledGrid
- container
- spacing={1}
- >
- {finishedJob && (
- <Grid
- item
- xs={12}
- >
- <AlertMessages alerts={[alert].concat(deplAlert)} />
- </Grid>
- )}
- <Grid
- item
- xs={12}
- md={12}
- >
- <SimpleAccordion
- defaultExpanded
- summary={<DeploymentBadge deployment={deployment} />}
- >
- <KeyValueTable
- obj={deploymentDetails}
- variant="overline"
- sx={{ border: 0 }}
- valueOptions={{ headerName: "" }}
- />
- </SimpleAccordion>
- </Grid>
- <Grid
- item
- xs={12}
- md={12}
- >
- <Card>
- <CardContent>
- <div>
- {deploymentJob && (
- <DeploymentStepper
- activeStep={["queued", "running", "successful"].indexOf(
- deploymentJob.status.toLowerCase()
- )}
- deploymentStart={deployment.startDate}
- jobDetails={jobDetails}
- />
- )}
- </div>
- </CardContent>
- </Card>
- </Grid>
- {!finishedJob && alert && (
- <Grid
- item
- xs={12}
- >
- <AlertMessages alerts={[alert]} />
- </Grid>
- )}
- <AccessControl
- allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
- renderNoAccess={() => <></>}
- >
- <Grid
- item
- xs={12}
- md={12}
- style={{ paddingBottom: 0 }}
- >
- {deploymentJob ? (
- <SimpleAccordion
- summary="Ansible Job Output"
- defaultExpanded
- >
- <Container>
- <DeploymentJobOutput deploymentJob={deploymentJob} />
- </Container>
- </SimpleAccordion>
- ) : (
- <></>
- )}
- </Grid>
- </AccessControl>
- </StyledGrid>
- );
-}
diff --git a/src/components/deployments/DeploymentJobOutput.js b/src/components/deployments/DeploymentJobOutput.js
index 93129e6e8f4352460d1ab5f5387ebfce1fbbdb8c..3d93d15060bb7b27fa2b12beec959a6e8fae3726 100644
--- a/src/components/deployments/DeploymentJobOutput.js
+++ b/src/components/deployments/DeploymentJobOutput.js
@@ -1,5 +1,5 @@
import React, { useCallback, useRef, useEffect } from "react";
-import { LinearProgress, Typography, Container } from "@mui/material";
+import { LinearProgress, Typography, Container, Stack } from "@mui/material";
import { useJobLogById } from "../../api/SwaggerApi";
import { Console } from "../common/Console/Console";
import { useSafePolling } from "../../hooks/Polling";
@@ -26,21 +26,14 @@ export function DeploymentJobOutput({ deploymentJob }) {
}, [deploymentJob?.started]);
let header = (
- <div
- style={{
- display: "flex",
- alignItems: "center"
- }}
+ <Stack
+ flexDirection="row"
+ alignItems="center"
+ height="100%"
>
- <Typography variant="overline">DURATION: </Typography>
- <Typography
- style={{
- marginLeft: "6px"
- }}
- >
- {log?.elapsed.toFixed(0)} s
- </Typography>
- </div>
+ <Typography fontWeight="bold">DURATION: </Typography>
+ <Typography marginLeft={"6px"}>{log?.elapsed.toFixed(0)} s</Typography>
+ </Stack>
);
return (
diff --git a/src/components/deployments/index.js b/src/components/deployments/index.js
index 61387f3f947dbd70682b503957c27c584e6392e4..91aaacf3fd239c6c299df8cf1ab2d983b80b6bfc 100644
--- a/src/components/deployments/index.js
+++ b/src/components/deployments/index.js
@@ -1,5 +1,4 @@
import { DeploymentBadge } from "./DeploymentBadge";
-import { DeploymentDetails } from "./DeploymentDetails";
import { DeploymentStatusIcon } from "./DeploymentIcons";
import { DeploymentJobOutput } from "./DeploymentJobOutput";
import { DeploymentsList, DeploymentListItem } from "./DeploymentsList";
@@ -7,7 +6,6 @@ import { DeploymentStepper } from "./DeploymentStepper";
export {
DeploymentBadge,
- DeploymentDetails,
DeploymentStatusIcon,
DeploymentJobOutput,
DeploymentsList,
diff --git a/src/components/records/RecordSearch.js b/src/components/records/RecordSearch.js
index 90fa12f95703768c2676ec1acfa2ce65d9c9425a..ad5087f115cb1c44964570d1f7212efbb9dceda2 100644
--- a/src/components/records/RecordSearch.js
+++ b/src/components/records/RecordSearch.js
@@ -5,7 +5,7 @@ import { RecordTable } from "./RecordTable";
import { SearchBar } from "../common/SearchBar/SearchBar";
import useUrlState from "@ahooksjs/use-url-state";
import { serialize, deserialize } from "../common/URLState/URLState";
-import { Grid, Tabs, Tab, Typography } from "@mui/material";
+import { Grid, Tabs, Tab } from "@mui/material";
export function RecordSearch({ iocName, rowType }) {
const [records, getRecords /* reset*/, , loading] = useRecordSearch();
@@ -101,9 +101,9 @@ export function RecordSearch({ iocName, rowType }) {
value={deserialize(state.record_tab)}
onChange={handleTabChange}
>
- <Tab label={<Typography variant="h5">All</Typography>} />
- <Tab label={<Typography variant="h5">Only active</Typography>} />
- <Tab label={<Typography variant="h5">Only inactive</Typography>} />
+ <Tab label="All" />
+ <Tab label="Only active" />
+ <Tab label="Only inactive" />
</Tabs>
</Grid>
<Grid item>
diff --git a/src/components/records/RecordTable.js b/src/components/records/RecordTable.js
index 6e49bff5a5038b6192fab1411da2722489107aa4..c9066502fe08edf15b5eca91e542dbc39e0332bc 100644
--- a/src/components/records/RecordTable.js
+++ b/src/components/records/RecordTable.js
@@ -44,7 +44,7 @@ function createRecordDescription(description) {
enterDelay={400}
>
<Typography
- style={{
+ sx={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
diff --git a/src/components/statistics/IocCountStat/IocCountStat.js b/src/components/statistics/IocCountStat/IocCountStat.js
deleted file mode 100644
index dc9ff22c109780acec7b2afcf191fa4ef21ff171..0000000000000000000000000000000000000000
--- a/src/components/statistics/IocCountStat/IocCountStat.js
+++ /dev/null
@@ -1,95 +0,0 @@
-// import React from "react";
-// import { Bar } from "react-chartjs-2";
-// import ChartDataLabels from "chartjs-plugin-datalabels";
-
-export default function IocCountStat({ stat }) {
- // const basicData = {
- // labels: [""],
- // datasets: [
- // {
- // label: "Number of active IOCs",
- // backgroundColor: "#42A5F5",
- // data: [stat.numberOfActiveIocs]
- // },
- // {
- // label: "Number of IOCs created with the Deployment tool",
- // backgroundColor: "#FFA726",
- // data: [stat.numberOfCreatedIocs]
- // }
- // ]
- // };
- // let basicOptions = {
- // aspectRatio: 5 / 3,
- // layout: {
- // padding: {
- // top: 32,
- // right: 16,
- // bottom: 16,
- // left: 8
- // }
- // },
- // plugins: {
- // datalabels: {
- // backgroundColor: function (context) {
- // return context.dataset.backgroundColor;
- // },
- // borderRadius: 3,
- // color: "white",
- // font: {
- // weight: "bold"
- // },
- // padding: {
- // top: 4,
- // bottom: 4,
- // left: 4,
- // right: 4
- // },
- // align: "top",
- // anchor: "end",
- // offset: 10
- // },
- // legend: {
- // labels: {
- // color: "#495057"
- // }
- // },
- // title: {
- // display: true,
- // font: {
- // size: 16
- // },
- // text: "Statistics about IOCs"
- // },
- // tooltip: {
- // position: "nearest",
- // mode: "point"
- // }
- // },
- // scales: {
- // x: {
- // ticks: {
- // color: "#495057"
- // },
- // grid: {
- // color: "#ebedef"
- // }
- // },
- // y: {
- // ticks: {
- // color: "#495057"
- // },
- // grid: {
- // color: "#ebedef"
- // }
- // }
- // }
- // };
- // return (
- // <Bar
- // type="bar"
- // data={basicData}
- // options={basicOptions}
- // plugins={[ChartDataLabels]}
- // />
- // );
-}
diff --git a/src/components/statistics/IocCountStat/index.js b/src/components/statistics/IocCountStat/index.js
deleted file mode 100644
index 1ebf96359177c90bec49ecf39d16ddc6f28de295..0000000000000000000000000000000000000000
--- a/src/components/statistics/IocCountStat/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import IocCountStat from "./IocCountStat";
-
-export { IocCountStat };
-export default IocCountStat;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 4c86208923bf8b40e0d7e514b2f5329efe78846c..0000000000000000000000000000000000000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
- "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
-}
diff --git a/src/index.js b/src/index.js
index 06521c7fae65d73542dc2a10a622e2b416cfc900..082f56a2c2be5936d5e873a20d6717f7764d81b6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
import React from "react";
import { createRoot } from "react-dom/client";
-import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { LicenseInfo } from "@mui/x-license-pro";
diff --git a/src/stories/views/UserPage/UserPageView.stories.js b/src/stories/views/UserPage/UserPageView.stories.js
index 3e248aa889bb550b124b9ce2c819a171565ab4c9..78c593a8ee22e37ad5b644a806ae829170687928 100644
--- a/src/stories/views/UserPage/UserPageView.stories.js
+++ b/src/stories/views/UserPage/UserPageView.stories.js
@@ -1,5 +1,5 @@
import React from "react";
-import { UserPageView } from "../../../views/UserPage";
+import { UserDetailsContainer } from "../../../views/UserPage";
import { AppHarness } from "../../../mocks/AppHarness";
export default {
@@ -8,6 +8,6 @@ export default {
export const Default = () => (
<AppHarness>
- <UserPageView />
+ <UserDetailsContainer />
</AppHarness>
);
diff --git a/src/style/Palette.js b/src/style/Palette.js
deleted file mode 100644
index 595b5e3662b6c5f69e7ecba61164b9d25b315405..0000000000000000000000000000000000000000
--- a/src/style/Palette.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Official ESS colors from visual identity document
-export const essColors = {
- cyan: "#0099dc",
- purple: "#821382",
- orange: "#ff7d00",
- forest: "#006646",
- grass: "#99be00",
- grass_op: "#99be00cc",
- navy: "#003366",
- navy_op: "#003366cc",
- black: "#000000",
- white: "#ffffff"
-};
-
-// Only opaque ESS colors
-const { white, ...essOpaqueColors } = essColors;
-export { essOpaqueColors };
-
-// Contrasting colors used for charts and graphs
-export const chartColors = {
- blue: "rgba(66, 165, 245, 1)",
- orange: "rgba(245, 132, 66, 1)",
- lime: "rgba(245, 221, 66, 1)",
- purple: "rgba(194, 66, 245, 1)",
- green: "rgba(100, 242, 75, 1)",
- salmon: "rgba(242, 75, 100, 1)",
- teal: "rgba(75, 242, 192, 1)",
- gray: "rgba(161, 168, 167, 1)",
- black: "rgba(37, 38, 38, 1)",
- pink: "rgba(242, 162, 172, 1)",
- lightgreen: "rgba(172, 242, 162, 1)",
- seafoam: "rgba(162, 242, 222, 1)"
-};
diff --git a/src/style/Theme.js b/src/style/Theme.js
index 501c1a0e8febe23f46dae67a16f0ed963834f87e..020ee3d9b3be292bc46b8f1a4411f115124c0a8b 100644
--- a/src/style/Theme.js
+++ b/src/style/Theme.js
@@ -1,188 +1,55 @@
import { createTheme } from "@mui/material/styles";
-import { chartColors } from "./Palette";
import { theme as ceuiTheme } from "@ess-ics/ce-ui-common";
+// Contrasting colors used for charts and graphs
+const chartColors = {
+ blue: "rgba(66, 165, 245, 1)",
+ orange: "rgba(245, 132, 66, 1)",
+ lime: "rgba(245, 221, 66, 1)",
+ purple: "rgba(194, 66, 245, 1)",
+ green: "rgba(100, 242, 75, 1)",
+ salmon: "rgba(242, 75, 100, 1)",
+ teal: "rgba(75, 242, 192, 1)",
+ gray: "rgba(161, 168, 167, 1)",
+ black: "rgba(37, 38, 38, 1)",
+ pink: "rgba(242, 162, 172, 1)",
+ lightgreen: "rgba(172, 242, 162, 1)",
+ seafoam: "rgba(162, 242, 222, 1)"
+};
+
+// Create from common theme
let theme = createTheme(ceuiTheme, {});
+// add customizations
theme = createTheme(theme, {
components: {
- MuiWithWidth: {
- defaultProps: {
- initialWidth: "lg"
- }
- },
- MuiTooltip: {
- tooltip: {
- fontSize: "0.875rem",
- backgroundColor: "#707070ff"
- }
- },
- MuiListItemButton: {
- styleOverrides: {
- root: {
- "&.Mui-selected, &.Mui-selected:hover": {
- backgroundColor: "#cccccc"
- },
- "&:hover": {
- backgroundColor: "#ddddddff"
- }
- }
- }
- },
- MuiInputBase: {
+ MuiDialogContent: {
styleOverrides: {
root: {
- fontSize: "0.875rem",
- paddingY: 2
+ paddingTop: "0.5rem !important",
+ paddingBottom: "0.5rem !important"
}
}
},
- MuiTypography: {
- body1: {
- fontSize: "0.875rem"
- }
- },
- MuiDialogContent: {
+ // TODO: Move to common theme?
+ MuiAlert: {
styleOverrides: {
- root: {
- paddingTop: "0.5rem !important",
- paddingBottom: "0.5rem !important"
+ standardInfo: {
+ backgroundColor: theme.palette.grey[200]
}
}
}
},
palette: {
- primary: {
- main: "#0099dc"
- },
+ // TODO: Add secondary to common theme?
secondary: {
- main: "#0d598e"
+ main: theme.palette.essNavy.main
},
status: {
- ok: "#4caf50",
- fail: "#aa2e25",
- neutral: "#000",
- progress: "#ffc107",
- icons: "#454545"
+ ...theme.palette.status,
+ icons: theme.palette.grey[800]
},
graph: chartColors
- },
- typography: {
- fontFamily: [
- "-apple-system",
- "BlinkMacSystemFont",
- '"Segoe UI"',
- "Roboto",
- '"Helvetica Neue"',
- "Arial",
- "Noto Sans",
- "sans-serif",
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"'
- ].join(","),
- h1: {
- fontFamily: "Titillium Web, sans-serif",
- [theme.breakpoints.down("md")]: {
- fontSize: "0.98rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "1.31rem"
- }
- },
- h2: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "1.3rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "1.7rem"
- },
- fontWeight: 600
- },
- h3: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "1.25rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "1.75rem"
- },
- fontWeight: 600
- },
- h4: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "0,98rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "1.09rem"
- },
- fontWeight: 600
- },
- h5: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "0.98rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "0.875rem"
- },
- fontWeight: 600
- },
- h6: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "0.765rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "0.875rem"
- },
- fontWeight: 600
- },
- overline: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "0.656rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "0.875rem"
- },
- fontWeight: 600
- },
- body1: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "0.765rem !important",
- fontWeight: 600
- },
- [theme.breakpoints.down("md")]: {
- fontSize: "0.875rem !important"
- }
- },
- button: {
- fontFamily: ["Segoe UI", "Roboto", "Noto Sans"].join(","),
- [theme.breakpoints.down("md")]: {
- fontSize: "0,656rem"
- },
- [theme.breakpoints.up("md")]: {
- fontSize: "0,765rem"
- },
- fontWeight: 500
- }
- },
- cccecustomtable: {
- fontSize: "0.765rem"
- },
- infoBadge: {
- bgColor: "#ececec"
- },
- iocNotDeployed: {
- color: "#b2b2b2"
- },
- csentryIdInvalid: {
- color: "#b2b2b2"
}
});
diff --git a/src/views/IOC/IOCDetailsView.js b/src/views/IOC/IOCDetailsView.js
index 018dd0bf8337295292481a435bbdba30279e8c7d..7cbc136fe2103dbe419f92087b006a0798818b3f 100644
--- a/src/views/IOC/IOCDetailsView.js
+++ b/src/views/IOC/IOCDetailsView.js
@@ -1,4 +1,4 @@
-import { Grid, Paper, Tab, Tabs, Typography, IconButton } from "@mui/material";
+import { Grid, Paper, Tab, Tabs, IconButton } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import React, {
useCallback,
@@ -143,21 +143,21 @@ export function IOCDetailsView({ ioc, getIOC, loading }) {
const statusTab = (
<Tab
key="Status"
- label={<Typography variant="h5">Status</Typography>}
+ label="Status"
value="Status"
/>
);
const manageDeploymentTab = (
<Tab
key="Management"
- label={<Typography variant="h5">Management</Typography>}
+ label="Management"
value="Management"
/>
);
const iocAdminTab = (
<Tab
key="Admin"
- label={<Typography variant="h5">Admin</Typography>}
+ label="Admin"
value="Admin"
/>
);
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index 40d68506988a5281405cc476a19b628ad4364e69..98d2913eb7ee4ea58f17cc43bc13a5986b8adc78 100644
--- a/src/views/IOC/IOCListView.js
+++ b/src/views/IOC/IOCListView.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useContext, useCallback } from "react";
-import { Container, Grid, Typography, Tabs, Tab } from "@mui/material";
+import { Container, Grid, Tabs, Tab } from "@mui/material";
import {
GlobalAppBarContext,
RootPaper,
@@ -17,8 +17,8 @@ import {
} from "../../components/common/URLState/URLState";
import { usePagination } from "../../hooks/pagination";
import { useMemo } from "react";
-import IOCTable from "../../components/IOC/IOCTable";
import { apiContext } from "../../api/DeployApi";
+import IOCTable from "../../components/IOC/IOCTable";
export function IOCListView() {
const { setTitle } = useContext(GlobalAppBarContext);
@@ -175,13 +175,9 @@ export function IOCListView() {
value={deserialize(urlState.tab)}
onChange={(event, tab) => handleTabChange(tab)}
>
- <Tab label={<Typography variant="h5">All</Typography>} />
- <Tab
- label={<Typography variant="h5">Only Deployed</Typography>}
- />
- <Tab
- label={<Typography variant="h5">Only Not Deployed</Typography>}
- />
+ <Tab label="All" />
+ <Tab label="Only Deployed" />
+ <Tab label="Only Not Deployed" />
</Tabs>
</Grid>
</Grid>
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index 22d1c563acde948cf6207a2f21f99e8710bf881b..325c164e280d8995fbe262d459fb1e899ff23609 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -12,8 +12,12 @@ import {
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useHostIOCList } from "../../api/SwaggerApi";
import { HostBadge } from "../../components/host/HostBadge";
-import { SimpleAccordion } from "../../components/common/Accordion/SimpleAccordion";
-import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
+import {
+ KeyValueTable,
+ SimpleAccordion,
+ GlobalAppBarContext,
+ RootPaper
+} from "@ess-ics/ce-ui-common";
import { LokiPanel } from "../../components/common/Loki/LokiPanel";
import { useNavigate, Link as ReactRouterLink } from "react-router-dom";
import {
@@ -27,9 +31,7 @@ import {
serialize,
deserialize
} from "../../components/common/URLState/URLState";
-import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
import { usePagination } from "../../hooks/pagination";
-import { RootPaper } from "@ess-ics/ce-ui-common";
import IOCTable from "../../components/IOC/IOCTable";
export function HostDetailsView({ id, host }) {
@@ -244,7 +246,12 @@ export function HostDetailsView({ id, host }) {
<Card variant="outlined">
<CardContent>
<Container>
- <Typography variant="h6">Open in CSEntry</Typography>
+ <Typography
+ variant="body2"
+ fontWeight="bold"
+ >
+ Open in CSEntry
+ </Typography>
<Link
href={`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost.name}`}
target="_blank"
@@ -253,7 +260,8 @@ export function HostDetailsView({ id, host }) {
>{`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost?.name}`}</Link>
<Typography
- variant="h6"
+ variant="body2"
+ fontWeight="bold"
sx={{ marginTop: 2 }}
>
Open in Grafana
diff --git a/src/views/host/HostListView.js b/src/views/host/HostListView.js
index 27145fa8b938e5a57e2d3665850b31e1e4b8b177..6ebc65969a213102c6de02fc50e1abd32495ee1e 100644
--- a/src/views/host/HostListView.js
+++ b/src/views/host/HostListView.js
@@ -5,14 +5,7 @@ import React, {
useContext,
useMemo
} from "react";
-import {
- Container,
- Grid,
- Tabs,
- Tab,
- Typography,
- useMediaQuery
-} from "@mui/material";
+import { Container, Grid, Tabs, Tab, useMediaQuery } from "@mui/material";
import { HostList } from "../../components/host/HostList";
import { HostTable } from "../../components/host/HostTable";
import { useCSEntrySearch } from "../../api/SwaggerApi";
@@ -180,17 +173,9 @@ export function HostListView() {
value={deserialize(urlState.tab)}
onChange={handleTabChange}
>
- <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="All" />
+ <Tab label="Only hosts with IOCs" />
+ <Tab label="Only hosts without IOCs" />
</Tabs>
</Grid>
</Grid>
diff --git a/src/views/jobs/JobListView.js b/src/views/jobs/JobListView.js
index 7daae5878490f5bf3a00fcd4788f9383d4fcff70..5fa2a77d228d29a524e3a2543d6154f8c6671e5f 100644
--- a/src/views/jobs/JobListView.js
+++ b/src/views/jobs/JobListView.js
@@ -196,11 +196,9 @@ export function JobListView() {
value={deserialize(urlState.tab)}
onChange={handleTabChange}
>
- <Tab label={<Typography variant="h5">All</Typography>} />
- <Tab label={<Typography variant="h5">Only Ongoing</Typography>} />
- <Tab
- label={<Typography variant="h5">Only Completed</Typography>}
- />
+ <Tab label="All" />
+ <Tab label="Only Ongoing" />
+ <Tab label="Only Completed" />
</Tabs>
</Grid>
<Grid
@@ -249,7 +247,14 @@ export function JobListView() {
onChange={handleChangeOwn}
/>
}
- label={<Typography variant="h5">Only my jobs</Typography>}
+ label={
+ <Typography
+ variant="body2"
+ fontWeight="bold"
+ >
+ Only my jobs
+ </Typography>
+ }
/>
</AccessControl>
</Grid>
diff --git a/src/views/records/RecordDetailsView.js b/src/views/records/RecordDetailsView.js
index e447fd1e334173ad0c553eb8c0d960029f0e52ab..7ae3cd86b049cea727a19c06306809c6771c2a34 100644
--- a/src/views/records/RecordDetailsView.js
+++ b/src/views/records/RecordDetailsView.js
@@ -10,9 +10,11 @@ import {
import { Link as ReactRouterLink } from "react-router-dom";
import { RootContainer } from "../../components/common/Container/RootContainer";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
-import { SimpleAccordion } from "../../components/common/Accordion/SimpleAccordion";
-import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
+import {
+ KeyValueTable,
+ SimpleAccordion,
+ GlobalAppBarContext
+} from "@ess-ics/ce-ui-common";
import { RecordBadge } from "../../components/records/RecordBadge";
import { applicationTitle, formatDate } from "../../components/common/Helper";
import { useParams } from "react-router-dom";
diff --git a/src/views/records/RecordListView.js b/src/views/records/RecordListView.js
index 7cfd801e7efc9434a71c4f8fcc109e042a3c4f3e..5a2a63697764d7f2ad1eaf6681a47d38055f367b 100644
--- a/src/views/records/RecordListView.js
+++ b/src/views/records/RecordListView.js
@@ -6,14 +6,7 @@ import React, {
useEffect
} from "react";
import { useRecordSearch } from "../../api/SwaggerApi";
-import {
- Container,
- Grid,
- useMediaQuery,
- Tabs,
- Tab,
- Typography
-} from "@mui/material";
+import { Container, Grid, useMediaQuery, Tabs, Tab } from "@mui/material";
import { GlobalAppBarContext, RootPaper } from "@ess-ics/ce-ui-common";
import {
applicationTitle,
@@ -176,11 +169,9 @@ export function RecordListView() {
value={deserialize(urlState.tab)}
onChange={handleTabChange}
>
- <Tab label={<Typography variant="h5">All</Typography>} />
- <Tab label={<Typography variant="h5">Only active</Typography>} />
- <Tab
- label={<Typography variant="h5">Only inactive</Typography>}
- />
+ <Tab label="All" />
+ <Tab label="Only active" />
+ <Tab label="Only inactive" />
</Tabs>
</Grid>
</Grid>