Add instance dashboard with KPIs and live monitoring features

This commit is contained in:
2026-04-14 22:27:11 +02:00
parent c4a483a57c
commit 57e200b877
2 changed files with 613 additions and 0 deletions
+236
View File
@@ -257,6 +257,233 @@ def _list_instances_grouped_by_owner() -> dict[str, list[dict]]:
return grouped
def _parse_iso_timestamp(value: str) -> datetime | None:
raw = (value or "").strip()
if not raw:
return None
try:
return datetime.fromisoformat(raw.replace("Z", "+00:00"))
except Exception:
return None
def _build_instance_dashboard(instances: list[dict]) -> dict:
total = len(instances)
running = len([item for item in instances if _sanitize_text(item.get("status") or "", 40) == "Läuft"])
error = len(
[
item
for item in instances
if _sanitize_text(item.get("status") or "", 40) == "Fehler"
or _sanitize_text(item.get("nginx_status") or "", 80).lower() == "error"
]
)
library_on = len([item for item in instances if bool(item.get("library_enabled"))])
assigned_users = len(
{
_sanitize_text(item.get("owner_username") or "", 80)
for item in instances
if _sanitize_text(item.get("owner_username") or "", 80)
}
)
version_counts: dict[str, int] = {}
owner_counts: dict[str, int] = {}
for item in instances:
version = _sanitize_text(item.get("app_image_tag") or "latest", 80) or "latest"
owner = _sanitize_text(item.get("owner_username") or "Unzugewiesen", 80) or "Unzugewiesen"
version_counts[version] = version_counts.get(version, 0) + 1
owner_counts[owner] = owner_counts.get(owner, 0) + 1
version_items = sorted(version_counts.items(), key=lambda row: row[1], reverse=True)
owner_items = sorted(owner_counts.items(), key=lambda row: row[1], reverse=True)[:8]
day_keys = []
today = date.today()
for back in range(6, -1, -1):
day_keys.append((today - timedelta(days=back)).isoformat())
updates_by_day = {day: 0 for day in day_keys}
for item in instances:
parsed = _parse_iso_timestamp(_sanitize_text(item.get("updated_at") or "", 40))
if not parsed:
continue
day_key = parsed.date().isoformat()
if day_key in updates_by_day:
updates_by_day[day_key] += 1
labels = [datetime.fromisoformat(day).strftime("%d.%m") for day in day_keys]
values = [updates_by_day[day] for day in day_keys]
return {
"kpis": {
"total": total,
"running": running,
"error": error,
"library_on": library_on,
"assigned_users": assigned_users,
},
"status": {
"labels": ["Läuft", "Fehler", "Sonstige"],
"values": [running, error, max(total - running - error, 0)],
},
"library": {
"labels": ["Aktiv", "Inaktiv"],
"values": [library_on, max(total - library_on, 0)],
},
"versions": {
"labels": [item[0] for item in version_items],
"values": [item[1] for item in version_items],
},
"owners": {
"labels": [item[0] for item in owner_items],
"values": [item[1] for item in owner_items],
},
"activity": {
"labels": labels,
"values": values,
},
}
def _parse_size_to_mib(value: str) -> float:
text = (value or "").strip()
if not text:
return 0.0
match = re.match(r"^([0-9]*\.?[0-9]+)\s*([kmgt]?i?b)$", text.lower())
if not match:
return 0.0
number = float(match.group(1))
unit = match.group(2)
factor_map = {
"b": 1.0 / (1024.0 * 1024.0),
"kib": 1.0 / 1024.0,
"kb": 1.0 / 1024.0,
"mib": 1.0,
"mb": 1.0,
"gib": 1024.0,
"gb": 1024.0,
"tib": 1024.0 * 1024.0,
"tb": 1024.0 * 1024.0,
}
return number * factor_map.get(unit, 0.0)
def _read_meminfo_mib() -> tuple[float, float]:
total_kib = 0.0
available_kib = 0.0
try:
with open("/proc/meminfo", "r", encoding="utf-8") as handle:
for row in handle:
if row.startswith("MemTotal:"):
total_kib = float(row.split()[1])
elif row.startswith("MemAvailable:"):
available_kib = float(row.split()[1])
except Exception:
return 0.0, 0.0
return total_kib / 1024.0, available_kib / 1024.0
def _collect_runtime_stats(instances: list[dict]) -> dict:
ok, output = _run_command(
["docker", "stats", "--no-stream", "--format", "{{.Name}}|{{.CPUPerc}}|{{.MemUsage}}"],
timeout=120,
)
container_stats = {}
total_used_mib = 0.0
if ok:
for row in (output or "").splitlines():
line = row.strip()
if not line or "|" not in line:
continue
parts = line.split("|")
if len(parts) < 3:
continue
name = parts[0].strip()
cpu_raw = parts[1].strip().replace("%", "")
mem_raw = parts[2].strip()
used_raw = mem_raw.split("/")[0].strip() if "/" in mem_raw else mem_raw
try:
cpu_percent = float(cpu_raw) if cpu_raw else 0.0
except ValueError:
cpu_percent = 0.0
mem_mib = _parse_size_to_mib(used_raw)
total_used_mib += mem_mib
container_stats[name] = {
"cpu_percent": round(cpu_percent, 2),
"mem_mib": round(mem_mib, 2),
"mem_raw": mem_raw,
}
managed_prefixes = [f"{_sanitize_text(item.get('subdomain') or '', 63)}-" for item in instances if _sanitize_text(item.get('subdomain') or '', 63)]
managed_prefixes.append("website-")
managed_container_stats = {
name: stats
for name, stats in container_stats.items()
if any(name.startswith(prefix) for prefix in managed_prefixes)
}
managed_used_mib = round(sum(item.get("mem_mib", 0.0) for item in managed_container_stats.values()), 2)
per_instance = []
for item in instances:
subdomain = _sanitize_text(item.get("subdomain") or "", 63)
domain = _sanitize_text(item.get("domain") or "", 190)
if not subdomain:
continue
prefix = f"{subdomain}-"
related = []
for container_name, stats in container_stats.items():
if container_name.startswith(prefix):
related.append({"name": container_name, **stats})
mem_sum = round(sum(entry.get("mem_mib", 0.0) for entry in related), 2)
cpu_sum = round(sum(entry.get("cpu_percent", 0.0) for entry in related), 2)
per_instance.append(
{
"subdomain": subdomain,
"domain": domain,
"status": _sanitize_text(item.get("status") or "Unbekannt", 40),
"nginx_status": _sanitize_text(item.get("nginx_status") or "unbekannt", 80),
"containers": related,
"container_count": len(related),
"mem_mib": mem_sum,
"cpu_percent": cpu_sum,
}
)
per_instance.sort(key=lambda row: row.get("mem_mib", 0.0), reverse=True)
total_mem_mib, available_mem_mib = _read_meminfo_mib()
used_mem_mib = max(total_mem_mib - available_mem_mib, 0.0)
used_mem_pct = (used_mem_mib / total_mem_mib * 100.0) if total_mem_mib > 0 else 0.0
return {
"generated_at": _utc_now_iso(),
"host": {
"total_mem_mib": round(total_mem_mib, 2),
"available_mem_mib": round(available_mem_mib, 2),
"used_mem_mib": round(used_mem_mib, 2),
"used_mem_pct": round(used_mem_pct, 2),
},
"docker": {
"all_container_count": len(container_stats),
"all_used_mem_mib": round(total_used_mib, 2),
"managed_container_count": len(managed_container_stats),
"managed_used_mem_mib": managed_used_mib,
},
"instances": per_instance,
}
def _upsert_school_instance(data: dict) -> None:
subdomain = _sanitize_text(data.get("subdomain") or "", 63)
if not subdomain:
@@ -1468,11 +1695,13 @@ def admin_instances():
return redirect(url_for("admin_instances"))
instances = _list_school_instances()
instance_dashboard = _build_instance_dashboard(instances)
return render_template(
"admin_instances.html",
instances=instances,
users=_list_users_for_admin(),
available_users=available_users,
instance_dashboard=instance_dashboard,
version_options=version_options,
instance_repo_url=INSTANCE_REPO_URL,
parent_domain=INSTANCE_PARENT_DOMAIN,
@@ -1481,6 +1710,13 @@ def admin_instances():
)
@app.route('/admin/instances/stats')
@admin_required
def admin_instances_stats():
instances = _list_school_instances()
return jsonify(_collect_runtime_stats(instances))
@app.route('/admin/system', methods=['GET', 'POST'])
@admin_required
def admin_system_tools():
+377
View File
@@ -8,6 +8,101 @@
<p>Neue Instanzen des Inventarsystems für Subdomains pro Schule anlegen, sowie die Bibliothek dauerhaft aktivieren oder deaktivieren.</p>
</section>
<section class="dashboard-grid">
<article class="kpi-card">
<p class="kpi-label">Instanzen gesamt</p>
<p class="kpi-value">{{ instance_dashboard.kpis.total }}</p>
</article>
<article class="kpi-card good">
<p class="kpi-label">Laufend</p>
<p class="kpi-value">{{ instance_dashboard.kpis.running }}</p>
</article>
<article class="kpi-card bad">
<p class="kpi-label">Fehlerhaft</p>
<p class="kpi-value">{{ instance_dashboard.kpis.error }}</p>
</article>
<article class="kpi-card">
<p class="kpi-label">Bibliothek aktiv</p>
<p class="kpi-value">{{ instance_dashboard.kpis.library_on }}</p>
</article>
<article class="kpi-card">
<p class="kpi-label">Nutzer zugewiesen</p>
<p class="kpi-value">{{ instance_dashboard.kpis.assigned_users }}</p>
</article>
</section>
<section class="charts-grid">
<article class="chart-card">
<h3>Status</h3>
<canvas id="statusChart" aria-label="Status Chart"></canvas>
</article>
<article class="chart-card">
<h3>Bibliothek</h3>
<canvas id="libraryChart" aria-label="Library Chart"></canvas>
</article>
<article class="chart-card wide">
<h3>Versionen</h3>
<canvas id="versionsChart" aria-label="Versions Chart"></canvas>
</article>
<article class="chart-card wide">
<h3>Instanzen pro Nutzer</h3>
<canvas id="ownersChart" aria-label="Owners Chart"></canvas>
</article>
<article class="chart-card wide">
<h3>Aktivität (letzte 7 Tage)</h3>
<canvas id="activityChart" aria-label="Activity Chart"></canvas>
</article>
</section>
<section class="live-monitor">
<div class="live-head">
<h2>Live Monitor (semi-live)</h2>
<p>Aktualisierung alle 15 Sekunden: RAM/CPU pro Instanz und Host-Auslastung.</p>
</div>
<div class="live-kpis">
<article class="live-kpi">
<p>Host RAM belegt</p>
<strong id="liveHostRam">-</strong>
</article>
<article class="live-kpi">
<p>Docker RAM (Invario)</p>
<strong id="liveDockerRam">-</strong>
</article>
<article class="live-kpi">
<p>Container (Invario)</p>
<strong id="liveContainerCount">-</strong>
</article>
<article class="live-kpi">
<p>Docker RAM (alle)</p>
<strong id="liveDockerRamAll">-</strong>
</article>
<article class="live-kpi">
<p>Container (alle)</p>
<strong id="liveContainerCountAll">-</strong>
</article>
<article class="live-kpi">
<p>Letztes Update</p>
<strong id="liveUpdatedAt">-</strong>
</article>
</div>
<div class="live-table-wrap">
<table>
<thead>
<tr>
<th>Instanz</th>
<th>Status</th>
<th>Container</th>
<th>RAM (MiB)</th>
<th>CPU (%)</th>
</tr>
</thead>
<tbody id="liveInstanceBody">
<tr><td colspan="5">Lade Live-Daten...</td></tr>
</tbody>
</table>
</div>
</section>
<section class="instance-form-wrap">
<form method="post" class="instance-form">
<input type="hidden" name="action" value="create">
@@ -126,6 +221,72 @@
margin-bottom: 1rem;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.kpi-card {
border: 1px solid #d8e1e8;
background: linear-gradient(160deg, #ffffff 0%, #f4f8fb 100%);
border-radius: 14px;
padding: 0.85rem;
}
.kpi-card.good {
border-color: #8cc9a6;
background: linear-gradient(160deg, #ffffff 0%, #eaf8f1 100%);
}
.kpi-card.bad {
border-color: #e3adad;
background: linear-gradient(160deg, #ffffff 0%, #fef2f2 100%);
}
.kpi-label {
margin: 0;
font-size: 0.84rem;
color: #4b6170;
font-weight: 600;
}
.kpi-value {
margin: 0.3rem 0 0;
font-size: 1.58rem;
font-weight: 800;
color: #11364a;
}
.charts-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
margin-bottom: 1.2rem;
}
.chart-card {
border: 1px solid #d8e1e8;
background: #ffffff;
border-radius: 14px;
padding: 0.85rem;
}
.chart-card.wide {
grid-column: span 2;
}
.chart-card h3 {
margin: 0 0 0.45rem;
font-size: 1rem;
}
.chart-card canvas {
width: 100%;
max-height: 260px;
}
.instance-form-wrap {
display: grid;
grid-template-columns: 1.2fr 1fr;
@@ -133,6 +294,54 @@
margin-bottom: 1.2rem;
}
.live-monitor {
border: 1px solid #d8e1e8;
background: #ffffff;
border-radius: 14px;
padding: 1rem;
margin-bottom: 1.2rem;
}
.live-head h2 {
margin: 0;
}
.live-head p {
margin: 0.25rem 0 0.75rem;
color: #4f6573;
}
.live-kpis {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.6rem;
margin-bottom: 0.8rem;
}
.live-kpi {
border: 1px solid #d8e1e8;
border-radius: 12px;
background: #f7fafc;
padding: 0.65rem;
}
.live-kpi p {
margin: 0;
font-size: 0.82rem;
color: #4b6170;
}
.live-kpi strong {
display: block;
margin-top: 0.3rem;
font-size: 1.08rem;
color: #11364a;
}
.live-table-wrap {
overflow-x: auto;
}
.instance-form,
.instance-meta,
.instance-table-wrap {
@@ -279,14 +488,182 @@ td {
}
@media (max-width: 900px) {
.dashboard-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.charts-grid {
grid-template-columns: 1fr;
}
.chart-card.wide {
grid-column: span 1;
}
.instance-form-wrap {
grid-template-columns: 1fr;
}
.live-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function() {
const dashboardData = {{ instance_dashboard|tojson }};
const buildChart = (id, config) => {
const element = document.getElementById(id);
if (!element) {
return;
}
new Chart(element, config);
};
buildChart('statusChart', {
type: 'doughnut',
data: {
labels: dashboardData.status.labels,
datasets: [{
data: dashboardData.status.values,
backgroundColor: ['#3aa675', '#cf4b49', '#8aa6b8']
}]
},
options: { plugins: { legend: { position: 'bottom' } } }
});
buildChart('libraryChart', {
type: 'pie',
data: {
labels: dashboardData.library.labels,
datasets: [{
data: dashboardData.library.values,
backgroundColor: ['#1b6f8e', '#c6d7e2']
}]
},
options: { plugins: { legend: { position: 'bottom' } } }
});
buildChart('versionsChart', {
type: 'bar',
data: {
labels: dashboardData.versions.labels,
datasets: [{
label: 'Instanzen',
data: dashboardData.versions.values,
backgroundColor: '#1b6f8e'
}]
},
options: {
responsive: true,
scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
plugins: { legend: { display: false } }
}
});
buildChart('ownersChart', {
type: 'bar',
data: {
labels: dashboardData.owners.labels,
datasets: [{
label: 'Instanzen',
data: dashboardData.owners.values,
backgroundColor: '#b3672e'
}]
},
options: {
indexAxis: 'y',
scales: { x: { beginAtZero: true, ticks: { precision: 0 } } },
plugins: { legend: { display: false } }
}
});
buildChart('activityChart', {
type: 'line',
data: {
labels: dashboardData.activity.labels,
datasets: [{
label: 'Updates',
data: dashboardData.activity.values,
borderColor: '#0b5b89',
backgroundColor: 'rgba(11, 91, 137, 0.15)',
fill: true,
tension: 0.25
}]
},
options: {
scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
plugins: { legend: { display: false } }
}
});
const mib = (value) => {
const num = Number(value || 0);
return `${num.toFixed(1)} MiB`;
};
const percent = (value) => {
const num = Number(value || 0);
return `${num.toFixed(1)} %`;
};
const updateLive = async () => {
try {
const response = await fetch('/admin/instances/stats', { cache: 'no-store' });
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const payload = await response.json();
const host = payload.host || {};
const docker = payload.docker || {};
const instances = payload.instances || [];
const hostRam = `${mib(host.used_mem_mib)} / ${mib(host.total_mem_mib)} (${percent(host.used_mem_pct)})`;
document.getElementById('liveHostRam').textContent = hostRam;
document.getElementById('liveDockerRam').textContent = mib(docker.managed_used_mem_mib);
document.getElementById('liveContainerCount').textContent = String(docker.managed_container_count || 0);
document.getElementById('liveDockerRamAll').textContent = mib(docker.all_used_mem_mib);
document.getElementById('liveContainerCountAll').textContent = String(docker.all_container_count || 0);
document.getElementById('liveUpdatedAt').textContent = payload.generated_at || '-';
const body = document.getElementById('liveInstanceBody');
if (!body) {
return;
}
if (!instances.length) {
body.innerHTML = '<tr><td colspan="5">Keine Instanzdaten vorhanden.</td></tr>';
return;
}
body.innerHTML = instances.map((item) => {
const status = `${item.status || '-'} / ${item.nginx_status || '-'}`;
return `
<tr>
<td>${item.domain || item.subdomain || '-'}</td>
<td>${status}</td>
<td>${item.container_count || 0}</td>
<td>${mib(item.mem_mib)}</td>
<td>${percent(item.cpu_percent)}</td>
</tr>
`;
}).join('');
} catch (error) {
const body = document.getElementById('liveInstanceBody');
if (body) {
body.innerHTML = '<tr><td colspan="5">Live-Daten konnten nicht geladen werden.</td></tr>';
}
}
};
updateLive();
window.setInterval(updateLive, 15000);
const ownerSelect = document.getElementById('owner_username');
const schoolInput = document.getElementById('school_name');
if (!ownerSelect || !schoolInput) {