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)
|
||||
|
||||
Control-plane now serves a minimal operator shell at `/ui/` for immediate
|
||||
workflow testing (agents, command runner, alerts, and recent audits).
|
||||
Control-plane serves the built Operator UI at `/ui/` from `ui/dist`.
|
||||
|
||||
This UI is intentionally lightweight and is the starting point for the richer
|
||||
Operator UI v1 plan.
|
||||
Build UI assets before starting control-plane:
|
||||
|
||||
```sh
|
||||
cd ui
|
||||
pnpm install
|
||||
pnpm build
|
||||
```
|
||||
|
||||
Then start control-plane and open `/ui/` on the same host/port.
|
||||
|
||||
## 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();
|
||||
+9
-60
@@ -1,63 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Wakey Control UI</title>
|
||||
<link rel="stylesheet" href="/ui/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<h1>Wakey Control UI</h1>
|
||||
<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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Wakey Operator UI</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</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::time::MissedTickBehavior;
|
||||
use tower_http::services::ServeDir;
|
||||
use tower_http::services::ServeFile;
|
||||
use tracing::{info, warn};
|
||||
use wakey_agent::protocol::{ErrorPayload, ServerMessage};
|
||||
|
||||
@@ -46,7 +47,12 @@ pub enum AgentReply {
|
||||
fn public_api_routes() -> Router<AppState> {
|
||||
Router::new()
|
||||
.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("/api/v1/agents/enroll", post(api::enroll))
|
||||
.route("/api/v1/agent/ws", get(ws::agent_ws))
|
||||
|
||||
Reference in New Issue
Block a user