Notification drawer component for console. #3899

jcaianirh · 2020-01-08T20:21:24Z

For jira story: https://issues.redhat.com/browse/CONSOLE-1945

Add Notification Drawer component and add some initial test notifications from the dashboard as well as some fake update alerts.

Includes:

mvp ui design by @cshinn (Add notification drawer MVP designs openshift-origin-design#306)
empty state
link to alert details
read/unread notification bell based on populated alerts/system updates
expand/unexpand based on bell icon
inline drawer panel (pushes content left...option to remove inline to have content overlay. to see an example: https://www.patternfly.org/v4/documentation/react/experimental/drawer#basic-inline)
validate design / implementation with designers
notification badge only visible to users that have roles that allow viewing of alerts
redux store created for notification alerts, and data pulled from that store (fixed flashing alerts and not borrowing dashboard code anymore)

To Do (can be done in follow on pr's):
1. redux work to populate notifications
2. Component updates based on visual inspection
3. add real update notifications
4. responsive strategy with drawer (push content left vs hover over)
5. add warning icon in masthead when alerts present in mobile
6. unit / end to end tests

sg00dwin · 2020-01-09T20:31:45Z

Posting any issues found that will need to be addressed.

In page sidebar open

jcaianirh · 2020-01-15T20:33:25Z

/retest

frontend/packages/patternfly/.eslintrc

frontend/packages/patternfly/src/components/notification-drawer/notification-drawer.tsx

benjaminapetersen · 2020-01-20T03:11:51Z

frontend/packages/patternfly/src/components/notification-drawer/notification-drawer.tsx

+      <DrawerContent>{children}</DrawerContent>
+      <DrawerPanelContent noPadding>
+        <NotificationDrawerHeading count={alertData.length + updateData.length}>
+          <NotificationTypeHeading


Type, I ponder if Category is more clear. We don't mean anything that already exists, like a Kind, or a programmatic type. Not a strong feeling atm, just thinking out loud.

frontend/public/components/notification-drawer.tsx

benjaminapetersen · 2020-01-20T03:34:00Z

frontend/packages/patternfly/src/components/notification-drawer/notification-drawer.tsx

+}) => {
+  const [isAlertExpanded, toggleAlertExpanded] = React.useState<boolean>(true);
+  const [isAvailableUpdateExpanded, toggleAvailableUpdateExpanded] = React.useState<boolean>(false);
+  const criticalAlerts = _.isEmpty(alertData) ? emptyState(toggleExpanded) : alertData;


So Critical Alerts appears to be both Critical and Warning lvl. Is this correct? When I open the drawer in my cluster, I have 18 total Alerts. I have to scroll to find the Critical ones. It does seem like noise pushes the urgent issues blow the fold. For example, I have a lot of UsingDeprecatedAPIAppsV1beta2 warnings, prob don't care a ton about these, but the KubePodCrashLooping I probably do care about:

@benjaminapetersen good point. @cshinn, do we want to display all alerts or just the warning/critical? Currently they are sorted by time...is that correct?

benjaminapetersen · 2020-01-20T03:40:30Z

Default is Critical Alerts open, which can make it easy to miss the Messages tab entirely.

Perhaps we would want to save last state in local storage?

sg00dwin · 2020-01-23T17:58:30Z

This special case issue displays much better now.

In page sidebar open

jcaianirh · 2020-01-23T17:59:56Z

thanks @sg00dwin for testing out the drawer interactions. really appreciate it.

jcaianirh · 2020-01-23T19:00:07Z

/test e2e-gcp-console

benjaminapetersen · 2020-01-23T20:13:58Z

I just updated, it seems I can get a critical alert on the alerts page but not get it in the drawer:

This was for:

Which was generated by running:

oc scale deployment cluster-version-operator --replicas 0 --namespace openshift-cluster-version

jcaianirh · 2020-01-23T21:28:20Z

@benjaminapetersen had some code in my pocket, just uploaded that fix.

benjaminapetersen · 2020-01-23T21:30:39Z

frontend/public/components/notification-drawer.tsx

+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
+const criticalCompare = (a): boolean => getAlertSeverity(a) === 'critical';


(a) is any or can we type?

(alert: Alert)?

benjaminapetersen · 2020-01-23T21:41:41Z

frontend/public/components/notification-drawer.tsx

+} from '../module/k8s';
+import { getSortedUpdates } from './modals/cluster-update-modal';
+
+const emptyState = (toggleExpanded) => (


type the callbacks?

const emptyState = (toggleExpanded:() => void) => (

benjaminapetersen · 2020-01-23T21:48:53Z

frontend/public/components/notification-drawer.tsx

+const criticalCompare = (a): boolean => getAlertSeverity(a) === 'critical';
+const otherAlertCompare = (a): boolean => getAlertSeverity(a) !== 'critical';
+
+const getAlertNotificationEntries = (


const getAlertNotificationEntries = ( isLoaded: boolean, alertData: someStructure?, toggleNotificationDrawer: boolean, isCritical: boolean, ): React.ReactNode[] =>

benjaminapetersen · 2020-01-23T21:49:13Z

frontend/public/components/notification-drawer.tsx

+        ))
+    : [];
+
+const getUpdateNotificationEntries = (


Can type as well.

jcaianirh · 2020-01-23T22:28:22Z

/test analyze

benjaminapetersen · 2020-01-24T02:21:42Z

frontend/public/components/notification-drawer.tsx

@@ -0,0 +1,262 @@
+import * as _ from 'lodash';


So at this point I would think we want to add new components to frontend/packages/console-app/components rather than public/components. Thinking console-app instead of console-shared as this is an app wide singleton component.

benjaminapetersen · 2020-01-24T02:24:01Z

@jcaianirh pretty good with where this landed, remaining 2 thoughts:

should we move the notification-drawer to packages/console-app per comment above
any kind of testing we want to add?

Thanks!

jcaianirh · 2020-01-24T02:28:28Z

@benjaminapetersen can add unit and or end to end tests as a follow on pr in the testing sprints. not sure on the move to console/app move....we could talk about it in scrum? not sure what the rules are for these two locations. if these are the two final items, lets get this merged for now, and tackle them as next steps. I added the test comments to the description under follow on pr section. all other follow ons listed have been completed.

benjaminapetersen · 2020-01-24T02:30:39Z

@jcaianirh agree, realizing as I look we have other conventions if we move it (one component per file, etc etc).

Tests can come in the upcoming sprints. Just as good as bug fixes.

/lgtm

openshift-ci-robot · 2020-01-24T02:31:02Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: benjaminapetersen, jcaianirh

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [benjaminapetersen]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-bot · 2020-01-24T04:10:25Z

/retest

Please review the full test history for this PR and help us cut down flakes.

jcaianirh · 2020-01-24T06:36:28Z

/retest

openshift-bot · 2020-01-24T10:01:28Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-24T10:14:26Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-24T10:40:35Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-ci-robot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. component/core Related to console core functionality labels Jan 8, 2020

openshift-ci-robot requested review from kyoto and sg00dwin January 8, 2020 20:22

jcaianirh force-pushed the drawer branch 3 times, most recently from 2d69cc2 to a7ffc57 Compare January 9, 2020 18:09

jcaianirh force-pushed the drawer branch from a7ffc57 to 3dbdfd7 Compare January 10, 2020 03:29

benjaminapetersen changed the title ~~[WIP]: Notificaion drawer component for console.~~ [WIP]: Notification drawer component for console. Jan 14, 2020

jcaianirh force-pushed the drawer branch from 3dbdfd7 to 6660e61 Compare January 15, 2020 16:18

openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jan 15, 2020

jcaianirh force-pushed the drawer branch from 6660e61 to 783eee2 Compare January 15, 2020 16:31

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jan 15, 2020

jcaianirh changed the title ~~[WIP]: Notification drawer component for console.~~ Notification drawer component for console. Jan 15, 2020

openshift-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 15, 2020

jcaianirh force-pushed the drawer branch from 783eee2 to 75949ff Compare January 16, 2020 16:57

benjaminapetersen reviewed Jan 18, 2020

View reviewed changes

frontend/packages/patternfly/.eslintrc Show resolved Hide resolved

openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jan 18, 2020

benjaminapetersen reviewed Jan 18, 2020

View reviewed changes

frontend/packages/patternfly/src/components/notification-drawer/notification-drawer.tsx Outdated Show resolved Hide resolved

jcaianirh force-pushed the drawer branch from 708cbca to 8e3b5d7 Compare January 18, 2020 21:49

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jan 18, 2020

openshift deleted a comment from openshift-ci-robot Jan 18, 2020

jcaianirh force-pushed the drawer branch from 6358a72 to 83530b9 Compare January 19, 2020 23:21

benjaminapetersen reviewed Jan 20, 2020

View reviewed changes

frontend/public/components/notification-drawer.tsx Show resolved Hide resolved

benjaminapetersen reviewed Jan 20, 2020

View reviewed changes

fix critical alert bug and remove unread heading

19a36b7

jcaianirh force-pushed the drawer branch from c140266 to 19a36b7 Compare January 23, 2020 21:25

benjaminapetersen reviewed Jan 23, 2020

View reviewed changes

add types where they were missing

cb21d85

add notification badge to mobile

2fdd4db

benjaminapetersen reviewed Jan 24, 2020

View reviewed changes

openshift-ci-robot assigned benjaminapetersen Jan 24, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jan 24, 2020

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 24, 2020

openshift-merge-robot merged commit 56fc64c into openshift:master Jan 24, 2020

spadgett added this to the v4.4 milestone Jan 27, 2020

atiratree mentioned this pull request Jan 29, 2020

fix loading missing ClusterVersionModel on Kubernetes #4103

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Notification drawer component for console. #3899

Notification drawer component for console. #3899

jcaianirh commented Jan 8, 2020 •

edited

sg00dwin commented Jan 9, 2020

jcaianirh commented Jan 15, 2020

benjaminapetersen Jan 20, 2020

benjaminapetersen Jan 20, 2020

jcaianirh Jan 20, 2020

benjaminapetersen commented Jan 20, 2020

sg00dwin commented Jan 23, 2020

jcaianirh commented Jan 23, 2020

jcaianirh commented Jan 23, 2020

benjaminapetersen commented Jan 23, 2020

jcaianirh commented Jan 23, 2020

benjaminapetersen Jan 23, 2020

benjaminapetersen Jan 23, 2020

benjaminapetersen Jan 23, 2020

benjaminapetersen Jan 23, 2020

benjaminapetersen Jan 23, 2020

jcaianirh commented Jan 23, 2020

benjaminapetersen Jan 24, 2020

benjaminapetersen commented Jan 24, 2020

jcaianirh commented Jan 24, 2020

benjaminapetersen commented Jan 24, 2020

openshift-ci-robot commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

jcaianirh commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

Notification drawer component for console. #3899

Notification drawer component for console. #3899

Conversation

jcaianirh commented Jan 8, 2020 • edited

sg00dwin commented Jan 9, 2020

jcaianirh commented Jan 15, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benjaminapetersen commented Jan 20, 2020

sg00dwin commented Jan 23, 2020

jcaianirh commented Jan 23, 2020

jcaianirh commented Jan 23, 2020

benjaminapetersen commented Jan 23, 2020

jcaianirh commented Jan 23, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcaianirh commented Jan 23, 2020

Choose a reason for hiding this comment

benjaminapetersen commented Jan 24, 2020

jcaianirh commented Jan 24, 2020

benjaminapetersen commented Jan 24, 2020

openshift-ci-robot commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

jcaianirh commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

openshift-bot commented Jan 24, 2020

jcaianirh commented Jan 8, 2020 •

edited