Dashboard

Pulseboard

Ein Echtzeit-Monitoring für Services, das eine Million Events pro Minute in lesbare Diagramme verwandelt.

Platzhalter-Vorschau der Oberfläche von Pulseboard

Daten zum Projekt

Rolle
Full-Stack-Entwickler
Art
Dashboard
Stack
  • Go
  • React
  • WebSockets
  • ClickHouse
Dauer
4 Monate
Jahr
2024
Status
Archiviert
Links
Privates Projekt

Die Herausforderung

Zu viele Daten, zu wenig Signal

Das Betriebsteam beobachtete Dutzende Tabs und übersah trotzdem Störungen.

Das Dashboard musste auf dem Server aggregieren und auf einem Wanddisplay flüssig laufen.

So entstand es

Der Entwicklungsprozess

Sechs Phasen vom ersten Gespräch bis zum Release. Der Balken zeigt, wie sich die Zeit verteilt hat.

6 Wochen insgesamt

  1. Analyse

    Bereitschaftsteams spielten jüngste Störungen nach und markierten, wo das erste Signal übersehen worden war.

    3 Tage · Störungs-Zeitleiste

  2. Architektur

    Datenmodell, Rendering-Strategie und API-Verträge standen fest, bevor der erste Screen entstand.

    4 Tage · ADR, Datenmodell

  3. Oberfläche

    Ein Komponenteninventar und responsive Layouts, vollständig aus Design-Tokens aufgebaut.

    4 Tage · Token-Set, Komponenteninventar

  4. Umsetzung

    Funktionen gingen in kleinen Schritten hinter Feature-Flags live, mit typisierten Grenzen zwischen Client und Server.

    12 Tage · Feature-Schnitte

  5. Tests

    Unit-, End-to-End- und Barrierefreiheitstests liefen bei jedem Pull Request.

    4 Tage · Testsuite in der CI

  6. Deployment

    Jeder Branch bekam eine Vorschau-Umgebung; der Rollout in die Produktion war ein Klick.

    3 Tage · Vorschau- und Release-Pipeline

  7. Ergebnis

    Die mittlere Zeit bis zur Erkennung von Störungen sank von neun auf unter zwei Minuten.

Ansichten

Wirkung

Die Ergebnisse

Platzhalter-Vorschau der Oberfläche von Pulseboard

Was sich nach dem Launch verändert hat

Die mittlere Zeit bis zur Erkennung von Störungen sank von neun auf unter zwei Minuten.

  • Go
  • React
  • WebSockets
  • ClickHouse

Kennzahlen

Events pro Minute
1 Mio.
Live-Diagramme
60 fps
Infrastrukturkosten
−35 %

Unter der Haube

Streamende Rollups

Ein Go-Service liest den Event-Stream, hält gleitende Zeitfenster und schickt kompakte Deltas über WebSockets.

Der Client hält pro Diagramm einen Ringpuffer und zeichnet mit requestAnimationFrame – stabil bei 60 fps.

  • Go
  • React
  • WebSockets
  • ClickHouse

Nächstes Projekt

So etwas geplant? Lass uns reden.

Lass uns reden

Erzähl mir von deinem Projekt. Ich antworte in der Regel innerhalb von zwei Werktagen.