[Security Solution] KPI visualizations on Alerts Page by christineweng · Pull Request #149173 · elastic/kibana

christineweng · 2023-01-19T00:26:09Z

Summary

This PR is a part 2 of #146938 that populates the remaining 2 charts for the summary section on Alerts Page.

Capabilities added

Alerts by type: alert count by rule and by type (prevention vs. detection)
Top alerts: top 10 alert grouping based on user selected drop down

Changes from previous PR

Refactor useSeverityChartData to useSummaryChartData so that it can be used by all 3 charts to fetch data
Move SeverityLevel chart up one level to alerts_kpi folder to better isolate components for testing.

Feature flag: alertsPageChartsEnabled

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

…into 8.7_Summary_Charts

elasticmachine · 2023-01-23T16:27:23Z

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

elasticmachine · 2023-01-23T16:27:25Z

Pinging @elastic/security-solution (Team: SecuritySolution)

remove draggable path fix ci uuid ref

stephmilovic

Explore changes LGTM, thanks!

christineweng · 2023-01-25T15:54:25Z

@elasticmachine merge upstream

christineweng · 2023-01-27T21:22:01Z

@elasticmachine merge upstream

...lution/public/detections/components/alerts_kpis/alerts_by_type_panel/alerts_by_type.test.tsx

...n/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx

...rity_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/helpers.tsx

michaelolo24

This looks great! Reviewed the code, pulled down and tested, and everything works well! Just add a couple translations and we should be good to go! Thanks!

kibana-ci · 2023-01-30T23:27:26Z

💚 Build Succeeded

Buildkite Build
Commit: 4e5d3b5

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	3565	3579	+14

Async chunks

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

id	before	after	diff
`securitySolution`	12.9MB	12.9MB	+10.1KB

History

💚 Build #103527 succeeded 131e03c
💛 Build #102650 was flaky 72d0cdc
💛 Build #102365 was flaky a856305
💛 Build #101866 was flaky de009c2dc6b23e3958da085e15894b21d3e9a9f9
💛 Build #101809 was flaky 29b4b24e65f6ae2b6c3fcdd39042f6534d557c33
💔 Build #101655 failed aefa9bc235277d227e13dc1dd41b8b2d53776036

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

cc @christineweng

## Summary This PR is a part 2 of elastic#146938 that populates the remaining 2 charts for the summary section on Alerts Page. Capabilities added - Alerts by type: alert count by rule and by type (prevention vs. detection) - Top alerts: top 10 alert grouping based on user selected drop down Changes from previous PR - Refactor `useSeverityChartData` to `useSummaryChartData` so that it can be used by all 3 charts to fetch data - Move `SeverityLevel` chart up one level to `alerts_kpi` folder to better isolate components for testing. Feature flag: `alertsPageChartsEnabled` ![image](https://user-images.githubusercontent.com/18648970/213945018-57a15c60-ed53-4e86-90f5-c1909e88420d.png) ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…150242) ## Summary This PR is part 3 of #149173 and #146938 that add additional KPI visualizations to the Alerts page. #### Capabilities added Charts menu: changed from a drop down selection to tabs format, with wording that better describe the usage of each charts Chart collapse: when the toggle is collapsed, instead of showing the same menu options, a summary of the KPIs are shown. Feature flag: `alertsPageChartsEnabled` is set to true by default #### Changes from previous PR Before this PR, each chart (trend, tree map etc.) keeps its own state of toggle status. This is no longer suitable because the new layout does not show options when collapsed. This PR also moves the toggle status to be at the chart panel's level, and be passed down to each chart component. One exception is the histogram (trend analysis), it is currently being used in alerts detail page and overview dashboard, hence it needs to keep track of toggle state on its own. #### When charts are expanded ![image](https://user-images.githubusercontent.com/18648970/216714087-a872cdeb-5d69-40fd-a392-4130ad6c925c.png) #### When collapsed and has data ![image](https://user-images.githubusercontent.com/18648970/216714168-e4d72ca2-b214-48d8-9182-932927c0b473.png) #### When collapsed with no data ![image](https://user-images.githubusercontent.com/18648970/216714250-628b96d2-6380-4999-a2a6-ed22eb0d8791.png) ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

christineweng added 14 commits December 13, 2022 16:03

add detections and alert by host feature

dca7132

add detections and alert by host feature

4c394e3

refactor queries, added unit tests for data fetching

52698de

update design

82b928a

summary charts part 2

b790661

8.7 summary charts part 2

b6274a3

Merge branch '8.7_Summary_Charts' of github.com:christineweng/kibana …

e183915

…into 8.7_Summary_Charts

fix translations

17af19f

fix merge conflicts

8c75542

design changes

98535d2

visual fixes

e5c9494

Merge branch 'main' of github.com:elastic/kibana into 8.7_Summary_Charts

24d1877

add unit test

f25f386

add drop down to top alerts and fix unit tests

5f30195

christineweng self-assigned this Jan 19, 2023

christineweng and others added 3 commits January 18, 2023 20:28

Merge branch 'main' into 8.7_Summary_Charts

f2a3928

refactor folders

2eed4fa

Merge branch 'main' into 8.7_Summary_Charts

3744d30

christineweng force-pushed the 8.7_Summary_Charts branch from 29b4b24 to de009c2 Compare January 23, 2023 16:25

christineweng marked this pull request as ready for review January 23, 2023 16:27

christineweng requested review from a team as code owners January 23, 2023 16:27

christineweng requested a review from a team as a code owner January 23, 2023 16:27

type narrowing and removed enzyme reference

a856305

remove draggable path fix ci uuid ref

christineweng force-pushed the 8.7_Summary_Charts branch from a70a3a8 to a856305 Compare January 24, 2023 21:54

stephmilovic approved these changes Jan 24, 2023

View reviewed changes

Merge branch 'main' into 8.7_Summary_Charts

72d0cdc

christineweng enabled auto-merge (squash) January 25, 2023 17:29

Merge branch 'main' into 8.7_Summary_Charts

131e03c

michaelolo24 reviewed Jan 30, 2023

View reviewed changes

...lution/public/detections/components/alerts_kpis/alerts_by_type_panel/alerts_by_type.test.tsx Outdated Show resolved Hide resolved

michaelolo24 reviewed Jan 30, 2023

View reviewed changes

...lution/public/detections/components/alerts_kpis/alerts_by_type_panel/alerts_by_type.test.tsx Show resolved Hide resolved

michaelolo24 reviewed Jan 30, 2023

View reviewed changes

...n/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx Outdated Show resolved Hide resolved

michaelolo24 reviewed Jan 30, 2023

View reviewed changes

...rity_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/helpers.tsx Outdated Show resolved Hide resolved

michaelolo24 approved these changes Jan 30, 2023

View reviewed changes

christineweng added 2 commits January 30, 2023 15:53

fix type guard and translations

3b73447

Merge branch 'main' of github.com:elastic/kibana into 8.7_Summary_Charts

4e5d3b5

christineweng merged commit dda650f into elastic:main Jan 30, 2023

christineweng mentioned this pull request Feb 3, 2023

[Security Solution] Alert page charts new layout and chart collapse #150242

Merged

4 tasks

nastasha-solomon mentioned this pull request Feb 7, 2023

[META] Alerts table/page updates for 8.7 elastic/security-docs#2956

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] KPI visualizations on Alerts Page#149173

[Security Solution] KPI visualizations on Alerts Page#149173
christineweng merged 22 commits intoelastic:mainfrom
christineweng:8.7_Summary_Charts

christineweng commented Jan 19, 2023 •

edited

Loading

Uh oh!

elasticmachine commented Jan 23, 2023

Uh oh!

elasticmachine commented Jan 23, 2023

Uh oh!

stephmilovic left a comment

Uh oh!

christineweng commented Jan 25, 2023

Uh oh!

christineweng commented Jan 27, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michaelolo24 left a comment

Uh oh!

kibana-ci commented Jan 30, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

christineweng commented Jan 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

For maintainers

Uh oh!

elasticmachine commented Jan 23, 2023

Uh oh!

elasticmachine commented Jan 23, 2023

Uh oh!

stephmilovic left a comment

Choose a reason for hiding this comment

Uh oh!

christineweng commented Jan 25, 2023

Uh oh!

christineweng commented Jan 27, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michaelolo24 left a comment

Choose a reason for hiding this comment

Uh oh!

kibana-ci commented Jan 30, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

christineweng commented Jan 19, 2023 •

edited

Loading