CE-2042: Use AlertBanner from common

src/components/IOC/AlertMessages/AlertMessages.js

-import React from "react";
-import { Button, Grid } from "@mui/material";
-import Alert from "@mui/material/Alert";
-
-export default function AlertMessages({ alerts }) {
-  function determineSeverity(alarmType) {
-    return ["error", "warning", "success"].includes(alarmType?.toLowerCase())
-      ? alarmType?.toLowerCase()
-      : "info";
-  }
-
-  return (
-    <Grid
-      id="ioc-alerts"
-      container
-      spacing={1}
-      direction="column"
-    >
-      {alerts?.map((alert) => (
-        <Grid
-          item
-          key={alert?.message || alert}
-        >
-          <Alert
-            severity={determineSeverity(alert?.type)}
-            action={
-              alert?.link && (
-                <Button
-                  target="_blank"
-                  href={alert.link}
-                  color="inherit"
-                  size="small"
-                >
-                  More Info
-                </Button>
-              )
-            }
-            component="p"
-          >
-            {alert?.message}
-          </Alert>
-        </Grid>
-      ))}
-    </Grid>
-  );
-}

src/components/IOC/AlertMessages/index.js

-import AlertMessages from "./AlertMessages";
-
-export { AlertMessages };
-export default AlertMessages;

src/components/IOC/IOCDetails/IOCDetails.js

@@ -31,7 +31,10 @@ export function IOCDetails({ ioc, getSubset = defaultSubset, alert, buttons }) {
 
   return (
     <>
-      <Grid container>
+      <Grid
+        container
+        spacing={1}
+      >
         {alert && (
           <Grid
             item
@@ -40,24 +43,29 @@ export function IOCDetails({ ioc, getSubset = defaultSubset, alert, buttons }) {
             {alert}
           </Grid>
         )}
-        <Grid
-          item
-          xs={12}
-        >
-          <Box
-            display="flex"
-            flexDirection="row-reverse"
-            p={2}
-            m={1}
+        {buttons && (
+          <Grid
+            item
+            xs={12}
           >
-            <AccessControl
-              allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
-              renderNoAccess={() => <> </>}
+            <Box
+              display="flex"
+              flexDirection="row-reverse"
+              p={2}
+              m={1}
             >
-              <>{buttons}</>
-            </AccessControl>
-          </Box>
-        </Grid>
+              <AccessControl
+                allowedRoles={[
+                  "DeploymentToolAdmin",
+                  "DeploymentToolIntegrator"
+                ]}
+                renderNoAccess={() => <> </>}
+              >
+                <>{buttons}</>
+              </AccessControl>
+            </Box>
+          </Grid>
+        )}
         <Grid
           item
           xs={12}

src/components/IOC/IOCIcons/IOCIcons.js

@@ -11,7 +11,7 @@ import {
   PauseCircleFilled
 } from "@mui/icons-material";
 import Popover from "../../common/Popover";
-import AlertMessages from "../AlertMessages/AlertMessages";
+import { AlertBannerList } from "@ess-ics/ce-ui-common";
 
 function AlertMessagesPopoverContents({ title, alerts }) {
   // for now filter out links on alerts due to issues with
@@ -31,7 +31,7 @@ function AlertMessagesPopoverContents({ title, alerts }) {
         {title}
       </Typography>
       {alertsWithoutLinks.length > 0 ? (
-        <AlertMessages alerts={alertsWithoutLinks} />
+        <AlertBannerList alerts={alertsWithoutLinks} />
       ) : null}
     </div>
   );

src/components/IOC/IOCLiveStatus/IOCLiveStatus.js

@@ -6,7 +6,7 @@ import { Link as ReactRouterLink } from "react-router-dom";
 import { LokiContainer } from "../../common/Loki/LokiContainer";
 import { RecordSearch } from "../../records/RecordSearch";
 import GitRefLink from "../GitRefLink";
-import AlertMessages from "../AlertMessages";
+import { AlertBannerList } from "@ess-ics/ce-ui-common";
 import AccessControl from "../../auth/AccessControl";
 import { IocActiveDeployment } from "../../../api/DataTypes";
 import useUrlState from "@ahooksjs/use-url-state";
@@ -83,7 +83,7 @@ export function IOCLiveStatus({ ioc }) {
       <IOCDetails
         ioc={liveIOC}
         getSubset={getSubset}
-        alert={<AlertMessages alerts={liveIOC.alerts} />}
+        alert={<AlertBannerList alerts={liveIOC.alerts} />}
       />
       {liveIOC.activeDeployment?.host?.csEntryIdValid && (
         <AccessControl

src/components/IOC/IOCManage/IOCManage.js

@@ -12,9 +12,9 @@ import { UndeployIOC } from "../UndeployIOC";
 import {
   userContext,
   SimpleAccordion,
-  useAPIMethod
+  useAPIMethod,
+  AlertBannerList
 } from "@ess-ics/ce-ui-common";
-import AlertMessages from "../AlertMessages";
 import AccessControl from "../../auth/AccessControl";
 import { DeploymentStatus } from "../../../api/DataTypes";
 import { IOCService } from "../IOCService";
@@ -181,7 +181,7 @@ export function IOCManage({
         <IOCDetails
           ioc={managedIOC}
           getSubset={getSubset}
-          alert={<AlertMessages alerts={managedIOC.alerts} />}
+          alert={<AlertBannerList alerts={managedIOC.alerts} />}
           buttons={
             <>
               <Tooltip title={disabledDebployButtonTitle}>

src/components/Job/JobDetails.js

@@ -7,8 +7,12 @@ import {
   Container,
   Link as MuiLink
 } from "@mui/material";
-import { KeyValueTable, SimpleAccordion } from "@ess-ics/ce-ui-common";
-import { Stepper } from "@ess-ics/ce-ui-common";
+import {
+  KeyValueTable,
+  SimpleAccordion,
+  AlertBannerList,
+  Stepper
+} from "@ess-ics/ce-ui-common";
 import { JobBadge } from "./JobBadge";
 import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
 import { Link as ReactRouterLink } from "react-router-dom";
@@ -16,7 +20,6 @@ import { formatDate } from "../common/Helper";
 import GitRefLink from "../IOC/GitRefLink";
 import AccessControl from "../auth/AccessControl";
 import { AWXJobDetails } from "../../api/DataTypes";
-import AlertMessages from "../IOC/AlertMessages";
 
 const STATUS = {
   queued: {
@@ -147,7 +150,7 @@ export function JobDetails({ operation, job }) {
           item
           xs={12}
         >
-          <AlertMessages alerts={[alert].concat(jobAlert)} />
+          <AlertBannerList alerts={[alert].concat(jobAlert)} />
         </Grid>
       )}
       <Grid
@@ -191,7 +194,7 @@ export function JobDetails({ operation, job }) {
           item
           xs={12}
         >
-          <AlertMessages alerts={[alert]} />
+          <AlertBannerList alerts={[alert]} />
         </Grid>
       )}
       <AccessControl

src/views/host/HostDetailsView.js

@@ -15,7 +15,8 @@ import {
   KeyValueTable,
   SimpleAccordion,
   GlobalAppBarContext,
-  useAPIMethod
+  useAPIMethod,
+  AlertBannerList
 } from "@ess-ics/ce-ui-common";
 import { LokiPanel } from "../../components/common/Loki/LokiPanel";
 import { useNavigate, Link as ReactRouterLink } from "react-router-dom";
@@ -24,7 +25,6 @@ import {
   initRequestParams
 } from "../../components/common/Helper";
 import AccessControl from "../../components/auth/AccessControl";
-import AlertMessages from "../../components/IOC/AlertMessages";
 import useUrlState from "@ahooksjs/use-url-state";
 import {
   serialize,
@@ -188,7 +188,7 @@ export function HostDetailsView({ id, host }) {
         <ArrowBackIcon />
       </IconButton>
 
-      {host && <AlertMessages alerts={host.alerts} />}
+      {host && <AlertBannerList alerts={host.alerts} />}
       <Card
         variant="outlined"
         sx={{ marginTop: 2 }}