Host map

HostMap.tsxHexes laid out by zone, coloured by one metric on the five-step ramp, no-data drawn as its own state, a click scoped to the host.Copy

/**
 * One cell per machine, coloured by one metric, arranged by one grouping.
 * The grouping is what makes it diagnostic: hosts are placed by zone first,
 * so "one machine is hot" and "one whole zone is hot" look different, and
 * they are different incidents.
 */
export type Host = {
  id: string;
  zone: string;
  /** 0–1. null means no sample arrived, which is drawn as its own thing
   *  rather than as idle. */
  value: number | null;
};

/** Five steps of the sequential ramp. Full class names, because Tailwind
 *  only emits a class it can see written out. */
const RAMP = ["fill-scale-seq-1", "fill-scale-seq-2", "fill-scale-seq-3", "fill-scale-seq-4", "fill-scale-seq-5"];
const SWATCH = ["bg-scale-seq-1", "bg-scale-seq-2", "bg-scale-seq-3", "bg-scale-seq-4", "bg-scale-seq-5"];
const step = (v: number) => RAMP[Math.min(4, Math.floor(v * RAMP.length))];

/** Pointy-top hexagon. Every neighbour shares an edge, so a cluster of hot
 *  cells reads as a blob rather than a diagonal the eye has to assemble. */
const hex = (cx: number, cy: number, r: number) => {
  const w = Math.sqrt(3) * r;
  return [[cx, cy - r], [cx + w / 2, cy - r / 2], [cx + w / 2, cy + r / 2], [cx, cy + r], [cx - w / 2, cy + r / 2], [cx - w / 2, cy - r / 2]]
    .map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
};

export function HostMap({ hosts, metric, onSelectHost, columns = 7, r = 13 }: {
  hosts: Host[];
  /** What the colour means, for the legend and the cell tooltip. */
  metric: string;
  /** A cell goes somewhere scoped to that host. */
  onSelectHost: (host: Host) => void;
  columns?: number;
  r?: number;
}) {
  const w = Math.sqrt(3) * r;
  const zones = [...new Set(hosts.map((h) => h.zone))];
  const rows = Math.ceil(hosts.length / zones.length / columns);
  const width = w * (columns + 0.5) + 4;
  const height = r * (1.5 * rows + 0.5) + 4;

  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="grid gap-4 sm:grid-cols-3">
        {zones.map((zone) => {
          const members = hosts.filter((h) => h.zone === zone);
          const sampled = members.filter((h): h is Host & { value: number } => h.value !== null);
          const mean = sampled.reduce((a, h) => a + h.value, 0) / (sampled.length || 1);
          return (
            <div key={zone}>
              <p className="mb-2 flex justify-between text-xs uppercase tracking-wide text-muted-foreground">
                {zone}
                <span className="tabular-nums normal-case">{Math.round(mean * 100)}% mean</span>
              </p>
              <svg viewBox={`0 0 ${width} ${height}`} className="w-full" role="group" aria-label={`${members.length} hosts in ${zone}`}>
                {members.map((h, i) => {
                  const row = Math.floor(i / columns), col = i % columns;
                  const cx = 2 + w / 2 + col * w + (row % 2 ? w / 2 : 0);
                  const cy = 2 + r + row * 1.5 * r;
                  return (
                    <polygon
                      key={h.id}
                      points={hex(cx, cy, r)}
                      className={h.value === null ? "fill-none stroke-border" : step(h.value)}
                      strokeDasharray={h.value === null ? "2 2" : undefined}
                      role="button"
                      tabIndex={0}
                      onClick={() => onSelectHost(h)}
                      onKeyDown={(e) => e.key === "Enter" && onSelectHost(h)}
                    >
                      <title>{`${h.id}: ${h.value === null ? "no data" : `${Math.round(h.value * 100)}% ${metric}`}`}</title>
                    </polygon>
                  );
                })}
              </svg>
            </div>
          );
        })}
      </div>

      <div className="mt-3 flex items-center gap-1.5 text-[10px] text-muted-foreground">
        <span>Idle</span>
        {SWATCH.map((c) => <span key={c} className={`h-2 w-6 ${c}`} />)}
        <span>Saturated</span>
        <span className="ml-2 h-2 w-6 border border-dashed" />
        <span>no data</span>
      </div>
    </div>
  );
}

demo.tsxHow it is called: 105 hosts in three zones, one of them hot end to end.Copy

import { useState } from "react";
import { HostMap, type Host } from "./HostMap";

/**
 * A hundred and five hosts across three zones, CPU as a fraction. Two zones
 * sit between a fifth and three fifths; the third is hot end to end, which is
 * the incident the grouping exists to show. Clicking a cell is where a real
 * app would open the host, scoped.
 */
const ZONES: [string, number[]][] = [
  ["eu-west-1a", [0.37, 0.54, 0.33, 0.50, 0.28, 0.45, 0.23, 0.57, 0.35, 0.53, 0.31, 0.48, 0.27, 0.44, 0.22, 0.56, 0.34, 0.51, 0.29, 0.47, 0.25, 0.42, 0.37, 0.54, 0.33, 0.50, 0.28, 0.45, 0.23, 0.57, 0.35, 0.53, 0.31, 0.48, 0.27]],
  ["eu-west-1b", [0.37, 0.54, 0.33, 0.50, 0.28, 0.45, 0.23, 0.57, 0.35, 0.53, 0.31, 0.48, 0.27, 0.44, 0.22, 0.56, 0.34, 0.51, 0.29, 0.47, 0.25, 0.42, 0.37, 0.54, 0.33, 0.50, 0.28, 0.45, 0.23, 0.57, 0.35, 0.53, 0.31, 0.48, 0.27]],
  ["eu-west-1c", [0.76, 0.65, 0.71, 0.77, 0.67, 0.73, 0.62, 0.68, 0.74, 0.64, 0.70, 0.76, 0.65, 0.71, 0.77, 0.67, 0.73, 0.62, 0.68, 0.74, 0.64, 0.70, 0.76, 0.65, 0.71, 0.77, 0.67, 0.73, 0.62, 0.68, 0.74, 0.64, 0.70, 0.76, 0.65]],
];

const HOSTS: Host[] = ZONES.flatMap(([zone, values]) =>
  values.map((value, i) => ({ id: `${zone}-${String(i + 1).padStart(2, "0")}`, zone, value })),
);

export default function Demo() {
  const [picked, setPicked] = useState<Host | null>(null);
  return (
    <div>
      <HostMap hosts={HOSTS} metric="CPU" onSelectHost={setPicked} />
      {picked && (
        <p className="mt-2 text-xs text-muted-foreground">
          open {picked.id} at {Math.round((picked.value ?? 0) * 100)}% CPU
        </p>
      )}
    </div>
  );
}