diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx index ba583f45..4649b5e3 100644 --- a/ui/src/pages/AgentInstance/AgentInstance.tsx +++ b/ui/src/pages/AgentInstance/AgentInstance.tsx @@ -66,16 +66,20 @@ export default function AgentInstance() { 60, ); - const chartData = useMemo( - () => - (timeseries?.buckets || []).map((b: any) => ({ - time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), - throughput: b.totalCount, - latency: b.avgDurationMs, - errors: b.failedCount, - })), - [timeseries], - ); + const chartData = useMemo(() => { + const buckets: any[] = timeseries?.buckets || []; + // Compute bucket duration in seconds from consecutive timestamps (for msg/s conversion) + const bucketSecs = + buckets.length >= 2 + ? (new Date(buckets[1].timestamp).getTime() - new Date(buckets[0].timestamp).getTime()) / 1000 + : 60; + return buckets.map((b: any) => ({ + time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), + throughput: bucketSecs > 0 ? b.totalCount / bucketSecs : b.totalCount, + latency: b.avgDurationMs, + errorPct: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0, + })); + }, [timeseries]); const feedEvents = useMemo(() => { const mapped = (events || []) @@ -118,7 +122,7 @@ export default function AgentInstance() { const throughputSeries = useMemo( () => chartData.length - ? [{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }] + ? [{ label: 'msg/s', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }] : null, [chartData], ); @@ -126,7 +130,7 @@ export default function AgentInstance() { const errorSeries = useMemo( () => chartData.length - ? [{ label: 'Errors', data: chartData.map((d: any, i: number) => ({ x: i, y: d.errors })) }] + ? [{ label: 'Error %', data: chartData.map((d: any, i: number) => ({ x: i, y: d.errorPct })) }] : null, [chartData], ); @@ -229,6 +233,9 @@ export default function AgentInstance() { {agent.displayName} + {agent.containerStatus && agent.containerStatus !== 'UNKNOWN' && ( + + )} {agent.version && } {heapSeries ? ( - + ) : ( )} @@ -352,7 +364,7 @@ export default function AgentInstance() { {errorSeries ? ( - + ) : ( )} diff --git a/ui/src/pages/DashboardTab/DashboardTab.module.css b/ui/src/pages/DashboardTab/DashboardTab.module.css index 2c6d0f16..ce114578 100644 --- a/ui/src/pages/DashboardTab/DashboardTab.module.css +++ b/ui/src/pages/DashboardTab/DashboardTab.module.css @@ -14,6 +14,11 @@ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; + pointer-events: none; +} + +.chartGrid > * { + pointer-events: auto; } .chartRow {