Initial commit: IT Nexus Web-App
This commit is contained in:
158
nexus-scanner/internal/web/templates/monitoring.html
Normal file
158
nexus-scanner/internal/web/templates/monitoring.html
Normal file
@@ -0,0 +1,158 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">Standort-Monitoring</h1>
|
||||
<p class="page-sub">Erreichbarkeit von Internet, Diensten und Netzwerkgeräten.</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
{{if .AllOnline}}
|
||||
<div class="status-pill online"><span class="dot green"></span> Alle Systeme Online</div>
|
||||
{{else if eq .TotalChecks 0}}
|
||||
<div class="status-pill"><span class="dot" style="background:var(--text-3);"></span> Noch keine Checks</div>
|
||||
{{else}}
|
||||
<div class="status-pill" style="background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3);color:#ff3b30;">
|
||||
<span class="dot" style="background:#ff3b30;"></span> Probleme erkannt
|
||||
</div>
|
||||
{{end}}
|
||||
<form method="POST" action="/monitoring/scan" style="margin:0;">
|
||||
<button type="submit" class="btn btn-primary" style="height:32px;font-size:13px;">Jetzt prüfen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:20px;">
|
||||
<div class="stat">
|
||||
<div class="stat-label">Checks gesamt</div>
|
||||
<div class="stat-value">{{.TotalChecks}}</div>
|
||||
<div class="stat-delta neutral">konfiguriert</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Online</div>
|
||||
<div class="stat-value" style="{{if gt .OnlineCount 0}}color:var(--success);{{end}}">{{.OnlineCount}}</div>
|
||||
<div class="stat-delta up">erreichbar</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Offline</div>
|
||||
<div class="stat-value" style="{{if gt .OfflineCount 0}}color:#ff3b30;{{end}}">{{.OfflineCount}}</div>
|
||||
<div class="stat-delta {{if gt .OfflineCount 0}}down{{else}}neutral{{end}}">nicht erreichbar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checks Table -->
|
||||
<div class="card" style="margin-bottom:20px;">
|
||||
{{if .Checks}}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Typ</th>
|
||||
<th>Ziel</th>
|
||||
<th>Status</th>
|
||||
<th>Latenz</th>
|
||||
<th style="width:180px;">Verlauf (letzte 20)</th>
|
||||
<th>Geprüft</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Checks}}
|
||||
<tr>
|
||||
<td style="font-weight:600;">{{.Check.Name}}</td>
|
||||
<td>
|
||||
<span style="background:var(--bg-2);border:1px solid var(--border);border-radius:4px;padding:1px 7px;font-size:11px;font-family:monospace;text-transform:uppercase;color:var(--text-2);">{{.Check.Type}}</span>
|
||||
</td>
|
||||
<td style="color:var(--text-2);font-size:12px;font-family:monospace;">{{.Check.Target}}</td>
|
||||
<td>
|
||||
{{if not .HasResult}}
|
||||
<span class="badge" style="color:var(--text-3);">Ausstehend</span>
|
||||
{{else if eq .Latest.Status "online"}}
|
||||
<span class="badge badge-green"><span class="dot green" style="width:5px;height:5px;margin-right:4px;display:inline-block;"></span>Online</span>
|
||||
{{else}}
|
||||
<span class="badge" style="background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3);color:#ff3b30;"><span class="dot" style="background:#ff3b30;width:5px;height:5px;margin-right:4px;display:inline-block;border-radius:50%;"></span>Offline</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td style="color:var(--text-2);font-size:12px;">
|
||||
{{if and .HasResult (gt .Latest.LatencyMS 0)}}{{.Latest.LatencyMS}} ms{{else}}—{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:2px;align-items:center;">
|
||||
{{range .History}}
|
||||
<div style="width:8px;height:20px;border-radius:2px;flex-shrink:0;
|
||||
background:{{if eq .Status "online"}}var(--success){{else}}#ff3b30{{end}};
|
||||
opacity:0.8;"
|
||||
title="{{formatTime .CheckedAt}} · {{.Status}}{{if gt .LatencyMS 0}} · {{.LatencyMS}}ms{{end}}{{if .Error}} · {{.Error}}{{end}}">
|
||||
</div>
|
||||
{{end}}
|
||||
{{if eq (len .History) 0}}
|
||||
<span style="color:var(--text-3);font-size:11px;">noch keine Daten</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</td>
|
||||
<td style="color:var(--text-3);font-size:12px;">
|
||||
{{if .HasResult}}{{formatTime .Latest.CheckedAt}}{{else}}—{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<form method="POST" action="/monitoring/checks/{{.Check.ID}}/delete" style="margin:0;">
|
||||
<button type="submit" class="icon-btn" title="Löschen"
|
||||
onclick="return confirm('Check \'{{.Check.Name}}\' löschen?')"
|
||||
style="color:var(--text-3);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{else}}
|
||||
<div style="text-align:center;padding:48px;color:var(--text-3);">
|
||||
<div style="font-size:32px;margin-bottom:8px;">📡</div>
|
||||
<div style="font-weight:600;margin-bottom:4px;">Noch keine Checks konfiguriert</div>
|
||||
<div style="font-size:13px;">Füge unten deinen ersten Check hinzu.</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Add Check Form -->
|
||||
<div class="card" style="margin-top:4px;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);">
|
||||
<div>
|
||||
<div style="font-weight:600;font-size:14px;color:var(--text-1);">Check hinzufügen</div>
|
||||
<div style="font-size:12px;color:var(--text-3);margin-top:2px;">Jeder Standort prüft unabhängig — Ping, HTTP oder TCP Port.</div>
|
||||
</div>
|
||||
</div>
|
||||
{{if .AddErr}}<div class="error-msg" style="margin-bottom:14px;">{{.AddErr}}</div>{{end}}
|
||||
<form method="POST" action="/monitoring/checks/add">
|
||||
<div style="display:grid;grid-template-columns:1fr 110px 1fr;gap:12px;margin-bottom:14px;">
|
||||
<div>
|
||||
<label class="input-label">Name</label>
|
||||
<input class="input" type="text" name="name" placeholder="z.B. Internet (Google)" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">Typ</label>
|
||||
<select class="select" name="type" style="width:100%;">
|
||||
<option value="ping">Ping</option>
|
||||
<option value="http">HTTP/S</option>
|
||||
<option value="tcp">TCP Port</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">Ziel</label>
|
||||
<input class="input" type="text" name="target"
|
||||
placeholder="8.8.8.8 · https://… · host:443" required>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:12px;color:var(--text-3);">
|
||||
<span style="color:var(--text-2);font-weight:600;">Ping:</span> IP-Adresse
|
||||
<span style="color:var(--text-2);font-weight:600;">HTTP/S:</span> https://hostname
|
||||
<span style="color:var(--text-2);font-weight:600;">TCP:</span> hostname:port
|
||||
</span>
|
||||
<button type="submit" class="btn btn-primary">+ Hinzufügen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user