[7.x] [Metrics UI] Get custom metrics working in inventory alerts with limited UI (#75073)

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/get_custom_metric_label.ts → x-pack/plugins/infra/common/formatters/get_custom_metric_label.ts

@@ -5,7 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { SnapshotCustomMetricInput } from '../../../../../../../common/http_api/snapshot_api';
+import { SnapshotCustomMetricInput } from '../http_api/snapshot_api';
 
 export const getCustomMetricLabel = (metric: SnapshotCustomMetricInput) => {
   const METRIC_LABELS = {

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

@@ -12,6 +12,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import { METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID } from '../../../../server/lib/alerting/inventory_metric_threshold/types';
 import { InfraWaffleMapOptions } from '../../../lib/lib';
 import { InventoryItemType } from '../../../../common/inventory_models/types';
+import { useAlertPrefillContext } from '../../../alerting/use_alert_prefill';
 
 interface Props {
   visible?: boolean;
@@ -21,16 +22,24 @@ interface Props {
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export const AlertFlyout = (props: Props) => {
+export const AlertFlyout = ({ options, nodeType, filter, visible, setVisible }: Props) => {
   const { triggersActionsUI } = useContext(TriggerActionsContext);
   const { services } = useKibana();
 
+  const { inventoryPrefill } = useAlertPrefillContext();
+  const { customMetrics } = inventoryPrefill;
+
   return (
     <>
       {triggersActionsUI && (
         <AlertsContextProvider
           value={{
-            metadata: { options: props.options, nodeType: props.nodeType, filter: props.filter },
+            metadata: {
+              options,
+              nodeType,
+              filter,
+              customMetrics,
+            },
             toastNotifications: services.notifications?.toasts,
             http: services.http,
             capabilities: services.application.capabilities,
@@ -40,8 +49,8 @@ export const AlertFlyout = (props: Props) => {
           }}
         >
           <AlertAdd
-            addFlyoutVisible={props.visible!}
-            setAddFlyoutVisibility={props.setVisible}
+            addFlyoutVisible={visible!}
+            setAddFlyoutVisibility={setVisible}
             alertTypeId={METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID}
             canChangeTrigger={false}
             consumer={'infrastructure'}

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

@@ -0,0 +1,186 @@
+/*
+ * 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';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { InventoryMetricConditions } from '../../../../server/lib/alerting/inventory_metric_threshold/types';
+import React from 'react';
+import { Expressions, AlertContextMeta, ExpressionRow } 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';
+import { SnapshotCustomMetricInput } from '../../../../common/http_api/snapshot_api';
+
+jest.mock('../../../containers/source/use_source_via_http', () => ({
+  useSourceViaHttp: () => ({
+    source: { id: 'default' },
+    createDerivedIndexPattern: () => ({ fields: [], title: 'metricbeat-*' }),
+  }),
+}));
+
+const exampleCustomMetric = {
+  id: 'this-is-an-id',
+  field: 'some.system.field',
+  aggregation: 'rate',
+  type: 'custom',
+} as SnapshotCustomMetricInput;
+
+describe('Expression', () => {
+  async function setup(currentOptions: AlertContextMeta) {
+    const alertParams = {
+      criteria: [],
+      nodeType: 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 as any}
+        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 = {
+      filter: 'foo',
+      nodeType: 'pod',
+      customMetrics: [],
+      options: { metric: { type: 'memory' } },
+    };
+    const { alertParams } = await setup(currentOptions as AlertContextMeta);
+    expect(alertParams.nodeType).toBe('pod');
+    expect(alertParams.filterQueryText).toBe('foo');
+    expect(alertParams.criteria).toEqual([
+      {
+        metric: 'memory',
+        comparator: Comparator.GT,
+        threshold: [],
+        timeSize: 1,
+        timeUnit: 'm',
+      },
+    ]);
+  });
+  describe('using custom metrics', () => {
+    it('should prefill the alert using the context metadata', async () => {
+      const currentOptions = {
+        filter: '',
+        nodeType: 'tx',
+        customMetrics: [exampleCustomMetric],
+        options: { metric: exampleCustomMetric },
+      };
+      const { alertParams, update } = await setup(currentOptions as AlertContextMeta);
+      await update();
+      expect(alertParams.nodeType).toBe('tx');
+      expect(alertParams.filterQueryText).toBe('');
+      expect(alertParams.criteria).toEqual([
+        {
+          metric: 'custom',
+          comparator: Comparator.GT,
+          threshold: [],
+          timeSize: 1,
+          timeUnit: 'm',
+          customMetric: exampleCustomMetric,
+        },
+      ]);
+    });
+  });
+});
+
+describe('ExpressionRow', () => {
+  async function setup(expression: InventoryMetricConditions) {
+    const wrapper = mountWithIntl(
+      <ExpressionRow
+        nodeType="host"
+        canDelete={false}
+        remove={() => {}}
+        addExpression={() => {}}
+        key={1}
+        expressionId={1}
+        setAlertParams={() => {}}
+        errors={{
+          aggField: [],
+          timeSizeUnit: [],
+          timeWindowSize: [],
+          metric: [],
+        }}
+        expression={expression}
+        alertsContextMetadata={{
+          customMetrics: [],
+        }}
+      />
+    );
+
+    const update = async () =>
+      await act(async () => {
+        await nextTick();
+        wrapper.update();
+      });
+
+    await update();
+
+    return { wrapper, update };
+  }
+  const expression = {
+    metric: 'custom',
+    comparator: Comparator.GT,
+    threshold: [],
+    timeSize: 1,
+    timeUnit: 'm',
+    customMetric: exampleCustomMetric,
+  };
+
+  it('loads custom metrics passed in through the expression, even with an empty context', async () => {
+    const { wrapper } = await setup(expression as InventoryMetricConditions);
+    const [valueMatch] =
+      wrapper.html().match('<span class="euiExpression__value">Rate of some.system.field</span>') ??
+      [];
+    expect(valueMatch).toBeTruthy();
+  });
+});