Run #17 Gate Visualization UI

Zweck

Diese Web-UI dient zur Visualisierung der Retry-Statistiken aus Run #17 und zur Bewertung der Stabilität der Gate-V1-Implementierung im Default-Modus (MODE=warn). Sie ist Teil der kontinuierlichen Analysepipeline und liefert Kennzahlen über Wiederholungsversuche, Latenzverteilungen und interne Heuristik-Leistungsindikatoren.

Hauptfunktionen

Abrufen von Retry-Statistiken über den API-Endpunkt /api/retry-stats
Darstellung zentraler Metriken: Δt < 0, warn_rate, unknown_rate, healing_rate
Performance-Messung durch Anzeige von p95 und p99
Interaktive Filterung nach Stratum und Policy-Konfigurationen
Zustandserkennung und Gate-Zusammenfassung (Anzeigen von Mode="warn")
Dynamische Aktualisierung der Visualisierungen bei Nutzerinteraktion
Responsive Dashboard-Struktur, optimiert für Desktop und Mobile

Datenfluss

Beim Start ruft das Frontend über GET /api/retry-stats die aktuellen Statistikdaten ab.
Die Antwort wird als JSON ausgewertet und an die Visualisierungs-Module im JS-Frontend übergeben.
Diagramme, Kennzahlen und Zusammenfassungen werden im UI dynamisch aktualisiert.
Änderungen der Filtereinstellungen führen zu einem erneuten Datenabruf.

Erwarteter Response-Shape

{
  "p95": number,
  "p99": number,
  "unknown_rate": number,
  "healing_rate": number,
  "stats": [
    {
      "stratum": string,
      "policy_hash": string,
      "dt_lt0": number,
      "warn_rate": number,
      "timestamp": string
    }
  ]
}

API-Nutzung

Endpunkt: /api/retry-stats

Methode: GET

Optionale Query-Parameter:

stratum: Auswahl des gewünschten Stratum
policy_hash: Filter nach Policy-Konfiguration

Nutzung im Code:

Definiert in js/api.js
Wird in der Anwendung beim Laden und nach Filteränderung verwendet.

Ordnerstruktur

/
├── index.html              # Einstiegspunkt der UI
├── css/
│   └── style.css           # Layout und visuelle Struktur
├── js/
│   ├── api.js              # Schnittstelle zu /api/retry-stats
│   ├── charts.js           # Modul zur Diagramm-Visualisierung
│   ├── filters.js          # Filterlogik für Stratum / Policy
│   └── app.js              # Einstiegspunkt der internen Logik
├── README.md               # (diese Datei)
└── ...                     # Weitere unterstützende Dateien

Nutzungshinweise

Öffne index.html in einem Browser mit Zugriff auf die definierte API.
Stelle sicher, dass der API-Endpunkt /api/retry-stats erreichbar ist.
Wähle über die Filterleiste gewünschte Stratums oder Policy-IDs, um die Datenansicht zu fokussieren.
Änderungen werden sofort reflektiert, ein Neuladen der Seite ist nicht erforderlich.

Entwicklung & Erweiterung

Neue Metriken können über die JSON-Antwort integriert und in charts.js visualisiert werden.
Styles sind komponentenbasiert und folgen dem BEM-Prinzip.
Die Anwendung ist so ausgelegt, dass Erweiterungen für weitere Run-Analysen (z. B. Run #18) einfach möglich sind.

3.1 KiB Raw Blame History Unescape Escape