diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/expression.test.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/expression.test.tsx index 60a00371e5ade..54d3b783d22f6 100644 --- a/x-pack/plugins/infra/public/alerting/inventory/components/expression.test.tsx +++ b/x-pack/plugins/infra/public/alerting/inventory/components/expression.test.tsx @@ -12,7 +12,7 @@ import { AlertsContextValue } from '../../../../../triggers_actions_ui/public/ap // 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 { Expressions, AlertContextMeta, ExpressionRow, defaultExpression } 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'; @@ -105,6 +105,7 @@ describe('Expression', () => { threshold: [], timeSize: 1, timeUnit: 'm', + customMetric: defaultExpression.customMetric, }, ]); }); @@ -155,6 +156,7 @@ describe('ExpressionRow', () => { alertsContextMetadata={{ customMetrics: [], }} + fields={[{ name: 'some.system.field', type: 'bzzz' }]} /> ); diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/expression.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/expression.tsx index f47f30c280b2a..7610e0f6bc574 100644 --- a/x-pack/plugins/infra/public/alerting/inventory/components/expression.tsx +++ b/x-pack/plugins/infra/public/alerting/inventory/components/expression.tsx @@ -4,10 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import { set } from '@elastic/safer-lodash-set'; -import { debounce, pick, uniqBy, isEqual } from 'lodash'; +import { debounce, pick } from 'lodash'; import { Unit } from '@elastic/datemath'; import React, { useCallback, useMemo, useEffect, useState, ChangeEvent } from 'react'; +import { IFieldType } from 'src/plugins/data/public'; import { EuiFlexGroup, EuiFlexItem, @@ -23,7 +23,6 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { getCustomMetricLabel } from '../../../../common/formatters/get_custom_metric_label'; import { toMetricOpt } from '../../../../common/snapshot_metric_i18n'; import { AlertPreview } from '../../common'; import { METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID } from '../../../../common/alerting/metrics'; @@ -95,13 +94,18 @@ interface Props { setAlertProperty(key: string, value: any): void; } -const defaultExpression = { +export const defaultExpression = { metric: 'cpu' as SnapshotMetricType, comparator: Comparator.GT, threshold: [], timeSize: 1, timeUnit: 'm', - customMetric: undefined, + customMetric: { + type: 'custom', + id: 'alert-custom-metric', + field: '', + aggregation: 'avg', + }, } as InventoryMetricConditions; export const Expressions: React.FC = (props) => { @@ -226,7 +230,7 @@ export const Expressions: React.FC = (props) => { metric: md.options.metric!.type, customMetric: SnapshotCustomMetricInputRT.is(md.options.metric) ? md.options.metric - : undefined, + : defaultExpression.customMetric, } as InventoryMetricConditions, ]); } else { @@ -306,6 +310,7 @@ export const Expressions: React.FC = (props) => { errors={errors[idx] || emptyError} expression={e || {}} alertsContextMetadata={alertsContext.metadata} + fields={derivedIndexPattern.fields} /> ); })} @@ -415,6 +420,7 @@ interface ExpressionRowProps { remove(id: number): void; setAlertParams(id: number, params: Partial): void; alertsContextMetadata: AlertsContextValue['metadata']; + fields: IFieldType[]; } const StyledExpressionRow = euiStyled(EuiFlexGroup)` @@ -428,48 +434,25 @@ const StyledExpression = euiStyled.div` `; export const ExpressionRow: React.FC = (props) => { - const { - setAlertParams, - expression, - errors, - expressionId, - remove, - canDelete, - alertsContextMetadata, - } = props; + const { setAlertParams, expression, errors, expressionId, remove, canDelete, fields } = props; const { metric, comparator = Comparator.GT, threshold = [], customMetric } = expression; - const [customMetrics, updateCustomMetrics] = useState([]); - - // Create and uniquify a list of custom metrics including: - // - The alert metadata context (which only gives us custom metrics on the inventory page) - // - The custom metric stored in the expression (necessary when editing this alert without having - // access to the metadata context) - // - Whatever custom metrics were previously stored in this list (to preserve the custom metric in the dropdown - // if the user edits the alert and switches away from the custom metric) - useEffect(() => { - const ctxCustomMetrics = alertsContextMetadata?.customMetrics ?? []; - const expressionCustomMetrics = customMetric ? [customMetric] : []; - const newCustomMetrics = uniqBy( - [...customMetrics, ...ctxCustomMetrics, ...expressionCustomMetrics], - (cm: SnapshotCustomMetricInput) => cm.id - ); - if (!isEqual(customMetrics, newCustomMetrics)) updateCustomMetrics(newCustomMetrics); - }, [alertsContextMetadata, customMetric, customMetrics, updateCustomMetrics]); const updateMetric = useCallback( (m?: SnapshotMetricType | string) => { - const newMetric = SnapshotMetricTypeRT.is(m) ? m : 'custom'; + const newMetric = SnapshotMetricTypeRT.is(m) ? m : Boolean(m) ? 'custom' : undefined; const newAlertParams = { ...expression, metric: newMetric }; - if (newMetric === 'custom' && customMetrics) { - set( - newAlertParams, - 'customMetric', - customMetrics.find((cm) => cm.id === m) - ); - } setAlertParams(expressionId, newAlertParams); }, - [expressionId, expression, setAlertParams, customMetrics] + [expressionId, expression, setAlertParams] + ); + + const updateCustomMetric = useCallback( + (cm?: SnapshotCustomMetricInput) => { + if (SnapshotCustomMetricInputRT.is(cm)) { + setAlertParams(expressionId, { ...expression, customMetric: cm }); + } + }, + [expressionId, expression, setAlertParams] ); const updateComparator = useCallback( @@ -515,17 +498,8 @@ export const ExpressionRow: React.FC = (props) => { myMetrics = containerMetricTypes; break; } - const baseMetricOpts = myMetrics.map(toMetricOpt); - const customMetricOpts = customMetrics - ? customMetrics.map((m, i) => ({ - text: getCustomMetricLabel(m), - value: m.id, - })) - : []; - return [...baseMetricOpts, ...customMetricOpts]; - }, [props.nodeType, customMetrics]); - - const selectedMetricValue = metric === 'custom' && customMetric ? customMetric.id : metric!; + return myMetrics.map(toMetricOpt); + }, [props.nodeType]); return ( <> @@ -535,8 +509,8 @@ export const ExpressionRow: React.FC = (props) => { v?.value === selectedMetricValue)?.text || '', + value: metric!, + text: ofFields.find((v) => v?.value === metric)?.text || '', }} metrics={ ofFields.filter((m) => m !== undefined && m.value !== undefined) as Array<{ @@ -545,7 +519,10 @@ export const ExpressionRow: React.FC = (props) => { }> } onChange={updateMetric} + onChangeCustom={updateCustomMetric} errors={errors} + customMetric={customMetric} + fields={fields} /> diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/metric.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/metric.tsx index 2e5ccbe1a4276..f6f6091cbed95 100644 --- a/x-pack/plugins/infra/public/alerting/inventory/components/metric.tsx +++ b/x-pack/plugins/infra/public/alerting/inventory/components/metric.tsx @@ -4,9 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState } from 'react'; +import React, { useState, useCallback, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import { debounce } from 'lodash'; import { EuiExpression, EuiPopover, @@ -14,16 +15,33 @@ import { EuiFlexItem, EuiFormRow, EuiComboBox, + EuiButtonGroup, + EuiSpacer, + EuiSelect, + EuiText, + EuiFieldText, } from '@elastic/eui'; +import { IFieldType } from 'src/plugins/data/public'; import { EuiPopoverTitle, EuiButtonIcon } from '@elastic/eui'; +import { getCustomMetricLabel } from '../../../../common/formatters/get_custom_metric_label'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { IErrorObject } from '../../../../../triggers_actions_ui/public/types'; +import { + SnapshotCustomMetricInput, + SnapshotCustomMetricInputRT, + SnapshotCustomAggregation, + SNAPSHOT_CUSTOM_AGGREGATIONS, + SnapshotCustomAggregationRT, +} from '../../../../common/http_api/snapshot_api'; interface Props { metric?: { value: string; text: string }; metrics: Array<{ value: string; text: string }>; errors: IErrorObject; onChange: (metric?: string) => void; + onChangeCustom: (customMetric?: SnapshotCustomMetricInput) => void; + customMetric?: SnapshotCustomMetricInput; + fields: IFieldType[]; popupPosition?: | 'upCenter' | 'upLeft' @@ -39,8 +57,40 @@ interface Props { | 'rightDown'; } -export const MetricExpression = ({ metric, metrics, errors, onChange, popupPosition }: Props) => { - const [aggFieldPopoverOpen, setAggFieldPopoverOpen] = useState(false); +const AGGREGATION_LABELS = { + ['avg']: i18n.translate('xpack.infra.waffle.customMetrics.aggregationLables.avg', { + defaultMessage: 'Average', + }), + ['max']: i18n.translate('xpack.infra.waffle.customMetrics.aggregationLables.max', { + defaultMessage: 'Max', + }), + ['min']: i18n.translate('xpack.infra.waffle.customMetrics.aggregationLables.min', { + defaultMessage: 'Min', + }), + ['rate']: i18n.translate('xpack.infra.waffle.customMetrics.aggregationLables.rate', { + defaultMessage: 'Rate', + }), +}; +const aggregationOptions = SNAPSHOT_CUSTOM_AGGREGATIONS.map((k) => ({ + text: AGGREGATION_LABELS[k as SnapshotCustomAggregation], + value: k, +})); + +export const MetricExpression = ({ + metric, + metrics, + customMetric, + fields, + errors, + onChange, + onChangeCustom, + popupPosition, +}: Props) => { + const [popoverOpen, setPopoverOpen] = useState(false); + const [customMetricTabOpen, setCustomMetricTabOpen] = useState(metric?.value === 'custom'); + const [selectedOption, setSelectedOption] = useState(metric?.value); + const [fieldDisplayedCustomLabel, setFieldDisplayedCustomLabel] = useState(customMetric?.label); + const firstFieldOption = { text: i18n.translate('xpack.infra.metrics.alertFlyout.expression.metric.selectFieldLabel', { defaultMessage: 'Select a metric', @@ -48,13 +98,84 @@ export const MetricExpression = ({ metric, metrics, errors, onChange, popupPosit value: '', }; + const fieldOptions = useMemo( + () => + fields + .filter((f) => f.aggregatable && f.type === 'number' && !(customMetric?.field === f.name)) + .map((f) => ({ label: f.name })), + [fields, customMetric?.field] + ); + + const expressionDisplayValue = useMemo( + () => { + return customMetricTabOpen + ? customMetric?.field && getCustomMetricLabel(customMetric) + : metric?.text || firstFieldOption.text; + }, + // The ?s are confusing eslint here, so... + // eslint-disable-next-line react-hooks/exhaustive-deps + [customMetricTabOpen, metric, customMetric, firstFieldOption] + ); + + const onChangeTab = useCallback( + (id) => { + if (id === 'metric-popover-custom') { + setCustomMetricTabOpen(true); + onChange('custom'); + } else { + setCustomMetricTabOpen(false); + onChange(selectedOption); + } + }, + [setCustomMetricTabOpen, onChange, selectedOption] + ); + + const onAggregationChange = useCallback( + (e) => { + const value = e.target.value; + const aggValue: SnapshotCustomAggregation = SnapshotCustomAggregationRT.is(value) + ? value + : 'avg'; + const newCustomMetric = { + ...customMetric, + aggregation: aggValue, + }; + if (SnapshotCustomMetricInputRT.is(newCustomMetric)) onChangeCustom(newCustomMetric); + }, + [customMetric, onChangeCustom] + ); + + const onFieldChange = useCallback( + (selectedOptions: Array<{ label: string }>) => { + const newCustomMetric = { + ...customMetric, + field: selectedOptions[0].label, + }; + if (SnapshotCustomMetricInputRT.is(newCustomMetric)) onChangeCustom(newCustomMetric); + }, + [customMetric, onChangeCustom] + ); + + const debouncedOnChangeCustom = debounce(onChangeCustom, 500); + const onLabelChange = useCallback( + (e) => { + setFieldDisplayedCustomLabel(e.target.value); + const newCustomMetric = { + ...customMetric, + label: e.target.value, + }; + if (SnapshotCustomMetricInputRT.is(newCustomMetric)) debouncedOnChangeCustom(newCustomMetric); + }, + [customMetric, debouncedOnChangeCustom] + ); + const availablefieldsOptions = metrics.map((m) => { return { label: m.text, value: m.value }; }, []); return ( 0))} + value={expressionDisplayValue} + isActive={Boolean(popoverOpen || (errors.metric && errors.metric.length > 0))} onClick={() => { - setAggFieldPopoverOpen(true); + setPopoverOpen(true); }} color={errors.metric?.length ? 'danger' : 'secondary'} /> } - isOpen={aggFieldPopoverOpen} + isOpen={popoverOpen} closePopover={() => { - setAggFieldPopoverOpen(false); + setPopoverOpen(false); }} withTitle anchorPosition={popupPosition ?? 'downRight'} zIndex={8000} > -
- setAggFieldPopoverOpen(false)}> +
+ setPopoverOpen(false)}> - - - 0} error={errors.metric}> - + + {customMetricTabOpen ? ( + <> + + + + + + + + + {i18n.translate('xpack.infra.waffle.customMetrics.of', { + defaultMessage: 'of', + })} + + + + + 0} + /> + + + + of ".', + })} + > + 0} - placeholder={firstFieldOption.text} - options={availablefieldsOptions} - noSuggestions={!availablefieldsOptions.length} - selectedOptions={ - metric ? availablefieldsOptions.filter((a) => a.value === metric.value) : [] - } - renderOption={(o: any) => o.label} - onChange={(selectedOptions) => { - if (selectedOptions.length > 0) { - onChange(selectedOptions[0].value); - setAggFieldPopoverOpen(false); - } else { - onChange(); - } - }} + onChange={onLabelChange} /> - - + + ) : ( + + + + 0} + placeholder={firstFieldOption.text} + options={availablefieldsOptions} + noSuggestions={!availablefieldsOptions.length} + selectedOptions={ + metric ? availablefieldsOptions.filter((a) => a.value === metric.value) : [] + } + renderOption={(o: any) => o.label} + onChange={(selectedOptions) => { + if (selectedOptions.length > 0) { + onChange(selectedOptions[0].value); + setSelectedOption(selectedOptions[0].value); + } else { + onChange(); + } + }} + /> + + + + )}
); diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/validation.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/validation.tsx index 47ecd3c527fad..4b522d7d97730 100644 --- a/x-pack/plugins/infra/public/alerting/inventory/components/validation.tsx +++ b/x-pack/plugins/infra/public/alerting/inventory/components/validation.tsx @@ -6,14 +6,14 @@ import { i18n } from '@kbn/i18n'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { MetricExpressionParams } from '../../../../server/lib/alerting/metric_threshold/types'; +import { InventoryMetricConditions } from '../../../../server/lib/alerting/inventory_metric_threshold/types'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { ValidationResult } from '../../../../../triggers_actions_ui/public/types'; export function validateMetricThreshold({ criteria, }: { - criteria: MetricExpressionParams[]; + criteria: InventoryMetricConditions[]; }): ValidationResult { const validationResult = { errors: {} }; const errors: { @@ -81,14 +81,20 @@ export function validateMetricThreshold({ }) ); } - - if (!c.metric && c.aggType !== 'count') { + if (!c.metric) { errors[id].metric.push( i18n.translate('xpack.infra.metrics.alertFlyout.error.metricRequired', { defaultMessage: 'Metric is required.', }) ); } + if (c.metric === 'custom' && !c.customMetric?.field) { + errors[id].metric.push( + i18n.translate('xpack.infra.metrics.alertFlyout.error.customMetricFieldRequired', { + defaultMessage: 'Field is required.', + }) + ); + } }); return validationResult;