fix(notifications): style badge 'attention' if unread danger/warn notifications

src/app/AppLayout/AppLayout.tsx

@@ -36,15 +36,19 @@
  * SOFTWARE.
  */
 import * as React from 'react';
+import * as _ from 'lodash';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationCenter } from '@app/Notifications/NotificationCenter';
 import { IAppRoute, routes } from '@app/routes';
-import { AboutModal, Button, Nav, NavItem, NavList, NotificationBadge, Page, PageHeader,
+import { AboutModal, Alert, AlertGroup, AlertVariant, AlertActionCloseButton,
+  Button, Nav, NavItem, NavList, NotificationBadge, Page, PageHeader,
   PageHeaderTools, PageHeaderToolsGroup, PageHeaderToolsItem, PageSidebar,
-  SkipToContent, Text, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+  SkipToContent, Text, TextContent, TextList, TextListItem
+} from '@patternfly/react-core';
 import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
+import { map } from 'rxjs/operators';
 import { matchPath, NavLink, useHistory, useLocation } from 'react-router-dom';
-import { NotificationsContext } from '../Notifications/Notifications';
+import { Notification, NotificationsContext } from '../Notifications/Notifications';
 import { AuthModal } from './AuthModal';
 import { SslErrorModal } from './SslErrorModal';
 
@@ -69,7 +73,9 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const [aboutModalOpen, setAboutModalOpen] = React.useState(false);
   const [isNotificationDrawerExpanded, setNotificationDrawerExpanded] = React.useState(false);
   const [cryostatVersion, setCryostatVersion] = React.useState('unknown');
+  const [notifications, setNotifications] = React.useState([] as Notification[]);
   const [unreadNotificationsCount, setUnreadNotificationsCount] = React.useState(0);
+  const [errorNotificationsCount, setErrorNotificationsCount] = React.useState(0);
   const location = useLocation();
 
   React.useEffect(() => {
@@ -84,14 +90,32 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
     return () => sub.unsubscribe();
   })
 
+  React.useEffect(() => {
+    const sub = notificationsContext.notifications().subscribe(setNotifications);
+    return () => sub.unsubscribe();
+  }, []);
+
   React.useEffect(() => {
     const sub = notificationsContext.unreadNotifications().subscribe(s => setUnreadNotificationsCount(s.length));
     return () => sub.unsubscribe();
   }, [notificationsContext, notificationsContext.unreadNotifications, unreadNotificationsCount, setUnreadNotificationsCount]);
 
+  React.useEffect(() => {
+    const sub = notificationsContext
+      .unreadNotifications()
+      .pipe(map((notifications: Notification[]) =>
+        _.filter(notifications, n => n.variant === AlertVariant.danger || n.variant === AlertVariant.warning)
+      ))
+      .subscribe(s => setErrorNotificationsCount(s.length));
+    return () => sub.unsubscribe();
+  }, [notificationsContext, notificationsContext.unreadNotifications, unreadNotificationsCount, setUnreadNotificationsCount]);
+
   const dismissAuthModal = () => {
     setShowAuthModal(false);
   };
+  const handleMarkNotificationRead = React.useCallback(key => {
+    notificationsContext.setRead(key, true);
+  }, [notificationsContext]);
 
   React.useEffect(() => {
     const sub = serviceContext.target.sslFailure().subscribe(() => {
@@ -134,7 +158,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
         <PageHeaderToolsItem visibility={{ default: 'visible' }} isSelected={isNotificationDrawerExpanded} >
           <NotificationBadge
             count={unreadNotificationsCount}
-            variant={ unreadNotificationsCount === 0 ? 'read' : 'unread' }
+            variant={errorNotificationsCount > 0 ? 'attention' : unreadNotificationsCount === 0 ? 'read' : 'unread'}
             onClick={handleNotificationCenterToggle} aria-label='Notifications'
             >
             <BellIcon />
@@ -247,6 +271,20 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   );
   const NotificationDrawer = React.useMemo(() => (<NotificationCenter onClose={handleCloseNotificationCenter} />), []);
   return (<>
+    <AlertGroup isToast>
+      {
+        notifications
+          .filter(n => !n.read && (n.variant === AlertVariant.danger || n.variant === AlertVariant.warning))
+          .map(( { key, title, message, variant } ) => (
+            <Alert
+              variant={variant}
+              title={title}
+              actionClose={<AlertActionCloseButton onClose={() => handleMarkNotificationRead(key)} />}
+            >{message}
+            </Alert>
+        ))
+      }
+    </AlertGroup>
     <Page
       mainContainerId="primary-app-container"
       header={Header}

src/app/Notifications/NotificationCenter.tsx

@@ -36,9 +36,11 @@
  * SOFTWARE.
  */
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownPosition, KebabToggle, NotificationDrawer, NotificationDrawerBody, NotificationDrawerHeader,
-  NotificationDrawerList, NotificationDrawerListItem, NotificationDrawerListItemBody,
-  NotificationDrawerListItemHeader, Text, TextVariants } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownPosition, KebabToggle,
+  NotificationDrawer, NotificationDrawerBody, NotificationDrawerHeader,
+  NotificationDrawerList, NotificationDrawerListItem,
+  NotificationDrawerListItemBody, NotificationDrawerListItemHeader, Text,
+  TextVariants } from '@patternfly/react-core';
 import { Notification, NotificationsContext } from './Notifications';
 
 export interface NotificationCenterProps {