[UX] Set up alerts for anomaly detector on visualization

[xeniatup]

This is part 2 of a combined flow for creating anomaly detector and setting up alerts for the detector.
Part 1 of the flow Create anomaly detector from a visualization is here.

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 story: User sets up alerts for the detector created on a visualization to receive alerts on a dashboard.

Create alerting monitor (part 2 of the flow - optional)

User can additionally create alerting monitor associated with the anomaly detector to receive alerts on anomaly occurrences.

create-monitor-forAD.mp4

Screen 1: User is optionally setting up alerts for an anomaly detector in the two-part flow. After creating anomaly detector user selects "Set up alerts" from the success toast message (OuiToast). An alternative way to set up alerts for an anomaly detector is Alerting plugin UI.

Screen 2a: Selecting "Set up alerts" opens a flyout OuiFlyout with "Set up alerts" form (OuiFormRow, OuiFormRows) prefilled with the information from the detector. Monitor details are collapsed by default.

Screen 3a: Trigger conditions are prefilled with default values. The accordion is expanded by default on the form load.

Screen 4: User selects a notification channel from the list of existing channels (OuiComboBox). Additionally user can select "Manage channels" to access Notification plugin UI in a new tab (OuiButton).
Note on the element behavior - The list of channels is refreshing dynamically. If any new channels are added in Notifications plugin, those could be accessed from the list without reloading the form.

Screen 5: After selecting a channel user can edit default notification settings and the message copy by selecting "Configure notification".

Screen 6a: Selecting "Configure notification" shows a modal dialog over the flyout with a form (OuiModal).

Screen 7: Additional notifications are added by selecting "Add notification". Next notification is placed in a new nested accordion expanded for editing. The first notification accordion is collapsed after the second notification accordion is added.
Additional triggers are added by selecting "Add trigger". A new trigger is placed in a new expanded accordion below the first one. The first one is collapsed.

Screen 8: User selects "Create monitor" button. The flyout closes, user returns to the dashboard.

Error states:

Notes on validation error states:

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

Screen 2b: (Validation error state) Selecting "Set up alerts" opens a flyout OuiFlyout with "Set up alerts" form (OuiFormRow, OuiFormRows).

Screen 3b: (Validation error state) Trigger conditions.

Screen 4b: (Validation error state) If Notifications plugin is not installed, user sees a warning callout OuiCallOut .

Screen 6b: (Validation error state) Selecting "Configure notification" shows modal dialog over the flyout with a form (OuiModal).

[xeniatup]

Done:
#400
opensearch-project/OpenSearch-Dashboards#2880
opensearch-project/alerting-dashboards-plugin#457