Alerting: Add threshold expression (#55102)

public/app/features/expressions/ExpressionQueryEditor.tsx

@@ -7,6 +7,7 @@ import { ClassicConditions } from './components/ClassicConditions';
 import { Math } from './components/Math';
 import { Reduce } from './components/Reduce';
 import { Resample } from './components/Resample';
+import { Threshold } from './components/Threshold';
 import { ExpressionQuery, ExpressionQueryType, gelTypes } from './types';
 import { getDefaults } from './utils/expressionTypes';
 
@@ -25,6 +26,7 @@ function useExpressionsCache() {
       case ExpressionQueryType.math:
       case ExpressionQueryType.reduce:
       case ExpressionQueryType.resample:
+      case ExpressionQueryType.threshold:
         return expressionCache.current[queryType];
       case ExpressionQueryType.classic:
         return undefined;
@@ -37,11 +39,13 @@ function useExpressionsCache() {
         expressionCache.current.math = value;
         break;
 
-      // We want to use the same value for Reduce and Resample
+      // We want to use the same value for Reduce, Resample and Threshold
       case ExpressionQueryType.reduce:
+      case ExpressionQueryType.resample:
       case ExpressionQueryType.resample:
         expressionCache.current.reduce = value;
         expressionCache.current.resample = value;
+        expressionCache.current.threshold = value;
         break;
     }
   }, []);
@@ -82,6 +86,9 @@ export function ExpressionQueryEditor(props: Props) {
 
       case ExpressionQueryType.classic:
         return <ClassicConditions onChange={onChange} query={query} refIds={refIds} />;
+
+      case ExpressionQueryType.threshold:
+        return <Threshold onChange={onChange} query={query} labelWidth={labelWidth} refIds={refIds} />;
     }
   };
 

public/app/features/expressions/components/Threshold.tsx

@@ -0,0 +1,148 @@
+import { css } from '@emotion/css';
+import React, { FC, FormEvent } from 'react';
+
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { ButtonSelect, InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
+import { EvalFunction } from 'app/features/alerting/state/alertDef';
+
+import { ClassicCondition, ExpressionQuery, thresholdFunctions } from '../types';
+
+interface Props {
+  labelWidth: number;
+  refIds: Array<SelectableValue<string>>;
+  query: ExpressionQuery;
+  onChange: (query: ExpressionQuery) => void;
+}
+
+const defaultThresholdFunction = EvalFunction.IsAbove;
+
+export const Threshold: FC<Props> = ({ labelWidth, onChange, refIds, query }) => {
+  const styles = useStyles2(getStyles);
+
+  const defaultEvaluator: ClassicCondition = {
+    type: 'query',
+    evaluator: {
+      type: defaultThresholdFunction,
+      params: [0, 0],
+    },
+    query: {
+      params: [],
+    },
+    reducer: {
+      params: [],
+      type: 'last',
+    },
+  };
+
+  const conditions = query.conditions?.length ? query.conditions : [defaultEvaluator];
+  const condition = conditions[0];
+
+  const thresholdFunction = thresholdFunctions.find((fn) => fn.value === conditions[0].evaluator?.type);
+
+  const onRefIdChange = (value: SelectableValue<string>) => {
+    onChange({ ...query, expression: value.value });
+  };
+
+  const onEvalFunctionChange = (value: SelectableValue<EvalFunction>) => {
+    const type = value.value ?? defaultThresholdFunction;
+
+    onChange({
+      ...query,
+      conditions: updateConditions(conditions, { type }),
+    });
+  };
+
+  const onEvaluateValueChange = (event: FormEvent<HTMLInputElement>, index: number) => {
+    const newValue = parseFloat(event.currentTarget.value);
+    const newParams = [...condition.evaluator.params];
+    newParams[index] = newValue;
+
+    onChange({
+      ...query,
+      conditions: updateConditions(conditions, { params: newParams }),
+    });
+  };
+
+  const isRange =
+    condition.evaluator.type === EvalFunction.IsWithinRange || condition.evaluator.type === EvalFunction.IsOutsideRange;
+
+  return (
+    <InlineFieldRow>
+      <InlineField label="Input" labelWidth={labelWidth}>
+        <Select onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
+      </InlineField>
+      <ButtonSelect
+        className={styles.buttonSelectText}
+        options={thresholdFunctions}
+        onChange={onEvalFunctionChange}
+        value={thresholdFunction}
+      />
+      {isRange ? (
+        <>
+          <Input
+            type="number"
+            width={10}
+            onChange={(event) => onEvaluateValueChange(event, 0)}
+            defaultValue={condition.evaluator.params[0]}
+          />
+          <div className={styles.button}>TO</div>
+          <Input
+            type="number"
+            width={10}
+            onChange={(event) => onEvaluateValueChange(event, 1)}
+            defaultValue={condition.evaluator.params[1]}
+          />
+        </>
+      ) : (
+        <Input
+          type="number"
+          width={10}
+          onChange={(event) => onEvaluateValueChange(event, 0)}
+          defaultValue={conditions[0].evaluator.params[0] || 0}
+        />
+      )}
+    </InlineFieldRow>
+  );
+};
+
+function updateConditions(
+  conditions: ClassicCondition[],
+  update: Partial<{
+    params: number[];
+    type: EvalFunction;
+  }>
+): ClassicCondition[] {
+  return [
+    {
+      ...conditions[0],
+      evaluator: {
+        ...conditions[0].evaluator,
+        ...update,
+      },
+    },
+  ];
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  buttonSelectText: css`
+    color: ${theme.colors.primary.text};
+    font-size: ${theme.typography.bodySmall.fontSize};
+    text-transform: uppercase;
+  `,
+  button: css`
+    height: 32px;
+
+    color: ${theme.colors.primary.text};
+    font-size: ${theme.typography.bodySmall.fontSize};
+    text-transform: uppercase;
+
+    display: flex;
+    align-items: center;
+    border-radius: ${theme.shape.borderRadius(1)};
+    font-weight: ${theme.typography.fontWeightBold};
+    border: 1px solid ${theme.colors.border.medium};
+    white-space: nowrap;
+    padding: 0 ${theme.spacing(1)};
+    background-color: ${theme.colors.background.primary};
+  `,
+});

public/app/features/expressions/types.ts

@@ -7,6 +7,7 @@ export enum ExpressionQueryType {
   reduce = 'reduce',
   resample = 'resample',
   classic = 'classic_conditions',
+  threshold = 'threshold',
 }
 
 export const gelTypes: Array<SelectableValue<ExpressionQueryType>> = [
@@ -14,6 +15,7 @@ export const gelTypes: Array<SelectableValue<ExpressionQueryType>> = [
   { value: ExpressionQueryType.reduce, label: 'Reduce' },
   { value: ExpressionQueryType.resample, label: 'Resample' },
   { value: ExpressionQueryType.classic, label: 'Classic condition' },
+  { value: ExpressionQueryType.threshold, label: 'Threshold' },
 ];
 
 export const reducerTypes: Array<SelectableValue<string>> = [
@@ -62,6 +64,13 @@ export const upsamplingTypes: Array<SelectableValue<string>> = [
   { value: 'fillna', label: 'fillna', description: 'Fill with NaNs' },
 ];
 
+export const thresholdFunctions: Array<SelectableValue<EvalFunction>> = [
+  { value: EvalFunction.IsAbove, label: 'Is above' },
+  { value: EvalFunction.IsBelow, label: 'Is below' },
+  { value: EvalFunction.IsWithinRange, label: 'Is within range' },
+  { value: EvalFunction.IsOutsideRange, label: 'Is outside range' },
+];
+
 /**
  * For now this is a single object to cover all the types.... would likely
  * want to split this up by type as the complexity increases