The HUD (Heads-Up Display)

The Dashboard Pattern

KPI cards on top, charts in the middle, detail list at the bottom. From the real Host Health Monitor app:

Full Overview Page

Real code from the deployed Host Health Monitor:

export const OverviewPage = () => (
  <Flex flexDirection="column" gap={16} padding={16}>
    <Heading level={1}>Control Center — Live Health</Heading>

    {/* KPI Row */}
    <Flex gap={12} flexWrap="wrap">
      <MetricCard title="CPU" query={`timeseries val=avg(dt.host.cpu.usage),
        filter:{dt.entity.host == "${HOST_ID}"}
        | fieldsAdd latest=arrayAvg(val) | fields latest`} unit="%" />
      <MetricCard title="Memory" query={`timeseries val=avg(dt.host.memory.usage),
        filter:{dt.entity.host == "${HOST_ID}"}
        | fieldsAdd latest=arrayAvg(val) | fields latest`} unit="%" />
      <MetricCard title="Problems 24h" query={`fetch events, from:now()-24h
        | filter event.kind == "DAVIS_PROBLEM" | summarize count=count()`} />
    </Flex>

    {/* Charts */}
    <Flex gap={16} flexWrap="wrap">
      <TsChart title="CPU (2h)" query={`timeseries avg(dt.host.cpu.usage), from:-2h,
        filter:{dt.entity.host == "${HOST_ID}"}`} />
      <TsChart title="Memory (2h)" query={`timeseries avg(dt.host.memory.usage), from:-2h,
        filter:{dt.entity.host == "${HOST_ID}"}`} />
    </Flex>

    {/* SLO Status + Problem List */}
    <SloStatus />
    <ProblemList />
  </Flex>
);