now that is some stuff
This commit is contained in:
+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;
|
||||
}
|
||||
Reference in New Issue
Block a user