fix(alerts): a rule's page doesn't wait for its metric preview (#5485); Send test up top (#5486)

#5485 "A rule's page waits up to 25 s for its metric preview: a cold 24 h
series read from plugin_metrics". Opening "Agent offline" took 25.6 s; a
cold day of one series measured 18.3 s over MCP, a warm one 63 ms. The
pickers still come with the page from plugin_metric_latest; the preview is
its own request (hx-trigger=load), showing "Reading the last day…" until it
lands. Picker swaps no longer read it either.

#5486 "Send test where it can be found": the button moves from inside "What
happens" to the page header beside History, its result under the verdict.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

steward/templates/alerts/_metric_preview.html

@@ -13,6 +13,8 @@
   </span>
   {% endif %}
 </div>
+{% elif metric and resource and not preview_read %}
+<p class="field-hint">Reading the last day…</p>
 {% elif metric and resource %}
 <p class="field-hint">No reading of this yet from {{ resource }}.</p>
 {% endif %}

steward/templates/alerts/_rule_target.html

@@ -3,7 +3,8 @@
    so on), so a host's parts never crowd the list of hosts. Any other source:
    one Resource picker. Then the metrics that resource reports, and a preview
    of the chosen one. Picking a host or part swaps this block alone
-   (/alerts/api/rule_target); picking a metric swaps the preview. #}
+   (/alerts/api/rule_target); picking a metric swaps the preview, which
+   is read in its own request after the block is drawn (#5485). #}
 {% set one = current_covers|default("resource") == "resource" %}
 <div data-cover-resource {% if not one %}hidden{% endif %}>
   {% if host_source %}
@@ -68,5 +69,10 @@
   {% if metric and metric_about(metric) %}
   <p class="field-hint" data-metric-about>{{ metric_about(metric) }}</p>
   {% else %}<p class="field-hint" data-metric-about hidden></p>{% endif %}
-  <div id="metric-preview" aria-live="polite">{% include "alerts/_metric_preview.html" %}</div>
+  {# The preview comes in its own request once the page is up (#5485). #}
+  <div id="metric-preview" aria-live="polite"
+       {%- if metric and resource %} hx-get="/alerts/api/metric_preview" hx-trigger="load"
+       hx-include="closest form" hx-params="source_module,resource_name,pick_host,metric_name,covers"{% endif %}>
+    {%- include "alerts/_metric_preview.html" -%}
+  </div>
 </div>

steward/templates/alerts/rules_form.html

@@ -10,6 +10,10 @@
 <div class="form-page">
   {% if rule %}
   {% call page_header(rule.name) %}
+    {# Send test (#5466), up here where it is found (#5486); its result shows under the verdict. #}
+    <button type="button" class="btn btn-sm btn-ghost" hx-post="/alerts/rules/{{ rule.id }}/test"
+            hx-target="#rule-test-result" hx-swap="innerHTML"
+            title="Send a TEST alert for this rule as saved, now. Nothing fires and its history doesn't change.">Send test</button>
     <a class="btn btn-sm btn-ghost" href="/alerts/history?rule={{ rule.id }}">History</a>
   {% endcall %}
   <p class="page-verdict">
@@ -17,6 +21,7 @@
     {%- if fired %}Last fired {{ fired|ago }}{% else %}Never fired{% endif -%}
     {%- if history_count is defined and history_count is not none %} · {{ history_count }} change{{ "s" if history_count != 1 }} of state on record{% endif -%}
   </p>
+  <div id="rule-test-result" aria-live="polite"></div>
   {% if rule.covers != "resource" %}
   <p class="field-hint" style="margin-top:-0.5rem;">
     Covers {% if rule.covers == "group" %}every host in <strong>{{ rule.cover_group }}</strong>{% else %}every host{% endif %}:
@@ -139,15 +144,8 @@
         {%- else %}<span class="tone-warn">It notifies nobody yet:</span> no email server with recipients and no webhook is set
         {%- if session.user_role == 'admin' %} (<a href="/settings/notifications/">Settings → Notifications</a>){% endif %}.{% endif -%}
       </p>
-      {% if rule %}
-      <div class="form-group">
-        <button type="button" class="btn btn-sm btn-ghost" hx-post="/alerts/rules/{{ rule.id }}/test"
-                hx-target="#rule-test-result" hx-swap="innerHTML">Send test</button>
-        <p class="field-hint">Sends a TEST alert for this rule as saved, now, to everywhere above.
-          Nothing fires, and the rule's history doesn't change.</p>
-        <div id="rule-test-result" aria-live="polite"></div>
-      </div>
-      {% endif %}
+      {% if rule %}<p class="field-hint" style="margin-top:-0.5rem;">To check that it arrives, use
+        <strong>Send test</strong> at the top of this page.</p>{% endif %}
       <div class="form-group">
         <label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;">
           <input type="checkbox" name="notify_no_data"