[UX] Create anomaly detector from visualizations

[xeniatup]

Is your feature request related to a problem?
As an unsure user who is troubleshooting a problem, I want to augment my visualization with anomaly detection, so I can quickly identify if something is problematic or not.

UX Meta issue

What solution would you like?
opensearch-project/anomaly-detection#521
#400

Initial UX proposal on Anomaly Detection on Dashboards opensearch-project/OpenSearch-Dashboards#1798

User stories

• User quickly creates an anomaly detector to see out of bounds events on a time series visualization on a dashboard. The detector details and model features are prefilled from the data source and metrics of the visualization.
• User sets up alerts for the detector created on a visualization to receive alerts on a dashboard.

Create anomaly detector (part 1 of the flow)

See part two - set up alerts for anomaly detector on visualization - here.

create-anomaly-detector.mp4

Screen 1: User selects a visualization on a dashboard and selects "Anomaly detection" from the visualization context menu OuiContextMenu:

Screen 2: User selects "Add anomaly detector" from the context menu:

Screen 3a: "Add anomaly detector" option opens a flyout OuiFlyout with "Create anomaly detector" option prefilled with the information from the visualization:

Screen 4: User toggles visualization for additional context (optional):

Screen 5: User expands an accordion with basic detector details prefilled with defaults from the visualization to review. All fields are editable.
Note on the accordion behavior - the description is dynamic and changes onBlur with the form inputs.

Screen 6: User expands an accordion to review and edit advanced detector details OuiAccordion.
Note on the accordion behavior - Only one nested accordion can be expanded at every moment.

Screen 7: User selects "Add data filter" button to create a filter. (OuiBadgeGroup, OuiBadges)

Screen 8a: "Add data filter" form (OuiFlexGroup) opens in a modal dialog (OuiModal).

Screen 9: The modal for add and edit data filters provides two options - a visual editor (see screen 8 above) or DSL query editor(OuiCodeBlock).

Screen 10a: Shingle size is edited using an inline form field with append prop

Screen 11: Custom result index is not enabled by default:

Screen 12: Custom result index is enabled by checking a checkbox and the name is provided in the single field form with prepend prop.

Screen 13: High cardinality anomaly detectors are currently not supported in this feature.

Screen 14a: Model features are prefilled using metrics on the visualization (up to 5). Features can be deleted or added from the visualization within this number. Each feature's details are edited in an accordion (OuiAccordion)
Note on the "delete" icon button (OuiButtonIcon): in the default state it is displayed in ouiTextSubduedColor, and in focused state it uses ouiColorDanger

Screen 14b: User can select either find anomalies based on field value or custom expression (OuiCodeBlock)

Screen 15: User selects "Create detector" button. The flyout closes, user returns to the dashboard.
The resulting toast message displays a CTA to continue with the second part of the flow - Set up alerts.

Error states:
Notes on validation error states:

• The flyout is kept open and scrolled to the top
• Error callout on the top
• All accordions that contain errors are expanded
• All failed form rows in invalid state
• Toast message for index permission errors, plugin permission errors, API failed responses
• Missing accordion headers and descriptions use hyphen as placeholder for missing values

Screen 3b: (Validation error state) "Add anomaly detector" option opens a flyout OuiFlyout with "Create anomaly detector" option prefilled with the information from the visualization:

Screen 8b: (Validation error state) "Add data filter" form (OuiFlexGroup) opens in a modal dialog (OuiModal).

Screen 10b: (Validation error state) Shingle size is edited using an inline form field with append prop

[xeniatup]

Done