Compare commits
No commits in common. "main" and "feature/ui-improvements-and-docker" have entirely different histories.
main
...
feature/ui
@ -1,4 +1,3 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"proseWrap": "always"
|
||||
"tabWidth": 4
|
||||
}
|
||||
|
||||
5
Makefile
5
Makefile
@ -1,7 +1,4 @@
|
||||
.PHONY: dev test lint fmt fmt-check check docker
|
||||
|
||||
dev:
|
||||
yarn dev
|
||||
.PHONY: test lint fmt fmt-check check docker
|
||||
|
||||
test:
|
||||
timeout 30 yarn build
|
||||
|
||||
73
README.md
73
README.md
@ -1,7 +1,4 @@
|
||||
NetWatch is an MIT-licensed JavaScript single-page application by
|
||||
[@sneak](https://sneak.berlin) that provides real-time network latency
|
||||
monitoring to common internet hosts, displayed with color-coded figures and
|
||||
sparkline graphs, served from a static bucket or Docker container.
|
||||
NetWatch is an MIT-licensed JavaScript single-page application by [@sneak](https://sneak.berlin) that provides real-time network latency monitoring to common internet hosts, displayed with color-coded figures and sparkline graphs, served from a static bucket or Docker container.
|
||||
|
||||
## Getting Started
|
||||
|
||||
@ -25,50 +22,27 @@ docker run -p 8080:8080 netwatch
|
||||
|
||||
## Rationale
|
||||
|
||||
When debugging network issues, it's useful to have a persistent at-a-glance view
|
||||
of latency and reachability to multiple well-known internet endpoints. NetWatch
|
||||
provides this as a zero-dependency SPA that can be deployed anywhere static
|
||||
files are served, with no backend required.
|
||||
When debugging network issues, it's useful to have a persistent at-a-glance view of latency and reachability to multiple well-known internet endpoints. NetWatch provides this as a zero-dependency SPA that can be deployed anywhere static files are served, with no backend required.
|
||||
|
||||
## Design
|
||||
|
||||
The application is a single-page app built with Vite and Tailwind CSS v4. All
|
||||
code lives in `src/main.js` with a class-based architecture:
|
||||
The application is a single-page app built with Vite and Tailwind CSS v4. All code lives in `src/main.js` with a class-based architecture:
|
||||
|
||||
- **`CONFIG`**: Frozen configuration object (update interval, timeouts, axis
|
||||
ticks, etc.)
|
||||
- **`HostState`**: Per-host state management — history buffer, latency tracking,
|
||||
status transitions
|
||||
- **`AppState`**: Top-level state container — WAN hosts, local hosts, pause
|
||||
state, aggregate stats
|
||||
- **`SparklineRenderer`**: Canvas 2D sparkline drawing with fixed axes,
|
||||
color-coded line segments, error regions, and DPR-aware scaling
|
||||
- **UI functions**: `buildUI()` constructs the DOM, `updateHostRow()` /
|
||||
`updateSummary()` / `updateHealthBox()` handle incremental updates
|
||||
- **`tick()`**: Main loop — measures all hosts in parallel via `Promise.all`,
|
||||
pushes samples, redraws UI. When paused, pushes blank markers (no probes, no
|
||||
false outage)
|
||||
- **`CONFIG`**: Frozen configuration object (update interval, timeouts, axis ticks, etc.)
|
||||
- **`HostState`**: Per-host state management — history buffer, latency tracking, status transitions
|
||||
- **`AppState`**: Top-level state container — WAN hosts, local hosts, pause state, aggregate stats
|
||||
- **`SparklineRenderer`**: Canvas 2D sparkline drawing with fixed axes, color-coded line segments, error regions, and DPR-aware scaling
|
||||
- **UI functions**: `buildUI()` constructs the DOM, `updateHostRow()` / `updateSummary()` / `updateHealthBox()` handle incremental updates
|
||||
- **`tick()`**: Main loop — measures all hosts in parallel via `Promise.all`, pushes samples, redraws UI. When paused, pushes blank markers (no probes, no false outage)
|
||||
|
||||
### Monitoring targets
|
||||
|
||||
- **22 WAN hosts**: datavi.be, Anthropic API, OpenAI API, AWS Console, GCP
|
||||
Console, Azure, Cloudflare, Fastly, Akamai, GitHub, B2, 7 S3 regional
|
||||
endpoints (Cape Town, London, Bahrain, Tokyo, Sydney, Oregon, São Paulo), 4
|
||||
GCS locational endpoints (Iowa, Belgium, Singapore, Sydney)
|
||||
- **Local CPE**: Cable modem at 192.168.100.1 (always monitored)
|
||||
- **Local Gateway**: Auto-detected on startup by probing common default gateway
|
||||
addresses (192.168.1.1, 192.168.0.1, 192.168.8.1, 10.0.0.1); first responder
|
||||
wins. Note: modern browsers enforce Private Network Access restrictions that
|
||||
block public-origin pages from reaching RFC1918 addresses, so local targets
|
||||
only work when NetWatch is served from localhost or a private address.
|
||||
|
||||
Local hosts are tracked separately from WAN stats.
|
||||
- **9 WAN hosts**: Google Cloud Console, AWS Console, GitHub, Cloudflare, Azure, DigitalOcean, Fastly, Akamai, datavi.be
|
||||
- **1 Local host**: Local Gateway (192.168.100.1), tracked separately from WAN stats
|
||||
|
||||
### Latency measurement
|
||||
|
||||
HEAD requests with `mode: 'no-cors'` and `cache: 'no-store'`, timed with
|
||||
`performance.now()`. 1-second timeout; anything over 1000ms is clamped to
|
||||
unreachable. IPv4 only.
|
||||
HEAD requests with `mode: 'no-cors'` and `cache: 'no-store'`, timed with `performance.now()`. 1-second timeout; anything over 1000ms is clamped to unreachable. IPv4 only.
|
||||
|
||||
### Color coding
|
||||
|
||||
@ -98,40 +72,31 @@ dist/
|
||||
- Summary stats: reachable count, min/max/avg latency across WAN hosts only
|
||||
- Fixed chart axes: Y-axis 0–1000ms, X-axis 0–300s
|
||||
- Color-coded latency figures and sparkline line segments
|
||||
- Play/pause: pause stops probes but history keeps scrolling (blank gaps, no
|
||||
false outage)
|
||||
- Play/pause: pause stops probes but history keeps scrolling (blank gaps, no false outage)
|
||||
- Clickable service URLs
|
||||
- Canvas-based sparkline rendering with devicePixelRatio scaling
|
||||
- Zero runtime dependencies: all resources bundled into build artifacts
|
||||
|
||||
## Deployment
|
||||
|
||||
After running `yarn build`, deploy the contents of the `dist/` directory to any
|
||||
static file host (S3, GCS, Cloudflare Pages, Vercel, Netlify, GitHub Pages) or
|
||||
use the Docker image behind a reverse proxy.
|
||||
After running `yarn build`, deploy the contents of the `dist/` directory to any static file host (S3, GCS, Cloudflare Pages, Vercel, Netlify, GitHub Pages) or use the Docker image behind a reverse proxy.
|
||||
|
||||
The Docker image:
|
||||
|
||||
- Listens on port 8080 by default (override with `PORT` env var)
|
||||
- Trusts `X-Forwarded-For` from RFC1918 reverse proxies (10/8, 172.16/12,
|
||||
192.168/16)
|
||||
- Trusts `X-Forwarded-For` from RFC1918 reverse proxies (10/8, 172.16/12, 192.168/16)
|
||||
- Sends access logs to stdout
|
||||
- Caches static assets with immutable headers
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
Requires a modern browser with ES modules, Fetch API, Canvas API, and CSS custom
|
||||
properties.
|
||||
Requires a modern browser with ES modules, Fetch API, Canvas API, and CSS custom properties.
|
||||
|
||||
## Limitations
|
||||
|
||||
- **CORS**: Some hosts may block cross-origin HEAD requests. The app uses
|
||||
`no-cors` mode which allows the request but provides opaque responses. Latency
|
||||
is still measurable based on request timing.
|
||||
- **Local gateway**: The 192.168.100.1 endpoint requires the host to be
|
||||
accessible from your network.
|
||||
- **Network conditions**: Measurements reflect browser-to-endpoint latency,
|
||||
which includes your local network, ISP, and internet routing.
|
||||
- **CORS**: Some hosts may block cross-origin HEAD requests. The app uses `no-cors` mode which allows the request but provides opaque responses. Latency is still measurable based on request timing.
|
||||
- **Local gateway**: The 192.168.100.1 endpoint requires the host to be accessible from your network.
|
||||
- **Network conditions**: Measurements reflect browser-to-endpoint latency, which includes your local network, ISP, and internet routing.
|
||||
|
||||
## TODO
|
||||
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
# Development Policies
|
||||
|
||||
- Docker image references by tag are server-mutable, therefore using them is an
|
||||
RCE vulnerability. All docker image references must use cryptographic hashes
|
||||
to securely specify the exact image that is expected.
|
||||
- Docker image references by tag are server-mutable, therefore using them is
|
||||
an RCE vulnerability. All docker image references must use cryptographic
|
||||
hashes to securely specify the exact image that is expected.
|
||||
|
||||
- Correspondingly, `go install` commands using things like '@latest' are also
|
||||
dangerous RCE. Whenever writing scripts or tools, ALWAYS specify go install
|
||||
targets using commit hashes which are cryptographically secure.
|
||||
- Correspondingly, `go install` commands using things like '@latest' are
|
||||
also dangerous RCE. Whenever writing scripts or tools, ALWAYS specify go
|
||||
install targets using commit hashes which are cryptographically secure.
|
||||
|
||||
- Every repo with software in it must have a Makefile in the root. Each such
|
||||
Makefile should support `make test` (runs the project-specific tests),
|
||||
`make lint`, `make fmt` (writes), `make fmt-check` (readonly), and
|
||||
`make check` (has `test`, `lint`, and `fmt-check` as prereqs), `make docker`
|
||||
(builds docker image).
|
||||
- Every repo with software in it must have a Makefile in the root. Each
|
||||
such Makefile should support `make test` (runs the project-specific
|
||||
tests), `make lint`, `make fmt` (writes), `make fmt-check` (readonly), and
|
||||
`make check` (has `test`, `lint`, and `fmt-check` as prereqs), `make
|
||||
docker` (builds docker image).
|
||||
|
||||
- Every repo should have a Dockerfile. If the repo contains non-server software,
|
||||
the Dockerfile should bring up a development environment and `make check`
|
||||
(i.e. the docker build should fail if the branch is not green).
|
||||
- Every repo should have a Dockerfile. If the repo contains non-server
|
||||
software, the Dockerfile should bring up a development environment and
|
||||
`make check` (i.e. the docker build should fail if the branch is not
|
||||
green).
|
||||
|
||||
- Platform-specific standard formatting should be used. `black` for python,
|
||||
`prettier` for js/css/etc, `go fmt` for go. The only changes to default
|
||||
@ -24,27 +25,27 @@
|
||||
everything except `go fmt`).
|
||||
|
||||
- If local testing is possible (it is not always), `make check` should be a
|
||||
pre-commit hook. If it is not possible, `make lint && make fmt-check` should
|
||||
be a pre-commit hook.
|
||||
pre-commit hook. If it is not possible, `make lint && make fmt-check`
|
||||
should be a pre-commit hook.
|
||||
|
||||
- If a working `make test` takes more than 20 seconds, that's a bug that needs
|
||||
fixing. In fact, there should be a timeout specified in the `Makefile` that
|
||||
fails it automatically if it takes >30s.
|
||||
- If a working `make test` takes more than 20 seconds, that's a bug that
|
||||
needs fixing. In fact, there should be a timeout specified in the
|
||||
`Makefile` that fails it automatically if it takes >30s.
|
||||
|
||||
- Docker builds should time out in 5 minutes or less.
|
||||
|
||||
- `main` must always pass `make check`, no exceptions.
|
||||
|
||||
- Do all changes on a feature branch. You can do whatever you want on a feature
|
||||
branch.
|
||||
- Do all changes on a feature branch. You can do whatever you want on a
|
||||
feature branch.
|
||||
|
||||
- We have a standardized `.golangci.yml` which we reuse and is _NEVER_ to be
|
||||
modified by an agent, only manually by the user. It can be copied from
|
||||
`~/dev/upaas/.golangci.yml` if it exists at that location.
|
||||
|
||||
- When specifying images or packages by hash in Dockerfiles or
|
||||
`docker-compose.yml`, put a comment above the line and show the version and
|
||||
date at which it was current.
|
||||
`docker-compose.yml`, put a comment above the line and show the version
|
||||
and date at which it was current.
|
||||
|
||||
- For javascript, always use `yarn` over `npm`.
|
||||
|
||||
@ -53,11 +54,11 @@
|
||||
- Simple projects should be configured with environment variables, as is
|
||||
standard for Dockerized applications.
|
||||
|
||||
- Dockerized web services should listen on the default HTTP port of 8080 unless
|
||||
overridden with the `PORT` environment variable.
|
||||
- Dockerized web services should listen on the default HTTP port of 8080
|
||||
unless overridden with the `PORT` environment variable.
|
||||
|
||||
- The `README.md` is a project's primary documentation. It should contain at a
|
||||
minimum the following sections:
|
||||
- The `README.md` is a project's primary documentation. It should contain
|
||||
at a minimum the following sections:
|
||||
- Description
|
||||
- Include a short and complete description of the functionality and
|
||||
purpose of the software as the first line in the readme. It must
|
||||
@ -67,10 +68,10 @@
|
||||
- the category (web server, SPA, command line tool, etc)
|
||||
- the license
|
||||
- the author
|
||||
- eg: "µPaaS is an MIT-licensed Go web application by @sneak that
|
||||
receives git-frontend webhooks and interacts with a Docker server
|
||||
to build and deploy applications in realtime as certain branches
|
||||
are updated."
|
||||
- eg: "µPaaS is an MIT-licensed Go web application by @sneak
|
||||
that receives git-frontend webhooks and interacts with a
|
||||
Docker server to build and deploy applications in realtime as
|
||||
certain branches are updated."
|
||||
- Getting Started
|
||||
- a code block with copy-pasteable installation/use sections
|
||||
- Rationale
|
||||
@ -78,27 +79,28 @@
|
||||
- Design
|
||||
- how is the program structured?
|
||||
- TODO
|
||||
- This is your TODO list for the project - update it meticulously, even
|
||||
in between commits. Whenever planning, put your todo list in the
|
||||
README so that a separate agent with new context can pick up where you
|
||||
left off.
|
||||
- This is your TODO list for the project - update it meticulously,
|
||||
even in between commits. Whenever planning, put your todo list in
|
||||
the README so that a separate agent with new context can pick up
|
||||
where you left off.
|
||||
- License
|
||||
- GPL or MIT or WTFPL - ask the user when beginning a new project and
|
||||
include a LICENSE file in the root and in a section in the README.
|
||||
- GPL or MIT or WTFPL - ask the user when beginning a new project
|
||||
and include a LICENSE file in the root and in a section in the
|
||||
README.
|
||||
- Author
|
||||
- @sneak (link `@sneak` to `https://sneak.berlin`).
|
||||
|
||||
- When beginning a new project, initialize a git repo and make the first commit
|
||||
simply the first version of the README.md in the root of the repo.
|
||||
- When beginning a new project, initialize a git repo and make the first
|
||||
commit simply the first version of the README.md in the root of the repo.
|
||||
|
||||
- For Go packages, the module root is `sneak.berlin/go/...`, such as
|
||||
`sneak.berlin/go/dnswatcher`.
|
||||
- For Go packages, the module root is `sneak.berlin/go/...`, such
|
||||
as `sneak.berlin/go/dnswatcher`.
|
||||
|
||||
- We use SemVer always.
|
||||
|
||||
- If no tag `1.0.0` or greater exists in the repository, modify the existing
|
||||
migrations and assume no installed base or existing databases. If `>=1.0.0`,
|
||||
database changes add new migration files.
|
||||
migrations and assume no installed base or existing databases. If
|
||||
`>=1.0.0`, database changes add new migration files.
|
||||
|
||||
- New repos must have at a minimum the following files:
|
||||
- `README.md`, `.git`, `.gitignore`
|
||||
|
||||
304
src/main.js
304
src/main.js
@ -2,21 +2,11 @@ import "./styles.css";
|
||||
|
||||
// --- Configuration -----------------------------------------------------------
|
||||
|
||||
// Timing, axis labels, and display constants. Latency above maxLatency is
|
||||
// clamped to "unreachable". The sparkline Y-axis is capped at
|
||||
// graphMaxLatency — values above it pin to the top of the chart but still
|
||||
// display their real value in the latency figure. The history buffer holds
|
||||
// maxHistoryPoints samples (historyDuration / updateInterval).
|
||||
const CONFIG = Object.freeze({
|
||||
updateInterval: 3000,
|
||||
updateInterval: 2000,
|
||||
historyDuration: 300,
|
||||
get requestTimeout() {
|
||||
return this.updateInterval - 50;
|
||||
},
|
||||
get maxLatency() {
|
||||
return this.requestTimeout;
|
||||
},
|
||||
graphMaxLatency: 1000,
|
||||
requestTimeout: 1000,
|
||||
maxLatency: 1000,
|
||||
yAxisTicks: [0, 250, 500, 750, 1000],
|
||||
xAxisTicks: [0, 60, 120, 180, 240, 300],
|
||||
canvasHeight: 80,
|
||||
@ -25,136 +15,29 @@ const CONFIG = Object.freeze({
|
||||
},
|
||||
});
|
||||
|
||||
// WAN endpoints to monitor. These are used for the aggregate health/stats
|
||||
// display (min/max/avg). Ordered: personal, LLM APIs, big-3 cloud, then
|
||||
// CDN/hosting/other.
|
||||
const WAN_HOSTS = [
|
||||
{ name: "datavi.be", url: "https://datavi.be" },
|
||||
{ name: "Anthropic API", url: "https://api.anthropic.com" },
|
||||
{ name: "OpenAI API", url: "https://api.openai.com" },
|
||||
{ name: "AWS Console", url: "https://console.aws.amazon.com" },
|
||||
{ name: "Google Cloud Console", url: "https://console.cloud.google.com" },
|
||||
{ name: "Microsoft Azure", url: "https://portal.azure.com" },
|
||||
{ name: "AWS Console", url: "https://console.aws.amazon.com" },
|
||||
{ name: "GitHub", url: "https://github.com" },
|
||||
{ name: "Cloudflare", url: "https://www.cloudflare.com" },
|
||||
{ name: "Microsoft Azure", url: "https://portal.azure.com" },
|
||||
{ name: "DigitalOcean", url: "https://www.digitalocean.com" },
|
||||
{ name: "Fastly CDN", url: "https://www.fastly.com" },
|
||||
{ name: "Akamai", url: "https://www.akamai.com" },
|
||||
{ name: "GitHub", url: "https://github.com" },
|
||||
{ name: "B2", url: "https://api.backblazeb2.com" },
|
||||
{
|
||||
name: "S3 af-south-1 (Cape Town)",
|
||||
url: "https://s3.af-south-1.amazonaws.com",
|
||||
},
|
||||
{
|
||||
name: "S3 eu-west-2 (London)",
|
||||
url: "https://s3.eu-west-2.amazonaws.com",
|
||||
},
|
||||
{
|
||||
name: "S3 me-south-1 (Bahrain)",
|
||||
url: "https://s3.me-south-1.amazonaws.com",
|
||||
},
|
||||
{
|
||||
name: "S3 ap-northeast-1 (Tokyo)",
|
||||
url: "https://s3.ap-northeast-1.amazonaws.com",
|
||||
},
|
||||
{
|
||||
name: "S3 ap-southeast-2 (Sydney)",
|
||||
url: "https://s3.ap-southeast-2.amazonaws.com",
|
||||
},
|
||||
{
|
||||
name: "S3 us-west-2 (Oregon)",
|
||||
url: "https://s3.us-west-2.amazonaws.com",
|
||||
},
|
||||
{
|
||||
name: "S3 sa-east-1 (São Paulo)",
|
||||
url: "https://s3.sa-east-1.amazonaws.com",
|
||||
},
|
||||
// Hetzner regional speed test servers — genuine per-DC endpoints
|
||||
{
|
||||
name: "Hetzner nbg1 (Nuremberg DE)",
|
||||
url: "https://nbg1-speed.hetzner.com",
|
||||
},
|
||||
{
|
||||
name: "Hetzner fsn1 (Falkenstein DE)",
|
||||
url: "https://fsn1-speed.hetzner.com",
|
||||
},
|
||||
{
|
||||
name: "Hetzner hel1 (Helsinki FI)",
|
||||
url: "https://hel1-speed.hetzner.com",
|
||||
},
|
||||
{
|
||||
name: "Hetzner ash (Ashburn VA-US)",
|
||||
url: "https://ash-speed.hetzner.com",
|
||||
},
|
||||
{
|
||||
name: "Hetzner hil (Hillsboro OR-US)",
|
||||
url: "https://hil-speed.hetzner.com",
|
||||
},
|
||||
{
|
||||
name: "Hetzner sin (Singapore SG)",
|
||||
url: "https://sin-speed.hetzner.com",
|
||||
},
|
||||
{ name: "datavi.be", url: "https://datavi.be" },
|
||||
];
|
||||
|
||||
// The cable modem / CPE upstream of the local gateway — always monitored.
|
||||
const LOCAL_CPE = { name: "Local CPE", url: "http://192.168.100.1" };
|
||||
|
||||
// Common default gateway addresses. On startup we probe each one and use
|
||||
// whichever responds first as the "Local Gateway" monitor target.
|
||||
//
|
||||
// NOTE: Modern browsers enforce Private Network Access (PNA) restrictions
|
||||
// that block pages served from public origins from making requests to
|
||||
// RFC1918 addresses. These local targets will likely only work when
|
||||
// NetWatch is served from localhost or another private address.
|
||||
const GATEWAY_CANDIDATES = [
|
||||
"http://192.168.1.1",
|
||||
"http://192.168.0.1",
|
||||
"http://192.168.8.1",
|
||||
"http://10.0.0.1",
|
||||
];
|
||||
|
||||
// --- Gateway Detection -------------------------------------------------------
|
||||
|
||||
// Probe each gateway candidate with a short timeout. Returns the first one
|
||||
// that responds, or null if none do. We race them all in parallel and take
|
||||
// whichever wins.
|
||||
async function detectGateway() {
|
||||
try {
|
||||
const result = await Promise.any(
|
||||
GATEWAY_CANDIDATES.map(async (url) => {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 1500);
|
||||
try {
|
||||
await fetch(url, {
|
||||
method: "GET",
|
||||
mode: "no-cors",
|
||||
cache: "no-store",
|
||||
signal: controller.signal,
|
||||
});
|
||||
clearTimeout(timeoutId);
|
||||
return { name: "Local Gateway", url };
|
||||
} catch {
|
||||
clearTimeout(timeoutId);
|
||||
throw new Error("no response");
|
||||
}
|
||||
}),
|
||||
);
|
||||
return result;
|
||||
} catch {
|
||||
// All candidates failed
|
||||
return null;
|
||||
}
|
||||
}
|
||||
const LOCAL_HOSTS = [{ name: "Local Gateway", url: "http://192.168.100.1" }];
|
||||
|
||||
// --- App State ---------------------------------------------------------------
|
||||
|
||||
class HostState {
|
||||
constructor(host, pinned = false) {
|
||||
constructor(host) {
|
||||
this.name = host.name;
|
||||
this.url = host.url;
|
||||
this.history = []; // { timestamp, latency, paused }
|
||||
this.lastLatency = null;
|
||||
this.status = "pending"; // 'online' | 'offline' | 'error' | 'pending'
|
||||
this.pinned = pinned;
|
||||
}
|
||||
|
||||
pushSample(timestamp, result) {
|
||||
@ -190,13 +73,10 @@ class HostState {
|
||||
}
|
||||
|
||||
class AppState {
|
||||
constructor(localHosts) {
|
||||
this.wan = WAN_HOSTS.map(
|
||||
(h) => new HostState(h, h.name === "datavi.be"),
|
||||
);
|
||||
this.local = localHosts.map((h) => new HostState(h));
|
||||
constructor() {
|
||||
this.wan = WAN_HOSTS.map((h) => new HostState(h));
|
||||
this.local = LOCAL_HOSTS.map((h) => new HostState(h));
|
||||
this.paused = false;
|
||||
this.tickCount = 0;
|
||||
}
|
||||
|
||||
get allHosts() {
|
||||
@ -221,22 +101,6 @@ class AppState {
|
||||
};
|
||||
}
|
||||
|
||||
/** Min/max across all WAN host history (the full 300s window) */
|
||||
wanHistoryStats() {
|
||||
let min = Infinity;
|
||||
let max = -Infinity;
|
||||
for (const host of this.wan) {
|
||||
for (const p of host.history) {
|
||||
if (p.latency !== null) {
|
||||
if (p.latency < min) min = p.latency;
|
||||
if (p.latency > max) max = p.latency;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (min === Infinity) return { min: null, max: null };
|
||||
return { min, max };
|
||||
}
|
||||
|
||||
/** Overall health: true = healthy (more than half WAN reachable) */
|
||||
isHealthy() {
|
||||
const reachable = this.wan.filter((h) => h.lastLatency !== null).length;
|
||||
@ -260,7 +124,7 @@ async function measureLatency(url) {
|
||||
|
||||
try {
|
||||
await fetch(targetUrl.toString(), {
|
||||
method: "GET",
|
||||
method: "HEAD",
|
||||
mode: "no-cors",
|
||||
cache: "no-store",
|
||||
signal: controller.signal,
|
||||
@ -320,11 +184,7 @@ class SparklineRenderer {
|
||||
const len = history.length;
|
||||
const pw = cw / (CONFIG.maxHistoryPoints - 1);
|
||||
const getX = (i) => m.left + cw - (len - 1 - i) * pw;
|
||||
const getY = (lat) =>
|
||||
m.top +
|
||||
ch -
|
||||
(Math.min(lat, CONFIG.graphMaxLatency) / CONFIG.graphMaxLatency) *
|
||||
ch;
|
||||
const getY = (lat) => m.top + ch - (lat / CONFIG.maxLatency) * ch;
|
||||
|
||||
SparklineRenderer._drawErrors(ctx, history, getX, m.top, ch);
|
||||
SparklineRenderer._drawLine(ctx, history, getX, getY);
|
||||
@ -336,7 +196,7 @@ class SparklineRenderer {
|
||||
ctx.textAlign = "right";
|
||||
ctx.textBaseline = "middle";
|
||||
for (const tick of CONFIG.yAxisTicks) {
|
||||
const y = m.top + ch - (tick / CONFIG.graphMaxLatency) * ch;
|
||||
const y = m.top + ch - (tick / CONFIG.maxLatency) * ch;
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.1)";
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
@ -431,18 +291,10 @@ class SparklineRenderer {
|
||||
// --- UI Renderer -------------------------------------------------------------
|
||||
|
||||
function hostRowHTML(host, index) {
|
||||
const pinColor = host.pinned
|
||||
? "text-blue-400"
|
||||
: "text-gray-600 hover:text-gray-400";
|
||||
return `
|
||||
<div class="host-row bg-gray-800/50 rounded-lg p-4 border border-gray-700/50" data-index="${index}">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="pin-btn flex-shrink-0 ${pinColor} transition-colors" data-pin="${index}" title="Pin to top">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5a.5.5 0 0 1-1 0V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="w-72 flex-shrink-0">
|
||||
<div class="w-48 flex-shrink-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full" style="background-color: ${latencyHex(null)}"></div>
|
||||
<span class="font-medium text-white truncate">${host.name}</span>
|
||||
@ -465,7 +317,7 @@ function hostRowHTML(host, index) {
|
||||
function buildUI(state) {
|
||||
const app = document.getElementById("app");
|
||||
app.innerHTML = `
|
||||
<div class="mx-auto px-[10%] py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 py-8">
|
||||
<header class="mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h1 class="text-3xl font-bold text-white">NetWatch</h1>
|
||||
@ -486,22 +338,17 @@ function buildUI(state) {
|
||||
<span class="text-gray-500">History: ${CONFIG.historyDuration}s</span> |
|
||||
<span id="status-indicator" class="text-green-400">Running</span>
|
||||
</p>
|
||||
<p class="text-gray-500 text-xs font-mono mt-1">
|
||||
<span id="clock-local"></span> | <span id="clock-utc"></span>
|
||||
</p>
|
||||
<div id="health-box" class="mt-4 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm text-center">
|
||||
<span id="health-text" class="text-gray-400">Waiting for data...</span>
|
||||
</div>
|
||||
<div id="summary" class="mt-2 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm">
|
||||
<span class="text-gray-400">Reachable:</span> <span id="summary-reachable" class="text-white">--/--</span>
|
||||
<span class="text-gray-600 mx-3">|</span>
|
||||
<span class="text-gray-400">Now:</span>
|
||||
<span id="summary-min" class="text-green-400">--</span>/<span id="summary-avg" class="text-yellow-400">--</span>/<span id="summary-max" class="text-red-400">--ms</span>
|
||||
<span class="text-gray-400">Min:</span> <span id="summary-min" class="text-green-400">--ms</span>
|
||||
<span class="text-gray-600 mx-3">|</span>
|
||||
<span class="text-gray-400">${CONFIG.historyDuration}s:</span>
|
||||
<span id="summary-hmin" class="text-green-400">--</span>/<span id="summary-hmax" class="text-red-400">--ms</span>
|
||||
<span class="text-gray-400">Max:</span> <span id="summary-max" class="text-red-400">--ms</span>
|
||||
<span class="text-gray-600 mx-3">|</span>
|
||||
<span class="text-gray-400">Checks:</span> <span id="summary-checks" class="text-gray-300">0</span>
|
||||
<span class="text-gray-400">Avg:</span> <span id="summary-avg" class="text-yellow-400">--ms</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -558,7 +405,7 @@ function updateHostRow(host, index) {
|
||||
const avg = host.averageLatency();
|
||||
if (host.status === "online" && avg !== null) {
|
||||
statusEl.textContent = `avg: ${avg}ms`;
|
||||
statusEl.className = `status-text text-xs mt-1 ${latencyClass(avg, "online")}`;
|
||||
statusEl.className = "status-text text-xs text-gray-400 mt-1";
|
||||
} else if (host.status === "offline") {
|
||||
statusEl.textContent = "unreachable";
|
||||
statusEl.className = "status-text text-xs text-red-400 mt-1";
|
||||
@ -575,14 +422,11 @@ function updateHostRow(host, index) {
|
||||
|
||||
function updateSummary(state) {
|
||||
const stats = state.wanStats();
|
||||
const hstats = state.wanHistoryStats();
|
||||
|
||||
const reachableEl = document.getElementById("summary-reachable");
|
||||
const minEl = document.getElementById("summary-min");
|
||||
const maxEl = document.getElementById("summary-max");
|
||||
const avgEl = document.getElementById("summary-avg");
|
||||
const hminEl = document.getElementById("summary-hmin");
|
||||
const hmaxEl = document.getElementById("summary-hmax");
|
||||
if (!reachableEl) return;
|
||||
|
||||
reachableEl.textContent = `${stats.reachable}/${stats.total}`;
|
||||
@ -594,35 +438,18 @@ function updateSummary(state) {
|
||||
: "text-yellow-400";
|
||||
|
||||
if (stats.min !== null) {
|
||||
minEl.textContent = `${stats.min}`;
|
||||
minEl.textContent = `${stats.min}ms`;
|
||||
minEl.className = latencyClass(stats.min, "online");
|
||||
avgEl.textContent = `${stats.avg}`;
|
||||
avgEl.className = latencyClass(stats.avg, "online");
|
||||
maxEl.textContent = `${stats.max}ms`;
|
||||
maxEl.className = latencyClass(stats.max, "online");
|
||||
avgEl.textContent = `${stats.avg}ms`;
|
||||
avgEl.className = latencyClass(stats.avg, "online");
|
||||
} else {
|
||||
minEl.textContent = "--";
|
||||
minEl.className = "text-gray-500";
|
||||
avgEl.textContent = "--";
|
||||
avgEl.className = "text-gray-500";
|
||||
maxEl.textContent = "--ms";
|
||||
maxEl.className = "text-gray-500";
|
||||
for (const el of [minEl, maxEl, avgEl]) {
|
||||
el.textContent = "--ms";
|
||||
el.className = "text-gray-500";
|
||||
}
|
||||
}
|
||||
|
||||
if (hstats.min !== null) {
|
||||
hminEl.textContent = `${hstats.min}`;
|
||||
hminEl.className = latencyClass(hstats.min, "online");
|
||||
hmaxEl.textContent = `${hstats.max}ms`;
|
||||
hmaxEl.className = latencyClass(hstats.max, "online");
|
||||
} else {
|
||||
hminEl.textContent = "--";
|
||||
hminEl.className = "text-gray-500";
|
||||
hmaxEl.textContent = "--ms";
|
||||
hmaxEl.className = "text-gray-500";
|
||||
}
|
||||
|
||||
const checksEl = document.getElementById("summary-checks");
|
||||
if (checksEl) checksEl.textContent = state.tickCount;
|
||||
}
|
||||
|
||||
function updateHealthBox(state) {
|
||||
@ -645,43 +472,6 @@ function updateHealthBox(state) {
|
||||
}`;
|
||||
}
|
||||
|
||||
// --- Sorting -----------------------------------------------------------------
|
||||
|
||||
// Sort WAN hosts: pinned hosts first (alphabetically), then unpinned hosts
|
||||
// by last latency ascending, with unreachable hosts at the bottom.
|
||||
function sortAndRebuildWAN(state) {
|
||||
const pinned = state.wan
|
||||
.filter((h) => h.pinned)
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
const rest = state.wan.filter((h) => !h.pinned);
|
||||
rest.sort((a, b) => {
|
||||
if (a.lastLatency === null && b.lastLatency === null) return 0;
|
||||
if (a.lastLatency === null) return 1;
|
||||
if (b.lastLatency === null) return -1;
|
||||
return a.lastLatency - b.lastLatency;
|
||||
});
|
||||
state.wan = [...pinned, ...rest];
|
||||
|
||||
const container = document.getElementById("wan-hosts");
|
||||
container.innerHTML = state.wan.map((h, i) => hostRowHTML(h, i)).join("");
|
||||
|
||||
// Re-index local hosts after WAN
|
||||
const localContainer = document.getElementById("local-hosts");
|
||||
localContainer.innerHTML = state.local
|
||||
.map((h, i) => hostRowHTML(h, state.wan.length + i))
|
||||
.join("");
|
||||
|
||||
// Resize canvases and redraw
|
||||
requestAnimationFrame(() => {
|
||||
document.querySelectorAll(".sparkline-canvas").forEach((canvas) => {
|
||||
SparklineRenderer.sizeCanvas(canvas);
|
||||
});
|
||||
state.allHosts.forEach((host, i) => {
|
||||
updateHostRow(host, i);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- Main Loop ---------------------------------------------------------------
|
||||
|
||||
async function tick(state) {
|
||||
@ -711,12 +501,6 @@ async function tick(state) {
|
||||
updateHostRow(host, i);
|
||||
});
|
||||
|
||||
state.tickCount++;
|
||||
// Sort after the first check, then every 5 checks thereafter
|
||||
if (state.tickCount === 1 || state.tickCount % 5 === 1) {
|
||||
sortAndRebuildWAN(state);
|
||||
}
|
||||
|
||||
updateSummary(state);
|
||||
updateHealthBox(state);
|
||||
}
|
||||
@ -757,40 +541,14 @@ function handleResize(state) {
|
||||
|
||||
// --- Bootstrap ---------------------------------------------------------------
|
||||
|
||||
async function init() {
|
||||
// Probe common gateway IPs to find the local router
|
||||
const gateway = await detectGateway();
|
||||
const localHosts = [LOCAL_CPE];
|
||||
if (gateway) localHosts.push(gateway);
|
||||
|
||||
const state = new AppState(localHosts);
|
||||
function init() {
|
||||
const state = new AppState();
|
||||
buildUI(state);
|
||||
|
||||
document
|
||||
.getElementById("pause-btn")
|
||||
.addEventListener("click", () => togglePause(state));
|
||||
|
||||
// Pin button clicks — use event delegation so it survives DOM rebuilds
|
||||
document.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest(".pin-btn");
|
||||
if (!btn) return;
|
||||
const idx = parseInt(btn.dataset.pin, 10);
|
||||
const host = state.wan[idx];
|
||||
if (!host) return;
|
||||
host.pinned = !host.pinned;
|
||||
sortAndRebuildWAN(state);
|
||||
});
|
||||
|
||||
function updateClocks() {
|
||||
const now = new Date();
|
||||
const utc = now.toISOString().replace(/\.\d{3}Z$/, "Z");
|
||||
const local = now.toLocaleString("sv-SE", { hour12: false });
|
||||
document.getElementById("clock-local").textContent = "Local: " + local;
|
||||
document.getElementById("clock-utc").textContent = "UTC: " + utc;
|
||||
}
|
||||
updateClocks();
|
||||
setInterval(updateClocks, 1000);
|
||||
|
||||
tick(state);
|
||||
setInterval(() => tick(state), CONFIG.updateInterval);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user