mirror of
https://github.com/ced4568/ceds-noc.git
synced 2026-08-13 05:14:03 +00:00
Restore NOC index.html
This commit is contained in:
+445
-376
@@ -1,376 +1,445 @@
|
|||||||
<h1>Hi, I'm Chase! <br/>
|
<!DOCTYPE html>
|
||||||
Digital Systems | Infrastructure | RF Edge Systems
|
<html lang="en">
|
||||||
</h1>
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
<h3>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
I build real-world systems that combine data, automation, and infrastructure.
|
|
||||||
From monitoring platforms and dashboards to full infrastructure environments, everything I create is designed to solve practical problems and scale.
|
<title>Ced's NOC | Live Systems Dashboard</title>
|
||||||
</h3>
|
|
||||||
|
<meta
|
||||||
<img align="right" alt="Coding Gorilla" width="400px" style="padding-right:10px;" src="https://gifdb.com/images/thumbnail/monkey-laptop-coding-miys12p5izw3s11s.gif" />
|
name="description"
|
||||||
|
content="Ced's NOC — live network operations center dashboard showing real-time infrastructure health, service status, and edge system monitoring."
|
||||||
<ul>
|
/>
|
||||||
<li>🚀 Currently building system monitoring platforms & dashboards</li>
|
|
||||||
<li>🖥️ Running a full homelab (Proxmox HA Cluster, Kubernetes, Docker)</li>
|
<!-- Open Graph -->
|
||||||
<li>⚙️ Focused on infrastructure, automation, and observability</li>
|
<meta property="og:title" content="Ced's NOC | Live Systems Dashboard" />
|
||||||
<li>🧠 Ask me about K3s clusters, system monitoring, or homelab design</li>
|
<meta property="og:description" content="Live infrastructure visibility — Proxmox, K3s, TrueNAS, APRS edge systems." />
|
||||||
<li>📫 Reach me: [email protected]</li>
|
<meta property="og:type" content="website" />
|
||||||
</ul>
|
<meta property="og:url" content="https://noc.chasedumphord.com" />
|
||||||
|
|
||||||
---
|
<!-- Favicons (from main portfolio) -->
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="https://chasedumphord.com/assets/favicons/favicon-32x32.png" />
|
||||||
# 🧠 Ced's NOC System
|
<link rel="icon" type="image/png" sizes="16x16" href="https://chasedumphord.com/assets/favicons/favicon-16x16.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="https://chasedumphord.com/assets/favicons/favicon-192x192.png" />
|
||||||
👉 **Portfolio Site:** https://chasedumphord.com
|
<link rel="apple-touch-icon" sizes="512x512" href="https://chasedumphord.com/assets/favicons/favicon-512x512.png" />
|
||||||
👉 **Live NOC Dashboard:** https://noc.chasedumphord.com
|
<link rel="shortcut icon" href="https://chasedumphord.com/assets/favicons/favicon.ico" />
|
||||||
|
|
||||||
This repository represents a **live Network Operations Center (NOC) system**, not just a static portfolio.
|
<meta name="robots" content="index, follow" />
|
||||||
|
<meta name="author" content="Chase Dumphord" />
|
||||||
It showcases:
|
|
||||||
|
<!-- Fonts — same as main site -->
|
||||||
* 📊 **Ced's NOC Dashboard** (real system monitoring)
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
* 🧠 **HomeLab Infrastructure** (HA virtualization, VLANs, services)
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
* ☸️ **K3s Cluster** (distributed compute)
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Syne:wght@700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||||
* 📡 **APRS iGate (RF Edge System)**
|
|
||||||
|
<!-- Shared stylesheet from main portfolio -->
|
||||||
---
|
<link rel="stylesheet" href="https://chasedumphord.com/style.css" />
|
||||||
|
|
||||||
# 📊 Ced's NOC Dashboard
|
<!-- NOC-specific styles -->
|
||||||
|
<style>
|
||||||
A central visibility layer for all systems.
|
/* ── NOC page overrides & extras ── */
|
||||||
|
.noc-page-hero {
|
||||||
This dashboard includes real Grafana, Prometheus, and Blackbox Exporter monitoring for live HomeLab services.
|
padding: 3.5rem 0 2rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
---
|
}
|
||||||
|
|
||||||
## 🔍 What it shows:
|
.noc-page-hero .eyebrow {
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
* Infrastructure health
|
}
|
||||||
* Service availability
|
|
||||||
* Network segmentation
|
.noc-page-title {
|
||||||
* RF edge system status
|
font-family: var(--font-display);
|
||||||
|
font-size: clamp(2rem, 4vw, 3.2rem);
|
||||||
---
|
font-weight: 800;
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
## 🧠 Why it matters:
|
line-height: 1.1;
|
||||||
|
}
|
||||||
This demonstrates:
|
|
||||||
|
.noc-page-title span {
|
||||||
* System monitoring mindset
|
color: var(--accent-2);
|
||||||
* Operational visibility
|
}
|
||||||
* Real-world infrastructure awareness
|
|
||||||
* Ability to translate data into actionable insights
|
.noc-page-lead {
|
||||||
|
color: var(--muted);
|
||||||
---
|
font-size: 1rem;
|
||||||
|
max-width: 60ch;
|
||||||
## 🖼️ Live Dashboard Preview
|
margin: 0 0 1.5rem;
|
||||||
|
}
|
||||||
### 📊 Metrics Overview
|
|
||||||
|
.noc-page-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
### 🖥️ Systems Overview
|
gap: 0.6rem 1.4rem;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--muted);
|
||||||
---
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
## 🔴 Live System Status
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noc-page-meta a { color: var(--muted); }
|
||||||
|
.noc-page-meta a:hover { color: var(--accent-2); }
|
||||||
|
|
||||||
|
/* Full-width NOC content area */
|
||||||
---
|
.noc-full {
|
||||||
|
padding: 2.5rem 0 4rem;
|
||||||
# 🧠 Featured System — Ced's NOC (Network Operations Center)
|
}
|
||||||
|
|
||||||
A real-time monitoring and observability platform built on top of my homelab infrastructure.
|
/* Uptime summary bar */
|
||||||
|
.uptime-bar {
|
||||||
---
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
## 🔍 What it demonstrates:
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
* Live system monitoring (services, nodes, edge systems)
|
}
|
||||||
* Infrastructure visibility across VLANs and clusters
|
|
||||||
* Service health tracking (latency, uptime, status)
|
.uptime-pill {
|
||||||
* Real data ingestion (NOT simulated)
|
font-family: var(--font-mono);
|
||||||
* Dashboard design for operational awareness
|
font-size: 0.76rem;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
---
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
## ⚙️ Monitoring Stack:
|
color: var(--muted);
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
* Grafana (Visualization)
|
}
|
||||||
* Prometheus (Metrics collection)
|
|
||||||
* Blackbox Exporter (Service uptime & latency checks)
|
.uptime-pill.online {
|
||||||
* Uptime Kuma (External monitoring layer)
|
color: var(--accent-2);
|
||||||
|
border-color: rgba(94, 250, 204, 0.3);
|
||||||
👉 This is the **core system** that ties everything together.
|
background: rgba(94, 250, 204, 0.06);
|
||||||
|
}
|
||||||
---
|
|
||||||
|
.uptime-pill.warning {
|
||||||
# ⚡ NOC Automation Pipeline
|
color: var(--warning);
|
||||||
|
border-color: rgba(242, 204, 96, 0.3);
|
||||||
The NOC dashboard is powered by a fully automated data pipeline running on real homelab infrastructure.
|
background: rgba(242, 204, 96, 0.06);
|
||||||
|
}
|
||||||
## How It Works
|
|
||||||
|
.uptime-pill.offline {
|
||||||
```
|
color: var(--danger);
|
||||||
Biggie (Proxmox node — 10.10.30.192)
|
border-color: rgba(255, 95, 86, 0.3);
|
||||||
cron: */5 * * * *
|
background: rgba(255, 95, 86, 0.06);
|
||||||
→ noc_update.py
|
}
|
||||||
→ ICMP ping 28 systems
|
|
||||||
→ record latency + online/offline status
|
/* Layer filter tabs */
|
||||||
→ write data/noc-status.json
|
.layer-tabs {
|
||||||
→ git commit + push to ced-portfolio
|
display: flex;
|
||||||
→ GitHub Pages deploys (~30s)
|
flex-wrap: wrap;
|
||||||
→ noc.chasedumphord.com
|
gap: 0.5rem;
|
||||||
→ script.js fetches every 30s
|
margin-bottom: 1.5rem;
|
||||||
→ live dashboard updates
|
}
|
||||||
```
|
|
||||||
|
.layer-tab {
|
||||||
## Pipeline Details
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.76rem;
|
||||||
* **Script:** `~/scripts/noc_update.py` on Biggie
|
font-weight: 700;
|
||||||
* **Schedule:** Cron — every 5 minutes
|
padding: 0.35rem 0.85rem;
|
||||||
* **Log:** `/var/log/noc_update.log`
|
border-radius: 999px;
|
||||||
* **Auth:** GitHub Personal Access Token
|
border: 1px solid var(--line);
|
||||||
* **Language:** Python 3
|
color: var(--muted);
|
||||||
* **Output:** Structured JSON → `data/noc-status.json`
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
---
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
# 🖥️ Systems Monitored (28 Total)
|
|
||||||
|
.layer-tab:hover,
|
||||||
## Proxmox Cluster — 6 Nodes
|
.layer-tab.active {
|
||||||
|
color: var(--accent-2);
|
||||||
| Node | IP |
|
border-color: rgba(94, 250, 204, 0.35);
|
||||||
|------|----|
|
background: rgba(94, 250, 204, 0.07);
|
||||||
| BigWorld | 10.10.30.250 |
|
}
|
||||||
| Biggie | 10.10.30.192 |
|
|
||||||
| Snoop | 10.10.30.153 |
|
/* Roadmap section on NOC page */
|
||||||
| TooShort | 10.10.30.120 |
|
.noc-roadmap {
|
||||||
| Tupac | 10.10.30.74 |
|
margin-top: 3rem;
|
||||||
| DrDre | 10.10.30.227 |
|
padding-top: 2.5rem;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
## K3s Cluster — 12 Nodes
|
}
|
||||||
|
|
||||||
| Role | Node | IP |
|
/* Stack info footer on NOC page */
|
||||||
|------|------|----|
|
.noc-stack-bar {
|
||||||
| Control Plane | django-1 | 10.10.30.72 |
|
margin-top: 2.5rem;
|
||||||
| Control Plane | django-2 | 10.10.30.245 |
|
padding: 1rem 1.25rem;
|
||||||
| Control Plane | django-3 | 10.10.30.128 |
|
border-radius: var(--radius);
|
||||||
| Ingress Worker | node-1 | 10.10.30.219 |
|
background: rgba(0,0,0,0.2);
|
||||||
| Ingress Worker | node-2 | 10.10.30.134 |
|
border: 1px solid var(--line);
|
||||||
| Ingress Worker | node-3 | 10.10.30.222 |
|
font-family: var(--font-mono);
|
||||||
| Data Worker | node-4 | 10.10.30.126 |
|
font-size: 0.78rem;
|
||||||
| Data Worker | node-5 | 10.10.30.239 |
|
color: var(--muted);
|
||||||
| Data Worker | node-6 | 10.10.30.208 |
|
display: flex;
|
||||||
| Monitoring Worker | node-7 | 10.10.30.198 |
|
flex-wrap: wrap;
|
||||||
| Monitoring Worker | node-8 | 10.10.30.216 |
|
gap: 0.5rem 1.5rem;
|
||||||
| Monitoring Worker | node-9 | 10.10.30.29 |
|
align-items: center;
|
||||||
|
}
|
||||||
## Services, Monitoring & Edge — 10 Systems
|
|
||||||
|
.noc-stack-bar strong {
|
||||||
| System | IP | Layer | Role |
|
color: var(--accent-2);
|
||||||
|--------|----|-------|------|
|
}
|
||||||
| TrueNAS | 10.10.30.143 | Infrastructure | Network Attached Storage |
|
|
||||||
| Nginx Proxy Manager | 10.10.30.210 | Networking | Reverse Proxy |
|
@media (max-width: 620px) {
|
||||||
| Prometheus | 10.10.30.140 | Monitoring | Metrics Scraping (Active) |
|
.layer-tabs { gap: 0.4rem; }
|
||||||
| Grafana | 10.10.30.68 | Monitoring | Metrics Dashboard |
|
.layer-tab { font-size: 0.7rem; padding: 0.3rem 0.65rem; }
|
||||||
| Uptime Kuma | 10.10.30.14 | Monitoring | Service Monitor |
|
}
|
||||||
| Dashy | 10.10.30.61 | Services | HomeLab Dashboard |
|
</style>
|
||||||
| Home Assistant | 10.10.30.104 | Services | Home Automation |
|
</head>
|
||||||
| PrimeStation | 10.10.30.233 | Services | Media Server |
|
|
||||||
| APRS iGate Home | 10.10.30.129 | Edge | RF to APRS-IS Gateway |
|
<body>
|
||||||
| APRS iGate Mobile | 10.10.30.35 | Edge | RF Mobile Node |
|
|
||||||
|
<!-- ═══════════════════════════════ NAV ═══════════════════════════════ -->
|
||||||
---
|
<header class="site-header">
|
||||||
|
<div class="container nav">
|
||||||
# 🧱 Foundation — Ced's Home Lab (Infrastructure + Monitoring)
|
<a href="https://chasedumphord.com" class="logo">Ced<span class="logo-cursor">_</span></a>
|
||||||
|
|
||||||
Real-world environment used to simulate production systems and host services.
|
<nav>
|
||||||
|
<ul class="nav-links">
|
||||||
This is the backbone of Ced's NOC — where all systems, services, and monitoring originate.
|
<li><a href="https://chasedumphord.com/#snapshot">Snapshot</a></li>
|
||||||
|
<li><a href="https://chasedumphord.com/#about">About</a></li>
|
||||||
---
|
<li><a href="https://chasedumphord.com/#projects">Projects</a></li>
|
||||||
|
<li><a href="https://chasedumphord.com/#stack">Stack</a></li>
|
||||||
## ⚙️ Core Infrastructure
|
<li><a href="https://chasedumphord.com/#contact">Contact</a></li>
|
||||||
|
<li><a href="https://chasedumphord.com/assets/images/ChaseD_Resume.pdf" target="_blank" rel="noopener noreferrer">Resume</a></li>
|
||||||
* **Proxmox HA Cluster (High Availability Virtualization)**
|
</ul>
|
||||||
* K3s Kubernetes cluster (Raspberry Pi - 12 nodes)
|
</nav>
|
||||||
* TrueNAS storage system
|
</div>
|
||||||
* Docker / containerized workloads
|
</header>
|
||||||
|
|
||||||
---
|
<main id="top">
|
||||||
|
|
||||||
## 🌐 Networking Layer
|
<!-- ═══════════════════════════════ NOC HERO ═══════════════════════════════ -->
|
||||||
|
<div class="noc-page-hero">
|
||||||
* VLAN segmentation
|
<div class="container">
|
||||||
- Main Network
|
<p class="eyebrow">
|
||||||
- IoT Network
|
<span class="eyebrow-dot"></span>
|
||||||
- HomeLab Network (10.10.30.0/24)
|
Ced's NOC • Live Infrastructure Dashboard • Auto-refresh: 30s
|
||||||
- Guest Network
|
</p>
|
||||||
|
|
||||||
* Nginx Proxy Manager (external access layer)
|
<h1 class="noc-page-title">
|
||||||
* Cloudflare Tunnels (secure remote access)
|
Live Systems <span>Dashboard</span>
|
||||||
|
</h1>
|
||||||
---
|
|
||||||
|
<p class="noc-page-lead">
|
||||||
## 📊 Monitoring Stack (LIVE)
|
Real-time visibility into Ced's HomeLab infrastructure — Proxmox, K3s,
|
||||||
|
TrueNAS, APRS RF edge systems, and self-hosted services.
|
||||||
* Grafana (Dashboards)
|
Not simulated. Not a demo. Running hardware.
|
||||||
* Prometheus (Metrics)
|
</p>
|
||||||
* Blackbox Exporter (Service Monitoring)
|
|
||||||
* Uptime Kuma (External Monitoring)
|
<ul class="noc-page-meta">
|
||||||
|
<li>📍 Oxford, MS</li>
|
||||||
👉 The NOC dashboard is built directly on top of this environment.
|
<li><a href="https://chasedumphord.com">← Portfolio</a></li>
|
||||||
|
<li><a href="https://github.com/ced4568" target="_blank" rel="noopener noreferrer">github/ced4568</a></li>
|
||||||
---
|
</ul>
|
||||||
|
</div>
|
||||||
# 📡 Edge System — APRS iGate (RF → Internet Gateway)
|
</div>
|
||||||
|
|
||||||
A real-world RF system that feeds live data into infrastructure.
|
<!-- ═══════════════════════════════ NOC DASHBOARD ═══════════════════════════════ -->
|
||||||
|
<div class="noc-full">
|
||||||
---
|
<div class="container">
|
||||||
|
|
||||||
## ⚙️ System Components
|
<!-- Status command bar -->
|
||||||
|
<div class="noc-command-bar">
|
||||||
* Raspberry Pi + Direwolf APRS TNC
|
<span class="status-dot" id="noc-dot"></span>
|
||||||
* Audio chain tuning (critical for decode accuracy)
|
<span id="noc-status-text">Connecting to NOC feed...</span>
|
||||||
* APRS-IS integration
|
<span class="noc-refresh-badge" id="noc-refresh-badge"></span>
|
||||||
* Real beacon ingestion from handheld radios
|
</div>
|
||||||
|
|
||||||
🔗 **Project:**
|
<p class="noc-proof">
|
||||||
https://github.com/ced4568/ceds-aprs-igate
|
Proxmox • K3s • TrueNAS • VLAN Segmentation • APRS RF Edge Systems
|
||||||
|
</p>
|
||||||
---
|
|
||||||
|
<!-- Uptime summary pills (populated by JS) -->
|
||||||
## 🔥 Key Insight
|
<div class="uptime-bar" id="uptime-bar"></div>
|
||||||
|
|
||||||
This system bridges:
|
<!-- Metrics -->
|
||||||
|
<div class="noc-metrics-grid">
|
||||||
```text
|
<div class="noc-metric">
|
||||||
RF radio signals → Raspberry Pi / Direwolf → APRS-IS → Digital Infrastructure
|
<h3 id="metric-nodes">--</h3>
|
||||||
```
|
<p>Infrastructure Nodes</p>
|
||||||
|
</div>
|
||||||
---
|
<div class="noc-metric">
|
||||||
|
<h3 id="metric-services">--</h3>
|
||||||
## 🎯 Key Tuning Insight
|
<p>Services Online</p>
|
||||||
|
</div>
|
||||||
* Target audio level: **~50–60**
|
<div class="noc-metric">
|
||||||
* Too high → clipping / decode failure
|
<h3 id="metric-vlans">--</h3>
|
||||||
* Too low → missed packets
|
<p>Network Segments</p>
|
||||||
|
</div>
|
||||||
This was tuned using:
|
<div class="noc-metric">
|
||||||
|
<h3 id="metric-edge">--</h3>
|
||||||
* Direwolf audio level output
|
<p>Edge Systems</p>
|
||||||
* Real beacon testing from handheld radios
|
</div>
|
||||||
|
</div>
|
||||||
---
|
|
||||||
|
<!-- Alert panel -->
|
||||||
# 🧠 Featured Systems
|
<div class="noc-alert-panel">
|
||||||
|
<div class="noc-alert-header">
|
||||||
<ul>
|
<h3>🚨 Alert Panel</h3>
|
||||||
<li>
|
<span>Top 3 Priority Systems</span>
|
||||||
<b>📊 Ced's NOC Dashboard</b><br/>
|
</div>
|
||||||
Enterprise-style monitoring platform providing real-time visibility into infrastructure, services, and edge systems.<br/>
|
<div id="noc-alert-list" class="noc-alert-list">
|
||||||
<b>Highlights:</b> Prometheus metrics, Blackbox monitoring, service health tracking, Grafana dashboards.<br/>
|
<p class="noc-loading">Awaiting data feed...</p>
|
||||||
</li>
|
</div>
|
||||||
|
</div>
|
||||||
<br/>
|
|
||||||
|
<!-- Layer filter tabs -->
|
||||||
<li>
|
<div class="layer-tabs" id="layer-tabs">
|
||||||
<b>🧱 Ced's Home Lab</b><br/>
|
<button class="layer-tab active" data-layer="all">All Systems</button>
|
||||||
Full infrastructure environment simulating production systems using virtualization and Kubernetes.<br/>
|
</div>
|
||||||
<b>Highlights:</b> Proxmox HA cluster, 12-node K3s cluster, VLAN segmentation, reverse proxy, monitoring stack.<br/>
|
|
||||||
</li>
|
<!-- System cards grid -->
|
||||||
|
<div id="noc-system-grid" class="noc-system-grid"></div>
|
||||||
<br/>
|
|
||||||
|
<!-- Fallback -->
|
||||||
<li>
|
<div id="noc-fallback" class="noc-fallback" style="display:none;">
|
||||||
<b>📡 APRS iGate (RF Edge System)</b><br/>
|
<p class="noc-fallback-msg">
|
||||||
RF-to-internet gateway ingesting real-world radio data into digital systems.<br/>
|
📡 NOC feed unavailable from this context — systems run locally.<br/>
|
||||||
<b>Highlights:</b> Audio tuning, Direwolf APRS TNC, APRS-IS integration, live beacon ingestion.<br/>
|
Data updates when the local pipeline pushes a fresh noc-status.json.
|
||||||
</li>
|
</p>
|
||||||
</ul>
|
</div>
|
||||||
|
|
||||||
---
|
<!-- Stack info bar -->
|
||||||
|
<div class="noc-stack-bar">
|
||||||
# 🧰 Tech Stack
|
<span><strong>Stack:</strong> Python health checks → JSON → JS dashboard</span>
|
||||||
|
<span><strong>Next:</strong> Grafana + Prometheus integration</span>
|
||||||
## ⚡ Core Technologies
|
<span><strong>Source:</strong>
|
||||||
|
<a href="https://github.com/ced4568/ceds-homelab" target="_blank" rel="noopener noreferrer">
|
||||||
<img align="left" alt="TypeScript" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-plain.svg" />
|
github/ceds-homelab
|
||||||
<img align="left" alt="Git" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" />
|
</a>
|
||||||
<img align="left" alt="Linux" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" />
|
</span>
|
||||||
<img align="left" alt="HTML" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-plain.svg" />
|
</div>
|
||||||
<img align="left" alt="JavaScript" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-plain.svg" />
|
|
||||||
<img align="left" alt="React" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" />
|
<!-- NOC Roadmap -->
|
||||||
<img align="left" alt="NodeJS" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" />
|
<div class="noc-roadmap">
|
||||||
<img align="left" alt="Python" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-plain.svg" />
|
<p class="section-label">// noc roadmap</p>
|
||||||
<img align="left" alt="Docker" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" />
|
<h2 class="section-h2" style="font-family:var(--font-display);font-size:1.6rem;margin:0 0 1.25rem;">Build Stages</h2>
|
||||||
<img align="left" alt="Kubernetes" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg" />
|
|
||||||
<img align="left" alt="Grafana" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/grafana/grafana-original.svg" />
|
<div class="noc-grid">
|
||||||
<img align="left" alt="Prometheus" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/prometheus/prometheus-original.svg" />
|
<div class="noc-card">
|
||||||
<img align="left" alt="Bash" width="30px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bash/bash-original.svg" />
|
<div class="noc-card-badge done">✅ Live</div>
|
||||||
|
<h3>Portfolio NOC</h3>
|
||||||
<br /><br />
|
<p>
|
||||||
|
JSON-driven dashboard showing real inventory, online/offline checks,
|
||||||
## 🖥️ Infrastructure & Systems
|
service labels, latency, and last-check timestamps.
|
||||||
|
</p>
|
||||||
* Proxmox HA Cluster (Virtualization)
|
</div>
|
||||||
* K3s Kubernetes (Raspberry Pi Cluster)
|
<div class="noc-card">
|
||||||
* Docker / Containerized Services
|
<div class="noc-card-badge next">⚙️ Next</div>
|
||||||
* TrueNAS (Storage)
|
<h3>Automated Data Updates</h3>
|
||||||
|
<p>
|
||||||
## 📊 Monitoring & Observability
|
Scheduled scripts auto-refresh system status and push dashboard-ready
|
||||||
|
JSON on a cron interval — no manual updates.
|
||||||
* Grafana (Dashboards)
|
</p>
|
||||||
* Prometheus (Metrics)
|
</div>
|
||||||
* Blackbox Exporter (Service Monitoring)
|
<div class="noc-card">
|
||||||
* Uptime Kuma (External Monitoring)
|
<div class="noc-card-badge future">📈 Future</div>
|
||||||
|
<h3>Grafana + Prometheus</h3>
|
||||||
## 🌐 Networking & Access
|
<p>
|
||||||
|
Full observability stack for Proxmox, TrueNAS, K3s, Raspberry Pi,
|
||||||
* Nginx Proxy Manager (Reverse Proxy)
|
Uptime Kuma, and APRS edge systems with real-time metrics.
|
||||||
* Cloudflare Tunnels (Secure External Access)
|
</p>
|
||||||
* VLAN Segmentation (UniFi Network)
|
</div>
|
||||||
|
</div>
|
||||||
## 📡 Edge & RF Systems
|
</div>
|
||||||
|
|
||||||
* Direwolf (APRS TNC)
|
</div>
|
||||||
* APRS-IS Integration
|
</div>
|
||||||
* Raspberry Pi iGate Systems
|
|
||||||
* Audio Signal Processing / Tuning
|
</main>
|
||||||
|
|
||||||
## 💻 Development
|
<!-- ═══════════════════════════════ FOOTER ═══════════════════════════════ -->
|
||||||
|
<footer class="site-footer">
|
||||||
* Python (Automation / Data Collection)
|
<div class="container footer-content">
|
||||||
* JavaScript (Frontend Dashboard UI)
|
<p>© <span data-year></span> Chase Dumphord — <span class="footer-mono">noc.chasedumphord.com</span></p>
|
||||||
* HTML / CSS (UI Design)
|
<a href="#top" class="back-to-top">↑ back to top</a>
|
||||||
* Bash (System Automation)
|
</div>
|
||||||
* Git / GitHub (Version Control)
|
</footer>
|
||||||
|
|
||||||
# 📈 Roadmap
|
<!-- Shared script from main portfolio -->
|
||||||
|
<script src="https://chasedumphord.com/script.js"></script>
|
||||||
* [x] Grafana + Prometheus deployed
|
|
||||||
* [x] Real service monitoring (Blackbox)
|
<!-- NOC page extras — layer filter tabs + uptime pills -->
|
||||||
* [x] Live NOC dashboard (v1) — 28 systems monitored
|
<script>
|
||||||
* [x] Automated Python pipeline — cron pushing data every 5 minutes
|
// ── Layer filter tabs ──────────────────────────────────────────
|
||||||
* [ ] Response time dashboards
|
// Populated after NOC data loads. Filters the system grid by layer.
|
||||||
* [ ] Alerting system (Prometheus alerts)
|
let allSystems = [];
|
||||||
* [ ] Full NOC dashboard layout (v2)
|
|
||||||
* [ ] Mobile APRS iGate deployment
|
const originalLoad = window.loadNocStatus;
|
||||||
|
|
||||||
# 👤 Connect With Me
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
// Hook into data after the shared script loads it
|
||||||
[LinkedIn](https://www.linkedin.com/in/toochase-dumphord/)
|
const observer = new MutationObserver(() => {
|
||||||
|
const cards = document.querySelectorAll(".noc-system-card");
|
||||||
[GitHub](https://github.com/ced4568)
|
if (cards.length > 0) {
|
||||||
|
buildLayerTabs();
|
||||||
## ⚡ Final Note
|
buildUptimePills();
|
||||||
|
observer.disconnect();
|
||||||
This is not a static portfolio — it is a live representation of real infrastructure, monitoring, and edge systems working together.
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const grid = document.getElementById("noc-system-grid");
|
||||||
|
if (grid) observer.observe(grid, { childList: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
function buildLayerTabs() {
|
||||||
|
const cards = document.querySelectorAll(".noc-system-card");
|
||||||
|
const layers = new Set(["all"]);
|
||||||
|
|
||||||
|
cards.forEach(card => {
|
||||||
|
const layerEl = card.querySelector(".noc-system-top span:last-child");
|
||||||
|
if (layerEl) layers.add(layerEl.textContent.trim());
|
||||||
|
});
|
||||||
|
|
||||||
|
const tabContainer = document.getElementById("layer-tabs");
|
||||||
|
tabContainer.innerHTML = "";
|
||||||
|
|
||||||
|
layers.forEach(layer => {
|
||||||
|
const btn = document.createElement("button");
|
||||||
|
btn.className = "layer-tab" + (layer === "all" ? " active" : "");
|
||||||
|
btn.dataset.layer = layer;
|
||||||
|
btn.textContent = layer === "all" ? "All Systems" : layer;
|
||||||
|
btn.addEventListener("click", () => filterByLayer(layer, btn));
|
||||||
|
tabContainer.appendChild(btn);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterByLayer(layer, activeBtn) {
|
||||||
|
document.querySelectorAll(".layer-tab").forEach(t => t.classList.remove("active"));
|
||||||
|
activeBtn.classList.add("active");
|
||||||
|
|
||||||
|
document.querySelectorAll(".noc-system-card").forEach(card => {
|
||||||
|
if (layer === "all") {
|
||||||
|
card.style.display = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const layerEl = card.querySelector(".noc-system-top span:last-child");
|
||||||
|
card.style.display =
|
||||||
|
layerEl && layerEl.textContent.trim() === layer ? "" : "none";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildUptimePills() {
|
||||||
|
const bar = document.getElementById("uptime-bar");
|
||||||
|
if (!bar) return;
|
||||||
|
|
||||||
|
const cards = document.querySelectorAll(".noc-system-card");
|
||||||
|
let online = 0, warning = 0, offline = 0;
|
||||||
|
|
||||||
|
cards.forEach(card => {
|
||||||
|
const dot = card.querySelector(".mini-status");
|
||||||
|
if (!dot) return;
|
||||||
|
if (dot.classList.contains("online")) online++;
|
||||||
|
else if (dot.classList.contains("warning")) warning++;
|
||||||
|
else if (dot.classList.contains("offline")) offline++;
|
||||||
|
});
|
||||||
|
|
||||||
|
bar.innerHTML = `
|
||||||
|
<span class="uptime-pill online">● ${online} Online</span>
|
||||||
|
${warning > 0 ? `<span class="uptime-pill warning">● ${warning} Degraded</span>` : ""}
|
||||||
|
${offline > 0 ? `<span class="uptime-pill offline">● ${offline} Offline</span>` : ""}
|
||||||
|
<span class="uptime-pill">${online + warning + offline} Total Systems</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user