Guard

Guard renders its children unchanged, unless a route says there is nothing for them: then it draws one EmptyState — the fallback — in their place. A tab of charts about a route that was never called draws "No calls yet" and a link to call it, rather than a page of empty charts. The blocks of a deleted record give way to one "Not found" rather than each failing on its own.

Preview Code

Connecting to the DMS preview…

static guardFallback = Guard({
  fetchUrl: "/api/block-preview/fixtures/alerts",
  when: "empty",
  fallback: {
    title: "No open alert",
    description: "Alerts show here when a monitor fails.",
    icon: "i-ph-bell-simple",
  },
})
  .child("stats", StatGroup({
    items: [{ eyebrow: "Open alerts", value: 3, tone: "error" }],
  }));

The fixed alert dataset is empty, so the fallback replaces the children. The static screenshot shows this same state when the live renderer is unavailable.

Usage

import { Guard } from "@antelopejs/interface-dms/base/guard";

static statistics = Guard({
  fetchUrl: "/api/routes/activity?route={{query.route}}", // answers { calls: 0 }
  periodScope: "api",
  realtimeTopic: "requests",
  field: "calls",
  fallback: {
    title: "$api.routes.statistics.idle_title",
    description: "$api.routes.statistics.idle_description",
    icon: "i-ph-moon-stars",
    actions: [{ label: "$api.routes.test", to: "/modules/api/routes?tab=tester" }],
  },
}).child("charts", Grid().child("row", GridRow().child("latency", ChartCard({ /* … */ }))));

Options

Recipes

One "Not found" for a detail page

static body = Guard({ fetchUrl: "/api/routes/{{params.id}}", when: "notFound" })
  .child("overview", KeyValueList({ fetchUrl: "/api/routes/{{params.id}}/summary" }))
  .child("activity", ActivityFeed({ fetchUrl: "/api/routes/{{params.id}}/activity" }));

The guard draws what a block whose source answers 404 draws: "Not found", the 404 body's message as its description, and the same icon. fallback is laid over these defaults (Not found).

Let the route say more

An emptyState object in the answer — or in the 404 body, for notFound — is laid over fallback, for what only the route knows: when the record was last used, or a link carrying its id.

Pitfalls

• The children show while the route loads, after any failure other than the condition (a 500, a timeout), and whenever the value is set. A realtime event, a new period or a page refresh that sets the value brings them back.
• Nothing is requested while a {{params.X}} / {{query.X}} token has no value, and the children show.
• Only what is inside gives way. Keep a toolbar or a table that should stay outside the guard.

Next steps