[7.x] [Metrics UI] Prefill alerts from the global dropdown (elastic#6…

…8967) (elastic#69981)

* [Metrics UI] Prefill alerts from the global dropdown (elastic#68967)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* Fix uncaught typecheck merge conflict

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/infra/public/alerting/inventory/components/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}
+ />
  </>
  );
 };

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.test.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers';
+import { actionTypeRegistryMock } from '../../../../../triggers_actions_ui/public/application/action_type_registry.mock';
+import { alertTypeRegistryMock } from '../../../../../triggers_actions_ui/public/application/alert_type_registry.mock';
+import { coreMock } from '../../../../../../../src/core/public/mocks';
+import { AlertsContextValue } from '../../../../../triggers_actions_ui/public/application/context/alerts_context';
+import { AlertContextMeta } from '../types';
+import { MetricsExplorerMetric } from '../../../../common/http_api/metrics_explorer';
+import React from 'react';
+import { Expressions } from './expression';
+import { act } from 'react-dom/test-utils';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { Comparator } from '../../../../server/lib/alerting/metric_threshold/types';
+
+jest.mock('../../../containers/source/use_source_via_http', () => ({
+ useSourceViaHttp: () => ({
+ source: { id: 'default' },
+ createDerivedIndexPattern: () => ({ fields: [], title: 'metricbeat-*' }),
+ }),
+}));
+
+describe('Expression', () => {
+ async function setup(currentOptions: {
+ metrics?: MetricsExplorerMetric[];
+ filterQuery?: string;
+ groupBy?: string;
+ }) {
+ const alertParams = {
+ criteria: [],
+ groupBy: undefined,
+ filterQueryText: '',
+ };
+
+ const mocks = coreMock.createSetup();
+ const startMocks = coreMock.createStart();
+ const [
+ {
+ application: { capabilities },
+ },
+ ] = await mocks.getStartServices();
+
+ const context: AlertsContextValue<AlertContextMeta> = {
+ http: mocks.http,
+ toastNotifications: mocks.notifications.toasts,
+ actionTypeRegistry: actionTypeRegistryMock.create() as any,
+ alertTypeRegistry: alertTypeRegistryMock.create() as any,
+ docLinks: startMocks.docLinks,
+ capabilities: {
+ ...capabilities,
+ actions: {
+ delete: true,
+ save: true,
+ show: true,
+ },
+ },
+ metadata: {
+ currentOptions,
+ },
+ };
+
+ const wrapper = mountWithIntl(
+ <Expressions
+ alertsContext={context}
+ alertInterval="1m"
+ alertParams={alertParams}
+ errors={[]}
+ setAlertParams={(key, value) => Reflect.set(alertParams, key, value)}
+ setAlertProperty={() => {}}
+ />
+ );
+
+ const update = async () =>
+ await act(async () => {
+ await nextTick();
+ wrapper.update();
+ });
+
+ await update();
+
+ return { wrapper, update, alertParams };
+ }
+
+ it('should prefill the alert using the context metadata', async () => {
+ const currentOptions = {
+ groupBy: 'host.hostname',
+ filterQuery: 'foo',
+ metrics: [
+ { aggregation: 'avg', field: 'system.load.1' },
+ { aggregation: 'cardinality', field: 'system.cpu.user.pct' },
+ ] as MetricsExplorerMetric[],
+ };
+ const { alertParams } = await setup(currentOptions);
+ expect(alertParams.groupBy).toBe('host.hostname');
+ expect(alertParams.filterQueryText).toBe('foo');
+ expect(alertParams.criteria).toEqual([
+ {
+ metric: 'system.load.1',
+ comparator: Comparator.GT,
+ threshold: [],
+ timeSize: 1,
+ timeUnit: 'm',
+ aggType: 'avg',
+ },
+ {
+ metric: 'system.cpu.user.pct',
+ comparator: Comparator.GT,
+ threshold: [],
+ timeSize: 1,
+ timeUnit: 'm',
+ aggType: 'cardinality',
+ },
+ ]);
+ });
+});

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { debounce, pick } from 'lodash';
+import { debounce, pick, omit } from 'lodash';
 import { Unit } from '@elastic/datemath';
 import * as rt from 'io-ts';
 import React, { ChangeEvent, useCallback, useMemo, useEffect, useState } from 'react';
@@ -52,22 +52,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;
@@ -81,6 +74,7 @@ const defaultExpression = {
  timeSize: 1,
  timeUnit: 'm',
 } as MetricExpression;
+export { defaultExpression };
 
 export const Expressions: React.FC<Props> = (props) => {
  const { setAlertParams, alertParams, errors, alertsContext, alertInterval } = props;
@@ -247,6 +241,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);
@@ -286,6 +287,10 @@ export const Expressions: React.FC<Props> = (props) => {
  preFillAlertFilter();
  }
 
+ if (!alertParams.groupBy) {
+ preFillAlertGroupBy();
+ }
+
  if (!alertParams.sourceId) {
  setAlertParams('sourceId', source?.id || 'default');
  }
@@ -465,7 +470,7 @@ export const Expressions: React.FC<Props> = (props) => {
  id="selectPreviewLookbackInterval"
  value={previewLookbackInterval}
  onChange={onSelectPreviewLookbackInterval}
- options={previewOptions}
+ options={previewDOMOptions}
  />
  </EuiFlexItem>
  <EuiFlexItem grow={false}>
@@ -588,6 +593,10 @@ export const Expressions: React.FC<Props> = (props) => {
  );
 };
 
+const previewDOMOptions: Array<{ text: string; value: string }> = previewOptions.map((o) =>
+ omit(o, 'shortText')
+);
+
 // required for dynamic import
 // eslint-disable-next-line import/no-default-export
 export default Expressions;

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

@@ -50,7 +50,7 @@ export function validateMetricThreshold({
  if (!c.aggType) {
  errors[id].aggField.push(
  i18n.translate('xpack.infra.metrics.alertFlyout.error.aggregationRequired', {
- defaultMessage: 'Aggreation is required.',
+ defaultMessage: 'Aggregation is required.',
  })
  );
  }

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

@@ -0,0 +1,34 @@
+/*
+ * 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 { isEqual } from 'lodash';
+import { useState } from 'react';
+import { MetricsExplorerMetric } from '../../../../common/http_api/metrics_explorer';
+
+interface MetricThresholdPrefillOptions {
+ groupBy: string | string[] | undefined;
+ filterQuery: string | undefined;
+ metrics: MetricsExplorerMetric[];
+}
+
+export const useMetricThresholdAlertPrefill = () => {
+ const [prefillOptionsState, setPrefillOptionsState] = useState<MetricThresholdPrefillOptions>({
+ groupBy: undefined,
+ filterQuery: undefined,
+ metrics: [],
+ });
+
+ const { groupBy, filterQuery, metrics } = prefillOptionsState;
+
+ return {
+ groupBy,
+ filterQuery,
+ metrics,
+ setPrefillOptions(newState: MetricThresholdPrefillOptions) {
+ if (!isEqual(newState, prefillOptionsState)) setPrefillOptionsState(newState);
+ },
+ };
+};

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/containers/with_kuery_autocompletion.tsx

@@ -59,7 +59,7 @@ class WithKueryAutocompletionComponent extends React.Component<
  ) => {
  const { indexPattern } = this.props;
  const language = 'kuery';
- const hasQuerySuggestions = this.props.kibana.services.data.autocomplete.hasQuerySuggestions(
+ const hasQuerySuggestions = this.props.kibana.services.data?.autocomplete.hasQuerySuggestions(
  language
  );