1030 lines
58 KiB
HTML
1030 lines
58 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SnarfNet Homelab Architecture & Topology</title>
|
|
<script src="https://www.gstatic.com/antigravity/web/dev/tailwindcss.min.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
|
|
background-color: #080c14;
|
|
color: #e2e8f0;
|
|
background-image:
|
|
radial-gradient(circle at 50% 0%, rgba(30, 58, 138, 0.15) 0%, transparent 60%),
|
|
radial-gradient(#1e293b 1px, transparent 1px);
|
|
background-size: 100% 100%, 24px 24px;
|
|
}
|
|
|
|
code, .font-mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
.glass-card {
|
|
background: rgba(15, 23, 42, 0.75);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(51, 65, 85, 0.5);
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
}
|
|
|
|
.glass-card-subtle {
|
|
background: rgba(30, 41, 59, 0.45);
|
|
border: 1px solid rgba(71, 85, 105, 0.4);
|
|
}
|
|
|
|
.badge-glow-green {
|
|
box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
|
|
}
|
|
.badge-glow-blue {
|
|
box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
|
|
}
|
|
.badge-glow-purple {
|
|
box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
|
|
}
|
|
.badge-glow-amber {
|
|
box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #0b1120;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #334155;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #475569;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="p-6 md:p-10 min-h-screen">
|
|
|
|
<!-- TOP HEADER & CONTROLS -->
|
|
<header class="max-w-[1720px] mx-auto mb-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 pb-6 border-b border-slate-800/80">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-600/20 border border-blue-500/40 text-blue-400 font-bold text-lg">🪐</span>
|
|
<h1 class="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
|
|
SnarfNet <span class="text-blue-400 font-medium text-xl">| Infrastructure & Topology</span>
|
|
</h1>
|
|
<span class="px-2.5 py-1 text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 rounded-full badge-glow-green flex items-center gap-1.5">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> ALL CLUSTERS ACTIVE
|
|
</span>
|
|
</div>
|
|
<p class="text-slate-400 text-sm max-w-2xl">
|
|
Complete operational schematic mapping dual-WAN routing, VLAN segmentation, 4 compute clusters (Aerodrome, Spaceport, Spacedock, Shipyard), AI inference fabrics, and storage layers.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Quick Filter / Interactive Search -->
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div class="relative w-72">
|
|
<input type="text" id="filterInput" onkeyup="filterTopology()" placeholder="Search services, nodes, IPs..."
|
|
class="w-full bg-slate-900/90 border border-slate-700/80 rounded-lg px-3.5 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition">
|
|
<span class="absolute right-3 top-2.5 text-xs text-slate-500 font-mono">⌘K</span>
|
|
</div>
|
|
<button onclick="resetFilter()" class="px-3.5 py-2 text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg border border-slate-700 transition">
|
|
Reset View
|
|
</button>
|
|
<div class="text-right pl-3 border-l border-slate-800">
|
|
<div class="text-xs text-slate-500 uppercase tracking-wider font-semibold">Topology Release</div>
|
|
<div class="text-sm font-mono text-slate-300">Phase 8 • Nov 2026</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- MAIN TOPOLOGY GRID -->
|
|
<main class="max-w-[1720px] mx-auto space-y-8">
|
|
|
|
<!-- TOP SECTION: NETWORKS, EDGE WAN & INGRESS WAYS -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
|
|
|
|
<!-- LEFT: NETWORKS & VLANS (3 cols) -->
|
|
<div class="lg:col-span-3 space-y-6">
|
|
<div class="glass-card rounded-2xl p-5 border-l-4 border-l-blue-500">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-sm uppercase tracking-wider font-bold text-slate-300 flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
|
|
Network VLAN Fabric
|
|
</h2>
|
|
<span class="text-xs font-mono bg-blue-500/10 text-blue-400 px-2 py-0.5 rounded border border-blue-500/20">8 Zones</span>
|
|
</div>
|
|
|
|
<div class="space-y-2.5 text-xs font-mono">
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
|
|
<div>
|
|
<span class="text-blue-400 font-bold">VLAN 1</span> <span class="text-slate-300 font-sans ml-1">LAN / Core</span>
|
|
<div class="text-slate-500 font-mono text-[11px]">UDM-SE Gateway, Core Switches</div>
|
|
</div>
|
|
<span class="text-slate-400 font-semibold">14.44.4.0/25</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
|
|
<div>
|
|
<span class="text-indigo-400 font-bold">VLAN 2</span> <span class="text-slate-300 font-sans ml-1">Management</span>
|
|
<div class="text-slate-500 font-mono text-[11px]">APs, USP RPS, iDRAC, Switches</div>
|
|
</div>
|
|
<span class="text-slate-400 font-semibold">140.44.44.0/24</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-emerald-500/40 bg-emerald-950/10 flex items-center justify-between hover:border-emerald-500 transition">
|
|
<div>
|
|
<span class="text-emerald-400 font-bold">VLAN 20</span> <span class="text-slate-200 font-sans ml-1">Compute Fleet</span>
|
|
<div class="text-slate-400 font-mono text-[11px]">K3s Aerodrome, Spaceport, Swarm</div>
|
|
</div>
|
|
<span class="text-emerald-400 font-bold">140.44.4.0/25</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-purple-500/40 bg-purple-950/10 flex items-center justify-between hover:border-purple-500 transition">
|
|
<div>
|
|
<span class="text-purple-400 font-bold">VLAN 3</span> <span class="text-slate-200 font-sans ml-1">Spacedock Lab</span>
|
|
<div class="text-slate-400 font-mono text-[11px]">Harvester HCI Virtualization</div>
|
|
</div>
|
|
<span class="text-purple-400 font-bold">140.44.1.0/24</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
|
|
<div>
|
|
<span class="text-amber-400 font-bold">VLAN 40</span> <span class="text-slate-300 font-sans ml-1">Storage SAN</span>
|
|
<div class="text-slate-500 font-mono text-[11px]">SnarfNAS (DS416play), SN-NAS (RS810+)</div>
|
|
</div>
|
|
<span class="text-slate-400 font-semibold">14.10.10.0/25</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
|
|
<div>
|
|
<span class="text-teal-400 font-bold">VLAN 50</span> <span class="text-slate-300 font-sans ml-1">Smart Home</span>
|
|
<div class="text-slate-500 font-mono text-[11px]">Home Assistant, NUT, Tempest</div>
|
|
</div>
|
|
<span class="text-slate-400 font-semibold">14.4.4.0/25</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
|
|
<div>
|
|
<span class="text-rose-400 font-bold">VLAN 60</span> <span class="text-slate-300 font-sans ml-1">HA Interconnect</span>
|
|
<div class="text-slate-500 font-mono text-[11px]">Keepalived VIPs & Sync Heartbeats</div>
|
|
</div>
|
|
<span class="text-slate-400 font-semibold">140.4.4.0/25</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
|
|
<div>
|
|
<span class="text-cyan-400 font-bold">VLAN 30</span> <span class="text-slate-300 font-sans ml-1">Media Clients</span>
|
|
<div class="text-slate-500 font-mono text-[11px]">Smart TVs, Apple TVs, Streaming</div>
|
|
</div>
|
|
<span class="text-slate-400 font-semibold">192.168.1.0/25</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LEGEND & COLOR CODE -->
|
|
<div class="glass-card rounded-2xl p-5 border border-slate-800/80">
|
|
<h3 class="text-xs uppercase tracking-wider font-bold text-slate-400 mb-3">Topology Key</h3>
|
|
<div class="grid grid-cols-2 gap-2 text-xs">
|
|
<div class="flex items-center gap-2 text-slate-300">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span> Core Backbone
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> K3s Compute
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span> Harvester HCI
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span> Swarm Fleet
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-cyan-400"></span> Cloudflare / Tunnel
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span> High Availability
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CENTER: INTERNET, DUAL WAN, UDM-SE GATEWAY (6 cols) -->
|
|
<div class="lg:col-span-6 space-y-6">
|
|
|
|
<!-- INTERNET CLOUD -->
|
|
<div class="flex flex-col items-center">
|
|
<div class="glass-card px-6 py-3 rounded-full border border-blue-500/30 flex items-center gap-3 bg-blue-950/20">
|
|
<svg class="w-6 h-6 text-blue-400 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 00-9.78 2.096A4.001 4.001 0 003 15z"></path></svg>
|
|
<div class="text-center">
|
|
<div class="text-sm font-bold text-white tracking-wide">Public Internet</div>
|
|
<div class="text-[11px] font-mono text-slate-400">Primary WAN: 174.106.252.96</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DUAL WAN FEED PIPES -->
|
|
<div class="w-full grid grid-cols-2 gap-4 mt-4 px-8">
|
|
<!-- Fiber Uplink -->
|
|
<div class="glass-card-subtle p-3 rounded-xl border-t-2 border-t-cyan-500 text-center">
|
|
<div class="flex items-center justify-center gap-1.5 text-cyan-400 text-xs font-bold">
|
|
<span class="w-2 h-2 rounded-full bg-cyan-400"></span> WAN 1: Fiber ONT
|
|
</div>
|
|
<div class="text-xs text-slate-300 mt-0.5 font-mono">1 Gbps Symmetric</div>
|
|
<div class="text-[11px] text-slate-500 font-mono">10G SFP+ to UDM-SE</div>
|
|
</div>
|
|
|
|
<!-- 5G Failover Uplink -->
|
|
<div class="glass-card-subtle p-3 rounded-xl border-t-2 border-t-amber-500 text-center">
|
|
<div class="flex items-center justify-center gap-1.5 text-amber-400 text-xs font-bold">
|
|
<span class="w-2 h-2 rounded-full bg-amber-400"></span> WAN 2: 5G Backup
|
|
</div>
|
|
<div class="text-xs text-slate-300 mt-0.5 font-mono">Cellular Standby</div>
|
|
<div class="text-[11px] text-slate-500 font-mono">GbE RJ45 Failover</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DOWN ARROW SVG -->
|
|
<div class="text-slate-600 my-1">
|
|
<svg class="w-5 h-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UDM-SE GATEWAY -->
|
|
<div class="glass-card rounded-2xl p-6 border border-blue-500/40 relative overflow-hidden">
|
|
<div class="absolute -right-8 -top-8 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl pointer-events-none"></div>
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between pb-4 mb-4 border-b border-slate-800 gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 font-bold">
|
|
🛡️
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white flex items-center gap-2">
|
|
UniFi Dream Machine Special Edition (UDM-SE)
|
|
</h3>
|
|
<div class="text-xs font-mono text-slate-400">Gateway VIP: 14.44.4.1 • UniFi OS v4.1 • WireGuard Server</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2.5 py-1 text-xs font-mono bg-blue-500/10 text-blue-400 border border-blue-500/30 rounded-md">
|
|
10G SFP+ Backbone
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GATEWAY SUBSYSTEMS & POLICIES -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
|
|
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="text-slate-400 font-semibold mb-1 flex items-center gap-1.5">
|
|
<span class="text-blue-400">⚡</span> Routing & QoS
|
|
</div>
|
|
<ul class="text-slate-300 space-y-1 font-mono text-[11px]">
|
|
<li>• Inter-VLAN Wire-Speed L3</li>
|
|
<li>• Smart Queues & FQ-CoDel</li>
|
|
<li>• VLAN 20 Compute Priority</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="text-slate-400 font-semibold mb-1 flex items-center gap-1.5">
|
|
<span class="text-emerald-400">🔒</span> Edge Security
|
|
</div>
|
|
<ul class="text-slate-300 space-y-1 font-mono text-[11px]">
|
|
<li>• Suricata IPS/IDS Level 5</li>
|
|
<li>• Deep Packet Inspection</li>
|
|
<li>• Strict LAN/IoT Isolation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="text-slate-400 font-semibold mb-1 flex items-center gap-1.5">
|
|
<span class="text-purple-400">🎯</span> Core Port Forwards
|
|
</div>
|
|
<ul class="text-slate-300 space-y-1 font-mono text-[11px]">
|
|
<li>• 80/443 → 140.44.4.74 (NPM Host)</li>
|
|
<li>• 10051/52 → 140.44.4.51 (Zabbix)</li>
|
|
<li>• 8443/27015 → 14.4.4.15 (PC)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SWITCHING & WI-FI DISTRIBUTION -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="glass-card-subtle p-4 rounded-xl border border-slate-800 flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-300">🔀</div>
|
|
<div>
|
|
<div class="text-xs font-bold text-slate-200">USW Enterprise Core Switches</div>
|
|
<div class="text-[11px] font-mono text-slate-400">2.5G PoE+ to APs, 10G SFP+ to Racks</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-card-subtle p-4 rounded-xl border border-slate-800 flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-300">📶</div>
|
|
<div>
|
|
<div class="text-xs font-bold text-slate-200">UniFi Wi-Fi 6 Enterprise Fleet</div>
|
|
<div class="text-[11px] font-mono text-slate-400">SSIDs: SnarfNet-IoT, SnarfNet-5G, Trusted</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- RIGHT: WAYS IN FROM OUTSIDE & AI/MEDIA PIPELINE (3 cols) -->
|
|
<div class="lg:col-span-3 space-y-6">
|
|
|
|
<!-- WAYS IN FROM OUTSIDE -->
|
|
<div class="glass-card rounded-2xl p-5 border-l-4 border-l-cyan-500">
|
|
<h2 class="text-sm uppercase tracking-wider font-bold text-slate-300 mb-3 flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
|
|
Edge Access & Ingress
|
|
</h2>
|
|
|
|
<div class="space-y-3 text-xs">
|
|
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-cyan-400"></span> Cloudflare Zero Trust</span>
|
|
<span class="font-mono text-[11px] text-cyan-400">cloudflared</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px]">Outbound-only secure tunnel routes *.snarfnet.net without opening inbound WAN router ports.</p>
|
|
</div>
|
|
|
|
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-indigo-400"></span> Tailscale Mesh VPN</span>
|
|
<span class="font-mono text-[11px] text-indigo-400">100.64.0.0/10</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px]">Subnet routers provide direct wireguard access to all 8 VLANs from mobile devices.</p>
|
|
</div>
|
|
|
|
<div class="p-3 rounded-xl bg-slate-900/60 border border-emerald-500/30 bg-emerald-950/10">
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-emerald-400"></span> Authentik Conditional MFA</span>
|
|
<span class="font-mono text-[11px] text-emerald-400">SSO & Auth</span>
|
|
</div>
|
|
<p class="text-slate-300 text-[11px]">Client IP evaluation: Internal VLANs bypass MFA for frictionless use; external WAN enforces Passkeys/MFA.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI PIPELINE MINI-SCHEMATIC -->
|
|
<div class="glass-card rounded-2xl p-5 border border-purple-500/30 bg-purple-950/10">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="text-xs uppercase tracking-wider font-bold text-purple-300 flex items-center gap-1.5">
|
|
<span>🧠</span> AI Inference Pipeline
|
|
</h3>
|
|
<span class="text-[10px] font-mono text-purple-400 bg-purple-500/20 px-2 py-0.5 rounded">Tesla T4s + Hailo</span>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-xs font-mono">
|
|
<div class="p-2 rounded bg-slate-900/80 border border-purple-500/20 flex items-center justify-between">
|
|
<span class="text-slate-300 font-sans">1. Frontend</span>
|
|
<span class="text-purple-300 font-bold">Open WebUI (:8080)</span>
|
|
</div>
|
|
<div class="text-center text-slate-600 text-xs">↓</div>
|
|
<div class="p-2 rounded bg-slate-900/80 border border-purple-500/20 flex items-center justify-between">
|
|
<span class="text-slate-300 font-sans">2. Reasoning</span>
|
|
<span class="text-purple-300 font-bold">vLLM DeepSeek-R1</span>
|
|
</div>
|
|
<div class="text-center text-slate-600 text-xs">↓</div>
|
|
<div class="p-2 rounded bg-slate-900/80 border border-purple-500/20 flex items-center justify-between">
|
|
<span class="text-slate-300 font-sans">3. Execution</span>
|
|
<span class="text-purple-300 font-bold">Triton + Qdrant</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- MAIN COMPUTE CLUSTERS ROW (THE 4 MAJOR CLUSTERS) -->
|
|
<div class="space-y-6 pt-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-xl font-extrabold text-white flex items-center gap-2">
|
|
Compute Clusters & Workload Fleet
|
|
</h2>
|
|
<p class="text-xs text-slate-400">All compute clusters operate on VLAN 20 (140.44.4.0/25) with dedicated VIPs and Longhorn block fabrics.</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs font-mono">
|
|
<span class="px-2.5 py-1 bg-slate-800 text-slate-300 rounded-md border border-slate-700">29 Physical Nodes</span>
|
|
<span class="px-2.5 py-1 bg-slate-800 text-slate-300 rounded-md border border-slate-700">400+ Containers</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4 CLUSTER CARDS -->
|
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
|
|
|
<!-- CLUSTER 1: AERODROME (MANAGEMENT & OBSERVABILITY) -->
|
|
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-emerald-500 relative flex flex-col justify-between" data-search="aerodrome rancher authentik grafana uptime kuma awx prometheus longhorn">
|
|
<div>
|
|
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-3 h-3 rounded-full bg-emerald-500 badge-glow-green"></span>
|
|
<h3 class="text-lg font-bold text-white">Cluster A: Aerodrome</h3>
|
|
<span class="text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded">Rancher Local</span>
|
|
</div>
|
|
<div class="text-xs text-slate-400 font-mono mt-1">
|
|
10 Nodes • 3 Control Plane + 7 Workers • Debian 12 (arm64) • MetalLB: 140.44.4.28-39
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs font-mono text-emerald-400 font-bold">40 CPU Cores</div>
|
|
<div class="text-[11px] font-mono text-slate-400">65.5 GiB RAM Total</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HARDWARE & TOPOLOGY STRIP -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4 text-xs font-mono">
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">ctl01-03:</span> <span class="text-slate-300">140.44.4.11-13</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">wrk01-04:</span> <span class="text-slate-300">140.44.4.21-24</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">wrk05-07:</span> <span class="text-slate-300">140.44.4.25-27</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800 flex flex-col justify-center text-[11px]">
|
|
<div><span class="text-slate-500">Storage Type:</span> <span class="text-emerald-400 font-bold">Longhorn</span></div>
|
|
<div><span class="text-slate-500">Storage Total:</span> <span class="text-slate-200 font-bold">818 GiB</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CORE WORKLOADS GRID -->
|
|
<div class="space-y-2">
|
|
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & VIPs</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🐄</span> Rancher Management
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">aerodrome.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">:443</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🔑</span> Authentik SSO Portal
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">authentik.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .29</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>📊</span> Grafana Telemetry
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">grafana.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .32</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>📈</span> Prometheus TSDB
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">39 Targets (cAdvisor + Nodes)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">:9090</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🟢</span> Uptime Kuma Probes
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">uptime.snarfnet.net (35 Mon.)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .28</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🦅</span> AWX Ansible Controller
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">awx.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .30</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CLUSTER 2: SPACEPORT (GITOPS & DEVOPS PLATFORM) -->
|
|
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-blue-500 relative flex flex-col justify-between" data-search="spaceport gitea argocd homepage semaphore zabbix coder jenkins longhorn">
|
|
<div>
|
|
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-3 h-3 rounded-full bg-blue-500 badge-glow-blue"></span>
|
|
<h3 class="text-lg font-bold text-white">Cluster B: Spaceport</h3>
|
|
<span class="text-xs font-mono bg-blue-500/10 text-blue-400 border border-blue-500/30 px-2 py-0.5 rounded">GitOps Core</span>
|
|
</div>
|
|
<div class="text-xs text-slate-400 font-mono mt-1">
|
|
10 Nodes • 4 Control Plane + 6 Workers • RPi 5 (arm64) • MetalLB: 140.44.4.57-65
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs font-mono text-blue-400 font-bold">40 CPU Cores</div>
|
|
<div class="text-[11px] font-mono text-slate-400">54.0 GiB RAM Total</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HARDWARE & TOPOLOGY STRIP -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4 text-xs font-mono">
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">ctl01-04:</span> <span class="text-slate-300">140.44.4.41-44</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">wrk01-03:</span> <span class="text-slate-300">140.44.4.51-53</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">wrk04-06:</span> <span class="text-slate-300">140.44.4.54-56</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800 flex flex-col justify-center text-[11px]">
|
|
<div><span class="text-slate-500">Storage Type:</span> <span class="text-blue-400 font-bold">Longhorn</span></div>
|
|
<div><span class="text-slate-500">Storage Total:</span> <span class="text-slate-200 font-bold">1.14 TiB</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CORE WORKLOADS GRID -->
|
|
<div class="space-y-2">
|
|
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & VIPs</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🐙</span> ArgoCD Reconciler
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">argo.snarfnet.net (15 Apps)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">Node .51</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🍵</span> Gitea Repositories
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">git.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .62</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🏠</span> Homepage Dashboard
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">homepage.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .60</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🛡️</span> Zabbix Core Server
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">zabbix.snarfnet.net (28 Hosts)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .61</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>⚙️</span> Semaphore Ansible
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">semaphore.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .58</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>👨💻</span> Coder Dev Cloud
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">coder.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .63</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CLUSTER 3: SPACEDOCK (HARVESTER HCI & GPU COMPUTE) -->
|
|
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-purple-500 relative flex flex-col justify-between" data-search="spacedock harvester vllm triton qdrant tesla t4 dcgm gpu">
|
|
<div>
|
|
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-3 h-3 rounded-full bg-purple-500 badge-glow-purple"></span>
|
|
<h3 class="text-lg font-bold text-white">Cluster C: Spacedock (Harvester HCI)</h3>
|
|
<span class="text-xs font-mono bg-purple-500/10 text-purple-400 border border-purple-500/30 px-2 py-0.5 rounded">GPU Inference</span>
|
|
</div>
|
|
<div class="text-xs text-slate-400 font-mono mt-1">
|
|
4 Physical Nodes • AMD64 Server Architecture • Dedicated Tesla T4 AI Compute
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs font-mono text-purple-400 font-bold">224 CPU Cores</div>
|
|
<div class="text-[11px] font-mono text-slate-400">503 GiB RAM Total • 4x Tesla T4 GPUs</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HARDWARE & TOPOLOGY STRIP -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4 text-xs font-mono">
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Node 01:</span> <span class="text-slate-300">140.44.4.81</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Node 02:</span> <span class="text-slate-300">140.44.4.82</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Node 03:</span> <span class="text-slate-300">140.44.4.83</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Node 04:</span> <span class="text-slate-300">140.44.4.84</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CORE WORKLOADS GRID -->
|
|
<div class="space-y-2">
|
|
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & Inference Services</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🌾</span> Harvester HCI Console
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">harvester.spacedock.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">VLAN 3</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🧠</span> vLLM DeepSeek-R1-14B
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">Reasoning Planner (.81)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30805</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>💎</span> vLLM Gemma-4-12B
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">Coding Specialist (.82)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30804</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🤖</span> vLLM Qwen 2.5-7B
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">Instruction Following (.84)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30800</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🔱</span> Triton Inference Server
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">Decision Engine (.83)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30803</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>⚡</span> Qdrant Vector Engine
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">Semantic Vector Store (.82)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30633</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CLUSTER 4: SHIPYARD (DOCKER SWARM FLEET) -->
|
|
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-amber-500 relative flex flex-col justify-between" data-search="shipyard portainer npm nginx proxy manager gotify heimdall meshcentral peanut pihole swarm">
|
|
<div>
|
|
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-3 h-3 rounded-full bg-amber-500 badge-glow-amber"></span>
|
|
<h3 class="text-lg font-bold text-white">Cluster D: Shipyard (Docker Swarm)</h3>
|
|
<span class="text-xs font-mono bg-amber-500/10 text-amber-400 border border-amber-500/30 px-2 py-0.5 rounded">Swarm VIP: 140.44.4.70</span>
|
|
</div>
|
|
<div class="text-xs text-slate-400 font-mono mt-1">
|
|
5 RPi 5 Nodes • Keepalived VRRP VIP • Host-Mode Ingress • Portainer EE 2.45
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs font-mono text-amber-400 font-bold">20 CPU Cores</div>
|
|
<div class="text-[11px] font-mono text-slate-400">20.0 GiB RAM Total</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HARDWARE & TOPOLOGY STRIP -->
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-2 mb-4 text-xs font-mono">
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Swm01:</span> <span class="text-slate-300">.71</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Swm02:</span> <span class="text-slate-300">.72</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Swm03:</span> <span class="text-slate-300">.73</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-amber-500/30">
|
|
<span class="text-amber-400 font-bold">NPM:</span> <span class="text-slate-200">.74</span>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
|
|
<span class="text-slate-500">Swm05:</span> <span class="text-slate-300">.75</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CORE WORKLOADS GRID -->
|
|
<div class="space-y-2">
|
|
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & Stacks</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🚢</span> Portainer Enterprise
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">shipyard.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:9443</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-amber-500/40 bg-amber-950/10 flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🌐</span> NGINX Proxy Manager
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-300">Host Mode Ingress (.74)</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/20 text-amber-300 border border-amber-500/30">:80/:443</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🔔</span> Gotify Notifications
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">gotify.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:8090</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>🧭</span> Heimdall Landing
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">portal.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:85</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>💻</span> MeshCentral Remote
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">mesh.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:8086</span>
|
|
</div>
|
|
|
|
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
|
|
<div>
|
|
<div class="font-bold text-slate-200 flex items-center gap-1.5">
|
|
<span>📦</span> Homebox Inventory
|
|
</div>
|
|
<div class="text-[11px] font-mono text-slate-400">homebox.snarfnet.net</div>
|
|
</div>
|
|
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:3100</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOTTOM SECTION: STORAGE SAN & SMART HOME FABRICS -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-4">
|
|
|
|
<!-- STORAGE FABRIC -->
|
|
<div class="glass-card rounded-2xl p-6 border-l-4 border-l-amber-500" data-search="storage san nas synology dsm btrfs longhorn iscsi nfs harvester hci ceph">
|
|
<div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-800">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl">💾</span>
|
|
<h3 class="text-base font-bold text-white">Storage SAN & Distributed Volumes (VLAN 40)</h3>
|
|
</div>
|
|
<span class="text-xs font-mono text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">14.10.10.0/25</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
|
|
<!-- 1. SnarfNAS -->
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>SnarfNAS (Synology DS416play)</span>
|
|
<span class="font-mono text-amber-400">14.10.10.72</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px] mb-2.5">Synology DiskStation DS416play desktop appliance, primary NFS/SMB target, media libraries, Time Machine, and Hyper Backup replication.</p>
|
|
</div>
|
|
<div class="pt-2 border-t border-slate-800/80 flex items-center justify-between text-[11px] font-mono">
|
|
<div><span class="text-slate-500">Drives:</span> <span class="text-slate-200 font-bold">4 Drives</span></div>
|
|
<div><span class="text-slate-500">Total Storage:</span> <span class="text-amber-400 font-bold">16 TiB Total</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. SN-NAS -->
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>SN-NAS (Synology RS810+)</span>
|
|
<span class="font-mono text-amber-400">14.10.10.71</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px] mb-2.5">Synology RackStation RS810+ 1U rackmount appliance, dedicated Btrfs backup pool, iSCSI targets, and Snapshot Replication.</p>
|
|
</div>
|
|
<div class="pt-2 border-t border-slate-800/80 flex items-center justify-between text-[11px] font-mono">
|
|
<div><span class="text-slate-500">Drives:</span> <span class="text-slate-200 font-bold">4 Drives</span></div>
|
|
<div><span class="text-slate-500">Total Storage:</span> <span class="text-amber-400 font-bold">37 TiB Total</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Longhorn Spaceport -->
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>Longhorn Spaceport Storage</span>
|
|
<span class="font-mono text-blue-400">140.44.4.41-56</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px] mb-2.5">Replicated distributed block storage across Spaceport workers backing Gitea, Semaphore, Jenkins, and Technitium DNS.</p>
|
|
</div>
|
|
<div class="pt-2 border-t border-slate-800/80 flex items-center justify-between text-[11px] font-mono">
|
|
<div><span class="text-slate-500">Drives:</span> <span class="text-slate-200 font-bold">10 Disks</span></div>
|
|
<div><span class="text-slate-500">Total Storage:</span> <span class="text-blue-400 font-bold">1.14 TiB Total</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. Longhorn Aerodrome -->
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>Longhorn Aerodrome Storage</span>
|
|
<span class="font-mono text-emerald-400">140.44.4.11-27</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px] mb-2.5">Replicated low-latency distributed block storage backing Prometheus, Grafana, Authentik, AWX, and databases.</p>
|
|
</div>
|
|
<div class="pt-2 border-t border-slate-800/80 flex items-center justify-between text-[11px] font-mono">
|
|
<div><span class="text-slate-500">Drives:</span> <span class="text-slate-200 font-bold">7 Disks</span></div>
|
|
<div><span class="text-slate-500">Total Storage:</span> <span class="text-emerald-400 font-bold">818 GiB Total</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5. Harvester HCI Distributed Storage -->
|
|
<div class="md:col-span-2 p-3.5 rounded-xl bg-slate-900/60 border border-purple-500/30 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-purple-400"></span>
|
|
Harvester HCI Distributed Storage (Spacedock Cluster)
|
|
</span>
|
|
<span class="font-mono text-purple-400">140.44.1.0/24 (VLAN 3)</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px] mb-2.5">Multi-node hypervisor storage fabric across 4 physical Harvester nodes backing VM virtual disks, container rootfs, and AI model inference storage.</p>
|
|
</div>
|
|
<div class="pt-2 border-t border-slate-800/80 flex items-center justify-between text-[11px] font-mono">
|
|
<div><span class="text-slate-500">Drives:</span> <span class="text-slate-200 font-bold">35 Disks</span> <span class="text-slate-500 text-[10px]">(across 4 nodes)</span></div>
|
|
<div><span class="text-slate-500">Total Storage:</span> <span class="text-purple-400 font-bold">46.41 TiB Total</span> <span class="text-slate-500 text-[10px]">(46.22 TiB avail)</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMART HOME & EDGE AI -->
|
|
<div class="glass-card rounded-2xl p-6 border-l-4 border-l-teal-500" data-search="home assistant smart home tempest weather nut hailo ai">
|
|
<div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-800">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl">🏡</span>
|
|
<h3 class="text-base font-bold text-white">Smart Home & Edge AI Fabric (VLAN 50)</h3>
|
|
</div>
|
|
<span class="text-xs font-mono text-teal-400 bg-teal-500/10 px-2 py-0.5 rounded border border-teal-500/20">14.4.4.0/25</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>Home Assistant Yellow</span>
|
|
<span class="font-mono text-teal-400">14.4.4.20:8123</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px]">Primary smart home automation hub, Zigbee/Z-Wave networks, Matter, local voice processing.</p>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>Tempest Weather Station</span>
|
|
<span class="font-mono text-teal-400">Direct HA Telemetry</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px]">Local UDP & cloud backyard weather station (Temp, Feels Like, Humidity, Wind Speed rounded to 0.1°).</p>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>NUT Master Daemon</span>
|
|
<span class="font-mono text-teal-400">14.4.4.44:3493</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px]">Network UPS Tools master daemon monitoring central battery units, broadcast shutdown signals.</p>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
|
|
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
|
|
<span>Hailo-8 Edge NPU Node</span>
|
|
<span class="font-mono text-purple-400">140.44.4.7:8000</span>
|
|
</div>
|
|
<p class="text-slate-400 text-[11px]">Dedicated Raspberry Pi 5 with 26 TOPS Hailo-8 AI acceleration running lightweight local LLMs.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- INTERACTIVE FILTER JAVASCRIPT -->
|
|
<script>
|
|
function filterTopology() {
|
|
const q = document.getElementById('filterInput').value.toLowerCase().trim();
|
|
const clusterCards = document.querySelectorAll('.cluster-card');
|
|
|
|
clusterCards.forEach(card => {
|
|
const text = card.getAttribute('data-search') || '';
|
|
const fullText = card.innerText.toLowerCase();
|
|
if (!q || text.includes(q) || fullText.includes(q)) {
|
|
card.style.display = '';
|
|
card.style.opacity = '1';
|
|
} else {
|
|
card.style.opacity = '0.15';
|
|
}
|
|
});
|
|
}
|
|
|
|
function resetFilter() {
|
|
document.getElementById('filterInput').value = '';
|
|
filterTopology();
|
|
}
|
|
|
|
// Keyboard shortcut ⌘K or Ctrl+K to focus search
|
|
window.addEventListener('keydown', (e) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
document.getElementById('filterInput').focus();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|