[Secuity Solution][DQD] add list view and latest flyout (Phase 1)

[kapral18]

addresses #185881

Data Quality Dashboard UI Overhaul (Phase 1)

This PR introduces UI changes to the Data Quality Dashboard, focusing on improving user experience and improving on existing data quality check process.

Notable changes:

• Update List View UI
• Move in-row check expansion into a Flyout
• Remove summary tab from index check
• Update index check UI
• Add table action to trigger manual individual index check without opening index check properties
• Add in-flyout button to trigger manual individual check
• Add additional index stats panel within flyout

Notable technical changes:

• remove prop drilling of new and existing omnipresent props by unifying them in a series of context providers at the top of DQ dashboard
• introduce TestDataQualityProviders separate from external TestProviders (renamed to TestExternalProviders) in tests. Change affected tests.
• introduce useIndicesCheck hook to unify logic of index checking to be able to call index checking from anywhere within DQD code without relying on flaky and complicated useEffect driven logic of state updates.
• introduce useIsMounted, hook to resolve issues with react state update leaks
• introduce throttled useCurrentWindowWidth to handle custom index flyout sizing for different screens.
• cleanup and refactor whatever is directly related or affected by aforementioned code/test changes (including traces of removal of summary tab)
• add extensive behavioral unit tests

UI Changes (Before / After)

List View Layout made more spacious

Check All Layout made more spacious

Total Stats Rollup converted to badges

ILM Phase Filter repositioned

Pattern Title Section

• Rearranged into accordion trigger button. Initially open by default.
• IlmPhase badges and Pattern title are now stacked horizontally.
• Index check result emoji converted to 'Pass' | 'Fail' badge
• Pattern stats text rearranged as badged text. Incompatible fields show as red badges (when present), the rest - hollow.

Latest Pattern Indices Check Table

• Added a new actions column with 2 actions (from left to right):
  • View details (replaces row expander functionality (and icon) and instead opens the index check results in a flyout)
  • Check now (NEW) (adds ability to inline check the index without opening it.)
• Index check result emoji turned to 'Pass' | 'Fail' badge
• IlmPhase, Size, Last Check columns width is shrunk to give more space for index name

Flyout Header

• Added index name with result check badge as title
• Added last check time as subtitle
• Added Tabs section for Latest Check and History (REMOVED in latest revision)

Flyout Stats Panel

• Added new index stats panel

Index Check Fields Tab

• Tabs converted to a button group
• Summary Tab is REMOVED
• All field count badges have hollow color, except for red color for incompatible fields tab (when count > 0) and ecs compliant fields tab (when @timestamp is missing)

Index Check Fields Callouts

• Callout header is removed (to avoid duplication with active tab name)
• Actions are converted into sticky footer (shows when scrolled sticky to bottom, otherwise renders after the table)
• Same for every index check fields tab

Compare Table List Values

• List values in compare tables are now horizontally stacked instead of vertical to save space (applies to all compare tables in each index check fields tab)

Compare Table Columns

• ECS description field width increased at the expense of field field, to make room for more readable description (applies respectively to all compare tables within index check fields tabs)

Flyout footer

• Add Check now button, that checks currently open index again and updates the results in place.

[elasticmachine]

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

[elasticmachine]

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

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: a324db8c4aa79f9bbe466c3a4457b3b688675e94

Failed CI Steps

• Quick Checks

History

cc @kapral18

[angorayc]

@kapral18 Some issues found on the serverless version with viewer role, could you please check if you can reproduce them, thank you!

Clarification on Viewer should not have access to alerts index: When I saw this screen, I thought if a viewer has no right to see the historical result of auditbeat-* , then it should have no right to see the historical result of alerts index. But having another look, it makes sense as the index previlege does varies by index. A user can have read access to alert index but have no read access to auditbeat

[kapral18]

@kapral18 Some issues found on the serverless version with viewer role, could you please check if you can reproduce them, thank you!

@angorayc The padding issue is addressed in a new separate commit. Thanks for checking.

[kapral18]

@kapral18 Some issues found on the serverless version with viewer role, could you please check if you can reproduce them, thank you!

@angorayc Added this #190687 to fix the incorrect results label issue

[kapral18]

@kapral18 Some issues found on the serverless version with viewer role, could you please check if you can reproduce them, thank you!

@angorayc I also noticed that the no data label when storage-treemap is missing is being smushed in the design because of outlined borders of pattern accordions, so I added some paddings per this commit 906d3ef

now it looks like this

[kapral18]

hey @angorayc @agusruidiazgd @andrew-goldstein

We just revisited the tooltip texts with docs people
so one last commit 99866bb

[kapral18]

docs PR is ready elastic/security-docs#5718

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: a9dca35
• Cloud Deployment
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-188468-a9dca35a6786
• Security Deployment

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	5652	5666	+14

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/ecs-data-quality-dashboard	5	6	+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	20.7MB	20.7MB	+1.2KB

Unknown metric groups

API count

id	before	after	diff
@kbn/ecs-data-quality-dashboard	13	14	+1

ESLint disabled line counts

id	before	after	diff
@kbn/ecs-data-quality-dashboard	6	3	-3

Total ESLint disabled count

id	before	after	diff
@kbn/ecs-data-quality-dashboard	6	3	-3

History

• 💔 Build #228749 failed d0edefd550167a7ee97db310c4a138ab37fe2e3e
• 💛 Build #228722 was flaky 99866bb7339a83860c8587ffa89817b25946afad
• 💚 Build #228587 succeeded 6733a32d28c0ce12c230f96791721f70fb6f06be
• 💚 Build #228494 succeeded f6f6b96497a22e408d4aa0cef2a756c7b4cd2da6

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

cc @kapral18