Visual indication for disabled or muted alerts

[arisonl]

Currently there is no immediate visual feedback that an alert is disabled or muted, other than selecting it and clicking manage or clicking on it to view its details page. Inferring it from statuses is not currently (7.10) possible either.

[elasticmachine]

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

[mikecote]

cc @mdefazio

[mikecote]

The same applies to muted: #81412. Updating title / description.

[mikecote]

Moving from 7.x - Candidates to 8.x - Candidates (Backlog) after the latest 7.x planning session.

[mdefazio]

Here is an updated mockup with the follow changes:

• Create rule button is moved to page header per the new page layout guidelines
• Add a switch to the front of each row to quickly allow users to see and update whether the rule is enabled/disabled
• Add a column for last updated and default to this for sorting
• Truncate tags column
• Add a 'Schedule' column with indicators for 'Runs every', 'Actions', and 'Muted'. If muted, show icon. Option to mute rule appears on hover
• 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)

I did also update the coloring for the statuses as I felt 'Pending' was odd to make our typical 'Healthy' color. This is likely still debatable and probably should be moved into a separate issue if there's concern here.

Questions regarding the last updated / sort order:

1. Does last updated only refer to the execution status? Or does this get updated if I mute or disable or edit a rule?
2. Is the sort order only updated on page reload / refresh button? (I think this is right if so)
3. Will we eventually have a versioning system similar to Security's?

Mockup:

I know some of these are likely out of scope for this issue, so happy to make a broader one. LMK.

[mdefazio]

@YulNaumenko , @mikecote
Some additional rationale for the above UX:

• I think having the switch on the row provides an additional visual indicator that a rule is active or disabled. We definitely still need the text, but I think the switch helps scan down the column and have those disabled standout more.
  • I get that for some rule types, the need to disable/enable is less frequent, however, we are working through an updated rule management view in the RAC project and for Security particularly, that ability is very needed. So I think including these switches provides the extra visual cue as well as the benefit for security. We'll want these views to be consistent soon, so I was looking ahead. So perhaps that's too far ahead than this PR needs, but wanted to make sure this group was aware.
• The mute button UX is perhaps a bit more confiscated. The mute button should show on hover of the row, so it is still accessible from this main list view, but the goal was to only indicate those rules that are muted so we don't over clutter the UI. Perhaps this needs another round of design, but that was the original goal

[mikecote]

Thanks, @mdefazio. I don't have a concern with the switch, so if it's preferred, I'm ok with that. I do think the text may need to be updated? Should "Active" be called "Enabled"? I can see it clash with the "Active" rule status.

[YulNaumenko]

Thanks, @mdefazio. I don't have a concern with the switch, so if it's preferred, I'm ok with that. I do think the text may need to be updated? Should "Active" be called "Enabled"? I can see it clash with the "Active" rule status.

I agree that Enabled will correspond better to our Rule props definition, but we need to consolidate the logic with the RAC rules management page:

Maybe we can have the similar in our list, but with title Enabled? (cc @elastic/kibana-alerting-services )

[mdefazio]

@mikecote Yes, let's make that Enabled or Disabled. We will update our wireframes on the RAC side

[YulNaumenko]

@mdefazio , this is the latest update from our discussion with @arisonl and @mikecote :

1. Title the column as Enabled and leave only switch button without text like RAC wireframes have. Make it sortable.
2. Change "Last updated" column to the "Last run" - opened a separate issue for this, because it requires a discussion on the API which should be used for populating this.
3. Move actions number icon with text and Mute/Unmute button to a single column with the title Actions - it will be more intuitive to the users that Mute button related to the actions only.

[arisonl]

Thanks @YulNaumenko looks great. For the record, the rationale around your third bullet point: Omitting a label does not really make this view less busy. In contrast an integer number without a label is the least interpretable thing you come across in this screen (statuses, times etc. are more recognisable as such even without a label than a number that could be anything). In addition the first thing that comes to my mind with the eye icon (without a label) is that you hide/unhide something on the UI. As a result, a relatively busy view with a couple of cryptic parts like those can cause an effect like "you need to know what's going on here" which is perhaps worse than just being busy. The opportunity here was that both of the unlabelled entities correspond to the actions concept, so merging them in one column and labeling them once imo is a sweetspot in this tradeoff.

[arisonl]

Btw, this design also addresses this UX issue #80313 We can probably close them both once done.

[mdefazio]

I agree with your points about the readability of the icon(s). I think we need a better icon or need to find a different solution to show muted.

One option is to have a single state option that is either Enable, Disabled, or Muted. I tend to like the switch and the affordance there, but I think its a possible option.

Another option is to have the word 'Muted' after the actions column and keep the ability to change that in the overflow menu (in favor of simplifying the row UI).

[mdefazio]

Here's an updated mockup showing the latter option. I've also just removed the icons from the Schedule and Actions columns—if we have these in their own column, we do not need the icon to help signify their meaning.

One change that might need to be discussed further is whether we need the word 'Every' in the schedule column. We had this previously in the heading and we removed it. I'm fine if we go back to 'Runs every' for the column heading if we liked that better.

[YulNaumenko]

Here's an updated mockup showing the latter option. I've also just removed the icons from the Schedule and Actions columns—if we have these in their own column, we do not need the icon to help signify their meaning.

One change that might need to be discussed further is whether we need the word 'Every' in the schedule column. We had this previously in the heading and we removed it. I'm fine if we go back to 'Runs every' for the column heading if we liked that better.

I like the latest mockup and think it will simplify a lot of things. I'm +1 on keeping Mute as a part of Actions column. With State column it will be confusing and disable a sort option on the Enabled rules.

[arisonl]

I noticed that RAC uses the term triggered here: #103270 Is this the same as our active? We should make sure we use a consistent language across. In fact we were discussing with @YulNaumenko independently that the term triggered may be more descriptive than our active (we use this term in other places e.g. "Notify when the alert become active"). Any thoughts?