wagesj45/nginx-realtime-traffic-dashboard
Watch
1
0
Fork
You've already forked nginx-realtime-traffic-dashboard
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Vendor dashboard frontend assets

Browse source
This commit is contained in:
Jordan Wages 2026-09-17 18:09:35 -05:00
commit 4587bdb144
4 changed files with 36 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -14,7 +14,7 @@ python3 -m venv .venv
pip install -r requirements.txt pip install -r requirements.txt
``` ```
The dashboard uses Bulma and Chart.js from their public CDNs. For an offline deployment, vendor those two assets and update `app/static/index.html`. Bulma and Chart.js are vendored under `app/static/vendor`, so the dashboard does not require browser access to a public CDN.
## Nginx log format ## Nginx log format

14
app/static/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nginx Live Traffic Monitor</title> <title>Nginx Live Traffic Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> <link rel="stylesheet" href="/static/vendor/bulma.min.css">
<style> <style>
:root { --chart-grid: #d9e1ea; } :root { --chart-grid: #d9e1ea; }
[data-theme="dark"] { --chart-grid: #3b4654; } [data-theme="dark"] { --chart-grid: #3b4654; }
@ -23,6 +23,7 @@
<div class="navbar-end"><div class="navbar-item"><div class="select is-small"><select id="theme"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div> <div class="navbar-end"><div class="navbar-item"><div class="select is-small"><select id="theme"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div>
</div></nav> </div></nav>
<main class="section pt-5"><div class="container"> <main class="section pt-5"><div class="container">
<div class="notification is-danger is-light" id="frontend-error" hidden></div>
<div class="level mb-4"><div><h1 class="title is-4 mb-1">Traffic overview</h1><p class="subtitle is-6 mb-0" id="connection">Connecting to telemetry…</p></div> <div class="level mb-4"><div><h1 class="title is-4 mb-1">Traffic overview</h1><p class="subtitle is-6 mb-0" id="connection">Connecting to telemetry…</p></div>
<div class="field has-addons"><p class="control"><span class="select is-small"><select id="window"><option value="60">1 minute</option><option value="300" selected>5 minutes</option><option value="900">15 minutes</option><option value="3600">1 hour</option></select></span></p></div> <div class="field has-addons"><p class="control"><span class="select is-small"><select id="window"><option value="60">1 minute</option><option value="300" selected>5 minutes</option><option value="900">15 minutes</option><option value="3600">1 hour</option></select></span></p></div>
</div> </div>
@ -30,7 +31,16 @@
<div class="card mb-5"><div class="card-content"><div class="level mb-3"><div class="level-left"><h2 class="title is-5 mb-0">Throughput</h2></div><div class="level-right"><span class="tag is-light" id="updated">Waiting for data</span></div></div><div class="chart-wrap"><canvas id="traffic-chart"></canvas></div></div></div> <div class="card mb-5"><div class="card-content"><div class="level mb-3"><div class="level-left"><h2 class="title is-5 mb-0">Throughput</h2></div><div class="level-right"><span class="tag is-light" id="updated">Waiting for data</span></div></div><div class="chart-wrap"><canvas id="traffic-chart"></canvas></div></div></div>
<div class="card"><div class="card-content"><div class="columns"><div class="column is-one-quarter"><h2 class="title is-5">Host breakouts</h2><p class="help mb-3">Select hosts to compare their recent traffic.</p><div id="hosts" class="host-list"></div></div><div class="column"><div class="chart-wrap"><canvas id="host-chart"></canvas></div></div></div></div></div> <div class="card"><div class="card-content"><div class="columns"><div class="column is-one-quarter"><h2 class="title is-5">Host breakouts</h2><p class="help mb-3">Select hosts to compare their recent traffic.</p><div id="hosts" class="host-list"></div></div><div class="column"><div class="chart-wrap"><canvas id="host-chart"></canvas></div></div></div></div></div>
</div></main> </div></main>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script> <script>
window.addEventListener('error', event => {
const box = document.getElementById('frontend-error');
if (box) {
box.hidden = false;
box.textContent = 'Dashboard error: ' + (event.message || 'frontend initialization failed');
}
});
</script>
<script src="/static/vendor/chart.umd.min.js"></script>
<script> <script>
const palette = ['#3273dc','#23d160','#ff3860','#ffdd57','#7957d5','#00d1b2','#f14668','#209cee']; const palette = ['#3273dc','#23d160','#ff3860','#ffdd57','#7957d5','#00d1b2','#f14668','#209cee'];
let selected = new Set(), latest = null, source; let selected = new Set(), latest = null, source;

3
app/static/vendor/bulma.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

20
app/static/vendor/chart.umd.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long