whx
/
gontrol
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show 2/3 logs and 1/3 graph

This commit is contained in:
gurkenhabicht 2025-06-12 23:09:24 +02:00
parent bb6bbfdffd
commit 5477f80e56
1 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
templates/index.html
View File

@ -23,10 +23,11 @@
aria-label="Toggle Theme">
<i class="bi bi-sun"></i>
</button>
<div class="container-fluid px-4 py-3 pb-5">
<div class="row g-4">
<!-- Agent List -->
<div class="col-12 col-md-6">
<div class="col-12 col-md-6 pb-4">
<!-- <h3>Agents</h3> -->
<div class="table-responsive">
<div id="agentList"
@ -38,41 +39,44 @@
</div>
<!-- Right Column: Logs and Graph -->
<div class="col-12 col-md-6 d-flex flex-column">
<!-- Logs -->
<div class="mb-3">
<!-- <h3>Logs</h3> -->
<form id="log-filter-form"
hx-get="/logs"
hx-target="#logs-container"
hx-swap="innerHTML"
hx-trigger="change from:.log-filter, load, every 5s"
hx-include="#log-filter-form"
class="mb-2">
<div class="btn-group flex-wrap" role="group" aria-label="Log filter">
<input type="checkbox" class="btn-check log-filter" id="info" name="level" value="info" checked>
<label class="btn btn-outline-primary" for="info">Info</label>
<input type="checkbox" class="btn-check log-filter" id="warning" name="level" value="warning">
<label class="btn btn-outline-primary" for="warning">Warning</label>
<input type="checkbox" class="btn-check log-filter" id="error" name="level" value="error">
<label class="btn btn-outline-primary" for="error">Error</label>
<input type="checkbox" class="btn-check log-filter" id="fatal" name="level" value="fatal">
<label class="btn btn-outline-primary" for="fatal">Fatal</label>
<input type="checkbox" class="btn-check log-filter" id="debug" name="level" value="debug">
<label class="btn btn-outline-primary" for="debug">Debug</label>
</div>
</form>
<div id="logs-container" class="border" style="overflow-y: auto; min-height: 240px; max-height: 320px;">
<!-- Logs will load here -->
<!-- <div class="col-12 col-md-6 d-flex flex-column"> -->
<!-- Right Column: Logs and Graph -->
<div class="col-12 col-md-6 d-flex flex-column" style="height: calc(100vh - 120px);">
<!-- Logs (2/3 of height) -->
<div class="d-flex flex-column" style="flex: 2 1 0; min-height: 0;">
<form id="log-filter-form"
hx-get="/logs"
hx-target="#logs-container"
hx-swap="innerHTML"
hx-trigger="change from:.log-filter, load, every 5s"
hx-include="#log-filter-form"
class="mb-2">
<div class="btn-group flex-wrap" role="group" aria-label="Log filter">
<input type="checkbox" class="btn-check log-filter" id="info" name="level" value="info" checked>
<label class="btn btn-outline-primary" for="info">Info</label>
<input type="checkbox" class="btn-check log-filter" id="warning" name="level" value="warning">
<label class="btn btn-outline-primary" for="warning">Warning</label>
<input type="checkbox" class="btn-check log-filter" id="error" name="level" value="error">
<label class="btn btn-outline-primary" for="error">Error</label>
<input type="checkbox" class="btn-check log-filter" id="fatal" name="level" value="fatal">
<label class="btn btn-outline-primary" for="fatal">Fatal</label>
<input type="checkbox" class="btn-check log-filter" id="debug" name="level" value="debug">
<label class="btn btn-outline-primary" for="debug">Debug</label>
</div>
</div>
<!-- Graph -->
<div>
<!-- <h3>Graph</h3> -->
<div class="border" id="cyto-graph" style="min-height: 320px;"></div>
</form>
<div id="logs-container" class="border flex-grow-1" style="overflow-y: auto;">
<!-- Logs will load here -->
</div>
</div>
<!-- Graph (1/3 of height) -->
<div class="d-flex flex-column mt-3" style="flex: 1 1 0; min-height: 0;">
<div class="border flex-grow-1" id="cyto-graph" style="overflow-y: auto;">
<!-- Graph content -->
</div>
</div>
</div>
</div>
</div>