mgr/dashboard: Add a Silence button shortcut to alert notifications

[aaSharma14]

Add a shortcut to create a silence from the alert notification

Fixes: https://tracker.ceph.com/issues/57457
Signed-off-by: Aashish Sharmaaasharma@redhat.com

Contribution Guidelines

• To sign and title your commits, please refer to Submitting Patches to Ceph.

• If you are submitting a fix for a stable branch (e.g. "pacific"), please refer to Submitting Patches to Ceph - Backports for the proper workflow.

Checklist

• Tracker (select at least one)
  • References tracker ticket
  • Very recent bug; references commit where it was introduced
  • New feature (ticket optional)
  • Doc update (no ticket needed)
  • Code cleanup (no ticket needed)
• Component impact
  • Affects Dashboard, opened tracker ticket
  • Affects Orchestrator, opened tracker ticket
  • No impact that needs to be tracked
• Documentation (select at least one)
  • Updates relevant documentation
  • No doc update is appropriate
• Tests (select at least one)
  • Includes unit test(s)
  • Includes integration test(s)
  • Includes bug reproducer
  • No tests

Show available Jenkins commands

• jenkins retest this please
• jenkins test classic perf
• jenkins test crimson perf
• jenkins test signed
• jenkins test make check
• jenkins test make check arm64
• jenkins test submodules
• jenkins test dashboard
• jenkins test dashboard cephadm
• jenkins test api
• jenkins test docs
• jenkins render docs
• jenkins test ceph-volume all
• jenkins test ceph-volume tox
• jenkins test windows

[epuertat]

@aaSharma14 just a summary of my suggestions in the daily today:

• I'd replace the "Silence" button with an icon action (🔕 , font-awesome bell-slash), and place it together the trash-bin icon.
• Creating a silence currently requires filling out a couple of mandatory fields (which I always found annoying). What about pre-populating those fields (e.g.: autogenerated comment with the username and timestamp)?

That would be a user experience consistent/similar to what we have in our mobile phones: muting notifications is a 1-click workflow.

[aaSharma14]

@aaSharma14 just a summary of my suggestions in the daily today:

• I'd replace the "Silence" button with an icon action (no_bell , font-awesome bell-slash), and place it together the trash-bin icon.
• Creating a silence currently requires filling out a couple of mandatory fields (which I always found annoying). What about pre-populating those fields (e.g.: autogenerated comment with the username and timestamp)?

That would be a user experience consistent/similar to what we have in our mobile phones: muting notifications is a 1-click workflow.

Thank you for the suggestions @epuertat , I have updated the PR accordingly.

[epuertat]

Looks really good, @aaSharma14 !

Did you try the bell icon in black&white, same as the tray can icon (just for consistency)?

After that I get the following:

That "created silence" notification is hard to relate to the previous action, since that uuid cannot be easily connected with that, and it's a bit redundant. What about any of these?:

• Displaying a user friendly (silence) notification instead:
  
• Update the silenced alert (replacing the slashed bell icon with a regular bell icon, so clicking in that will un-silence the alert; and also emphasizing the fact that the alert is silenced with a large icon and gray-ish colors):
  

BTW, I started working on a design to improve the notification section, would you like to get involved? https://docs.google.com/document/d/1-cedKvB3_6zQvoDbwFrWasXmv9bWLeJUCmRcJNAe3Mg/edit

[aaSharma14]

Looks really good, @aaSharma14 !
Thanks @epuertat

Did you try the bell icon in black&white, same as the tray can icon (just for consistency)?
Yes, sure I'l update that

After that I get the following:

That "created silence" notification is hard to relate to the previous action, since that uuid cannot be easily connected with that, and it's a bit redundant. What about any of these?:

• Displaying a user friendly (silence) notification instead:
  
• Update the silenced alert (replacing the slashed bell icon with a regular bell icon, so clicking in that will un-silence the alert; and also emphasizing the fact that the alert is silenced with a large icon and gray-ish colors):
  
  Am not sure if this is possible because a silence can be created on 4 different filters, For example - If a silence is created on the job or instance attribute, it can silence multiple alerts at once, and we do not get the notifications for all the alerts that have been silenced by that filter. In short, silence notification can be for a group of alerts as well

BTW, I started working on a design to improve the notification section, would you like to get involved? https://docs.google.com/document/d/1-cedKvB3_6zQvoDbwFrWasXmv9bWLeJUCmRcJNAe3Mg/edit
Yeah sure, I will love to get involved in this.

[epuertat]

Looks ok to me, but there are still a couple of issues:

• The alert silence id is still hard to relate to the actual alert:
  
• There's no visual feedback in the notifications on whether an alert was already muted or not (in fact you can create multiple silences for the same alert). That's why I was suggesting that once the "alert icon" has been clicked AND succeeded, it shoult be either disabled or toggled to an "unsilence alert" action:
  

[nizamial09]

LGTM! Awesome work here @aaSharma14 minor comments from me.

As we discussed in standup, let's go with this and find a way to improve the notification sidebar.

Also can you create one tracker for the changes we discussed in standup-

[nizamial09]

Also could you please update the description with the latest screenshots.

[aaSharma14]

jenkins test dashboard

[aaSharma14]

jenkins test dashboard cephadm

[aaSharma14]

jenkins test dashboard cephadm

[aaSharma14]

jenkins test dashboard cephadm

[nizamial09]

cephadm e2e failure tracked here: https://tracker.ceph.com/issues/57511