[Metrics UI] Alerting for metrics explorer and inventory

x-pack/plugins/infra/kibana.json

@@ -11,7 +11,8 @@
     "data",
     "dataEnhanced",
     "metrics",
-    "alerting"
+    "alerting",
+    "triggers_actions_ui"
   ],
   "server": true,
   "ui": true,

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -15,7 +15,8 @@ import { CoreStart, AppMountParameters } from 'kibana/public';
 
 // TODO use theme provided from parentApp when kibana supports it
 import { EuiErrorBoundary } from '@elastic/eui';
-import { EuiThemeProvider } from '../../../observability/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { EuiThemeProvider } from '../../../observability/public/typings/eui_styled_components';
 import { InfraFrontendLibs } from '../lib/lib';
 import { createStore } from '../store';
 import { ApolloClientContext } from '../utils/apollo_context';
@@ -26,6 +27,8 @@ import {
   KibanaContextProvider,
 } from '../../../../../src/plugins/kibana_react/public';
 import { AppRouter } from '../routers';
+import { TriggersAndActionsUIPublicPluginSetup } from '../../../triggers_actions_ui/public';
+import { TriggersActionsProvider } from '../utils/triggers_actions_context';
 import '../index.scss';
 
 export const CONTAINER_CLASSNAME = 'infra-container-element';
@@ -35,7 +38,8 @@ export async function startApp(
   core: CoreStart,
   plugins: object,
   params: AppMountParameters,
-  Router: AppRouter
+  Router: AppRouter,
+  triggersActionsUI: TriggersAndActionsUIPublicPluginSetup
 ) {
   const { element, appBasePath } = params;
   const history = createBrowserHistory({ basename: appBasePath });
@@ -51,19 +55,21 @@ export async function startApp(
     return (
       <core.i18n.Context>
         <EuiErrorBoundary>
-          <ReduxStoreProvider store={store}>
-            <ReduxStateContextProvider>
-              <ApolloProvider client={libs.apolloClient}>
-                <ApolloClientContext.Provider value={libs.apolloClient}>
-                  <EuiThemeProvider darkMode={darkMode}>
-                    <HistoryContext.Provider value={history}>
-                      <Router history={history} />
-                    </HistoryContext.Provider>
-                  </EuiThemeProvider>
-                </ApolloClientContext.Provider>
-              </ApolloProvider>
-            </ReduxStateContextProvider>
-          </ReduxStoreProvider>
+          <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
+            <ReduxStoreProvider store={store}>
+              <ReduxStateContextProvider>
+                <ApolloProvider client={libs.apolloClient}>
+                  <ApolloClientContext.Provider value={libs.apolloClient}>
+                    <EuiThemeProvider darkMode={darkMode}>
+                      <HistoryContext.Provider value={history}>
+                        <Router history={history} />
+                      </HistoryContext.Provider>
+                    </EuiThemeProvider>
+                  </ApolloClientContext.Provider>
+                </ApolloProvider>
+              </ReduxStateContextProvider>
+            </ReduxStoreProvider>
+          </TriggersActionsProvider>
         </EuiErrorBoundary>
       </core.i18n.Context>
     );

x-pack/plugins/infra/public/components/alerting/metrics/alert_flyout.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useContext } from 'react';
+import { IIndexPattern } from 'src/plugins/data/public';
+import { AlertsContextProvider, AlertAdd } from '../../../../../triggers_actions_ui/public';
+import { TriggerActionsContext } from '../../../utils/triggers_actions_context';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../../../../server/lib/alerting/metric_threshold/types';
+import { SourceConfiguration } from '../../../utils/source_configuration';
+import { MetricsExplorerOptions } from '../../../containers/metrics_explorer/use_metrics_explorer_options';
+import { MetricsExplorerSeries } from '../../../../common/http_api/metrics_explorer';
+
+interface Props {
+  visible?: boolean;
+  options: MetricsExplorerOptions;
+  derivedIndexPattern: IIndexPattern;
+  series: MetricsExplorerSeries;
+  source?: SourceConfiguration;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const AlertFlyout = (props: Props) => {
+  const { triggersActionsUI } = useContext(TriggerActionsContext);
+  const { services } = useKibana();
+
+  return (
+    <>
+      {triggersActionsUI && (
+        <AlertsContextProvider
+          value={{
+            metadata: {
+              source: props.source,
+              derivedIndexPattern: props.derivedIndexPattern,
+              currentOptions: props.options,
+              series: props.series,
+            },
+            http: services.http,
+            actionTypeRegistry: triggersActionsUI.actionTypeRegistry,
+            alertTypeRegistry: triggersActionsUI.alertTypeRegistry,
+          }}
+        >
+          <AlertAdd
+            addFlyoutVisible={props.visible!}
+            setAddFlyoutVisibility={props.setVisible}
+            alertTypeId={METRIC_THRESHOLD_ALERT_TYPE_ID}
+            canChangeTrigger={false}
+            consumer={'metrics'}
+          />
+        </AlertsContextProvider>
+      )}
+    </>
+  );
+};