Bug 1796521: Notification drawer alert to setup monitoring directs us…

…er to config page
openshift · Feb 7, 2020 · 71c17fb · 71c17fb
1 parent 24fe02c
commit 71c17fb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/frontend/packages/patternfly/src/components/notification-drawer/notification-entry.tsx b/frontend/packages/patternfly/src/components/notification-drawer/notification-entry.tsx
@@ -36,7 +36,23 @@ const NotificationIcon: React.FC<NotificationIconTypes> = ({ type }) => {
   }
 };
 
+const NotificationAction: React.FC<NotificationActionProps> = ({ drawerToggle, text, url }) => (
+  <div className="pf-c-notification-drawer__header-action">
+    <Link
+      to={url}
+      onClick={(e) => {
+        e.stopPropagation();
+        drawerToggle(e);
+      }}
+    >
+      {text}
+    </Link>
+  </div>
+);
+
 const NotificationEntry: React.FC<NotificationEntryProps> = ({
+  actionText,
+  actionURL,
   title,
   description,
   isRead = false,
@@ -45,11 +61,6 @@ const NotificationEntry: React.FC<NotificationEntryProps> = ({
   toggleNotificationDrawer,
   type,
 }) => {
-  const notificationAction = type === NotificationTypes.update && targetURL && (
-    <div className="pf-c-notification-drawer__header-action">
-      <Link to="">Install Update</Link>
-    </div>
-  );
   return (
     <li
       className={classNames(`pf-c-notification-drawer__list-item pf-m-hoverable pf-m-${type}`, {
@@ -73,7 +84,13 @@ const NotificationEntry: React.FC<NotificationEntryProps> = ({
           <span className="pf-screen-reader">{`${_.capitalize(type)} notification:`}</span>
           {title}
         </h4>
-        {notificationAction}
+        {actionText && actionURL && (
+          <NotificationAction
+            text={actionText}
+            url={actionURL}
+            drawerToggle={toggleNotificationDrawer}
+          />
+        )}
       </div>
       <div className="pf-c-notification-drawer__list-item-description">{description}</div>
       <div className="pf-c-notification-drawer__list-item-timestamp">
@@ -84,11 +101,13 @@ const NotificationEntry: React.FC<NotificationEntryProps> = ({
 };
 
 export type NotificationEntryProps = {
-  title: string;
+  actionText?: string;
+  actionURL?: string;
   description: string;
   isRead?: boolean;
   targetURL?: string;
   timestamp?: string;
+  title: string;
   toggleNotificationDrawer?: () => any;
   type: NotificationTypes;
 };
@@ -97,4 +116,10 @@ type NotificationIconTypes = {
   type: NotificationTypes;
 };
 
+type NotificationActionProps = {
+  drawerToggle: (event: React.MouseEvent<HTMLElement>) => void;
+  text: string;
+  url: string;
+};
+
 export default NotificationEntry;
diff --git a/frontend/public/components/notification-drawer.tsx b/frontend/public/components/notification-drawer.tsx
@@ -70,6 +70,14 @@ const AlertEmptyState: React.FC<AlertEmptyProps> = ({ drawerToggle }) => (
   </EmptyState>
 );
 
+const actionAlerts: ActionAlertType[] = [
+  {
+    id: '3929940202',
+    text: 'Create receiver',
+    url: '/monitoring/alertmanagerconfig',
+  },
+];
+
 const getAlertNotificationEntries = (
   isLoaded: boolean,
   alertData: Alert[],
@@ -88,6 +96,8 @@ const getAlertNotificationEntries = (
             title={getAlertName(alert)}
             toggleNotificationDrawer={toggleNotificationDrawer}
             targetURL={alertURL(alert, alert.rule.id)}
+            actionText={actionAlerts.find((actionAlert) => actionAlert.id === alert.rule.id)?.text}
+            actionURL={actionAlerts.find((actionAlert) => actionAlert.id === alert.rule.id)?.url}
           />
         ))
     : [];
@@ -279,6 +289,12 @@ const notificationStateToProps = ({ UI }: RootState): WithNotificationsProps =>
   alerts: UI.getIn(['monitoring', 'notificationAlerts']) || {},
 });
 
+type ActionAlertType = {
+  id: string;
+  text: string;
+  url: string;
+};
+
 type AlertErrorProps = {
   errorText: string;
 };