Compare commits
4
Commits
main
..
88e0d5116f
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
88e0d5116f | ||
|
|
0ab6418e3d | ||
|
|
4ce0814b14 | ||
|
|
e6d6815ecb |
@@ -4,3 +4,6 @@ tmp
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
*.log
|
*.log
|
||||||
.claude
|
.claude
|
||||||
|
|
||||||
|
# .git is sent so the build can stamp the version, without its config.
|
||||||
|
.git/config
|
||||||
|
|||||||
+20
-6
@@ -20,7 +20,7 @@ RUN make lint
|
|||||||
# golang:1.25-alpine (2026-02-27)
|
# golang:1.25-alpine (2026-02-27)
|
||||||
FROM golang:1.25-alpine@sha256:f6751d823c26342f9506c03797d2527668d095b0a15f1862cddb4d927a7a4ced AS builder
|
FROM golang:1.25-alpine@sha256:f6751d823c26342f9506c03797d2527668d095b0a15f1862cddb4d927a7a4ced AS builder
|
||||||
|
|
||||||
RUN apk add --no-cache make
|
RUN apk add --no-cache git make
|
||||||
|
|
||||||
WORKDIR /src
|
WORKDIR /src
|
||||||
|
|
||||||
@@ -37,11 +37,24 @@ RUN make test
|
|||||||
|
|
||||||
# make build is a shim around backend/script/build, the one definition
|
# make build is a shim around backend/script/build, the one definition
|
||||||
# of the build command:
|
# of the build command:
|
||||||
# CGO_ENABLED=0 go build -trimpath -ldflags "-s -w -X main.Version=... -X main.Buildarch=..."
|
# CGO_ENABLED=0 go build -trimpath -ldflags "-s -w -X main.Version=..."
|
||||||
# That script reads VERSION from the environment, so it is handed over
|
# That script reads VERSION from the environment, so it is handed over
|
||||||
# there rather than as a make variable.
|
# there rather than as a make variable.
|
||||||
ARG VERSION=dev
|
#
|
||||||
RUN VERSION="${VERSION}" make build
|
# The version is the VERSION build argument when one is given, otherwise
|
||||||
|
# `git describe --tags --always` of the repo's .git: the tag on a tagged
|
||||||
|
# commit, tag-N-gHASH on a commit after one, the short commit when no
|
||||||
|
# tag is reachable. A version that still comes out empty, dev or unknown
|
||||||
|
# fails the build. .git goes to /git, not /src/.git, where go build would
|
||||||
|
# find it and record VCS details of a work tree holding only backend/.
|
||||||
|
COPY .git /git
|
||||||
|
ARG VERSION
|
||||||
|
RUN version="${VERSION:-$(git --git-dir=/git describe --tags --always)}"; \
|
||||||
|
case "$version" in ""|dev|unknown) \
|
||||||
|
echo "version is '$version' although .git is present" >&2; \
|
||||||
|
exit 1 ;; \
|
||||||
|
esac; \
|
||||||
|
VERSION="$version" make build
|
||||||
|
|
||||||
# Frontend stage
|
# Frontend stage
|
||||||
# node:22-alpine as of 2026-02-22
|
# node:22-alpine as of 2026-02-22
|
||||||
@@ -52,8 +65,9 @@ RUN yarn install --frozen-lockfile
|
|||||||
RUN apk add --no-cache git make
|
RUN apk add --no-cache git make
|
||||||
COPY . .
|
COPY . .
|
||||||
# make frontend-check is the frontend half of make check (test + lint +
|
# make frontend-check is the frontend half of make check (test + lint +
|
||||||
# fmt-check); its test step is the production yarn build, so this both
|
# fmt-check); its test step runs the unit tests, then the production
|
||||||
# produces dist/ and gates the image on lint/fmt-check/test regressions.
|
# yarn build, so this both produces dist/ and gates the image on
|
||||||
|
# lint/fmt-check/test regressions.
|
||||||
# This node stage has neither Go nor Docker; the lint and builder stages
|
# This node stage has neither Go nor Docker; the lint and builder stages
|
||||||
# above gate the backend half.
|
# above gate the backend half.
|
||||||
RUN make frontend-check
|
RUN make frontend-check
|
||||||
|
|||||||
@@ -52,8 +52,8 @@ halves, so the root `make check` fails if either one is broken. We provide:
|
|||||||
- `script/fmt` — format all files (writes): prettier, then gofmt over `backend/`
|
- `script/fmt` — format all files (writes): prettier, then gofmt over `backend/`
|
||||||
- `script/fmt-check` — check formatting (read-only): prettier, then gofmt
|
- `script/fmt-check` — check formatting (read-only): prettier, then gofmt
|
||||||
- `script/check` — run test, lint, and fmt-check
|
- `script/check` — run test, lint, and fmt-check
|
||||||
- `script/frontend-test` — run the production build as the frontend's test (no
|
- `script/frontend-test` — run the unit tests in `test/unit/` with Node's
|
||||||
unit tests yet)
|
built-in test runner, then the production build
|
||||||
- `script/frontend-lint` — run prettier in check mode
|
- `script/frontend-lint` — run prettier in check mode
|
||||||
- `script/frontend-fmt` — format everything prettier understands (writes)
|
- `script/frontend-fmt` — format everything prettier understands (writes)
|
||||||
- `script/frontend-fmt-check` — check prettier formatting (read-only)
|
- `script/frontend-fmt-check` — check prettier formatting (read-only)
|
||||||
@@ -102,9 +102,10 @@ code lives in `src/main.js` with a class-based architecture:
|
|||||||
color-coded line segments, error regions, and DPR-aware scaling
|
color-coded line segments, error regions, and DPR-aware scaling
|
||||||
- **UI functions**: `buildUI()` constructs the DOM, `updateHostRow()` /
|
- **UI functions**: `buildUI()` constructs the DOM, `updateHostRow()` /
|
||||||
`updateSummary()` / `updateHealthBox()` handle incremental updates
|
`updateSummary()` / `updateHealthBox()` handle incremental updates
|
||||||
- **`tick()`**: Main loop — measures all hosts in parallel via `Promise.all`,
|
- **`tick()`**: Main loop — measures all hosts in parallel, pushing each host's
|
||||||
pushes samples, redraws UI. When paused, pushes blank markers (no probes, no
|
sample and redrawing its row as soon as its check ends, then sorts and redraws
|
||||||
false outage)
|
the summary and health box once the last check ends. When paused, pushes blank
|
||||||
|
markers (no probes, no false outage)
|
||||||
- **`Reporter`**: Posts collected samples to the backend
|
- **`Reporter`**: Posts collected samples to the backend
|
||||||
|
|
||||||
### Reporting
|
### Reporting
|
||||||
@@ -136,8 +137,14 @@ Local hosts are tracked separately from WAN stats.
|
|||||||
### Latency measurement
|
### Latency measurement
|
||||||
|
|
||||||
HEAD requests with `mode: 'no-cors'` and `cache: 'no-store'`, timed with
|
HEAD requests with `mode: 'no-cors'` and `cache: 'no-store'`, timed with
|
||||||
`performance.now()`. 1-second timeout; anything over 1000ms is clamped to
|
`performance.now()`. Each check times out after 80% of the refresh interval (24
|
||||||
unreachable. IPv4 only.
|
seconds at 30 seconds) and is then recorded as a timeout, so a round's checks
|
||||||
|
have all finished before the next round is due. When no WAN host answers, a
|
||||||
|
recovery probe checks 4 random WAN hosts every half second, giving up the checks
|
||||||
|
it started half a second before. As soon as one answers, a new round starts at
|
||||||
|
once, as it does after an interval change. A round started early gives up the
|
||||||
|
last round's checks if they are still waiting, and that round records nothing
|
||||||
|
more, so rounds never overlap. IPv4 only.
|
||||||
|
|
||||||
### Color coding
|
### Color coding
|
||||||
|
|
||||||
|
|||||||
@@ -23,6 +23,20 @@ latest run passes.
|
|||||||
|
|
||||||
# Completed Steps
|
# Completed Steps
|
||||||
|
|
||||||
|
- 2026-10-03: each target's row shows its result as soon as its check ends
|
||||||
|
(issue #91), where every row waited for the round's slowest check, up to 24
|
||||||
|
seconds at a 30-second interval. Sorting, the summary, the health box and
|
||||||
|
offline detection still run once, when the round's last check ends. A check
|
||||||
|
that ends after the user pauses or after its round is given up shows nothing,
|
||||||
|
and the first round is still discarded as a whole
|
||||||
|
- 2026-10-03: each target check times out after 80% of the refresh interval
|
||||||
|
(issue #78), 24 seconds at 30 seconds, where it was capped at 3 seconds. A
|
||||||
|
round started early, after an interval change or when the recovery probe finds
|
||||||
|
a target answering, gives up the last round's checks if they are still
|
||||||
|
waiting, so rounds never overlap; the recovery probe gives up its own checks
|
||||||
|
after half a second. The frontend has its first unit tests, run by
|
||||||
|
`script/frontend-test` with Node's built-in test runner; for them,
|
||||||
|
`index.html` now links `src/styles.css`, which `src/main.js` used to import
|
||||||
- 2026-09-29: the container sets up its own data directory (issue #75):
|
- 2026-09-29: the container sets up its own data directory (issue #75):
|
||||||
`bin/entrypoint.sh`, still as root, creates `DATA_DIR` if missing and gives it
|
`bin/entrypoint.sh`, still as root, creates `DATA_DIR` if missing and gives it
|
||||||
and `/data` to the `netwatch` user with mode 750 before starting the backend
|
and `/data` to the `netwatch` user with mode 750 before starting the backend
|
||||||
|
|||||||
+1
-1
@@ -32,7 +32,7 @@ pattern as the repo root: the targets in `backend/Makefile` are thin shims over
|
|||||||
`test`, `fmt` and `fmt-check`:
|
`test`, `fmt` and `fmt-check`:
|
||||||
|
|
||||||
- `script/build` — compile the static `netwatch-server` binary with its version
|
- `script/build` — compile the static `netwatch-server` binary with its version
|
||||||
and architecture stamped in. The version is `VERSION` from the environment;
|
stamped in. The version is `VERSION` from the environment;
|
||||||
when that is unset or empty, it falls back to `git describe` inside a git
|
when that is unset or empty, it falls back to `git describe` inside a git
|
||||||
checkout, then to `dev`
|
checkout, then to `dev`
|
||||||
- `script/test` — run the Go tests under a 30-second timeout
|
- `script/test` — run the Go tests under a 30-second timeout
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ import (
|
|||||||
var (
|
var (
|
||||||
Appname = "netwatch-server"
|
Appname = "netwatch-server"
|
||||||
Version string
|
Version string
|
||||||
Buildarch string
|
|
||||||
)
|
)
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
@@ -40,7 +39,6 @@ func main() {
|
|||||||
|
|
||||||
globals.Appname = Appname
|
globals.Appname = Appname
|
||||||
globals.Version = Version
|
globals.Version = Version
|
||||||
globals.Buildarch = Buildarch
|
|
||||||
|
|
||||||
fx.New(
|
fx.New(
|
||||||
fx.Provide(
|
fx.Provide(
|
||||||
|
|||||||
@@ -10,22 +10,18 @@ var (
|
|||||||
Appname string
|
Appname string
|
||||||
// Version is the git version tag.
|
// Version is the git version tag.
|
||||||
Version string
|
Version string
|
||||||
// Buildarch is the build architecture.
|
|
||||||
Buildarch string
|
|
||||||
)
|
)
|
||||||
|
|
||||||
// Globals holds build-time metadata for the application.
|
// Globals holds build-time metadata for the application.
|
||||||
type Globals struct {
|
type Globals struct {
|
||||||
Appname string
|
Appname string
|
||||||
Version string
|
Version string
|
||||||
Buildarch string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// New creates a Globals instance from package-level variables.
|
// New creates a Globals instance from package-level variables.
|
||||||
func New(_ fx.Lifecycle) (*Globals, error) {
|
func New(_ fx.Lifecycle) (*Globals, error) {
|
||||||
return &Globals{
|
return &Globals{
|
||||||
Appname: Appname,
|
Appname: Appname,
|
||||||
Buildarch: Buildarch,
|
|
||||||
Version: Version,
|
Version: Version,
|
||||||
}, nil
|
}, nil
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ package logger
|
|||||||
import (
|
import (
|
||||||
"log/slog"
|
"log/slog"
|
||||||
"os"
|
"os"
|
||||||
|
"runtime"
|
||||||
|
|
||||||
"sneak.berlin/go/netwatch/internal/globals"
|
"sneak.berlin/go/netwatch/internal/globals"
|
||||||
|
|
||||||
@@ -95,6 +96,6 @@ func (l *Logger) Identify() {
|
|||||||
l.log.Info("starting",
|
l.log.Info("starting",
|
||||||
"appname", l.params.Globals.Appname,
|
"appname", l.params.Globals.Appname,
|
||||||
"version", l.params.Globals.Version,
|
"version", l.params.Globals.Version,
|
||||||
"buildarch", l.params.Globals.Buildarch,
|
"arch", runtime.GOARCH,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import (
|
|||||||
"errors"
|
"errors"
|
||||||
"net"
|
"net"
|
||||||
"net/http"
|
"net/http"
|
||||||
|
"runtime"
|
||||||
"strconv"
|
"strconv"
|
||||||
"time"
|
"time"
|
||||||
|
|
||||||
@@ -53,7 +54,7 @@ func (s *Server) listenAndServe() {
|
|||||||
s.log.Info("http begin listen",
|
s.log.Info("http begin listen",
|
||||||
"listenaddr", s.httpServer.Addr,
|
"listenaddr", s.httpServer.Addr,
|
||||||
"version", s.params.Globals.Version,
|
"version", s.params.Globals.Version,
|
||||||
"buildarch", s.params.Globals.Buildarch,
|
"arch", runtime.GOARCH,
|
||||||
)
|
)
|
||||||
|
|
||||||
err := s.httpServer.ListenAndServe()
|
err := s.httpServer.ListenAndServe()
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
#!/bin/sh
|
#!/bin/sh
|
||||||
# script/build: compile the static netwatch-server binary into the
|
# script/build: compile the static netwatch-server binary into the
|
||||||
# backend project root, with its version and architecture stamped in.
|
# backend project root, with its version stamped in.
|
||||||
set -eu
|
set -eu
|
||||||
|
|
||||||
ROOT="$(cd "$(dirname "$0")/.." && pwd -P)"
|
ROOT="$(cd "$(dirname "$0")/.." && pwd -P)"
|
||||||
@@ -14,7 +14,7 @@ main() {
|
|||||||
version="${VERSION:-$(git describe --always --dirty 2>/dev/null || echo dev)}"
|
version="${VERSION:-$(git describe --always --dirty 2>/dev/null || echo dev)}"
|
||||||
|
|
||||||
CGO_ENABLED=0 go build -trimpath \
|
CGO_ENABLED=0 go build -trimpath \
|
||||||
-ldflags "-s -w -X main.Version=$version -X main.Buildarch=$(uname -m)" \
|
-ldflags "-s -w -X main.Version=$version" \
|
||||||
-o netwatch-server ./cmd/netwatch-server/
|
-o netwatch-server ./cmd/netwatch-server/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,6 +9,9 @@
|
|||||||
type="image/svg+xml"
|
type="image/svg+xml"
|
||||||
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📡</text></svg>"
|
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📡</text></svg>"
|
||||||
/>
|
/>
|
||||||
|
<!-- Linked here, not imported by src/main.js, so the unit tests can
|
||||||
|
import that module in Node, which cannot import CSS. -->
|
||||||
|
<link rel="stylesheet" href="/src/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-900 text-white min-h-screen">
|
<body class="bg-gray-900 text-white min-h-screen">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+2
-3
@@ -16,9 +16,8 @@ main() {
|
|||||||
"$SCRIPT_DIR/check"
|
"$SCRIPT_DIR/check"
|
||||||
# Own line: a failing command substitution inside an argument does
|
# Own line: a failing command substitution inside an argument does
|
||||||
# not trip `set -e`, so the inline form degrades silently to an
|
# not trip `set -e`, so the inline form degrades silently to an
|
||||||
# empty constant. VERSION is computed here because .dockerignore
|
# empty constant. The VERSION build argument takes precedence over
|
||||||
# excludes .git, so `git describe` in a build stage yields an empty
|
# the version a build stage derives from the .git in the context.
|
||||||
# version without failing.
|
|
||||||
version="$(git describe --tags --always --dirty 2>/dev/null || true)"
|
version="$(git describe --tags --always --dirty 2>/dev/null || true)"
|
||||||
[ -n "$version" ] || version="unknown"
|
[ -n "$version" ] || version="unknown"
|
||||||
docker build --no-cache \
|
docker build --no-cache \
|
||||||
|
|||||||
+2
-3
@@ -12,9 +12,8 @@ main() {
|
|||||||
cd "$ROOT"
|
cd "$ROOT"
|
||||||
# Own line: a failing command substitution inside an argument does
|
# Own line: a failing command substitution inside an argument does
|
||||||
# not trip `set -e`, so the inline form degrades silently to an
|
# not trip `set -e`, so the inline form degrades silently to an
|
||||||
# empty constant. VERSION is computed here because .dockerignore
|
# empty constant. The VERSION build argument takes precedence over
|
||||||
# excludes .git, so `git describe` in a build stage yields an empty
|
# the version a build stage derives from the .git in the context.
|
||||||
# version without failing.
|
|
||||||
version="$(git describe --tags --always --dirty 2>/dev/null || true)"
|
version="$(git describe --tags --always --dirty 2>/dev/null || true)"
|
||||||
[ -n "$version" ] || version="unknown"
|
[ -n "$version" ] || version="unknown"
|
||||||
docker build --no-cache \
|
docker build --no-cache \
|
||||||
|
|||||||
@@ -1,13 +1,14 @@
|
|||||||
#!/bin/sh
|
#!/bin/sh
|
||||||
# script/frontend-test: run the frontend test suite. The frontend has no
|
# script/frontend-test: run the frontend test suite: the unit tests in
|
||||||
# unit tests; the production build serves as the test (fails on broken
|
# test/unit/ with Node's built-in test runner, then the production
|
||||||
# code).
|
# build, which fails on broken code.
|
||||||
set -eu
|
set -eu
|
||||||
|
|
||||||
ROOT="$(cd "$(dirname "$0")/.." && pwd -P)"
|
ROOT="$(cd "$(dirname "$0")/.." && pwd -P)"
|
||||||
|
|
||||||
main() {
|
main() {
|
||||||
cd "$ROOT"
|
cd "$ROOT"
|
||||||
|
timeout 30 node --test test/unit/*.test.js
|
||||||
timeout 30 yarn build
|
timeout 30 yarn build
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+67
-35
@@ -1,14 +1,14 @@
|
|||||||
import "./styles.css";
|
|
||||||
|
|
||||||
// --- Configuration -----------------------------------------------------------
|
// --- Configuration -----------------------------------------------------------
|
||||||
|
|
||||||
// Timing, axis labels, and display constants. Latency above maxLatency is
|
// Timing, axis labels, and display constants. A target check times out
|
||||||
// clamped to "unreachable". The sparkline Y-axis is capped at
|
// after requestTimeout, 80% of updateInterval, so a round's checks have
|
||||||
|
// all finished before the next round is due; latency above maxLatency is
|
||||||
|
// recorded as a timeout. The sparkline Y-axis is capped at
|
||||||
// graphMaxLatency — values above it pin to the top of the chart but still
|
// 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
|
// display their real value in the latency figure. The history buffer holds
|
||||||
// maxHistoryPoints samples (historyDuration / updateInterval).
|
// maxHistoryPoints samples (historyDuration / updateInterval).
|
||||||
// reportInterval is how often collected samples are POSTed to the backend.
|
// reportInterval is how often collected samples are POSTed to the backend.
|
||||||
const CONFIG = {
|
export const CONFIG = {
|
||||||
updateInterval: 3000,
|
updateInterval: 3000,
|
||||||
maxHistoryPoints: 100,
|
maxHistoryPoints: 100,
|
||||||
reportInterval: 60000,
|
reportInterval: 60000,
|
||||||
@@ -16,7 +16,7 @@ const CONFIG = {
|
|||||||
return (this.maxHistoryPoints * this.updateInterval) / 1000;
|
return (this.maxHistoryPoints * this.updateInterval) / 1000;
|
||||||
},
|
},
|
||||||
get requestTimeout() {
|
get requestTimeout() {
|
||||||
return Math.min(this.updateInterval - 100, 3000);
|
return this.updateInterval * 0.8;
|
||||||
},
|
},
|
||||||
get maxLatency() {
|
get maxLatency() {
|
||||||
return this.requestTimeout;
|
return this.requestTimeout;
|
||||||
@@ -263,7 +263,7 @@ class HostState {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class AppState {
|
export class AppState {
|
||||||
constructor(localHosts) {
|
constructor(localHosts) {
|
||||||
this.wan = WAN_HOSTS.map(
|
this.wan = WAN_HOSTS.map(
|
||||||
(h) => new HostState(h, h.name === "datavi.be"),
|
(h) => new HostState(h, h.name === "datavi.be"),
|
||||||
@@ -503,12 +503,16 @@ class Reporter {
|
|||||||
|
|
||||||
// --- Latency Measurement -----------------------------------------------------
|
// --- Latency Measurement -----------------------------------------------------
|
||||||
|
|
||||||
async function measureLatency(url) {
|
// Checks one target. The check times out after CONFIG.requestTimeout; the
|
||||||
|
// caller can give it up sooner through the optional signal, which also ends
|
||||||
|
// it as a timeout.
|
||||||
|
export async function measureLatency(url, signal) {
|
||||||
const controller = new AbortController();
|
const controller = new AbortController();
|
||||||
const timeoutId = setTimeout(
|
const timeoutId = setTimeout(
|
||||||
() => controller.abort(),
|
() => controller.abort(),
|
||||||
CONFIG.requestTimeout,
|
CONFIG.requestTimeout,
|
||||||
);
|
);
|
||||||
|
signal?.addEventListener("abort", () => controller.abort());
|
||||||
|
|
||||||
const targetUrl = new URL(url);
|
const targetUrl = new URL(url);
|
||||||
targetUrl.searchParams.set("_cb", Date.now().toString());
|
targetUrl.searchParams.set("_cb", Date.now().toString());
|
||||||
@@ -1101,7 +1105,7 @@ function sortAndRebuildWAN(state) {
|
|||||||
|
|
||||||
// --- Main Loop ---------------------------------------------------------------
|
// --- Main Loop ---------------------------------------------------------------
|
||||||
|
|
||||||
async function tick(state, onOffline) {
|
export async function tick(state, signal, onOffline) {
|
||||||
const ts = Date.now();
|
const ts = Date.now();
|
||||||
|
|
||||||
if (state.paused) {
|
if (state.paused) {
|
||||||
@@ -1122,12 +1126,27 @@ async function tick(state, onOffline) {
|
|||||||
|
|
||||||
log.debug(`Tick #${state.tickCount + 1} started`);
|
log.debug(`Tick #${state.tickCount + 1} started`);
|
||||||
|
|
||||||
const results = await Promise.all(
|
// Each host's row shows its result as soon as its check ends. The
|
||||||
state.allHosts.map((h) => measureLatency(h.url)),
|
// result is discarded if by then the user has paused or the next round
|
||||||
|
// has given up this one's checks, and in the first tick (tickCount is
|
||||||
|
// still 0), which is discarded as a whole below. The row is looked up
|
||||||
|
// when the check ends, as a pin click may have re-sorted the rows since
|
||||||
|
// the round started.
|
||||||
|
await Promise.all(
|
||||||
|
state.allHosts.map(async (host) => {
|
||||||
|
const r = await measureLatency(host.url, signal);
|
||||||
|
if (state.paused || signal.aborted || state.tickCount === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
host.pushSample(ts, r);
|
||||||
|
updateHostRow(host, state.allHosts.indexOf(host));
|
||||||
|
log.debug(`${host.name}: ${r.error ? r.error : r.latency + "ms"}`);
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
// User may have paused while awaiting results — discard them
|
// User may have paused, or the next round may have given up this
|
||||||
if (state.paused) return;
|
// one's checks, while awaiting results — skip the rest of the round
|
||||||
|
if (state.paused || signal.aborted) return;
|
||||||
|
|
||||||
state.tickCount++;
|
state.tickCount++;
|
||||||
|
|
||||||
@@ -1137,13 +1156,6 @@ async function tick(state, onOffline) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
state.allHosts.forEach((host, i) => {
|
|
||||||
const r = results[i];
|
|
||||||
host.pushSample(ts, r);
|
|
||||||
updateHostRow(host, i);
|
|
||||||
log.debug(`${host.name}: ${r.error ? r.error : r.latency + "ms"}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sort after the first real check, then every 10 ticks thereafter
|
// Sort after the first real check, then every 10 ticks thereafter
|
||||||
if (state.tickCount === 2 || state.tickCount % 10 === 1) {
|
if (state.tickCount === 2 || state.tickCount % 10 === 1) {
|
||||||
sortAndRebuildWAN(state);
|
sortAndRebuildWAN(state);
|
||||||
@@ -1168,9 +1180,10 @@ async function tick(state, onOffline) {
|
|||||||
|
|
||||||
// --- Recovery Probe ----------------------------------------------------------
|
// --- Recovery Probe ----------------------------------------------------------
|
||||||
|
|
||||||
// When offline, rapidly poll 4 random WAN hosts every 500ms. As soon as any
|
// When offline, check 4 random WAN hosts every 500ms, giving up the checks
|
||||||
// responds, stop probing and fire a normal tick to refresh all hosts.
|
// started 500ms before, so at most 4 are ever waiting. As soon as one
|
||||||
function startRecoveryProbe(state, triggerTick) {
|
// answers, stop probing and start a new round at once.
|
||||||
|
function startRecoveryProbe(state, startRounds) {
|
||||||
if (state._recoveryProbeId) return; // already running
|
if (state._recoveryProbeId) return; // already running
|
||||||
const candidates = [...state.wan];
|
const candidates = [...state.wan];
|
||||||
for (let i = candidates.length - 1; i > 0; i--) {
|
for (let i = candidates.length - 1; i > 0; i--) {
|
||||||
@@ -1181,15 +1194,18 @@ function startRecoveryProbe(state, triggerTick) {
|
|||||||
log.notice(
|
log.notice(
|
||||||
`Recovery probe started (${canaries.map((h) => h.name).join(", ")})`,
|
`Recovery probe started (${canaries.map((h) => h.name).join(", ")})`,
|
||||||
);
|
);
|
||||||
state._recoveryProbeId = setInterval(async () => {
|
state._recoveryProbeId = setInterval(() => {
|
||||||
if (state.paused) return;
|
if (state.paused) return;
|
||||||
const results = await Promise.all(
|
state._recoveryProbeChecks?.abort();
|
||||||
canaries.map((h) => measureLatency(h.url)),
|
const checks = new AbortController();
|
||||||
);
|
state._recoveryProbeChecks = checks;
|
||||||
if (results.some((r) => r.error === null)) {
|
for (const host of canaries) {
|
||||||
|
measureLatency(host.url, checks.signal).then((r) => {
|
||||||
|
if (r.error !== null || checks.signal.aborted) return;
|
||||||
log.notice("Recovery probe: connectivity detected");
|
log.notice("Recovery probe: connectivity detected");
|
||||||
stopRecoveryProbe(state);
|
stopRecoveryProbe(state);
|
||||||
triggerTick();
|
startRounds();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
@@ -1198,6 +1214,7 @@ function stopRecoveryProbe(state) {
|
|||||||
if (state._recoveryProbeId) {
|
if (state._recoveryProbeId) {
|
||||||
clearInterval(state._recoveryProbeId);
|
clearInterval(state._recoveryProbeId);
|
||||||
state._recoveryProbeId = null;
|
state._recoveryProbeId = null;
|
||||||
|
state._recoveryProbeChecks?.abort();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1374,18 +1391,34 @@ async function init() {
|
|||||||
updateClocks();
|
updateClocks();
|
||||||
setInterval(updateClocks, 1000);
|
setInterval(updateClocks, 1000);
|
||||||
|
|
||||||
|
// Rounds never overlap: a round first gives up the last round's checks
|
||||||
|
// if they are still waiting, and the last round then records nothing
|
||||||
|
// more. At a steady interval they never are, as they time out at 80% of
|
||||||
|
// it; they can be when a round starts early, after an interval change
|
||||||
|
// or when the recovery probe finds a target answering.
|
||||||
|
let roundChecks = new AbortController();
|
||||||
function doTick() {
|
function doTick() {
|
||||||
tick(state, () => startRecoveryProbe(state, doTick));
|
roundChecks.abort();
|
||||||
|
roundChecks = new AbortController();
|
||||||
|
tick(state, roundChecks.signal, () =>
|
||||||
|
startRecoveryProbe(state, startRounds),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Starts a round now and then one every CONFIG.updateInterval.
|
||||||
|
let tickIntervalId;
|
||||||
|
function startRounds() {
|
||||||
|
clearInterval(tickIntervalId);
|
||||||
doTick();
|
doTick();
|
||||||
let tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
|
tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
startRounds();
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById("interval-select")
|
.getElementById("interval-select")
|
||||||
.addEventListener("change", (e) => {
|
.addEventListener("change", (e) => {
|
||||||
const newInterval = parseInt(e.target.value, 10);
|
const newInterval = parseInt(e.target.value, 10);
|
||||||
clearInterval(tickIntervalId);
|
|
||||||
CONFIG.updateInterval = newInterval;
|
CONFIG.updateInterval = newInterval;
|
||||||
log.notice(
|
log.notice(
|
||||||
`Interval changed to ${humanDuration(newInterval / 1000)}, history reset`,
|
`Interval changed to ${humanDuration(newInterval / 1000)}, history reset`,
|
||||||
@@ -1434,8 +1467,7 @@ async function init() {
|
|||||||
|
|
||||||
// Start immediately with new interval
|
// Start immediately with new interval
|
||||||
stopRecoveryProbe(state);
|
stopRecoveryProbe(state);
|
||||||
doTick();
|
startRounds();
|
||||||
tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener("resize", () => handleResize(state));
|
window.addEventListener("resize", () => handleResize(state));
|
||||||
@@ -1444,7 +1476,7 @@ async function init() {
|
|||||||
|
|
||||||
// Bootstrap only when loaded as the page: a real DOM containing the #app
|
// Bootstrap only when loaded as the page: a real DOM containing the #app
|
||||||
// mount point this module renders into. Importing the module in a unit test
|
// mount point this module renders into. Importing the module in a unit test
|
||||||
// (which has no #app) runs nothing, so buildReport can be tested in isolation.
|
// (which has no #app) runs nothing, so its exports can be tested in isolation.
|
||||||
if (typeof document !== "undefined" && document.getElementById("app")) {
|
if (typeof document !== "undefined" && document.getElementById("app")) {
|
||||||
if (document.readyState === "loading") {
|
if (document.readyState === "loading") {
|
||||||
document.addEventListener("DOMContentLoaded", init);
|
document.addEventListener("DOMContentLoaded", init);
|
||||||
|
|||||||
@@ -0,0 +1,122 @@
|
|||||||
|
// Unit tests for src/main.js, run by script/frontend-test with Node's
|
||||||
|
// built-in test runner. Importing the module does not start the page.
|
||||||
|
|
||||||
|
import { test } from "node:test";
|
||||||
|
import assert from "node:assert/strict";
|
||||||
|
import { AppState, CONFIG, measureLatency, tick } from "../../src/main.js";
|
||||||
|
|
||||||
|
// There is no page here, so the tests stand in for it. The debug log looks
|
||||||
|
// for its panel by id and finds none. Each element of a host's row that
|
||||||
|
// tick draws into is a plain object, made the first time it is looked up
|
||||||
|
// and kept in elements under its selector. Drawing a sparkline does
|
||||||
|
// nothing; it looks for the pixel ratio on window and finds none.
|
||||||
|
const elements = {};
|
||||||
|
const doNothing = () => {};
|
||||||
|
const canvasContext = {
|
||||||
|
clearRect: doNothing,
|
||||||
|
beginPath: doNothing,
|
||||||
|
moveTo: doNothing,
|
||||||
|
lineTo: doNothing,
|
||||||
|
stroke: doNothing,
|
||||||
|
fill: doNothing,
|
||||||
|
fillRect: doNothing,
|
||||||
|
fillText: doNothing,
|
||||||
|
arc: doNothing,
|
||||||
|
};
|
||||||
|
globalThis.window = {};
|
||||||
|
globalThis.document = {
|
||||||
|
getElementById: () => null,
|
||||||
|
querySelector: (selector) =>
|
||||||
|
(elements[selector] ??= { getContext: () => canvasContext }),
|
||||||
|
};
|
||||||
|
|
||||||
|
// What tick last wrote into the latency figure in host's row, or undefined
|
||||||
|
// if it has written nothing there.
|
||||||
|
function latencyFigure(state, host) {
|
||||||
|
const index = state.allHosts.indexOf(host);
|
||||||
|
return elements[`.latency-value[data-host="${index}"]`]?.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mocks the clock for test t, so that a check lasting seconds takes no real
|
||||||
|
// time, and replaces fetch with targets that each answer after
|
||||||
|
// answerAfter(url) milliseconds of that clock, or never when that is
|
||||||
|
// Infinity. Both are restored when the test ends.
|
||||||
|
function mockTargets(t, answerAfter) {
|
||||||
|
t.mock.timers.enable({ apis: ["setTimeout", "Date"] });
|
||||||
|
t.mock.method(performance, "now", () => Date.now());
|
||||||
|
t.mock.method(
|
||||||
|
globalThis,
|
||||||
|
"fetch",
|
||||||
|
(url, { signal }) =>
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
if (answerAfter(url) !== Infinity) {
|
||||||
|
setTimeout(resolve, answerAfter(url));
|
||||||
|
}
|
||||||
|
signal.addEventListener("abort", () => reject(signal.reason));
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// The result of check if it has ended, otherwise "still waiting".
|
||||||
|
function settled(check) {
|
||||||
|
return Promise.race([
|
||||||
|
check,
|
||||||
|
new Promise((resolve) => setImmediate(resolve, "still waiting")),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const interval of [10000, 30000]) {
|
||||||
|
const timeout = interval * 0.8;
|
||||||
|
// Over 3 seconds, which the timeout used to be capped at.
|
||||||
|
const slowAnswer = timeout - 1000;
|
||||||
|
|
||||||
|
test(`at a ${interval}ms interval, an answer after ${slowAnswer}ms is recorded with its real time`, async (t) => {
|
||||||
|
CONFIG.updateInterval = interval;
|
||||||
|
mockTargets(t, () => slowAnswer);
|
||||||
|
const check = measureLatency("https://target.test");
|
||||||
|
t.mock.timers.tick(slowAnswer);
|
||||||
|
assert.deepEqual(await settled(check), {
|
||||||
|
latency: slowAnswer,
|
||||||
|
error: null,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test(`at a ${interval}ms interval, a target that never answers is recorded as a timeout after ${timeout}ms`, async (t) => {
|
||||||
|
CONFIG.updateInterval = interval;
|
||||||
|
mockTargets(t, () => Infinity);
|
||||||
|
const check = measureLatency("https://target.test");
|
||||||
|
t.mock.timers.tick(timeout - 1);
|
||||||
|
assert.equal(await settled(check), "still waiting");
|
||||||
|
t.mock.timers.tick(1);
|
||||||
|
assert.deepEqual(await settled(check), {
|
||||||
|
latency: null,
|
||||||
|
error: "timeout",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test("at a 30000ms interval, a target answering after 1000ms shows in its row while another target's check is still waiting", async (t) => {
|
||||||
|
CONFIG.updateInterval = 30000;
|
||||||
|
const state = new AppState([
|
||||||
|
{ name: "Answering", url: "https://answering.test" },
|
||||||
|
]);
|
||||||
|
const answering = state.local[0];
|
||||||
|
const waiting = state.wan[0];
|
||||||
|
// No target but the answering one ever answers.
|
||||||
|
mockTargets(t, (url) => (url.startsWith(answering.url) ? 1000 : Infinity));
|
||||||
|
// The third tick: the first is discarded as a whole, and the second ends
|
||||||
|
// by sorting the rows, which rebuilds a page that is not here.
|
||||||
|
state.tickCount = 2;
|
||||||
|
|
||||||
|
const round = tick(state, new AbortController().signal);
|
||||||
|
t.mock.timers.tick(1000);
|
||||||
|
assert.equal(await settled(round), "still waiting");
|
||||||
|
assert.match(latencyFigure(state, answering), />1000</);
|
||||||
|
assert.equal(latencyFigure(state, waiting), undefined);
|
||||||
|
assert.equal(state.tickCount, 2);
|
||||||
|
|
||||||
|
// The round ends, once, when the last check times out.
|
||||||
|
t.mock.timers.tick(CONFIG.requestTimeout - 1000);
|
||||||
|
assert.notEqual(await settled(round), "still waiting");
|
||||||
|
assert.equal(state.tickCount, 3);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user