[Metrics UI] Prefill alerts from the global dropdown

x-pack/plugins/infra/public/alerting/inventory/hooks/use_inventory_alert_prefill.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { useState } from 'react';
+import { SnapshotMetricInput } from '../../../../common/http_api/snapshot_api';
+import { InventoryItemType } from '../../../../common/inventory_models/types';
+
+export const useInventoryAlertPrefill = () => {
+  const [nodeType, setNodeType] = useState<InventoryItemType>('host');
+  const [filterQuery, setFilterQuery] = useState<string | undefined>();
+  const [metric, setMetric] = useState<SnapshotMetricInput>({ type: 'cpu' });
+
+  return {
+    nodeType,
+    filterQuery,
+    metric,
+    setNodeType,
+    setFilterQuery,
+    setMetric,
+  };
+};

x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx

@@ -7,14 +7,18 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { EuiPopover, EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { AlertFlyout } from './alert_flyout';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { useAlertPrefillContext } from '../../use_alert_prefill';
+import { AlertFlyout } from './alert_flyout';
 
 export const MetricsAlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
   const kibana = useKibana();
 
+  const { metricThresholdPrefill } = useAlertPrefillContext();
+  const { groupBy, filterQuery, metrics } = metricThresholdPrefill;
+
   const closePopover = useCallback(() => {
     setPopoverOpen(false);
   }, [setPopoverOpen]);
@@ -57,7 +61,11 @@ export const MetricsAlertDropdown = () => {
       >
         <EuiContextMenuPanel items={menuItems} />
       </EuiPopover>
-      <AlertFlyout setVisible={setFlyoutVisible} visible={flyoutVisible} />
+      <AlertFlyout
+        setVisible={setFlyoutVisible}
+        visible={flyoutVisible}
+        options={{ groupBy, filterQuery, metrics }}
+      />
     </>
   );
 };

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx

@@ -49,22 +49,15 @@ import { useSourceViaHttp } from '../../../containers/source/use_source_via_http
 import { convertKueryToElasticSearchQuery } from '../../../utils/kuery';
 
 import { ExpressionRow } from './expression_row';
-import { AlertContextMeta, TimeUnit, MetricExpression } from '../types';
+import { AlertContextMeta, TimeUnit, MetricExpression, AlertParams } from '../types';
 import { ExpressionChart } from './expression_chart';
 import { validateMetricThreshold } from './validation';
 
 const FILTER_TYPING_DEBOUNCE_MS = 500;
 
 interface Props {
   errors: IErrorObject[];
-  alertParams: {
-    criteria: MetricExpression[];
-    groupBy?: string;
-    filterQuery?: string;
-    sourceId?: string;
-    filterQueryText?: string;
-    alertOnNoData?: boolean;
-  };
+  alertParams: AlertParams;
   alertsContext: AlertsContextValue<AlertContextMeta>;
   alertInterval: string;
   setAlertParams(key: string, value: any): void;
@@ -260,6 +253,13 @@ export const Expressions: React.FC<Props> = (props) => {
     }
   }, [alertsContext.metadata, derivedIndexPattern, setAlertParams]);
 
+  const preFillAlertGroupBy = useCallback(() => {
+    const md = alertsContext.metadata;
+    if (md && md.currentOptions?.groupBy && !md.series) {
+      setAlertParams('groupBy', md.currentOptions.groupBy);
+    }
+  }, [alertsContext.metadata, setAlertParams]);
+
   const onSelectPreviewLookbackInterval = useCallback((e) => {
     setPreviewLookbackInterval(e.target.value);
     setPreviewResult(null);
@@ -299,6 +299,10 @@ export const Expressions: React.FC<Props> = (props) => {
       preFillAlertFilter();
     }
 
+    if (!alertParams.groupBy) {
+      preFillAlertGroupBy();
+    }
+
     if (!alertParams.sourceId) {
       setAlertParams('sourceId', source?.id || 'default');
     }

x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metric_threshold_alert_prefill.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { useState } from 'react';
+import { MetricsExplorerMetric } from '../../../../common/http_api/metrics_explorer';
+
+export const useMetricThresholdAlertPrefill = () => {
+  const [groupBy, setGroupBy] = useState<string | string[] | undefined>();
+  const [filterQuery, setFilterQuery] = useState<string | undefined>();
+  const [metrics, setMetrics] = useState<MetricsExplorerMetric[]>([]);
+
+  return {
+    groupBy,
+    filterQuery,
+    metrics,
+    setGroupBy,
+    setFilterQuery,
+    setMetrics,
+  };
+};

x-pack/plugins/infra/public/alerting/metric_threshold/types.ts

@@ -51,3 +51,12 @@ export interface ExpressionChartData {
   id: string;
   series: ExpressionChartSeries;
 }
+
+export interface AlertParams {
+  criteria: MetricExpression[];
+  groupBy?: string;
+  filterQuery?: string;
+  sourceId?: string;
+  filterQueryText?: string;
+  alertOnNoData?: boolean;
+}

x-pack/plugins/infra/public/alerting/use_alert_prefill.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 createContainer from 'constate';
+import { useMetricThresholdAlertPrefill } from './metric_threshold/hooks/use_metric_threshold_alert_prefill';
+import { useInventoryAlertPrefill } from './inventory/hooks/use_inventory_alert_prefill';
+
+const useAlertPrefill = () => {
+  const metricThresholdPrefill = useMetricThresholdAlertPrefill();
+  const inventoryPrefill = useInventoryAlertPrefill();
+
+  return { metricThresholdPrefill, inventoryPrefill };
+};
+
+export const [AlertPrefillProvider, useAlertPrefillContext] = createContainer(useAlertPrefill);

x-pack/plugins/infra/public/components/alerting/inventory/alert_dropdown.tsx

@@ -7,6 +7,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { EuiPopover, EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { useAlertPrefillContext } from '../../../alerting/use_alert_prefill';
 import { AlertFlyout } from './alert_flyout';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 
@@ -15,6 +16,9 @@ export const InventoryAlertDropdown = () => {
   const [flyoutVisible, setFlyoutVisible] = useState(false);
   const kibana = useKibana();
 
+  const { inventoryPrefill } = useAlertPrefillContext();
+  const { nodeType, metric, filterQuery } = inventoryPrefill;
+
   const closePopover = useCallback(() => {
     setPopoverOpen(false);
   }, [setPopoverOpen]);
@@ -57,7 +61,13 @@ export const InventoryAlertDropdown = () => {
       >
         <EuiContextMenuPanel items={menuItems} />
       </EuiPopover>
-      <AlertFlyout setVisible={setFlyoutVisible} visible={flyoutVisible} />
+      <AlertFlyout
+        setVisible={setFlyoutVisible}
+        visible={flyoutVisible}
+        nodeType={nodeType}
+        options={{ metric }}
+        filter={filterQuery}
+      />
     </>
   );
 };