[Metrics UI] Add ability for user to set anomaly threshold (#90313) (#…

…90827) * add anomaly threshold configuration to settings * hide panel if not ml capable * send threshold value to query * update license * update api integration to expect anomalyThreshold to exist * add some tests to the anomaly queries * change type to number * api validate in source update and config for anamolyThreshold and tests Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Feb 9, 2021 · 277fe42 · 277fe42
1 parent fa8adf1
commit 277fe42
Show file tree

Hide file tree

Showing 29 changed files with 441 additions and 28 deletions.
diff --git a/x-pack/plugins/infra/common/http_api/infra_ml/results/metrics_hosts_anomalies.ts b/x-pack/plugins/infra/common/http_api/infra_ml/results/metrics_hosts_anomalies.ts
@@ -62,6 +62,7 @@ export const getMetricsHostsAnomaliesRequestPayloadRT = rt.type({
     rt.type({
       // the ID of the source configuration
       sourceId: rt.string,
+      anomalyThreshold: rt.number,
       // the time range to fetch the log entry anomalies from
       timeRange: timeRangeRT,
     }),

diff --git a/x-pack/plugins/infra/common/http_api/infra_ml/results/metrics_k8s_anomalies.ts b/x-pack/plugins/infra/common/http_api/infra_ml/results/metrics_k8s_anomalies.ts
@@ -62,6 +62,7 @@ export const getMetricsK8sAnomaliesRequestPayloadRT = rt.type({
     rt.type({
       // the ID of the source configuration
       sourceId: rt.string,
+      anomalyThreshold: rt.number,
       // the time range to fetch the log entry anomalies from
       timeRange: timeRangeRT,
     }),

diff --git a/x-pack/plugins/infra/common/http_api/source_api.ts b/x-pack/plugins/infra/common/http_api/source_api.ts
@@ -90,6 +90,7 @@ export const SavedSourceConfigurationRuntimeType = rt.partial({
   metricsExplorerDefaultView: rt.string,
   fields: SavedSourceConfigurationFieldsRuntimeType,
   logColumns: rt.array(SavedSourceConfigurationColumnRuntimeType),
+  anomalyThreshold: rt.number,
 });
 
 export interface InfraSavedSourceConfiguration
@@ -107,6 +108,7 @@ export const pickSavedSourceConfiguration = (
     inventoryDefaultView,
     metricsExplorerDefaultView,
     logColumns,
+    anomalyThreshold,
   } = value;
   const { container, host, pod, tiebreaker, timestamp } = fields;
 
@@ -119,6 +121,7 @@ export const pickSavedSourceConfiguration = (
     metricsExplorerDefaultView,
     fields: { container, host, pod, tiebreaker, timestamp },
     logColumns,
+    anomalyThreshold,
   };
 };
 
@@ -140,6 +143,7 @@ export const StaticSourceConfigurationRuntimeType = rt.partial({
   metricsExplorerDefaultView: rt.string,
   fields: StaticSourceConfigurationFieldsRuntimeType,
   logColumns: rt.array(SavedSourceConfigurationColumnRuntimeType),
+  anomalyThreshold: rt.number,
 });
 
 export interface InfraStaticSourceConfiguration

diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx
@@ -64,6 +64,7 @@ describe('ExpressionChart', () => {
           pod: 'kubernetes.pod.uid',
           tiebreaker: '_doc',
         },
+        anomalyThreshold: 20,
       },
     };
 

diff --git a/.../plugins/infra/public/components/source_configuration/indices_configuration_form_state.ts b/.../plugins/infra/public/components/source_configuration/indices_configuration_form_state.ts
@@ -7,7 +7,11 @@
 
 import { ReactNode, useCallback, useMemo, useState } from 'react';
 
-import { createInputFieldProps, validateInputFieldNotEmpty } from './input_fields';
+import {
+  createInputFieldProps,
+  createInputRangeFieldProps,
+  validateInputFieldNotEmpty,
+} from './input_fields';
 
 interface FormState {
   name: string;
@@ -20,6 +24,7 @@ interface FormState {
   podField: string;
   tiebreakerField: string;
   timestampField: string;
+  anomalyThreshold: number;
 }
 
 type FormStateChanges = Partial<FormState>;
@@ -124,6 +129,17 @@ export const useIndicesConfigurationFormState = ({
       }),
     [formState.timestampField]
   );
+  const anomalyThresholdFieldProps = useMemo(
+    () =>
+      createInputRangeFieldProps({
+        errors: validateInputFieldNotEmpty(formState.anomalyThreshold),
+        name: 'anomalyThreshold',
+        onChange: (anomalyThreshold) =>
+          setFormStateChanges((changes) => ({ ...changes, anomalyThreshold })),
+        value: formState.anomalyThreshold,
+      }),
+    [formState.anomalyThreshold]
+  );
 
   const fieldProps = useMemo(
     () => ({
@@ -135,6 +151,7 @@ export const useIndicesConfigurationFormState = ({
       podField: podFieldFieldProps,
       tiebreakerField: tiebreakerFieldFieldProps,
       timestampField: timestampFieldFieldProps,
+      anomalyThreshold: anomalyThresholdFieldProps,
     }),
     [
       nameFieldProps,
@@ -145,6 +162,7 @@ export const useIndicesConfigurationFormState = ({
       podFieldFieldProps,
       tiebreakerFieldFieldProps,
       timestampFieldFieldProps,
+      anomalyThresholdFieldProps,
     ]
   );
 
@@ -183,4 +201,5 @@ const defaultFormState: FormState = {
   podField: '',
   tiebreakerField: '',
   timestampField: '',
+  anomalyThreshold: 0,
 };
diff --git a/x-pack/plugins/infra/public/components/source_configuration/input_fields.tsx b/x-pack/plugins/infra/public/components/source_configuration/input_fields.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { ReactText } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -43,7 +43,47 @@ export const createInputFieldProps = <
   value,
 });
 
-export const validateInputFieldNotEmpty = (value: string) =>
+export interface InputRangeFieldProps<
+  Value extends ReactText = ReactText,
+  FieldElement extends HTMLInputElement = HTMLInputElement,
+  ButtonElement extends HTMLButtonElement = HTMLButtonElement
+> {
+  error: React.ReactNode[];
+  isInvalid: boolean;
+  name: string;
+  onChange?: (
+    evt: React.ChangeEvent<FieldElement> | React.MouseEvent<ButtonElement>,
+    isValid: boolean
+  ) => void;
+  value: Value;
+}
+
+export const createInputRangeFieldProps = <
+  Value extends ReactText = ReactText,
+  FieldElement extends HTMLInputElement = HTMLInputElement,
+  ButtonElement extends HTMLButtonElement = HTMLButtonElement
+>({
+  errors,
+  name,
+  onChange,
+  value,
+}: {
+  errors: FieldErrorMessage[];
+  name: string;
+  onChange: (newValue: number, isValid: boolean) => void;
+  value: Value;
+}): InputRangeFieldProps<Value, FieldElement, ButtonElement> => ({
+  error: errors,
+  isInvalid: errors.length > 0,
+  name,
+  onChange: (
+    evt: React.ChangeEvent<FieldElement> | React.MouseEvent<ButtonElement>,
+    isValid: boolean
+  ) => onChange(+evt.currentTarget.value, isValid),
+  value,
+});
+
+export const validateInputFieldNotEmpty = (value: React.ReactText) =>
   value === ''
     ? [
         <FormattedMessage

diff --git a/x-pack/plugins/infra/public/components/source_configuration/ml_configuration_panel.tsx b/x-pack/plugins/infra/public/components/source_configuration/ml_configuration_panel.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiTitle } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
+import { EuiRange } from '@elastic/eui';
+import { EuiDescribedFormGroup } from '@elastic/eui';
+import { EuiForm } from '@elastic/eui';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { InputRangeFieldProps } from './input_fields';
+
+interface MLConfigurationPanelProps {
+  isLoading: boolean;
+  readOnly: boolean;
+  anomalyThresholdFieldProps: InputRangeFieldProps;
+}
+
+export const MLConfigurationPanel = ({
+  isLoading,
+  readOnly,
+  anomalyThresholdFieldProps,
+}: MLConfigurationPanelProps) => {
+  return (
+    <EuiForm>
+      <EuiTitle size="s">
+        <h3>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.mlSectionTitle"
+            defaultMessage="Machine Learning"
+          />
+        </h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiDescribedFormGroup
+        title={
+          <h4>
+            <FormattedMessage
+              id="xpack.infra.sourceConfiguration.anomalyThresholdTitle"
+              defaultMessage="Anomaly Severity Threshold"
+            />
+          </h4>
+        }
+        description={
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.anomalyThresholdDescription"
+            defaultMessage="Sets the minimum severity score required to show anomalies in the Metrics application."
+          />
+        }
+      >
+        <EuiFormRow
+          error={anomalyThresholdFieldProps.error}
+          fullWidth
+          isInvalid={anomalyThresholdFieldProps.isInvalid}
+          label={
+            <FormattedMessage
+              id="xpack.infra.sourceConfiguration.anomalyThresholdLabel"
+              defaultMessage="Minimum severity score"
+            />
+          }
+        >
+          <EuiRange
+            min={0}
+            max={100}
+            data-test-subj="anomalyThresholdInput"
+            showInput
+            showTicks
+            showRange
+            tickInterval={20}
+            aria-label="Minimum severity score"
+            disabled={isLoading}
+            readOnly={readOnly}
+            isLoading={isLoading}
+            {...anomalyThresholdFieldProps}
+          />
+        </EuiFormRow>
+      </EuiDescribedFormGroup>
+    </EuiForm>
+  );
+};
diff --git a/.../plugins/infra/public/components/source_configuration/source_configuration_form_state.tsx b/.../plugins/infra/public/components/source_configuration/source_configuration_form_state.tsx
@@ -27,6 +27,7 @@ export const useSourceConfigurationFormState = (configuration?: InfraSourceConfi
               podField: configuration.fields.pod,
               tiebreakerField: configuration.fields.tiebreaker,
               timestampField: configuration.fields.timestamp,
+              anomalyThreshold: configuration.anomalyThreshold,
             }
           : undefined,
       [configuration]
@@ -79,6 +80,7 @@ export const useSourceConfigurationFormState = (configuration?: InfraSourceConfi
         timestamp: indicesConfigurationFormState.formState.timestampField,
       },
       logColumns: logColumnsConfigurationFormState.formState.logColumns,
+      anomalyThreshold: indicesConfigurationFormState.formState.anomalyThreshold,
     }),
     [indicesConfigurationFormState.formState, logColumnsConfigurationFormState.formState]
   );
@@ -97,6 +99,7 @@ export const useSourceConfigurationFormState = (configuration?: InfraSourceConfi
         timestamp: indicesConfigurationFormState.formStateChanges.timestampField,
       },
       logColumns: logColumnsConfigurationFormState.formStateChanges.logColumns,
+      anomalyThreshold: indicesConfigurationFormState.formStateChanges.anomalyThreshold,
     }),
     [
       indicesConfigurationFormState.formStateChanges,

diff --git a/...ck/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx b/...ck/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx
@@ -26,6 +26,8 @@ import { NameConfigurationPanel } from './name_configuration_panel';
 import { useSourceConfigurationFormState } from './source_configuration_form_state';
 import { SourceLoadingPage } from '../source_loading_page';
 import { Prompt } from '../../utils/navigation_warning_prompt';
+import { MLConfigurationPanel } from './ml_configuration_panel';
+import { useInfraMLCapabilitiesContext } from '../../containers/ml/infra_ml_capabilities';
 
 interface SourceConfigurationSettingsProps {
   shouldAllowEdit: boolean;
@@ -52,7 +54,6 @@ export const SourceConfigurationSettings = ({
     formState,
     formStateChanges,
   } = useSourceConfigurationFormState(source && source.configuration);
-
   const persistUpdates = useCallback(async () => {
     if (sourceExists) {
       await updateSourceConfiguration(formStateChanges);
@@ -74,6 +75,8 @@ export const SourceConfigurationSettings = ({
     source,
   ]);
 
+  const { hasInfraMLCapabilites } = useInfraMLCapabilitiesContext();
+
   if ((isLoading || isUninitialized) && !source) {
     return <SourceLoadingPage />;
   }
@@ -125,6 +128,18 @@ export const SourceConfigurationSettings = ({
             />
           </EuiPanel>
           <EuiSpacer />
+          {hasInfraMLCapabilites && (
+            <>
+              <EuiPanel paddingSize="l">
+                <MLConfigurationPanel
+                  isLoading={isLoading}
+                  readOnly={!isWriteable}
+                  anomalyThresholdFieldProps={indicesConfigurationProps.anomalyThreshold}
+                />
+              </EuiPanel>
+              <EuiSpacer />
+            </>
+          )}
           {errors.length > 0 ? (
             <>
               <EuiCallOut color="danger">

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
@@ -51,7 +51,7 @@ interface Props {
 }
 
 export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible }) => {
-  const { sourceId } = useSourceContext();
+  const { sourceId, source } = useSourceContext();
   const { metric, nodeType, accountId, region } = useWaffleOptionsContext();
   const { currentTime, jumpToTime, stopAutoReload } = useWaffleTimeContext();
   const { filterQueryAsJson } = useWaffleFiltersContext();
@@ -70,6 +70,7 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
 
   const anomalyParams = {
     sourceId: 'default',
+    anomalyThreshold: source?.configuration.anomalyThreshold || 0,
     startTime,
     endTime,
     defaultSortOptions: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,6 +64,7 @@ describe('ExpressionChart', () => { @@
               pod: 'kubernetes.pod.uid',
               tiebreaker: '_doc',
             },
+            anomalyThreshold: 20,
           },
         };
@@ Expand Down @@