feat(web): Orchestrator page + SSE hook + AUTOMATION nav group
New /orchestrator route. Paginated read-only event list with kind
filter (all|traffic|file), pause-stream toggle, in-window failure
badge ('X failures / 1h'), and an SSE-driven 'live' status pill.
Streamed rows prepend on top up to a 500-row in-memory cap.
Sidebar gains an AUTOMATION nav group; Orchestrator is the first
child. Future workers (mutator/prober activity) plug in as siblings.
This commit is contained in:
@@ -23,6 +23,7 @@ const Identities = lazy(() => import('./components/Identities'));
|
|||||||
const IdentityDetail = lazy(() => import('./components/IdentityDetail'));
|
const IdentityDetail = lazy(() => import('./components/IdentityDetail'));
|
||||||
const Campaigns = lazy(() => import('./components/Campaigns'));
|
const Campaigns = lazy(() => import('./components/Campaigns'));
|
||||||
const CampaignDetail = lazy(() => import('./components/CampaignDetail'));
|
const CampaignDetail = lazy(() => import('./components/CampaignDetail'));
|
||||||
|
const Orchestrator = lazy(() => import('./components/Orchestrator'));
|
||||||
const Config = lazy(() => import('./components/Config'));
|
const Config = lazy(() => import('./components/Config'));
|
||||||
const Bounty = lazy(() => import('./components/Bounty'));
|
const Bounty = lazy(() => import('./components/Bounty'));
|
||||||
const Credentials = lazy(() => import('./components/Credentials'));
|
const Credentials = lazy(() => import('./components/Credentials'));
|
||||||
@@ -121,6 +122,7 @@ const AuthedShell: React.FC<AuthedShellProps> = ({ onLogout, onSearch, searchQue
|
|||||||
<Route path="/identities/:id" element={<IdentityDetail />} />
|
<Route path="/identities/:id" element={<IdentityDetail />} />
|
||||||
<Route path="/campaigns" element={<Campaigns />} />
|
<Route path="/campaigns" element={<Campaigns />} />
|
||||||
<Route path="/campaigns/:id" element={<CampaignDetail />} />
|
<Route path="/campaigns/:id" element={<CampaignDetail />} />
|
||||||
|
<Route path="/orchestrator" element={<Orchestrator />} />
|
||||||
<Route path="/config" element={<Config />} />
|
<Route path="/config" element={<Config />} />
|
||||||
<Route path="/swarm-updates" element={<RemoteUpdates />} />
|
<Route path="/swarm-updates" element={<RemoteUpdates />} />
|
||||||
<Route path="/swarm/hosts" element={<SwarmHosts />} />
|
<Route path="/swarm/hosts" element={<SwarmHosts />} />
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { NavLink, useLocation } from 'react-router-dom';
|
|||||||
import {
|
import {
|
||||||
Menu, X, Search, Activity, LayoutDashboard, Terminal, Settings, LogOut,
|
Menu, X, Search, Activity, LayoutDashboard, Terminal, Settings, LogOut,
|
||||||
Server, Archive, Package, Network, ChevronDown, ChevronRight, HardDrive,
|
Server, Archive, Package, Network, ChevronDown, ChevronRight, HardDrive,
|
||||||
ShieldAlert, Bell, Webhook, Lock, Crosshair, Fingerprint,
|
ShieldAlert, Bell, Webhook, Lock, Crosshair, Fingerprint, Zap, Cpu,
|
||||||
} from '../icons';
|
} from '../icons';
|
||||||
import { prefetchRoute } from '../routePrefetch';
|
import { prefetchRoute } from '../routePrefetch';
|
||||||
import './Layout.css';
|
import './Layout.css';
|
||||||
@@ -33,6 +33,7 @@ const ROUTE_LABELS: Record<string, string> = {
|
|||||||
'/attackers': 'ATTACKERS',
|
'/attackers': 'ATTACKERS',
|
||||||
'/identities': 'IDENTITIES',
|
'/identities': 'IDENTITIES',
|
||||||
'/campaigns': 'CAMPAIGNS',
|
'/campaigns': 'CAMPAIGNS',
|
||||||
|
'/orchestrator': 'ORCHESTRATOR',
|
||||||
'/config': 'CONFIG',
|
'/config': 'CONFIG',
|
||||||
'/swarm-updates': 'REMOTE UPDATES',
|
'/swarm-updates': 'REMOTE UPDATES',
|
||||||
'/swarm/hosts': 'SWARM HOSTS',
|
'/swarm/hosts': 'SWARM HOSTS',
|
||||||
@@ -133,6 +134,9 @@ const Layout: React.FC<LayoutProps> = ({
|
|||||||
<NavItem to="/identities" icon={<Fingerprint size={18} />} label="Identities" open={sidebarOpen} indent />
|
<NavItem to="/identities" icon={<Fingerprint size={18} />} label="Identities" open={sidebarOpen} indent />
|
||||||
<NavItem to="/campaigns" icon={<Crosshair size={18} />} label="Campaigns" open={sidebarOpen} indent />
|
<NavItem to="/campaigns" icon={<Crosshair size={18} />} label="Campaigns" open={sidebarOpen} indent />
|
||||||
</NavGroup>
|
</NavGroup>
|
||||||
|
<NavGroup label="AUTOMATION" icon={<Zap size={20} />} open={sidebarOpen}>
|
||||||
|
<NavItem to="/orchestrator" icon={<Cpu size={18} />} label="Orchestrator" open={sidebarOpen} indent />
|
||||||
|
</NavGroup>
|
||||||
<NavGroup label="SWARM" icon={<Network size={20} />} open={sidebarOpen}>
|
<NavGroup label="SWARM" icon={<Network size={20} />} open={sidebarOpen}>
|
||||||
<NavItem to="/swarm/hosts" icon={<HardDrive size={18} />} label="SWARM Hosts" open={sidebarOpen} indent />
|
<NavItem to="/swarm/hosts" icon={<HardDrive size={18} />} label="SWARM Hosts" open={sidebarOpen} indent />
|
||||||
<NavItem to="/swarm-updates" icon={<Package size={18} />} label="Remote Updates" open={sidebarOpen} indent />
|
<NavItem to="/swarm-updates" icon={<Package size={18} />} label="Remote Updates" open={sidebarOpen} indent />
|
||||||
|
|||||||
238
decnet_web/src/components/Orchestrator.tsx
Normal file
238
decnet_web/src/components/Orchestrator.tsx
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
ChevronLeft, ChevronRight, Filter, Cpu, AlertTriangle,
|
||||||
|
} from '../icons';
|
||||||
|
import api from '../utils/api';
|
||||||
|
import EmptyState from './EmptyState/EmptyState';
|
||||||
|
import { useOrchestratorStream, type OrchestratorStreamEvent } from './useOrchestratorStream';
|
||||||
|
import './Dashboard.css';
|
||||||
|
|
||||||
|
interface OrchestratorEntry {
|
||||||
|
uuid: string;
|
||||||
|
ts: string;
|
||||||
|
kind: 'traffic' | 'file' | string;
|
||||||
|
protocol: string;
|
||||||
|
action: string;
|
||||||
|
src_decky_uuid: string | null;
|
||||||
|
dst_decky_uuid: string;
|
||||||
|
success: boolean;
|
||||||
|
payload: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type KindFilter = 'all' | 'traffic' | 'file';
|
||||||
|
type StreamStatus = 'connecting' | 'live' | 'error';
|
||||||
|
|
||||||
|
const ROW_CAP = 500;
|
||||||
|
const HOUR_MS = 60 * 60 * 1000;
|
||||||
|
|
||||||
|
const timeAgo = (dateStr: string | null): string => {
|
||||||
|
if (!dateStr) return '—';
|
||||||
|
const diff = Date.now() - new Date(dateStr).getTime();
|
||||||
|
const secs = Math.floor(diff / 1000);
|
||||||
|
if (secs < 60) return `${secs}s ago`;
|
||||||
|
const mins = Math.floor(secs / 60);
|
||||||
|
if (mins < 60) return `${mins}m ago`;
|
||||||
|
const hrs = Math.floor(mins / 60);
|
||||||
|
if (hrs < 24) return `${hrs}h ago`;
|
||||||
|
return `${Math.floor(hrs / 24)}d ago`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Orchestrator: React.FC = () => {
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
const page = parseInt(searchParams.get('page') || '1');
|
||||||
|
const kindParam = (searchParams.get('kind') || 'all') as KindFilter;
|
||||||
|
|
||||||
|
const [rows, setRows] = useState<OrchestratorEntry[]>([]);
|
||||||
|
const [streamRows, setStreamRows] = useState<OrchestratorEntry[]>([]);
|
||||||
|
const [total, setTotal] = useState(0);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [status, setStatus] = useState<StreamStatus>('connecting');
|
||||||
|
const [paused, setPaused] = useState(false);
|
||||||
|
|
||||||
|
const limit = 50;
|
||||||
|
const pausedRef = useRef(paused);
|
||||||
|
useEffect(() => { pausedRef.current = paused; }, [paused]);
|
||||||
|
|
||||||
|
const fetchEvents = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const offset = (page - 1) * limit;
|
||||||
|
const kindQ = kindParam !== 'all' ? `&kind=${kindParam}` : '';
|
||||||
|
const res = await api.get(`/orchestrator/events?limit=${limit}&offset=${offset}${kindQ}`);
|
||||||
|
setRows(res.data.data ?? []);
|
||||||
|
setTotal(res.data.total ?? 0);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch orchestrator events', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => { fetchEvents(); }, [page, kindParam]);
|
||||||
|
|
||||||
|
useOrchestratorStream({
|
||||||
|
enabled: true,
|
||||||
|
onStatus: setStatus,
|
||||||
|
onEvent: (ev: OrchestratorStreamEvent) => {
|
||||||
|
if (pausedRef.current) return;
|
||||||
|
if (ev.name === 'snapshot') return;
|
||||||
|
if (ev.name !== 'traffic' && ev.name !== 'file') return;
|
||||||
|
const p = ev.payload as Partial<OrchestratorEntry>;
|
||||||
|
const row: OrchestratorEntry = {
|
||||||
|
uuid: `live-${ev.ts ?? Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||||
|
ts: ev.ts ?? new Date().toISOString(),
|
||||||
|
kind: (p.kind ?? ev.name) as OrchestratorEntry['kind'],
|
||||||
|
protocol: p.protocol ?? '?',
|
||||||
|
action: p.action ?? '',
|
||||||
|
src_decky_uuid: p.src_decky_uuid ?? null,
|
||||||
|
dst_decky_uuid: p.dst_decky_uuid ?? '',
|
||||||
|
success: Boolean(p.success),
|
||||||
|
payload: typeof p.payload === 'string' ? p.payload : JSON.stringify(p.payload ?? {}),
|
||||||
|
};
|
||||||
|
setStreamRows((prev) => [row, ...prev].slice(0, ROW_CAP));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const setPage = (p: number) =>
|
||||||
|
setSearchParams({ kind: kindParam, page: p.toString() });
|
||||||
|
const setKind = (k: KindFilter) =>
|
||||||
|
setSearchParams({ kind: k, page: '1' });
|
||||||
|
|
||||||
|
const totalPages = Math.max(1, Math.ceil(total / limit));
|
||||||
|
|
||||||
|
const visible = useMemo(() => {
|
||||||
|
const merged = [...streamRows, ...rows];
|
||||||
|
if (kindParam === 'all') return merged;
|
||||||
|
return merged.filter((r) => r.kind === kindParam);
|
||||||
|
}, [streamRows, rows, kindParam]);
|
||||||
|
|
||||||
|
const failuresLastHour = useMemo(() => {
|
||||||
|
const cutoff = Date.now() - HOUR_MS;
|
||||||
|
return [...streamRows, ...rows].filter(
|
||||||
|
(r) => !r.success && new Date(r.ts).getTime() >= cutoff,
|
||||||
|
).length;
|
||||||
|
}, [streamRows, rows]);
|
||||||
|
|
||||||
|
const statusPill = (
|
||||||
|
<span className={`chip ${status === 'live' ? 'success-chip' : 'dim-chip'}`}>
|
||||||
|
{status === 'live' ? '● LIVE' : status === 'connecting' ? '● CONNECTING' : '● OFFLINE'}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bounty-root">
|
||||||
|
<div className="page-header">
|
||||||
|
<div className="page-title-group">
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
|
<Cpu size={22} className="violet-accent" />
|
||||||
|
<h1>ORCHESTRATOR</h1>
|
||||||
|
{statusPill}
|
||||||
|
{failuresLastHour > 0 && (
|
||||||
|
<span className="chip" style={{ background: 'rgba(220,60,60,0.18)', color: '#ff6e6e' }}>
|
||||||
|
<AlertTriangle size={12} /> {failuresLastHour} FAILURES / 1h
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="page-sub">
|
||||||
|
{total.toLocaleString()} EVENTS · LIFE-INJECTION ACTIVITY
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="controls-row" style={{ gap: 8 }}>
|
||||||
|
<button
|
||||||
|
className={`chip ${kindParam === 'all' ? 'success-chip' : 'dim-chip'}`}
|
||||||
|
onClick={() => setKind('all')}
|
||||||
|
>ALL</button>
|
||||||
|
<button
|
||||||
|
className={`chip ${kindParam === 'traffic' ? 'success-chip' : 'dim-chip'}`}
|
||||||
|
onClick={() => setKind('traffic')}
|
||||||
|
>TRAFFIC</button>
|
||||||
|
<button
|
||||||
|
className={`chip ${kindParam === 'file' ? 'success-chip' : 'dim-chip'}`}
|
||||||
|
onClick={() => setKind('file')}
|
||||||
|
>FILE</button>
|
||||||
|
<span style={{ flex: 1 }} />
|
||||||
|
<button
|
||||||
|
className={`chip ${paused ? 'dim-chip' : 'success-chip'}`}
|
||||||
|
onClick={() => setPaused((v) => !v)}
|
||||||
|
>{paused ? '▶ RESUME' : '⏸ PAUSE'}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="logs-section">
|
||||||
|
<div className="section-header">
|
||||||
|
<div className="section-title">
|
||||||
|
<Filter size={14} />
|
||||||
|
<span>{visible.length.toLocaleString()} EVENTS SHOWN</span>
|
||||||
|
</div>
|
||||||
|
<div className="section-actions">
|
||||||
|
<div className="pager">
|
||||||
|
<span className="dim">Page {page} of {totalPages}</span>
|
||||||
|
<button disabled={page <= 1} onClick={() => setPage(page - 1)} aria-label="Previous page">
|
||||||
|
<ChevronLeft size={14} />
|
||||||
|
</button>
|
||||||
|
<button disabled={page >= totalPages} onClick={() => setPage(page + 1)} aria-label="Next page">
|
||||||
|
<ChevronRight size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="logs-table-container">
|
||||||
|
<table className="logs-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>TS</th>
|
||||||
|
<th>KIND</th>
|
||||||
|
<th>ACTION</th>
|
||||||
|
<th>SRC → DST</th>
|
||||||
|
<th>OK</th>
|
||||||
|
<th>PAYLOAD</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{visible.length > 0 ? visible.map((r) => (
|
||||||
|
<tr
|
||||||
|
key={r.uuid}
|
||||||
|
style={!r.success ? { background: 'rgba(220,60,60,0.06)' } : undefined}
|
||||||
|
>
|
||||||
|
<td className="dim">{timeAgo(r.ts)}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`chip ${r.kind === 'traffic' ? 'success-chip' : 'dim-chip'}`}>
|
||||||
|
{r.kind.toUpperCase()}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="matrix-text" style={{ fontFamily: 'var(--font-mono)' }}>
|
||||||
|
{r.action}
|
||||||
|
</td>
|
||||||
|
<td className="dim" style={{ fontFamily: 'var(--font-mono)' }}>
|
||||||
|
{r.src_decky_uuid ? `${r.src_decky_uuid.slice(0, 8)}…` : '—'}
|
||||||
|
{' → '}
|
||||||
|
{r.dst_decky_uuid ? `${r.dst_decky_uuid.slice(0, 8)}…` : '—'}
|
||||||
|
</td>
|
||||||
|
<td>{r.success ? '✓' : '✗'}</td>
|
||||||
|
<td className="dim" style={{ fontFamily: 'var(--font-mono)', maxWidth: 360, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||||
|
{r.payload}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={6}>
|
||||||
|
<EmptyState
|
||||||
|
icon={Cpu}
|
||||||
|
title={loading ? 'LOADING…' : 'NO ORCHESTRATOR ACTIVITY YET'}
|
||||||
|
hint={loading ? undefined : 'start the worker with `decnet orchestrate`'}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Orchestrator;
|
||||||
88
decnet_web/src/components/useOrchestratorStream.ts
Normal file
88
decnet_web/src/components/useOrchestratorStream.ts
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
/**
|
||||||
|
* Orchestrator event stream — opens an SSE connection to
|
||||||
|
* `/orchestrator/events/stream` and dispatches typed events to the
|
||||||
|
* caller. Mirror of `useCampaignStream`.
|
||||||
|
*/
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
export type OrchestratorStreamEventName = 'snapshot' | 'traffic' | 'file';
|
||||||
|
|
||||||
|
export interface OrchestratorStreamEvent {
|
||||||
|
name: OrchestratorStreamEventName | string;
|
||||||
|
topic?: string;
|
||||||
|
type?: string;
|
||||||
|
ts?: string;
|
||||||
|
payload: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseOrchestratorStreamOptions {
|
||||||
|
enabled: boolean;
|
||||||
|
onEvent: (event: OrchestratorStreamEvent) => void;
|
||||||
|
onStatus?: (status: 'connecting' | 'live' | 'error') => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NAMED_EVENTS: OrchestratorStreamEventName[] = ['snapshot', 'traffic', 'file'];
|
||||||
|
|
||||||
|
export function useOrchestratorStream({
|
||||||
|
enabled,
|
||||||
|
onEvent,
|
||||||
|
onStatus,
|
||||||
|
}: UseOrchestratorStreamOptions): void {
|
||||||
|
const esRef = useRef<EventSource | null>(null);
|
||||||
|
const reconnectRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const onEventRef = useRef(onEvent);
|
||||||
|
const onStatusRef = useRef(onStatus);
|
||||||
|
useEffect(() => { onEventRef.current = onEvent; }, [onEvent]);
|
||||||
|
useEffect(() => { onStatusRef.current = onStatus; }, [onStatus]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!enabled) return;
|
||||||
|
|
||||||
|
const connect = () => {
|
||||||
|
if (esRef.current) esRef.current.close();
|
||||||
|
onStatusRef.current?.('connecting');
|
||||||
|
const token = localStorage.getItem('token') ?? '';
|
||||||
|
const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1';
|
||||||
|
const url = `${baseUrl}/orchestrator/events/stream?token=${encodeURIComponent(token)}`;
|
||||||
|
|
||||||
|
const es = new EventSource(url);
|
||||||
|
esRef.current = es;
|
||||||
|
|
||||||
|
es.onopen = () => onStatusRef.current?.('live');
|
||||||
|
|
||||||
|
const dispatch = (name: string) => (event: MessageEvent) => {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(event.data) as Partial<OrchestratorStreamEvent>;
|
||||||
|
onEventRef.current({
|
||||||
|
name,
|
||||||
|
topic: parsed.topic,
|
||||||
|
type: parsed.type,
|
||||||
|
ts: parsed.ts,
|
||||||
|
payload: (parsed.payload ?? {}) as Record<string, unknown>,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error('useOrchestratorStream: parse failed', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const name of NAMED_EVENTS) {
|
||||||
|
es.addEventListener(name, dispatch(name) as EventListener);
|
||||||
|
}
|
||||||
|
|
||||||
|
es.onerror = () => {
|
||||||
|
es.close();
|
||||||
|
esRef.current = null;
|
||||||
|
onStatusRef.current?.('error');
|
||||||
|
reconnectRef.current = setTimeout(connect, 3000);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
connect();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (reconnectRef.current) clearTimeout(reconnectRef.current);
|
||||||
|
if (esRef.current) esRef.current.close();
|
||||||
|
esRef.current = null;
|
||||||
|
};
|
||||||
|
}, [enabled]);
|
||||||
|
}
|
||||||
@@ -22,6 +22,7 @@ const loaders: Record<string, Loader> = {
|
|||||||
'/config': () => import('./components/Config'),
|
'/config': () => import('./components/Config'),
|
||||||
'/swarm-updates': () => import('./components/RemoteUpdates'),
|
'/swarm-updates': () => import('./components/RemoteUpdates'),
|
||||||
'/swarm/hosts': () => import('./components/SwarmHosts'),
|
'/swarm/hosts': () => import('./components/SwarmHosts'),
|
||||||
|
'/orchestrator': () => import('./components/Orchestrator'),
|
||||||
};
|
};
|
||||||
|
|
||||||
const fired = new Set<string>();
|
const fired = new Set<string>();
|
||||||
|
|||||||
Reference in New Issue
Block a user