WIP: Frise temporelle configurable (échelles, couleurs, live, zoom) #1

2026-10-01T20:26:25+02:00

claude Bot commented

2026-10-01 20:26:25 +02:00

Requested by Cédric

Résumé

Refonte de la frise temporelle (histogramme au-dessus de la liste) :

échelle linéaire / √ (défaut) / log, hauteur S/M/L (40/80/120 px), rendu barres ou aire ;
couleurs : empilement par sévérité (error+, warning, le reste), intensité par rapport à la médiane de la fenêtre (calme, rafale >3×, anomalie >10×) ou aucune ; variables CSS clair/sombre ;
graduations verticales calées sur la division (hh:mm:ss, hh:mm, jj/mm) ;
infobulle : bornes, total, détail par sévérité ;
division auto (~100 intervalles) ou fixe (1 s à 1 j), bornée à 300 intervalles côté serveur, alignée sur le fuseau choisi ;
rafraîchissement off / 5 s / 15 s / 30 s / 1 min / à chaque nouvel intervalle ; en Live, incrément depuis le flux SSE et resynchronisation à chaque intervalle ; pause quand l'onglet est masqué ;
clic sur une barre = zoom sur l'intervalle, glisser = zoom sur la sélection (nouveaux paramètres from/to en ms, suivis par la liste et l'export).

Correctif : la frise utilisait l'horloge du navigateur et ne se rafraîchissait que toutes les 30 s ; elle tourne maintenant sur l'horloge du serveur (bornes et now renvoyés par /api/histogram).

Vérifications

go vet ./..., go build, go test -race ./... : OK (histogram_test.go, tests table-driven + handler contre un VictoriaLogs simulé).
JS : syntaxe et logique de la frise vérifiées avec JavaScriptCore et un DOM simulé.
Non vérifié : rendu réel dans un navigateur et requêtes face à un vrai VictoriaLogs 1.52 (à tester après docker compose up -d --build).

🤖 Generated with Claude Code

_Requested by **Cédric**_ ## Résumé Refonte de la frise temporelle (histogramme au-dessus de la liste) : - échelle linéaire / √ (défaut) / log, hauteur S/M/L (40/80/120 px), rendu barres ou aire ; - couleurs : empilement par sévérité (error+, warning, le reste), intensité par rapport à la médiane de la fenêtre (calme, rafale >3×, anomalie >10×) ou aucune ; variables CSS clair/sombre ; - graduations verticales calées sur la division (hh:mm:ss, hh:mm, jj/mm) ; - infobulle : bornes, total, détail par sévérité ; - division auto (~100 intervalles) ou fixe (1 s à 1 j), bornée à 300 intervalles côté serveur, alignée sur le fuseau choisi ; - rafraîchissement off / 5 s / 15 s / 30 s / 1 min / à chaque nouvel intervalle ; en Live, incrément depuis le flux SSE et resynchronisation à chaque intervalle ; pause quand l'onglet est masqué ; - clic sur une barre = zoom sur l'intervalle, glisser = zoom sur la sélection (nouveaux paramètres `from`/`to` en ms, suivis par la liste et l'export). Correctif : la frise utilisait l'horloge du navigateur et ne se rafraîchissait que toutes les 30 s ; elle tourne maintenant sur l'horloge du serveur (bornes et `now` renvoyés par `/api/histogram`). ## Vérifications - `go vet ./...`, `go build`, `go test -race ./...` : OK (`histogram_test.go`, tests table-driven + handler contre un VictoriaLogs simulé). - JS : syntaxe et logique de la frise vérifiées avec JavaScriptCore et un DOM simulé. - Non vérifié : rendu réel dans un navigateur et requêtes face à un vrai VictoriaLogs 1.52 (à tester après `docker compose up -d --build`). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude Bot added 1 commit 2026-10-01 20:26:25 +02:00

Timeline: scales, graduations, tooltip, colors, live updates and zoom ebf6340ff0

The histogram above the list becomes a configurable timeline:

- Scale linear / sqrt (default) / log, height S/M/L, bars or area.
- Colors: stacked by severity (error+, warning, the rest), intensity
  against the median of the window (calm, burst >3x, anomaly >10x), or
  none; colors are CSS variables with light and dark values.
- Vertical graduations on round local times (hh:mm:ss, hh:mm, dd/mm).
- Tooltip: interval bounds, total and detail per severity.
- Division automatic (~100 intervals) or fixed (1 s to 1 day), capped at
  300 intervals by the server; intervals aligned on the local time zone.
- Refresh off / 5 s / 15 s / 30 s / 1 min / at each new interval. In
  live mode the last interval is incremented from the SSE stream and the
  timeline reloads at each new interval; paused while the tab is hidden.
- Click a bar to zoom on its interval, drag to zoom on a selection: the
  list, export and counters follow through new from/to parameters.

The timeline now runs on the server clock (bounds and "now" come from
/api/histogram): the axis was drawn from the browser clock and refreshed
every 30 s only, so a clock difference with the server or a hidden tab
left it behind the logs.

/api/histogram returns interval indexes with the count per severity; the
division logic lives in histogram.go with table-driven tests.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

claude Bot added 1 commit 2026-10-01 20:40:31 +02:00

Timeline: no icon outline on the chart fd8d133b9c

The global "svg { stroke: currentColor; stroke-width: 2 }" rule for icons
also applied to the timeline SVG, which is stretched horizontally: each
bar got a ~45 px wide light outline and the whole timeline looked white.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

claude Bot closed this pull request

2026-10-01 22:27:48 +02:00

claude Bot commented

2026-10-01 22:27:54 +02:00

Fusionné dans main en fast-forward (commit fd8d133).

Fusionné dans main en fast-forward (commit fd8d133).

Pull request closed

Please reopen this pull request to perform a merge.

This pull request is marked as a work in progress.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: vLab-BZH/logstream#1