[SecuritySolution] Replace risk score over time with Lens Embeddable

[angorayc]

Summary

Implements: #149015

Please Enable feature flags. Please add this to kibana.dev.yml xpack.securitySolution.enableExperimental: ['chartEmbeddablesEnabled']

---

Replace risk score over time with Lens Embeddable

Before:

After:

Alerts By severity on host / network / user details should apply global filters

Styling for donuts on Entity Analytics dashboard

(Moving the legend to left side of the chart so its actions button wouldn't overlap with chart action)

Preview:
Host risk score over time
User risk score over time
https://p.elstc.co/paste/2MIN+pHd#TETZwPh15r64HQ2z0Cn26Z321XCxe+2DqliqF5-CHmr
Designers' review:
#149123

Known issue:
#149513

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

[elasticmachine]

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

[elasticmachine]

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

[machadoum]

Hey Angela! Thank you for updating the risk score over time chart.

I noticed that there are some donut chart code changes in the branch. Was it intentional?

[machadoum]

@angorayc I made it look more similar to the previous design by setting max-min to 0-100. And removing the horizontal lines.

Is it possible to apply the same changes by configuration?

I also noticed that you are using the 'average' function for grouping and I believe that a 'maximum' function would fit better in this use case.

[angorayc]

Thanks for the tips! I've applied the domain settings for Y axis, and uses maximum function for rendering the value.

[machadoum]

This CSS selector doesn't seem very maintainable. We shouldn't make references to specific pages or components from inside a generic donut chart. I would suggest to have a particular property for this behaviour, like emptyDataTopPosition, or reuse the class you receive as props in the selector:

&.${donutTextWrapperClassName} {
   ...
}

[angorayc]

Good point. I have updated the css rules here, so we can just pass a custom class and the styles to the component.

[angorayc]

Hey Angela! Thank you for updating the risk score over time chart.

I noticed that there are some donut chart code changes in the branch. Was it intentional?

Yes, it implements Styling for donuts on Entity Analytics dashboard from the summary section of this PR.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: f0d4301

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	3530	3531	+1

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.8MB	12.8MB	+3.8KB

History

• 💔 Build #102183 failed 1f2694e
• 💔 Build #102141 failed 06760a1
• 💚 Build #101792 succeeded cc33844
• 💚 Build #101682 succeeded be98c99
• 💛 Build #101480 was flaky ff45b7c

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

[machadoum]

It looks great. Thank you!