@opengeni/react 0.13.0 → 0.15.0

package/src/components/machines/metric-history-chart.tsx

@@ -0,0 +1,298 @@
+// ----------------------------------------------------------------------------
+// MetricHistoryChart — the per-metric history visual on the machine detail view.
+//
+// A dependency-free SVG line/area chart tuned for the calm dark aesthetic:
+// a soft gradient fill, a smoothed stroke that draws itself in, whisper-quiet
+// gridlines, dashed threshold guides, and a hover crosshair with a mono readout.
+// It degrades honestly — a handful of points render as markers, zero points show
+// a quiet "no samples" note rather than an empty axis.
+//
+// Pure presentational: it takes plotted {t, v} points + a little config and owns
+// no data-fetching. `color` is any CSS color (pass a token var for theme-safety).
+// ----------------------------------------------------------------------------
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn";
+
+export type SeriesPoint = { t: number; v: number | null };
+
+export type MetricHistoryChartProps = {
+  points: SeriesPoint[];
+  /** Fixed ceiling (100 for %) or "auto" to fit the data with headroom. */
+  yMax?: number | "auto";
+  yMin?: number;
+  /** Format a value for the axis + readout (default: rounded + unit). */
+  format?: (v: number) => string;
+  unit?: string;
+  /** Stroke/fill hue — any CSS color; pass a token var to stay theme-safe. */
+  color?: string;
+  thresholds?: { warn?: number | undefined; crit?: number | undefined } | undefined;
+  height?: number;
+  /** Human range label for the empty state ("in the last hour"). */
+  rangeLabel?: string | undefined;
+  className?: string | undefined;
+};
+
+const PAD = { top: 10, right: 12, bottom: 18, left: 40 };
+
+function niceCeil(v: number): number {
+  if (v <= 0) return 1;
+  const mag = 10 ** Math.floor(Math.log10(v));
+  const n = v / mag;
+  const step = n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10;
+  return step * mag;
+}
+
+/** Catmull-Rom → cubic-bezier path so the line is smooth without overshooting. */
+function smoothPath(pts: Array<{ x: number; y: number }>): string {
+  if (pts.length === 0) return "";
+  if (pts.length === 1) return `M${pts[0]!.x},${pts[0]!.y}`;
+  let d = `M${pts[0]!.x},${pts[0]!.y}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i]!;
+    const p1 = pts[i]!;
+    const p2 = pts[i + 1]!;
+    const p3 = pts[i + 2] ?? p2;
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
+  }
+  return d;
+}
+
+function fmtClock(t: number): string {
+  const d = new Date(t);
+  return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
+}
+
+export function MetricHistoryChart({
+  points,
+  yMax = "auto",
+  yMin = 0,
+  format,
+  unit = "",
+  color = "var(--og-color-accent)",
+  thresholds,
+  height = 132,
+  rangeLabel = "in this range",
+  className,
+}: MetricHistoryChartProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [w, setW] = useState(560);
+  const [hover, setHover] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const cw = entries[0]?.contentRect.width;
+      if (cw && cw > 0) setW(cw);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const valued = points.filter(
+    (p): p is { t: number; v: number } => p.v != null && Number.isFinite(p.v),
+  );
+  const fmt = format ?? ((v: number) => `${Math.round(v)}${unit}`);
+
+  const H = height;
+  const plotW = Math.max(1, w - PAD.left - PAD.right);
+  const plotH = Math.max(1, H - PAD.top - PAD.bottom);
+
+  const dataMax = valued.length ? Math.max(...valued.map((p) => p.v)) : 1;
+  const top = yMax === "auto" ? niceCeil(Math.max(dataMax * 1.15, thresholds?.warn ?? 0, 1)) : yMax;
+  const span = Math.max(1e-6, top - yMin);
+
+  const tMin = valued.length ? valued[0]!.t : 0;
+  const tMax = valued.length ? valued[valued.length - 1]!.t : 1;
+  const tSpan = Math.max(1, tMax - tMin);
+
+  const xOf = (t: number) => PAD.left + ((t - tMin) / tSpan) * plotW;
+  const yOf = (v: number) =>
+    PAD.top + (1 - (Math.min(top, Math.max(yMin, v)) - yMin) / span) * plotH;
+
+  const pxPts = valued.map((p) => ({ x: xOf(p.t), y: yOf(p.v), t: p.t, v: p.v }));
+  const sparse = pxPts.length > 0 && pxPts.length <= 4;
+
+  const line = smoothPath(pxPts);
+  const area =
+    pxPts.length > 1
+      ? `${line} L${pxPts[pxPts.length - 1]!.x},${PAD.top + plotH} L${pxPts[0]!.x},${PAD.top + plotH} Z`
+      : "";
+
+  // y gridlines at 0 / mid / top
+  const yTicks = [yMin, yMin + span / 2, top];
+  const gid = `og-mh-${Math.round(top)}-${Math.round(color.length)}`;
+
+  const hoverPt = hover != null ? pxPts[hover] : null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn("relative w-full select-none", className)}
+      style={{ height: H }}
+      data-metric-chart
+    >
+      {valued.length === 0 ? (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-og-xs text-og-fg-subtle">No samples {rangeLabel}</span>
+        </div>
+      ) : (
+        <svg
+          width={w}
+          height={H}
+          className="overflow-visible"
+          role="img"
+          onMouseLeave={() => setHover(null)}
+          onMouseMove={(e) => {
+            const rect = (e.currentTarget as SVGSVGElement).getBoundingClientRect();
+            const mx = e.clientX - rect.left;
+            let best = 0;
+            let bestD = Infinity;
+            for (let i = 0; i < pxPts.length; i++) {
+              const d = Math.abs(pxPts[i]!.x - mx);
+              if (d < bestD) {
+                bestD = d;
+                best = i;
+              }
+            }
+            setHover(best);
+          }}
+        >
+          <defs>
+            <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={color} stopOpacity="0.26" />
+              <stop offset="100%" stopColor={color} stopOpacity="0" />
+            </linearGradient>
+          </defs>
+
+          {/* gridlines + y labels */}
+          {yTicks.map((v, i) => {
+            const y = yOf(v);
+            return (
+              <g key={`yt-${v}`}>
+                <line
+                  x1={PAD.left}
+                  x2={w - PAD.right}
+                  y1={y}
+                  y2={y}
+                  stroke="var(--og-color-border)"
+                  strokeOpacity={i === 0 ? 0.9 : 0.4}
+                  strokeWidth={1}
+                />
+                <text
+                  x={PAD.left - 8}
+                  y={y + 3}
+                  textAnchor="end"
+                  className="font-og-mono"
+                  fontSize={10}
+                  fill="var(--og-color-fg-subtle)"
+                >
+                  {fmt(v)}
+                </text>
+              </g>
+            );
+          })}
+
+          {/* threshold guides */}
+          {(["warn", "crit"] as const).map((k) => {
+            const tv = thresholds?.[k];
+            if (tv == null || tv > top) return null;
+            const y = yOf(tv);
+            const stroke =
+              k === "crit" ? "var(--og-color-status-failed)" : "var(--og-color-status-waiting)";
+            return (
+              <line
+                key={k}
+                x1={PAD.left}
+                x2={w - PAD.right}
+                y1={y}
+                y2={y}
+                stroke={stroke}
+                strokeOpacity={0.5}
+                strokeWidth={1}
+                strokeDasharray="3 4"
+              />
+            );
+          })}
+
+          {/* x time ticks (first + last) */}
+          {valued.length > 1 &&
+            [tMin, tMax].map((t, i) => (
+              <text
+                key={i === 0 ? "x-start" : "x-end"}
+                x={i === 0 ? PAD.left : w - PAD.right}
+                y={H - 4}
+                textAnchor={i === 0 ? "start" : "end"}
+                className="font-og-mono"
+                fontSize={10}
+                fill="var(--og-color-fg-subtle)"
+              >
+                {fmtClock(t)}
+              </text>
+            ))}
+
+          {/* area + line */}
+          {area && <path d={area} fill={`url(#${gid})`} />}
+          <path
+            d={line}
+            fill="none"
+            stroke={color}
+            strokeWidth={1.75}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+            pathLength={1}
+            className="og-mh-draw"
+          />
+
+          {/* sparse markers */}
+          {sparse &&
+            pxPts.map((p) => <circle key={`m-${p.t}`} cx={p.x} cy={p.y} r={2.5} fill={color} />)}
+
+          {/* hover crosshair */}
+          {hoverPt && (
+            <g pointerEvents="none">
+              <line
+                x1={hoverPt.x}
+                x2={hoverPt.x}
+                y1={PAD.top}
+                y2={PAD.top + plotH}
+                stroke="var(--og-color-border-strong)"
+                strokeWidth={1}
+              />
+              <circle
+                cx={hoverPt.x}
+                cy={hoverPt.y}
+                r={3.5}
+                fill={color}
+                stroke="var(--og-color-bg)"
+                strokeWidth={1.5}
+              />
+            </g>
+          )}
+        </svg>
+      )}
+
+      {/* floating readout */}
+      {hoverPt && (
+        <div
+          className="pointer-events-none absolute z-10 flex flex-col rounded-og-sm border border-og-border-strong bg-og-surface-3/95 px-2 py-1 shadow-og-md backdrop-blur-sm"
+          style={{
+            left: Math.min(Math.max(hoverPt.x - 30, 0), w - 78),
+            top: Math.max(hoverPt.y - 42, 0),
+          }}
+        >
+          <span className="font-og-mono text-og-sm font-medium tabular-nums text-og-fg">
+            {fmt(hoverPt.v)}
+          </span>
+          <span className="font-og-mono text-[10px] tabular-nums text-og-fg-subtle">
+            {fmtClock(hoverPt.t)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/machines/metric-sparkline.tsx

@@ -0,0 +1,76 @@
+// ----------------------------------------------------------------------------
+// MetricSparkline — an axis-less micro-trend for stat tiles and (later) cards.
+// Same smoothing as the full chart, no chrome: a hairline + a faint fill and a
+// dot on the latest point. Fixed viewBox so it scales crisply at any width.
+// ----------------------------------------------------------------------------
+import type { SeriesPoint } from "./metric-history-chart";
+
+export type MetricSparklineProps = {
+  points: SeriesPoint[];
+  color?: string;
+  yMax?: number | "auto";
+  height?: number;
+  className?: string | undefined;
+};
+
+const VW = 120;
+
+export function MetricSparkline({
+  points,
+  color = "var(--og-color-accent)",
+  yMax = "auto",
+  height = 28,
+  className,
+}: MetricSparklineProps) {
+  const valued = points.filter(
+    (p): p is { t: number; v: number } => p.v != null && Number.isFinite(p.v),
+  );
+  if (valued.length < 2) {
+    return <div className={className} style={{ height }} aria-hidden />;
+  }
+  const vh = height;
+  const top = yMax === "auto" ? Math.max(1, ...valued.map((p) => p.v)) * 1.1 : yMax;
+  const tMin = valued[0]!.t;
+  const tSpan = Math.max(1, valued[valued.length - 1]!.t - tMin);
+  const xy = valued.map((p) => ({
+    x: ((p.t - tMin) / tSpan) * VW,
+    y: vh - (Math.min(top, Math.max(0, p.v)) / Math.max(1e-6, top)) * (vh - 2) - 1,
+  }));
+  let d = `M${xy[0]!.x},${xy[0]!.y}`;
+  for (let i = 0; i < xy.length - 1; i++) {
+    const p0 = xy[i - 1] ?? xy[i]!;
+    const p1 = xy[i]!;
+    const p2 = xy[i + 1]!;
+    const p3 = xy[i + 2] ?? p2;
+    d += `C${p1.x + (p2.x - p0.x) / 6},${p1.y + (p2.y - p0.y) / 6} ${p2.x - (p3.x - p1.x) / 6},${p2.y - (p3.y - p1.y) / 6} ${p2.x},${p2.y}`;
+  }
+  const last = xy[xy.length - 1]!;
+  const gid = `spark-${Math.round(top)}-${color.length}`;
+  return (
+    <svg
+      viewBox={`0 0 ${VW} ${vh}`}
+      preserveAspectRatio="none"
+      className={className}
+      style={{ height, width: "100%" }}
+      aria-hidden
+    >
+      <defs>
+        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity="0.22" />
+          <stop offset="100%" stopColor={color} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={`${d} L${last.x},${vh} L${xy[0]!.x},${vh} Z`} fill={`url(#${gid})`} />
+      <path
+        d={d}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.25}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
+      />
+      <circle cx={last.x} cy={last.y} r={1.6} fill={color} vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}

package/src/components/machines/series.ts

@@ -0,0 +1,113 @@
+// Shared series helpers: project a MetricSample[] into per-metric {t, v} points,
+// and the metric catalog the detail view + tiles iterate over.
+import type { MetricSample } from "../../types/machines";
+import type { SeriesPoint } from "./metric-history-chart";
+
+export type MetricWindow = "15m" | "1h" | "6h" | "24h";
+export const METRIC_WINDOWS: MetricWindow[] = ["15m", "1h", "6h", "24h"];
+
+export const WINDOW_LABEL: Record<MetricWindow, string> = {
+  "15m": "in the last 15 min",
+  "1h": "in the last hour",
+  "6h": "in the last 6 hours",
+  "24h": "in the last 24 hours",
+};
+
+function ptsFrom(samples: MetricSample[], pick: (s: MetricSample) => number | null): SeriesPoint[] {
+  return samples.map((s) => ({ t: new Date(s.sampledAt).getTime(), v: pick(s) }));
+}
+
+const memPct = (s: MetricSample) =>
+  s.memTotalBytes > 0 ? (s.memUsedBytes / s.memTotalBytes) * 100 : null;
+const diskPct = (s: MetricSample) =>
+  s.diskTotalBytes > 0 ? (s.diskUsedBytes / s.diskTotalBytes) * 100 : null;
+
+export type MetricKey = "cpu" | "mem" | "disk" | "load" | "gpu";
+
+export type MetricDef = {
+  key: MetricKey;
+  title: string;
+  unit: string;
+  yMax: number | "auto";
+  color: string;
+  thresholds?: { warn?: number; crit?: number };
+  pick: (s: MetricSample) => number | null;
+  /** Big current-value string for tiles/badges. */
+  current: (s: MetricSample) => string;
+  /** Optional sub-line under the current value. */
+  sub?: (s: MetricSample) => string | null;
+};
+
+const fmtBytes = (b: number): string => {
+  if (b < 1024) return `${b} B`;
+  const u = ["KB", "MB", "GB", "TB"];
+  let v = b / 1024;
+  for (const unit of u) {
+    if (v < 1024 || unit === "TB") return `${v.toFixed(v < 10 ? 1 : 0)} ${unit}`;
+    v /= 1024;
+  }
+  return `${b} B`;
+};
+
+// The catalog. GPU is included but the detail view only renders it when the
+// latest sample actually reports a GPU (gpuUtilPct != null).
+export const METRICS: MetricDef[] = [
+  {
+    key: "cpu",
+    title: "CPU",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-accent)",
+    thresholds: { warn: 90, crit: 98 },
+    pick: (s) => s.cpuPct,
+    current: (s) => `${Math.round(s.cpuPct)}%`,
+    sub: (s) => `${s.runQueue} in run queue`,
+  },
+  {
+    key: "mem",
+    title: "Memory",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-status-idle)",
+    thresholds: { warn: 85, crit: 95 },
+    pick: memPct,
+    current: (s) => `${Math.round(memPct(s) ?? 0)}%`,
+    sub: (s) => `${fmtBytes(s.memUsedBytes)} / ${fmtBytes(s.memTotalBytes)}`,
+  },
+  {
+    key: "disk",
+    title: "Disk",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-status-waiting)",
+    thresholds: { warn: 90, crit: 96 },
+    pick: diskPct,
+    current: (s) => `${Math.round(diskPct(s) ?? 0)}%`,
+    sub: (s) => `${fmtBytes(s.diskUsedBytes)} / ${fmtBytes(s.diskTotalBytes)}`,
+  },
+  {
+    key: "load",
+    title: "Load average",
+    unit: "",
+    yMax: "auto",
+    color: "var(--og-color-accent-strong)",
+    pick: (s) => s.load1,
+    current: (s) => s.load1.toFixed(2),
+    sub: (s) => `5m ${s.load5.toFixed(2)} · 15m ${s.load15.toFixed(2)}`,
+  },
+  {
+    key: "gpu",
+    title: "GPU",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-status-running)",
+    thresholds: { warn: 90, crit: 98 },
+    pick: (s) => s.gpuUtilPct,
+    current: (s) => (s.gpuUtilPct == null ? "—" : `${Math.round(s.gpuUtilPct)}%`),
+    sub: (s) => (s.gpuMemBytes == null ? null : `${fmtBytes(s.gpuMemBytes)} used`),
+  },
+];
+
+export function pointsFor(def: MetricDef, samples: MetricSample[]): SeriesPoint[] {
+  return ptsFrom(samples, def.pick);
+}

package/src/components/machines-dashboard.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import { LaptopIcon, PlusIcon, RefreshCwIcon } from "lucide-react";
 import { cn } from "../lib/cn";
-import type { MachineView } from "../types/machines";
+import type { MachineView, MetricSample } from "../types/machines";
 import { MachineCard } from "./machine-card";
 
 export type MachinesDashboardProps = {
@@ -14,6 +14,12 @@ export type MachinesDashboardProps = {
   onAttach?: ((machine: MachineView) => void) | undefined;
   /** The sandbox id currently being attached/swapped to (disables that card). */
   attachingSandboxId?: string | null | undefined;
+  /** Short recent history per machine (keyed by sandboxId) — drives card sparklines. */
+  seriesByMachine?: Record<string, MetricSample[]> | undefined;
+  /** Open the per-machine telemetry detail (makes each card actionable). */
+  onOpenDetail?: ((machine: MachineView) => void) | undefined;
+  /** Shared clock so freshness/relative times render consistently across cards. */
+  now?: number | undefined;
   /** Open the enrollment flow (the "Enroll a machine" CTA). */
   onEnroll?: (() => void) | undefined;
   onRefresh?: (() => void) | undefined;
@@ -109,6 +115,9 @@ export function MachinesDashboard({
   error,
   onAttach,
   attachingSandboxId,
+  seriesByMachine,
+  onOpenDetail,
+  now,
   onEnroll,
   onRefresh,
   className,
@@ -162,6 +171,9 @@ export function MachinesDashboard({
               }}
               onAttach={onAttach}
               attaching={attachingSandboxId === machine.sandboxId}
+              series={seriesByMachine?.[machine.sandboxId]}
+              onOpenDetail={onOpenDetail}
+              now={now}
             />
           ))}
         </div>