[Alerting UI]Changed rules table to support visual indication for disabled and muted alerts #104190

YulNaumenko · 2021-07-01T19:16:40Z

Resolves #80310 #80313
Current PR covers the next list of changes:

Added a switch column to the front of each row to quickly allow users to see and update whether the rule is Enabled or not.
Truncated tags column with hover tooltip which shows the rest of hidden values.
Extended column for 'Actions' count with 'Muted' badge indicator.
Show 2 row actions on hover (Edit & Delete). Overflow menu remains regardless of hover (Follows EUI table example)
Overflow menu options are: Mute/Unmute, Enable/Disable, Edit rule, Delete rule (should have confirmation modal to delete)
Updated the coloring for the statuses 'Pending' and Active as 'Healthy' color to stay consistent with RAC changes.
Renamed Disable to Enable on the Rule Details page.

Here is an updated mockup with the follow changes:

…abled or muted alerts

elasticmachine · 2021-07-07T19:25:12Z

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

kibanamachine · 2021-07-07T19:25:29Z

⏳ Build in-progress, with failures

continuous-integration/kibana-ci/pull-request
Commit: 04aafa4
Storybooks not built yet
This comment will update when the build is complete

Failed CI Steps

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @YulNaumenko

YulNaumenko · 2021-07-08T20:18:12Z

@elasticmachine merge upstream

spalger · 2021-07-08T20:44:44Z

jenkins, test this

(had to abort for Jenkins upgrade)

mikecote

I left a couple of questions, but LGTM overall 👍 looking forward to these enhancements!

...actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions_new.tsx

...ugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx

...gins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss

mdefazio · 2021-07-09T12:57:13Z

We should probably change the rule detail view for a disabled rule to use the empty panel page layout instead of a callout. I will mock this up.

At the very least, the copy in the callout will need to be updated. We still refer to the 'Disabled' switch. And I would prefer to avoid the icon usage of the arrow to direct them. (Which is why the empty page layout will be better here).

Is there a scenario where the user will reach this screen without the privileges to enable the rule?

mikecote · 2021-07-09T13:05:17Z

@mdefazio

Is there a scenario where the user will reach this screen without the privileges to enable the rule?

Yes, it would be when the user has readonly access to rules (done via feature privileges).

…/alerts_list/components/alerts_list.scss Co-authored-by: Mike Côté <mikecote@users.noreply.github.com>

ymao1

These updates look fantastic! The only thing I noticed was that when you click the trash can icon on the hover over, it doesn't trigger the delete action, it triggers the mute all action.

.../triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx

YulNaumenko · 2021-07-19T14:34:03Z

@elasticmachine merge upstream

mdefazio

The UI updates look good. There is still ongoing discussions/decisions around this table through the RAC project, so I will open another issue when we have more definitive direction and how to align these tables. But I think these updates achieve the goal of this PR.

One issue i'm noticing that I'm not sure is related to this PR or not is the delay in enabling/disabling a rule. (See gif). I'm wondering if we need to disable the toggle when loading the new state so the user doesn't go click happy like I'm doing here. Subsequently, kibana crashed after about 10-15x of flipping this on and off.

pmuellr

Awesome! Such a great set of enhancements. LGTM

I noticed one thing when playing with it. The new "inline edit" ends up leaving the hover for the "Edit" label on the UI, after the save, when the "Updated" notification is displayed.

The edit hover seems very "sticky" in general. Even if I immediately "cancel" out of the edit, and make sure the mouse will not end up over the edit label, it still appears. Actually, it looks like the edit and delete buttons are still available as well, after the cancel. So maybe it's the edit/delete appear-on-hover buttons that are the problem. Fixable in a follow-on issue, if too big for this one.

YulNaumenko · 2021-07-20T06:19:59Z

Awesome! Such a great set of enhancements. LGTM

I noticed one thing when playing with it. The new "inline edit" ends up leaving the hover for the "Edit" label on the UI, after the save, when the "Updated" notification is displayed.

The edit hover seems very "sticky" in general. Even if I immediately "cancel" out of the edit, and make sure the mouse will not end up over the edit label, it still appears. Actually, it looks like the edit and delete buttons are still available as well, after the cancel. So maybe it's the edit/delete appear-on-hover buttons that are the problem. Fixable in a follow-on issue, if too big for this one.

Thank you for the catch @pmuellr. It's easy to fix 👍

ymao1

LGTM! I am also seeing the issue that @mdefazio pointed out where flipping between enable/disable quickly will crash Kibana. I'm fine with making a followup issue to fix that separate though.

kibanamachine · 2021-07-20T15:35:40Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`triggersActionsUi`	359	360	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`triggersActionsUi`	1.6MB	1.6MB	+3.2KB

History

💔 Build #139532 failed 81af4dc
💛 Build #139402 was flaky 079d569
💚 Build #137727 succeeded 7d4aa26
💔 Build #137725 failed 7b2ecd4
💔 Build #137440 failed e33c076

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @YulNaumenko

…abled and muted alerts (elastic#104190) * [Alerting UI]Changed rules table to support visual indication for disabled or muted alerts * changed columns styles due to the mockup * added tests * fixed quotas * fixed popover * fixed due to the lates UI updates * fixed errors * moved enabled to a separate component * fixed tests * fixed due to comments * Update x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> * removed test code * fixed tests * fixed due to comments * fixed due to comments Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Mike Côté <mikecote@users.noreply.github.com>

…abled and muted alerts (#104190) (#106282) * [Alerting UI]Changed rules table to support visual indication for disabled or muted alerts * changed columns styles due to the mockup * added tests * fixed quotas * fixed popover * fixed due to the lates UI updates * fixed errors * moved enabled to a separate component * fixed tests * fixed due to comments * Update x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> * removed test code * fixed tests * fixed due to comments * fixed due to comments Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Mike Côté <mikecote@users.noreply.github.com>

[Alerting UI]Changed rules table to support visual indication for dis…

6eb9ff3

…abled or muted alerts

YulNaumenko self-assigned this Jul 1, 2021

YulNaumenko added 3 commits July 6, 2021 18:15

changed columns styles due to the mockup

b349245

Merge remote-tracking branch upstream/7.master

c9cc124

added tests

04aafa4

YulNaumenko added v7.15.0 v8.0.0 Feature:Alerting/RulesManagement Issues related to the Rules Management UX Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) release_note:skip Skip the PR/issue when compiling release notes labels Jul 7, 2021

YulNaumenko marked this pull request as ready for review July 7, 2021 19:25

YulNaumenko requested review from a team as code owners July 7, 2021 19:25

YulNaumenko added 2 commits July 7, 2021 22:26

fixed quotas

4b1692a

fixed popover

d53dfb2

mikecote self-requested a review July 8, 2021 15:10

YulNaumenko added 3 commits July 8, 2021 20:43

fixed due to the lates UI updates

35196c0

Merge remote-tracking branch upstream/master

82b9c82

fixed errors

38abe69

YulNaumenko requested a review from mdefazio July 8, 2021 18:09

moved enabled to a separate component

8d1d2ab

Merge branch 'master' into alerting-ui-rule-list-ux-changes

5ebebbb

fixed tests

e33c076

mikecote approved these changes Jul 9, 2021

View reviewed changes

YulNaumenko and others added 5 commits July 10, 2021 17:42

fixed due to comments

5888184

Update x-pack/plugins/triggers_actions_ui/public/application/sections…

7b2ecd4

…/alerts_list/components/alerts_list.scss Co-authored-by: Mike Côté <mikecote@users.noreply.github.com>

removed test code

15ae207

fixed tests

8158952

Merge remote-tracking branch upstream/master

7d4aa26

ymao1 reviewed Jul 13, 2021

View reviewed changes

.../triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx Show resolved Hide resolved

Merge branch 'master' into alerting-ui-rule-list-ux-changes

079d569

mdefazio approved these changes Jul 19, 2021

View reviewed changes

mdefazio mentioned this pull request Jul 19, 2021

[Discuss] Sort and filter options in the alert management view #58366

Open

fixed due to comments

81af4dc

pmuellr approved these changes Jul 19, 2021

View reviewed changes

fixed due to comments

774466a

YulNaumenko requested a review from ymao1 July 20, 2021 13:24

ymao1 approved these changes Jul 20, 2021

View reviewed changes

YulNaumenko merged commit d91c6d0 into elastic:master Jul 20, 2021

This was referenced Jul 20, 2021

[Alerting UI] Add visual indicator of the next request delay between rules enable/disable switch clicking. #106276

Closed

[7.x] [Alerting UI]Changed rules table to support visual indication for disabled and muted alerts (#104190) #106282

Merged

YulNaumenko mentioned this pull request Jul 22, 2021

Editing an alert is two clicks away #80313

Closed

mikecote added release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Aug 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Alerting UI]Changed rules table to support visual indication for disabled and muted alerts #104190

[Alerting UI]Changed rules table to support visual indication for disabled and muted alerts #104190

YulNaumenko commented Jul 1, 2021 •

edited

elasticmachine commented Jul 7, 2021

kibanamachine commented Jul 7, 2021

YulNaumenko commented Jul 8, 2021

spalger commented Jul 8, 2021

mikecote left a comment

mdefazio commented Jul 9, 2021

mikecote commented Jul 9, 2021

ymao1 left a comment

YulNaumenko commented Jul 19, 2021

mdefazio left a comment

pmuellr left a comment

YulNaumenko commented Jul 20, 2021

ymao1 left a comment

kibanamachine commented Jul 20, 2021

[Alerting UI]Changed rules table to support visual indication for disabled and muted alerts #104190

[Alerting UI]Changed rules table to support visual indication for disabled and muted alerts #104190

Conversation

YulNaumenko commented Jul 1, 2021 • edited

elasticmachine commented Jul 7, 2021

kibanamachine commented Jul 7, 2021

⏳ Build in-progress, with failures

Failed CI Steps

History

YulNaumenko commented Jul 8, 2021

spalger commented Jul 8, 2021

mikecote left a comment

Choose a reason for hiding this comment

mdefazio commented Jul 9, 2021

mikecote commented Jul 9, 2021

ymao1 left a comment

Choose a reason for hiding this comment

YulNaumenko commented Jul 19, 2021

mdefazio left a comment

Choose a reason for hiding this comment

pmuellr left a comment

Choose a reason for hiding this comment

YulNaumenko commented Jul 20, 2021

ymao1 left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 20, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

YulNaumenko commented Jul 1, 2021 •

edited