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>