From 97bf3c1dca0a7929bd6ed08eb29823d84b1fa206 Mon Sep 17 00:00:00 2001 From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com> Date: Mon, 21 Nov 2022 09:11:02 +0100 Subject: [PATCH] Alerting: Move alert rule name to the top left in alert form (#58579) * Move alert rule name to the top left in alert form, and add a placeholder * Update docs * Fix lint error --- .../create-grafana-managed-rule.md | 9 +-- ...reate-mimir-loki-managed-recording-rule.md | 14 +++-- .../create-mimir-loki-managed-rule.md | 9 +-- .../alerting/unified/RuleEditor.test.tsx | 4 +- .../components/rule-editor/AlertRuleForm.tsx | 61 ++++++++++++++++++- .../rule-editor/CloudEvaluationBehavior.tsx | 2 +- .../components/rule-editor/DetailsStep.tsx | 33 +--------- .../rule-editor/GrafanaEvaluationBehavior.tsx | 2 +- .../rule-editor/NotificationsStep.tsx | 7 ++- .../QueryAndExpressionsStep.tsx | 2 +- 10 files changed, 87 insertions(+), 56 deletions(-) diff --git a/docs/sources/alerting/alerting-rules/create-grafana-managed-rule.md b/docs/sources/alerting/alerting-rules/create-grafana-managed-rule.md index 786de9cf53b..b00268b51d1 100644 --- a/docs/sources/alerting/alerting-rules/create-grafana-managed-rule.md +++ b/docs/sources/alerting/alerting-rules/create-grafana-managed-rule.md @@ -23,21 +23,22 @@ Watch this video to learn more about creating alerts: {{< vimeo 720001934 >}} 1. In the Grafana menu, click the **Alerting** (bell) icon to open the Alerting page listing existing alerts. 1. Click **New alert rule**. The new alerting rule page opens where the Grafana managed alerts option is selected by default. -1. In Step 1, add queries and expressions to evaluate, and then select the alert condition. +1. In Step 1, add the rule name. + - In **Rule name**, add a descriptive name. This name is displayed in the alert rule list. It is also the `alertname` label for every alert instance that is created from this rule. +1. In Step 2, add queries and expressions to evaluate, and then select the alert condition. - For queries, select a data source from the drop-down. - Add one or more [queries]({{< relref "../../panels-visualizations/query-transform-data/#add-a-query/" >}}) or [expressions]({{< relref "../../panels-visualizations/query-transform-data/expression-queries/" >}}). - For each expression, select either **Classic condition** to create a single alert rule, or choose from **Math**, **Reduce**, **Resample** options to generate separate alert for each series. For details on these options, see [Single and multi dimensional rule](#single-and-multi-dimensional-rule). - Click **Run queries** to verify that the query is successful. - Next, select the query or expression for your alert condition. -1. In Step 2, specify the alert evaluation interval. +1. In Step 3, specify the alert evaluation interval. - From the **Condition** drop-down, select the query or expression to trigger the alert rule. - For **Evaluate every**, specify the frequency of evaluation. Must be a multiple of 10 seconds. For examples, `1m`, `30s`. - For **Evaluate for**, specify the duration for which the condition must be true before an alert fires. > **Note:** Once a condition is breached, the alert goes into the Pending state. If the condition remains breached for the duration specified, the alert transitions to the `Firing` state, otherwise it reverts back to the `Normal` state. - In **Configure no data and error handling**, configure alerting behavior in the absence of data. Use the guidelines in [No data and error handling](#no-data-and-error-handling). - Click **Preview alerts** to check the result of running the query at this moment. Preview excludes no data and error handling. -1. In Step 3, add the rule name, storage location, rule group, as well as additional metadata associated with the rule. - - In **Rule name**, add a descriptive name. This name is displayed in the alert rule list. It is also the `alertname` label for every alert instance that is created from this rule. +1. In Step 4, add the storage location, rule group, as well as additional metadata associated with the rule. - From the **Folder** drop-down, select the folder where you want to store the rule. - For **Group**, specify a pre-defined group. Newly created rules are appended to the end of the group. Rules within a group are run sequentially at a regular interval, with the same evaluation time. - Add a description and summary to customize alert messages. Use the guidelines in [Annotations and labels for alerting]({{< relref "../fundamentals/annotation-label/" >}}). diff --git a/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-recording-rule.md b/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-recording-rule.md index 43a6fe19584..9f61d11a7df 100644 --- a/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-recording-rule.md +++ b/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-recording-rule.md @@ -37,11 +37,12 @@ To create a Grafana Mimir or Loki managed recording rule 1. In the Grafana menu, click the **Alerting** (bell) icon to open the Alerting page listing existing alerts. 1. Click **New alert rule**. The new alerting rule page opens where the **Grafana managed alert** option is selected by default. -1. In Step 1, select **Mimir or Loki recording rule** option. +1. In Step 1, add the rule name. + - In **Rule name**, add a descriptive name. This name is displayed in the alert rule list. It is also the `alertname` label for every alert instance that is created from this rule. +1. In Step 2, select **Mimir or Loki recording rule** option. - Select your Loki or Prometheus data source, add the query to evaluate, and then select the alert condition. - Enter a PromQL or LogQL expression. The rule fires if the evaluation result has at least one series with a value that is greater than 0. An alert is created for each series. -1. In Step 2, add the rule name, namespace, rule group, as well as additional metadata associated with the rule. - - In **Rule name**, add a descriptive name. This name is displayed in the alert rule list. It is also the `alertname` label for every alert instance that is created from this rule. +1. In Step 3, add the namespace, rule group, as well as additional metadata associated with the rule. - From the **Namespace** drop-down, select an existing rule namespace. Otherwise, click Add new and enter a name to create a new one. Namespaces can contain one or more rule groups and only have an organizational purpose. For more information, see [Grafana Mimir or Loki rule groups and namespaces]({{< relref "edit-mimir-loki-namespace-group/" >}}). - From the **Group** drop-down, select an existing group within the selected namespace. Otherwise, click **Add new** and enter a name to create a new one. Newly created rules are appended to the end of the group. Rules within a group are run sequentially at a regular interval, with the same evaluation time. - Add a description and summary to customize alert messages. Use the guidelines in [Annotations and labels for alerting]({{< relref "../fundamentals/annotation-label/" >}}). @@ -52,17 +53,18 @@ To create a Grafana Mimir or Loki managed recording rule 1. In the Grafana menu, click the **Alerting** (bell) icon to open the Alerting page listing existing alerts. 1. Click **New alert rule**. -1. In Step 1, add the rule name, type, and storage location. +1. In Step 1, add the rule name. - In **Rule name**, add a descriptive name. This name is displayed in the alert rule list. It is also the `alertname` label for every alert instance that is created from this rule. +1. In Step 2, add the type, and storage location. - From the **Rule type** drop-down, select **Mimir / Loki managed alert**. - From the **Select data source** drop-down, select an external Prometheus, an external Loki, or a Grafana Cloud data source. - From the **Namespace** drop-down, select an existing rule namespace. Otherwise, click **Add new** and enter a name to create a new one. Namespaces can contain one or more rule groups and only have an organizational purpose. - From the **Group** drop-down, select an existing group within the selected namespace. Otherwise, click **Add new** and enter a name to create a new one. Newly created rules are appended to the end of the group. Rules within a group are run sequentially at a regular interval, with the same evaluation time. {{< figure src="/static/img/docs/alerting/unified/rule-edit-mimir-alert-type-8-0.png" max-width="550px" caption="Alert details" >}} -1. In Step 2, add the query to evaluate. +1. In Step 3, add the query to evaluate. - Enter a PromQL or LogQL expression. The rule fires if the evaluation result has at least one series with a value that is greater than 0. An alert is created for each series. {{< figure src="/static/img/docs/alerting/unified/rule-edit-mimir-query-8-0.png" max-width="550px" caption="Alert details" >}} -1. In Step 3, add additional metadata associated with the rule. +1. In Step 4, add additional metadata associated with the rule. - Add a description and summary to customize alert messages. Use the guidelines in [Annotations and labels for alerting]({{< relref "../fundamentals/annotation-label/" >}}). - Add Runbook URL, panel, dashboard, and alert IDs. - Add custom labels. diff --git a/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-rule.md b/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-rule.md index 379c0df080d..c57f82e9839 100644 --- a/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-rule.md +++ b/docs/sources/alerting/alerting-rules/create-mimir-loki-managed-rule.md @@ -37,14 +37,15 @@ Watch this video to learn more about how to create a Mimir managed alert rule: { 1. In the Grafana menu, click the **Alerting** (bell) icon to open the Alerting page listing existing alerts. 1. Click **New alert rule**. The new alerting rule page opens where the Grafana managed alerts option is selected by default. -1. In Step 1, select **Mimir or Loki alert** option. +1. In Step 1, add the rule name. + - In **Rule name**, add a descriptive name. This name is displayed in the alert rule list. It is also the `alertname` label for every alert instance that is created from this rule. +1. In Step 2, select **Mimir or Loki alert** option. - Next, select your Loki or Prometheus data source and add the query to evaluate. - Enter a PromQL or LogQL expression to query. The rule fires if the evaluation result has at least one series with a value that is greater than 0. An alert is created for each series. -1. In Step 2, specify the alert evaluation interval. +1. In Step 3, specify the alert evaluation interval. - In the **For** text box, specify the duration for which the condition must be true before an alert fires. If you specify `5m`, the condition must be true for 5 minutes before the alert fires. > **Note:** Once a condition is met, the alert goes into the `Pending` state. If the condition remains active for the duration specified, the alert transitions to the `Firing` state, else it reverts to the `Normal` state. -1. In Step 3, add the rule name, namespace, rule group, as well as additional metadata associated with the rule. - - In **Rule name**, add a descriptive name. This name is displayed in the alert rule list. It is also the `alertname` label for every alert instance that is created from this rule. +1. In Step 4, add the namespace, rule group, as well as additional metadata associated with the rule. - From the **Namespace** drop-down, select an existing rule namespace. Otherwise, click **Add new** and enter a name to create a new one. Namespaces can contain one or more rule groups and only have an organizational purpose. For more information, see [Grafana Mimir or Loki rule groups and namespaces]({{< relref "edit-mimir-loki-namespace-group/" >}}). - From the **Group** drop-down, select an existing group within the selected namespace. Otherwise, click **Add new** and enter a name to create a new one. Newly created rules are appended to the end of the group. Rules within a group are run sequentially at a regular interval, with the same evaluation time. - Add a description and summary to customize alert messages. Use the guidelines in [Annotations and labels for alerting]({{< relref "../fundamentals/annotation-label/" >}}). diff --git a/public/app/features/alerting/unified/RuleEditor.test.tsx b/public/app/features/alerting/unified/RuleEditor.test.tsx index f57a299869a..3db03b1bdcd 100644 --- a/public/app/features/alerting/unified/RuleEditor.test.tsx +++ b/public/app/features/alerting/unified/RuleEditor.test.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { Route, Router } from 'react-router-dom'; import { selectOptionInTest } from 'test/helpers/selectOptionInTest'; -import { byLabelText, byRole, byTestId, byText } from 'testing-library-selector'; +import { byRole, byTestId, byText } from 'testing-library-selector'; import { DataSourceInstanceSettings } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; @@ -76,7 +76,7 @@ function renderRuleEditor(identifier?: string) { const ui = { inputs: { - name: byLabelText('Rule name'), + name: byRole('textbox', { name: /rule name name for the alert rule\./i }), alertType: byTestId('alert-type-picker'), dataSource: byTestId('datasource-picker'), folder: byTestId('folder-picker'), diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx index 6fa8e77b6bf..692ee68955d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx @@ -1,11 +1,11 @@ import { css } from '@emotion/css'; import React, { FC, useMemo, useState } from 'react'; -import { FormProvider, useForm, UseFormWatch } from 'react-hook-form'; +import { FormProvider, useForm, useFormContext, UseFormWatch } from 'react-hook-form'; import { Link } from 'react-router-dom'; import { GrafanaTheme2 } from '@grafana/data'; import { logInfo } from '@grafana/runtime'; -import { Button, ConfirmModal, CustomScrollbar, Spinner, useStyles2, HorizontalGroup } from '@grafana/ui'; +import { Button, ConfirmModal, CustomScrollbar, Spinner, useStyles2, HorizontalGroup, Field, Input } from '@grafana/ui'; import { useAppNotification } from 'app/core/copy/appNotification'; import { useCleanup } from 'app/core/hooks/useCleanup'; import { useQueryParams } from 'app/core/hooks/useQueryParams'; @@ -24,8 +24,57 @@ import { CloudEvaluationBehavior } from './CloudEvaluationBehavior'; import { DetailsStep } from './DetailsStep'; import { GrafanaEvaluationBehavior } from './GrafanaEvaluationBehavior'; import { NotificationsStep } from './NotificationsStep'; +import { RuleEditorSection } from './RuleEditorSection'; import { RuleInspector } from './RuleInspector'; import { QueryAndExpressionsStep } from './query-and-alert-condition/QueryAndExpressionsStep'; +import { checkForPathSeparator } from './util'; + +const recordingRuleNameValidationPattern = { + message: + 'Recording rule name must be valid metric name. It may only contain letters, numbers, and colons. It may not contain whitespace.', + value: /^[a-zA-Z_:][a-zA-Z0-9_:]*$/, +}; + +const AlertRuleNameInput = () => { + const styles = useStyles2(getStyles); + const { + register, + watch, + formState: { errors }, + } = useFormContext(); + + const ruleFormType = watch('type'); + return ( + + + { + // we use the alert rule name as the "groupname" for Grafana managed alerts, so we can't allow path separators + if (ruleFormType === RuleFormType.grafana) { + return checkForPathSeparator(value); + } + + return true; + }, + }, + })} + placeholder="Give your alert rule a name." + /> + + + ); +}; type Props = { existing?: RuleWithLocation; @@ -160,6 +209,7 @@ export const AlertRuleForm: FC = ({ existing }) => {
+ {showStep2 && ( <> @@ -222,5 +272,12 @@ const getStyles = (theme: GrafanaTheme2) => { flex-direction: row; justify-content: flex-start; `, + formInput: css` + width: 275px; + + & + & { + margin-left: ${theme.spacing(3)}; + } + `, }; }; diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx index fbe226a9c6c..c74eff45c59 100644 --- a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx @@ -28,7 +28,7 @@ export const CloudEvaluationBehavior = () => { } return ( - +
diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx index b53405ca357..099654102a7 100644 --- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx @@ -19,12 +19,6 @@ import { RuleEditorSection } from './RuleEditorSection'; import { RuleFolderPicker, Folder, containsSlashes } from './RuleFolderPicker'; import { checkForPathSeparator } from './util'; -const recordingRuleNameValidationPattern = { - message: - 'Recording rule name must be valid metric name. It may only contain letters, numbers, and colons. It may not contain whitespace.', - value: /^[a-zA-Z_:][a-zA-Z0-9_:]*$/, -}; - interface DetailsStepProps { initialFolder: RuleForm | null; } @@ -46,7 +40,7 @@ export const DetailsStep = ({ initialFolder }: DetailsStepProps) => { return ( { : 'Write a summary and add labels to help you better manage your alerts' } > - - { - // we use the alert rule name as the "groupname" for Grafana managed alerts, so we can't allow path separators - if (ruleFormType === RuleFormType.grafana) { - return checkForPathSeparator(value); - } - - return true; - }, - }, - })} - /> - - {(ruleFormType === RuleFormType.cloudRecording || ruleFormType === RuleFormType.cloudAlerting) && dataSourceName && } diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx index 5e8e590db6b..19453d7f81f 100644 --- a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx @@ -91,7 +91,7 @@ export const GrafanaEvaluationBehavior = () => { return ( // TODO remove "and alert condition" for recording rules - + { const [hideFlowChart, setHideFlowChart] = useState(false); const styles = useStyles2(getStyles); const theme = useTheme2(); + const { watch } = useFormContext(); - const { watch } = useFormContext(); + const type = watch('type'); const dataSourceName = watch('dataSourceName') ?? GRAFANA_RULES_SOURCE_NAME; return ( diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx index d329a1d3de7..974635f8352 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx @@ -147,7 +147,7 @@ export const QueryAndExpressionsStep: FC = ({ editingExistingRule }) => { }, [condition, queries, setValue]); return ( - + {/* This is the PromQL Editor for Cloud rules and recording rules */}