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