[ResponseOps][BUG] - UI fixes for Alerts Summary chart #137476

fkanout · 2022-07-28T15:16:48Z

Summary

It fixes #137292 by adding:

1- Tooltip once hovering on the bar
2- Add a base/background bar that presents the total alerts in the scope of 30 days
3- Update the design and add Last 30 days
4- Update ES query to be more efficient

It fixes #137417 by adding a proper error message

fkanout · 2022-07-29T11:52:57Z

@elasticmachine merge upstream

elasticmachine · 2022-07-29T11:53:44Z

Pinging @elastic/response-ops (Team:ResponseOps)

elasticmachine · 2022-07-29T11:53:44Z

Pinging @elastic/actionable-observability (Team: Actionable Observability)

fkanout · 2022-07-29T12:23:43Z

/oblt-deploy

XavierM · 2022-07-29T12:26:16Z

...ck/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts

+            // If there are alerts in this day, we construct the chart data.
+            return [
+              ...acc,
+              ...dayAlerts.alertStatus.buckets.map((alert) => ({


Tell me if I am wrong here, but I feel that you should also add the totalDayAlert too so you can avoid the white background when you have data.

@XavierM, excellent point. Actually, totalDayAlert was added to each day and calculated based on the number of alerts for that day.
But then once the 2nd of alerts kicked in. The chart flipped upside down means the totalDayAlert (grey color) becomes at the bottom and the recovered and active at the top. I tried to fix that in many ways this morning but with no success and I don't want to spend more time on it as we all agreed.

BTW, when we hover over the bar the gray bar appears again.

I think this limitation is ok for this version, what do you think @maciejforcone?

I think we can do it just like that -> https://github.com/fkanout/kibana/pull/3/files

Thanks, @XavierM. But it has exactly the same issue I mentioned -the chart is flipped. You need at least two days of data to see the issue.

Here is my commit where I deleted my solution after I saw the issue

I failed.... 😞 but I was also looking everywhere in kibana, and it looks like that nobody is doing the fake background like we do, maybe for good reason. I am wondering if we should remove it because if we are having alerts/data, we most likely not going to see this grey background anyway. It is better to be simplistic sometime.

what do you think?

@XavierM, no worries! BTW, the only way I found to make it works is by making chart reading starting from the left, which means the today bar will be at the very left bar.

To answer your question. I don't mind removing the background/reference bars.

Alright, after talking to @angorayc, we found a cool solution about it and now she might have to fix some other graph in security solution LOL.

The PR is re-open @fkanout

...ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx

...ck/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts

XavierM

when there is no alert that looks a little bit weird

fkanout · 2022-07-29T13:09:53Z

#137476 (review)
@maciejforcone, what do you think is the adequate way to say there are no alerts?

maciejforcone · 2022-08-01T09:06:14Z

since it's a chart - it can be just flat, 30 empty bars, so it doesn't look broken. We don't need to repeat text "no alerts" because we already have three zeros.

fkanout · 2022-08-01T11:33:46Z

@elasticmachine merge upstream

Review Idea to always get a background on the graph

kibana-ci · 2022-08-02T11:27:16Z

💚 Build Succeeded

Metrics [docs]

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.0MB	1.0MB	+1.5KB

History

💚 Build #62275 succeeded a7f4ca0
💚 Build #62002 succeeded 2c68d83
💚 Build #61699 succeeded 1a27103
💔 Build #61695 failed 10068aa
💔 Build #61505 failed cbef6f9

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

cc @fkanout

* Use more efficient code/query, and add the 3rd bar (base one) * Update comment * Update comment * Add the shade color to the base bar * Update comment * Remove unused else * add tooltip and fix base bar * Update design * Add error handling message * review idea * fix no alerts + graph to get greyed out * review I * Fix the order of alertsChartData * Fix design and color scheme Co-authored-by: Xavier Mouligneau <[email protected]> (cherry picked from commit 521c2a4)

kibanamachine · 2022-08-02T13:03:13Z

💚 All backports created successfully

Status	Branch	Result
✅	8.4

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…7840) * Use more efficient code/query, and add the 3rd bar (base one) * Update comment * Update comment * Add the shade color to the base bar * Update comment * Remove unused else * add tooltip and fix base bar * Update design * Add error handling message * review idea * fix no alerts + graph to get greyed out * review I * Fix the order of alertsChartData * Fix design and color scheme Co-authored-by: Xavier Mouligneau <[email protected]> (cherry picked from commit 521c2a4) Co-authored-by: Faisal Kanout <[email protected]>

fkanout added 4 commits July 28, 2022 17:03

Use more efficient code/query, and add the 3rd bar (base one)

94ebd0c

Update comment

0c170d2

Update comment

5e2c8fd

Add the shade color to the base bar

08c7e23

fkanout added the v8.4.0 label Jul 28, 2022

fkanout self-assigned this Jul 28, 2022

fkanout added 5 commits July 28, 2022 17:19

Upddate comment

2fd2fc9

Remove unused else

cbef6f9

add tootlip and fix base bar

2720e2e

Update design

5c944e0

Add error handling message

10068aa

fkanout added v8.5.0 bug Fixes for quality problems that affect the customer experience labels Jul 29, 2022

fkanout marked this pull request as ready for review July 29, 2022 11:52

fkanout requested a review from a team as a code owner July 29, 2022 11:52

Merge branch 'main' into 137292-ui-bug-fix--alert-summary-chart

1a27103

fkanout added release_note:fix Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" labels Jul 29, 2022

XavierM reviewed Jul 29, 2022

View reviewed changes

...ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx Show resolved Hide resolved

XavierM reviewed Jul 29, 2022

View reviewed changes

...ck/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts Show resolved Hide resolved

XavierM reviewed Jul 29, 2022

View reviewed changes

kibanamachine and others added 5 commits August 1, 2022 07:33

Merge branch 'main' into 137292-ui-bug-fix--alert-summary-chart

2c68d83

review idea

a2b98d4

fix no alerts + graph to get greyed out

1c96337

review I

1fca5af

Merge pull request #3 from XavierM/pr/137476

a7f4ca0

Review Idea to always get a background on the graph

XavierM approved these changes Aug 2, 2022

View reviewed changes

fkanout added 2 commits August 2, 2022 11:26

Fix the order of alertsChartData

88ab8b5

Fix design and color scheme

2771ab6

fkanout added backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) and removed v8.4.0 v8.5.0 labels Aug 2, 2022

fkanout merged commit 521c2a4 into elastic:main Aug 2, 2022

kibanamachine added the v8.5.0 label Aug 2, 2022

kibanamachine mentioned this pull request Aug 2, 2022

[8.4] [ResponseOps][BUG] - UI fixes for Alerts Summary chart (#137476) #137840

Merged

kibanamachine added the v8.4.0 label Aug 2, 2022

elasticmachine unassigned fkanout Oct 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ResponseOps][BUG] - UI fixes for Alerts Summary chart #137476

[ResponseOps][BUG] - UI fixes for Alerts Summary chart #137476

fkanout commented Jul 28, 2022 •

edited by kibanamachine

Loading

fkanout commented Jul 29, 2022

elasticmachine commented Jul 29, 2022

elasticmachine commented Jul 29, 2022

fkanout commented Jul 29, 2022

XavierM Jul 29, 2022

fkanout Jul 29, 2022

XavierM Jul 29, 2022

fkanout Jul 29, 2022

XavierM Aug 1, 2022 •

edited

Loading

fkanout Aug 1, 2022 •

edited

Loading

XavierM Aug 1, 2022

XavierM left a comment

fkanout commented Jul 29, 2022

maciejforcone commented Aug 1, 2022

fkanout commented Aug 1, 2022

kibana-ci commented Aug 2, 2022

kibanamachine commented Aug 2, 2022

[ResponseOps][BUG] - UI fixes for Alerts Summary chart #137476

[ResponseOps][BUG] - UI fixes for Alerts Summary chart #137476

Conversation

fkanout commented Jul 28, 2022 • edited by kibanamachine Loading

Summary

fkanout commented Jul 29, 2022

elasticmachine commented Jul 29, 2022

elasticmachine commented Jul 29, 2022

fkanout commented Jul 29, 2022

XavierM Jul 29, 2022

Choose a reason for hiding this comment

fkanout Jul 29, 2022

Choose a reason for hiding this comment

XavierM Jul 29, 2022

Choose a reason for hiding this comment

fkanout Jul 29, 2022

Choose a reason for hiding this comment

XavierM Aug 1, 2022 • edited Loading

Choose a reason for hiding this comment

fkanout Aug 1, 2022 • edited Loading

Choose a reason for hiding this comment

XavierM Aug 1, 2022

Choose a reason for hiding this comment

XavierM left a comment

Choose a reason for hiding this comment

fkanout commented Jul 29, 2022

maciejforcone commented Aug 1, 2022

fkanout commented Aug 1, 2022

kibana-ci commented Aug 2, 2022

💚 Build Succeeded

Metrics [docs]

Async chunks

History

kibanamachine commented Aug 2, 2022

💚 All backports created successfully

Questions ?

fkanout commented Jul 28, 2022 •

edited by kibanamachine

Loading

XavierM Aug 1, 2022 •

edited

Loading

fkanout Aug 1, 2022 •

edited

Loading