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

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/" >}}).

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.

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/" >}}).