From 5477f80e5680b05b872b744f18215ecffeb4de81 Mon Sep 17 00:00:00 2001 From: gurkenhabicht <info@intheopen.org> Date: Thu, 12 Jun 2025 23:09:24 +0200 Subject: [PATCH] show 2/3 logs and 1/3 graph --- templates/index.html | 70 +++++++++++++++++++++++--------------------- 1 file changed, 37 insertions(+), 33 deletions(-) diff --git a/templates/index.html b/templates/index.html index 7c60e5d..8312972 100644 --- a/templates/index.html +++ b/templates/index.html @@ -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>