From 083567bcfc8b123eacb868a471dd2780143c9120 Mon Sep 17 00:00:00 2001
From: gurkenhabicht <info@intheopen.org>
Date: Mon, 9 Jun 2025 00:42:40 +0200
Subject: [PATCH] changed layout

---
 .env                               |   6 +-
 static/gontrol-helper.js           |  63 ++++++--
 static/gontrol-stylesheet.css      |  23 ++-
 templates/index.html               | 231 ++++++++++++++---------------
 templates/partials/agent_list.html |   2 +-
 5 files changed, 191 insertions(+), 134 deletions(-)

diff --git a/.env b/.env
index 29b888b..21de03d 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 #!/usr/bin/env sh
 
-export DB_HOST="127.0.0.1"
+export DB_HOST="172.17.0.2"
 export DB_PORT=3306
-export DB_USERNAME="mysql"
-export DB_PASSWORD="mysql"
+export DB_USERNAME="root"
+export DB_PASSWORD="root"
 export DB_NAME="gomatic"
diff --git a/static/gontrol-helper.js b/static/gontrol-helper.js
index 8aa7bcd..2fd257a 100644
--- a/static/gontrol-helper.js
+++ b/static/gontrol-helper.js
@@ -20,19 +20,64 @@ document.addEventListener('DOMContentLoaded', () => {
     restoreCheckboxState();
 });
 
+// function prepareAgentNames(event) {
+//         // Determine which form was submitted
+//     const form = event.target;
+
+//     // Collect selected agent names
+//     const selected = Array.from(document.querySelectorAll('.agent-checkbox'))
+//         .filter(cb => cb.checked)
+//         .map(cb => cb.dataset.agentName);
+
+//     // Get the hidden input and select within the submitted form
+//     const hiddenInput = form.querySelector('[name="agentNames"]');
+//     const agentSelect = form.querySelector('select[name="agentName"], select#agentName, select#modalAgentName');
+
+//     if (selected.length > 0) {
+//         // Remove the name from the <select> so only agentNames is submitted
+//         if (agentSelect) {
+//             agentSelect.removeAttribute('name');
+//         }
+//         hiddenInput.value = selected.join(',');
+//     } else {
+//         // Re-enable <select> if no checkboxes selected
+//         if (agentSelect) {
+//             agentSelect.setAttribute('name', 'agentName');
+//         }
+//         hiddenInput.value = '';
+//     }
+// }
+
+let cachedAgentNames = '';
+
 function prepareAgentNames(event) {
-    const selected = Array.from(document.querySelectorAll('.agent-checkbox'))
-        .filter(cb => cb.checked)
-        .map(cb => cb.dataset.agentName);
+    const form = event.target;
 
-    const hiddenInput = document.getElementById('agentNamesInput');
+    // Only set agentNames if this is the navbar form
+    const isNavbarForm = form.id === 'agentCommands';
 
-    if (selected.length > 0) {
-        document.getElementById('agentName').removeAttribute('name');
-        hiddenInput.value = selected.join(',');
+    // If this is the first submission (navbar), calculate agentNames
+    if (isNavbarForm) {
+        const selected = Array.from(document.querySelectorAll('.agent-checkbox'))
+            .filter(cb => cb.checked)
+            .map(cb => cb.dataset.agentName);
+
+        cachedAgentNames = selected.join(',');
+
+        const hiddenInput = form.querySelector('[name="agentNames"]');
+        const agentSelect = form.querySelector('select');
+
+        if (selected.length > 0) {
+            if (agentSelect) agentSelect.removeAttribute('name');
+            hiddenInput.value = cachedAgentNames;
+        } else {
+            if (agentSelect) agentSelect.setAttribute('name', 'agentName');
+            hiddenInput.value = '';
+        }
     } else {
-        document.getElementById('agentName').setAttribute('name', 'agentName');
-        hiddenInput.value = '';
+        // Use cached value for modal form
+        const hiddenInput = form.querySelector('[name="agentNames"]');
+        hiddenInput.value = cachedAgentNames;
     }
 }
 
diff --git a/static/gontrol-stylesheet.css b/static/gontrol-stylesheet.css
index f3b3522..afe675d 100644
--- a/static/gontrol-stylesheet.css
+++ b/static/gontrol-stylesheet.css
@@ -18,8 +18,7 @@
     /* background-color: #f8f9fa; /1* optional: subtle background for log readability *1/ */
 }
 
-.log-info, .log-warning, .log-error, .log-fatal, .log-debug{
-      font-family: "Lucida Console", Monaco, monospace;
+.log-info, .log-warning, .log-error, .log-fatal, .log-debug{ font-family: "Lucida Console", Monaco, monospace;
       font-size: 12px;
 }
 
@@ -40,7 +39,7 @@
 }
 
 .execute-navbar {
-  background-color: var(--bs-warning)
+  background-color: var(--bs-info-bg-subtle);
 }
 
 #graph-container {
@@ -50,3 +49,21 @@
 tr.selected-row {
   background-color: var(--bs-table-hover-bg) !important;
 }
+
+html, body {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+/* body > .container-fluid { */
+/*   flex: 1 0 auto; */
+/* } */
+
+  table {
+    width: 100%;
+    table-layout: auto;
+    word-break: break-word;
+  }
diff --git a/templates/index.html b/templates/index.html
index a9e7f38..6be838f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,131 +15,126 @@
     <title>g2: gommand & gontrol</title>
 </head>
 <body>
-  <div class="container-fluid px-4 py-3">
-
-    <!-- Top Row: Graph + Logs (equal height) -->
-    <div class="row mb-3">
-      <!-- Graph -->
-      <div class="col-md-6 d-flex flex-column">
-        <h3>Agents</h3>
-        <div class="flex-grow-1 border" id="cyto-graph" style="height: 100%; min-height: 320px;"></div>
-      </div>
-
-      <!-- Logs -->
-      <div class="col-md-6 d-flex flex-column">
-        <!-- <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">
-          <div class="btn-group mb-2" 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="flex-grow-1 border" style="overflow-y: auto; min-height: 320px;">
-          <!-- Logs will load here -->
-        </div>
-      </div>
-    </div>
-
-    <!-- Bottom Row: Agent List + Command Execution -->
-    <div class="row">
+  <div class="container-fluid px-4 py-3 pb-5">
+    <div class="row g-4">
       <!-- Agent List -->
-      <div class="col-md-6">
-        <div id="agentList"
-             hx-get="/agents"
-             hx-trigger="load, every 2s"
-             hx-swap="innerHTML">
+      <div class="col-12 col-md-6">
+        <!-- <h3>Agents</h3> -->
+        <div class="table-responsive">
+          <div id="agentList"
+               hx-get="/agents"
+               hx-trigger="load, every 2s"
+               hx-swap="innerHTML">
+          </div>
         </div>
       </div>
 
-      <!-- Command Execution -->
-      <div class="col-md-6">
-      <!--   <div id="agentCommands"> -->
-      <!--     <!-1- <h5>Command Execution</h5> -1-> -->
-      <!--     <form hx-post="http://localhost:5555/executeCommand" -->
-      <!--           hx-target="#commandOutput" -->
-      <!--           hx-encoding="application/x-www-form-urlencoded" -->
-      <!--           hx-swap="innerHTML" -->
-      <!--           onsubmit="prepareAgentNames(event)"> -->
-      <!--       <!-1- <div style="visibility: collapse" class="mb-3"> -1-> -->
-      <!--       <div class="mb-3"> -->
-      <!--         <label for="agentName" class="form-label">Agent Name</label> -->
-      <!--         <select id="agentName" class="form-select" name="agentName" -->
-      <!--                 hx-on="htmx:afterSwap:updateAgentDropdown"> -->
-      <!--           <option value="" disabled selected>Select an Agent</option> -->
-      <!--         </select> -->
-      <!--       </div> -->
-      <!--       <div class="mb-3"> -->
-      <!--         <label for="command" class="form-label">Command</label> -->
-      <!--         <input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required> -->
-      <!--       </div> -->
-      <!--       <button type="submit" class="btn btn-primary">Execute</button> -->
-      <!--       <input type="hidden" name="agentNames" id="agentNamesInput"> -->
-      <!--     </form> -->
-          <pre id="commandOutput"></pre>
-      <!--   </div> -->
-      <!-- </div> -->
-    </div>
-    <!-- <div id="agentConnect">Future Agent Tabs</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>
+        </div>
 
-    <nav class="navbar fixed-bottom bg-body-tertiary">
-  <div class="container-fluid navbar execute-navbar">
-    <form id="agentCommands"
-          hx-post="http://localhost:5555/executeCommand"
-          hx-target="#commandOutput"
-          hx-encoding="application/x-www-form-urlencoded"
-          hx-swap="innerHTML"
-          onsubmit="prepareAgentNames(event)"
-          class="d-flex w-100">
-
-      <!-- Submit button on the left -->
-      <button type="submit" class="btn btn-primary me-2">Execute</button>
-
-      <!-- Command input fills the rest of the space -->
-      <input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required>
-
-      <!-- Hidden agentNames input -->
-      <input type="hidden" name="agentNames" id="agentNamesInput">
-
-      <!-- Fully hidden dropdown (not visible but present in DOM) -->
-      <select id="agentName"
-              class="form-select d-none"
-              name="agentName"
-              hx-on="htmx:afterSwap:updateAgentDropdown">
-        <option value="" disabled selected>Select an Agent</option>
-      </select>
-    </form>
-  </div>
-</nav>
-
-
-
-    <!-- Offcanvas for Agent Details -->
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" data-bs-scroll="true">
-      <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="offcanvasRightLabel">Agent Details</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-      </div>
-      <div id="offcanvas-body" class="offcanvas-body">
-        ...
+        <!-- Graph -->
+        <div>
+          <h3>Graph</h3>
+          <div class="border" id="cyto-graph" style="min-height: 320px;"></div>
+        </div>
       </div>
     </div>
   </div>
+
+  <!-- Offcanvas for Agent Details -->
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" data-bs-scroll="true">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="offcanvasRightLabel">Agent Details</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div id="offcanvas-body" class="offcanvas-body">
+      ...
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <div class="modal fade modal-dialog-scrollable modal-xl" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title" id="exampleModalLabel">Modal title</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <pre id="commandOutput">...</pre>
+        </div>
+        <div class="modal-footer d-flex justify-content-between align-items-center">
+          <form id="modalAgentCommands"
+                hx-post="http://localhost:5555/executeCommand"
+                hx-target="#commandOutput"
+                hx-encoding="application/x-www-form-urlencoded"
+                hx-swap="innerHTML"
+                onsubmit="prepareAgentNames(event)"
+                class="d-flex flex-grow-1 me-3">
+            <input type="text" class="form-control me-2" id="modalCommand" name="command" placeholder="Enter command" required>
+            <input type="hidden" name="agentNames" id="modalAgentNamesInput">
+            <select id="modalAgentName"
+                    class="form-select d-none"
+                    name="agentName"
+                    hx-on="htmx:afterSwap:updateAgentDropdown">
+              <option value="" disabled selected>Select an Agent</option>
+            </select>
+            <button type="submit" class="btn btn-primary">Execute</button>
+          </form>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sticky Footer Navbar -->
+  <nav class="navbar bg-body-tertiary fixed-bottom">
+    <div class="px-4 container-fluid navbar text-primary-emphasis bg-primary-subtle border-top border-primary-subtle">
+      <form id="agentCommands"
+            hx-post="http://localhost:5555/executeCommand"
+            hx-target="#commandOutput"
+            hx-encoding="application/x-www-form-urlencoded"
+            hx-swap="innerHTML"
+            onsubmit="prepareAgentNames(event)"
+            class="d-flex w-100">
+        <button type="submit" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#exampleModal">Execute</button>
+        <input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required>
+        <input type="hidden" name="agentNames" id="agentNamesInput">
+        <select id="agentName"
+                class="form-select d-none"
+                name="agentName"
+                hx-on="htmx:afterSwap:updateAgentDropdown">
+          <option value="" disabled selected>Select an Agent</option>
+        </select>
+      </form>
+    </div>
+  </nav>
 </body>
 </html>
diff --git a/templates/partials/agent_list.html b/templates/partials/agent_list.html
index 070380c..96001e2 100644
--- a/templates/partials/agent_list.html
+++ b/templates/partials/agent_list.html
@@ -10,7 +10,7 @@
             <!-- <th>Last Contact</th> -->
             <th>Status</th>
             <!-- <th>Actions <input type="checkbox" class="select-agent-checkbox" onClick="toggleAllCheckboxes(this)"></th> -->
-            <th><button type="button" class="btn btn-primary btn-sm" onClick="toggleAllCheckboxes()">Toggle Agents</button></th>
+            <th><button type="button" class="btn btn-outline-primary btn-sm" onClick="toggleAllCheckboxes()">Toggle Agents</button></th>
         </tr>
     </thead>
     <tbody>