jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-04-22 04:31:50 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

update

Browse Source
This commit is contained in:
henrygd
2026-04-20 21:28:09 -04:00
parent 264b17f429
commit 732983493a
2 changed files with 0 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
internal/site/src/components/routes/system/network-probes-columns.tsx
View File

@@ -1,171 +0,0 @@
import type { Column, ColumnDef } from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import { cn, decimalString } from "@/lib/utils"
import {
GlobeIcon,
TagIcon,
TimerIcon,
ActivityIcon,
WifiOffIcon,
Trash2Icon,
ArrowLeftRightIcon,
MoreHorizontalIcon,
} from "lucide-react"
import { t } from "@lingui/core/macro"
import type { NetworkProbeRecord } from "@/types"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Trans } from "@lingui/react/macro"
export interface ProbeRow extends NetworkProbeRecord {
key: string
latency?: number
loss?: number
}
const protocolColors: Record<string, string> = {
icmp: "bg-blue-500/15 text-blue-400",
tcp: "bg-purple-500/15 text-purple-400",
http: "bg-green-500/15 text-green-400",
}
export function getProbeColumns(
deleteProbe: (id: string) => void,
longestName = 0,
longestTarget = 0
): ColumnDef<ProbeRow>[] {
return [
{
id: "name",
sortingFn: (a, b) => (a.original.name || a.original.target).localeCompare(b.original.name || b.original.target),
accessorFn: (record) => record.name || record.target,
header: ({ column }) => <HeaderButton column={column} name={t`Name`} Icon={TagIcon} />,
cell: ({ getValue }) => (
<div className="ms-1.5 max-w-40 block truncate tabular-nums" style={{ width: `${longestName / 1.05}ch` }}>
{getValue() as string}
</div>
),
},
{
id: "target",
sortingFn: (a, b) => a.original.target.localeCompare(b.original.target),
accessorFn: (record) => record.target,
header: ({ column }) => <HeaderButton column={column} name={t`Target`} Icon={GlobeIcon} />,
cell: ({ getValue }) => (
<div className="ms-1.5 tabular-nums block truncate max-w-44" style={{ width: `${longestTarget / 1.05}ch` }}>
{getValue() as string}
</div>
),
},
{
id: "protocol",
accessorFn: (record) => record.protocol,
header: ({ column }) => <HeaderButton column={column} name={t`Protocol`} Icon={ArrowLeftRightIcon} />,
cell: ({ getValue }) => {
const protocol = getValue() as string
return (
<span
className={cn("ms-1.5 px-2 py-0.5 rounded text-xs font-medium uppercase", protocolColors[protocol] ?? "")}
>
{protocol}
</span>
)
},
},
{
id: "interval",
accessorFn: (record) => record.interval,
header: ({ column }) => <HeaderButton column={column} name={t`Interval`} Icon={TimerIcon} />,
cell: ({ getValue }) => <span className="ms-1.5 tabular-nums">{getValue() as number}s</span>,
},
{
id: "latency",
accessorFn: (record) => record.latency,
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Latency`} Icon={ActivityIcon} />,
cell: ({ row }) => {
const val = row.original.latency
if (val === undefined) {
return <span className="ms-1.5 text-muted-foreground">-</span>
}
return (
<span className="ms-1.5 tabular-nums flex gap-2 items-center">
<span className={cn("shrink-0 size-2 rounded-full", val > 100 ? "bg-yellow-500" : "bg-green-500")} />
{decimalString(val, val < 100 ? 2 : 1).toLocaleString()} ms
</span>
)
},
},
{
id: "loss",
accessorFn: (record) => record.loss,
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Loss`} Icon={WifiOffIcon} />,
cell: ({ row }) => {
const val = row.original.loss
if (val === undefined) {
return <span className="ms-1.5 text-muted-foreground">-</span>
}
return (
<span className="ms-1.5 tabular-nums flex gap-2 items-center">
<span className={cn("shrink-0 size-2 rounded-full", val > 0 ? "bg-yellow-500" : "bg-green-500")} />
{val}%
</span>
)
},
},
{
id: "actions",
enableSorting: false,
header: () => null,
cell: ({ row }) => (
<div className="flex justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-10"
onClick={(event) => event.stopPropagation()}
onMouseDown={(event) => event.stopPropagation()}
>
<span className="sr-only">
<Trans>Open menu</Trans>
</span>
<MoreHorizontalIcon className="w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" onClick={(event) => event.stopPropagation()}>
<DropdownMenuItem
onClick={(event) => {
event.stopPropagation()
deleteProbe(row.original.id)
}}
>
<Trash2Icon className="me-2.5 size-4" />
<Trans>Delete</Trans>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
),
},
]
}
function HeaderButton({ column, name, Icon }: { column: Column<ProbeRow>; name: string; Icon: React.ElementType }) {
const isSorted = column.getIsSorted()
return (
<Button
className={cn(
"h-9 px-3 flex items-center gap-2 duration-50",
isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90"
)}
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
{Icon && <Icon className="size-4" />}
{name}
{/* <ArrowUpDownIcon className="size-4" /> */}
</Button>
)
}

372
internal/site/src/components/routes/system/network-probes.tsx
View File

@@ -1,372 +0,0 @@
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
import { Trans, useLingui } from "@lingui/react/macro"
import { pb } from "@/lib/api"
import { useStore } from "@nanostores/react"
import { $chartTime } from "@/lib/stores"
import { chartTimeData, cn, toFixedFloat, decimalString, getVisualStringWidth } from "@/lib/utils"
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { appendData } from "./chart-data"
// import { AddProbeDialog } from "./probe-dialog"
import { ChartCard } from "./chart-card"
import LineChartDefault, { type DataPoint } from "@/components/charts/line-chart"
import { pinnedAxisDomain } from "@/components/ui/chart"
import type { ChartData, NetworkProbeRecord, NetworkProbeStatsRecord, SystemRecord } from "@/types"
import {
type Row,
type SortingState,
flexRender,
getCoreRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table"
import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { getProbeColumns, type ProbeRow } from "./network-probes-columns"
function probeKey(p: NetworkProbeRecord) {
if (p.protocol === "tcp") return `${p.protocol}:${p.target}:${p.port}`
return `${p.protocol}:${p.target}`
}
export default function NetworkProbes({
system,
chartData,
grid,
realtimeProbeStats,
}: {
system: SystemRecord
chartData: ChartData
grid: boolean
realtimeProbeStats?: NetworkProbeStatsRecord[]
}) {
const systemId = system.id
const [probes, setProbes] = useState<NetworkProbeRecord[]>([])
const [stats, setStats] = useState<NetworkProbeStatsRecord[]>([])
const [latestResults, setLatestResults] = useState<Record<string, { avg: number; loss: number }>>({})
const chartTime = useStore($chartTime)
const { toast } = useToast()
const { t } = useLingui()
const fetchProbes = useCallback(() => {
pb.collection<NetworkProbeRecord>("network_probes")
.getList(0, 2000, {
fields: "id,name,target,protocol,port,interval,enabled,updated",
filter: systemId ? pb.filter("system={:system}", { system: systemId }) : undefined,
})
.then((res) => setProbes(res.items))
.catch(() => setProbes([]))
}, [systemId])
useEffect(() => {
fetchProbes()
}, [fetchProbes])
// Build set of current probe keys to filter out deleted probes from stats
const activeProbeKeys = useMemo(() => new Set(probes.map(probeKey)), [probes])
// Use realtime probe stats when in 1m mode
useEffect(() => {
if (chartTime !== "1m" || !realtimeProbeStats) {
return
}
// Filter stats to only include currently active probes, preserving gap markers
const data: NetworkProbeStatsRecord[] = realtimeProbeStats.map((r) => {
if (!r.stats) {
return r // preserve gap markers from appendData
}
const filtered: NetworkProbeStatsRecord["stats"] = {}
for (const [key, val] of Object.entries(r.stats)) {
if (activeProbeKeys.has(key)) {
filtered[key] = val
}
}
return { stats: filtered, created: r.created }
})
setStats(data)
// Use last non-gap entry for latest results
for (let i = data.length - 1; i >= 0; i--) {
if (data[i].stats) {
const latest: Record<string, { avg: number; loss: number }> = {}
for (const [key, val] of Object.entries(data[i].stats)) {
latest[key] = { avg: val?.[0], loss: val?.[3] }
}
setLatestResults(latest)
break
}
}
}, [chartTime, realtimeProbeStats, activeProbeKeys])
// Fetch probe stats based on chart time (skip in realtime mode)
useEffect(() => {
if (probes.length === 0) {
setStats([])
setLatestResults({})
return
}
if (chartTime === "1m") {
return
}
const controller = new AbortController()
const { type: statsType = "1m", expectedInterval } = chartTimeData[chartTime] ?? {}
console.log("Fetching probe stats", { systemId, statsType, expectedInterval })
pb.collection<NetworkProbeStatsRecord>("network_probe_stats")
.getList(0, 2000, {
fields: "stats,created",
filter: pb.filter("system={:system} && type={:type} && created <= {:created}", {
system: systemId,
type: statsType,
created: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
}),
sort: "-created",
})
.then((raw) => {
console.log("Fetched probe stats", { raw })
// Filter stats to only include currently active probes
const mapped: NetworkProbeStatsRecord[] = raw.items.map((r) => {
const filtered: NetworkProbeStatsRecord["stats"] = {}
for (const [key, val] of Object.entries(r.stats)) {
if (activeProbeKeys.has(key)) {
filtered[key] = val
}
}
return { stats: filtered, created: new Date(r.created).getTime() }
})
// Apply gap detection — inserts null markers where data is missing
const data = appendData([] as NetworkProbeStatsRecord[], mapped, expectedInterval)
setStats(data)
if (mapped.length > 0) {
const last = mapped[mapped.length - 1].stats
const latest: Record<string, { avg: number; loss: number }> = {}
for (const [key, val] of Object.entries(last)) {
latest[key] = { avg: val?.[0], loss: val?.[3] }
}
setLatestResults(latest)
}
})
.catch((e) => {
console.error("Error fetching probe stats", e)
setStats([])
})
return () => controller.abort()
}, [system, chartTime, probes, activeProbeKeys])
const deleteProbe = useCallback(
async (id: string) => {
try {
await pb.collection("network_probes").delete(id)
// fetchProbes()
} catch (err: unknown) {
toast({ variant: "destructive", title: t`Error`, description: (err as Error)?.message })
}
},
[systemId, t]
)
const dataPoints: DataPoint<NetworkProbeStatsRecord>[] = useMemo(() => {
const count = probes.length
return probes.map((p, i) => {
const key = probeKey(p)
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))`,
}
})
}, [probes])
const { longestName, longestTarget } = useMemo(() => {
let longestName = 0
let longestTarget = 0
for (const p of probes) {
longestName = Math.max(longestName, getVisualStringWidth(p.name || p.target))
longestTarget = Math.max(longestTarget, getVisualStringWidth(p.target))
}
return { longestName, longestTarget }
}, [probes])
const columns = useMemo(
() => getProbeColumns(deleteProbe, longestName, longestTarget),
[deleteProbe, longestName, longestTarget]
)
const tableData: ProbeRow[] = useMemo(
() =>
probes.map((p) => {
const key = probeKey(p)
const result = latestResults[key]
return { ...p, key, latency: result?.avg, loss: result?.loss }
}),
[probes, latestResults]
)
const [sorting, setSorting] = useState<SortingState>([{ id: "name", desc: false }])
const table = useReactTable({
data: tableData,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
defaultColumn: {
sortUndefined: "last",
size: 100,
minSize: 0,
},
state: { sorting },
})
const rows = table.getRowModel().rows
const visibleColumns = table.getVisibleLeafColumns()
// if (probes.length === 0 && stats.length === 0) {
// return (
// <Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
// <CardHeader className="p-0 mb-3 sm:mb-4">
// <div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
// <div className="px-2 sm:px-1">
// <CardTitle className="mb-2">
// <Trans>Network Probes</Trans>
// </CardTitle>
// <CardDescription>
// <Trans>ICMP/TCP/HTTP latency monitoring from this agent</Trans>
// </CardDescription>
// </div>
// {/* <div className="relative ms-auto w-full max-w-full md:w-64"> */}
// <AddProbeDialog systemId={systemId} onCreated={fetchProbes} />
// {/* </div> */}
// </div>
// </CardHeader>
// </Card>
// )
// }
//
// console.log("Rendering NetworkProbes", { probes, stats })
return (
<div className="grid gap-4">
<Card className="@container w-full px-3 py-5 sm:py-6 sm:px-6">
<CardHeader className="p-0 mb-3 sm:mb-4">
<div className="grid md:flex gap-x-5 gap-y-3 w-full items-end md:justify-between">
<div className="px-2 sm:px-1">
<CardTitle>
<Trans>Network Probes</Trans>
</CardTitle>
<CardDescription className="mt-1.5">
<Trans>ICMP/TCP/HTTP latency monitoring from this agent</Trans>
</CardDescription>
</div>
{/* <AddProbeDialog systemId={systemId} onCreated={fetchProbes} /> */}
</div>
</CardHeader>
<ProbesTable table={table} rows={rows} colLength={visibleColumns.length} />
</Card>
{stats.length > 0 && (
<ChartCard title={t`Latency`} description={t`Average round-trip time (ms)`} grid={grid}>
<LineChartDefault
chartData={chartData}
customData={stats}
dataPoints={dataPoints}
domain={pinnedAxisDomain()}
connectNulls
tickFormatter={(value) => `${toFixedFloat(value, value >= 10 ? 0 : 1)} ms`}
contentFormatter={({ value }) => `${decimalString(value, 2)} ms`}
legend
/>
</ChartCard>
)}
</div>
)
}
const ProbesTable = memo(function ProbesTable({
table,
rows,
colLength,
}: {
table: ReturnType<typeof useReactTable<ProbeRow>>
rows: Row<ProbeRow>[]
colLength: number
}) {
const scrollRef = useRef<HTMLDivElement>(null)
const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
count: rows.length,
estimateSize: () => 54,
getScrollElement: () => scrollRef.current,
overscan: 5,
})
const virtualRows = virtualizer.getVirtualItems()
const paddingTop = Math.max(0, virtualRows[0]?.start ?? 0 - virtualizer.options.scrollMargin)
const paddingBottom = Math.max(0, virtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0))
return (
<div
className={cn(
"h-min max-h-[calc(100dvh-17rem)] w-full relative overflow-auto rounded-md border",
(!rows.length || rows.length > 2) && "min-h-50"
)}
ref={scrollRef}
>
<div style={{ height: `${virtualizer.getTotalSize() + 48}px`, paddingTop, paddingBottom }}>
<table className="w-full text-sm text-nowrap">
<ProbesTableHead table={table} />
<TableBody>
{rows.length ? (
virtualRows.map((virtualRow) => {
const row = rows[virtualRow.index]
return <ProbesTableRow key={row.id} row={row} virtualRow={virtualRow} />
})
) : (
<TableRow>
<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
<Trans>No results.</Trans>
</TableCell>
</TableRow>
)}
</TableBody>
</table>
</div>
</div>
)
})
function ProbesTableHead({ table }: { table: ReturnType<typeof useReactTable<ProbeRow>> }) {
return (
<TableHeader className="sticky top-0 z-50 w-full border-b-2">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead className="px-2" key={header.id}>
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
))}
</tr>
))}
</TableHeader>
)
}
const ProbesTableRow = memo(function ProbesTableRow({
row,
virtualRow,
}: {
row: Row<ProbeRow>
virtualRow: VirtualItem
}) {
return (
<TableRow>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="py-0" style={{ height: virtualRow.size }}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
)
})