added text formatting to commandOutput

This commit is contained in:
Stefan Etringer 2025-07-04 14:47:21 +00:00
parent 1dfc8ba0ef
commit a4e889f232
4 changed files with 40 additions and 33 deletions

View File

@ -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)

View File

@ -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) {

View File

@ -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>');
}

View File

@ -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>