Widget-Referenz¶
Diese Seite ist die vollständige Referenz aller Custom-Dashboard-Widgets. Pro Widget: Wofür, welche Daten, welche Optionen, Beispiel-Screenshot-Beschreibung.
Status & Übersicht¶
Status-Summary¶
Zählt OK / WARN / CRIT / NO_DATA / UNKNOWN über die gewählte Auswahl.
| Option | Bedeutung |
|---|---|
| Scope | Tenant, Host-Filter, Tag-Filter |
| Anzeige | Pills oder gestapelter Balken |
Sinnvoll als Header eines Dashboards.
Active Problems¶
Liste der aktuell HARD-CRIT/WARN-Services.
| Option | Bedeutung |
|---|---|
| Max-Einträge | Default 20 |
| Sortierung | by Severity / by Duration |
| Akt-Buttons | Inline-Acknowledge |
Active Downtimes¶
Tabelle der gerade aktiven Downtimes mit Restzeit.
Recent Alerts¶
Letzte N Alert-Notifications mit Severity, Host, Service, Zeit.
Charts¶
Alle Chart-Widgets nutzen ECharts (lazy-loaded).
Line Chart¶
Zeitreihen-Plot.
| Option | Bedeutung |
|---|---|
| Datenquelle | Service oder Multi-Service |
| Metric | value, perfdata.<key> |
| Aggregation | min, max, avg, p95, p99 |
| Bucket | auto / 1m / 5m / 1h |
| Y-Axis | linear / log / fixed scale |
Beispiel: CPU-Last über 24 h für Host-Auswahl.
Bar Chart¶
Aggregierte Werte als Balken.
| Option | Bedeutung |
|---|---|
| Group-By | Host / Tenant / Tag / Profile |
| Metric | gleicher Aggregat-Set |
| Sortierung | asc / desc |
| Limit | Top N |
Beispiel: Top 10 Hosts nach Disk-Usage.
Pie Chart¶
Status-Verteilung als Tortendiagramm.
| Option | Bedeutung |
|---|---|
| Scope | Tenant / Tag-Filter |
| Slice-Definition | Status / Profile / Tag |
Gauge¶
Einzelwert mit Skala.
| Option | Bedeutung |
|---|---|
| Service | konkreter Service |
| Min / Max | Skala |
| Threshold-Markers | Warn-/Crit-Linien |
Beispiel: aktuelle CPU eines bestimmten Servers, 0–100 mit Schwellen-Markern.
Heatmap¶
Werte über Zeit × Dimension (z. B. CPU pro Host pro Stunde).
| Option | Bedeutung |
|---|---|
| Y-Achse | Hosts / Services |
| X-Achse | Zeit in Buckets |
| Color-Scale | linear / log |
Sinnvoll für „welcher Host hat wann Probleme gehabt?".
Anomaly & Predictions¶
Anomaly Events¶
Liste aller Anomaly-Events der letzten Periode mit Sensitivity, Z-Score, Service.
Predictions¶
Sortierte Liste der Capacity-Predictions: welcher Service erreicht zuerst seinen Schwellwert?
| Option | Bedeutung |
|---|---|
| Filter | Tenant / Profile / Tag |
| Min-Confidence | R²-Threshold |
| Max-Days-Ahead | nur Vorhersagen innerhalb der nächsten X Tage |
Inhalt & Navigation¶
Text / Notiz¶
Markdown-Block für Doku, Kontakte, Links.
| Option | Bedeutung |
|---|---|
| Inhalt | Markdown |
| Schriftgröße | sm / md / lg / xl |
| Ausrichtung | links / zentriert |
| Hintergrund | transparent / subtil getönt |
Inline-CSS, kein Tailwind
Beim Text-Widget werden Font-Size, Text-Align, vertikale Zentrierung als Inline-Style gesetzt — Tailwind-Klassen werden von Markdown-Kind-Elementen überschrieben. Vertikale Zentrierung läuft via CSS Grid (display: grid; place-items: center), nicht Flexbox.
Image¶
Statisches Bild via URL oder Upload.
| Option | Bedeutung |
|---|---|
| Quelle | URL oder Upload |
| Klick-Aktion | optional Link |
| Fit | contain / cover |
Link-Liste¶
Vordefinierte Links als Buttons (Wiki-Artikel, externe Tools, Public Status Pages).
Tabellen¶
Service-Tabelle¶
Tabellarische Service-Liste mit Status, Wert, letzter Check, Host.
| Option | Bedeutung |
|---|---|
| Spalten | konfigurierbar |
| Filter | Status / Tag / Profile |
| Sortierung | per Spalte |
| Max-Einträge | Pagination ab N |
Host-Tabelle¶
Analog für Hosts mit aggregiertem Status.
Spezielle Widgets¶
Iframe¶
Externer Inhalt eingebettet.
| Option | Bedeutung |
|---|---|
| URL | beliebig |
| Höhe | px |
CSP erlaubt nur Same-Origin oder Public-Origins, die in system_settings.iframe_allowlist whitelisted sind.
Stat-Tile¶
Großer Zahl-Tile mit optionalem Trend-Indikator.
| Option | Bedeutung |
|---|---|
| Source | Service-Wert oder Aggregation |
| Trend-Vergleich | gegen 7d / 24h / 1h vorher |
Map (geo)¶
Hosts auf einer Karte basierend auf Geo-Tags.
| Option | Bedeutung |
|---|---|
| Tile-Source | OpenStreetMap (default) |
| Marker-Color | nach Status |
Widget-Architektur (intern)¶
| Datei | Zweck |
|---|---|
frontend/src/components/widgets/registry.tsx |
Registry — registerWidget() für neue Typen |
frontend/src/components/widgets/WidgetRenderer.tsx |
Query-Orchestrierung, Variable-Resolution |
frontend/src/components/widgets/WidgetConfigDialog.tsx |
Einstellungen pro Widget-Typ |
frontend/src/types/index.ts |
WidgetDataSource, WidgetDisplayOptions |
Neuen Widget-Typ hinzufügen: Komponente erstellen → in Registry registrieren → ggf. Config-Dialog erweitern. Pull-Request gegen frontend/.
Anschluss¶
- Custom Dashboards — wo Widgets platziert werden
- Variablen — wie
$host& Co. funktionieren