refactor(metrics-modal): mark min/max on chart + improve grid contrast

Drop the Current/Min/Avg/Max stats row and Live auto-refresh toggle — clutter that didn't earn its space. Min/max are now rendered as colored dots on the chart itself (green ▼ for min, orange ▲ for max), which exposes both the value AND the time-axis position of each extremum at a glance. Tooltip now formats the timestamp fully (with date prefix when the sample crosses a day boundary). Switch CartesianGrid stroke from var(--ant-color-border-secondary) to rgba(128,128,140,0.35) so the gridlines stay readable in light theme against the chart-wrap's faint primary tint — the AntD variable resolved to near-zero alpha and the gridlines disappeared. XrayMetricsModal keeps its implicit 2s observatory polling.
2026-07-15 09:06:07 +00:00 · 2026-05-27 15:06:43 +02:00
parent f1e433e839
commit 2bba1d21d2
5 changed files with 201 additions and 38 deletions
@@ -1,6 +1,12 @@
+.metric-modal-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
 .bucket-select {
  width: 80px;
-  margin-left: 10px;
 }

 .history-tabs {
@@ -15,11 +21,3 @@
  border: 1px solid var(--ant-color-border-secondary);
  box-shadow: 0 2px 12px var(--ant-color-fill-quaternary);
 }
-
-.cpu-chart-meta {
-  margin-bottom: 12px;
-  font-size: 11.5px;
-  opacity: 0.65;
-  letter-spacing: 0.3px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
@@ -47,6 +47,22 @@ function unitFormatter(unit: string, activeKey: string): (v: number) => string {
  };
 }

+function formatFullTimestamp(unixSec: number): string {
+  const d = new Date(unixSec * 1000);
+  const today = new Date();
+  const sameDay = d.getFullYear() === today.getFullYear()
+    && d.getMonth() === today.getMonth()
+    && d.getDate() === today.getDate();
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  const ss = String(d.getSeconds()).padStart(2, '0');
+  const time = `${hh}:${mm}:${ss}`;
+  if (sameDay) return time;
+  const MM = String(d.getMonth() + 1).padStart(2, '0');
+  const DD = String(d.getDate()).padStart(2, '0');
+  return `${MM}-${DD} ${time}`;
+}
+
 export default function SystemHistoryModal({ open, status, onClose }: SystemHistoryModalProps) {
  const { t } = useTranslation();
  const { isMobile } = useMediaQuery();
@@ -54,6 +70,7 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
  const [bucket, setBucket] = useState(2);
  const [points, setPoints] = useState<number[]>([]);
  const [labels, setLabels] = useState<string[]>([]);
+  const [timestamps, setTimestamps] = useState<number[]>([]);

  const activeMetric = useMemo(() => METRICS.find((m) => m.key === activeKey), [activeKey]);
  const strokeColor = activeMetric?.stroke || status?.cpu?.color || '#008771';
@@ -62,6 +79,22 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
    [activeMetric, activeKey],
  );

+  const tsLookup = useMemo(() => {
+    const m = new Map<string, number>();
+    for (let i = 0; i < labels.length; i++) {
+      m.set(labels[i], timestamps[i]);
+    }
+    return m;
+  }, [labels, timestamps]);
+
+  const tooltipLabelFormatter = useCallback(
+    (label: string) => {
+      const ts = tsLookup.get(label);
+      return ts ? formatFullTimestamp(ts) : label;
+    },
+    [tsLookup],
+  );
+
  const fetchBucket = useCallback(async () => {
    if (!activeMetric) return;
    try {
@@ -70,6 +103,7 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
      if (msg?.success && Array.isArray(msg.obj)) {
        const vals: number[] = [];
        const labs: string[] = [];
+        const tss: number[] = [];
        for (const p of msg.obj) {
          const d = new Date(p.t * 1000);
          const hh = String(d.getHours()).padStart(2, '0');
@@ -77,24 +111,26 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
          const ss = String(d.getSeconds()).padStart(2, '0');
          labs.push(bucket >= 60 ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`);
          vals.push(Number(p.v) || 0);
+          tss.push(Number(p.t) || 0);
        }
        setLabels(labs);
        setPoints(vals);
+        setTimestamps(tss);
      } else {
        setLabels([]);
        setPoints([]);
+        setTimestamps([]);
      }
    } catch (e) {
      console.error('Failed to fetch history bucket', e);
      setLabels([]);
      setPoints([]);
+      setTimestamps([]);
    }
  }, [activeMetric, bucket]);

  useEffect(() => {
-    if (open) {
-      setActiveKey('cpu');
-    }
+    if (open) setActiveKey('cpu');
  }, [open]);

  useEffect(() => {
@@ -108,8 +144,8 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
      width={isMobile ? '95vw' : 900}
      onCancel={onClose}
      title={
-        <>
-          {t('pages.index.systemHistoryTitle')}
+        <div className="metric-modal-title">
+          <span>{t('pages.index.systemHistoryTitle')}</span>
          <Select
            value={bucket}
            size="small"
@@ -124,7 +160,7 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
              { value: 300, label: '5h' },
            ]}
          />
-        </>
+        </div>
      }
    >
      <Tabs
@@ -136,13 +172,10 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
      />

      <div className="cpu-chart-wrap">
-        <div className="cpu-chart-meta">
-          Timeframe: {bucket} sec per point (total {points.length} points)
-        </div>
        <Sparkline
          data={points}
          labels={labels}
-          height={220}
+          height={260}
          stroke={strokeColor}
          strokeWidth={2.2}
          showGrid
@@ -155,6 +188,8 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
          valueMin={0}
          valueMax={activeMetric?.valueMax ?? null}
          yFormatter={yFormatter}
+          tooltipLabelFormatter={tooltipLabelFormatter}
+          extrema={{ show: true, formatter: yFormatter }}
        />
      </div>
    </Modal>
@@ -63,7 +63,3 @@
  .obs-dot.is-alive { animation: none; }
 }

-.listen-tag {
-  opacity: 0.7;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
@@ -70,6 +70,22 @@ function fmtTimestamp(unixSec: number): string {
  return `${d.toLocaleDateString()} ${hh}:${mm}:${ss}`;
 }

+function formatFullTimestamp(unixSec: number): string {
+  const d = new Date(unixSec * 1000);
+  const today = new Date();
+  const sameDay = d.getFullYear() === today.getFullYear()
+    && d.getMonth() === today.getMonth()
+    && d.getDate() === today.getDate();
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  const ss = String(d.getSeconds()).padStart(2, '0');
+  const time = `${hh}:${mm}:${ss}`;
+  if (sameDay) return time;
+  const MM = String(d.getMonth() + 1).padStart(2, '0');
+  const DD = String(d.getDate()).padStart(2, '0');
+  return `${MM}-${DD} ${time}`;
+}
+
 export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProps) {
  const { t } = useTranslation();
  const { isMobile } = useMediaQuery();
@@ -77,6 +93,7 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
  const [bucket, setBucket] = useState(2);
  const [points, setPoints] = useState<number[]>([]);
  const [labels, setLabels] = useState<string[]>([]);
+  const [timestamps, setTimestamps] = useState<number[]>([]);
  const [state, setState] = useState<XrayState>({ enabled: false, listen: '', reason: '' });
  const [obsTags, setObsTags] = useState<ObservatoryTag[]>([]);
  const [obsActiveTag, setObsActiveTag] = useState('');
@@ -90,10 +107,27 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp

  const activeObsTag = obsTags.find((tg) => tg.tag === obsActiveTag) || null;

+  const tsLookup = useMemo(() => {
+    const m = new Map<string, number>();
+    for (let i = 0; i < labels.length; i++) {
+      m.set(labels[i], timestamps[i]);
+    }
+    return m;
+  }, [labels, timestamps]);
+
+  const tooltipLabelFormatter = useCallback(
+    (label: string) => {
+      const ts = tsLookup.get(label);
+      return ts ? formatFullTimestamp(ts) : label;
+    },
+    [tsLookup],
+  );
+
  const applyHistory = useCallback((msg: Msg<{ t: number; v: number }[]> | null | undefined, currentBucket: number) => {
    if (msg?.success && Array.isArray(msg.obj)) {
      const vals: number[] = [];
      const labs: string[] = [];
+      const tss: number[] = [];
      for (const p of msg.obj) {
        const d = new Date(p.t * 1000);
        const hh = String(d.getHours()).padStart(2, '0');
@@ -101,12 +135,15 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
        const ss = String(d.getSeconds()).padStart(2, '0');
        labs.push(currentBucket >= 60 ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`);
        vals.push(Number(p.v) || 0);
+        tss.push(Number(p.t) || 0);
      }
      setLabels(labs);
      setPoints(vals);
+      setTimestamps(tss);
    } else {
      setLabels([]);
      setPoints([]);
+      setTimestamps([]);
    }
  }, []);

@@ -148,6 +185,7 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
      console.error('Failed to fetch xray metrics bucket', e);
      setLabels([]);
      setPoints([]);
+      setTimestamps([]);
    }
  }, [activeMetric, bucket, applyHistory]);

@@ -155,6 +193,7 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
    if (!obsActiveTag) {
      setLabels([]);
      setPoints([]);
+      setTimestamps([]);
      return;
    }
    try {
@@ -165,6 +204,7 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
      console.error('Failed to fetch observatory bucket', e);
      setLabels([]);
      setPoints([]);
+      setTimestamps([]);
    }
  }, [obsActiveTag, bucket, applyHistory]);

@@ -225,8 +265,8 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
      width={isMobile ? '95vw' : 900}
      onCancel={onClose}
      title={
-        <>
-          {t('pages.index.xrayMetricsTitle')}
+        <div className="metric-modal-title">
+          <span>{t('pages.index.xrayMetricsTitle')}</span>
          <Select
            value={bucket}
            size="small"
@@ -241,7 +281,7 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
              { value: 300, label: '5h' },
            ]}
          />
-        </>
+        </div>
      }
    >
      {!state.enabled && (
@@ -313,16 +353,10 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
      )}

      <div className="cpu-chart-wrap">
-        <div className="cpu-chart-meta">
-          Timeframe: {bucket} sec per point (total {points.length} points)
-          {state.enabled && state.listen && (
-            <span className="listen-tag"> · {state.listen}</span>
-          )}
-        </div>
        <Sparkline
          data={points}
          labels={labels}
-          height={220}
+          height={260}
          stroke={strokeColor}
          strokeWidth={2.2}
          showGrid
@@ -335,6 +369,8 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
          valueMin={0}
          valueMax={null}
          yFormatter={yFormatter}
+          tooltipLabelFormatter={tooltipLabelFormatter}
+          extrema={{ show: true, formatter: yFormatter }}
        />
      </div>
    </Modal>