Replace KPIs with Lens embeddable

[angorayc]

Summary

issue: #136409

We'd like to move KPI charts to Lens Embeddables, so they will be compatible with custom dashboards.
This means some the layout of KPIs are changed.
The order of chart actions are arranged alphabetically.
The inspect modal is changed and more actions are available from the modal.

This PR is for cloud deployment, demo, and UI review, the actual implementation will be split into 3 smaller PRs:

• Hosts implementation [SecuritySolution] Replace KPIs on Host, Network, and Users with Lens Embeddables #138369
• Network implementation Lens embeddables/network #138374
• Users implementation Lens embeddables/users #138363

Hosts

Screen.Recording.2022-08-08.at.11.15.05.mov

Host details

Users

Network

Inspector

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
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[angorayc]

@monina-n ,
Can you please review the new KPI cards on hosts / network / users page.
These charts are rendered by Lens Embeddable component, so the look and feel should be align with Lens.
There's a known limitation about the metric section: As the Embeddable component is rendered like a card,
we won't be able to maintain the layout (especially the gap between the icon and the subtitle as we don't know how long the number is anymore, we can only reserve a fixed space for the card)as what we had before, could you please find a new design for the metric section?

New:

Before:

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: 7d4aa81
• Interpreting CI Failures
• Cloud Deployment

Failed CI Steps

• Jest Tests #1
• Jest Tests #5
• Jest Tests #7
• Jest Tests #8
• Jest Tests #9
• Checks
• Check Types
• Security Solution Tests #1
• Security Solution Tests #1
• Security Solution Tests #3
• Security Solution Tests #3

Test Failures

• [job] [logs] Jest Tests #9 / Authentications KPI toggleStatus=false, skip
• [job] [logs] Jest Tests #9 / Authentications KPI toggleStatus=true, do not skip
• [job] [logs] Jest Tests #7 / Hosts - rendering it DOES NOT render the Setup Instructions text when an index is available
• [job] [logs] Jest Tests #7 / Hosts - rendering it should add the new filters after init
• [job] [logs] Jest Tests #7 / Hosts - rendering it should render tab navigation
• [job] [logs] Security Solution Tests #3 / Hover actions Adds global filter - filter in
• [job] [logs] Security Solution Tests #3 / Hover actions Adds global filter - filter out
• [job] [logs] Jest Tests #5 / Network page - rendering it DOES NOT render getting started page when an index is available
• [job] [logs] Jest Tests #5 / Network page - rendering it does not render the network map if user does not have permissions
• [job] [logs] Jest Tests #5 / Network page - rendering it renders the network map if user has permissions
• [job] [logs] Jest Tests #5 / Network page - rendering it should add the new filters after init
• [job] [logs] Jest Tests #8 / OverviewNetwork it renders an empty subtitle while loading
• [job] [logs] Jest Tests #8 / OverviewNetwork it renders the expected event count in the subtitle after loading events
• [job] [logs] Jest Tests #8 / OverviewNetwork it renders the expected widget title
• [job] [logs] Jest Tests #8 / OverviewNetwork it renders View Network
• [job] [logs] Jest Tests #8 / OverviewNetwork toggleStatus=true, do not skip
• [job] [logs] Jest Tests #8 / OverviewNetwork when click on View Network we call navigateToApp to make sure to navigate to right page
• [job] [logs] Security Solution Tests #1 / Sourcerer Default scope adds a pattern to the default index and correctly filters out auditbeat-*
• [job] [logs] Security Solution Tests #1 / Sourcerer Default scope adds a pattern to the default index and correctly filters out auditbeat-*
• [job] [logs] Jest Tests #1 / Stat Items Component disable charts should not render icons
• [job] [logs] Jest Tests #1 / Stat Items Component rendering kpis with charts should handle multiple titles
• [job] [logs] Jest Tests #1 / Stat Items Component rendering kpis with charts should render areaChart
• [job] [logs] Jest Tests #1 / Stat Items Component rendering kpis with charts should render barChart
• [job] [logs] Jest Tests #1 / Stat Items Component Toggle query toggleQuery updates toggleStatus
• [job] [logs] Jest Tests #1 / Stat Items Component Toggle query toggleStatus=true, render all
• [job] [logs] Jest Tests #9 / Total Users KPI toggleStatus=false, skip
• [job] [logs] Jest Tests #9 / Total Users KPI toggleStatus=true, do not skip
• [job] [logs] Jest Tests #5 / Unique Flows KPI toggleStatus=false, skip
• [job] [logs] Jest Tests #5 / Unique Flows KPI toggleStatus=true, do not skip
• [job] [logs] Jest Tests #1 / useKpiMatrixStatus it updates status correctly
• [job] [logs] Jest Tests #1 / useLensAttributes should add filters
• [job] [logs] Jest Tests #9 / Users - rendering it should render tab navigation

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	3035	3030	-5

Async chunks

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

id	before	after	diff
securitySolution	5.4MB	5.3MB	-18.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
securitySolution	254.7KB	254.7KB	-20.0B
uiActions	19.6KB	19.7KB	+52.0B
total			+32.0B

Unknown metric groups

API count

id	before	after	diff
uiActions	130	132	+2

ESLint disabled in files

id	before	after	diff
apm	14	13	-1

ESLint disabled line counts

id	before	after	diff
apm	81	78	-3

Total ESLint disabled count

id	before	after	diff
apm	95	91	-4

History

• 💔 Build #64775 failed a854617
• 💔 Build #64476 failed 0cab34f
• 💔 Build #63686 failed c59131a
• 💔 Build #63640 failed 7204890

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

[angorayc]

Close this pr as implemented in #138791