[Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters #79038

YulNaumenko · 2020-09-30T21:26:21Z

Extended Alerting Management UI with alert statuses info, added errors banner and filtering by Status.

Details page with error banner:

Resolve #74778

elasticmachine · 2020-09-30T21:26:24Z

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

…ner-management-ui

…anner-management-ui # Conflicts: # x-pack/plugins/alerts/common/alert.ts # x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx

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

mikecote

I finally got to see the new status functionality and it is really amazing! Great work @YulNaumenko and @pmuellr ❤️

I finished my review, a bunch of nits, some UX questions and a few bugs. If I don't get to re-review before vacation, you can defer to someone else to verify the feedback is fixed 👍

mikecote · 2020-10-02T13:43:37Z

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

+    {
+      field: 'executionStatus',
+      name: i18n.translate(
+        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.statusTitle',
+        { defaultMessage: 'Status' }
+      ),
+      sortable: false,
+      truncateText: false,
+      'data-test-subj': 'alertsTableCell-status',
+      render: (executionStatus: AlertExecutionStatus) => {
+        const healthColor = getHealthColor(executionStatus.status);
+        return <EuiHealth color={healthColor}>{executionStatus.status}</EuiHealth>;
+      },
+    },


I recall some of @mdefazio's mock ups had the column a bit further to the right (right of tags?). I'm just asking the question if the first column is where we want this?

We have gone back and forth a bit on this. I like it on the left since I think users will want to see this information first. Perhaps we will find out more after it's used more, but this feels right to me.

x-pack/plugins/triggers_actions_ui/public/types.ts

...s/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

mikecote · 2020-10-02T14:00:36Z

...s/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

+                    <EuiButton color="danger" onClick={() => setDissmissAlertErrors(true)}>
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.dismissButtonTitle"
+                        defaultMessage="Dismiss"


@mdefazio did we decide to keep or remove the dismiss button? When dismissing, the banner returns next time I refresh the page.

If it's coming back after each refresh, then I don't think we include the dismiss option. It would be more annoying to dismiss it and it keep coming back as opposed to always seeing and not being able to do anything with it (until the errors are fixed)

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

...s/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

mikecote · 2020-10-02T14:30:55Z

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

+          alertStatusesFilter: [status],
+        });
+        setAlertsStatusesTotal({ ...alertsStatuses, [status]: alertsTotalResponse.total });
+        alertsStatuses = { ...alertsStatuses, [status]: alertsTotalResponse.total };


nit: the usage of alertsStatuses is a bit hard to understand. Would it be possible to use a mix of await Promise.all([...]); and AlertExecutionStatusValues.map(async (status: string) => { ... }); and then call setAlertsStatusesTotal once all the calls are finished?

mikecote · 2020-10-02T14:32:10Z

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

+              <EuiButtonEmpty color="danger" onClick={() => setDissmissAlertErrors(true)}>
+                <FormattedMessage
+                  id="xpack.triggersActionsUI.sections.alertsList.dismissBunnerButtonLabel"
+                  defaultMessage="Dismiss"


Same question in regards to dismiss. cc @mdefazio

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

pmuellr

Looking excellent! Just saw Mike's review, he noted some of the same things I did.

We'll need some e2e tests here - you can look at the functional tests I added for executionStatus on the server for how to generate almost all of the possible combinations of things, with our fixture alerts. Given FF, I'm fine merging this now and adding the tests next week or so ...

pmuellr · 2020-10-02T14:13:02Z

x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.ts

@@ -97,6 +99,9 @@ export async function loadAlerts({
      ].join('')
    );
  }
+  if (alertStatusesFilter && alertStatusesFilter.length) {
+    filters.push(`alert.attributes.executionStatus.status:(${alertStatusesFilter.join(' or ')})`);


TIL! Didn't realize you could do the ORs like this in KQL! Of course, I don't know KQL very well :-)

Actually, I thought KQL was sensitive to the case, and it had to be OR and not or, but maybe the rules are different outside of parenthesis ... or I'm just wrong on the case sensitivity.

...s/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

...iggers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx

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

x-pack/plugins/triggers_actions_ui/public/types.ts

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

gchaps

Banner 1

Error found in 1 alert
Error found in 2 alerts

View | Dismiss

Banner 2

Title:
An error occurred when reading the alert
An error occurred when decrypting the alert
An error occurred when running the alert
An error occurred for unknown reasons

Description:
Include the error message. The text "Error Message" is not needed.

Dismiss

pmuellr · 2020-10-02T19:48:33Z

Note that the ci error "api integration spaces only Alerting executionStatus should eventually be "ok" for no-op alert" is my fault - I believe that test has been skipped as it's flaky, so a merge master should make it go away ...

pmuellr

LGTM!

mikecote

LGTM, just a few missed i18n, great work!

...s/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

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

ymao1

Looks great!

…ner-management-ui

kibanamachine · 2020-10-04T21:54:48Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: ec9ecee

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`triggers_actions_ui`	272	274	+2

async chunks size

id	before	after	diff
`triggers_actions_ui`	1.5MB	1.5MB	+20.6KB

History

💚 Build #79347 succeeded 5814739
💔 Build #79321 failed 64cf479
💛 Build #79269 was flaky 086534b
💚 Build #79201 succeeded c8b8572
💚 Build #79021 succeeded 33bc87b

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

…s, added alert statuses column and filters (elastic#79038) * Added ui for alert failures banner * Added UI for alerts statuses * Adjusted form * Added banned on the details page * Fixed failing intern. check and type checks * Added unit test for displaying alert error banner * Fixed type check * Fixed due to comments * Changes due to comments * Fixed due to comments * Fixed text on banners * Added i18n translations

…s, added alert statuses column and filters (#79038) (#79403) * Added ui for alert failures banner * Added UI for alerts statuses * Adjusted form * Added banned on the details page * Fixed failing intern. check and type checks * Added unit test for displaying alert error banner * Fixed type check * Fixed due to comments * Changes due to comments * Fixed due to comments * Fixed text on banners * Added i18n translations

* master: (128 commits) add core-js production dependency (elastic#79395) Add support for sharing saved objects to all spaces (elastic#76132) [Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters (elastic#79038) load js-yaml lazily (elastic#79092) skip flaky suite (elastic#77278) Fix agentPolicyUpdateEventHandler() to use app context soClient for creation of actions (elastic#79341) [Security Solution] Untitled Timeline created when first action is to add note (elastic#78988) [Security Solutions][Detection Engine] Updates the edit rules page to:wq! only have what is selected for editing (elastic#79233) Cleanup yarn.lock from duplicates (elastic#66617) [kbn/optimizer] implement more efficient auto transpilation for node (elastic#79052) [Ingest Manager] Rename Fleet setup and requirement, Fleet => Central… (elastic#79291) [core/server/plugins] don't run discovery in dev server parent process (take 2) (elastic#79358) [babel/register] remove from build (take 2) (elastic#79379) [Security Solution] Changes rules table tag display (elastic#77102) define integrationTestRoot in config file and use to define screensho… (elastic#79247) Revert "[babel/register] remove from build (elastic#79176)" skip flaky suite (elastic#75241) [Uptime] Synthetics UI (elastic#77960) [Security Solution] [Detections] Only display actions options if user has "read" privileges (elastic#78812) [babel/register] remove from build (elastic#79176) ...

* master: (288 commits) add core-js production dependency (elastic#79395) Add support for sharing saved objects to all spaces (elastic#76132) [Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters (elastic#79038) load js-yaml lazily (elastic#79092) skip flaky suite (elastic#77278) Fix agentPolicyUpdateEventHandler() to use app context soClient for creation of actions (elastic#79341) [Security Solution] Untitled Timeline created when first action is to add note (elastic#78988) [Security Solutions][Detection Engine] Updates the edit rules page to only have what is selected for editing (elastic#79233) Cleanup yarn.lock from duplicates (elastic#66617) [kbn/optimizer] implement more efficient auto transpilation for node (elastic#79052) [Ingest Manager] Rename Fleet setup and requirement, Fleet => Central… (elastic#79291) [core/server/plugins] don't run discovery in dev server parent process (take 2) (elastic#79358) [babel/register] remove from build (take 2) (elastic#79379) [Security Solution] Changes rules table tag display (elastic#77102) define integrationTestRoot in config file and use to define screensho… (elastic#79247) Revert "[babel/register] remove from build (elastic#79176)" skip flaky suite (elastic#75241) [Uptime] Synthetics UI (elastic#77960) [Security Solution] [Detections] Only display actions options if user has "read" privileges (elastic#78812) [babel/register] remove from build (elastic#79176) ...

YulNaumenko added 2 commits September 28, 2020 17:14

Added ui for alert failures banner

a859a98

Added UI for alerts statuses

e9d8acc

YulNaumenko added Feature:Alerting v8.0.0 release_note:skip Skip the PR/issue when compiling release notes Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v7.10.0 labels Sep 30, 2020

YulNaumenko requested a review from a team as a code owner September 30, 2020 21:26

YulNaumenko self-assigned this Sep 30, 2020

YulNaumenko added 7 commits September 30, 2020 14:32

Merge remote-tracking branch upstream/master into alerting-health-ban…

e71e5b5

…ner-management-ui

Adjusted form

43c811a

Added banned on the details page

4dd495c

Fixed failing intern. check and type checks

2006ca3

Added unit test for displaying alert error banner

9ed9ba5

Merge remote-tracking branch 'upstream/master' into alerting-health-b…

f6fe82f

…anner-management-ui # Conflicts: # x-pack/plugins/alerts/common/alert.ts # x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx

Fixed type check

33bc87b

mikecote self-requested a review October 2, 2020 13:31

ymao1 reviewed Oct 2, 2020

View reviewed changes

mikecote reviewed Oct 2, 2020

View reviewed changes

pmuellr requested changes Oct 2, 2020

View reviewed changes

YulNaumenko added 2 commits October 2, 2020 08:29

Fixed due to comments

f90de57

Changes due to comments

c8b8572

YulNaumenko requested a review from mikecote October 2, 2020 17:09

Fixed due to comments

086534b

YulNaumenko requested review from pmuellr, ymao1 and gchaps October 2, 2020 17:49

gchaps reviewed Oct 2, 2020

View reviewed changes

pmuellr approved these changes Oct 2, 2020

View reviewed changes

Fixed text on banners

64cf479

YulNaumenko requested a review from gchaps October 2, 2020 20:13

mikecote approved these changes Oct 2, 2020

View reviewed changes

ymao1 approved these changes Oct 2, 2020

View reviewed changes

YulNaumenko added 2 commits October 2, 2020 14:15

Added i18n translations

5814739

Merge remote-tracking branch upstream/master into alerting-health-ban…

ec9ecee

…ner-management-ui

YulNaumenko merged commit 1d9a2a4 into elastic:master Oct 4, 2020

YulNaumenko mentioned this pull request Oct 4, 2020

[7.x] [Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters (#79038) #79403

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters #79038

[Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters #79038

YulNaumenko commented Sep 30, 2020 •

edited

Loading

elasticmachine commented Sep 30, 2020

mikecote left a comment

mikecote Oct 2, 2020

mdefazio Oct 5, 2020

mikecote Oct 2, 2020

mdefazio Oct 5, 2020

mikecote Oct 2, 2020

mikecote Oct 2, 2020

pmuellr left a comment

pmuellr Oct 2, 2020

gchaps left a comment

pmuellr commented Oct 2, 2020

pmuellr left a comment

mikecote left a comment

ymao1 left a comment

kibanamachine commented Oct 4, 2020

[Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters #79038

[Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters #79038

Conversation

YulNaumenko commented Sep 30, 2020 • edited Loading

elasticmachine commented Sep 30, 2020

mikecote left a comment

Choose a reason for hiding this comment

mikecote Oct 2, 2020

Choose a reason for hiding this comment

mdefazio Oct 5, 2020

Choose a reason for hiding this comment

mikecote Oct 2, 2020

Choose a reason for hiding this comment

mdefazio Oct 5, 2020

Choose a reason for hiding this comment

mikecote Oct 2, 2020

Choose a reason for hiding this comment

mikecote Oct 2, 2020

Choose a reason for hiding this comment

pmuellr left a comment

Choose a reason for hiding this comment

pmuellr Oct 2, 2020

Choose a reason for hiding this comment

gchaps left a comment

Choose a reason for hiding this comment

Banner 1

Banner 2

pmuellr commented Oct 2, 2020

pmuellr left a comment

Choose a reason for hiding this comment

mikecote left a comment

Choose a reason for hiding this comment

ymao1 left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 4, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

History

YulNaumenko commented Sep 30, 2020 •

edited

Loading