@flame0510/project-aether 1.7.0 → 1.9.0

package/app/components/ui/TimeSeriesChart.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
+
+export interface TimeSeriesPoint {
+  /** Seconds since the epoch — the start of the bucket. */
+  ts: number;
+  /** The plotted value (an average over the bucket); null leaves a gap. */
+  value: number | null;
+  /** The bucket's peak, drawn as a light wash under the line and shown in the tooltip. */
+  peak?: number | null;
+}
+
+interface TimeSeriesChartProps {
+  /** What is plotted, for screen readers and the table caption. */
+  label: string;
+  points: TimeSeriesPoint[];
+  /** The x domain in seconds, so an empty stretch reads as "no data", not as a zoom. */
+  from: number;
+  to: number;
+  /** Seconds per point; two points further apart than 1.5 buckets are not joined. */
+  bucket: number;
+  yMax?: number;
+  unit?: string;
+  height?: number;
+  /** While a new range loads the previous render stays, dimmed. */
+  stale?: boolean;
+  formatTime: (ts: number) => string;
+}
+
+const PAD = { top: 12, right: 44, bottom: 22, left: 34 };
+
+/**
+ * One series over time: a 2px line for the value, a 10% wash up to the peak, a hairline
+ * grid at 0 / 50 / 100 %, the latest value labelled at the line's end. Hover or focus
+ * shows a crosshair snapped to the nearest point with its value and peak; the same data
+ * is available as a table. Plain SVG measured to its container, so text is never scaled.
+ */
+export function TimeSeriesChart({
+  label,
+  points,
+  from,
+  to,
+  bucket,
+  yMax = 100,
+  unit = '%',
+  height = 160,
+  stale = false,
+  formatTime,
+}: TimeSeriesChartProps) {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const clipId = `ts-clip-${useId().replace(/:/g, '')}`;
+  const [width, setWidth] = useState(0);
+  const [active, setActive] = useState<number | null>(null);
+
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => setWidth(Math.round(entry.contentRect.width)));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const plotW = Math.max(0, width - PAD.left - PAD.right);
+  const plotH = height - PAD.top - PAD.bottom;
+  const span = Math.max(1, to - from);
+  const x = (ts: number) => PAD.left + ((ts - from) / span) * plotW;
+  const y = (v: number) => PAD.top + plotH - (Math.max(0, Math.min(yMax, v)) / yMax) * plotH;
+
+  const valid = useMemo(() => points.filter((p) => p.value !== null), [points]);
+
+  // Runs of points close enough in time to be joined; a gap means no samples there.
+  const runs = useMemo(() => {
+    const out: TimeSeriesPoint[][] = [];
+    let run: TimeSeriesPoint[] = [];
+    for (const p of valid) {
+      const prev = run[run.length - 1];
+      if (prev && p.ts - prev.ts > bucket * 1.5) {
+        out.push(run);
+        run = [];
+      }
+      run.push(p);
+    }
+    if (run.length) out.push(run);
+    return out;
+  }, [valid, bucket]);
+
+  const linePath = (run: TimeSeriesPoint[]) =>
+    run.map((p, i) => `${i ? 'L' : 'M'}${x(p.ts).toFixed(1)},${y(p.value as number).toFixed(1)}`).join('');
+  const peakArea = (run: TimeSeriesPoint[]) => {
+    const top = run.map((p, i) => `${i ? 'L' : 'M'}${x(p.ts).toFixed(1)},${y(p.peak ?? (p.value as number)).toFixed(1)}`).join('');
+    const base = y(0).toFixed(1);
+    return `${top}L${x(run[run.length - 1].ts).toFixed(1)},${base}L${x(run[0].ts).toFixed(1)},${base}Z`;
+  };
+
+  const last = valid[valid.length - 1];
+  const shown = active !== null ? valid[active] : null;
+  const fmt = (v: number | null | undefined) => (v === null || v === undefined ? '—' : `${Math.round(v * 10) / 10}${unit}`);
+
+  function onPointerMove(e: PointerEvent<SVGRectElement>) {
+    if (!valid.length || plotW <= 0) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ts = from + ((e.clientX - rect.left) / rect.width) * span;
+    let best = 0;
+    for (let i = 1; i < valid.length; i++) {
+      if (Math.abs(valid[i].ts - ts) < Math.abs(valid[best].ts - ts)) best = i;
+    }
+    setActive(best);
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    if (!valid.length) return;
+    if (e.key === 'ArrowLeft') setActive((a) => Math.max(0, (a ?? valid.length) - 1));
+    else if (e.key === 'ArrowRight') setActive((a) => Math.min(valid.length - 1, (a ?? -1) + 1));
+    else if (e.key === 'Escape') setActive(null);
+    else return;
+    e.preventDefault();
+  }
+
+  const ticks = [from, from + span / 2, to];
+  const tooltipLeft = shown ? Math.min(Math.max(x(shown.ts), 70), Math.max(70, width - 70)) : 0;
+
+  return (
+    <div className="ui-chart" style={{ opacity: stale ? 0.5 : 1 }}>
+      <div
+        ref={boxRef}
+        className="ui-chart__plot"
+        style={{ height }}
+        tabIndex={0}
+        role="img"
+        aria-label={last ? `${label}: latest ${fmt(last.value)}` : `${label}: no data`}
+        onKeyDown={onKeyDown}
+        onFocus={() => setActive((a) => a ?? (valid.length ? valid.length - 1 : null))}
+        onBlur={() => setActive(null)}
+      >
+        {width > 0 && (
+          <svg width={width} height={height} aria-hidden="true">
+            {[0, 50, 100].map((v) => (
+              <g key={v}>
+                <line x1={PAD.left} x2={PAD.left + plotW} y1={y((v / 100) * yMax)} y2={y((v / 100) * yMax)} className="ui-chart__grid" />
+                <text x={PAD.left - 6} y={y((v / 100) * yMax) + 3} textAnchor="end" className="ui-chart__tick">
+                  {Math.round((v / 100) * yMax)}{unit}
+                </text>
+              </g>
+            ))}
+            {ticks.map((ts, i) => (
+              <text
+                key={i}
+                x={x(ts)}
+                y={height - 6}
+                textAnchor={i === 0 ? 'start' : i === 2 ? 'end' : 'middle'}
+                className="ui-chart__tick"
+              >
+                {formatTime(ts)}
+              </text>
+            ))}
+            <defs>
+              {/* Marks stay inside the plot, never over the axis labels. */}
+              <clipPath id={clipId}>
+                <rect x={PAD.left} y={0} width={plotW} height={PAD.top + plotH} />
+              </clipPath>
+            </defs>
+            <g clipPath={`url(#${clipId})`}>
+            {runs.map((run, i) => (
+              <g key={i}>
+                <path d={peakArea(run)} className="ui-chart__wash" />
+                {run.length > 1 && <path d={linePath(run)} className="ui-chart__line" />}
+                {run.length === 1 && <circle cx={x(run[0].ts)} cy={y(run[0].value as number)} r={2} className="ui-chart__dot" />}
+              </g>
+            ))}
+            </g>
+            {last && !shown && (
+              <g>
+                <circle cx={x(last.ts)} cy={y(last.value as number)} r={4} className="ui-chart__marker" />
+                <text x={x(last.ts) + 8} y={y(last.value as number) + 3} className="ui-chart__end-label">{fmt(last.value)}</text>
+              </g>
+            )}
+            {shown && (
+              <g>
+                <line x1={x(shown.ts)} x2={x(shown.ts)} y1={PAD.top} y2={PAD.top + plotH} className="ui-chart__crosshair" />
+                <circle cx={x(shown.ts)} cy={y(shown.value as number)} r={4} className="ui-chart__marker" />
+              </g>
+            )}
+            {!valid.length && (
+              <text x={PAD.left + plotW / 2} y={PAD.top + plotH / 2} textAnchor="middle" className="ui-chart__tick">No samples in this range</text>
+            )}
+            <rect
+              x={PAD.left}
+              y={PAD.top}
+              width={plotW}
+              height={plotH}
+              fill="transparent"
+              onPointerMove={onPointerMove}
+              onPointerLeave={() => setActive(null)}
+            />
+          </svg>
+        )}
+        {shown && (
+          <div className="ui-chart__tooltip" style={{ left: tooltipLeft }}>
+            <strong>{fmt(shown.value)}</strong>
+            {shown.peak !== undefined && <span className="ui-muted"> · peak {fmt(shown.peak)}</span>}
+            <div className="ui-muted">{formatTime(shown.ts)}</div>
+          </div>
+        )}
+      </div>
+      <details className="ui-chart__table">
+        <summary>Table</summary>
+        <table>
+          <caption>{label}</caption>
+          <thead>
+            <tr><th scope="col">Time</th><th scope="col">Value</th>{valid.some((p) => p.peak !== undefined) && <th scope="col">Peak</th>}</tr>
+          </thead>
+          <tbody>
+            {valid.map((p) => (
+              <tr key={p.ts}>
+                <td>{formatTime(p.ts)}</td>
+                <td>{fmt(p.value)}</td>
+                {p.peak !== undefined && <td>{fmt(p.peak)}</td>}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </details>
+    </div>
+  );
+}

package/app/components/ui/index.ts

@@ -19,3 +19,5 @@ export * from './Tabs';
 export * from './ItemList';
 export * from './TemplateOption';
 export { default as ModalityIcons, parseModality, type ParsedModality } from './ModalityIcons';
+export * from './Meter';
+export * from './TimeSeriesChart';

package/app/config/loading.tsx

@@ -1,10 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
-const PageSkeleton = () => (
-  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
-    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
-    <CardRowSkeleton count={5} height={48} />
-  </div>
-);
-
-export default PageSkeleton;
+export default function ConfigLoading() {
+  return <ListPageSkeleton />;
+}

package/app/containers/ContainersClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { Button, Pill } from '../components/ui';
 
 interface ContainerInfo {
@@ -85,7 +86,8 @@ export default function ContainersClient() {
                 {c.state === 'running' ? c.status.replace(/^Up\s+/, '') : c.status}
               </span>
               {c.state === 'running' && (
-                <a
+                // A client-side navigation (prefetched), not a full page reload.
+                <Link
                   href={`/containers/terminal/${encodeURIComponent(c.name)}`}
                   style={{
                     fontSize: 10,
@@ -100,7 +102,7 @@ export default function ContainersClient() {
                   }}
                 >
                   TERMINAL
-                </a>
+                </Link>
               )}
             </div>
 

package/app/containers/loading.tsx

@@ -1,21 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
 export default function ContainersLoading() {
-  return (
-    <div style={{
-      padding: '16px 20px',
-      maxWidth: 1080,
-      margin: '0 auto',
-      height: '100%',
-      boxSizing: 'border-box',
-      overflowY: 'auto',
-      WebkitOverflowScrolling: 'touch',
-      paddingBottom: 72,
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
-        <Skeleton width={140} height={20} accent />
-      </div>
-      <CardRowSkeleton count={4} height={56} />
-    </div>
-  );
+  return <ListPageSkeleton rows={4} rowHeight={56} titleWidth={140} />;
 }