sure we added this but what now
This commit is contained in:
@@ -20,6 +20,7 @@ import { AuditPage } from "@/pages/AuditPage";
|
|||||||
import { CommandsPage } from "@/pages/CommandsPage";
|
import { CommandsPage } from "@/pages/CommandsPage";
|
||||||
import { DashboardPage } from "@/pages/DashboardPage";
|
import { DashboardPage } from "@/pages/DashboardPage";
|
||||||
import { DevicesPage } from "@/pages/DevicesPage";
|
import { DevicesPage } from "@/pages/DevicesPage";
|
||||||
|
import { ObservationsPage } from "@/pages/ObservationsPage";
|
||||||
import { TokensPage } from "@/pages/TokensPage";
|
import { TokensPage } from "@/pages/TokensPage";
|
||||||
|
|
||||||
type LoadState = "idle" | "loading" | "ready" | "error";
|
type LoadState = "idle" | "loading" | "ready" | "error";
|
||||||
@@ -151,6 +152,7 @@ export function App() {
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route path="observations" element={<ObservationsPage />} />
|
||||||
<Route
|
<Route
|
||||||
path="agents"
|
path="agents"
|
||||||
element={
|
element={
|
||||||
|
|||||||
@@ -72,6 +72,43 @@ export type SetAgentNicknameResponse = {
|
|||||||
updated: boolean;
|
updated: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type DeviceIdentifier = {
|
||||||
|
identifier_key: string;
|
||||||
|
device_id: string;
|
||||||
|
kind: string;
|
||||||
|
value: string;
|
||||||
|
created_at_unix: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type KnownDevice = {
|
||||||
|
device_id: string;
|
||||||
|
display_name: string;
|
||||||
|
pinned: boolean;
|
||||||
|
created_at_unix: number;
|
||||||
|
updated_at_unix: number;
|
||||||
|
notes: string | null;
|
||||||
|
identifiers: DeviceIdentifier[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type KnownDeviceSummary = {
|
||||||
|
device_id: string;
|
||||||
|
display_name: string;
|
||||||
|
pinned: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AgentDeviceObservation = {
|
||||||
|
observation_key: string;
|
||||||
|
agent_id: string;
|
||||||
|
kind: string;
|
||||||
|
mac: string | null;
|
||||||
|
ip: string | null;
|
||||||
|
hostname: string | null;
|
||||||
|
first_seen_unix: number;
|
||||||
|
last_seen_unix: number;
|
||||||
|
last_action: string;
|
||||||
|
known_device: KnownDeviceSummary | null;
|
||||||
|
};
|
||||||
|
|
||||||
async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||||
const res = await fetch(path, {
|
const res = await fetch(path, {
|
||||||
...init,
|
...init,
|
||||||
@@ -154,6 +191,52 @@ export function setAgentNickname(
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function fetchKnownDevices(): Promise<KnownDevice[]> {
|
||||||
|
return request<KnownDevice[]>("/api/v1/control/devices");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchObservations(opts?: {
|
||||||
|
agentId?: string;
|
||||||
|
limit?: number;
|
||||||
|
}): Promise<AgentDeviceObservation[]> {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (opts?.agentId) params.set("agent_id", opts.agentId);
|
||||||
|
params.set("limit", String(opts?.limit ?? 500));
|
||||||
|
return request<AgentDeviceObservation[]>(
|
||||||
|
`/api/v1/control/observations?${params.toString()}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createKnownDevice(input: {
|
||||||
|
display_name: string;
|
||||||
|
pinned?: boolean;
|
||||||
|
notes?: string | null;
|
||||||
|
identifiers?: { kind: string; value: string }[];
|
||||||
|
}): Promise<KnownDevice> {
|
||||||
|
return request<KnownDevice>("/api/v1/control/devices", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({
|
||||||
|
display_name: input.display_name,
|
||||||
|
pinned: input.pinned ?? true,
|
||||||
|
notes: input.notes ?? null,
|
||||||
|
identifiers: input.identifiers ?? [],
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function attachObservationIdentifier(
|
||||||
|
deviceId: string,
|
||||||
|
observationKey: string,
|
||||||
|
): Promise<KnownDevice> {
|
||||||
|
return request<KnownDevice>(
|
||||||
|
`/api/v1/control/devices/${encodeURIComponent(deviceId)}/identifiers/from-observation`,
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ observation_key: observationKey }),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function runCommand(
|
export function runCommand(
|
||||||
agentId: string,
|
agentId: string,
|
||||||
kind: CommandKind,
|
kind: CommandKind,
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
["/", "Devices"],
|
["/", "Devices"],
|
||||||
|
["/observations", "Observed"],
|
||||||
["/commands", "Wake Tools"],
|
["/commands", "Wake Tools"],
|
||||||
["/dashboard", "Fleet Health"],
|
["/dashboard", "Fleet Health"],
|
||||||
["/agents", "Agents"],
|
["/agents", "Agents"],
|
||||||
|
|||||||
@@ -0,0 +1,367 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
attachObservationIdentifier,
|
||||||
|
createKnownDevice,
|
||||||
|
fetchKnownDevices,
|
||||||
|
fetchObservations,
|
||||||
|
type AgentDeviceObservation,
|
||||||
|
type KnownDevice,
|
||||||
|
} from "@/api";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
|
||||||
|
type Filter = "all" | "unknown" | "known";
|
||||||
|
|
||||||
|
function observationLabel(observation: AgentDeviceObservation): string {
|
||||||
|
return (
|
||||||
|
observation.hostname?.trim() ||
|
||||||
|
observation.mac?.trim() ||
|
||||||
|
observation.ip?.trim() ||
|
||||||
|
observation.observation_key
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSeen(tsUnix: number): string {
|
||||||
|
if (!Number.isFinite(tsUnix) || tsUnix <= 0) return "-";
|
||||||
|
return new Date(tsUnix * 1000).toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function identifierSummary(device: KnownDevice): string {
|
||||||
|
if (!device.identifiers.length) return "no identifiers";
|
||||||
|
return device.identifiers
|
||||||
|
.map((identifier) => `${identifier.kind}:${identifier.value}`)
|
||||||
|
.join(", ");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ObservationsPage() {
|
||||||
|
const [observations, setObservations] = useState<AgentDeviceObservation[]>(
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const [devices, setDevices] = useState<KnownDevice[]>([]);
|
||||||
|
const [filter, setFilter] = useState<Filter>("unknown");
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [selectedDevices, setSelectedDevices] = useState<
|
||||||
|
Record<string, string>
|
||||||
|
>({});
|
||||||
|
const [newNames, setNewNames] = useState<Record<string, string>>({});
|
||||||
|
const [busyKey, setBusyKey] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [status, setStatus] = useState("");
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const [nextObservations, nextDevices] = await Promise.all([
|
||||||
|
fetchObservations({ limit: 500 }),
|
||||||
|
fetchKnownDevices(),
|
||||||
|
]);
|
||||||
|
setObservations(nextObservations);
|
||||||
|
setDevices(nextDevices);
|
||||||
|
} catch (err) {
|
||||||
|
setError(String(err));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void load();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const q = query.trim().toLowerCase();
|
||||||
|
return observations.filter((observation) => {
|
||||||
|
if (filter === "known" && !observation.known_device) return false;
|
||||||
|
if (filter === "unknown" && observation.known_device) return false;
|
||||||
|
if (!q) return true;
|
||||||
|
|
||||||
|
const haystack = [
|
||||||
|
observation.hostname,
|
||||||
|
observation.mac,
|
||||||
|
observation.ip,
|
||||||
|
observation.agent_id,
|
||||||
|
observation.kind,
|
||||||
|
observation.last_action,
|
||||||
|
observation.known_device?.display_name,
|
||||||
|
]
|
||||||
|
.filter((value): value is string => Boolean(value))
|
||||||
|
.join(" ")
|
||||||
|
.toLowerCase();
|
||||||
|
return haystack.includes(q);
|
||||||
|
});
|
||||||
|
}, [filter, observations, query]);
|
||||||
|
|
||||||
|
async function attachExisting(observation: AgentDeviceObservation) {
|
||||||
|
const deviceId = selectedDevices[observation.observation_key];
|
||||||
|
if (!deviceId) return;
|
||||||
|
setBusyKey(observation.observation_key);
|
||||||
|
setStatus("");
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const device = await attachObservationIdentifier(
|
||||||
|
deviceId,
|
||||||
|
observation.observation_key,
|
||||||
|
);
|
||||||
|
setStatus(
|
||||||
|
`Attached ${observationLabel(observation)} to ${device.display_name}`,
|
||||||
|
);
|
||||||
|
await load();
|
||||||
|
} catch (err) {
|
||||||
|
setError(String(err));
|
||||||
|
} finally {
|
||||||
|
setBusyKey("");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createAndAttach(observation: AgentDeviceObservation) {
|
||||||
|
const displayName =
|
||||||
|
newNames[observation.observation_key]?.trim() ||
|
||||||
|
observationLabel(observation);
|
||||||
|
if (!displayName.trim()) return;
|
||||||
|
setBusyKey(observation.observation_key);
|
||||||
|
setStatus("");
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const device = await createKnownDevice({
|
||||||
|
display_name: displayName,
|
||||||
|
pinned: true,
|
||||||
|
identifiers: [],
|
||||||
|
});
|
||||||
|
const updated = await attachObservationIdentifier(
|
||||||
|
device.device_id,
|
||||||
|
observation.observation_key,
|
||||||
|
);
|
||||||
|
setStatus(
|
||||||
|
`Created ${updated.display_name} and attached ${observationLabel(observation)}`,
|
||||||
|
);
|
||||||
|
await load();
|
||||||
|
} catch (err) {
|
||||||
|
setError(String(err));
|
||||||
|
} finally {
|
||||||
|
setBusyKey("");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||||
|
<CardTitle>Observed Devices</CardTitle>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => void load()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? "Refreshing..." : "Refresh"}
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="grid gap-2 md:grid-cols-[12rem_minmax(0,1fr)]">
|
||||||
|
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||||
|
<span>Status</span>
|
||||||
|
<Select
|
||||||
|
value={filter}
|
||||||
|
onValueChange={(value: Filter | null) => {
|
||||||
|
if (value) setFilter(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<span>{filter}</span>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent alignItemWithTrigger={false}>
|
||||||
|
<SelectItem value="unknown">unknown</SelectItem>
|
||||||
|
<SelectItem value="known">known</SelectItem>
|
||||||
|
<SelectItem value="all">all</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</label>
|
||||||
|
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||||
|
<span>Search</span>
|
||||||
|
<Input
|
||||||
|
value={query}
|
||||||
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
|
placeholder="hostname, mac, ip, agent, known device"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Showing {filtered.length} of {observations.length}
|
||||||
|
</p>
|
||||||
|
{status && (
|
||||||
|
<pre className="max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 text-xs">
|
||||||
|
{status}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
|
||||||
|
{error}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid gap-2 overflow-x-auto">
|
||||||
|
<div className="grid min-w-[68rem] grid-cols-[minmax(10rem,1.2fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)_minmax(9rem,0.8fr)_minmax(16rem,1.3fr)] gap-2 rounded-md border bg-muted/60 px-3 py-2 text-sm">
|
||||||
|
<span>Device</span>
|
||||||
|
<span>Network</span>
|
||||||
|
<span>Agent</span>
|
||||||
|
<span>Seen</span>
|
||||||
|
<span>Known Device</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filtered.map((observation) => {
|
||||||
|
const busy = busyKey === observation.observation_key;
|
||||||
|
const attachable = Boolean(observation.mac || observation.ip);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={observation.observation_key}
|
||||||
|
className="grid min-w-[68rem] grid-cols-[minmax(10rem,1.2fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)_minmax(9rem,0.8fr)_minmax(16rem,1.3fr)] gap-2 rounded-md border bg-card px-3 py-2 text-sm"
|
||||||
|
>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="truncate font-medium">
|
||||||
|
{observationLabel(observation)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 flex flex-wrap gap-1 text-xs text-muted-foreground">
|
||||||
|
<Badge variant="outline">{observation.kind}</Badge>
|
||||||
|
<Badge variant="outline">{observation.last_action}</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 text-muted-foreground">
|
||||||
|
<div className="truncate" title={observation.ip ?? "-"}>
|
||||||
|
{observation.ip ?? "-"}
|
||||||
|
</div>
|
||||||
|
<div className="truncate" title={observation.mac ?? "-"}>
|
||||||
|
{observation.mac ?? "-"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 truncate text-muted-foreground">
|
||||||
|
{observation.agent_id}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 text-muted-foreground">
|
||||||
|
<div className="truncate">
|
||||||
|
{formatSeen(observation.last_seen_unix)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
{observation.known_device ? (
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<div className="flex min-w-0 items-center gap-2">
|
||||||
|
<Badge variant="secondary">known</Badge>
|
||||||
|
<span className="truncate font-medium">
|
||||||
|
{observation.known_device.display_name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{observation.known_device.pinned
|
||||||
|
? "pinned"
|
||||||
|
: "not pinned"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid min-w-0 gap-2">
|
||||||
|
<div className="flex min-w-0 gap-2">
|
||||||
|
<Select
|
||||||
|
value={
|
||||||
|
selectedDevices[observation.observation_key] ?? ""
|
||||||
|
}
|
||||||
|
onValueChange={(value: string | null) => {
|
||||||
|
setSelectedDevices((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[observation.observation_key]: value ?? "",
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="min-w-0 flex-1">
|
||||||
|
<span className="truncate">
|
||||||
|
{selectedDevices[observation.observation_key]
|
||||||
|
? devices.find(
|
||||||
|
(device) =>
|
||||||
|
device.device_id ===
|
||||||
|
selectedDevices[
|
||||||
|
observation.observation_key
|
||||||
|
],
|
||||||
|
)?.display_name
|
||||||
|
: "Attach to existing"}
|
||||||
|
</span>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent
|
||||||
|
className="max-w-[min(92vw,28rem)]"
|
||||||
|
alignItemWithTrigger={false}
|
||||||
|
>
|
||||||
|
{devices.map((device) => (
|
||||||
|
<SelectItem
|
||||||
|
key={device.device_id}
|
||||||
|
value={device.device_id}
|
||||||
|
>
|
||||||
|
<span className="grid min-w-0 gap-0.5">
|
||||||
|
<span className="truncate">
|
||||||
|
{device.display_name}
|
||||||
|
</span>
|
||||||
|
<span className="truncate text-xs text-muted-foreground">
|
||||||
|
{identifierSummary(device)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={
|
||||||
|
busy ||
|
||||||
|
!attachable ||
|
||||||
|
!selectedDevices[observation.observation_key]
|
||||||
|
}
|
||||||
|
onClick={() => void attachExisting(observation)}
|
||||||
|
>
|
||||||
|
Attach
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex min-w-0 gap-2">
|
||||||
|
<Input
|
||||||
|
value={newNames[observation.observation_key] ?? ""}
|
||||||
|
onChange={(event) =>
|
||||||
|
setNewNames((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[observation.observation_key]: event.target.value,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
placeholder={`Create as ${observationLabel(observation)}`}
|
||||||
|
disabled={busy || !attachable}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
disabled={busy || !attachable}
|
||||||
|
onClick={() => void createAndAttach(observation)}
|
||||||
|
>
|
||||||
|
Create
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{!filtered.length && (
|
||||||
|
<div className="px-1 py-2 text-sm text-muted-foreground">
|
||||||
|
No observations found
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user