fix: pad metrics charts to full 30-min window with null gaps

Instead of pre-filling server-side ring buffers with zeros, generate
a full 600-slot time grid on the client and use null for missing data
points. Recharts renders null values as gaps, cleanly distinguishing
"no data yet" from actual zero values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: AlexProgrammerDE

src/components/admin-metrics/server-metrics-charts.tsx

@@ -23,19 +23,7 @@ import type {
   GetServerMetricsResponse,
   ServerMetricsSnapshot,
 } from "@/generated/soulfire/metrics";
-
-function formatTime(snapshot: ServerMetricsSnapshot): string {
-  if (!snapshot.timestamp) return "";
-  const date = new Date(
-    Number(snapshot.timestamp.seconds) * 1000 +
-      snapshot.timestamp.nanos / 1_000_000,
-  );
-  return date.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-}
+import { padSnapshots } from "@/lib/metrics-utils";
 
 function formatMB(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(0)} MB`;
@@ -118,14 +106,18 @@ export function CpuUsageChart({
   const { t } = useTranslation("admin");
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        process:
-          s.processCpuLoad >= 0
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        process: s
+          ? s.processCpuLoad >= 0
             ? Number((s.processCpuLoad * 100).toFixed(1))
-            : 0,
-        system:
-          s.systemCpuLoad >= 0 ? Number((s.systemCpuLoad * 100).toFixed(1)) : 0,
+            : 0
+          : null,
+        system: s
+          ? s.systemCpuLoad >= 0
+            ? Number((s.systemCpuLoad * 100).toFixed(1))
+            : 0
+          : null,
       })),
     [snapshots],
   );
@@ -191,14 +183,15 @@ export function MemoryUsageChart({
   const { t } = useTranslation("admin");
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        used: Number(s.heapUsedBytes) / (1024 * 1024),
-        committed: Number(s.heapCommittedBytes) / (1024 * 1024),
-        max:
-          Number(s.heapMaxBytes) > 0
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        used: s ? Number(s.heapUsedBytes) / (1024 * 1024) : null,
+        committed: s ? Number(s.heapCommittedBytes) / (1024 * 1024) : null,
+        max: s
+          ? Number(s.heapMaxBytes) > 0
             ? Number(s.heapMaxBytes) / (1024 * 1024)
-            : undefined,
+            : undefined
+          : null,
       })),
     [snapshots],
   );
@@ -293,10 +286,10 @@ export function ThreadCountChart({
   const { t } = useTranslation("admin");
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        total: s.threadCount,
-        daemon: s.daemonThreadCount,
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        total: s ? s.threadCount : null,
+        daemon: s ? s.daemonThreadCount : null,
       })),
     [snapshots],
   );
@@ -354,10 +347,10 @@ export function AggregateBotsChart({
   const { t } = useTranslation("admin");
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        online: s.totalBotsOnline,
-        total: s.totalBotsTotal,
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        online: s ? s.totalBotsOnline : null,
+        total: s ? s.totalBotsTotal : null,
       })),
     [snapshots],
   );

src/components/instance-metrics/metrics-charts.tsx

@@ -29,19 +29,7 @@ import type {
   GetInstanceMetricsResponse,
   MetricsSnapshot,
 } from "@/generated/soulfire/metrics";
-
-function formatTime(snapshot: MetricsSnapshot): string {
-  if (!snapshot.timestamp) return "";
-  const date = new Date(
-    Number(snapshot.timestamp.seconds) * 1000 +
-      snapshot.timestamp.nanos / 1_000_000,
-  );
-  return date.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-}
+import { padSnapshots } from "@/lib/metrics-utils";
 
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes.toFixed(0)} B/s`;
@@ -130,10 +118,10 @@ export function BotsOnlineChart({
 }) {
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        online: s.botsOnline,
-        total: s.botsTotal,
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        online: s ? s.botsOnline : null,
+        total: s ? s.botsTotal : null,
       })),
     [snapshots],
   );
@@ -194,10 +182,10 @@ export function NetworkTrafficChart({
 }) {
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        sent: Math.round(s.packetsSentPerSecond),
-        received: Math.round(s.packetsReceivedPerSecond),
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        sent: s ? Math.round(s.packetsSentPerSecond) : null,
+        received: s ? Math.round(s.packetsReceivedPerSecond) : null,
       })),
     [snapshots],
   );
@@ -253,10 +241,10 @@ export function BandwidthChart({
 }) {
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        upload: s.bytesSentPerSecond,
-        download: s.bytesReceivedPerSecond,
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        upload: s ? s.bytesSentPerSecond : null,
+        download: s ? s.bytesReceivedPerSecond : null,
       })),
     [snapshots],
   );
@@ -339,10 +327,10 @@ export function TickDurationChart({
 }) {
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        avg: Number(s.avgTickDurationMs.toFixed(2)),
-        max: Number(s.maxTickDurationMs.toFixed(2)),
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        avg: s ? Number(s.avgTickDurationMs.toFixed(2)) : null,
+        max: s ? Number(s.maxTickDurationMs.toFixed(2)) : null,
       })),
     [snapshots],
   );
@@ -402,10 +390,10 @@ export function HealthFoodChart({
 }) {
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        health: Number(s.avgHealth.toFixed(1)),
-        food: Number(s.avgFoodLevel.toFixed(1)),
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        health: s ? Number(s.avgHealth.toFixed(1)) : null,
+        food: s ? Number(s.avgFoodLevel.toFixed(1)) : null,
       })),
     [snapshots],
   );
@@ -464,10 +452,10 @@ export function ChunksEntitiesChart({
 }) {
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        chunks: s.totalLoadedChunks,
-        entities: s.totalTrackedEntities,
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        chunks: s ? s.totalLoadedChunks : null,
+        entities: s ? s.totalTrackedEntities : null,
       })),
     [snapshots],
   );
@@ -528,10 +516,10 @@ export function ConnectionEventsChart({
 }) {
   const chartData = useMemo(
     () =>
-      snapshots.map((s) => ({
-        time: formatTime(s),
-        connections: s.connections,
-        disconnections: s.disconnections,
+      padSnapshots(snapshots).map(({ time, snapshot: s }) => ({
+        time,
+        connections: s ? s.connections : null,
+        disconnections: s ? s.disconnections : null,
       })),
     [snapshots],
   );

src/lib/metrics-utils.ts

@@ -0,0 +1,48 @@
+const INTERVAL_SECONDS = 3;
+const MAX_SNAPSHOTS = 600; // 30 minutes at 3-second intervals
+
+interface HasTimestamp {
+  timestamp?: { seconds: string; nanos: number };
+}
+
+function formatTimeFromDate(date: Date): string {
+  return date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+/// Pads a sparse snapshot array into a full 30-minute time grid.
+/// Returns 600 entries at 3-second intervals; slots without a real
+/// snapshot have `snapshot: null` so Recharts renders gaps.
+export function padSnapshots<T extends HasTimestamp>(
+  snapshots: T[],
+): { time: string; snapshot: T | null }[] {
+  const nowMs = Date.now();
+  const intervalMs = INTERVAL_SECONDS * 1000;
+  // Align "now" to the nearest 3-second boundary
+  const endSlot = Math.round(nowMs / intervalMs) * intervalMs;
+  const startSlot = endSlot - (MAX_SNAPSHOTS - 1) * intervalMs;
+
+  // Index snapshots by their rounded time slot
+  const snapshotMap = new Map<number, T>();
+  for (const s of snapshots) {
+    if (!s.timestamp) continue;
+    const ms =
+      Number(s.timestamp.seconds) * 1000 + s.timestamp.nanos / 1_000_000;
+    const slotMs = Math.round(ms / intervalMs) * intervalMs;
+    snapshotMap.set(slotMs, s);
+  }
+
+  const result: { time: string; snapshot: T | null }[] = [];
+  for (let i = 0; i < MAX_SNAPSHOTS; i++) {
+    const slotMs = startSlot + i * intervalMs;
+    result.push({
+      time: formatTimeFromDate(new Date(slotMs)),
+      snapshot: snapshotMap.get(slotMs) ?? null,
+    });
+  }
+
+  return result;
+}