113 lines
4.9 KiB
HTML
113 lines
4.9 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>
|
|
<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>
|
|
<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">
|
|
<!-- Agent List -->
|
|
<div class="col-md-6">
|
|
<div id="agentList"
|
|
hx-get="/agents"
|
|
hx-trigger="load, every 2s"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Command Execution -->
|
|
<div class="col-md-6">
|
|
<div id="agentCommands">
|
|
<!-- <h5>Command Execution</h5> -->
|
|
<form hx-post="http://localhost:5555/executeCommand"
|
|
hx-target="#commandOutput"
|
|
hx-encoding="application/x-www-form-urlencoded"
|
|
hx-swap="innerHTML"
|
|
onsubmit="prepareAgentNames(event)">
|
|
<div style="visibility: collapse" 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> -->
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</body>
|
|
</html>
|