The HUD (Heads-Up Display)

The Dashboard Pattern

KPI cards on top, charts in the middle, detail table at the bottom. Every real dashboard follows this layout.

KPI Cards

const KpiCard = ({ title, value }: { title: string; value: string }) => (
  <Flex flexDirection="column" alignItems="center" padding={16}
    style={{ background: "var(--dt-colors-background-surface)", borderRadius: 8, flex: 1 }}>
    <Text>{title}</Text>
    <Heading level={2}>{value}</Heading>
  </Flex>
);

// Usage:
<Flex gap={16}>
  <KpiCard title="Hosts" value={hostCount} />
  <KpiCard title="Avg CPU" value={`${avgCpu}%`} />
  <KpiCard title="Alerts" value={alertCount} />
</Flex>

Auto-Refresh

const { data } = useDql({
  query: `timeseries avg(dt.host.cpu.usage), from:-30m`,
  options: { refetchInterval: 30000 }  // refresh every 30s
});

Full Layout

<Flex flexDirection="column" gap={16} padding={32}>
  <TitleBar><TitleBar.Title>Infrastructure HUD</TitleBar.Title></TitleBar>

  {/* KPI row */}
  <Flex gap={16}>
    <KpiCard title="Hosts" value="42" />
    <KpiCard title="Avg CPU" value="67%" />
  </Flex>

  {/* Chart */}
  <div style={{ height: 300 }}>
    <TimeseriesChart data={convertToTimeseries(cpuData)} />
  </div>

  {/* Table */}
  <DataTable data={hostData?.records} columns={convertToColumns(hostData)} />
</Flex>

What's Next

Module 8 — App functions: serverless backend for external API calls and heavy processing.