[UX] Associate alerting monitor with a visualization on Dashboards

[xeniatup]

As a user who has found a problem area that they want to monitor (e.g. setting up a new service), I want to setup an alert from the visualization that I’m looking at, so I don’t have to go to the alerts plugin to setup an alert.
Meta-issue

Describe the solution you'd like
#458
#457

See also Create alerting monitor from visualizations

User story:
User associates existing monitor to a time series visualization to receive alerts on a dashboard.

Associate existing monitor to a visualization:

User wants to create an association between a time series visualization and an existing monitor (which could look at the same data source or another one) in order to overlay the events from the monitor on a visualization's timeline.

associate-alerting-monitor.mp4

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

Screen 2: User selects "Add alerting monitor" from the context menu:

Screen 3a: "Add alerting monitor" opens a flyout OuiFlyout with "Create alerting monitor" option prefilled with the information from the visualization (including data source information and suggested monitor name):

Screen 4: User selects "Associate existing monitor" (OuiCheckableCard, OuiRadio)

Screen 5: An alternative path to open "Associate existing monitor" flyout is to select Alerting -> Associated monitors -> Associated monitors flyout -> click on "Associate monitor" button.
Note on the flyouts behavior - in order to open a new flyout ("Associate monitor"), the previous one should be closed ("Associated monitors")

Screen 6: User selects a monitor from the list (Single item OuiComboBox):

Screen 7: After selecting a monitor user sees a summary of monitor's details to review the choice.

Screen 8: After selecting alerting monitor user clicks on "Create monitor" button. The flyout closes, user returns to the dashboard.

[xeniatup]

Done