Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: update ConnectionStatsSidebar to use Metric component for improved data visualization

This commit is contained in:
Adam Shiervani 2025-08-25 18:05:16 +02:00
parent a2d50fde5c
commit 5acfb67d29
1 changed files with 133 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

304
ui/src/components/sidebar/connectionStats.tsx
View File

@ -1,45 +1,14 @@
import { useInterval } from "usehooks-ts"; import { useInterval } from "usehooks-ts";
import SidebarHeader from "@/components/SidebarHeader"; import SidebarHeader from "@/components/SidebarHeader";
import { GridCard } from "@/components/Card";
import { useRTCStore, useUiStore } from "@/hooks/stores"; import { useRTCStore, useUiStore } from "@/hooks/stores";
import StatChart from "@/components/StatChart";
function createChartArray<T, K extends keyof T>( import { createChartArray, Metric } from "../Metric";
stream: Map<number, T>, import { SettingsSectionHeader } from "../SettingsSectionHeader";
metric: K,
): { date: number; stat: T[K] | null }[] {
const stat = Array.from(stream).map(([key, stats]) => {
return { date: key, stat: stats[metric] };
});
// Sort the dates to ensure they are in chronological order
const sortedStat = stat.map(x => x.date).sort((a, b) => a - b);
// Determine the earliest statistic date
const earliestStat = sortedStat[0];
// Current time in seconds since the Unix epoch
const now = Math.floor(Date.now() / 1000);
// Determine the starting point for the chart data
const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120;
// Generate the chart array for the range between 'firstChartDate' and 'now'
return Array.from({ length: now - firstChartDate }, (_, i) => {
const currentDate = firstChartDate + i;
return {
date: currentDate,
// Find the statistic for 'currentDate', or use the last known statistic if none exists for that date
stat: stat.find(x => x.date === currentDate)?.stat ?? null,
};
});
}
export default function ConnectionStatsSidebar() { export default function ConnectionStatsSidebar() {
const inboundRtpStats = useRTCStore(state => state.inboundRtpStats); const inboundVideoRtpStats = useRTCStore(state => state.inboundRtpStats);
const iceCandidatePairStats = useRTCStore(state => state.candidatePairStats);
const candidatePairStats = useRTCStore(state => state.candidatePairStats);
const setSidebarView = useUiStore(state => state.setSidebarView); const setSidebarView = useUiStore(state => state.setSidebarView);
function isMetricSupported<T, K extends keyof T>( function isMetricSupported<T, K extends keyof T>(
@ -49,7 +18,7 @@ export default function ConnectionStatsSidebar() {
return Array.from(stream).some(([, stat]) => stat[metric] !== undefined); return Array.from(stream).some(([, stat]) => stat[metric] !== undefined);
} }
const appendInboundRtpStats = useRTCStore(state => state.appendInboundRtpStats); const appendInboundVideoRtpStats = useRTCStore(state => state.appendInboundRtpStats);
const appendIceCandidatePair = useRTCStore(state => state.appendCandidatePairStats); const appendIceCandidatePair = useRTCStore(state => state.appendCandidatePairStats);
const appendDiskDataChannelStats = useRTCStore( const appendDiskDataChannelStats = useRTCStore(
state => state.appendDiskDataChannelStats, state => state.appendDiskDataChannelStats,
@ -66,15 +35,13 @@ export default function ConnectionStatsSidebar() {
useInterval(function collectWebRTCStats() { useInterval(function collectWebRTCStats() {
(async () => { (async () => {
if (!mediaStream) return; if (!mediaStream) return;
const videoTrack = mediaStream.getVideoTracks()[0];
if (!videoTrack) return;
const stats = await peerConnection?.getStats(); const stats = await peerConnection?.getStats();
let successfulLocalCandidateId: string | null = null; let successfulLocalCandidateId: string | null = null;
let successfulRemoteCandidateId: string | null = null; let successfulRemoteCandidateId: string | null = null;
stats?.forEach(report => { stats?.forEach(report => {
if (report.type === "inbound-rtp") { if (report.type === "inbound-rtp" && report.kind === "video") {
appendInboundRtpStats(report); appendInboundVideoRtpStats(report);
} else if (report.type === "candidate-pair" && report.nominated) { } else if (report.type === "candidate-pair" && report.nominated) {
if (report.state === "succeeded") { if (report.state === "succeeded") {
successfulLocalCandidateId = report.localCandidateId; successfulLocalCandidateId = report.localCandidateId;
@ -98,144 +65,139 @@ export default function ConnectionStatsSidebar() {
})(); })();
}, 500); }, 500);
const jitterBufferDelay = createChartArray(inboundVideoRtpStats, "jitterBufferDelay");
const jitterBufferEmittedCount = createChartArray(
inboundVideoRtpStats,
"jitterBufferEmittedCount",
);
const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => {
if (idx === 0) return { date: d.date, stat: null };
const prevDelay = jitterBufferDelay[idx - 1]?.stat as number | null | undefined;
const currDelay = d.stat as number | null | undefined;
const prevEmitted =
(jitterBufferEmittedCount[idx - 1]?.stat as number | null | undefined) ?? null;
const currEmitted =
(jitterBufferEmittedCount[idx]?.stat as number | null | undefined) ?? null;
if (
prevDelay == null ||
currDelay == null ||
prevEmitted == null ||
currEmitted == null
) {
return { date: d.date, stat: null };
}
const deltaDelay = currDelay - prevDelay;
const deltaEmitted = currEmitted - prevEmitted;
// Guard counter resets or no emitted frames
if (deltaDelay < 0 || deltaEmitted <= 0) {
return { date: d.date, stat: null };
}
const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000);
return { date: d.date, stat: valueMs };
});
// Rolling average over the last N seconds for the reference line
const rollingWindowSeconds = 20;
const recent = jitterBufferAvgDelayData
.slice(-rollingWindowSeconds)
.filter(x => x.stat != null) as { date: number; stat: number }[];
const referenceValue =
recent.length > 0
? Math.round(recent.reduce((sum, x) => sum + (x.stat as number), 0) / recent.length)
: undefined;
return ( return (
<div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs"> <div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
<SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} /> <SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
<div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900"> <div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
<div className="space-y-4"> <div className="space-y-4">
{/*
The entire sidebar component is always rendered, with a display none when not visible
The charts below, need a height and width, otherwise they throw. So simply don't render them unless the thing is visible
*/}
{sidebarView === "connection-stats" && ( {sidebarView === "connection-stats" && (
<div className="space-y-4"> <div className="space-y-8">
<div className="space-y-2"> {/* Connection Group */}
<div> <div className="space-y-3">
<h2 className="text-lg font-semibold text-black dark:text-white"> <SettingsSectionHeader
Packets Lost title="Connection"
</h2> description="The connection between the client and the JetKVM."
<p className="text-sm text-slate-700 dark:text-slate-300"> />
Number of data packets lost during transmission. <Metric
</p> title="Round-Trip Time"
</div> description="Round-trip time for the active ICE candidate pair between peers."
<GridCard> stream={iceCandidatePairStats}
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500"> gate={inboundVideoRtpStats}
{inboundRtpStats.size === 0 ? ( metric="currentRoundTripTime"
<div className="flex flex-col items-center space-y-1"> map={x => ({
<p className="text-slate-700">Waiting for data...</p> date: x.date,
</div> stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
) : isMetricSupported(inboundRtpStats, "packetsLost") ? ( })}
<StatChart domain={[0, 600]}
data={createChartArray(inboundRtpStats, "packetsLost")} unit=" ms"
domain={[0, 100]} />
unit=" packets"
/>
) : (
<div className="flex flex-col items-center space-y-1">
<p className="text-black">Metric not supported</p>
</div>
)}
</div>
</GridCard>
</div> </div>
<div className="space-y-2">
<div> {/* Video Group */}
<h2 className="text-lg font-semibold text-black dark:text-white"> <div className="space-y-3">
Round-Trip Time <SettingsSectionHeader
</h2> title="Video"
<p className="text-sm text-slate-700 dark:text-slate-300"> description="The video stream from the JetKVM to the client."
Time taken for data to travel from source to destination and back />
</p>
</div> {/* RTP Jitter */}
<GridCard> <Metric
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500"> title="Network Stability"
{inboundRtpStats.size === 0 ? ( badge="Jitter"
<div className="flex flex-col items-center space-y-1"> badgeTheme="light"
<p className="text-slate-700">Waiting for data...</p> description="How steady the flow of inbound video packets is across the network."
</div> stream={inboundVideoRtpStats}
) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? ( metric="jitter"
<StatChart map={x => ({
data={createChartArray( date: x.date,
candidatePairStats, stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
"currentRoundTripTime", })}
).map(x => { domain={[0, 10]}
return { unit=" ms"
date: x.date, />
stat: x.stat ? Math.round(x.stat * 1000) : null,
}; {/* Playback Delay */}
})} <Metric
domain={[0, 600]} title="Playback Delay"
unit=" ms" description="Delay added by the jitter buffer to smooth playback when frames arrive unevenly."
/> badge="Jitter Buffer Avg. Delay"
) : ( badgeTheme="light"
<div className="flex flex-col items-center space-y-1"> data={jitterBufferAvgDelayData}
<p className="text-black">Metric not supported</p> gate={inboundVideoRtpStats}
</div> supported={
)} isMetricSupported(inboundVideoRtpStats, "jitterBufferDelay") &&
</div> isMetricSupported(inboundVideoRtpStats, "jitterBufferEmittedCount")
</GridCard> }
</div> domain={[0, 30]}
<div className="space-y-2"> unit=" ms"
<div> referenceValue={referenceValue}
<h2 className="text-lg font-semibold text-black dark:text-white"> />
Jitter
</h2> {/* Packets Lost */}
<p className="text-sm text-slate-700 dark:text-slate-300"> <Metric
Variation in packet delay, affecting video smoothness.{" "} title="Packets Lost"
</p> description="Count of lost inbound video RTP packets."
</div> stream={inboundVideoRtpStats}
<GridCard> metric="packetsLost"
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500"> domain={[0, 100]}
{inboundRtpStats.size === 0 ? ( unit=" packets"
<div className="flex flex-col items-center space-y-1"> />
<p className="text-slate-700">Waiting for data...</p>
</div> {/* Frames Per Second */}
) : ( <Metric
<StatChart title="Frames per second"
data={createChartArray(inboundRtpStats, "jitter").map(x => { description="Number of inbound video frames displayed per second."
return { stream={inboundVideoRtpStats}
date: x.date, metric="framesPerSecond"
stat: x.stat ? Math.round(x.stat * 1000) : null, domain={[0, 80]}
}; unit=" fps"
})} />
domain={[0, 300]}
unit=" ms"
/>
)}
</div>
</GridCard>
</div>
<div className="space-y-2">
<div>
<h2 className="text-lg font-semibold text-black dark:text-white">
Frames per second
</h2>
<p className="text-sm text-slate-700 dark:text-slate-300">
Number of video frames displayed per second.
</p>
</div>
<GridCard>
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
{inboundRtpStats.size === 0 ? (
<div className="flex flex-col items-center space-y-1">
<p className="text-slate-700">Waiting for data...</p>
</div>
) : (
<StatChart
data={createChartArray(inboundRtpStats, "framesPerSecond").map(
x => {
return {
date: x.date,
stat: x.stat ? x.stat : null,
};
},
)}
domain={[0, 80]}
unit=" fps"
/>
)}
</div>
</GridCard>
</div> </div>
</div> </div>
)} )}