[UX] Remove association between an alerting monitor and a visualization

[xeniatup]

Is your feature request related to a problem?
As a user who want to manage information density on the dashboards I want to be able to remove some of the associations between alerting monitors and visualizations.

UX Meta issue

What solution would you like?
#458
#457

User story

1. User wants to be able to list all alerting monitors associated with visualization
2. User wants to be able to list all visualizations associated with a given alerting monitor
3. User wants to be able to create/remove an association between a monitor and a visualization.

For associating monitors see #483

Unlink alerting monitor from visualization

unlink-monitor.mp4

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

Screen 2: User selects "Associated monitors" from the context menu:

Screen 3a: Selecting "Associated monitors" opens a flyout OuiFlyout with the list of all monitors (OuiBasicTable) associated with the visualization.

Screen 4: Selecting "Remove association" button icon from the "Actions" column opens a confirmation modal (OuiModal) dialog.

Screen 5: User selects "Remove association", and the modal dialog closes. User returns to the flyout. The success or fail message appears as a toast (OuiToast ). The list of monitors is reloaded and updated accordingly.

Screen 6: Monitor name in the table points to the monitor page in Alerting plugin.
(Selecting "edit" button icon from the "Actions" column opens monitor page in Alerting plugin in "edit" mode.) User scrolls down the page to "Associated visualizations" table, listing all visualizations the monitor is associated. If a visualization is incompatible with the plugin augmentation feature (an example being user changes visualization type after the monitor has been associated), a warning badge (OuiBadges) is displayed in the "Compatibility" column.

Screen 7: Selecting "Remove association" icon button from the "Actions" column triggers a confirmation modal (similar to screen 4).

Screen 8: User selects "Remove association" and returns to the monitor page. A toast message appears.

Additional states for "Associated monitors" flyout:

Screen 3b: Empty state of "Associated monitors" flyout (no alerting monitors associated with the visualization)

Screen 3c: When the limit of plugin objects per visualization is reached, a warning callout is added to the flyout, and the "Associate monitor" button is disabled.

Screen 3d: Permissions error state. When user doesn't have required permissions to read the alerting monitors associated with the visualization, the system shows "Associated monitors" flyout in empty state. A toast message opens with the security error. "Associate monitor" button is hidden.

[xeniatup]

Done