diff --git a/package-lock.json b/package-lock.json
index 9ec7373aab50b3a91ca49df5e83bace7373570cc..a253940e8cbc7f037ef8fc35ab6c4a51ac638bfd 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": "^3.2.0",
+ "@ess-ics/ce-ui-common": "^4.0.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
@@ -2343,6 +2343,11 @@
"node": ">=6.9.0"
}
},
+ "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+ "version": "0.14.0",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+ "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+ },
"node_modules/@babel/template": {
"version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -3547,9 +3552,9 @@
}
},
"node_modules/@ess-ics/ce-ui-common": {
- "version": "3.2.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-3.2.0.tgz",
- "integrity": "sha1-3RANHrN15+IfL+Z/J/W+M5YGk+8=",
+ "version": "4.0.0",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.0.0.tgz",
+ "integrity": "sha1-YnesIrN73spxgZvW93B5aGvQS6s=",
"dependencies": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
@@ -5893,6 +5898,22 @@
"react-dom": "^17.0.0 || ^18.0.0"
}
},
+ "node_modules/@mui/x-data-grid-pro/node_modules/clsx": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+ "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@mui/x-data-grid/node_modules/clsx": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+ "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@mui/x-license-pro": {
"version": "6.10.2",
"resolved": "https://registry.npmjs.org/@mui/x-license-pro/-/x-license-pro-6.10.2.tgz",
@@ -9667,6 +9688,15 @@
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
"integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+ "node_modules/@types/format-util": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/@types/format-util/-/format-util-1.0.4.tgz",
+ "integrity": "sha512-xrCYOdHh5zA3LUrn6CvspYwlzSWxPso11Lx32WnAG6KvLCRecKZ/Rh21PLXUkzUFsQmrGcx/traJAFjR6dVS5Q=="
+ },
+ "node_modules/@types/glob": {
+ "version": "8.1.0",
+ "resolved": "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz",
+ "integrity": "sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==",
"dev": true,
"dependencies": {
"@types/body-parser": "*",
@@ -41468,6 +41498,13 @@
"integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
"requires": {
"regenerator-runtime": "^0.14.0"
+ },
+ "dependencies": {
+ "regenerator-runtime": {
+ "version": "0.14.0",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+ "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+ }
}
},
"@babel/runtime-corejs3": {
@@ -42236,9 +42273,9 @@
"dev": true
},
"@ess-ics/ce-ui-common": {
- "version": "3.2.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-3.2.0.tgz",
- "integrity": "sha1-3RANHrN15+IfL+Z/J/W+M5YGk+8=",
+ "version": "4.0.0",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.0.0.tgz",
+ "integrity": "sha1-YnesIrN73spxgZvW93B5aGvQS6s=",
"requires": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
@@ -43965,6 +44002,13 @@
"clsx": "^2.0.0",
"prop-types": "^15.8.1",
"reselect": "^4.1.8"
+ },
+ "dependencies": {
+ "clsx": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+ "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+ }
}
},
"@mui/x-data-grid-pro": {
@@ -43980,6 +44024,13 @@
"clsx": "^2.0.0",
"prop-types": "^15.8.1",
"reselect": "^4.1.8"
+ },
+ "dependencies": {
+ "clsx": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+ "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+ }
}
},
"@mui/x-license-pro": {
@@ -46633,6 +46684,15 @@
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
"integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+ "@types/format-util": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/@types/format-util/-/format-util-1.0.4.tgz",
+ "integrity": "sha512-xrCYOdHh5zA3LUrn6CvspYwlzSWxPso11Lx32WnAG6KvLCRecKZ/Rh21PLXUkzUFsQmrGcx/traJAFjR6dVS5Q=="
+ },
+ "@types/glob": {
+ "version": "8.1.0",
+ "resolved": "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz",
+ "integrity": "sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==",
"dev": true,
"requires": {
"@types/body-parser": "*",
diff --git a/package.json b/package.json
index 1b5a602ec2e092aa77af384b4bd9d9844503ddf6..e20d9d53aaf1114043f6beed7247964e283fb746 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": "^3.2.0",
+ "@ess-ics/ce-ui-common": "^4.0.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index 87c45053df7cb2f146591755a1b090bf2bfad99b..65a7e98d4cf06dc1010fd4115f8e006a84d9e304 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -1,5 +1,5 @@
import React from "react";
-import { Typography, useTheme } from "@mui/material";
+import { Typography, useTheme, Stack } from "@mui/material";
import {
Brightness1,
Cancel,
@@ -11,39 +11,49 @@ import {
PauseCircleFilled
} from "@mui/icons-material";
import Popover from "../../common/Popover";
-import { AlertBannerList } from "@ess-ics/ce-ui-common";
+import { AlertBanner } from "@ess-ics/ce-ui-common";
import LabeledIcon from "../../common/LabeledIcon/LabeledIcon";
function AlertMessagesPopoverContents({ title, alerts }) {
// Filter out INFO level alerts
// And for now filter out links on alerts due to issues with
// focus behavior of popovers
- const alertsWithoutLinks = (
- alerts.filter((alert) => alert?.type.toLowerCase() !== "info") || []
+ // Also normalize the type to lowercase since AlertBanner expects lowercase
+ const sanitizedAlerts = (
+ alerts?.filter((alert) => alert?.type.toLowerCase() !== "info") || []
).map((alert) => ({
...alert,
+ type: alert?.type?.toLowerCase(),
link: undefined
}));
return (
- <div style={{ maxWidth: "75vw" }}>
+ <Stack
+ gap={1}
+ sx={{ minWidth: 0, maxWidth: "50vw" }}
+ >
<Typography
sx={{
- fontWeight: alertsWithoutLinks.length > 0 ? "bold" : "normal"
+ fontWeight: sanitizedAlerts.length > 0 ? "bold" : "normal"
}}
>
{title}
</Typography>
- {alertsWithoutLinks.length > 0 ? (
- <AlertBannerList alerts={alertsWithoutLinks} />
- ) : null}
- </div>
+ {sanitizedAlerts.length > 0
+ ? sanitizedAlerts.map((alert, index) => (
+ <AlertBanner
+ {...alert}
+ key={index}
+ />
+ ))
+ : null}
+ </Stack>
);
}
export function IOCStatusIcon({ ioc }) {
const theme = useTheme();
- let { active, alerts, activeDeployment, id } = ioc;
+ let { active, alerts = [], activeDeployment, id } = ioc;
const alertSeverity = ioc?.alertSeverity?.toLowerCase();
const iconConfig = {
@@ -163,8 +173,8 @@ export function CommandTypeIcon({
const theme = useTheme();
const commandTypeColors = {
- start: theme.palette.status.ok,
- stop: theme.palette.status.fail
+ start: theme.palette.status.ok.main,
+ stop: theme.palette.status.fail.main
};
const commandTypeBlack = {
diff --git a/src/components/IOC/IOCTable/IOCTable.spec.js b/src/components/IOC/IOCTable/IOCTable.spec.js
index 952b3a97a3745538ab5cbd2b508a2717ce578b32..024236759fc015fb55b73a381bf791a2dbc9214a 100644
--- a/src/components/IOC/IOCTable/IOCTable.spec.js
+++ b/src/components/IOC/IOCTable/IOCTable.spec.js
@@ -6,14 +6,14 @@ const { AfterAsync } = composeStories(stories);
const textColumns = ["IOC name", "Description", "Host", "Network"];
const columns = ["Status"].concat(textColumns);
const firstRowData = [
- "Active",
+ "Alert",
"VacS-RFQ:SC-IOC-130",
"Some description",
"vacs-accv-vm-ioc",
"ChannelAccess-FEB"
];
-describe("HostTable", () => {
+describe("IOCTable", () => {
context("Populated Table", () => {
beforeEach(() => {
cy.mount(<AfterAsync />);
diff --git a/src/components/Job/JobStatus.js b/src/components/Job/JobStatus.js
index eca307f5ec533e05684f12edf422bad2b80571ca..ed7aa1d40215086c6495acde8a7d30ca3158e957 100644
--- a/src/components/Job/JobStatus.js
+++ b/src/components/Job/JobStatus.js
@@ -14,19 +14,19 @@ const STEPPER_STATUS = {
label: "Queued",
alertType: "info",
icon: RotateRightOutlined,
- color: theme.palette.status.progress
+ color: theme.palette.status.progress.main
},
running: {
label: "Running",
alertType: "info",
icon: RotateRightOutlined,
- color: theme.palette.status.progress
+ color: theme.palette.status.progress.main
},
successful: {
label: "Completed",
alertType: "success",
icon: CheckCircleOutline,
- color: theme.palette.status.ok
+ color: theme.palette.status.ok.main
}
};
@@ -36,13 +36,13 @@ const STATUS = {
label: "Error",
alertType: "error",
icon: ErrorOutline,
- color: theme.palette.status.fail
+ color: theme.palette.status.fail.main
},
unknown: {
label: "Unknown",
alertType: "info",
icon: HelpOutline,
- color: theme.palette.disabled
+ color: theme.palette.status.disabled.main
}
};
diff --git a/src/components/deployments/DeploymentIcons.js b/src/components/deployments/DeploymentIcons.js
index b7794ff07b7bfdd892d79a119fa04c88752d509d..8f846303f5bd06277721d7d5e26d8ab4fa894b9f 100644
--- a/src/components/deployments/DeploymentIcons.js
+++ b/src/components/deployments/DeploymentIcons.js
@@ -31,10 +31,10 @@ export function DeploymentStatusIcon({ status }) {
};
const deploymentStatusColors = {
- successful: theme.palette.status.ok,
- failed: theme.palette.status.fail,
- running: theme.palette.status.progress,
- queued: theme.palette.status.progress
+ successful: theme.palette.status.ok.main,
+ failed: theme.palette.status.fail.main,
+ running: theme.palette.status.progress.main,
+ queued: theme.palette.status.progress.main
};
const state = status.toLowerCase();
diff --git a/src/components/records/RecordSearch.js b/src/components/records/RecordSearch.js
index 930e5c128df8f5212ffa2087fc7823bd9747898f..697537a0b24b64fb41a648a31ed131470eea2695 100644
--- a/src/components/records/RecordSearch.js
+++ b/src/components/records/RecordSearch.js
@@ -90,18 +90,8 @@ export function RecordSearch({ iocName, rowType }) {
// update pagination whenever search result total pages change
useEffect(() => {
- setTotalCount((prev) => {
- if (
- prev === pagination.totalCount &&
- prev > 0 &&
- prev === records?.totalCount
- ) {
- return prev;
- } else {
- return records?.totalCount ?? 0;
- }
- });
- }, [pagination, records?.totalCount, setTotalCount]);
+ setTotalCount(records?.totalCount ?? 0);
+ }, [records?.totalCount, setTotalCount]);
// whenever url state changes, update pagination
useEffect(() => {
diff --git a/src/mocks/fixtures/IOCStatus.json b/src/mocks/fixtures/IOCStatus.json
index 58b546dbb8e27c6858b65db855c3972d18b73a1f..58cc621038f7bd926e99a0c343836a41398ccef6 100644
--- a/src/mocks/fixtures/IOCStatus.json
+++ b/src/mocks/fixtures/IOCStatus.json
@@ -1,7 +1,18 @@
[
{
"id": 346,
- "active": true
+ "active": true,
+ "alerts": [
+ {
+ "type": "WARNING",
+ "message": "A temporary gravity anomaly has been detected in the cafeteria. Please secure your trays and beverages. We suspect a rogue black hole passing by, or maybe someone just dropped a super-dense bagel again. Proceed with caution, and remember, what goes up might not come down for a while. Thank you for floating with us today."
+ },
+ {
+ "type": "ERROR",
+ "message": "The area is currently experiencing an unexpected entropy reversal. As a precaution, ice cream in the freezer may spontaneously melt, then refreeze. We recommend eating it now, just to be safe. Also, be on the lookout for random acts of orderliness. Your messy desk might just organize itself, but don't get your hopes up."
+ }
+ ],
+ "alertSeverity": "ERROR"
},
{
"id": 345,
@@ -16,6 +27,7 @@
"link": "https://google.com"
}
],
+ "alertSeverity": "ERROR",
"active": true
},
{
@@ -26,6 +38,7 @@
"message": "Example alert warning for VacS-RFQ:SC-IOC-110"
}
],
+ "alertSeverity": "WARNING",
"active": true
},
{
@@ -45,7 +58,8 @@
"type": "ERROR",
"message": "Example alert error for RFQ-010:SC-IOC-001"
}
- ]
+ ],
+ "alertSeverity": "ERROR"
},
{
"id": 148,
@@ -55,6 +69,7 @@
"message": "Example alert warning for RFQ-010:SC-IOC-977"
}
],
+ "alertSeverity": "WARNING",
"active": true
},
{
@@ -73,6 +88,7 @@
"message": "Example alert warning for RFQ-010:SC-IOC-056"
}
],
+ "alertSeverity": "WARNING",
"active": true
},
{
@@ -100,6 +116,7 @@
"message": "Example alert warning RFQ-010:SC-IOC-006"
}
],
+ "alertSeverity": "WARNING",
"active": true
}
]
diff --git a/src/views/records/RecordListView.js b/src/views/records/RecordListView.js
index 9c461a4c0f727cde9fcbe1bc13eb360e7b613e61..1c53a825d73fa57f8b61d6341e949d36be269384 100644
--- a/src/views/records/RecordListView.js
+++ b/src/views/records/RecordListView.js
@@ -53,7 +53,6 @@ export function RecordListView() {
);
const [recordFilter, setRecordFilter] = useState(null);
// used to request record list again when tab is switched, but request it only once! (totalRecord is a random number that is generated by ChannelFinder)
- const [tabSwitched, setTabSwitched] = useState(false);
const handleTabChange = useCallback(
(event, tab) => {
@@ -76,8 +75,6 @@ export function RecordListView() {
} else if (tab === 2) {
setRecordFilter("INACTIVE");
}
-
- setTabSwitched(true);
};
useEffect(() => {
@@ -111,14 +108,8 @@ export function RecordListView() {
// update pagination whenever search result total pages change
useEffect(() => {
- setTotalCount((prev) => {
- if (prev === pagination.totalCount && prev > 0 && !tabSwitched) {
- return prev;
- } else {
- return records?.totalCount ?? 0;
- }
- });
- }, [pagination, records?.totalCount, setTotalCount, tabSwitched]);
+ setTotalCount(records?.totalCount ?? 0);
+ }, [records?.totalCount, setTotalCount]);
// whenever url state changes, update pagination
useEffect(() => {
@@ -137,7 +128,6 @@ export function RecordListView() {
requestParams.pv_status = recordFilter;
requestParams.record_name = deserialize(urlState.query);
getRecords(requestParams);
- setTabSwitched(false);
return () => {
abort();