swarm-ui: add a button to the alerts page that shows the pending, no-data and error instances

The page opens on the firing ones. The button lists every instance again,
with the state filter and the tones back, so the table's filtering is
visible. The saved-filters key goes back to its original name, since the
state column is a filter again.

frontend/packages/swarm-ui/src/pages/AlertsPage.tsx

@@ -1,12 +1,13 @@
-// <AlertsPage> — `/alerts`' content: the alerts of the swarm's Grafana that
-// are firing now, from swarm-controller's `GET /api/alerts` (which also lists
-// pending, no-data and errored instances; those stay in Grafana). Same shape
-// as `HivesPage`: one fetch on a `RefreshIntervalPicker` cadence, rendered as
-// a `Table`.
+// <AlertsPage> — `/alerts`' content: the alerts the swarm's Grafana holds
+// now, from swarm-controller's `GET /api/alerts`. Only the firing ones show at
+// first; a button in the header adds the pending, no-data and errored ones.
+// Same shape as `HivesPage`: one fetch on a `RefreshIntervalPicker` cadence,
+// rendered as a `Table`.
 import { useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
-import { Badge } from "@hive/shared/badge.js";
+import { Badge, type BadgeTone } from "@hive/shared/badge.js";
+import { Button } from "../ui/button/Button.js";
 import { Panel } from "../ui/panel/Panel.js";
 import { RelativeTime } from "../ui/relative-time/RelativeTime.js";
 import {
@@ -15,16 +16,19 @@ import {
   type RefreshIntervalMs,
 } from "../ui/refresh-interval/RefreshInterval.js";
 import { Table, type TableColumn } from "../ui/table/Table.js";
-import { activeSinceMs, alertKey, firingAlerts, type Alert } from "./alerts.js";
+import { activeSinceMs, alertKey, listedAlerts, type Alert } from "./alerts.js";
 
-// Grafana's alert-groups view, where the instances this page leaves out are.
+const STATE_TONE: Record<string, BadgeTone> = {
+  Alerting: "negative",
+  Error: "negative",
+  NoData: "warning",
+  Pending: "warning",
+};
+
+// Grafana's own alert list, for what this page does not show.
 const GRAFANA_ALERTS_URL =
   "https://grafana.constellation.darkest.space/alerting/groups";
 
-// Versioned: the state column used to be a filter, and a saved "not Pending"
-// selection under the old key would now hide every row.
-const FILTERS_STORAGE_KEY = "swarm-ui:alerts:table-filters:v2";
-
 const COLUMNS: TableColumn<Alert>[] = [
   {
     key: "name",
@@ -40,7 +44,7 @@ const COLUMNS: TableColumn<Alert>[] = [
       const since = activeSinceMs(a);
       return (
         <Badge
-          tone="negative"
+          tone={STATE_TONE[a.state] ?? "neutral"}
           value={
             since !== null ? (
               <>
@@ -53,7 +57,9 @@ const COLUMNS: TableColumn<Alert>[] = [
         />
       );
     },
-    sortBy: (a) => activeSinceMs(a) ?? 0,
+    sortBy: (a) => a.state,
+    filterValues: (a) => [a.state],
+    filterMode: "multiselect",
   },
   {
     key: "summary",
@@ -69,9 +75,11 @@ const DEFAULT_INTERVAL_MS: RefreshIntervalMs = 30_000;
 export function AlertsPage() {
   const [alerts, setAlerts] = useState<Alert[] | null>(null);
   const [error, setError] = useState<ProblemDetails | null>(null);
-  const firing = alerts ? firingAlerts(alerts) : null;
+  const [showAll, setShowAll] = useState(false);
   const [intervalMs, setIntervalMs] =
     useState<RefreshIntervalMs>(DEFAULT_INTERVAL_MS);
+  const listed = alerts ? listedAlerts(alerts, showAll) : null;
+  const hidden = alerts && listed ? alerts.length - listed.length : 0;
 
   useRefreshInterval(intervalMs, () => {
     (async () => {
@@ -96,8 +104,13 @@ export function AlertsPage() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            all alerts in Grafana
+            Grafana's alert list
           </a>
+          {showAll || hidden > 0 ? (
+            <Button onClick={() => setShowAll(!showAll)}>
+              {showAll ? "only firing" : `show ${hidden} more`}
+            </Button>
+          ) : null}
           <RefreshIntervalPicker
             id="alerts-refresh"
             value={intervalMs}
@@ -113,13 +126,15 @@ export function AlertsPage() {
         />
       ) : null}
       {!error && alerts === null ? <p>loading…</p> : null}
-      {firing && firing.length === 0 ? <p>nothing is alerting.</p> : null}
-      {firing && firing.length > 0 ? (
+      {listed && listed.length === 0 ? (
+        <p>{showAll ? "no alerts." : "nothing is alerting."}</p>
+      ) : null}
+      {listed && listed.length > 0 ? (
         <Table
           columns={COLUMNS}
-          rows={firing}
+          rows={listed}
           rowKey={alertKey}
-          storageKey={FILTERS_STORAGE_KEY}
+          storageKey="swarm-ui:alerts:table-filters"
         />
       ) : null}
     </Panel>

frontend/packages/swarm-ui/src/pages/alerts.ts

@@ -20,6 +20,12 @@ export function firingAlerts(alerts: Alert[]): Alert[] {
   return alerts.filter((a) => a.state === FIRING);
 }
 
+// What the page lists: the firing ones, or every instance once the operator
+// asks for the rest.
+export function listedAlerts(alerts: Alert[], showAll: boolean): Alert[] {
+  return showAll ? alerts : firingAlerts(alerts);
+}
+
 // Grafana reports an instance that never became active with the zero time,
 // which `Date.parse` reads as year 1.
 export function activeSinceMs(a: Alert): number | null {

frontend/packages/swarm-ui/test/alerts.test.mjs

@@ -3,7 +3,12 @@
 // is imported as it is.
 import assert from "node:assert/strict";
 import { test } from "node:test";
-import { activeSinceMs, alertKey, firingAlerts } from "../src/pages/alerts.ts";
+import {
+  activeSinceMs,
+  alertKey,
+  firingAlerts,
+  listedAlerts,
+} from "../src/pages/alerts.ts";
 
 const alert = (name, state, extra = {}) => ({
   name,
@@ -28,6 +33,22 @@ test("only instances in the Alerting state are listed", () => {
   );
 });
 
+test("asking for the rest lists every instance, in order", () => {
+  const all = [
+    alert("a", "Pending"),
+    alert("b", "Alerting"),
+    alert("c", "Error"),
+  ];
+  assert.deepEqual(
+    listedAlerts(all, true).map((a) => a.name),
+    ["a", "b", "c"],
+  );
+  assert.deepEqual(
+    listedAlerts(all, false).map((a) => a.name),
+    ["b"],
+  );
+});
+
 test("nothing firing leaves the list empty, and the input is not changed", () => {
   const all = [alert("a", "Pending"), alert("b", "Error")];
   assert.deepEqual(firingAlerts(all), []);