Flight #3: Building a notification center [Enterprise flight series]
Welcome to the third and final article in the“Enterprise flight series.” This series sheds some light on how to use PatternFy in enterprise products. Before diving into this article, be sure to check out the introduction article, as well as part 1 and part 2.
Read on to learn about building a notification center using existing PatternFly React and HTML sub components—and a little elbow grease.
Background
A notification center is a common pattern in modern applications. You see examples of notification centers on mobile devices, operating systems, and even in management applications. It allows users to view important messages from the application, and they are usually accessed from anywhere in the platform.
In the case of Red Hat OpenShift, notifications include cluster alerts and system messages, such as upgrade notifications, and are viewed from a slide-out drawer that appears from the right of the page. The notification drawer has quite a few use cases:
~Be notified anywhere in the platform that there are alerts firing on the cluster.
~Easily view all firing alerts in the following categories:
- I want first-view priority to be given to critical alerts.
- After critical alerts, I would like to see all other alerts of a lesser priority.
- Also, show me other (non-alert) messages a cluster admin would need to be aware of such as available cluster upgrades.
~Get more information on an alert in the drawer by clicking on the alert entry.
~For alerts or notifications that provide a resolution action, allow me to click the alert to get more information or click the action link to take action.
The design for the drawer was mature and ready for execution.
Design goal
As the designs for this component were mature, there were only minor design details to iron out amongst the stakeholders.
One of the details that was iterated over was how to expand the drawer out from the right. Originally the design indicated that all page contents shifted left to accommodate the width of the drawer, but the shrinking of the viewport made some console pages look too squished. However, the push animation looked appealing, so we didn’t want to completely abandon it. The end result was the definition of a “large screen” breakpoint from which we either pushed left or rolled over page content. This provided a better, and more overall, responsive experience for users.
Also, what happens when the drawer opens? What exactly do we want to expand by default?
We came up with some rules to follow. For each notification type:
if (is any notification type && has items) >> expandedif (is critical && ! has items) >> rendered with empty or error state && closedif (is non-critical || is other && ! has items) >> hidden
Process
For the notification drawer, we had clear requirements, a solid design, and stakeholder buy-in. We were ready to go.
But we did have a slight roadblock.
Even though we had a design, there wasn’t a complete React component in the PatternFly tool belt…yet.
Challenges
Though there was no component that provided us with a complete notification drawer in the patternfly-react toolkit, we did have all the pieces to create it. So that’s what we did!
PatternFly-react provided us with a drawer component. There was an HTML/CSS version of a notification drawer, and we had the designs for the OpenShift notification drawer. With all this, we were able to create a fresh component that combined all these pieces.
We used the age-old PatternFly equation: PatternFly(fx) =
Outcome
We were able to build the notification drawer using the sub components above and integrated it into the existing alerting system. In doing so, the user now has a visual cue that there are critical alerts to be addressed. They’re also able to open a drawer from anywhere in the application to view and assess them. The following screenshots show the notification drawer as it shipped in V4.4 of the OpenShift Console.
Lessons learned
So what did we learn from this implementation of a notification drawer?
- Use what you have. The best components are the ones you already have. If you have a subset of tested components, then use them to build what you need. The gift of React is its ability to reuse existing components to create something brand new.
- Design upfront. This project was implemented to spec, mostly because there was a spec. The design was finished up front, and only minor details had to be discussed amongst the stakeholders. Throughout the process, it was something I thought about—and appreciated. Without that ace in our back pocket, the project may have slipped or been reduced in scope. Luckily we had a solid design to lean on and tackle only issues that came up during implementation.
- Don’t write the world in one step. The drawer component is really just the face of an existing alerting system that took much longer to implement over time. Getting everything done all at once would have been an overwhelming undertaking.
- Teamwork makes the dreamwork. Teaming up with product designers, component designers, and fellow developers allow for more eyes on a feature rather than a singular silo. That perspective from multiple specialty viewpoints is priceless when developing a feature for the best possible user experience.
Ladies and gentlemen, prepare for landing…
As is the case with software, a feature never sits still. The drawer will expand functionality automatically by assimilating newly created alerts. Additionally, the drawer can be used as a place to provide first-time users a start-up checklist to get them quickly and immediately on the right path to using OpenShift. There are also talks of adding a support lapse message so that users can take steps to keep current with service and support on their cluster. The “sky’s” the limit when it comes to messaging users using your new notification center.
Finally, as is the open source way, since we created something that other platforms would find useful, we want to contribute that back to PatternFly. Let’s look at balancing that equation:
PatternFly will soon be the proud parent of another component, the notification drawer. Hopefully this helps someone else out there who is struggling to build a notification center for their enterprise react application.
And with that, the final plane has landed. Check out the previous articles in the series below, and thanks for flying with us!
