Add dashboard context option integration

public/actions/alerting_dashboard_action.tsx

@@ -6,7 +6,7 @@ import {
 } from '../../../../src/plugins/dashboard/public';
 import { IncompatibleActionError, createAction } from '../../../../src/plugins/ui_actions/public';
 import { isReferenceOrValueEmbeddable } from '../../../../src/plugins/embeddable/public';
-import { Action, DEFAULT_ACTION } from '../../../../src/plugins/ui_actions/public';
+import { Action } from '../../../../src/plugins/ui_actions/public';
 
 export const ACTION_ALERTING = 'alerting';
 
@@ -23,8 +23,9 @@ export interface CreateOptions {
   title: JSX.Element | string;
   icon: EuiIconType;
   id: string;
+  type: Action['type'];
   order: number;
-  onClick: Function;
+  onExecute: Function;
 }
 
 export const createAlertingAction = ({
@@ -33,7 +34,8 @@ export const createAlertingAction = ({
   icon,
   id,
   order,
-  onClick,
+  onExecute,
+  type,
 }: CreateOptions) =>
   createAction({
     id,
@@ -45,7 +47,7 @@ export const createAlertingAction = ({
       return title;
     },
     getIconType: () => icon,
-    type: DEFAULT_ACTION,
+    type,
     grouping,
     // Do not show actions for certin visualizations
     isCompatible: async ({ embeddable }: ActionContext) => {
@@ -63,6 +65,6 @@ export const createAlertingAction = ({
         throw new IncompatibleActionError();
       }
 
-      onClick({ embeddable });
+      onExecute({ embeddable });
     },
   });

public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.js

@@ -26,15 +26,14 @@ function AddAlertingMonitor({
   closeFlyout,
   core,
   services,
-  mode,
-  setMode,
+  flyoutMode,
+  setFlyoutMode,
   monitors,
   selectedMonitorId,
   setSelectedMonitorId,
   index,
 }) {
   const onCreate = () => {
-    console.log(`Current mode: ${mode}`);
     const event = new Event('createMonitor');
     document.dispatchEvent(event);
     closeFlyout();
@@ -44,50 +43,56 @@ function AddAlertingMonitor({
     <div className="add-alerting-monitor">
       <EuiFlyoutHeader hasBorder>
         <EuiTitle>
-          <h2 id="add-alerting-monitor__title">Add alerting monitor</h2>
+          <h2 id="add-alerting-monitor__title">
+            {flyoutMode === 'adMonitor' ? 'Set up alerts' : 'Add alerting monitor'}
+          </h2>
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <div className="add-alerting-monitor__scroll">
-          <EuiFormFieldset
-            legend={{
-              display: 'hidden',
-              children: (
-                <EuiTitle>
-                  <span>Options to create a new monitor or associate an existing monitor</span>
-                </EuiTitle>
-              ),
-            }}
-            className="add-alerting-monitor__modes"
-          >
-            {[
-              {
-                id: 'add-alerting-monitor__create',
-                label: 'Create new monitor',
-                value: 'create',
-              },
-              {
-                id: 'add-alerting-monitor__existing',
-                label: 'Associate existing monitor',
-                value: 'existing',
-              },
-            ].map((option) => (
-              <EuiCheckableCard
-                {...{
-                  ...option,
-                  key: option.id,
-                  name: option.id,
-                  checked: option.value === mode,
-                  onChange: () => setMode(option.value),
+          {flyoutMode !== 'adMonitor' && (
+            <>
+              <EuiFormFieldset
+                legend={{
+                  display: 'hidden',
+                  children: (
+                    <EuiTitle>
+                      <span>Options to create a new monitor or associate an existing monitor</span>
+                    </EuiTitle>
+                  ),
                 }}
-              />
-            ))}
-          </EuiFormFieldset>
-          <EuiSpacer size="m" />
-          {mode === 'create' && (
-            <CreateNew {...{ embeddable, closeFlyout, core, services, index }} />
+                className="add-alerting-monitor__modes"
+              >
+                {[
+                  {
+                    id: 'add-alerting-monitor__create',
+                    label: 'Create new monitor',
+                    value: 'create',
+                  },
+                  {
+                    id: 'add-alerting-monitor__existing',
+                    label: 'Associate existing monitor',
+                    value: 'existing',
+                  },
+                ].map((option) => (
+                  <EuiCheckableCard
+                    {...{
+                      ...option,
+                      key: option.id,
+                      name: option.id,
+                      checked: option.value === flyoutMode,
+                      onChange: () => setFlyoutMode(option.value),
+                    }}
+                  />
+                ))}
+              </EuiFormFieldset>
+              <EuiSpacer size="m" />
+            </>
           )}
-          {mode === 'existing' && (
+          {['create', 'adMonitor'].includes(flyoutMode) && (
+            <CreateNew {...{ embeddable, closeFlyout, core, services, index, flyoutMode }} />
+          )}
+          {flyoutMode === 'existing' && (
             <AssociateExisting
               {...{
                 embeddable,
@@ -100,6 +105,7 @@ function AddAlertingMonitor({
               }}
             />
           )}
+          <EuiSpacer size="l" />
         </div>
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
@@ -109,7 +115,7 @@ function AddAlertingMonitor({
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton onClick={onCreate} fill>
-              {mode === 'existing' ? 'Associate' : 'Create'} monitor
+              {flyoutMode === 'existing' ? 'Associate' : 'Create'} monitor
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>

public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/__snapshots__/AssociateExisting.test.js.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssociateExisting renders 1`] = `
+<div
+  className="associate-existing"
+>
+  <EuiText
+    size="xs"
+  >
+    <p>
+      This is a short description of the feature to get users excited. Learn more in the documentation.
+
+      <a
+        href="https://opensearch.org/docs/latest/monitoring-plugins/alerting/index/"
+        target="_blank"
+      >
+        Learn more 
+        <EuiIcon
+          type="popout"
+        />
+      </a>
+    </p>
+  </EuiText>
+  <EuiSpacer
+    size="l"
+  />
+  <EuiTitle
+    size="s"
+  >
+    <h3>
+      Select monitor to associate
+    </h3>
+  </EuiTitle>
+  <EuiSpacer
+    size="m"
+  />
+  <EuiLoadingSpinner
+    size="l"
+  />
+  <EuiSpacer
+    size="xl"
+  />
+</div>
+`;

public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.js

@@ -3,20 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { EuiTitle, EuiSpacer, EuiIcon, EuiText, EuiSwitch, EuiLoadingSpinner } from '@elastic/eui';
 import CreateMonitor from '../../../../pages/CreateMonitor';
 import { EmbeddablePanel } from '../../../../../../../src/plugins/embeddable/public';
+import { NotificationService } from '../../../../services';
 import './styles.scss';
 
-function CreateNew({ embeddable, closeFlyout, core, services, index }) {
+function CreateNew({ embeddable, closeFlyout, core, index, flyoutMode }) {
   const [isShowVis, setIsShowVis] = useState(false);
   const title = embeddable.getTitle();
   const history = {
     location: { pathname: '/create-monitor', search: '', hash: '', state: undefined },
     push: (value) => console.log('pushed', value),
     goBack: closeFlyout,
   };
+  const notificationService = useMemo(() => new NotificationService(core.http), [core]);
   const createMonitorProps = {
     ...history,
     history,
@@ -25,24 +27,28 @@ function CreateNew({ embeddable, closeFlyout, core, services, index }) {
     setFlyout: () => null,
     notifications: core.notifications,
     isDarkMode: core.isDarkMode,
-    notificationService: services.notificationService,
+    notificationService,
     edit: false,
     monitorToEdit: false,
     updateMonitor: () => null,
     staticContext: undefined,
-    isMinimal: true,
+    flyoutMode,
     defaultName: `${title} monitor 1`,
     defaultIndex: index,
     defaultTimeField: embeddable.vis.params.time_field,
     isDefaultTriggerEnabled: true,
+    isDefaultMetricsEnabled: true,
+    isDefaultNotificationEnabled: true,
   };
 
   return (
     <div className="create-new">
       <EuiText size="xs">
         <p>
-          Create query level monitor, associated with the visualization. Learn more in the
-          documentation.{' '}
+          {flyoutMode === 'create' &&
+            'Create query level monitor, associated with the visualization. Learn more in the documentation.'}
+          {flyoutMode === 'adMonitor' &&
+            'Set up and configure alerting monitor for the anomaly detector to receive notifications on visualization when anomalies detected.'}{' '}
           <a
             href="https://opensearch.org/docs/latest/monitoring-plugins/alerting/index/"
             target="_blank"
@@ -72,7 +78,7 @@ function CreateNew({ embeddable, closeFlyout, core, services, index }) {
           getActions={() => Promise.resolve([])}
           inspector={{ isAvailable: () => false }}
           hideHeader
-          isRetained
+          isDestroyPrevented
           isBorderless
         />
       </div>

public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.test.js

@@ -9,7 +9,11 @@ import CreateNew from './CreateNew';
 
 describe('CreateNew', () => {
   test('renders', () => {
-    const wrapper = shallow(<CreateNew {...{ embeddable: { getTitle: () => '' } }} />);
+    const wrapper = shallow(
+      <CreateNew
+        {...{ embeddable: { getTitle: () => '', vis: { params: {} } }, core: { http: {} } }}
+      />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });

public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreateNew renders 1`] = `
+<div
+  className="create-new"
+>
+  <EuiText
+    size="xs"
+  >
+    <p>
+
+      <a
+        href="https://opensearch.org/docs/latest/monitoring-plugins/alerting/index/"
+        target="_blank"
+      >
+        Learn more 
+        <EuiIcon
+          type="popout"
+        />
+      </a>
+    </p>
+  </EuiText>
+  <EuiSpacer
+    size="m"
+  />
+  <div
+    className="create-new__title-and-toggle"
+  >
+    <EuiTitle
+      size="xxs"
+    >
+      <h4>
+        <EuiIcon
+          className="create-new__title-icon"
+          type="visLine"
+        />
+      </h4>
+    </EuiTitle>
+    <EuiSwitch
+      checked={false}
+      label="Show visualization"
+      onChange={[Function]}
+    />
+  </div>
+  <div
+    className="create-new__vis create-new__vis--hidden"
+  >
+    <EuiSpacer
+      size="s"
+    />
+    <EmbeddablePanel
+      embeddable={
+        Object {
+          "getTitle": [Function],
+          "vis": Object {
+            "params": Object {},
+          },
+        }
+      }
+      getActions={[Function]}
+      hideHeader={true}
+      inspector={
+        Object {
+          "isAvailable": [Function],
+        }
+      }
+      isBorderless={true}
+      isRetained={true}
+    />
+  </div>
+  <EuiSpacer
+    size="l"
+  />
+  <EuiTitle
+    size="s"
+  >
+    <h3>
+      Monitor details
+    </h3>
+  </EuiTitle>
+  <EuiSpacer
+    size="m"
+  />
+  <EuiLoadingSpinner
+    size="l"
+  />
+</div>
+`;