Register AD as dashboard context menu option

opensearch_dashboards.json

@@ -7,7 +7,14 @@
     "opensearchDashboardsUtils",
     "expressions",
     "data",
-    "visAugmenter"
+    "visAugmenter",
+    "uiActions",
+    "dashboard",
+    "embeddable",
+    "opensearchDashboardsReact",
+    "savedObjects",
+    "visAugmenter",
+    "opensearchDashboardsUtils"
   ],
   "server": true,
   "ui": true

public/action/ad_dashboard_action.tsx

@@ -0,0 +1,74 @@
+import { IEmbeddable } from '../../../../src/plugins/dashboard/public/embeddable_plugin';
+import {
+  DASHBOARD_CONTAINER_TYPE,
+  DashboardContainer,
+} from '../../../../src/plugins/dashboard/public';
+import {
+  IncompatibleActionError,
+  createAction,
+  Action,
+} from '../../../../src/plugins/ui_actions/public';
+import { isReferenceOrValueEmbeddable } from '../../../../src/plugins/embeddable/public';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+
+export const ACTION_AD = 'ad';
+
+function isDashboard(
+  embeddable: IEmbeddable
+): embeddable is DashboardContainer {
+  return embeddable.type === DASHBOARD_CONTAINER_TYPE;
+}
+
+export interface ActionContext {
+  embeddable: IEmbeddable;
+}
+
+export interface CreateOptions {
+  grouping: Action['grouping'];
+  title: string;
+  icon: EuiIconType;
+  id: string;
+  order: number;
+  onClick: Function;
+}
+
+export const createADAction = ({
+  grouping,
+  title,
+  icon,
+  id,
+  order,
+  onClick,
+}: CreateOptions) =>
+  createAction({
+    id,
+    order,
+    getDisplayName: ({ embeddable }: ActionContext) => {
+      if (!embeddable.parent || !isDashboard(embeddable.parent)) {
+        throw new IncompatibleActionError();
+      }
+      return title;
+    },
+    getIconType: () => icon,
+    type: ACTION_AD,
+    grouping,
+    isCompatible: async ({ embeddable }: ActionContext) => {
+      const paramsType = embeddable.vis?.params?.type;
+      const seriesParams = embeddable.vis?.params?.seriesParams || [];
+      const series = embeddable.vis?.params?.series || [];
+      const isLineGraph =
+        seriesParams.find((item) => item.type === 'line') ||
+        series.find((item) => item.chart_type === 'line');
+      const isValidVis = isLineGraph && paramsType !== 'table';
+      return Boolean(
+        embeddable.parent && isDashboard(embeddable.parent) && isValidVis
+      );
+    },
+    execute: async ({ embeddable }: ActionContext) => {
+      if (!isReferenceOrValueEmbeddable(embeddable)) {
+        throw new IncompatibleActionError();
+      }
+
+      onClick({ embeddable });
+    },
+  });

public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import './styles.scss';
+import { get } from 'lodash';
+import AddAnomalyDetector from '../CreateAnomalyDetector';
+
+const AnywhereParentFlyout = ({ startingFlyout, ...props }) => {
+  const { embeddable } = props;
+  const indices: { label: string }[] = [
+    { label: get(embeddable, 'vis.data.indexPattern.title', '') },
+  ];
+  const [mode, setMode] = useState(startingFlyout);
+  const [selectedDetectorId, setSelectedDetectorId] = useState();
+
+  const Flyout = {
+    create: AddAnomalyDetector,
+  }[mode];
+
+  return (
+    <Flyout
+      {...{
+        ...props,
+        setMode,
+        mode,
+        indices,
+        selectedDetectorId,
+        setSelectedDetectorId,
+      }}
+    />
+  );
+};
+
+export default AnywhereParentFlyout;

public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import AnywhereParentFlyout from './AnywhereParentFlyout';
+
+export default AnywhereParentFlyout;

public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/styles.scss

@@ -0,0 +1,7 @@
+.context-menu {
+  &__flyout {
+    &.euiFlyout--medium {
+      width: 740px;
+    }
+  }
+}

public/plugin.tsx

@@ -0,0 +1,72 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import {
+  AppMountParameters,
+  CoreSetup,
+  Plugin,
+  PluginInitializerContext,
+} from '../../../src/core/public';
+import { CONTEXT_MENU_TRIGGER } from '../../../src/plugins/embeddable/public';
+import { ACTION_AD } from './action/ad_dashboard_action';
+import { PLUGIN_NAME } from './utils/constants';
+import { getActions } from './utils/contextMenu/getActions';
+import { setSavedFeatureAnywhereLoader } from './services';
+import { overlayAnomaliesFunction } from './expressions/overlay_anomalies';
+import { setClient } from './services';
+
+declare module '../../../src/plugins/ui_actions/public' {
+  export interface ActionContextMapping {
+    [ACTION_AD]: {};
+  }
+}
+
+export class AnomalyDetectionOpenSearchDashboardsPlugin implements Plugin {
+  public setup(core: CoreSetup, plugins) {
+    core.application.register({
+      id: PLUGIN_NAME,
+      title: 'Anomaly Detection',
+      category: {
+        id: 'opensearch',
+        label: 'OpenSearch Plugins',
+        order: 2000,
+      },
+      order: 5000,
+      mount: async (params: AppMountParameters) => {
+        const { renderApp } = await import('./anomaly_detection_app');
+        const [coreStart] = await core.getStartServices();
+        return renderApp(coreStart, params);
+      },
+    });
+
+    // Create context menu actions. Pass core, to access service for flyouts.
+    const actions = getActions({ core });
+
+    // Add  actions to uiActions
+    actions.forEach((action) => {
+      plugins.uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, action);
+    });
+
+    // Set the HTTP client so it can be pulled into expression fns to make
+    // direct server-side calls
+    setClient(core.http);
+
+    // registers the expression function used to render anomalies on an Augmented Visualization
+    plugins.expressions.registerFunction(overlayAnomaliesFunction);
+    return {};
+  }
+
+  public start(core: CoreStart, plugins) {
+    setSavedFeatureAnywhereLoader(plugins.visAugmenter.savedAugmentVisLoader);
+    return {};
+  }
+  public stop() {}
+}

public/utils/constants.ts

@@ -53,6 +53,8 @@ export const ANOMALY_RESULT_INDEX = '.opendistro-anomaly-results';
 
 export const BASE_DOCS_LINK = 'https://opensearch.org/docs/monitoring-plugins';
 
+export const AD_DOCS_LINK = 'https://opensearch.org/docs/latest/monitoring-plugins/anomaly-detection/index/';
+
 export const MAX_DETECTORS = 1000;
 
 export const MAX_ANOMALIES = 10000;

public/utils/contextMenu/getActions.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { toMountPoint } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+import { Action } from '../../../../../src/plugins/ui_actions/public';
+import { createADAction } from '../../action/ad_dashboard_action';
+import AnywhereParentFlyout from '../../components/FeatureAnywhereContextMenu/AnywhereParentFlyout';
+import { Provider } from 'react-redux';
+import { CoreServicesContext } from '../../../public/components/CoreServices/CoreServices';
+import configureStore from '../../redux/configureStore';
+import DocumentationTitle from '../../../public/components/FeatureAnywhereContextMenu/DocumentationTitle/containers/DocumentationTitle';
+import { AD_DOCS_LINK } from '../constants';
+
+// This is used to create all actions in the same context menu
+const grouping: Action['grouping'] = [
+  {
+    id: 'ad-dashboard-context-menu',
+    getDisplayName: () => 'Anomaly Detector',
+    getIconType: () => 'apmTrace',
+  },
+];
+
+export const getActions = ({ core, plugins }) => {
+  const getOnClick =
+    (startingFlyout) =>
+    async ({ embeddable }) => {
+      const services = await core.getStartServices();
+      const openFlyout = services[0].overlays.openFlyout;
+      const http = services[0].http;
+      const store = configureStore(http);
+      const overlay = openFlyout(
+        toMountPoint(
+          <Provider store={store}>
+            <CoreServicesContext.Provider value={services}>
+              <AnywhereParentFlyout
+                {...{
+                  startingFlyout,
+                  embeddable,
+                  plugins,
+                  closeFlyout: () => overlay.close(),
+                  core,
+                  services,
+                }}
+              />
+            </CoreServicesContext.Provider>
+          </Provider>
+        ),
+        { size: 'm', className: 'context-menu__flyout' }
+      );
+    };
+
+  return [
+    {
+      grouping,
+      id: 'createAnomalyDetector',
+      title: i18n.translate(
+        'dashboard.actions.adMenuItem.createAnomalyDetector.displayName',
+        {
+          defaultMessage: 'Create anomaly detector',
+        }
+      ),
+      icon: 'plusInCircle' as EuiIconType,
+      order: 100,
+      onClick: getOnClick('create'),
+    },
+    {
+      grouping,
+      id: 'associatedAnomalyDetector',
+      title: i18n.translate(
+        'dashboard.actions.adMenuItem.associatedAnomalyDetector.displayName',
+        {
+          defaultMessage: 'Associated anomaly detector',
+        }
+      ),
+      icon: 'gear' as EuiIconType,
+      order: 99,
+      onClick: getOnClick('associated'),
+    },
+    {
+      id: 'documentationAnomalyDetector',
+      title: <DocumentationTitle />,
+      icon: 'documentation' as EuiIconType,
+      order: 98,
+      onExecute: () => {
+        window.open(
+          AD_DOCS_LINK,
+          '_blank'
+        );
+      },
+    },
+  ].map((options) => createADAction({ ...options, grouping }));
+};