diff --git a/internal/site/src/components/network-probes-table/network-probes-columns.tsx b/internal/site/src/components/network-probes-table/network-probes-columns.tsx index 05d7377a..c9dbd739 100644 --- a/internal/site/src/components/network-probes-table/network-probes-columns.tsx +++ b/internal/site/src/components/network-probes-table/network-probes-columns.tsx @@ -97,15 +97,15 @@ export function getProbeColumns(longestName = 0, longestTarget = 0): ColumnDef record.latency, - // invertSorting: true, + invertSorting: true, header: ({ column }) => , cell: ({ row }) => { const val = row.original.latency - if (val === undefined) { + if (!val) { return - } let color = "bg-green-500" - if (!val || val > 200) { + if (val > 200) { color = "bg-yellow-500" } if (val > 2000) { @@ -125,18 +125,18 @@ export function getProbeColumns(longestName = 0, longestTarget = 0): ColumnDef , cell: ({ row }) => { - const val = row.original.loss - if (val === undefined) { + const { loss, latency } = row.original + if (loss === undefined || (!latency && !loss)) { return - } let color = "bg-green-500" - if (val > 0) { - color = val > 20 ? "bg-red-500" : "bg-yellow-500" + if (loss) { + color = loss > 20 ? "bg-red-500" : "bg-yellow-500" } return ( - {val}% + {loss}% ) }, diff --git a/internal/site/src/components/network-probes-table/network-probes-table.tsx b/internal/site/src/components/network-probes-table/network-probes-table.tsx index 2f06a98f..f2d29805 100644 --- a/internal/site/src/components/network-probes-table/network-probes-table.tsx +++ b/internal/site/src/components/network-probes-table/network-probes-table.tsx @@ -188,7 +188,7 @@ export default function NetworkProbesTableNew({ Network Probes
- ICMP/TCP/HTTP latency monitoring from this agent + ICMP/TCP/HTTP latency monitoring from agents
diff --git a/internal/site/src/components/network-probes-table/probe-dialog.tsx b/internal/site/src/components/network-probes-table/probe-dialog.tsx index 91474454..dd765365 100644 --- a/internal/site/src/components/network-probes-table/probe-dialog.tsx +++ b/internal/site/src/components/network-probes-table/probe-dialog.tsx @@ -24,7 +24,7 @@ export function AddProbeDialog({ systemId }: { systemId?: string }) { const [protocol, setProtocol] = useState("icmp") const [target, setTarget] = useState("") const [port, setPort] = useState("") - const [probeInterval, setProbeInterval] = useState("60") + const [probeInterval, setProbeInterval] = useState("30") const [name, setName] = useState("") const [loading, setLoading] = useState(false) const [selectedSystemId, setSelectedSystemId] = useState("") @@ -37,7 +37,7 @@ export function AddProbeDialog({ systemId }: { systemId?: string }) { setProtocol("icmp") setTarget("") setPort("") - setProbeInterval("60") + setProbeInterval("30") setName("") setSelectedSystemId("") } @@ -72,13 +72,13 @@ export function AddProbeDialog({ systemId }: { systemId?: string }) { Add {{ foo: t`Probe` }} - + Add {{ foo: t`Network Probe` }} - Configure ICMP, TCP, or HTTP latency monitoring from this agent. + Configure latency monitoring from this agent.
diff --git a/internal/site/src/components/routes/system.tsx b/internal/site/src/components/routes/system.tsx index 68f95a98..c47bc782 100644 --- a/internal/site/src/components/routes/system.tsx +++ b/internal/site/src/components/routes/system.tsx @@ -11,7 +11,7 @@ import { RootDiskCharts, ExtraFsCharts } from "./system/charts/disk-charts" import { BandwidthChart, ContainerNetworkChart } from "./system/charts/network-charts" import { TemperatureChart, BatteryChart } from "./system/charts/sensor-charts" import { GpuPowerChart, GpuDetailCharts } from "./system/charts/gpu-charts" -import { LazyContainersTable, LazySmartTable, LazySystemdTable, LazyNetworkProbesTableNew } from "./system/lazy-tables" +import { LazyContainersTable, LazySmartTable, LazySystemdTable, LazyNetworkProbesTable } from "./system/lazy-tables" import { LoadAverageChart } from "./system/charts/load-average-chart" import { ContainerIcon, CpuIcon, HardDriveIcon, TerminalSquareIcon } from "lucide-react" import { GpuIcon } from "../ui/icons" @@ -147,7 +147,7 @@ export default memo(function SystemDetail({ id }: { id: string }) { {hasSystemd && } - + {/* */} @@ -197,7 +197,7 @@ export default memo(function SystemDetail({ id }: { id: string }) { {pageBottomExtraMargin > 0 &&
}
- + {/* */} diff --git a/internal/site/src/components/routes/system/charts/probes-charts.tsx b/internal/site/src/components/routes/system/charts/probes-charts.tsx index f567f879..f1c59205 100644 --- a/internal/site/src/components/routes/system/charts/probes-charts.tsx +++ b/internal/site/src/components/routes/system/charts/probes-charts.tsx @@ -1,5 +1,5 @@ -import LineChartDefault, { DataPoint } from "@/components/charts/line-chart" -import { pinnedAxisDomain } from "@/components/ui/chart" +import LineChartDefault from "@/components/charts/line-chart" +import type { DataPoint } from "@/components/charts/line-chart" import { toFixedFloat, decimalString } from "@/lib/utils" import { useLingui } from "@lingui/react/macro" import { ChartCard, FilterBar } from "../chart-card" @@ -31,33 +31,44 @@ export function LatencyChart({ const { t } = useLingui() const filter = useStore($filter) - const dataPoints: DataPoint[] = useMemo(() => { + const { dataPoints, visibleKeys } = useMemo(() => { const count = probes.length - return probes - .sort((a, b) => a.name.localeCompare(b.name)) - .map((p, i) => { - const key = probeKey(p) - const filterTerms = filter - ? filter - .toLowerCase() - .split(" ") - .filter((term) => term.length > 0) - : [] - const filtered = filterTerms.length > 0 && !filterTerms.some((term) => key.toLowerCase().includes(term)) - const strokeOpacity = filtered ? 0.1 : 1 - return { - label: p.name || p.target, - dataKey: (record: NetworkProbeStatsRecord) => record.stats?.[key]?.[0] ?? null, - color: count <= 5 ? i + 1 : `hsl(${(i * 360) / count}, var(--chart-saturation), var(--chart-lightness))`, - strokeOpacity, - activeDot: !filtered, - } + const points: DataPoint[] = [] + const visibleKeys: string[] = [] + probes.sort((a, b) => a.name.localeCompare(b.name)) + const filterTerms = filter + ? filter + .toLowerCase() + .split(" ") + .filter((term) => term.length > 0) + : [] + for (let i = 0; i < count; i++) { + const p = probes[i] + const key = probeKey(p) + const filtered = filterTerms.length > 0 && !filterTerms.some((term) => key.toLowerCase().includes(term)) + if (filtered) { + continue + } + visibleKeys.push(key) + points.push({ + label: p.name || p.target, + dataKey: (record: NetworkProbeStatsRecord) => record.stats?.[key]?.[0] ?? "-", + color: count <= 5 ? i + 1 : `hsl(${(i * 360) / count}, var(--chart-saturation), var(--chart-lightness))`, }) + } + return { dataPoints: points, visibleKeys } }, [probes, filter]) + const filteredProbeStats = useMemo(() => { + if (!visibleKeys.length) return probeStats + return probeStats.filter((record) => visibleKeys.some((key) => record.stats?.[key] != null)) + }, [probeStats, visibleKeys]) + + const legend = dataPoints.length < 10 + return ( } empty={empty} title={t`Latency`} @@ -66,13 +77,18 @@ export function LatencyChart({ > `${toFixedFloat(value, value >= 10 ? 0 : 1)} ms`} - contentFormatter={({ value }) => `${decimalString(value, 2)} ms`} - legend + contentFormatter={({ value }) => { + if (value === "-") { + return value + } + return `${decimalString(value, 2)} ms` + }} + legend={legend} filter={filter} /> diff --git a/internal/site/src/components/routes/system/lazy-tables.tsx b/internal/site/src/components/routes/system/lazy-tables.tsx index 5fd9e082..0b4320b9 100644 --- a/internal/site/src/components/routes/system/lazy-tables.tsx +++ b/internal/site/src/components/routes/system/lazy-tables.tsx @@ -42,11 +42,11 @@ export function LazySystemdTable({ systemId }: { systemId: string }) { ) } -const NetworkProbesTableNew = lazy(() => import("@/components/network-probes-table/network-probes-table")) +const NetworkProbesTable = lazy(() => import("@/components/network-probes-table/network-probes-table")) const cache = new Map() -export function LazyNetworkProbesTableNew({ systemId, systemData }: { systemId: string; systemData: SystemData }) { +export function LazyNetworkProbesTable({ systemId, systemData }: { systemId: string; systemData: SystemData }) { const { grid, chartData } = systemData ?? {} const [probes, setProbes] = useState([]) const chartTime = useStore($chartTime) @@ -101,7 +101,7 @@ export function LazyNetworkProbesTableNew({ systemId, systemData }: { systemId:
{isIntersecting && ( <> - + {!!chartData && ( ) } -const NetworkProbesTable = lazy(() => import("@/components/routes/system/network-probes")) - -export function LazyNetworkProbesTable({ - system, - chartData, - grid, - probeStats, -}: { - system: any - chartData: any - grid: any - probeStats: any -}) { - const { isIntersecting, ref } = useIntersectionObserver() - return ( -
- {isIntersecting && ( - - )} -
- ) -}