i wouldnt know anything anyways. file smaller life good
This commit is contained in:
@@ -1,367 +1 @@
|
||||
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>("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>
|
||||
);
|
||||
}
|
||||
export { ObservationsPage } from "@/pages/observations/ObservationsPage";
|
||||
|
||||
@@ -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