153 lines
7.2 KiB
HTML
153 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" type="text/css" href="static/gontrol-stylesheet.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
<!-- Include Cytoscape.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.23/dist/cytoscape.min.js"></script>
|
|
<script type="text/javascript" src="static/agents-graph.js"></script>
|
|
<script type="text/javascript" src="static/gontrol-helper.js"></script>
|
|
<title>g2: gommand & gontrol</title>
|
|
</head>
|
|
<!-- <body class="bg-dark text-light" data-bs-theme="dark"> -->
|
|
<body class="bg-light text-dark" data-bs-theme="light">
|
|
<button id="themeToggleButton"
|
|
class="btn btn-outline-secondary position-fixed"
|
|
style="top: 1rem; right: 1rem; z-index: 1;"
|
|
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 pb-4">
|
|
<!-- <h3>Agents</h3> -->
|
|
<div class="table-responsive">
|
|
<div id="agentList"
|
|
hx-get="/agents"
|
|
hx-trigger="load, every 2s"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Logs and Graph -->
|
|
<!-- <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>
|
|
</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>
|
|
|
|
<!-- 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">Command Line Interface</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 bg-primary-subtle border-top border-primary-subtle">
|
|
<div class="px-4 container-fluid navbar text-primary-emphasis bg-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>
|