[Security Solution][DQD] Add New UI For List View + Latest Flyout (Phase 1) #185881
Assignees
Labels
8.16 candidate
Feature:Data Health Quality
Data health quality dashboard and related features
Team:Threat Hunting:Explore
Team:Threat Hunting
Security Solution Threat Hunting Team
Comments
kapral18
added
v8.15.0
Team:Threat Hunting
|
Pinging @elastic/security-threat-hunting (Team:Threat Hunting) |
|
Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore) |
|
blocked by elastic/security-docs#5701 |
kapral18
added a commit
that referenced
this issue
Aug 21, 2024
…88468) 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. 
kapral18
added
the
Feature:Data Health Quality
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a ticket for actual implementation of first 2 UIs from new DQD Historical Checks Story #184158.
Acceptance criteria:
Fully functional UI overhaul for List View
Fully functional new ui for checking the latest check in a Flyout.
P.S.
The reason for implementing these 2 UIs together is so that we can release these changes standalone as a replacement of current existing DQD functionality and ship the historical tab separately.
The text was updated successfully, but these errors were encountered: