jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-09-27 11:57:47 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

add signal strength indicator dot to all systems table

Browse Source
This commit is contained in:
henrygd
2026-09-25 19:23:52 -04:00
parent 46fa7c581e
commit fe83f5b831
3 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
internal/site/src/components/systems-table/systems-table-columns.tsx
View File

@@ -38,7 +38,7 @@ import {
secondsToUptimeString,
} from "@/lib/utils"
import { batteryStateTranslations } from "@/lib/i18n"
import { connectedWiFi, strongestWiFi, strongestWiFiSignal } from "@/lib/wifi"
import { connectedWiFi, strongestWiFi, strongestWiFiSignal, wifiSignalState } from "@/lib/wifi"
import type { SystemRecord, WiFi } from "@/types"
import { SystemDialog } from "../add-system"
import AlertButton from "../alerts/alert-button"
@@ -363,7 +363,6 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
return null
}
const displayedConnections = viewMode === "table" ? [strongest] : connections
const signal = (wifi: WiFi) => (wifi.r === undefined ? "—" : `${wifi.r} dBm`)
return (
<Tooltip>
<TooltipTrigger asChild>
@@ -373,9 +372,7 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
className="flex flex-col gap-0.5 min-w-0 py-1 relative z-10"
>
{displayedConnections.map(([id, wifi]) => (
<span key={id} className="tabular-nums whitespace-nowrap">
{signal(wifi)}
</span>
<WiFiSignal key={id} wifi={wifi} />
))}
{viewMode === "table" && connections.length > 1 && (
<span className="text-xs text-muted-foreground">+{connections.length - 1}</span>
@@ -389,8 +386,8 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
<div className="text-[0.65rem] max-w-40 text-muted-foreground uppercase tracking-wide truncate">
{id}
</div>
<div className="flex gap-2 items-center tabular-nums text-xs">
<span className="shrink-0">{signal(wifi)}</span>
<div className="flex gap-2 items-center text-xs">
<WiFiSignal wifi={wifi} className="shrink-0" />
{wifi.s && <span className="truncate max-w-40">{wifi.s}</span>}
</div>
</div>
@@ -702,6 +699,22 @@ function DiskCellWithMultiple(info: CellContext<SystemRecord, unknown>) {
)
}
function WiFiSignal({ wifi, className }: { wifi: WiFi; className?: ClassValue }) {
const state = wifi.r === undefined ? undefined : wifiSignalState(wifi.r)
return (
<span className={cn("flex items-center gap-1.5 tabular-nums whitespace-nowrap", className)}>
<span
className={cn("block size-2 rounded-full shrink-0", {
[STATUS_COLORS[SystemStatus.Up]]: state === MeterState.Good,
[STATUS_COLORS[SystemStatus.Pending]]: state === MeterState.Warn,
[STATUS_COLORS[SystemStatus.Down]]: state === MeterState.Crit,
})}
/>
{wifi.r === undefined ? "—" : `${wifi.r} dBm`}
</span>
)
}
export function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {
className ||= STATUS_COLORS[system.status as keyof typeof STATUS_COLORS] || ""
return (