fix(ui): показывать неизвестный статус карты отдельно
This commit is contained in:
1 parent
1215cbe8ae
commit
329d6b82f7
10 files changed
+44
-12
No files matched your search
@@ -93,7 +93,7 @@ function mapBackendRowToServer(s: BackendServerRow): Server {
|
||||
model: s.model ?? "—",
|
||||
os: s.os ?? "—",
|
||||
enabled: s.enabled,
|
||||
status: (s.status === null ? "offline" : s.status) as Server["status"],
|
||||
status: s.status ?? "unknown",
|
||||
latency: s.latency != null ? Math.round(s.latency) : null,
|
||||
sessions: s.sessions ?? 0,
|
||||
comment: s.comment || undefined,
|
||||
@@ -217,6 +217,7 @@ const ZOOM_MAX = 6
|
||||
// ─── Visual config ────────────────────────────────────────────────────────────
|
||||
|
||||
const STATUS_STYLE = {
|
||||
unknown: { fill: "var(--muted)", stroke: "var(--muted-foreground)", text: "var(--muted-foreground)", glow: "transparent" },
|
||||
online: { fill: "#0f2d1f", stroke: "#4ade80", text: "#4ade80", glow: "rgba(74,222,128,0.15)" },
|
||||
degraded: { fill: "#2d1e06", stroke: "#fbbf24", text: "#fbbf24", glow: "rgba(251,191,36,0.15)" },
|
||||
offline: { fill: "#2d0f0f", stroke: "#f87171", text: "#f87171", glow: "transparent" },
|
||||
@@ -471,7 +472,7 @@ function edgeBadgePosition(
|
||||
|
||||
// ─── Filter ───────────────────────────────────────────────────────────────────
|
||||
|
||||
type FilterKey = "all" | "online" | "degraded" | "offline" | "jump-host" | "exit-node" | "home-router"
|
||||
type FilterKey = "all" | "online" | "degraded" | "offline" | "unknown" | "jump-host" | "exit-node" | "home-router"
|
||||
|
||||
function greEdgeKey(e: GreMapEdge): string {
|
||||
const la = (e.tunnel.localAddress ?? "").trim()
|
||||
@@ -984,7 +985,7 @@ function ContextMenu({ menu, onClose }: { menu: CtxMenu; onClose: () => void })
|
||||
<span className={cn(
|
||||
"size-2 rounded-full",
|
||||
menu.server.status === "online" ? "bg-emerald-400" :
|
||||
menu.server.status === "degraded" ? "bg-amber-400" : "bg-red-400",
|
||||
menu.server.status === "degraded" ? "bg-amber-400" : menu.server.status === "offline" ? "bg-red-400" : "bg-muted-foreground",
|
||||
)} />
|
||||
<span className="text-xs font-mono font-semibold truncate">{menu.server.name}</span>
|
||||
<span className="ml-auto text-[10px] font-mono text-muted-foreground">{menu.server.host}</span>
|
||||
@@ -1872,7 +1873,7 @@ function NetworkMapContent() {
|
||||
const isVisible = (n: typeof nodes[0]) => {
|
||||
if (!matchesSearch(n)) return false
|
||||
if (filter === "all") return true
|
||||
if (filter === "online" || filter === "degraded" || filter === "offline") return n.status === filter
|
||||
if (filter === "online" || filter === "degraded" || filter === "offline" || filter === "unknown") return n.status === filter
|
||||
return n.type === filter
|
||||
}
|
||||
|
||||
@@ -2010,6 +2011,7 @@ function NetworkMapContent() {
|
||||
{ value: "online", label: "Онлайн" },
|
||||
{ value: "degraded", label: "Внимание" },
|
||||
{ value: "offline", label: "Оффлайн" },
|
||||
{ value: "unknown", label: "Неизвестно" },
|
||||
{ value: "jump-host", label: "JumpHost" },
|
||||
{ value: "exit-node", label: "Exit Node" },
|
||||
{ value: "home-router", label: "Home Router"},
|
||||
@@ -2180,6 +2182,7 @@ function NetworkMapContent() {
|
||||
<span>
|
||||
<span className="font-semibold text-red-400">{useLiveData && !hasSnapshot ? "—" : mapServers.filter(s => s.status === "offline").length}</span> оффлайн
|
||||
</span>
|
||||
<span><span className="font-semibold text-muted-foreground">{useLiveData && !hasSnapshot ? "—" : mapServers.filter(s => s.status === "unknown").length}</span> неизвестно</span>
|
||||
<span title="Линии на карте / всего туннелей в данных">
|
||||
<span className="font-semibold text-cyan-400">{greEdges.length}</span>
|
||||
<span className="text-muted-foreground">/</span>
|
||||
@@ -2682,11 +2685,11 @@ function NetworkMapContent() {
|
||||
<text x="10" y="22" fontSize="8" fontWeight="700" fill="#64748b"
|
||||
fontFamily="system-ui" letterSpacing="0.08em">ЛЕГЕНДА</text>
|
||||
|
||||
{(["online","degraded","offline"] as const).map((s, i) => (
|
||||
<g key={s} transform={`translate(10, ${34 + i * 18})`}>
|
||||
{(["online","degraded","offline","unknown"] as const).map((s, i) => (
|
||||
<g key={s} transform={`translate(10, ${30 + i * 16})`}>
|
||||
<circle cx="5" cy="0" r="4.5" fill={STATUS_STYLE[s].stroke} opacity="0.85" />
|
||||
<text x="16" y="4" fontSize="8.5" fill="#cbd5e1" fontFamily="system-ui">
|
||||
{s === "online" ? "Онлайн" : s === "degraded" ? "Внимание" : "Оффлайн"}
|
||||
{s === "online" ? "Онлайн" : s === "degraded" ? "Внимание" : s === "offline" ? "Оффлайн" : "Неизвестно"}
|
||||
</text>
|
||||
</g>
|
||||
))}
|
||||
|
||||
@@ -55,7 +55,7 @@ function toServerOptionsFromMock(): UserServerOption[] {
|
||||
host: s.host,
|
||||
site: s.site,
|
||||
country: s.country,
|
||||
status: s.status,
|
||||
status: s.status === "unknown" ? null : s.status,
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user