@oneuptime/common 13.0.5 → 13.0.6

package/Tests/App/Dashboard/SloDashboardTemplateWidgets.test.tsx

@@ -20,20 +20,14 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
 /*
  * Mounts the widgets the SLO dashboard template actually ships — every one of
  * them, taken from getTemplateConfig(DashboardTemplateType.Slo) — through the
- * REAL renderers.
+ * REAL renderers, in the two states a reader meets them in: the toolbar on
+ * "All" (a freshly created dashboard) and one SLO picked.
  *
- * Everything else in the repo reads this template as a data structure: the
- * editorial suite (Types/Dashboard/SloDashboardTemplate.test.ts) pins which
- * widgets it carries and what arguments they hold, and the invariants suite
- * pins the grid. Neither ever renders one, so nothing catches the case where
- * the shipped ARGUMENTS and the renderer disagree: a template widget stuck on
- * its loading skeleton, a tile printing "null%" before the evaluation worker
- * has run, a chart drawing a broken frame over an empty series, or the one
- * guidance row rendering empty.
- *
- * Every assertion below starts from the template config rather than from
- * hand-built components, so a seventh SLO widget added to the template is
- * covered here without editing this file.
+ * The editorial and scoping suites read the template as data. Nothing there
+ * catches the shipped ARGUMENTS and the renderers disagreeing: an SLO widget
+ * stuck on a skeleton, a fresh dashboard that asks the reader to edit it, a
+ * tile printing "null%", the fleet list waiting for a pick it does not need,
+ * or a heading that renders empty.
  */
 
 const getItemMock: MockFunction = getJestMockFunction();
@@ -42,11 +36,7 @@ const aggregateMock: MockFunction = getJestMockFunction();
 const getCurrentProjectIdMock: MockFunction = getJestMockFunction();
 const lineChartRenderMock: MockFunction = getJestMockFunction();
 
-/*
- * The arrow wrappers are load bearing: jest.mock is hoisted above the compiled
- * requires, so the mock variables above are still unassigned when the factory
- * runs. Dereferencing them lazily, at call time, is what makes this work.
- */
+// Lazy dereference: jest.mock factories are hoisted above these assignments.
 jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
   return {
     __esModule: true,
@@ -84,13 +74,8 @@ jest.mock("../../../UI/Utils/Project", () => {
 });
 
 /*
- * recharts measures a 0x0 parent in jsdom, so the real chart would draw
- * nothing and every "did it mount a chart" assertion would pass for the wrong
- * reason. The stub records the props instead — which is where the reference
- * line lives — and renders a marker the assertions can count.
- *
- * (The real recharts SVG is exercised by SloWidgetChartRendering.test.tsx;
- * what is pinned here is which of the TEMPLATE's charts gets a target line.)
+ * recharts measures a 0x0 parent in jsdom, so the stub records the props —
+ * which is where the reference line lives — and renders a countable marker.
  */
 jest.mock("../../../UI/Components/Charts/Line/LineChart", () => {
   return {
@@ -106,7 +91,37 @@ jest.mock("../../../UI/Components/Charts/Line/LineChart", () => {
   };
 });
 
+// The SLO List links rows with a react-router Link.
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/AppLink/AppLink",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: { children: React.ReactNode }) => {
+        return React.createElement("a", null, props.children);
+      },
+    };
+  },
+);
+
+jest.mock("../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap", () => {
+  return {
+    __esModule: true,
+    default: {},
+    RouteUtil: {
+      populateRouteParams: () => {
+        return {
+          toString: () => {
+            return "/dashboard/slos/view";
+          },
+        };
+      },
+    },
+  };
+});
+
 import DashboardSloComponentElement from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardSloComponent";
+import DashboardSloListComponentElement from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardSloListComponent";
 import DashboardTextComponentElement from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent";
 import { DashboardBaseComponentProps } from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent";
 import ServiceLevelObjective from "../../../Models/DatabaseModels/ServiceLevelObjective";
@@ -117,6 +132,7 @@ import DashboardSloComponent, {
   SloWidgetDisplayType,
   SloWidgetMetric,
 } from "../../../Types/Dashboard/DashboardComponents/DashboardSloComponent";
+import DashboardSloListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardSloListComponent";
 import DashboardTextComponent from "../../../Types/Dashboard/DashboardComponents/DashboardTextComponent";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
 import {
@@ -127,12 +143,14 @@ import {
   DashboardTemplateType,
   getTemplateConfig,
 } from "../../../Types/Dashboard/DashboardTemplates";
+import DashboardVariable from "../../../Types/Dashboard/DashboardVariable";
 import DashboardViewConfig from "../../../Types/Dashboard/DashboardViewConfig";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import SloStatus from "../../../Types/ServiceLevelObjective/SloStatus";
 import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
 import TimeRange from "../../../Types/Time/TimeRange";
+import { SLO_WIDGET_NO_SELECTION_TEXT } from "../../../Utils/Dashboard/SloWidgetSource";
 import { SLO_NOT_EVALUATED_TEXT } from "../../../Utils/Slo/SloWidgetFormat";
 import ChartReferenceLineProps from "../../../UI/Components/Charts/Types/ReferenceLineProps";
 import SeriesPoint from "../../../UI/Components/Charts/Types/SeriesPoints";
@@ -149,70 +167,62 @@ const TEMPLATE_CONFIG: DashboardViewConfig | null = getTemplateConfig(
 );
 
 /*
- * Cast rather than guarded at every use: "the SLO template resolves to a
- * config at all" is asserted by the first test, which fails loudly before any
- * render assertion can fail confusingly.
+ * Cast rather than guarded at every use: "the template resolves to a config"
+ * is asserted by the first test, which fails loudly before any render test
+ * can fail confusingly.
  */
 const VIEW_CONFIG: DashboardViewConfig = TEMPLATE_CONFIG as DashboardViewConfig;
 
 const TEMPLATE_COMPONENTS: Array<DashboardBaseComponent> =
   TEMPLATE_CONFIG?.components || [];
 
-const SLO_WIDGETS: Array<DashboardSloComponent> = TEMPLATE_COMPONENTS.filter(
-  (component: DashboardBaseComponent): boolean => {
-    return component.componentType === DashboardComponentType.Slo;
-  },
-) as unknown as Array<DashboardSloComponent>;
+function ofType<T>(componentType: DashboardComponentType): Array<T> {
+  return TEMPLATE_COMPONENTS.filter(
+    (component: DashboardBaseComponent): boolean => {
+      return component.componentType === componentType;
+    },
+  ) as unknown as Array<T>;
+}
 
-const TEXT_WIDGETS: Array<DashboardTextComponent> = TEMPLATE_COMPONENTS.filter(
-  (component: DashboardBaseComponent): boolean => {
-    return component.componentType === DashboardComponentType.Text;
-  },
-) as unknown as Array<DashboardTextComponent>;
+const SLO_WIDGETS: Array<DashboardSloComponent> = ofType<DashboardSloComponent>(
+  DashboardComponentType.Slo,
+);
+const SLO_LIST_WIDGETS: Array<DashboardSloListComponent> =
+  ofType<DashboardSloListComponent>(DashboardComponentType.SloList);
+const TEXT_WIDGETS: Array<DashboardTextComponent> =
+  ofType<DashboardTextComponent>(DashboardComponentType.Text);
 
 const TILE_WIDGETS: Array<DashboardSloComponent> = SLO_WIDGETS.filter(
   (widget: DashboardSloComponent): boolean => {
     return widget.arguments.displayType === SloWidgetDisplayType.Tile;
   },
 );
-
 const CHART_WIDGETS: Array<DashboardSloComponent> = SLO_WIDGETS.filter(
   (widget: DashboardSloComponent): boolean => {
     return widget.arguments.displayType === SloWidgetDisplayType.Chart;
   },
 );
 
-/** The widget's own label in a failure message — ids regenerate every call. */
-type GetWidgetLabelFunction = (widget: DashboardSloComponent) => string;
-
-const getWidgetLabel: GetWidgetLabelFunction = (
-  widget: DashboardSloComponent,
-): string => {
-  return widget.arguments.widgetTitle || "(untitled SLO widget)";
-};
-
-type GetWidgetMetricFunction = (
-  widget: DashboardSloComponent,
-) => SloWidgetMetric;
-
-const getWidgetMetric: GetWidgetMetricFunction = (
-  widget: DashboardSloComponent,
-): SloWidgetMetric => {
-  // Sli is the renderer's own fallback when the argument was never set.
-  return widget.arguments.sloMetric || SloWidgetMetric.Sli;
-};
+// The variables exactly as the template ships them: the toolbar on "All".
+const SHIPPED_VARIABLES: Array<DashboardVariable> =
+  TEMPLATE_CONFIG?.variables || [];
 
 // ── fixtures ──────────────────────────────────────────────────────────────
 
-const SLO_ID: ObjectID = new ObjectID("33333333-3333-4333-8333-333333333333");
 const PROJECT_ID: ObjectID = new ObjectID(
   "44444444-4444-4444-8444-444444444444",
 );
+const PICKED_SLO_ID: ObjectID = new ObjectID(
+  "33333333-3333-4333-8333-333333333333",
+);
+const SLO_NAME: string = "Checkout availability";
+
+const PICKED_VARIABLES: Array<DashboardVariable> = SHIPPED_VARIABLES.map(
+  (variable: DashboardVariable): DashboardVariable => {
+    return { ...variable, selectedValue: SLO_NAME };
+  },
+);
 
-/*
- * A CUSTOM range pins the chart window to fixed instants; a relative range
- * would resolve against the wall clock on every render.
- */
 const START_DATE: Date = new Date("2026-08-10T00:00:00.000Z");
 const END_DATE: Date = new Date("2026-08-10T06:00:00.000Z");
 
@@ -221,109 +231,57 @@ const DASHBOARD_RANGE: RangeStartAndEndDateTime = {
   startAndEndDate: new InBetween<Date>(START_DATE, END_DATE),
 };
 
-/*
- * The dashboard canvas is twelve units wide, so this is the width a real
- * board is laid out against; the helpers below turn each widget's DECLARED
- * units into the pixel box the canvas would give it.
- */
 const TOTAL_DASHBOARD_WIDTH_IN_PX: number = 1200;
-
-const SLO_NAME: string = "Checkout availability";
 const TARGET_PERCENTAGE: number = 99.9;
-const SLI_PERCENTAGE: number = 99.95;
-const BUDGET_REMAINING_PERCENTAGE: number = 42.5;
-const BUDGET_REMAINING_SECONDS: number = 3600;
-const BURN_RATE: number = 1.25;
-
-/**
- * What each tile must render for the row above. Written out rather than
- * computed so a change in the formatter's rounding or units fails here:
- * the SLI keeps three decimals, the budget percentage one, the budget
- * seconds collapse to whole minutes (3600s -> 60 min) and burn rate is a
- * multiplier.
- *
- * "×" is U+00D7 MULTIPLICATION SIGN, spelled as an escape so a mangled
- * file encoding cannot make this pass by accident.
- */
+const HISTORY_ROW_COUNT: number = 8;
+
 interface TileExpectation {
   value: string;
   subline: string | null;
 }
 
+/*
+ * Written out rather than computed, so a change in the formatter's rounding
+ * or units fails here. "×" is U+00D7 MULTIPLICATION SIGN.
+ */
 const EXPECTED_TILE: Record<SloWidgetMetric, TileExpectation> = {
-  [SloWidgetMetric.Sli]: {
-    value: "99.95%",
-    subline: "target 99.9%",
-  },
+  [SloWidgetMetric.Sli]: { value: "99.95%", subline: "target 99.9%" },
   [SloWidgetMetric.ErrorBudgetRemaining]: {
     value: "42.5%",
     subline: "60 min remaining",
   },
-  [SloWidgetMetric.BurnRate]: {
-    value: "1.25×",
-    subline: null,
-  },
+  [SloWidgetMetric.BurnRate]: { value: "1.25×", subline: null },
 };
 
-/** The renderer's own copy of these strings; neither is exported. */
-const SETUP_MESSAGE: string = "Click to select an SLO";
-const EMPTY_HISTORY_MESSAGE: RegExp = /No history for the selected/i;
-
-type BuildSloFunction = (data?: {
-  hasTarget?: boolean | undefined;
-}) => ServiceLevelObjective;
+type BuildSloFunction = (
+  overrides?: Partial<ServiceLevelObjective>,
+) => ServiceLevelObjective;
 
 const buildSlo: BuildSloFunction = (
-  data: { hasTarget?: boolean | undefined } = {},
+  overrides: Partial<ServiceLevelObjective> = {},
 ): ServiceLevelObjective => {
   const slo: ServiceLevelObjective = new ServiceLevelObjective();
+  slo._id = PICKED_SLO_ID.toString();
   slo.name = SLO_NAME;
-  slo.currentSliPercentage = SLI_PERCENTAGE;
-  slo.errorBudgetRemainingPercentage = BUDGET_REMAINING_PERCENTAGE;
-  slo.errorBudgetRemainingSeconds = BUDGET_REMAINING_SECONDS;
-  slo.currentBurnRate = BURN_RATE;
+  slo.targetPercentage = TARGET_PERCENTAGE;
+  slo.currentSliPercentage = 99.95;
+  slo.errorBudgetRemainingPercentage = 42.5;
+  slo.errorBudgetRemainingSeconds = 3600;
+  slo.currentBurnRate = 1.25;
   slo.sloStatus = SloStatus.Healthy;
-
-  /*
-   * `targetPercentage` is nullable on the model, so leaving it unset is a
-   * state a real SLO can be in — and the reference-line rule turns on it.
-   */
-  if (data.hasTarget !== false) {
-    slo.targetPercentage = TARGET_PERCENTAGE;
-  }
-
-  return slo;
+  return Object.assign(slo, overrides);
 };
 
-/**
- * An SLO the evaluation worker has not reached yet. The target is set at
- * creation time, but every state column it maintains is empty — as NULL from
- * Postgres, or absent altogether once a JSON round-trip drops it, which is
- * why both shapes are exercised.
- */
-type BuildUnevaluatedSloFunction = (
-  stateValue: null | undefined,
-) => ServiceLevelObjective;
-
-const buildUnevaluatedSlo: BuildUnevaluatedSloFunction = (
-  stateValue: null | undefined,
-): ServiceLevelObjective => {
-  const slo: ServiceLevelObjective = new ServiceLevelObjective();
-  slo.name = SLO_NAME;
-  slo.targetPercentage = TARGET_PERCENTAGE;
-
-  const emptyState: Record<string, null | undefined> = {
-    currentSliPercentage: stateValue,
-    errorBudgetRemainingPercentage: stateValue,
-    errorBudgetRemainingSeconds: stateValue,
-    currentBurnRate: stateValue,
-    sloStatus: stateValue,
-  };
-
-  return Object.assign(slo, emptyState) as unknown as ServiceLevelObjective;
-};
+const FLEET: Array<ServiceLevelObjective> = [
+  buildSlo({
+    _id: ObjectID.generate().toString(),
+    name: "Payments API",
+    errorBudgetRemainingPercentage: 3,
+    sloStatus: SloStatus.AtRisk,
+  }),
+  buildSlo(),
+];
 
-/** One SloHistory bucket every five minutes, oldest first. */
 type BuildSloHistoryFunction = (rowCount: number) => AggregatedResult;
 
 const buildSloHistory: BuildSloHistoryFunction = (
@@ -343,30 +301,42 @@ const buildSloHistory: BuildSloHistoryFunction = (
   return { data: rows } as unknown as AggregatedResult;
 };
 
-const HISTORY_ROW_COUNT: number = 8;
+/*
+ * One ModelAPI.getList, two callers: an SLO widget looks a picked name up with
+ * a two-row read; the SLO List reads the fleet with its own cap.
+ */
+type RespondToListFunction = (args: JSONObject) => JSONObject;
+
+let sloForNameLookup: ServiceLevelObjective = buildSlo();
+
+const respondToList: RespondToListFunction = (args: JSONObject): JSONObject => {
+  if (args["limit"] === 2) {
+    return { data: [sloForNameLookup], count: 1 };
+  }
+
+  return { data: FLEET, count: FLEET.length };
+};
 
 // ── rendering ─────────────────────────────────────────────────────────────
 
-type BuildPropsFunction = (
-  component: DashboardBaseComponent,
-) => DashboardBaseComponentProps;
+type BuildPropsFunction = (data: {
+  component: DashboardBaseComponent;
+  variables: Array<DashboardVariable>;
+}) => DashboardBaseComponentProps;
 
-const buildBaseProps: BuildPropsFunction = (
-  component: DashboardBaseComponent,
-): DashboardBaseComponentProps => {
-  /*
-   * Size every widget the way the canvas does — from the units the TEMPLATE
-   * declares — so the renderers' height-dependent branches (the Text widget
-   * scales its font to its row height, the chart reserves rows out of its
-   * tile) see the geometry the template actually ships rather than an
-   * arbitrary test number. A widget shrunk to a height-1 row in the template
-   * would then be exercised at that height here.
-   */
+/*
+ * Size every widget the way the canvas does — from the units the TEMPLATE
+ * declares — so height-dependent branches see the geometry actually shipped.
+ */
+const buildBaseProps: BuildPropsFunction = (data: {
+  component: DashboardBaseComponent;
+  variables: Array<DashboardVariable>;
+}): DashboardBaseComponentProps => {
   return {
-    componentId: component.componentId,
+    componentId: data.component.componentId,
     isEditMode: false,
     isSelected: false,
-    key: component.componentId.toString(),
+    key: data.component.componentId.toString(),
     onComponentUpdate: (): void => {
       // No widget on this template writes back through this.
     },
@@ -376,75 +346,54 @@ const buildBaseProps: BuildPropsFunction = (
     dashboardCanvasWidthInPx: TOTAL_DASHBOARD_WIDTH_IN_PX,
     dashboardCanvasHeightInPx: 800,
     dashboardComponentHeightInPx: GetHeightOfDashboardComponent(
-      component.heightInDashboardUnits,
+      data.component.heightInDashboardUnits,
       TOTAL_DASHBOARD_WIDTH_IN_PX,
     ),
     dashboardComponentWidthInPx: GetWidthOfDashboardComponent(
-      component.widthInDashboardUnits,
+      data.component.widthInDashboardUnits,
       TOTAL_DASHBOARD_WIDTH_IN_PX,
     ),
     dashboardViewConfig: VIEW_CONFIG,
     dashboardStartAndEndDate: DASHBOARD_RANGE,
     metricTypes: [],
     refreshTick: 0,
-    variables: undefined,
+    variables: data.variables,
   };
 };
 
-type RenderSloWidgetFunction = (widget: DashboardSloComponent) => RenderResult;
+type RenderSloWidgetFunction = (
+  widget: DashboardSloComponent,
+  variables: Array<DashboardVariable>,
+) => RenderResult;
 
 const renderSloWidget: RenderSloWidgetFunction = (
   widget: DashboardSloComponent,
+  variables: Array<DashboardVariable>,
 ): RenderResult => {
   return render(
     <DashboardSloComponentElement
-      {...buildBaseProps(widget)}
+      {...buildBaseProps({ component: widget, variables })}
       component={widget}
     />,
   );
 };
 
-type RenderTextWidgetFunction = (
-  widget: DashboardTextComponent,
-) => RenderResult;
+type LabelOfFunction = (widget: DashboardSloComponent) => string;
 
-const renderTextWidget: RenderTextWidgetFunction = (
-  widget: DashboardTextComponent,
-): RenderResult => {
-  return render(
-    <DashboardTextComponentElement
-      {...buildBaseProps(widget)}
-      component={widget}
-    />,
-  );
+const labelOf: LabelOfFunction = (widget: DashboardSloComponent): string => {
+  return widget.arguments.widgetTitle || "(untitled SLO widget)";
 };
 
-/**
- * Picking an objective in the settings panel writes exactly one argument
- * onto the stored widget. Cloned rather than mutated so the template's own
- * components stay unconfigured for every other test in this file.
- */
-type ConfigureSloWidgetFunction = (
-  widget: DashboardSloComponent,
-) => DashboardSloComponent;
+type CountRequestsFunction = () => number;
 
-const configureSloWidget: ConfigureSloWidgetFunction = (
-  widget: DashboardSloComponent,
-): DashboardSloComponent => {
-  return {
-    ...widget,
-    arguments: {
-      ...widget.arguments,
-      serviceLevelObjectiveId: SLO_ID.toString(),
-    },
-  };
+const countRequests: CountRequestsFunction = (): number => {
+  return (
+    getItemMock.mock.calls.length +
+    getListMock.mock.calls.length +
+    aggregateMock.mock.calls.length
+  );
 };
 
-/*
- * Assertions carry the widget's title on both sides so a failure names the
- * offending widget rather than reporting `false !== true` for one of six
- * identical-looking renders.
- */
 type ExpectRenderedFunction = (data: {
   label: string;
   text: string | RegExp;
@@ -477,17 +426,6 @@ const expectNotRendered: ExpectNotRenderedFunction = (data: {
   ).toBe(`${data.label}: does not render "${String(data.text)}"`);
 };
 
-/** Requests the widget under test issued, whichever route it reached for. */
-type CountRequestsFunction = () => number;
-
-const countRequests: CountRequestsFunction = (): number => {
-  return (
-    getItemMock.mock.calls.length +
-    getListMock.mock.calls.length +
-    aggregateMock.mock.calls.length
-  );
-};
-
 type GetLastChartPropsFunction = () => LineChartStubProps;
 
 const getLastChartProps: GetLastChartPropsFunction = (): LineChartStubProps => {
@@ -499,9 +437,12 @@ const getLastChartProps: GetLastChartPropsFunction = (): LineChartStubProps => {
 
 beforeEach((): void => {
   jest.clearAllMocks();
+  sloForNameLookup = buildSlo();
   getCurrentProjectIdMock.mockReturnValue(PROJECT_ID);
   getItemMock.mockResolvedValue(buildSlo());
-  getListMock.mockResolvedValue({ data: [], count: 0, skip: 0, limit: 1 });
+  getListMock.mockImplementation((args: unknown) => {
+    return Promise.resolve(respondToList(args as JSONObject));
+  });
   aggregateMock.mockResolvedValue(buildSloHistory(HISTORY_ROW_COUNT));
 });
 
@@ -510,177 +451,138 @@ afterEach((): void => {
 });
 
 describe("SLO dashboard template — what it ships", () => {
-  test("resolves to a config carrying SLO widgets in both display types", () => {
+  test("resolves to SLO widgets in both display types, the SLO List, headings and the SLO variable", () => {
     /*
-     * Every loop below iterates one of these arrays, so an empty one would
-     * make those tests pass vacuously for ever. This is the guard.
+     * Every loop below iterates one of these arrays, so an empty one would make
+     * those tests pass vacuously for ever. This is the guard.
      */
     expect(TEMPLATE_CONFIG).not.toBeNull();
-    expect(SLO_WIDGETS.length).toBeGreaterThan(0);
-    expect(TEXT_WIDGETS.length).toBeGreaterThan(0);
     expect(TILE_WIDGETS.length).toBeGreaterThan(0);
     expect(CHART_WIDGETS.length).toBeGreaterThan(0);
-
-    /*
-     * A widget whose displayType was dropped would fall out of BOTH groups
-     * and be silently skipped by the display-type tests.
-     */
     expect(TILE_WIDGETS.length + CHART_WIDGETS.length).toBe(SLO_WIDGETS.length);
+    expect(SLO_LIST_WIDGETS).toHaveLength(1);
+    expect(TEXT_WIDGETS.length).toBeGreaterThan(0);
+    expect(SHIPPED_VARIABLES).toHaveLength(1);
 
-    /*
-     * The premise of the setup-state tests: a template cannot know a
-     * project's SLO ids, so it ships none. If this ever changes, the widget
-     * renders data instead of its setup state and the tests below become
-     * meaningless rather than failing for a good reason.
-     */
+    // The premise of everything below: every SLO widget follows that variable.
     for (const widget of SLO_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
       expect(
-        `${label}: ${widget.arguments.serviceLevelObjectiveId || "no objective"}`,
-      ).toBe(`${label}: no objective`);
+        `${labelOf(widget)}: pinned=${widget.arguments.serviceLevelObjectiveId || "none"} follows=${widget.arguments.serviceLevelObjectiveVariableId}`,
+      ).toBe(
+        `${labelOf(widget)}: pinned=none follows=${(SHIPPED_VARIABLES[0] as DashboardVariable).id}`,
+      );
     }
   });
 });
 
-describe("SLO dashboard template — unconfigured widgets", () => {
-  test("every SLO widget renders its own title in the setup state and queries nothing", async () => {
-    expect(SLO_WIDGETS.length).toBeGreaterThan(0);
-
+describe("SLO dashboard template — as created, with the toolbar on All", () => {
+  /*
+   * The complaint this rewrite answers: a fresh SLO dashboard opened on six
+   * inert "Click to select an SLO" widgets and a row telling the reader to
+   * edit it. Now every SLO widget names the one control that works in the view
+   * mode a new dashboard opens in — and asks nothing of the server until used.
+   */
+  test("every SLO widget asks for a toolbar pick under its own title, and reads nothing", async () => {
     for (const widget of SLO_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
+      const label: string = labelOf(widget);
       const requestsBefore: number = countRequests();
 
-      renderSloWidget(widget);
+      renderSloWidget(widget, SHIPPED_VARIABLES);
 
-      await expectRendered({ label: label, text: SETUP_MESSAGE });
+      await expectRendered({ label, text: SLO_WIDGET_NO_SELECTION_TEXT });
+      await expectRendered({ label, text: label });
+      expectNotRendered({ label, text: "Click to select an SLO" });
+      expectNotRendered({ label, text: SLO_NOT_EVALUATED_TEXT });
 
-      /*
-       * The title is what makes six identical placeholders tell the reader
-       * which tile is which before anything is configured — the reason the
-       * template sets widgetTitle on every one of them.
-       */
-      await expectRendered({ label: label, text: label });
-
-      /*
-       * A widget with no objective must not reach ANY endpoint: on a public
-       * dashboard the stored id is the authorization decision, so a request
-       * without one has nothing the server could scope.
-       */
       expect(`${label}: ${countRequests() - requestsBefore} requests`).toBe(
         `${label}: 0 requests`,
       );
+      expect(lineChartRenderMock).not.toHaveBeenCalled();
 
       cleanup();
     }
   });
 
-  test("an unconfigured Tile offers setup rather than claiming the SLO is unevaluated", async () => {
-    expect(TILE_WIDGETS.length).toBeGreaterThan(0);
-
-    for (const widget of TILE_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
-
-      renderSloWidget(widget);
-
-      await expectRendered({ label: label, text: SETUP_MESSAGE });
-
-      /*
-       * Two different empty states that must not be confused: "nothing is
-       * chosen" is the reader's next action, "not evaluated yet" is a claim
-       * about an SLO — and there is no SLO here to make it about.
-       */
-      expectNotRendered({ label: label, text: SLO_NOT_EVALUATED_TEXT });
-
-      cleanup();
-    }
-  });
-
-  test("an unconfigured Chart offers setup rather than mounting an empty chart", async () => {
-    expect(CHART_WIDGETS.length).toBeGreaterThan(0);
-
-    for (const widget of CHART_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
-      const chartsBefore: number = lineChartRenderMock.mock.calls.length;
-
-      renderSloWidget(widget);
+  test("reaches the toolbar prompt even before a project is resolved", async () => {
+    getCurrentProjectIdMock.mockReturnValue(null);
 
-      await expectRendered({ label: label, text: SETUP_MESSAGE });
+    for (const widget of SLO_WIDGETS) {
+      renderSloWidget(widget, SHIPPED_VARIABLES);
 
-      expect(
-        `${label}: ${lineChartRenderMock.mock.calls.length - chartsBefore} charts mounted`,
-      ).toBe(`${label}: 0 charts mounted`);
+      await expectRendered({
+        label: labelOf(widget),
+        text: SLO_WIDGET_NO_SELECTION_TEXT,
+      });
+      expectNotRendered({
+        label: labelOf(widget),
+        text: "No project selected.",
+      });
 
       cleanup();
     }
   });
 
-  test("reaches the setup state even before a project is resolved", async () => {
-    /*
-     * The unconfigured branch returns before the project check, so a board
-     * opened while the session's project is still unresolved shows the
-     * reader what to do instead of the "No project selected." error.
-     */
-    getCurrentProjectIdMock.mockReturnValue(null);
-
-    for (const widget of SLO_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
+  /*
+   * The fleet does not wait for anything: the SLO List queries the moment the
+   * dashboard is created, every active objective, least budget first.
+   */
+  test("the SLO List shows the fleet immediately", async () => {
+    const list: DashboardSloListComponent =
+      SLO_LIST_WIDGETS[0] as DashboardSloListComponent;
+
+    render(
+      <DashboardSloListComponentElement
+        {...buildBaseProps({ component: list, variables: SHIPPED_VARIABLES })}
+        component={list}
+      />,
+    );
 
-      renderSloWidget(widget);
+    expect(await screen.findAllByTestId("slo-list-row")).toHaveLength(
+      FLEET.length,
+    );
+    expect(screen.getByText("Service Level Objectives")).toBeInTheDocument();
 
-      await expectRendered({ label: label, text: SETUP_MESSAGE });
-      expectNotRendered({ label: label, text: "No project selected." });
+    const args: JSONObject = getListMock.mock.calls[0]![0] as JSONObject;
 
-      cleanup();
-    }
+    expect(args["query"]).toEqual({ projectId: PROJECT_ID, isArchived: false });
   });
 });
 
-describe("SLO dashboard template — a configured Objective Health tile", () => {
-  test("each tile renders its own metric's number and subline", async () => {
-    expect(TILE_WIDGETS.length).toBeGreaterThan(0);
-
-    const coveredMetrics: Set<SloWidgetMetric> = new Set<SloWidgetMetric>();
+describe("SLO dashboard template — with an SLO picked in the toolbar", () => {
+  test("each tile renders its own metric's number and subline, under the picked SLO's name", async () => {
+    const covered: Set<SloWidgetMetric> = new Set<SloWidgetMetric>();
 
     for (const widget of TILE_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
-      const metric: SloWidgetMetric = getWidgetMetric(widget);
+      const label: string = labelOf(widget);
+      const metric: SloWidgetMetric =
+        widget.arguments.sloMetric || SloWidgetMetric.Sli;
       const expected: TileExpectation = EXPECTED_TILE[metric];
 
-      coveredMetrics.add(metric);
+      covered.add(metric);
 
-      renderSloWidget(configureSloWidget(widget));
+      renderSloWidget(widget, PICKED_VARIABLES);
 
-      await expectRendered({ label: label, text: expected.value });
+      await expectRendered({ label, text: expected.value });
+      await expectRendered({ label, text: `${SLO_NAME} · ${label}` });
 
       if (expected.subline !== null) {
-        await expectRendered({ label: label, text: expected.subline });
+        await expectRendered({ label, text: expected.subline });
       }
 
       /*
-       * The three tiles read three different columns off the same row, so a
-       * tile wired to the wrong metric would still render a plausible
-       * number. Pin that each one renders ONLY its own.
+       * Three tiles read three columns off one row, so a tile wired to the
+       * wrong metric would still render a plausible number.
        */
       for (const otherMetric of Object.values(SloWidgetMetric)) {
-        if (otherMetric === metric) {
-          continue;
+        if (otherMetric !== metric) {
+          expectNotRendered({ label, text: EXPECTED_TILE[otherMetric].value });
         }
-
-        expectNotRendered({
-          label: label,
-          text: EXPECTED_TILE[otherMetric].value,
-        });
       }
 
       cleanup();
     }
 
-    /*
-     * The template is an SLO review in the order it is read — where the
-     * service is, how much room is left, how fast it is going — so all three
-     * numbers have to be on the board.
-     */
-    expect(coveredMetrics.size).toBe(Object.keys(EXPECTED_TILE).length);
+    expect(covered.size).toBe(Object.keys(EXPECTED_TILE).length);
   });
 
   test.each([
@@ -689,252 +591,154 @@ describe("SLO dashboard template — a configured Objective Health tile", () =>
   ])(
     "says the SLO is not evaluated yet for %s, never null or NaN",
     async (_shape: string, stateValue: null | undefined) => {
-      getItemMock.mockResolvedValue(buildUnevaluatedSlo(stateValue));
-
-      expect(TILE_WIDGETS.length).toBeGreaterThan(0);
+      sloForNameLookup = Object.assign(buildSlo(), {
+        currentSliPercentage: stateValue,
+        errorBudgetRemainingPercentage: stateValue,
+        errorBudgetRemainingSeconds: stateValue,
+        currentBurnRate: stateValue,
+        sloStatus: stateValue,
+      }) as unknown as ServiceLevelObjective;
 
       for (const widget of TILE_WIDGETS) {
-        const label: string = getWidgetLabel(widget);
-
+        const label: string = labelOf(widget);
         const { container }: RenderResult = renderSloWidget(
-          configureSloWidget(widget),
+          widget,
+          PICKED_VARIABLES,
         );
 
-        await expectRendered({ label: label, text: SLO_NOT_EVALUATED_TEXT });
-
-        /*
-         * The whole reason the not-evaluated state exists: the worker's
-         * columns are empty until it first runs, and formatting one of them
-         * anyway renders "null%" / "NaN%" at tile size.
-         */
-        const renderedText: string = container.textContent || "";
-        const leakedValue: RegExpMatchArray | null =
-          renderedText.match(/null|NaN|undefined/i);
-
-        expect(
-          `${label}: ${leakedValue ? leakedValue[0] : "no leaked value"}`,
-        ).toBe(`${label}: no leaked value`);
-
-        // Nor any of the numbers an evaluated SLO would have rendered.
-        for (const metric of Object.values(SloWidgetMetric)) {
-          expectNotRendered({
-            label: label,
-            text: EXPECTED_TILE[metric].value,
-          });
-        }
+        await expectRendered({ label, text: SLO_NOT_EVALUATED_TEXT });
+
+        const leaked: RegExpMatchArray | null = (
+          container.textContent || ""
+        ).match(/null|NaN|undefined/i);
+
+        expect(`${label}: ${leaked ? leaked[0] : "no leaked value"}`).toBe(
+          `${label}: no leaked value`,
+        );
 
         cleanup();
       }
     },
   );
-});
-
-describe("SLO dashboard template — the Error Budget Trends charts", () => {
-  test("an empty SloHistory series renders the empty state, not a chart", async () => {
-    aggregateMock.mockResolvedValue(buildSloHistory(0));
-
-    expect(CHART_WIDGETS.length).toBeGreaterThan(0);
 
+  test("every history chart plots the picked SLO's series by its id", async () => {
     for (const widget of CHART_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
-      const chartsBefore: number = lineChartRenderMock.mock.calls.length;
+      const label: string = labelOf(widget);
 
-      renderSloWidget(configureSloWidget(widget));
+      aggregateMock.mockClear();
+      renderSloWidget(widget, PICKED_VARIABLES);
 
-      await expectRendered({ label: label, text: EMPTY_HISTORY_MESSAGE });
+      await expectRendered({ label, text: `points:${HISTORY_ROW_COUNT}` });
 
-      /*
-       * A chart mounted over zero points draws axes around nothing, which
-       * reads as a broken widget rather than as "the worker has not written
-       * anything inside this window yet".
-       */
-      expect(
-        `${label}: ${lineChartRenderMock.mock.calls.length - chartsBefore} charts mounted`,
-      ).toBe(`${label}: 0 charts mounted`);
+      const query: JSONObject = (
+        (aggregateMock.mock.calls[0]![0] as JSONObject)[
+          "aggregateBy"
+        ] as JSONObject
+      )["query"] as JSONObject;
+
+      expect(`${label}: ${(query["sloId"] as ObjectID).toString()}`).toBe(
+        `${label}: ${PICKED_SLO_ID.toString()}`,
+      );
 
       cleanup();
     }
   });
 
-  test("every chart plots the history it was given", async () => {
-    expect(CHART_WIDGETS.length).toBeGreaterThan(0);
-
+  test("the SLI history draws the objective's target as a reference line; the others draw none", async () => {
     for (const widget of CHART_WIDGETS) {
-      const label: string = getWidgetLabel(widget);
+      const label: string = labelOf(widget);
+      const isSli: boolean = widget.arguments.sloMetric === SloWidgetMetric.Sli;
 
-      renderSloWidget(configureSloWidget(widget));
+      renderSloWidget(widget, PICKED_VARIABLES);
 
-      await expectRendered({
-        label: label,
-        text: `points:${HISTORY_ROW_COUNT}`,
-      });
+      await expectRendered({ label, text: `points:${HISTORY_ROW_COUNT}` });
+
+      const referenceLines: Array<ChartReferenceLineProps> =
+        getLastChartProps().referenceLines || [];
+
+      if (isSli) {
+        expect(referenceLines).toHaveLength(1);
+        expect(referenceLines[0]!.value).toBe(TARGET_PERCENTAGE);
+        expect(referenceLines[0]!.label).toBe(`Target ${TARGET_PERCENTAGE}%`);
+      } else {
+        expect(`${label}: ${referenceLines.length} reference lines`).toBe(
+          `${label}: 0 reference lines`,
+        );
+      }
 
       cleanup();
     }
   });
 
-  test("the SLI chart draws the objective's target as a reference line", async () => {
-    const sliChart: DashboardSloComponent | undefined = CHART_WIDGETS.find(
-      (widget: DashboardSloComponent): boolean => {
-        return getWidgetMetric(widget) === SloWidgetMetric.Sli;
-      },
-    );
-
-    /*
-     * "Are we above the line" is the question the Error Budget Trends row
-     * exists to answer at a glance, so the template must carry an SLI chart
-     * for this test to be about anything.
-     */
-    expect(sliChart).toBeDefined();
+  test("an empty history renders the empty state, not an empty chart", async () => {
+    aggregateMock.mockResolvedValue(buildSloHistory(0));
 
-    renderSloWidget(configureSloWidget(sliChart as DashboardSloComponent));
+    for (const widget of CHART_WIDGETS) {
+      const label: string = labelOf(widget);
+      const chartsBefore: number = lineChartRenderMock.mock.calls.length;
 
-    await expectRendered({
-      label: "SLI chart",
-      text: `points:${HISTORY_ROW_COUNT}`,
-    });
+      renderSloWidget(widget, PICKED_VARIABLES);
 
-    const referenceLines: Array<ChartReferenceLineProps> =
-      getLastChartProps().referenceLines || [];
+      await expectRendered({ label, text: /No history for the selected/i });
+      expect(
+        `${label}: ${lineChartRenderMock.mock.calls.length - chartsBefore} charts`,
+      ).toBe(`${label}: 0 charts`);
 
-    expect(referenceLines.length).toBe(1);
-    expect(referenceLines[0]!.value).toBe(TARGET_PERCENTAGE);
-    expect(referenceLines[0]!.label).toBe(`Target ${TARGET_PERCENTAGE}%`);
+      cleanup();
+    }
   });
 
-  test("omits the target line when the SLO has no targetPercentage", async () => {
-    getItemMock.mockResolvedValue(buildSlo({ hasTarget: false }));
+  test("the SLO List narrows to the picked objective", async () => {
+    const list: DashboardSloListComponent =
+      SLO_LIST_WIDGETS[0] as DashboardSloListComponent;
 
-    const sliChart: DashboardSloComponent | undefined = CHART_WIDGETS.find(
-      (widget: DashboardSloComponent): boolean => {
-        return getWidgetMetric(widget) === SloWidgetMetric.Sli;
-      },
+    render(
+      <DashboardSloListComponentElement
+        {...buildBaseProps({ component: list, variables: PICKED_VARIABLES })}
+        component={list}
+      />,
     );
 
-    expect(sliChart).toBeDefined();
-
-    renderSloWidget(configureSloWidget(sliChart as DashboardSloComponent));
+    await screen.findAllByTestId("slo-list-row");
 
-    /*
-     * The chart still has to draw — otherwise "no reference line" would be
-     * true because nothing rendered at all.
-     */
-    await expectRendered({
-      label: "SLI chart without a target",
-      text: `points:${HISTORY_ROW_COUNT}`,
-    });
-
-    /*
-     * A line at 0 (or at NaN) would read as a target of zero percent, which
-     * is a reliability claim the SLO never made.
-     */
-    expect(getLastChartProps().referenceLines || []).toEqual([]);
-  });
-
-  test("the budget and burn-rate charts never draw a target line", async () => {
-    const otherCharts: Array<DashboardSloComponent> = CHART_WIDGETS.filter(
-      (widget: DashboardSloComponent): boolean => {
-        return getWidgetMetric(widget) !== SloWidgetMetric.Sli;
-      },
-    );
-
-    expect(otherCharts.length).toBeGreaterThan(0);
-
-    for (const widget of otherCharts) {
-      const label: string = getWidgetLabel(widget);
-
-      renderSloWidget(configureSloWidget(widget));
-
-      await expectRendered({
-        label: label,
-        text: `points:${HISTORY_ROW_COUNT}`,
-      });
-
-      /*
-       * targetPercentage is a percentage of the SLI; drawn across a burn
-       * rate ("99.9x") or across remaining budget it is meaningless, and
-       * the SLO row carries one on every one of these renders.
-       */
-      const referenceLines: Array<ChartReferenceLineProps> =
-        getLastChartProps().referenceLines || [];
-
-      expect(`${label}: ${referenceLines.length} reference lines`).toBe(
-        `${label}: 0 reference lines`,
-      );
-
-      cleanup();
-    }
+    expect(
+      (getListMock.mock.calls[0]![0] as JSONObject)["query"] as JSONObject,
+    ).toEqual({ projectId: PROJECT_ID, isArchived: false, name: SLO_NAME });
   });
 });
 
 describe("SLO dashboard template — the text rows", () => {
-  test("every text row renders its configured sentence in full", () => {
-    expect(TEXT_WIDGETS.length).toBeGreaterThan(0);
-
+  test("every text row is a bold heading that renders its words in full at a legible size", () => {
     for (const widget of TEXT_WIDGETS) {
       const text: string = widget.arguments.text;
-      const { container }: RenderResult = renderTextWidget(widget);
-
-      const rendered: HTMLElement | null = screen.queryByText(text);
 
-      expect(`"${text}" -> "${rendered?.textContent ?? ""}"`).toBe(
-        `"${text}" -> "${text}"`,
+      render(
+        <DashboardTextComponentElement
+          {...buildBaseProps({
+            component: widget,
+            variables: SHIPPED_VARIABLES,
+          })}
+          component={widget}
+        />,
       );
 
-      // The renderer's own placeholder for a row with nothing to say.
-      expect(container.textContent).not.toContain("No text configured");
+      const rendered: HTMLElement = screen.getByText(text);
 
+      expect(rendered.textContent).toBe(text);
       /*
-       * Section headers are bold and the guidance row is not — the one
-       * visual cue that separates an instruction from a heading.
+       * No instruction row: every text row is a heading, which the renderer
+       * gives `font-semibold`.
        */
-      const expectedWeight: string = widget.arguments.isBold
-        ? "font-semibold"
-        : "font-normal";
-
       expect(
-        `"${text}" -> ${rendered?.className.includes(expectedWeight) ? expectedWeight : rendered?.className}`,
-      ).toBe(`"${text}" -> ${expectedWeight}`);
-
-      cleanup();
-    }
-  });
-
-  test("the guidance row renders the whole instruction at a legible size", () => {
-    /*
-     * Row 1 is the one instruction a reader needs on a freshly created SLO
-     * dashboard: every widget above is inert until an objective is picked,
-     * and the widgets' own "Click to select an SLO" does nothing in the view
-     * mode a template opens in. A clipped or empty render loses that.
-     */
-    const guidance: DashboardTextComponent | undefined = TEXT_WIDGETS.find(
-      (widget: DashboardTextComponent): boolean => {
-        return widget.topInDashboardUnits === 1;
-      },
-    );
+        `"${text}" bold=${rendered.className.includes("font-semibold")}`,
+      ).toBe(`"${text}" bold=true`);
 
-    expect(guidance).toBeDefined();
+      const fontSizeInPx: number = Number.parseFloat(rendered.style.fontSize);
 
-    const widget: DashboardTextComponent = guidance as DashboardTextComponent;
-    const text: string = widget.arguments.text;
+      expect(Number.isFinite(fontSizeInPx)).toBe(true);
+      expect(fontSizeInPx).toBeGreaterThan(0);
 
-    renderTextWidget(widget);
-
-    const rendered: HTMLElement = screen.getByText(text);
-
-    // Rendered whole: not the first clause, not an ellipsis.
-    expect(rendered.textContent).toBe(text);
-    expect((rendered.textContent || "").length).toBe(text.length);
-
-    /*
-     * The Text widget scales its font to the row height. A height-1 row that
-     * resolved to 0 (or to a non-number) would render the sentence
-     * invisibly while every text assertion above still passed.
-     */
-    const fontSizeInPx: number = Number.parseFloat(rendered.style.fontSize);
-
-    expect(Number.isFinite(fontSizeInPx)).toBe(true);
-    expect(fontSizeInPx).toBeGreaterThan(0);
-    expect(fontSizeInPx).toBeLessThanOrEqual(64);
+      cleanup();
+    }
   });
 });