diff --git a/frontend/src/components/Topology/NetworkGraph.tsx b/frontend/src/components/Topology/NetworkGraph.tsx index bea4c1c..c3febaa 100644 --- a/frontend/src/components/Topology/NetworkGraph.tsx +++ b/frontend/src/components/Topology/NetworkGraph.tsx @@ -11,17 +11,38 @@ const ICON_MAP: Record = { phone: "📞", camera: "📷", device: "📱", }; +function pokemonId(ip: string): number { + const last = parseInt(ip.split(".").pop() || "0", 10); + return last > 0 ? last : 1; +} + +function PokemonSprite({ ip, size = 32 }: { ip: string; size?: number }) { + const id = pokemonId(ip); + return ( + {`#${id}`} + ); +} + function VmPill({ node }: { node: NetworkNode }) { const dot = node.status === "up" ? "bg-success" : "bg-danger"; return (
+ {node.name} + .{node.ip.split(".").pop()}
); } -function InfraCard({ node }: { node: NetworkNode }) { +function InfraCard({ node, showPokemon }: { node: NetworkNode; showPokemon?: boolean }) { const [showPass, setShowPass] = useState(false); const isUp = node.status === "up"; const border = isUp ? "border-success/30" : "border-danger/30"; @@ -34,7 +55,11 @@ function InfraCard({ node }: { node: NetworkNode }) { onClick={() => setShowPass((p) => !p)} >
- {ICON_MAP[node.icon] || "📦"} + {showPokemon ? ( + + ) : ( + {ICON_MAP[node.icon] || "📦"} + )}

{node.name}

{node.ip}

@@ -59,7 +84,7 @@ function ProxmoxCol({ server, vms }: { server: NetworkNode; vms: NetworkNode[] } return (
- +
{up}/{vms.length}