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

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,10 +39,11 @@
</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) -->
<div class="d-flex flex-column" style="flex: 2 1 0; min-height: 0;">
<form id="log-filter-form" <form id="log-filter-form"
hx-get="/logs" hx-get="/logs"
hx-target="#logs-container" hx-target="#logs-container"
@ -62,17 +64,19 @@
<label class="btn btn-outline-primary" for="debug">Debug</label> <label class="btn btn-outline-primary" for="debug">Debug</label>
</div> </div>
</form> </form>
<div id="logs-container" class="border" style="overflow-y: auto; min-height: 240px; max-height: 320px;"> <div id="logs-container" class="border flex-grow-1" style="overflow-y: auto;">
<!-- Logs will load here --> <!-- Logs will load here -->
</div> </div>
</div> </div>
<!-- Graph --> <!-- Graph (1/3 of height) -->
<div> <div class="d-flex flex-column mt-3" style="flex: 1 1 0; min-height: 0;">
<!-- <h3>Graph</h3> --> <div class="border flex-grow-1" id="cyto-graph" style="overflow-y: auto;">
<div class="border" id="cyto-graph" style="min-height: 320px;"></div> <!-- Graph content -->
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>