i wouldnt know anything anyways. file smaller life good
This commit is contained in:
@@ -1,367 +1 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
export { ObservationsPage } from "@/pages/observations/ObservationsPage";
|
||||||
|
|
||||||
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>("all");
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,117 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
fetchObservationHistory,
|
||||||
|
type AgentDeviceObservation,
|
||||||
|
type AgentDeviceObservationEvent,
|
||||||
|
} from "@/api";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
formatSeen,
|
||||||
|
observationLabel,
|
||||||
|
observationStateLabel,
|
||||||
|
} from "@/pages/observations/utils";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
observation: AgentDeviceObservation | null;
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ObservationHistoryDialog({
|
||||||
|
observation,
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
}: Props) {
|
||||||
|
const [events, setEvents] = useState<AgentDeviceObservationEvent[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || !observation) return;
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
fetchObservationHistory({
|
||||||
|
observationKey: observation.observation_key,
|
||||||
|
limit: 100,
|
||||||
|
})
|
||||||
|
.then(setEvents)
|
||||||
|
.catch((err) => {
|
||||||
|
setEvents([]);
|
||||||
|
setError(String(err));
|
||||||
|
})
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
}, [open, observation]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="sm:max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Observation History</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{observation ? observationLabel(observation) : "No observation selected"}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<pre className="max-h-40 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
|
||||||
|
{error}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="max-h-[60vh] overflow-auto rounded-md border">
|
||||||
|
<div className="grid min-w-[44rem] grid-cols-[10rem_8rem_9rem_minmax(8rem,1fr)_minmax(8rem,1fr)] gap-2 border-b bg-muted/60 px-3 py-2 text-xs font-medium text-muted-foreground">
|
||||||
|
<span>Time</span>
|
||||||
|
<span>State</span>
|
||||||
|
<span>Source</span>
|
||||||
|
<span>Network</span>
|
||||||
|
<span>Known Device</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{events.map((event) => (
|
||||||
|
<div
|
||||||
|
key={event.event_id}
|
||||||
|
className="grid min-w-[44rem] grid-cols-[10rem_8rem_9rem_minmax(8rem,1fr)_minmax(8rem,1fr)] gap-2 border-b px-3 py-2 text-sm last:border-b-0"
|
||||||
|
>
|
||||||
|
<span className="truncate text-muted-foreground">
|
||||||
|
{formatSeen(event.ts_unix)}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<Badge variant={event.action === "remove" ? "outline" : "secondary"}>
|
||||||
|
{observationStateLabel(event.action)}
|
||||||
|
</Badge>
|
||||||
|
</span>
|
||||||
|
<span className="flex min-w-0 gap-1">
|
||||||
|
<Badge variant="outline">{event.kind}</Badge>
|
||||||
|
<Badge variant="outline">{event.action}</Badge>
|
||||||
|
</span>
|
||||||
|
<span className="min-w-0 text-muted-foreground">
|
||||||
|
<span className="block truncate">{event.ip ?? "-"}</span>
|
||||||
|
<span className="block truncate">{event.mac ?? "-"}</span>
|
||||||
|
{event.hostname && (
|
||||||
|
<span className="block truncate">{event.hostname}</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span className="min-w-0 truncate">
|
||||||
|
{event.known_device?.display_name ?? "-"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{!events.length && (
|
||||||
|
<div className="px-3 py-4 text-sm text-muted-foreground">
|
||||||
|
{loading ? "Loading history..." : "No history found"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
import type { AgentDeviceObservation, KnownDevice } from "@/api";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { identifierSummary, observationLabel } from "@/pages/observations/utils";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
observation: AgentDeviceObservation;
|
||||||
|
devices: KnownDevice[];
|
||||||
|
busy: boolean;
|
||||||
|
selectedDeviceId: string;
|
||||||
|
newName: string;
|
||||||
|
onSelectDevice: (deviceId: string) => void;
|
||||||
|
onNewNameChange: (name: string) => void;
|
||||||
|
onAttachExisting: () => void;
|
||||||
|
onCreateAndAttach: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ObservationIdentityActions({
|
||||||
|
observation,
|
||||||
|
devices,
|
||||||
|
busy,
|
||||||
|
selectedDeviceId,
|
||||||
|
newName,
|
||||||
|
onSelectDevice,
|
||||||
|
onNewNameChange,
|
||||||
|
onAttachExisting,
|
||||||
|
onCreateAndAttach,
|
||||||
|
}: Props) {
|
||||||
|
const attachable = Boolean(observation.mac || observation.ip);
|
||||||
|
const selectedDevice = devices.find(
|
||||||
|
(device) => device.device_id === selectedDeviceId,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid min-w-0 gap-2">
|
||||||
|
<div className="flex min-w-0 gap-2">
|
||||||
|
<Select
|
||||||
|
value={selectedDeviceId}
|
||||||
|
onValueChange={(value: string | null) => onSelectDevice(value ?? "")}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="min-w-0 flex-1">
|
||||||
|
<span className="truncate">
|
||||||
|
{selectedDevice?.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 || !selectedDeviceId}
|
||||||
|
onClick={onAttachExisting}
|
||||||
|
>
|
||||||
|
Attach
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex min-w-0 gap-2">
|
||||||
|
<Input
|
||||||
|
value={newName}
|
||||||
|
onChange={(event) => onNewNameChange(event.target.value)}
|
||||||
|
placeholder={`Create as ${observationLabel(observation)}`}
|
||||||
|
disabled={busy || !attachable}
|
||||||
|
/>
|
||||||
|
<Button size="sm" disabled={busy || !attachable} onClick={onCreateAndAttach}>
|
||||||
|
Create
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
import type { AgentDeviceObservation, KnownDevice } from "@/api";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ObservationIdentityActions } from "@/pages/observations/ObservationIdentityActions";
|
||||||
|
import {
|
||||||
|
formatSeen,
|
||||||
|
observationLabel,
|
||||||
|
observationStateLabel,
|
||||||
|
} from "@/pages/observations/utils";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
observations: AgentDeviceObservation[];
|
||||||
|
devices: KnownDevice[];
|
||||||
|
selectedDevices: Record<string, string>;
|
||||||
|
newNames: Record<string, string>;
|
||||||
|
busyKey: string;
|
||||||
|
onSelectDevice: (observationKey: string, deviceId: string) => void;
|
||||||
|
onNewNameChange: (observationKey: string, name: string) => void;
|
||||||
|
onAttachExisting: (observation: AgentDeviceObservation) => void;
|
||||||
|
onCreateAndAttach: (observation: AgentDeviceObservation) => void;
|
||||||
|
onOpenHistory: (observation: AgentDeviceObservation) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ObservationTable({
|
||||||
|
observations,
|
||||||
|
devices,
|
||||||
|
selectedDevices,
|
||||||
|
newNames,
|
||||||
|
busyKey,
|
||||||
|
onSelectDevice,
|
||||||
|
onNewNameChange,
|
||||||
|
onAttachExisting,
|
||||||
|
onCreateAndAttach,
|
||||||
|
onOpenHistory,
|
||||||
|
}: Props) {
|
||||||
|
return (
|
||||||
|
<div className="grid gap-2 overflow-x-auto">
|
||||||
|
<div className="grid min-w-[76rem] grid-cols-[minmax(10rem,1.2fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)_minmax(9rem,0.8fr)_minmax(16rem,1.3fr)_7rem] 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>
|
||||||
|
<span>History</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{observations.map((observation) => {
|
||||||
|
const busy = busyKey === observation.observation_key;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={observation.observation_key}
|
||||||
|
className="grid min-w-[76rem] grid-cols-[minmax(10rem,1.2fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)_minmax(9rem,0.8fr)_minmax(16rem,1.3fr)_7rem] 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={
|
||||||
|
observation.last_action === "remove"
|
||||||
|
? "outline"
|
||||||
|
: "secondary"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{observationStateLabel(observation.last_action)}
|
||||||
|
</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>
|
||||||
|
) : (
|
||||||
|
<ObservationIdentityActions
|
||||||
|
observation={observation}
|
||||||
|
devices={devices}
|
||||||
|
busy={busy}
|
||||||
|
selectedDeviceId={
|
||||||
|
selectedDevices[observation.observation_key] ?? ""
|
||||||
|
}
|
||||||
|
newName={newNames[observation.observation_key] ?? ""}
|
||||||
|
onSelectDevice={(deviceId) =>
|
||||||
|
onSelectDevice(observation.observation_key, deviceId)
|
||||||
|
}
|
||||||
|
onNewNameChange={(name) =>
|
||||||
|
onNewNameChange(observation.observation_key, name)
|
||||||
|
}
|
||||||
|
onAttachExisting={() => onAttachExisting(observation)}
|
||||||
|
onCreateAndAttach={() => onCreateAndAttach(observation)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onOpenHistory(observation)}
|
||||||
|
>
|
||||||
|
History
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{!observations.length && (
|
||||||
|
<div className="px-1 py-2 text-sm text-muted-foreground">
|
||||||
|
No observations found
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,229 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
attachObservationIdentifier,
|
||||||
|
createKnownDevice,
|
||||||
|
fetchKnownDevices,
|
||||||
|
fetchObservations,
|
||||||
|
type AgentDeviceObservation,
|
||||||
|
type KnownDevice,
|
||||||
|
} from "@/api";
|
||||||
|
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";
|
||||||
|
import { ObservationHistoryDialog } from "@/pages/observations/ObservationHistoryDialog";
|
||||||
|
import { ObservationTable } from "@/pages/observations/ObservationTable";
|
||||||
|
import {
|
||||||
|
observationLabel,
|
||||||
|
type ObservationFilter,
|
||||||
|
} from "@/pages/observations/utils";
|
||||||
|
|
||||||
|
export function ObservationsPage() {
|
||||||
|
const [observations, setObservations] = useState<AgentDeviceObservation[]>(
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const [devices, setDevices] = useState<KnownDevice[]>([]);
|
||||||
|
const [filter, setFilter] = useState<ObservationFilter>("all");
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [selectedDevices, setSelectedDevices] = useState<
|
||||||
|
Record<string, string>
|
||||||
|
>({});
|
||||||
|
const [newNames, setNewNames] = useState<Record<string, string>>({});
|
||||||
|
const [busyKey, setBusyKey] = useState("");
|
||||||
|
const [historyObservation, setHistoryObservation] =
|
||||||
|
useState<AgentDeviceObservation | null>(null);
|
||||||
|
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: ObservationFilter | 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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ObservationTable
|
||||||
|
observations={filtered}
|
||||||
|
devices={devices}
|
||||||
|
selectedDevices={selectedDevices}
|
||||||
|
newNames={newNames}
|
||||||
|
busyKey={busyKey}
|
||||||
|
onSelectDevice={(observationKey, deviceId) =>
|
||||||
|
setSelectedDevices((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[observationKey]: deviceId,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
onNewNameChange={(observationKey, name) =>
|
||||||
|
setNewNames((prev) => ({ ...prev, [observationKey]: name }))
|
||||||
|
}
|
||||||
|
onAttachExisting={(observation) => void attachExisting(observation)}
|
||||||
|
onCreateAndAttach={(observation) =>
|
||||||
|
void createAndAttach(observation)
|
||||||
|
}
|
||||||
|
onOpenHistory={setHistoryObservation}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ObservationHistoryDialog
|
||||||
|
observation={historyObservation}
|
||||||
|
open={Boolean(historyObservation)}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open) setHistoryObservation(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import type { AgentDeviceObservation, KnownDevice } from "@/api";
|
||||||
|
|
||||||
|
export type ObservationFilter = "all" | "unknown" | "known";
|
||||||
|
|
||||||
|
export function observationLabel(observation: AgentDeviceObservation): string {
|
||||||
|
return (
|
||||||
|
observation.hostname?.trim() ||
|
||||||
|
observation.mac?.trim() ||
|
||||||
|
observation.ip?.trim() ||
|
||||||
|
observation.observation_key
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatSeen(tsUnix: number): string {
|
||||||
|
if (!Number.isFinite(tsUnix) || tsUnix <= 0) return "-";
|
||||||
|
return new Date(tsUnix * 1000).toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function identifierSummary(device: KnownDevice): string {
|
||||||
|
if (!device.identifiers.length) return "no identifiers";
|
||||||
|
return device.identifiers
|
||||||
|
.map((identifier) => `${identifier.kind}:${identifier.value}`)
|
||||||
|
.join(", ");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function observationStateLabel(action: string): string {
|
||||||
|
if (action === "remove") return "stale";
|
||||||
|
if (action === "add" || action === "update" || action === "old") {
|
||||||
|
return "present";
|
||||||
|
}
|
||||||
|
return action;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user