NetOps Visual 🌐

A Real-Time Cyberpunk Network Topology Visualizer

Transform your infrastructure monitoring from boring metrics into an engaging, animated cyberpunk experience

</div>

🎯 Overview

NetOps Visual is a cutting-edge network topology visualization tool that combines real-time network discovery, geographic mapping, and a stunning cyberpunk terminal aesthetic. Watch your network come alive as nodes pulse with CPU activity, connections flow with data, and threats glow with urgency.

netops-visualizer

✨ Key Features

🗺️ Real-Time Geographic Mapping - Watch network nodes appear on a world map as they're discovered
🔄 Live Network Discovery - Automatically discovers and tracks active network connections
🎨 Cyberpunk Terminal Aesthetic - Matrix-inspired green terminal theme with neon accents
📊 Live Backend Terminal ⭐ NEW! - Floating terminal button with real-time log streaming from the backend
⚡ WebSocket-Powered Updates - Instant updates without page refreshes
🌐 GeoIP Integration - Automatically geolocates discovered network nodes
🎭 Device Classification - Smart classification of endpoints (servers, routers, firewalls, etc.)
🔒 Security Zone Visualization - Visual polygons for DMZ, internal, public, and private zones
⚠️ Threat Intelligence - Overlay threat events with severity indicators
📈 Resource Metrics - Monitor CPU, memory, bandwidth, and connection counts
💫 Animated Connections - See data flowing between nodes in real-time
🎯 Interactive UI - Click nodes for detailed information, filter by zones
📸 Export Capabilities - Save topologies as JSON, screenshots, or reports

🏗️ Architecture

┌─────────────────────────────────────────────────┐
│  React Frontend (Vite + TypeScript)             │
│  ├─ MapLibre GL (Dark Matter Style)             │
│  ├─ WebSocket Client (Real-time Updates)        │
│  ├─ Zustand Store (State Management)            │
│  ├─ shadcn/ui Components                        │
│  └─ Terminal Panel (Backend Log Streaming)      │
└──────────────────┬──────────────────────────────┘
                   │ WebSocket
┌──────────────────▼──────────────────────────────┐
│  Go Backend (:8081)                              │
│  ├─ Network Connection Monitor                  │
│  ├─ GeoIP Lookup (MaxMind)                      │
│  ├─ Device Classification Engine                │
│  ├─ WebSocket Hub (/ws)                         │
│  └─ Log Stream Hub (/logs)                      │
└──────────────────┬──────────────────────────────┘
                   │
┌──────────────────▼──────────────────────────────┐
│  Your Network                                    │
│  ├─ Active TCP/UDP Connections                  │
│  ├─ Remote Endpoints                            │
│  └─ Network Interfaces                          │
└─────────────────────────────────────────────────┘

🚀 Quick Start

Prerequisites

Node.js 18+ (for frontend development)
Go 1.22+ (for backend)
MaxMind GeoLite2 Database (for GeoIP lookups)

Installation

# Clone the repository
git clone <your-repo-url>
cd netops

# Install frontend dependencies
npm install

# Build the Go backend
cd backend
go build -o netops-backend

# Download GeoIP database (optional but recommended)
# Download GeoLite2-City.mmdb from MaxMind and place in backend/

Running the Application

Terminal 1 - Start the Backend:

cd backend
sudo ./netops-backend  # Requires root for network monitoring

Terminal 2 - Start the Frontend:

npm run dev

Open your browser:

http://localhost:5173

Pro Tip: Look for the glowing green terminal button in the bottom-right corner! Click it to watch live backend logs stream in real-time with color-coded messages. It's the perfect way to see your network discovery in action! 🚀

🎮 Features Deep Dive

1. 🗺️ Real-Time Geographic Map

The heart of NetOps Visual is the interactive MapLibre GL map with a dark "Dark Matter" base style perfect for the cyberpunk aesthetic.

Features:

Pan, zoom, and rotate controls
Automatic node positioning based on GeoIP data
Clustering for overlapping nodes at the same location
Smooth animations when nodes appear/disappear

Map Controls:

Left Click + Drag: Pan the map
Scroll Wheel: Zoom in/out
Right Click + Drag: Rotate (pitch)
Click Node: View detailed information

2. 🔄 Live Network Discovery

The Go backend continuously monitors your machine's active network connections using system APIs:

Discovery Process:

Every 5 seconds, scans active TCP/UDP connections
Extracts remote IP addresses
Performs GeoIP lookup for location data
Classifies device type based on port, ASN, and hostname
Broadcasts updates to all connected clients via WebSocket

Node Lifecycle:

New Connection: Node appears with fade-in animation
Active: Node pulses with green glow
Idle >30s: Node marked offline (gray)
Idle >5min: Node removed from map

3. 🎨 Cyberpunk Terminal Aesthetic

NetOps Visual embraces a retro-futuristic terminal aesthetic inspired by classic sci-fi and cyberpunk culture.

Color Palette:

Terminal Green (#00ff41): Healthy/online status, connections
Terminal Amber (#ffb000): Warnings, DMZ zones
Terminal Blue (#00d9ff): HTTP/HTTPS connections, IPv4
Terminal Red (#ff0055): Critical alerts, failed connections
Terminal Purple (#bd00ff): Database connections, IPv6

Visual Effects:

Monospace font (JetBrains Mono / Fira Code)
Subtle scanline overlay
Pulsing glow animations for online nodes
Particle flow animations along connection lines
Neon borders and shadows

4. 📊 Live Backend Terminal ⭐ NEW!

The slide-out terminal panel gives you a real-time window into your backend's activity.

Watch your network monitoring come alive! A beautiful floating terminal button sits in the bottom-right corner, ready to reveal all backend operations as they happen.

Features:

Real-time log streaming via WebSocket (ws://localhost:8081/logs)
Color-coded log levels: INFO (green), WARN (amber), ERROR (red)
Precise timestamps for every log entry
Auto-scroll to latest logs as they arrive
Clear logs button to start fresh
Non-intrusive slide-out design - doesn't obstruct the map view
Floating button with cyberpunk glow effect

How to Access: Look for the glowing green circular button with a terminal icon in the bottom-right corner of the screen. Click it to slide out the terminal panel from the right side.

What You'll See:

Connection scan results: "Found X active connections"
New node discoveries: "Discovering new node: 1.2.3.4"
Node additions: "New node added: Google (142.250.80.46) - server"
Status changes: "Node marked offline: ..."
GeoIP lookup results and errors
All backend activity in real-time

Why It's Awesome: This feature transforms network monitoring from a black box into a transparent, observable system. Watch nodes being discovered, classified, and tracked in real-time. Perfect for debugging, learning, or just enjoying the Matrix-like visualization of your network activity!

5. 🎯 Node Types & Classification

NetOps Visual intelligently classifies discovered endpoints:

| Type | Icon | Detection Logic | |------|------|-----------------| | Server | 🖥️ | Common server ports (80, 443, 8080), datacenter ASNs | | Firewall | 🛡️ | Security appliance vendors, specific ports | | Router | 📡 | ISP ASNs, gateway addresses | | Switch | 🔀 | Layer 2 devices | | Endpoint | 💻 | Default for unclassified connections | | Load Balancer | ⚖️ | Cloud provider ASNs, specific hostnames |

6. 🌐 Connection Visualization

Connection lines show relationships between nodes:

Line Styles:

Solid Green: Active HTTPS connections
Dashed Green: SSH tunnels
Solid Blue: HTTP connections
Dotted Purple: Database connections
Thick Amber: VPN tunnels

Animation:

Lines pulse and animate to show data flow
Brightness indicates connection activity
Hover for latency and bandwidth metrics

7. 🔒 Security Zones

Visualize network security boundaries with colored polygons:

DMZ (Amber): Demilitarized zone, public-facing services
Internal (Green): Trusted internal network
Public (Red): Internet-facing, untrusted
Private (Purple): Highly restricted, sensitive data

Usage: Define security zone polygons in your topology JSON to see them overlaid on the map.

8. 📊 Node Metrics & Details

Click any node to see detailed information:

Name & IP Address: Hostname or owner information
Device Type: Classification icon and label
Status: Online, Offline, Warning, Critical
Location: City, Country, Coordinates
ASN & Owner: Autonomous System Number and organization
Connection Count: Number of active connections
Process: Local process making the connection (if available)
First Seen / Last Seen: Discovery and last activity timestamps
Metrics:
- CPU usage (percentage)
- Memory usage (percentage)
- Bandwidth (Mbps)
- Active connections

9. 🎛️ Control Panels

Legend Panel (Top Left):

Color-c

Netops

Install / Use

README