added text formatting to commandOutput

Makefile

@@ -8,7 +8,7 @@ GOBIN := /usr/bin
 BUILD_DIR = build
 BINARY = $(BUILD_DIR)/$(APP_NAME)
 
-.PHONY: all build help clean install uninstall #build-static
+.PHONY: all build help clean install uninstall test #build-static
 
 all: build
 
@@ -28,6 +28,10 @@ uninstall: clean ## Remove build artifacts
 	@echo "Removing installed binary..."
 	rm -f $(GOBIN)/$(APP_NAME)
 
+test: build
+	@echo "Executing tests..."
+	go test ./... -v -race -cover
+
 clean: ## Remove installed application
 	@echo "Cleaning up build artifacts..."
 	$(GO_CLEAN)

src/server/webapp/static/agents-graph.js

@@ -182,7 +182,7 @@ async function loadGraphData() {
     agentData = await fetchData();
 
     // Check if the data is valid
-    console.log('Extracted agent data:', agentData);
+    // console.log('Extracted agent data:', agentData);
 
     // Only update the graph if agent data is available
     if (agentData && agentData.length > 0) {

src/server/webapp/static/gontrol-helper.js

@@ -14,6 +14,10 @@ document.addEventListener('DOMContentLoaded', () => {
             updateAgentDropdown();
             bindRowClicks();
         }
+
+    // Stylize the results inside commandOutput
+    const commandOutput = document.getElementById('commandOutput');
+    styleCommandOutput();
     });
 
     bindRowClicks();
@@ -22,34 +26,6 @@ document.addEventListener('DOMContentLoaded', () => {
     themeToggle();
 });
 
-// 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) {
@@ -179,3 +155,30 @@ function themeToggle() {
     applyTheme(newTheme);
   });
 }
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// Colorize CommandOutput
+//
+////////////////////////////////////////////////////////////////////////////////
+
+
+function styleCommandOutput() {
+  // Split lines by newline character, since <pre> preserves formatting
+  // let lines = document.getElementById('commandOutput').innerHTML.split('\n');
+    let lines = commandOutput.innerHTML.split(/<br\s*\/?>|\n/);
+
+  // Map lines: if contains "Error", wrap in red span, else plain text
+  lines = lines.map(line => {
+    if (line.includes("ERROR")) {
+      return `<span style="color: red;">${line}</span>`;
+    } else if (/^\[\S*\]$/.test(line)) {
+      return `<span style="color: blue;">${line}</span>`;
+    } else {
+        return `<span style="font-size: 16px">${line}</span>`;
+    }
+  });
+
+  // Replace innerHTML with the joined lines, joined by <br> for line breaks in HTML
+  commandOutput.innerHTML = lines.join('<br>');
+}

src/server/webapp/templates/index.html

@@ -101,7 +101,7 @@
     <div class="modal-dialog modal-dialog-scrollable modal-fullscreen">
       <div class="modal-content">
         <div class="modal-header">
-          <h1 class="modal-title" id="exampleModalLabel">Command Line Interface</h1>
+          <!-- <h1 class="modal-title" id="exampleModalLabel">Command Line Interface</h1> -->
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
@@ -115,6 +115,7 @@
                 hx-swap="innerHTML"
                 onsubmit="prepareAgentNames(event)"
                 class="d-flex flex-grow-1 me-3">
+            <button type="submit" class="btn btn-primary me-2">Execute</button>
             <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"
@@ -123,9 +124,8 @@
                     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>
+          <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
         </div>
       </div>
     </div>