mirror of https://github.com/jetkvm/kvm.git
refactor: update ConnectionStatsSidebar to use Metric component for improved data visualization
This commit is contained in:
Adam Shiervani
parent
a2d50fde5c
commit
5acfb67d29
|
|
@ -1,45 +1,14 @@
|
|||
import { useInterval } from "usehooks-ts";
|
||||
|
||||
import SidebarHeader from "@/components/SidebarHeader";
|
||||
import { GridCard } from "@/components/Card";
|
||||
import { useRTCStore, useUiStore } from "@/hooks/stores";
|
||||
import StatChart from "@/components/StatChart";
|
||||
|
||||
function createChartArray<T, K extends keyof T>(
|
||||
stream: Map<number, T>,
|
||||
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,
|
||||
};
|
||||
});
|
||||
}
|
||||
import { createChartArray, Metric } from "../Metric";
|
||||
import { SettingsSectionHeader } from "../SettingsSectionHeader";
|
||||
|
||||
export default function ConnectionStatsSidebar() {
|
||||
const inboundRtpStats = useRTCStore(state => state.inboundRtpStats);
|
||||
|
||||
const candidatePairStats = useRTCStore(state => state.candidatePairStats);
|
||||
const inboundVideoRtpStats = useRTCStore(state => state.inboundRtpStats);
|
||||
const iceCandidatePairStats = useRTCStore(state => state.candidatePairStats);
|
||||
const setSidebarView = useUiStore(state => state.setSidebarView);
|
||||
|
||||
function isMetricSupported<T, K extends keyof T>(
|
||||
|
|
@ -49,7 +18,7 @@ export default function ConnectionStatsSidebar() {
|
|||
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 appendDiskDataChannelStats = useRTCStore(
|
||||
state => state.appendDiskDataChannelStats,
|
||||
|
|
@ -66,15 +35,13 @@ export default function ConnectionStatsSidebar() {
|
|||
useInterval(function collectWebRTCStats() {
|
||||
(async () => {
|
||||
if (!mediaStream) return;
|
||||
const videoTrack = mediaStream.getVideoTracks()[0];
|
||||
if (!videoTrack) return;
|
||||
const stats = await peerConnection?.getStats();
|
||||
let successfulLocalCandidateId: string | null = null;
|
||||
let successfulRemoteCandidateId: string | null = null;
|
||||
|
||||
stats?.forEach(report => {
|
||||
if (report.type === "inbound-rtp") {
|
||||
appendInboundRtpStats(report);
|
||||
if (report.type === "inbound-rtp" && report.kind === "video") {
|
||||
appendInboundVideoRtpStats(report);
|
||||
} else if (report.type === "candidate-pair" && report.nominated) {
|
||||
if (report.state === "succeeded") {
|
||||
successfulLocalCandidateId = report.localCandidateId;
|
||||
|
|
@ -98,144 +65,139 @@ export default function ConnectionStatsSidebar() {
|
|||
})();
|
||||
}, 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 (
|
||||
<div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
|
||||
<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="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" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-black dark:text-white">
|
||||
Packets Lost
|
||||
</h2>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">
|
||||
Number of data packets lost during transmission.
|
||||
</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>
|
||||
) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
|
||||
<StatChart
|
||||
data={createChartArray(inboundRtpStats, "packetsLost")}
|
||||
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 className="space-y-8">
|
||||
{/* Connection Group */}
|
||||
<div className="space-y-3">
|
||||
<SettingsSectionHeader
|
||||
title="Connection"
|
||||
description="The connection between the client and the JetKVM."
|
||||
/>
|
||||
<Metric
|
||||
title="Round-Trip Time"
|
||||
description="Round-trip time for the active ICE candidate pair between peers."
|
||||
stream={iceCandidatePairStats}
|
||||
gate={inboundVideoRtpStats}
|
||||
metric="currentRoundTripTime"
|
||||
map={x => ({
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
|
||||
})}
|
||||
domain={[0, 600]}
|
||||
unit=" ms"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-black dark:text-white">
|
||||
Round-Trip Time
|
||||
</h2>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">
|
||||
Time taken for data to travel from source to destination and back
|
||||
</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>
|
||||
) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
|
||||
<StatChart
|
||||
data={createChartArray(
|
||||
candidatePairStats,
|
||||
"currentRoundTripTime",
|
||||
).map(x => {
|
||||
return {
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round(x.stat * 1000) : null,
|
||||
};
|
||||
})}
|
||||
domain={[0, 600]}
|
||||
unit=" ms"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-black">Metric not supported</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GridCard>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-black dark:text-white">
|
||||
Jitter
|
||||
</h2>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">
|
||||
Variation in packet delay, affecting video smoothness.{" "}
|
||||
</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, "jitter").map(x => {
|
||||
return {
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round(x.stat * 1000) : null,
|
||||
};
|
||||
})}
|
||||
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>
|
||||
|
||||
{/* Video Group */}
|
||||
<div className="space-y-3">
|
||||
<SettingsSectionHeader
|
||||
title="Video"
|
||||
description="The video stream from the JetKVM to the client."
|
||||
/>
|
||||
|
||||
{/* RTP Jitter */}
|
||||
<Metric
|
||||
title="Network Stability"
|
||||
badge="Jitter"
|
||||
badgeTheme="light"
|
||||
description="How steady the flow of inbound video packets is across the network."
|
||||
stream={inboundVideoRtpStats}
|
||||
metric="jitter"
|
||||
map={x => ({
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
|
||||
})}
|
||||
domain={[0, 10]}
|
||||
unit=" ms"
|
||||
/>
|
||||
|
||||
{/* Playback Delay */}
|
||||
<Metric
|
||||
title="Playback Delay"
|
||||
description="Delay added by the jitter buffer to smooth playback when frames arrive unevenly."
|
||||
badge="Jitter Buffer Avg. Delay"
|
||||
badgeTheme="light"
|
||||
data={jitterBufferAvgDelayData}
|
||||
gate={inboundVideoRtpStats}
|
||||
supported={
|
||||
isMetricSupported(inboundVideoRtpStats, "jitterBufferDelay") &&
|
||||
isMetricSupported(inboundVideoRtpStats, "jitterBufferEmittedCount")
|
||||
}
|
||||
domain={[0, 30]}
|
||||
unit=" ms"
|
||||
referenceValue={referenceValue}
|
||||
/>
|
||||
|
||||
{/* Packets Lost */}
|
||||
<Metric
|
||||
title="Packets Lost"
|
||||
description="Count of lost inbound video RTP packets."
|
||||
stream={inboundVideoRtpStats}
|
||||
metric="packetsLost"
|
||||
domain={[0, 100]}
|
||||
unit=" packets"
|
||||
/>
|
||||
|
||||
{/* Frames Per Second */}
|
||||
<Metric
|
||||
title="Frames per second"
|
||||
description="Number of inbound video frames displayed per second."
|
||||
stream={inboundVideoRtpStats}
|
||||
metric="framesPerSecond"
|
||||
domain={[0, 80]}
|
||||
unit=" fps"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue