This commit is contained in:
henrygd
2026-04-22 17:42:11 -04:00
parent 6472af1ba4
commit 16e0f6c4a2
16 changed files with 421 additions and 417 deletions

View File

@@ -95,12 +95,12 @@ export function getProbeColumns(longestName = 0, longestTarget = 0): ColumnDef<N
cell: ({ getValue }) => <span className="ms-1.5 tabular-nums">{getValue() as number}s</span>,
},
{
id: "latency",
accessorFn: (record) => record.latency,
id: "response",
accessorFn: (record) => record.response,
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Latency`} Icon={ActivityIcon} />,
header: ({ column }) => <HeaderButton column={column} name={t`Response`} Icon={ActivityIcon} />,
cell: ({ row }) => {
const val = row.original.latency
const val = row.original.response
if (!val) {
return <span className="ms-1.5 text-muted-foreground">-</span>
}
@@ -125,8 +125,8 @@ export function getProbeColumns(longestName = 0, longestTarget = 0): ColumnDef<N
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Loss`} Icon={WifiOffIcon} />,
cell: ({ row }) => {
const { loss, latency } = row.original
if (loss === undefined || (!latency && !loss)) {
const { loss, response } = row.original
if (loss === undefined || (!response && !loss)) {
return <span className="ms-1.5 text-muted-foreground">-</span>
}
let color = "bg-green-500"

View File

@@ -102,7 +102,7 @@ export default function NetworkProbesTableNew({
<Trans>Network Probes</Trans>
</CardTitle>
<div className="text-sm text-muted-foreground flex items-center flex-wrap">
<Trans>ICMP/TCP/HTTP latency monitoring from agents</Trans>
<Trans>ICMP/TCP/HTTP response monitoring from agents</Trans>
</div>
</div>
<div className="md:ms-auto flex items-center gap-2">

View File

@@ -78,7 +78,7 @@ export function AddProbeDialog({ systemId }: { systemId?: string }) {
<Trans>Add {{ foo: t`Network Probe` }}</Trans>
</DialogTitle>
<DialogDescription>
<Trans>Configure latency monitoring from this agent.</Trans>
<Trans>Configure response monitoring from this agent.</Trans>
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="grid gap-4 tabular-nums">

View File

@@ -44,7 +44,7 @@ function ProbeChart({
const filter = useStore($filter)
const { dataPoints, visibleKeys } = useMemo(() => {
const sortedProbes = [...probes].sort((a, b) => b.latency - a.latency)
const sortedProbes = [...probes].sort((a, b) => b.response - a.response)
const count = sortedProbes.length
const points: DataPoint<NetworkProbeStatsRecord>[] = []
const visibleKeys: string[] = []
@@ -103,7 +103,7 @@ function ProbeChart({
)
}
export function LatencyChart({ probeStats, grid, probes, chartData, empty }: ProbeChartProps) {
export function ResponseChart({ probeStats, grid, probes, chartData, empty }: ProbeChartProps) {
const { t } = useLingui()
return (
@@ -114,7 +114,7 @@ export function LatencyChart({ probeStats, grid, probes, chartData, empty }: Pro
chartData={chartData}
empty={empty}
valueIndex={0}
title={t`Latency`}
title={t`Response`}
description={t`Average round-trip time (ms)`}
tickFormatter={(value) => `${toFixedFloat(value, value >= 10 ? 0 : 1)} ms`}
contentFormatter={({ value }) => {

View File

@@ -1,7 +1,7 @@
import { lazy } from "react"
import { useIntersectionObserver } from "@/lib/use-intersection-observer"
import { cn } from "@/lib/utils"
import { LatencyChart, LossChart } from "./charts/probes-charts"
import { ResponseChart, LossChart } from "./charts/probes-charts"
import type { SystemData } from "./use-system-data"
import { $chartTime } from "@/lib/stores"
import { useStore } from "@nanostores/react"
@@ -63,7 +63,7 @@ function ProbesTable({ systemId, systemData }: { systemId: string; systemData: S
<NetworkProbesTable systemId={systemId} probes={probes} />
{!!chartData && !!probes.length && (
<div className="grid xl:grid-cols-2 gap-4">
<LatencyChart
<ResponseChart
probeStats={probeStats}
grid={grid}
probes={probes}

View File

@@ -31,7 +31,8 @@ function appendCacheValue(
}
}
const NETWORK_PROBE_FIELDS = "id,name,system,target,protocol,port,interval,latency,loss,enabled,updated"
const NETWORK_PROBE_FIELDS =
"id,name,system,target,protocol,port,interval,response,resMin1h,resMax1h,resAvg1h,loss,enabled,updated"
interface UseNetworkProbesProps {
systemId?: string
@@ -253,7 +254,7 @@ function probesToStats(probes: NetworkProbeRecord[]): NetworkProbeStatsRecord["s
const stats: NetworkProbeStatsRecord["stats"] = {}
for (const probe of probes) {
const key = probeKey(probe)
stats[key] = [probe.latency, 0, 0, probe.loss]
stats[key] = [probe.response, 0, 0, probe.loss]
}
return stats
}

View File

@@ -552,7 +552,10 @@ export interface NetworkProbeRecord {
target: string
protocol: "icmp" | "tcp" | "http"
port: number
latency: number
response: number
resMin1h: number
resMax1h: number
resAvg1h: number
loss: number
interval: number
enabled: boolean
@@ -560,13 +563,15 @@ export interface NetworkProbeRecord {
}
/**
* 0: avg latency in ms
* 0: avg 1 minute response in ms
*
* 1: min latency in ms
* 1: avg response over 1 hour in ms
*
* 2: max latency in ms
* 2: min response over the last hour in ms
*
* 3: packet loss in %
* 3: max response over the last hour in ms
*
* 4: packet loss in %
*/
type ProbeResult = number[]