Alerting: adding query editor when creating threshold rule. (#33123)

* fix viz

* add datasource picker on query rows in mixed mode

* add timerange, handle add/remove queryrunners

* multiqueryrunner test

* trying things out.

* adding another test to verify running a induvidual query runner will update multirunner.

* cleaned up tests a bit.

* draft version working ok.

* fixing so we base the refId from request targets.

* reenable adding expression

* layout fixes for alerting page

* some cleanup

* cleaning up code that we won't use

* changed so we don't display the time range if params not passed.

* remove unused things in querygroup

* changed button to type button.

* removed timerange from dataQuery and removed multiquery runner.

* minor refactoring.

* renamed callback function to make it more clear what it does.

* renamed droppable area.

* changed so we only display the query editor when selecting threshold.

* removed the refresh picker.

* revert

* wip

* extending with data query.

* timerange fixes

* it is now possible to add grafana queries.

* removed unused type.

* removed expect import.

* added docs.

* moved range converting methods to rangeUtil.

* clean up some typings, remove file

* making sure we don't blow up on component being unmounted.

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx

@@ -83,7 +83,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
             onClick={handleSubmit((values) => submit(values, false))}
             disabled={submitState.loading}
           >
-            {submitState.loading && <Spinner className={styles.buttonSpiner} inline={true} />}
+            {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
             Save
           </ToolbarButton>
           <ToolbarButton
@@ -92,11 +92,11 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
             onClick={handleSubmit((values) => submit(values, true))}
             disabled={submitState.loading}
           >
-            {submitState.loading && <Spinner className={styles.buttonSpiner} inline={true} />}
+            {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
             Save and exit
           </ToolbarButton>
         </PageToolbar>
-        <div className={styles.contentOutter}>
+        <div className={styles.contentOuter}>
           <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
             <div className={styles.contentInner}>
               {hasErrors && (
@@ -127,7 +127,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
 
 const getStyles = (theme: GrafanaTheme) => {
   return {
-    buttonSpiner: css`
+    buttonSpinner: css`
       margin-right: ${theme.spacing.sm};
     `,
     toolbar: css`
@@ -145,7 +145,7 @@ const getStyles = (theme: GrafanaTheme) => {
       flex: 1;
       padding: ${theme.spacing.md};
     `,
-    contentOutter: css`
+    contentOuter: css`
       background: ${theme.colors.panelBg};
       overflow: hidden;
       flex: 1;

public/app/features/alerting/unified/components/rule-editor/GrafanaQueryEditor.tsx

@@ -1,27 +0,0 @@
-import { TextArea } from '@grafana/ui';
-import { GrafanaQuery } from 'app/types/unified-alerting-dto';
-import React, { FC, useState } from 'react';
-
-interface Props {
-  value?: GrafanaQuery[];
-  onChange: (value: GrafanaQuery[]) => void;
-}
-
-// @TODO replace with actual query editor once it's done
-export const GrafanaQueryEditor: FC<Props> = ({ value, onChange }) => {
-  const [content, setContent] = useState(JSON.stringify(value || [], null, 2));
-  const onChangeHandler = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    const val = (e.target as HTMLTextAreaElement).value;
-    setContent(val);
-    try {
-      const parsed = JSON.parse(val);
-      if (parsed && Array.isArray(parsed)) {
-        console.log('queries changed');
-        onChange(parsed);
-      }
-    } catch (e) {
-      console.log('invalid json');
-    }
-  };
-  return <TextArea rows={20} value={content} onChange={onChangeHandler} />;
-};

public/app/features/alerting/unified/components/rule-editor/QueryStep.tsx

@@ -1,13 +1,11 @@
 import React, { FC } from 'react';
-import { Field, InputControl } from '@grafana/ui';
-import { RuleEditorSection } from './RuleEditorSection';
 import { useFormContext } from 'react-hook-form';
-import { RuleFormType, RuleFormValues } from '../../types/rule-form';
+import { Field, InputControl } from '@grafana/ui';
 import { ExpressionEditor } from './ExpressionEditor';
-import { GrafanaQueryEditor } from './GrafanaQueryEditor';
-import { isArray } from 'lodash';
+import { RuleEditorSection } from './RuleEditorSection';
+import { RuleFormType, RuleFormValues } from '../../types/rule-form';
+import { AlertingQueryEditor } from '../../../components/AlertingQueryEditor';
 
-// @TODO get proper query editors in
 export const QueryStep: FC = () => {
   const { control, watch, errors } = useFormContext<RuleFormValues>();
   const type = watch('type');
@@ -34,10 +32,10 @@ export const QueryStep: FC = () => {
         >
           <InputControl
             name="queries"
-            as={GrafanaQueryEditor}
+            as={AlertingQueryEditor}
             control={control}
             rules={{
-              validate: (queries) => isArray(queries) && !!queries.length,
+              validate: (queries) => Array.isArray(queries) && !!queries.length,
             }}
           />
         </Field>