EUIfy Watcher

[cjcenizal]

Release notes

This feature improves the overall UI/UX of Watcher and better aligns it with the rest of the Kibana management apps.

The simulate watch functionality was redesigned, providing additional help context to form fields as well as improving the usability of the triggered and scheduled time fields. The threshold alert supports 4 new action types: index, webhook, Jira and PagerDuty. This is in addition to email, Slack and logging. Also, new comparators were added to the threshold alert, including is above or equals, is below or equals and is in between. A user can also view details of system-level watches, which previously was not possible.

In addition, several bugs were resolved. A user can now create an advanced watch with an ID that begins with a number. The overall experience of attempting to access Watcher with an invalid license was improved. Watcher UI works properly on Safari. Watcher no longer displays a 404 in the browser console when a new watch is created.

Bugs fixed

• Fixes hidden overflow on Watcher History display #13804
• Fixes [Watcher] Help and links to docs on add/edit page #17894
• Fixes [watcherUI] The "count" of watches deleted can be confusing to the user.  #17956
• Fixes [Watcher] Use metadata.name for Breadcrumb #17969
• Fixes [Watcher UI] Double notifications with license checking #17978
• Fixes [Watcher UI] Ensure the UI confirms any destructive actions for watches/actions #18008
• Fixes [Watcher UI] Ensure the UI confirms any destructive actions for watches/actions #18008
• Fixes [Watcher UI] Revisit validation styling on Duration Select control #18031
• Fixes New Watcher UI doesn't seem to work with Safari #18047
• Fixes [Accessibility] Custom Drowpdown Buttons Are Not Accessible #18052
• Fixes Watcher: The Simulate Triggered and Scheduled time are unfriendly #18151
• Fixes Cluster alert watch status page can be accesed via the URL #18191
• Fixes [Watcher UI] Watch Edit page: better edit + simulate workflow design #18245
• Fixes [Watcher UI] Watch Edit page: Remove left padding from tab content #18246
• Fixes Address Ace Editor Issues #18256
• Fixes [Watcher UI] Revisit design of Watch Simulate UI #18268
• Fixes [Watcher UI] Revisit the management navigation changes #18271
• Fixes [Watcher UI] Not possible to edit a watch that was created with the API if the ID begins with a number #18296
• Fixes Watch simulation results spacing seems a little off for Simulation results action  #18353
• Fixes [Watcher UI] Text boxes tends to be too small #18506
• Fixes [Watcher UI] Create Webhook Editor #18508
• Fixes Invalid watches should not break the entire UI #18532
• Fixes watcher-ui- insanely big watch name breaks the layout n breadcrumbs #18536
• Fixes watcher: vendor-bundle.js error 404 not found logged in console when you create a watch  #18794
• Fixes [watcher] Add Jira as an new action to the watcher UI #22615
• Fixes Run watch every field in management/elasticsearch/watcher/watches/new-watch is misplaced #29167
• Fixes The warning message while deleting a watch seems clipped or masked. - visual bug.  #33207
• Fixes Outdated Slack icons are used #33917
• Fixes [Watcher UI] Field shift on Create new threshold alert page #34932
• Fixes xpack-aria-describes="undefined" error in console while creating a threshold watch #39828

Screenshots

Before

Watch list

Delete confirmation modal:

Create threshold watch

Expression validation:

Actions list:

Action validation:

Create advanced watch

Edit tab:

Note: Doc link is broken.

Simulate tab:

Simulation results tab:

Watch details

Watch history detail:

After

Watch list

No watches:

Delete confirmation modal:

Create threshold watch

Expression validation:

Actions dropdown:

Email action:

Logging action:

Slack action:

Index action:

Webhook action:

PagerDuty action:

Jira action:

Action validation example:

Create advanced watch

Simulate:

Simulation results:

Watch details

Execution history:

Action statuses:

Execution history detail:

[elasticmachine]

Pinging @elastic/es-ui

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cjcenizal]

I've reviewed the deleted translations and traced them back to where they were used in the original UI. In most cases I think these deletions are legitimate. I found a couple possible exceptions and also found some other things we can dig into.

Forbidden state

We should make sure we're handling 403 Forbidden errors correctly, and notifying the user that they don't have sufficient permissions. Examples of how this was done in the original code:

//The initial load from watch_list_route will return null on a 403 error
if (this.watches === null) {
  this.watches = [];
  this.forbidden = true;
}

<forbidden-message ng-if="watchList.forbidden">
  {{ 'xpack.watcher.sections.watchList.noPermissionToManageWatchesText' | i18n: { defaultMessage: 'You do not have permission to manage watches.' } }}
</forbidden-message>

Action status table

We should check that the action status table contains these UI bits:

• An "Acknowledge" button
• It reports the number of errors
• It has a "Show errors" modal

Table and chart states

We should make sure that all tables (watch history, watch list, etc) have both loading and empty states.

The chart should also have an empty state ("Your index and condition did not return any data", when !thresholdPreviewChart.isDataExists).

Validation and confirmation

I found a couple validation messages that I'd like to check:

• ID validation ("ID must begin with a letter or underscore and contain only letters, underscores, dashes, and numbers.")
• Invalid JSON error message
• Validate Slack action ('This watch has a Slack action without a "to" property. This watch will only be valid if you specified the "to" property in the Slack "message_default" setting in Elasticsearch.')
• Validate index pattern missing time field ("Your index query does not have an associated time field")

We also need to present a confirmation modal for overwriting a watch with an existing ID.

Form accessibility

I noticed a few aria labels removed from the translation file, and when I did a quick VoiceOver test with the original threshold form I noticed that labels and form inputs were correctly associated and read aloud. I tested the new form and it didn't sound like they were being read aloud correctly. We should do a deeper audit and see if we can make these forms more screen-reader-accessible.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[alisonelizabeth]

@cjcenizal thanks again for putting this together! I had a few comments based on your findings.

Note: The font of the firing state is affected by the flyout title. Consider moving it into the body, or below the title.

Good find! I also wanted to update this to leverage the watch_action_status.tsx component paul created.

Also, the ID column gets a bit cramped. We can customize the width of the state, last fired, and last triggered column sto give the ID column some more space.

So if you create an advanced watch, there is no name field. If you wanted to add it, you would have to specify it in the json as metadata. See: https://www.elastic.co/guide/en/elasticsearch/reference/7.0/watcher-api-put-watch.html#_request_body_51

In most of the examples that I could find, the watch_id is a readable identifier, synonymous to what the name is used for in the threshold watch. I guess what I’m getting at here is, I wonder if it makes sense to remove the name field in the threshold watch, and let the user create their own id rather than generating a random one. This might also help alleviate the cramped columns.

• ID validation ("ID must begin with a letter or underscore and contain only letters, underscores, dashes, and numbers.")

This should working. However, the logic was adjusted slightly based on this issue:
#18296

• Invalid JSON error message

This should also be working as expected, but please let me know if you run into any issues.

• Validate Slack action ('This watch has a Slack action without a "to" property. This watch will only be valid if you specified the "to" property in the Slack "message_default" setting in Elasticsearch.')

I worked with Gail on this and she came up with some alternative text to what existed previously.

We also need to present a confirmation modal for overwriting a watch with an existing ID.

This was implemented.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cjcenizal]

Thank you for that info @alisonelizabeth!

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[cuff-links]

retest

[alisonelizabeth]

retest

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[alisonelizabeth]

@cjcenizal reverting the revert :) due to failing tests

also, on second thought, do you think it's necessary to edit the PR's backport? The only use of the xpack:defaultAdminEmail setting in watcher was providing it as the default "to email address" when adding an email action to a threshold alert. If it's already deprecated, I wonder if it makes sense to keep it for 7.3. Thoughts?

[cjcenizal]

also, on second thought, do you think it's necessary to edit the PR's backport? The only use of the xpack:defaultAdminEmail setting in watcher was providing it as the default "to email address" when adding an email action to a threshold alert. If it's already deprecated, I wonder if it makes sense to keep it for 7.3. Thoughts?

@alisonelizabeth I think it's best to play it safe and edit the PR's backport so that it's still used as the default. To explain my line of thought, I can imagine an admin who has set this value, and has given users of the system instructions that when creating watches they should "just use the default email". They upgrade and suddenly their business process is thrown out of whack because Kibana's behavior has deviated from what they expected and depended upon. The change itself would be unexpected too because it occurs in a minor, so we'd have the perfect formula of breaking change + surprise = negative UX.

[alisonelizabeth]

@cjcenizal makes sense, thanks for the explanation!

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[alisonelizabeth]

retest

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[cjcenizal]

Retest

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request