= (p
|
- |
- |
-
+
—}>
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index 47ec0b2..40eb474 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -10,6 +10,7 @@ import { DockerMetadataAPI } from '@/api/dockerMetadata';
import { resolveHostRuntime } from './runtimeDisplay';
import { showSuccess, showError } from '@/utils/toast';
import { logger } from '@/utils/logger';
+import { buildMetricKey } from '@/utils/metricsKeys';
const OFFLINE_HOST_STATUSES = new Set(['offline', 'error', 'unreachable', 'down', 'disconnected']);
const DEGRADED_HOST_STATUSES = new Set([
@@ -828,6 +829,7 @@ const DockerContainerRow: Component<{
const cpuPercent = () => Math.max(0, Math.min(100, container.cpuPercent ?? 0));
const memPercent = () => Math.max(0, Math.min(100, container.memoryPercent ?? 0));
+ const metricsKey = buildMetricKey('dockerContainer', container.id);
const memUsageLabel = () => {
if (!container.memoryUsageBytes) return undefined;
const used = formatBytes(container.memoryUsageBytes, 0);
@@ -1007,15 +1009,20 @@ const DockerContainerRow: Component<{
{statusLabel()}
|
-
+ |
0}
fallback={—}
>
-
+
|
-
+ |
0}
fallback={—}
@@ -1025,10 +1032,11 @@ const DockerContainerRow: Component<{
label={formatPercent(memPercent())}
type="memory"
sublabel={memUsageLabel()}
+ resourceId={metricsKey}
/>
|
-
+ |
—}>
@@ -1800,6 +1809,7 @@ const DockerServiceRow: Component<{
return label;
};
const state = toLower(task.currentState ?? task.desiredState ?? 'unknown');
+ const taskMetricsKey = container?.id ? buildMetricKey('dockerContainer', container.id) : undefined;
const stateClass = () => {
if (state === 'running') {
return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
@@ -1837,12 +1847,22 @@ const DockerServiceRow: Component<{
|
0} fallback={—}>
-
+
|
0} fallback={—}>
-
+
|
diff --git a/frontend-modern/src/components/shared/MetricsViewToggle.tsx b/frontend-modern/src/components/shared/MetricsViewToggle.tsx
new file mode 100644
index 0000000..597175a
--- /dev/null
+++ b/frontend-modern/src/components/shared/MetricsViewToggle.tsx
@@ -0,0 +1,42 @@
+/**
+ * Metrics View Mode Toggle
+ *
+ * Toggle button to switch between progress bars and sparkline views for metrics.
+ * This is a global setting that affects all tables throughout the app.
+ */
+
+import { Component } from 'solid-js';
+import { useMetricsViewMode } from '@/stores/metricsViewMode';
+
+export const MetricsViewToggle: Component = () => {
+ const { viewMode, setViewMode } = useMetricsViewMode();
+
+ return (
+
+
+
+
+ );
+};
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index b7de817..aed209b 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -8,6 +8,7 @@ import { Card } from '@/components/shared/Card';
import { getNodeDisplayName, hasAlternateDisplayName } from '@/utils/nodes';
import { getCpuTemperature } from '@/utils/temperature';
import { useAlertsActivation } from '@/stores/alertsActivation';
+import { buildMetricKey } from '@/utils/metricsKeys';
interface NodeSummaryTableProps {
nodes: Node[];
@@ -353,7 +354,7 @@ export const NodeSummaryTable: Component = (props) => {
<>
-
+
= (props) => {
const isSelected = () => props.selectedNode === nodeId;
// Use the full resource ID for alert matching
const resourceId = isPVE ? node!.id || node!.name : pbs!.id || pbs!.name;
+ // Use namespaced metric key for sparklines
+ const metricsKey = buildMetricKey('node', resourceId);
const alertStyles = createMemo(() =>
getAlertStyles(resourceId, activeAlerts, alertsEnabled()),
);
@@ -586,6 +589,7 @@ export const NodeSummaryTable: Component = (props) => {
: undefined
}
type="cpu"
+ resourceId={metricsKey}
/>
@@ -605,6 +609,7 @@ export const NodeSummaryTable: Component = (props) => {
: undefined
}
type="memory"
+ resourceId={metricsKey}
/>
@@ -618,6 +623,7 @@ export const NodeSummaryTable: Component = (props) => {
label={formatPercent(diskPercentValue ?? 0)}
sublabel={diskSublabel}
type="disk"
+ resourceId={metricsKey}
/>
diff --git a/frontend-modern/src/components/shared/Sparkline.tsx b/frontend-modern/src/components/shared/Sparkline.tsx
new file mode 100644
index 0000000..a4531af
--- /dev/null
+++ b/frontend-modern/src/components/shared/Sparkline.tsx
@@ -0,0 +1,286 @@
+/**
+ * Sparkline Component
+ *
+ * Lightweight canvas-based sparkline chart for displaying metric trends.
+ * Optimized for rendering many sparklines simultaneously in tables.
+ */
+
+import { onMount, onCleanup, createEffect, createSignal, Component, Show } from 'solid-js';
+import type { MetricSnapshot } from '@/stores/metricsHistory';
+import { scheduleSparkline } from '@/utils/canvasRenderQueue';
+
+interface SparklineProps {
+ data: MetricSnapshot[];
+ metric: 'cpu' | 'memory' | 'disk';
+ width?: number;
+ height?: number;
+ color?: string;
+ thresholds?: {
+ warning: number; // Yellow threshold
+ critical: number; // Red threshold
+ };
+}
+
+export const Sparkline: Component = (props) => {
+ let canvasRef: HTMLCanvasElement | undefined;
+ let unregister: (() => void) | null = null;
+
+ // Hover state for tooltip
+ const [hoveredPoint, setHoveredPoint] = createSignal<{
+ value: number;
+ timestamp: number;
+ x: number;
+ y: number;
+ } | null>(null);
+
+ // If width is 0, use container width; otherwise use provided width
+ const width = () => {
+ if (props.width === 0 && canvasRef?.parentElement) {
+ return canvasRef.parentElement.clientWidth;
+ }
+ return props.width || 120;
+ };
+ const height = () => props.height || 24;
+
+ // Default thresholds based on metric type
+ const getDefaultThresholds = () => {
+ switch (props.metric) {
+ case 'cpu':
+ return { warning: 80, critical: 90 };
+ case 'memory':
+ return { warning: 75, critical: 85 };
+ case 'disk':
+ return { warning: 80, critical: 90 };
+ default:
+ return { warning: 75, critical: 90 };
+ }
+ };
+
+ const thresholds = () => props.thresholds || getDefaultThresholds();
+
+ // Get color based on latest value and thresholds
+ const getColor = (value: number): string => {
+ if (props.color) return props.color;
+
+ const t = thresholds();
+ if (value >= t.critical) return '#ef4444'; // red-500
+ if (value >= t.warning) return '#eab308'; // yellow-500
+ return '#22c55e'; // green-500
+ };
+
+ const drawSparkline = () => {
+ if (!canvasRef) return;
+
+ const canvas = canvasRef;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ const data = props.data;
+ const w = width();
+ const h = height();
+ const metric = props.metric;
+
+ // Set canvas size (accounting for device pixel ratio for sharp rendering)
+ const dpr = window.devicePixelRatio || 1;
+ canvas.width = w * dpr;
+ canvas.height = h * dpr;
+ canvas.style.width = `${w}px`;
+ canvas.style.height = `${h}px`;
+ ctx.scale(dpr, dpr);
+
+ // Clear canvas
+ ctx.clearRect(0, 0, w, h);
+
+ if (!data || data.length === 0) {
+ // No data - show empty state
+ ctx.strokeStyle = '#d1d5db'; // gray-300
+ ctx.lineWidth = 1;
+ ctx.setLineDash([2, 2]);
+ ctx.beginPath();
+ ctx.moveTo(0, h / 2);
+ ctx.lineTo(w, h / 2);
+ ctx.stroke();
+ ctx.setLineDash([]);
+ return;
+ }
+
+ // Extract values for the selected metric
+ const values = data.map(d => d[metric]);
+
+ // Get latest value for color
+ const latestValue = values[values.length - 1] || 0;
+ const color = getColor(latestValue);
+
+ // Find min/max for scaling
+ const minValue = 0; // Always anchor at 0
+ const maxValue = Math.max(100, ...values); // Use 100 as minimum max
+
+ // Calculate points
+ const points: Array<{ x: number; y: number }> = [];
+ const xStep = w / Math.max(values.length - 1, 1);
+
+ values.forEach((value, i) => {
+ const x = i * xStep;
+ // Invert y because canvas coordinates are top-down
+ const y = h - ((value - minValue) / (maxValue - minValue)) * h;
+ points.push({ x, y });
+ });
+
+ // Draw threshold reference lines
+ const t = thresholds();
+ ctx.strokeStyle = '#94a3b8'; // gray-400
+ ctx.lineWidth = 0.5;
+ ctx.globalAlpha = 0.3;
+ ctx.setLineDash([2, 2]);
+
+ // Warning threshold line
+ const warningY = h - ((t.warning - minValue) / (maxValue - minValue)) * h;
+ ctx.beginPath();
+ ctx.moveTo(0, warningY);
+ ctx.lineTo(w, warningY);
+ ctx.stroke();
+
+ // Critical threshold line
+ const criticalY = h - ((t.critical - minValue) / (maxValue - minValue)) * h;
+ ctx.beginPath();
+ ctx.moveTo(0, criticalY);
+ ctx.lineTo(w, criticalY);
+ ctx.stroke();
+
+ ctx.setLineDash([]);
+ ctx.globalAlpha = 1;
+
+ // Draw gradient fill
+ const gradient = ctx.createLinearGradient(0, 0, 0, h);
+ gradient.addColorStop(0, `${color}40`); // 25% opacity at top
+ gradient.addColorStop(1, `${color}10`); // 6% opacity at bottom
+
+ ctx.fillStyle = gradient;
+ ctx.beginPath();
+ ctx.moveTo(points[0].x, h); // Start at bottom left
+ points.forEach(p => ctx.lineTo(p.x, p.y));
+ ctx.lineTo(points[points.length - 1].x, h); // Close at bottom right
+ ctx.closePath();
+ ctx.fill();
+
+ // Draw line
+ ctx.strokeStyle = color;
+ ctx.lineWidth = 1.5;
+ ctx.lineJoin = 'round';
+ ctx.lineCap = 'round';
+ ctx.beginPath();
+ points.forEach((p, i) => {
+ if (i === 0) {
+ ctx.moveTo(p.x, p.y);
+ } else {
+ ctx.lineTo(p.x, p.y);
+ }
+ });
+ ctx.stroke();
+
+ // Draw current value dot
+ if (points.length > 0) {
+ const lastPoint = points[points.length - 1];
+ ctx.fillStyle = color;
+ ctx.beginPath();
+ ctx.arc(lastPoint.x, lastPoint.y, 2, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ };
+
+ // Redraw when data or dimensions change
+ createEffect(() => {
+ // Capture current values to avoid stale closures
+ const currentData = props.data;
+ const currentWidth = width();
+ const currentHeight = height();
+ const currentMetric = props.metric;
+
+ // Unregister previous draw callback if it exists
+ if (unregister) {
+ unregister();
+ }
+
+ // Schedule draw via shared render queue
+ unregister = scheduleSparkline(drawSparkline);
+ });
+
+ onCleanup(() => {
+ if (unregister) {
+ unregister();
+ }
+ });
+
+ // Handle mouse move to find nearest point
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!canvasRef || !props.data || props.data.length === 0) return;
+
+ const rect = canvasRef.getBoundingClientRect();
+ const mouseX = e.clientX - rect.left;
+ const w = width();
+ const h = height();
+
+ const data = props.data;
+ const values = data.map(d => d[props.metric]);
+ const xStep = w / Math.max(values.length - 1, 1);
+
+ // Find nearest point
+ let nearestIndex = Math.round(mouseX / xStep);
+ nearestIndex = Math.max(0, Math.min(nearestIndex, values.length - 1));
+
+ const value = values[nearestIndex];
+ const timestamp = data[nearestIndex].timestamp;
+
+ // Calculate y position for visual indicator
+ const minValue = 0;
+ const maxValue = Math.max(100, ...values);
+ const y = h - ((value - minValue) / (maxValue - minValue)) * h;
+
+ setHoveredPoint({
+ value,
+ timestamp,
+ x: nearestIndex * xStep,
+ y: rect.top + y,
+ });
+ };
+
+ const handleMouseLeave = () => {
+ setHoveredPoint(null);
+ };
+
+ // Format timestamp for tooltip
+ const formatTime = (timestamp: number) => {
+ const date = new Date(timestamp);
+ return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+ };
+
+ return (
+
+
+
+ {(point) => (
+
+ {point().value.toFixed(1)}%
+ {formatTime(point().timestamp)}
+
+ | |