Dashboard opens at once and fills in part by part

SW.Bitween.Web/ClientApp/e2e/dashboard.spec.ts

@@ -10,6 +10,14 @@ test("dashboard loads with real aggregated data", async ({ page }) => {
   await expect(page.getByText("Success rate, 7 days")).toBeVisible();
   await expect(page.getByText("Traffic, last 48 hours")).toBeVisible();
   await expect(page.getByText("Housekeeping")).toBeVisible();
+  // The page opens before its numbers arrive; check them once they have.
+  await expect(page.getByText("loading…")).toHaveCount(0, { timeout: 15000 });
+  await expect(page.getByText("Finding the latest failures…")).toHaveCount(0, { timeout: 15000 });
+  await expect(page.getByText("Reading the retry chains…")).toHaveCount(0, { timeout: 15000 });
+  // A part that couldn't be read stops loading too, and says so.
+  await expect(page.getByRole("link").filter({ hasText: /^Exchanges, last 24 hours/ })).not.toContainText(
+    "unavailable right now",
+  );
   await expect(page.getByText("undefined")).toHaveCount(0);
   await expect(page.getByText("NaN")).toHaveCount(0);
 

SW.Bitween.Web/ClientApp/src/api/client.ts

@@ -38,7 +38,7 @@ import type {
   DataSourceStatementUsage,
   DataSourceTelemetry,
   DataSourceTestResult,
-  DashboardData,
+  LatestFailure,
   RetrySummary,
   ExchangeBreakdown,
   ExchangeQuery,
@@ -825,9 +825,14 @@ export interface ApiClient {
   requeueDeadLetters(queueName: string): Promise<number>;
 
   // - dashboard -
-  getDashboard(): Promise<DashboardData>;
-  // The counts over the exchange tables, which grow with traffic: asked for apart, so a slow one
-  // fills in on its own tile rather than holding up the page.
+  // One call per part, so a slow one fills in on its own tile rather than holding up the page.
+  /** The newest failed or badly answered exchanges of the last two weeks, at most six, newest first. */
+  getLatestFailures(): Promise<LatestFailure[]>;
+  /** Automatic retries waiting for their slot. */
+  getPendingRetries(): Promise<number>;
+  /** Queue alerts worth acting on. Null when the RabbitMQ management API is unavailable - never counts as zero. */
+  getQueueAlerts(): Promise<number | null>;
+  // The counts over the exchange tables, which grow with traffic.
   /**
    * Failures that are the newest attempt of their chain. Counts problems rather than attempts: a
    * chain retried nine times is one of these, not nine. Capped like the exchange search, so a value

SW.Bitween.Web/ClientApp/src/api/http/dashboard.ts

@@ -1,6 +1,5 @@
 import type { ApiClient } from "../client";
-import type { DashboardData, ExchangeStatus, RetrySummary } from "../types";
-import { subscriptionMethods } from "./subscriptions";
+import type { ExchangeStatus, LatestFailure, RetrySummary } from "../types";
 import { get } from "./request";
 
 // --- backend shapes (camelCase over the wire) ---
@@ -40,59 +39,46 @@ const LATEST = 6;
 
 const startedSince = (ms: number) => encodeURIComponent(`StartedOn:6:${new Date(Date.now() - ms).toISOString()}`);
 
+/**
+ * What the dashboard shows beside the metrics (which come from /metrics/overview) and the
+ * subscription rows, one method per part so each can fill in on its own.
+ *
+ * Traffic, rates and the busiest used to be counted here, in the browser, from up to 1000
+ * exchanges fetched every minute: wrong at any volume above that, and a heavy query for every
+ * open dashboard. They come from the server's hourly metrics now.
+ */
 export const dashboardMethods = {
-  /**
-   * What the dashboard shows beside the metrics (which come from /metrics/overview): the latest
-   * failures, pending retries, queue alerts and subscriptions needing attention.
-   *
-   * Traffic, rates and the busiest used to be counted here, in the browser, from up to 1000
-   * exchanges fetched every minute: wrong at any volume above that, and a heavy query for every
-   * open dashboard. They come from the server's hourly metrics now; what is left here is small,
-   * bounded queries over the last two weeks. The counts over the exchange tables are asked for
-   * apart, below.
-   */
-  async getDashboard(): Promise<DashboardData> {
+  /** Two searches over the exchanges of the last two weeks: on a busy instance, seconds. */
+  async getLatestFailures(): Promise<LatestFailure[]> {
     const twoWeeks = startedSince(14 * 86_400_000);
     const latest = (status: number) =>
       get<SearchyResponse<RawXchangeForDashboard>>(
         `/xchanges?filter=${twoWeeks}&filter=${encodeURIComponent(`StatusFilter:1:${status}`)}&sort=StartedOn:2&size=${LATEST}`,
       );
 
-    const [failed, badResponses, delayedRes, alertsRaw, subscriptionRows] = await Promise.all([
-      latest(3),
-      latest(2),
-      get<SearchyResponse<unknown>>("/delayedretries?size=1"),
-      // Depends on RabbitMQ management being configured on the backend - don't let it take the
-      // rest of the dashboard down when it isn't; the "Queue alerts" tile flags it instead.
-      get<RawAlert[]>("/ops/alerts").catch(() => null),
-      subscriptionMethods.listSubscriptionRows(),
-    ]);
-
-    const subscriptionNameById = new Map(subscriptionRows.map((i) => [i.id, i.name]));
-    const latestFailures = [...failed.result, ...badResponses.result]
+    const [failed, badResponses] = await Promise.all([latest(3), latest(2)]);
+    return [...failed.result, ...badResponses.result]
       .sort((a, b) => b.startedOn.localeCompare(a.startedOn))
       .slice(0, LATEST)
       .map((r) => ({
         id: r.id,
         status: toStatus(r),
         subscriptionId: r.subscriptionId,
-        subscriptionName: r.subscriptionId !== null ? (subscriptionNameById.get(r.subscriptionId) ?? null) : null,
         informationTypeCode: r.documentName,
         on: r.startedOn,
         exception: r.exception,
       }));
+  },
 
-    return {
-      pendingRetries: delayedRes.totalCount,
-      queueAlerts: alertsRaw === null ? null : alertsRaw.filter((a) => a.severity !== "Info").length,
-      latestFailures,
-      attention: {
-        failingSubscriptions: subscriptionRows
-          .filter((i) => i.consecutiveFailures > 0)
-          .map((i) => ({ id: i.id, name: i.name, consecutiveFailures: i.consecutiveFailures })),
-        pausedSubscriptions: subscriptionRows.filter((i) => i.paused).map((i) => ({ id: i.id, name: i.name })),
-      },
-    };
+  async getPendingRetries(): Promise<number> {
+    return (await get<SearchyResponse<unknown>>("/delayedretries?size=1")).totalCount;
+  },
+
+  async getQueueAlerts(): Promise<number | null> {
+    // Depends on RabbitMQ management being configured on the backend; the "Queue alerts" tile
+    // flags it when it isn't.
+    const alerts = await get<RawAlert[]>("/ops/alerts").catch(() => null);
+    return alerts === null ? null : alerts.filter((a) => a.severity !== "Info").length;
   },
 
   /**

SW.Bitween.Web/ClientApp/src/api/queryKeys.ts

@@ -202,6 +202,9 @@ export const keys = {
   background: ["queue-health", "background"] as const,
   dashboard: ["dashboard"] as const,
   // Under the dashboard's own key, so whatever refreshes the dashboard refreshes these too.
+  dashboardLatestFailures: ["dashboard", "latest-failures"] as const,
+  dashboardPendingRetries: ["dashboard", "pending-retries"] as const,
+  dashboardQueueAlerts: ["dashboard", "queue-alerts"] as const,
   dashboardFailuresToActOn: ["dashboard", "failures-to-act-on"] as const,
   dashboardInFlight: ["dashboard", "in-flight"] as const,
   dashboardRetrySummary: ["dashboard", "retry-summary"] as const,

SW.Bitween.Web/ClientApp/src/api/types.ts

@@ -1852,23 +1852,14 @@ export interface RetrySummary {
   retriesLast7Days: { finished: number; succeeded: number };
 }
 
-export interface DashboardData {
-  pendingRetries: number;
-  /** Null when the RabbitMQ management API is unavailable - never counts as zero. */
-  queueAlerts: number | null;
-  latestFailures: {
-    id: string;
-    status: ExchangeStatus;
-    subscriptionId: number | null;
-    subscriptionName: string | null;
-    informationTypeCode: string;
-    on: string;
-    exception: string | null;
-  }[];
-  attention: {
-    failingSubscriptions: { id: number; name: string; consecutiveFailures: number }[];
-    pausedSubscriptions: { id: number; name: string }[];
-  };
+/** One of the dashboard's latest failures. */
+export interface LatestFailure {
+  id: string;
+  status: ExchangeStatus;
+  subscriptionId: number | null;
+  informationTypeCode: string;
+  on: string;
+  exception: string | null;
 }
 
 /**