now that is some stuff
This commit is contained in:
@@ -0,0 +1,47 @@
|
|||||||
|
## Plan: Operator UI v1 (Flexible Delivery)
|
||||||
|
|
||||||
|
Ship a practical, operator-first UI quickly using existing control-plane APIs, while keeping implementation choices flexible where they do not affect UX outcomes. Prioritize clear workflows, reliable live state, and low-friction deployment at /ui.
|
||||||
|
|
||||||
|
**Steps**
|
||||||
|
1. Phase 1: Experience goals and page IA. Define primary workflows and success criteria before coding: monitor fleet health, run commands safely, inspect audit history, manage alerts, and handle enrollment tokens.
|
||||||
|
2. Phase 1: Information architecture. Create a minimal nav with Dashboard, Agents, Commands, Audit, Alerts, and Tokens; keep room to merge/split pages later based on usage.
|
||||||
|
3. Phase 1: Data contracts and client boundaries. Build a typed API client around existing endpoints with origin-relative URLs only; centralize request/retry/error normalization and leave room to swap transport helpers.
|
||||||
|
4. Phase 2: Core shell and states. Implement app shell, loading/empty/error states, top-level notifications, and shared primitives (table/list/cards/filter panel) without prematurely freezing visual details.
|
||||||
|
5. Phase 2: Dashboard and Agents first. Surface connected/offline agent state and active alert counts, with quick navigation into command and investigation workflows.
|
||||||
|
6. Phase 2: Command Runner. Implement safe command form (status/devs/leases/inventory/wake), result rendering, request_id visibility, and copy/share affordances for incident collaboration.
|
||||||
|
7. Phase 3: Audit timeline. Implement filterable audit feed (agent_id, event_type, outcome, time window) with metadata drill-down and links back to related command outcomes.
|
||||||
|
8. Phase 3: Alerts center. Implement active alerts plus transition history, with live subscription via alerts websocket and automatic polling fallback if stream drops.
|
||||||
|
9. Phase 3: Token operations. Implement issue/list/revoke flows with expiry visibility and clear destructive-action confirmation UX.
|
||||||
|
10. Phase 4: UX polish and operator ergonomics. Add keyboard-friendly flow, persisted local filters, robust reconnect indicators, and compact/high-density views for on-call usage.
|
||||||
|
11. Phase 4: Deployment integration. Build static UI artifact into release pipeline and serve at /ui behind Cloudflare Access with the existing edge policy.
|
||||||
|
12. Phase 5: Validation and soak. Run realistic operator drills and prolonged soak to tune alert noise, UI refresh cadence, and failure handling.
|
||||||
|
|
||||||
|
**Relevant files**
|
||||||
|
- [wakey-control-plane/src/runtime/mod.rs](wakey-control-plane/src/runtime/mod.rs) — route integration point for serving /ui and preserving public/control boundary.
|
||||||
|
- [wakey-control-plane/src/api/commands.rs](wakey-control-plane/src/api/commands.rs) — command runner response contract.
|
||||||
|
- [wakey-control-plane/src/api/audit.rs](wakey-control-plane/src/api/audit.rs) — audit query/filter contract.
|
||||||
|
- [wakey-control-plane/src/api/alerts.rs](wakey-control-plane/src/api/alerts.rs) — active alerts, transition history, and websocket stream contracts.
|
||||||
|
- [wakey-control-plane/src/api/control.rs](wakey-control-plane/src/api/control.rs) — token-management contracts.
|
||||||
|
- [deploy/Caddyfile.control-plane.example](deploy/Caddyfile.control-plane.example) — edge gating and /ui exposure model.
|
||||||
|
- [scripts/package_rootfs.ps1](scripts/package_rootfs.ps1) — package integration for UI artifact.
|
||||||
|
- [.gitea/workflows/release.yml](.gitea/workflows/release.yml) — CI build and release integration.
|
||||||
|
- [README.md](README.md) — operator-facing UI and API usage docs.
|
||||||
|
|
||||||
|
**Verification**
|
||||||
|
1. UI build verification in CI (typecheck, lint, production build) and artifact presence checks.
|
||||||
|
2. Page-level smoke tests: Dashboard, Agents, Commands, Audit, Alerts, Tokens all load and complete primary actions.
|
||||||
|
3. Contract checks between typed client models and control-plane payloads for commands/audit/alerts.
|
||||||
|
4. Live-state checks: websocket stream updates alerts; fallback polling activates on disconnect and recovers gracefully.
|
||||||
|
5. Security checks: /ui and /api/v1/control/* remain blocked without Access policy; public agent endpoints remain reachable.
|
||||||
|
6. Soak checks: multi-hour sessions preserve responsiveness and do not lose transitions during reconnect churn.
|
||||||
|
|
||||||
|
**Decisions**
|
||||||
|
- Keep major architecture fixed: same-domain /ui, origin-relative API client, edge-enforced admin access.
|
||||||
|
- Keep minor implementation details flexible: exact component library, state library, and styling primitives can change if DX improves.
|
||||||
|
- Optimize for operator speed over visual novelty: dense information, low click depth, and fast command feedback.
|
||||||
|
- Treat websocket as enhancement, not dependency: polling fallback is mandatory.
|
||||||
|
|
||||||
|
**Further Considerations**
|
||||||
|
1. Short-term backend enhancements likely to improve UX quickly: agent metadata labels, audit cursor pagination, persisted alert-rule defaults.
|
||||||
|
2. If team preference changes, frontend framework can be swapped as long as route/contracts/deploy shape stays the same.
|
||||||
|
3. Add a lightweight investigation-mode preset in UI that pivots from alert to related audits to related command request_id in one flow.
|
||||||
@@ -226,11 +226,17 @@ This keeps edge policy and app routing aligned as features grow.
|
|||||||
|
|
||||||
## UI (Initial Shell)
|
## UI (Initial Shell)
|
||||||
|
|
||||||
Control-plane now serves a minimal operator shell at `/ui/` for immediate
|
Control-plane serves the built Operator UI at `/ui/` from `ui/dist`.
|
||||||
workflow testing (agents, command runner, alerts, and recent audits).
|
|
||||||
|
|
||||||
This UI is intentionally lightweight and is the starting point for the richer
|
Build UI assets before starting control-plane:
|
||||||
Operator UI v1 plan.
|
|
||||||
|
```sh
|
||||||
|
cd ui
|
||||||
|
pnpm install
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
Then start control-plane and open `/ui/` on the same host/port.
|
||||||
|
|
||||||
## CLI
|
## CLI
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
dist/
|
||||||
|
node_modules/
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
const $ = (id) => document.getElementById(id);
|
|
||||||
|
|
||||||
function setStatus(kind, text) {
|
|
||||||
const pill = $("status-pill");
|
|
||||||
pill.className = `pill ${kind}`;
|
|
||||||
pill.textContent = text;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function api(path, init) {
|
|
||||||
const res = await fetch(path, {
|
|
||||||
headers: { "content-type": "application/json" },
|
|
||||||
...init,
|
|
||||||
});
|
|
||||||
if (!res.ok) {
|
|
||||||
let body = "";
|
|
||||||
try { body = JSON.stringify(await res.json(), null, 2); } catch (_) {}
|
|
||||||
throw new Error(`${res.status} ${res.statusText}\n${body}`);
|
|
||||||
}
|
|
||||||
return res.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderAgents(agents) {
|
|
||||||
const root = $("agents");
|
|
||||||
root.innerHTML = "";
|
|
||||||
if (!agents.length) {
|
|
||||||
root.innerHTML = '<div class="item">No agents enrolled yet</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (const a of agents) {
|
|
||||||
const row = document.createElement("div");
|
|
||||||
row.className = "item";
|
|
||||||
row.innerHTML = `<span>${a.agent_id}</span><span>${a.connected ? "connected" : "offline"}</span>`;
|
|
||||||
row.onclick = () => { $("agent-id").value = a.agent_id; };
|
|
||||||
root.appendChild(row);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderAlerts(alerts) {
|
|
||||||
const root = $("alerts");
|
|
||||||
root.innerHTML = "";
|
|
||||||
if (!alerts.length) {
|
|
||||||
root.innerHTML = '<div class="item">No active alerts</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (const a of alerts) {
|
|
||||||
const row = document.createElement("div");
|
|
||||||
row.className = "item";
|
|
||||||
row.innerHTML = `<span>${a.kind}${a.agent_id ? ` (${a.agent_id})` : ""}</span><span>${a.severity}</span>`;
|
|
||||||
root.appendChild(row);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadAgents() {
|
|
||||||
const agents = await api("/api/v1/control/agents");
|
|
||||||
renderAgents(agents);
|
|
||||||
return agents;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadAlerts() {
|
|
||||||
const alerts = await api("/api/v1/control/alerts");
|
|
||||||
renderAlerts(alerts);
|
|
||||||
return alerts;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadAudit() {
|
|
||||||
const events = await api("/api/v1/control/audit/events?limit=25");
|
|
||||||
$("audit").textContent = JSON.stringify(events, null, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildCommandPayload(kind, query) {
|
|
||||||
if (kind === "devs") {
|
|
||||||
return { command: { kind: "devs", dev: null, up_only: false } };
|
|
||||||
}
|
|
||||||
if (kind === "status") {
|
|
||||||
return { command: { kind: "status", query: query || null, name: null, ips: [], devs: [], nuds: [], macs: [] } };
|
|
||||||
}
|
|
||||||
if (kind === "leases") {
|
|
||||||
return { command: { kind: "leases", include_state: true } };
|
|
||||||
}
|
|
||||||
if (kind === "inventory") {
|
|
||||||
return { command: { kind: "inventory", query: query || null, name: null, ips: [], devs: [], nuds: [], macs: [] } };
|
|
||||||
}
|
|
||||||
return { command: { kind: "wake", query: query || null, mac: null, ip: null } };
|
|
||||||
}
|
|
||||||
|
|
||||||
async function runCommand(evt) {
|
|
||||||
evt.preventDefault();
|
|
||||||
const agentId = $("agent-id").value.trim();
|
|
||||||
const kind = $("command-kind").value;
|
|
||||||
const query = $("command-query").value.trim();
|
|
||||||
if (!agentId) return;
|
|
||||||
|
|
||||||
const payload = buildCommandPayload(kind, query);
|
|
||||||
const out = $("command-result");
|
|
||||||
out.textContent = "Running...";
|
|
||||||
try {
|
|
||||||
const result = await api(`/api/v1/control/agents/${encodeURIComponent(agentId)}/command`, {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
});
|
|
||||||
out.textContent = JSON.stringify(result, null, 2);
|
|
||||||
setStatus("ok", "Command OK");
|
|
||||||
await loadAudit();
|
|
||||||
} catch (err) {
|
|
||||||
out.textContent = String(err);
|
|
||||||
setStatus("bad", "Command Failed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function bootstrap() {
|
|
||||||
try {
|
|
||||||
setStatus("warn", "Loading");
|
|
||||||
await Promise.all([loadAgents(), loadAlerts(), loadAudit()]);
|
|
||||||
setStatus("ok", "Ready");
|
|
||||||
} catch (err) {
|
|
||||||
setStatus("bad", "API Error");
|
|
||||||
$("audit").textContent = String(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$("refresh-agents").onclick = () => loadAgents().catch((e) => { setStatus("bad", "Agent Error"); console.error(e); });
|
|
||||||
$("refresh-alerts").onclick = () => loadAlerts().catch((e) => { setStatus("bad", "Alerts Error"); console.error(e); });
|
|
||||||
$("refresh-audit").onclick = () => loadAudit().catch((e) => { setStatus("bad", "Audit Error"); console.error(e); });
|
|
||||||
$("command-form").onsubmit = runCommand;
|
|
||||||
|
|
||||||
bootstrap();
|
|
||||||
+5
-56
@@ -1,63 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Wakey Control UI</title>
|
<title>Wakey Operator UI</title>
|
||||||
<link rel="stylesheet" href="/ui/styles.css" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="topbar">
|
<div id="root"></div>
|
||||||
<h1>Wakey Control UI</h1>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
<div id="status-pill" class="pill">Loading</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="layout">
|
|
||||||
<section class="panel">
|
|
||||||
<h2>Agents</h2>
|
|
||||||
<button id="refresh-agents" class="btn">Refresh</button>
|
|
||||||
<div id="agents" class="list"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel">
|
|
||||||
<h2>Command Runner</h2>
|
|
||||||
<form id="command-form" class="stack">
|
|
||||||
<label>
|
|
||||||
Agent ID
|
|
||||||
<input id="agent-id" name="agent_id" type="text" required />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Command
|
|
||||||
<select id="command-kind" name="kind">
|
|
||||||
<option value="devs">devs</option>
|
|
||||||
<option value="status">status</option>
|
|
||||||
<option value="leases">leases</option>
|
|
||||||
<option value="inventory">inventory</option>
|
|
||||||
<option value="wake">wake</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Query (status/inventory/wake)
|
|
||||||
<input id="command-query" name="query" type="text" />
|
|
||||||
</label>
|
|
||||||
<button class="btn" type="submit">Run</button>
|
|
||||||
</form>
|
|
||||||
<pre id="command-result" class="code"></pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel">
|
|
||||||
<h2>Active Alerts</h2>
|
|
||||||
<button id="refresh-alerts" class="btn">Refresh</button>
|
|
||||||
<div id="alerts" class="list"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel wide">
|
|
||||||
<h2>Recent Audit Events</h2>
|
|
||||||
<button id="refresh-audit" class="btn">Refresh</button>
|
|
||||||
<pre id="audit" class="code"></pre>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="/ui/app.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "wakey-operator-ui",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"typecheck": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.3.11",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.3.1",
|
||||||
|
"typescript": "^5.6.3",
|
||||||
|
"vite": "^5.4.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
Generated
+1069
File diff suppressed because it is too large
Load Diff
+178
@@ -0,0 +1,178 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import {
|
||||||
|
type Agent,
|
||||||
|
type Alert,
|
||||||
|
type AlertTransition,
|
||||||
|
type AuditEvent,
|
||||||
|
type CommandKind,
|
||||||
|
fetchAgents,
|
||||||
|
fetchAlerts,
|
||||||
|
fetchAlertHistory,
|
||||||
|
fetchAudit,
|
||||||
|
runCommand,
|
||||||
|
} from "./api";
|
||||||
|
|
||||||
|
type LoadState = "idle" | "loading" | "ready" | "error";
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
const [agents, setAgents] = useState<Agent[]>([]);
|
||||||
|
const [alerts, setAlerts] = useState<Alert[]>([]);
|
||||||
|
const [history, setHistory] = useState<AlertTransition[]>([]);
|
||||||
|
const [audit, setAudit] = useState<AuditEvent[]>([]);
|
||||||
|
|
||||||
|
const [agentId, setAgentId] = useState("");
|
||||||
|
const [kind, setKind] = useState<CommandKind>("devs");
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [commandOut, setCommandOut] = useState("Select agent and run a command");
|
||||||
|
|
||||||
|
const [state, setState] = useState<LoadState>("idle");
|
||||||
|
const [error, setError] = useState<string>("");
|
||||||
|
|
||||||
|
const connectedCount = useMemo(() => agents.filter((a) => a.connected).length, [agents]);
|
||||||
|
|
||||||
|
async function loadAll() {
|
||||||
|
setState("loading");
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const [a, al, h, au] = await Promise.all([
|
||||||
|
fetchAgents(),
|
||||||
|
fetchAlerts(),
|
||||||
|
fetchAlertHistory(20),
|
||||||
|
fetchAudit(30),
|
||||||
|
]);
|
||||||
|
setAgents(a);
|
||||||
|
setAlerts(al);
|
||||||
|
setHistory(h);
|
||||||
|
setAudit(au);
|
||||||
|
if (!agentId && a[0]) setAgentId(a[0].agent_id);
|
||||||
|
setState("ready");
|
||||||
|
} catch (err) {
|
||||||
|
setState("error");
|
||||||
|
setError(String(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void loadAll();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const wsUrl = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/api/v1/control/alerts/ws`;
|
||||||
|
const ws = new WebSocket(wsUrl);
|
||||||
|
ws.onmessage = (evt) => {
|
||||||
|
try {
|
||||||
|
const payload = JSON.parse(String(evt.data)) as {
|
||||||
|
alerts?: Alert[];
|
||||||
|
recent_transitions?: AlertTransition[];
|
||||||
|
};
|
||||||
|
if (payload.alerts) setAlerts(payload.alerts);
|
||||||
|
if (payload.recent_transitions) setHistory(payload.recent_transitions);
|
||||||
|
} catch {
|
||||||
|
// Keep stream parse failures isolated from primary UI state.
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ws.onerror = () => {
|
||||||
|
// Poll fallback while stream is down.
|
||||||
|
const id = window.setInterval(() => {
|
||||||
|
void fetchAlerts().then(setAlerts).catch(() => undefined);
|
||||||
|
}, 8000);
|
||||||
|
ws.onclose = () => window.clearInterval(id);
|
||||||
|
};
|
||||||
|
return () => ws.close();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function onRunCommand(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!agentId) return;
|
||||||
|
|
||||||
|
setCommandOut("Running...");
|
||||||
|
try {
|
||||||
|
const out = await runCommand(agentId, kind, query.trim());
|
||||||
|
setCommandOut(JSON.stringify(out, null, 2));
|
||||||
|
const au = await fetchAudit(30);
|
||||||
|
setAudit(au);
|
||||||
|
} catch (err) {
|
||||||
|
setCommandOut(String(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app">
|
||||||
|
<header className="topbar">
|
||||||
|
<div>
|
||||||
|
<h1>Wakey Operator UI</h1>
|
||||||
|
<p>Fast ops surface for agents, commands, audits, and alerts</p>
|
||||||
|
</div>
|
||||||
|
<div className={`pill ${state}`}>
|
||||||
|
{state === "ready" ? "Ready" : state === "loading" ? "Loading" : state === "error" ? "Error" : "Idle"}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{error && <pre className="error">{error}</pre>}
|
||||||
|
|
||||||
|
<section className="stats">
|
||||||
|
<div className="card stat"><h3>Agents</h3><strong>{agents.length}</strong></div>
|
||||||
|
<div className="card stat"><h3>Connected</h3><strong>{connectedCount}</strong></div>
|
||||||
|
<div className="card stat"><h3>Active Alerts</h3><strong>{alerts.length}</strong></div>
|
||||||
|
<div className="card stat"><h3>Transitions</h3><strong>{history.length}</strong></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<main className="grid">
|
||||||
|
<section className="card">
|
||||||
|
<div className="row-head"><h2>Agents</h2><button onClick={() => void loadAll()}>Refresh</button></div>
|
||||||
|
<div className="list">
|
||||||
|
{agents.map((a) => (
|
||||||
|
<button key={a.agent_id} className={`row ${agentId === a.agent_id ? "selected" : ""}`} onClick={() => setAgentId(a.agent_id)}>
|
||||||
|
<span>{a.agent_id}</span>
|
||||||
|
<span>{a.connected ? "connected" : "offline"}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{!agents.length && <div className="empty">No agents found</div>}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="card">
|
||||||
|
<h2>Command Runner</h2>
|
||||||
|
<form className="form" onSubmit={onRunCommand}>
|
||||||
|
<label>Agent ID<input value={agentId} onChange={(e) => setAgentId(e.target.value)} required /></label>
|
||||||
|
<label>Command
|
||||||
|
<select value={kind} onChange={(e) => setKind(e.target.value as CommandKind)}>
|
||||||
|
<option value="devs">devs</option>
|
||||||
|
<option value="status">status</option>
|
||||||
|
<option value="leases">leases</option>
|
||||||
|
<option value="inventory">inventory</option>
|
||||||
|
<option value="wake">wake</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>Query<input value={query} onChange={(e) => setQuery(e.target.value)} /></label>
|
||||||
|
<button type="submit">Run command</button>
|
||||||
|
</form>
|
||||||
|
<pre className="output">{commandOut}</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="card">
|
||||||
|
<div className="row-head"><h2>Active Alerts</h2><button onClick={() => void fetchAlerts().then(setAlerts)}>Refresh</button></div>
|
||||||
|
<div className="list">
|
||||||
|
{alerts.map((a) => (
|
||||||
|
<div key={a.alert_id} className="row plain">
|
||||||
|
<span>{a.kind}{a.agent_id ? ` (${a.agent_id})` : ""}</span>
|
||||||
|
<span>{a.severity}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{!alerts.length && <div className="empty">No active alerts</div>}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="card">
|
||||||
|
<h2>Alert Transitions</h2>
|
||||||
|
<pre className="output small">{JSON.stringify(history, null, 2)}</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="card span-2">
|
||||||
|
<div className="row-head"><h2>Recent Audit</h2><button onClick={() => void fetchAudit(30).then(setAudit)}>Refresh</button></div>
|
||||||
|
<pre className="output">{JSON.stringify(audit, null, 2)}</pre>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+131
@@ -0,0 +1,131 @@
|
|||||||
|
export type Agent = { agent_id: string; connected: boolean };
|
||||||
|
|
||||||
|
export type Alert = {
|
||||||
|
alert_id: string;
|
||||||
|
kind: string;
|
||||||
|
severity: string;
|
||||||
|
status: string;
|
||||||
|
agent_id: string | null;
|
||||||
|
message: string;
|
||||||
|
value: number;
|
||||||
|
threshold: number;
|
||||||
|
last_seen_unix: number;
|
||||||
|
metadata: Record<string, unknown>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AlertTransition = {
|
||||||
|
transition_id: string;
|
||||||
|
ts_unix: number;
|
||||||
|
alert_id: string;
|
||||||
|
kind: string;
|
||||||
|
agent_id: string | null;
|
||||||
|
from_status: string | null;
|
||||||
|
to_status: string;
|
||||||
|
message: string;
|
||||||
|
metadata: Record<string, unknown>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AuditEvent = {
|
||||||
|
event_id: string;
|
||||||
|
ts_unix: number;
|
||||||
|
actor_type: string;
|
||||||
|
actor_id: string | null;
|
||||||
|
agent_id: string | null;
|
||||||
|
request_id: string | null;
|
||||||
|
event_type: string;
|
||||||
|
outcome: string;
|
||||||
|
latency_ms: number | null;
|
||||||
|
message: string;
|
||||||
|
metadata: Record<string, unknown>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CommandKind = "status" | "devs" | "leases" | "inventory" | "wake";
|
||||||
|
|
||||||
|
async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||||
|
const res = await fetch(path, {
|
||||||
|
...init,
|
||||||
|
headers: {
|
||||||
|
"content-type": "application/json",
|
||||||
|
...(init?.headers || {}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
let detail = "";
|
||||||
|
try {
|
||||||
|
detail = JSON.stringify(await res.json(), null, 2);
|
||||||
|
} catch {
|
||||||
|
detail = await res.text();
|
||||||
|
}
|
||||||
|
throw new Error(`${res.status} ${res.statusText}\n${detail}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.json() as Promise<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchAgents(): Promise<Agent[]> {
|
||||||
|
return request<Agent[]>("/api/v1/control/agents");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchAlerts(): Promise<Alert[]> {
|
||||||
|
return request<Alert[]>("/api/v1/control/alerts");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchAlertHistory(limit = 50): Promise<AlertTransition[]> {
|
||||||
|
return request<AlertTransition[]>(`/api/v1/control/alerts/history?limit=${limit}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchAudit(limit = 50): Promise<AuditEvent[]> {
|
||||||
|
return request<AuditEvent[]>(`/api/v1/control/audit/events?limit=${limit}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function runCommand(agentId: string, kind: CommandKind, query: string): Promise<unknown> {
|
||||||
|
const payload = buildCommandPayload(kind, query);
|
||||||
|
return request(`/api/v1/control/agents/${encodeURIComponent(agentId)}/command`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildCommandPayload(kind: CommandKind, query: string): { command: Record<string, unknown> } {
|
||||||
|
if (kind === "devs") {
|
||||||
|
return { command: { kind: "devs", dev: null, up_only: false } };
|
||||||
|
}
|
||||||
|
if (kind === "status") {
|
||||||
|
return {
|
||||||
|
command: {
|
||||||
|
kind: "status",
|
||||||
|
query: query || null,
|
||||||
|
name: null,
|
||||||
|
ips: [],
|
||||||
|
devs: [],
|
||||||
|
nuds: [],
|
||||||
|
macs: [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (kind === "leases") {
|
||||||
|
return { command: { kind: "leases", include_state: true } };
|
||||||
|
}
|
||||||
|
if (kind === "inventory") {
|
||||||
|
return {
|
||||||
|
command: {
|
||||||
|
kind: "inventory",
|
||||||
|
query: query || null,
|
||||||
|
name: null,
|
||||||
|
ips: [],
|
||||||
|
devs: [],
|
||||||
|
nuds: [],
|
||||||
|
macs: [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
command: {
|
||||||
|
kind: "wake",
|
||||||
|
query: query || null,
|
||||||
|
mac: null,
|
||||||
|
ip: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import { App } from "./App";
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0a111f;
|
||||||
|
--card: #111a2d;
|
||||||
|
--line: #2c3b57;
|
||||||
|
--text: #e7edf7;
|
||||||
|
--muted: #9bb0d1;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text);
|
||||||
|
background: radial-gradient(circle at 20% 10%, #1a2741 0%, var(--bg) 45%);
|
||||||
|
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app { padding: 1rem; }
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.topbar h1 { margin: 0; }
|
||||||
|
.topbar p { margin: 0.35rem 0 0; color: var(--muted); }
|
||||||
|
|
||||||
|
.pill {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.35rem 0.7rem;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
.pill.ready { color: #86efac; border-color: #14532d; }
|
||||||
|
.pill.loading { color: #fde68a; border-color: #713f12; }
|
||||||
|
.pill.error { color: #fca5a5; border-color: #7f1d1d; }
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.8rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.stat h3 { margin: 0; color: var(--muted); font-weight: 500; }
|
||||||
|
.stat strong { font-size: 1.5rem; }
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.8rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: linear-gradient(180deg, rgba(17,26,45,0.92), rgba(17,26,45,0.72));
|
||||||
|
padding: 0.8rem;
|
||||||
|
}
|
||||||
|
.span-2 { grid-column: 1 / -1; }
|
||||||
|
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
|
||||||
|
|
||||||
|
button, input, select {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: #0b1528;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
button { padding: 0.45rem 0.65rem; cursor: pointer; }
|
||||||
|
button:hover { border-color: #6b84ad; }
|
||||||
|
input, select { width: 100%; padding: 0.45rem 0.55rem; }
|
||||||
|
|
||||||
|
.form { display: grid; gap: 0.65rem; }
|
||||||
|
.form label { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.9rem; }
|
||||||
|
|
||||||
|
.list { display: grid; gap: 0.4rem; margin-top: 0.55rem; }
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: #0b1528;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.45rem 0.55rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.row.selected { border-color: #6b84ad; }
|
||||||
|
.row.plain { cursor: default; }
|
||||||
|
.empty { color: var(--muted); padding: 0.35rem 0.2rem; }
|
||||||
|
|
||||||
|
.output {
|
||||||
|
margin: 0.65rem 0 0;
|
||||||
|
background: #020814;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.7rem;
|
||||||
|
max-height: 360px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 0.84rem;
|
||||||
|
}
|
||||||
|
.output.small { max-height: 230px; }
|
||||||
|
.error {
|
||||||
|
border: 1px solid #7f1d1d;
|
||||||
|
background: rgba(127, 29, 29, 0.2);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.7rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
-100
@@ -1,100 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg: #0f172a;
|
|
||||||
--card: #111827;
|
|
||||||
--line: #334155;
|
|
||||||
--text: #e5e7eb;
|
|
||||||
--muted: #94a3b8;
|
|
||||||
--ok: #16a34a;
|
|
||||||
--warn: #d97706;
|
|
||||||
--bad: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
|
|
||||||
background: radial-gradient(circle at 15% 15%, #1f2937 0%, var(--bg) 45%);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.topbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
border-bottom: 1px solid var(--line);
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
background: rgba(15, 23, 42, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background: linear-gradient(180deg, rgba(17,24,39,0.95), rgba(17,24,39,0.7));
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel.wide { grid-column: 1 / -1; }
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
background: #1e293b;
|
|
||||||
color: var(--text);
|
|
||||||
padding: 0.45rem 0.7rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover { border-color: #64748b; }
|
|
||||||
|
|
||||||
.stack { display: grid; gap: 0.7rem; }
|
|
||||||
label { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
|
|
||||||
input, select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.45rem 0.55rem;
|
|
||||||
color: var(--text);
|
|
||||||
background: #0b1220;
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list { display: grid; gap: 0.4rem; margin-top: 0.7rem; }
|
|
||||||
.item {
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 0.45rem 0.6rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
margin-top: 0.7rem;
|
|
||||||
background: #020617;
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 0.7rem;
|
|
||||||
min-height: 120px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill {
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 0.2rem 0.6rem;
|
|
||||||
font-size: 0.82rem;
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
color: var(--muted);
|
|
||||||
}
|
|
||||||
.pill.ok { color: #86efac; border-color: #14532d; }
|
|
||||||
.pill.warn { color: #fcd34d; border-color: #78350f; }
|
|
||||||
.pill.bad { color: #fca5a5; border-color: #7f1d1d; }
|
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
base: "/ui/",
|
||||||
|
});
|
||||||
@@ -11,6 +11,7 @@ use tokio::net::TcpListener;
|
|||||||
use tokio::sync::{Mutex, RwLock, mpsc, oneshot};
|
use tokio::sync::{Mutex, RwLock, mpsc, oneshot};
|
||||||
use tokio::time::MissedTickBehavior;
|
use tokio::time::MissedTickBehavior;
|
||||||
use tower_http::services::ServeDir;
|
use tower_http::services::ServeDir;
|
||||||
|
use tower_http::services::ServeFile;
|
||||||
use tracing::{info, warn};
|
use tracing::{info, warn};
|
||||||
use wakey_agent::protocol::{ErrorPayload, ServerMessage};
|
use wakey_agent::protocol::{ErrorPayload, ServerMessage};
|
||||||
|
|
||||||
@@ -46,7 +47,12 @@ pub enum AgentReply {
|
|||||||
fn public_api_routes() -> Router<AppState> {
|
fn public_api_routes() -> Router<AppState> {
|
||||||
Router::new()
|
Router::new()
|
||||||
.route("/ui", get(|| async { Redirect::temporary("/ui/") }))
|
.route("/ui", get(|| async { Redirect::temporary("/ui/") }))
|
||||||
.nest_service("/ui/", get_service(ServeDir::new("ui")))
|
.nest_service(
|
||||||
|
"/ui/",
|
||||||
|
get_service(
|
||||||
|
ServeDir::new("ui/dist").not_found_service(ServeFile::new("ui/dist/index.html")),
|
||||||
|
),
|
||||||
|
)
|
||||||
.route("/healthz", get(api::healthz))
|
.route("/healthz", get(api::healthz))
|
||||||
.route("/api/v1/agents/enroll", post(api::enroll))
|
.route("/api/v1/agents/enroll", post(api::enroll))
|
||||||
.route("/api/v1/agent/ws", get(ws::agent_ws))
|
.route("/api/v1/agent/ws", get(ws::agent_ws))
|
||||||
|
|||||||
Reference in New Issue
Block a user