Alerting: Fix recording rules showing alert notification information. (#61988)

* Fix recording rules form steps not showing alert information

* Fix docs about creating cloud and recording rules

* Update docs with suggested changes

docs/sources/alerting/alerting-rules/create-mimir-loki-managed-recording-rule.md

@@ -36,19 +36,17 @@ 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, 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 1, add the rule name. The recording name must be a Prometheus metric name and contain no whitespace.
+   - In **Rule name**, add a descriptive name.
 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 3, add the namespace, rule group, as well as additional metadata associated with the rule.
+   - Select your Loki or Prometheus data source.
+   - Enter a PromQL or LogQL query.
+1. In Step 3, add the namespace and the group.
    - 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/" >}}).
-   - Add Runbook URL, panel, dashboard, and alert IDs.
-   - Add custom labels.
-1. Click **Save** to save the rule or **Save and exit** to save the rule and go back to the Alerting page.
-1. Next, create a notification for the rule.
+   - 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.
+1. In Step 4, add the custom labels.
+   - Add custom labels selecting existing key-value pairs from the drop down, or add new labels by entering the new key or value.
+1. Click **Save** to save the recording rule or **Save and exit** to save the recording rule and go back to the Alerting page.
 
 1. In the Grafana menu, click the **Alerting** (bell) icon to open the Alerting page listing existing alerts.
 1. Click **New alert rule**.
@@ -57,13 +55,12 @@ To create a Grafana Mimir or Loki managed recording 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 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 evaluation behavior.
+   - Enter a valid **For** duration. The expression has to be true for this long for the alert to be fired.
 1. In Step 4, add 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/" >}}).
    - Add Runbook URL, panel, dashboard, and alert IDs.
 1. In Step 5, add custom labels.

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

@@ -17,13 +17,11 @@ export function DetailsStep() {
   return (
     <RuleEditorSection
       stepNo={type === RuleFormType.cloudRecording ? 3 : 4}
-      title={
-        type === RuleFormType.cloudRecording ? 'Add details for your recording rule' : 'Add details for your alert rule'
-      }
+      title={type === RuleFormType.cloudRecording ? 'Folder and group' : 'Add details for your alert rule'}
       description={
         type === RuleFormType.cloudRecording
-          ? 'Add labels to help you better manage your rules'
-          : 'Write a summary and add labels to help you better manage your alerts'
+          ? 'Select the Namespace and Group for your recording rule'
+          : 'Select the folder and evaluation group for your alert. Write a summary to help you better manage your alerts'
       }
     >
       {(ruleFormType === RuleFormType.cloudRecording || ruleFormType === RuleFormType.cloudAlerting) &&

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

@@ -16,9 +16,15 @@ export interface ExpressionEditorProps {
   value?: string;
   onChange: (value: string) => void;
   dataSourceName: string; // will be a prometheus or loki datasource
+  showPreviewAlertsButton: boolean;
 }
 
-export const ExpressionEditor: FC<ExpressionEditorProps> = ({ value, onChange, dataSourceName }) => {
+export const ExpressionEditor: FC<ExpressionEditorProps> = ({
+  value,
+  onChange,
+  dataSourceName,
+  showPreviewAlertsButton = true,
+}) => {
   const styles = useStyles2(getStyles);
 
   const { mapToValue, mapToQuery } = useQueryMappers(dataSourceName);
@@ -77,17 +83,23 @@ export const ExpressionEditor: FC<ExpressionEditorProps> = ({ value, onChange, d
           datasource={dataSource}
         />
       </DataSourcePluginContextProvider>
-      <div className={styles.preview}>
-        <Button type="button" onClick={onRunQueriesClick} disabled={alertPreview?.data.state === LoadingState.Loading}>
-          Preview alerts
-        </Button>
-        {previewLoaded && !previewHasAlerts && (
-          <Alert title="Alerts preview" severity="info" className={styles.previewAlert}>
-            There are no firing alerts for your query.
-          </Alert>
-        )}
-        {previewHasAlerts && <CloudAlertPreview preview={previewDataFrame} />}
-      </div>
+      {showPreviewAlertsButton && (
+        <div className={styles.preview}>
+          <Button
+            type="button"
+            onClick={onRunQueriesClick}
+            disabled={alertPreview?.data.state === LoadingState.Loading}
+          >
+            Preview alerts
+          </Button>
+          {previewLoaded && !previewHasAlerts && (
+            <Alert title="Alerts preview" severity="info" className={styles.previewAlert}>
+              There are no firing alerts for your query.
+            </Alert>
+          )}
+          {previewHasAlerts && <CloudAlertPreview preview={previewDataFrame} />}
+        </div>
+      )}
     </>
   );
 };

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

@@ -23,12 +23,16 @@ export const NotificationsStep = () => {
   return (
     <RuleEditorSection
       stepNo={type === RuleFormType.cloudRecording ? 4 : 5}
-      title="Notifications"
-      description="Grafana handles the notifications for alerts by assigning labels to alerts. These labels connect alerts to contact points and silence alert instances that have matching labels."
+      title={type === RuleFormType.cloudRecording ? 'Labels' : 'Notifications'}
+      description={
+        type === RuleFormType.cloudRecording
+          ? 'Add labels to help you better manage your recording rules'
+          : 'Grafana handles the notifications for alerts by assigning labels to alerts. These labels connect alerts to contact points and silence alert instances that have matching labels.'
+      }
     >
       <div className={styles.contentWrapper}>
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-          {!hasLabelsDefined && (
+          {!hasLabelsDefined && type !== RuleFormType.cloudRecording && (
             <Card className={styles.card}>
               <Card.Heading>Root route – default for all alerts</Card.Heading>
               <Card.Description>

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx

@@ -20,17 +20,17 @@ import { refIdExists } from '../util';
 
 import { AlertType } from './AlertType';
 import {
-  duplicateQuery,
   addNewDataQuery,
   addNewExpression,
+  duplicateQuery,
   queriesAndExpressionsReducer,
   removeExpression,
   rewireExpressions,
   setDataQueries,
   updateExpression,
   updateExpressionRefId,
-  updateExpressionType,
   updateExpressionTimeRange,
+  updateExpressionType,
 } from './reducer';
 
 interface Props {
@@ -161,7 +161,13 @@ export const QueryAndExpressionsStep: FC<Props> = ({ editingExistingRule }) => {
           <InputControl
             name="expression"
             render={({ field: { ref, ...field } }) => {
-              return <ExpressionEditor {...field} dataSourceName={dataSourceName} />;
+              return (
+                <ExpressionEditor
+                  {...field}
+                  dataSourceName={dataSourceName}
+                  showPreviewAlertsButton={!isRecordingRuleType}
+                />
+              );
             }}
             control={control}
             rules={{