feat: implement container logs modal, service diagnostics inspector, and directory sizer tool
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s

This commit is contained in:
Kroonk
2026-05-21 18:49:59 +02:00
parent 6ff401ad74
commit 0a044bbb92
4 changed files with 649 additions and 7 deletions

View File

@@ -6,7 +6,7 @@
<title>MischLabs Admin</title>
<meta name="description" content="MischLabs dashboard administration.">
<meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="/style.css?v=24">
<link rel="stylesheet" href="/style.css?v=25">
</head>
<body>
<header class="shell hero admin-hero">
@@ -101,12 +101,27 @@
<button class="ghost-button mini" id="refreshOpsButton" type="button">Aktualisieren</button>
</div>
<div id="diskStatus" class="ops-list">Noch nicht geladen.</div>
<div class="disk-scanner-tool" style="margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);">
<h4 style="margin-bottom: 8px; color: #fff; font-size: 1.05rem; font-weight: 700;">Verzeichnis-Größen-Scanner</h4>
<p style="font-size: 0.85rem; color: var(--dim); margin-bottom: 14px; line-height: 1.4;">
Scanne Ordnergrößen auf den Host-Volumes (z.B. <code>/host/volume2</code> oder <code>/host/volume1/docker</code>), um Speicherfresser zu finden.
</p>
<div class="scanner-input-group" style="display: flex; gap: 8px; margin-bottom: 16px;">
<input type="text" id="scannerPathInput" value="/host/volume2" placeholder="/host/volume2" style="flex-grow: 1; padding: 10px 14px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); border-radius: var(--radius); color: #fff; font-family: monospace; font-size: 0.9rem;">
<button class="ghost-button mini" id="scannerStartBtn" type="button" style="padding-inline: 16px;">Scan starten</button>
</div>
<div id="scannerResults" class="ops-list" style="max-height: 350px; overflow-y: auto;" hidden></div>
</div>
</section>
<section class="ops-card admin-tab-content" id="card-watchtower">
<div class="ops-card-head">
<span>Watchtower</span>
<button class="ghost-button mini" id="runWatchtowerButton" type="button">Jetzt pruefen</button>
<div style="display: flex; gap: 8px;">
<button class="ghost-button mini" id="runWatchtowerButton" type="button">Jetzt pruefen</button>
<button class="ghost-button mini" id="viewWatchtowerLogsBtn" type="button">Logs</button>
</div>
</div>
<div id="watchtowerStatus" class="ops-list">Noch nicht geladen.</div>
</section>
@@ -182,6 +197,44 @@
</nav>
</aside>
<script src="/admin.js?v=20" defer></script>
<!-- Container Logs Modal Overlay -->
<div class="modal-overlay" id="logsModalOverlay" hidden>
<div class="modal-card">
<div class="modal-header">
<h3 id="logsModalTitle">Container Logs</h3>
<button class="modal-close-btn" id="logsModalCloseBtn" type="button">&times;</button>
</div>
<div class="modal-body">
<div class="terminal-logs-controls" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 0.85rem;">
<div>
<label for="logsTailSelect" style="color: var(--dim); margin-right: 6px;">Zeilen:</label>
<select id="logsTailSelect" style="background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: #fff; padding: 4px 8px; cursor: pointer;">
<option value="50">50</option>
<option value="150" selected>150</option>
<option value="300">300</option>
<option value="500">500</option>
</select>
</div>
<button class="ghost-button mini" id="logsModalRefreshBtn" type="button">Aktualisieren</button>
</div>
<pre class="terminal-logs" id="logsModalConsole">Lade Logs...</pre>
</div>
</div>
</div>
<!-- Service Details Modal Overlay -->
<div class="modal-overlay" id="serviceModalOverlay" hidden>
<div class="modal-card">
<div class="modal-header">
<h3 id="serviceModalTitle">Dienst-Inspektion</h3>
<button class="modal-close-btn" id="serviceModalCloseBtn" type="button">&times;</button>
</div>
<div class="modal-body" id="serviceModalContent">
<!-- Dynamically populated details -->
</div>
</div>
</div>
<script src="/admin.js?v=21" defer></script>
</body>
</html>