370 lines
16 KiB
TypeScript
370 lines
16 KiB
TypeScript
import { useEffect, useMemo } from "react";
|
|
import { LoaderCircle } from "lucide-react";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { apiErrorMessage } from "../../api/client";
|
|
import { Button } from "../../components/ui/button";
|
|
import {
|
|
getSensitivityAnalysisRun,
|
|
listSensitivityAnalysisEvents,
|
|
listSensitivityAnalysisRuns,
|
|
type SensitivityAnalysisRun,
|
|
} from "../../api/catalog-databases";
|
|
import { useTailFollowing } from "../activityScroll";
|
|
import { FleetLedgerDrawer } from "./FleetLedgerShell";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
databaseId?: string | null;
|
|
run: SensitivityAnalysisRun | null;
|
|
awaitingRun?: boolean;
|
|
onClose: () => void;
|
|
onRunUpdate: (run: SensitivityAnalysisRun) => void;
|
|
}
|
|
|
|
const HISTORY_QUERY_KEY = ["sensitive-data-suggestion-runs", 50] as const;
|
|
const SAFE_FINAL_ERROR = "The run ended before all columns were classified. Review the event log for safe details.";
|
|
|
|
function statusLabel(run: SensitivityAnalysisRun): string {
|
|
const label = run.status.replaceAll("_", " ");
|
|
return `${label[0].toUpperCase()}${label.slice(1)}`;
|
|
}
|
|
|
|
function isTerminal(run?: SensitivityAnalysisRun): boolean {
|
|
return Boolean(run && ["completed", "failed", "interrupted"].includes(run.status));
|
|
}
|
|
|
|
function outcomeClass(run: SensitivityAnalysisRun): string {
|
|
if (run.status === "completed") return "thot-sensitive-run--success";
|
|
if (["failed", "interrupted"].includes(run.status)) return "thot-sensitive-run--failure";
|
|
return "";
|
|
}
|
|
|
|
function safeFinalError(summary: string | null): string | null {
|
|
const value = summary?.trim();
|
|
if (!value) return null;
|
|
if (
|
|
value.length > 500
|
|
|| /[\r\n]/.test(value)
|
|
|| /traceback|stack trace|(?:^|\s)at\s+\S+[:(]|prompt|provider\s+payload|source\s+sample|bearer\s+\S+|api[_ -]?key|sk-[a-z0-9_-]+/i.test(value)
|
|
) return SAFE_FINAL_ERROR;
|
|
return value;
|
|
}
|
|
|
|
function timestamp(value: string | null): string {
|
|
return value ? new Date(value).toLocaleString() : "Not available";
|
|
}
|
|
|
|
export function SensitivityAnalysisHistoryDrawer({
|
|
open,
|
|
databaseId = null,
|
|
run: initialRun,
|
|
awaitingRun = false,
|
|
onClose,
|
|
onRunUpdate,
|
|
}: Props) {
|
|
const queryClient = useQueryClient();
|
|
const runId = initialRun?.id ?? null;
|
|
const runQuery = useQuery({
|
|
queryKey: ["sensitive-data-suggestion-run", runId],
|
|
queryFn: () => getSensitivityAnalysisRun(runId!),
|
|
enabled: open && Boolean(runId),
|
|
initialData: initialRun ?? undefined,
|
|
retry: false,
|
|
refetchInterval: (query) => isTerminal(query.state.data) ? false : 750,
|
|
});
|
|
const run = runQuery.data;
|
|
const eventQuery = useQuery({
|
|
queryKey: ["sensitive-data-suggestion-events", runId],
|
|
queryFn: () => listSensitivityAnalysisEvents(runId!),
|
|
enabled: open && Boolean(runId),
|
|
retry: false,
|
|
refetchInterval: run && isTerminal(run) ? false : 750,
|
|
});
|
|
const historyQuery = useQuery({
|
|
queryKey: HISTORY_QUERY_KEY,
|
|
queryFn: () => listSensitivityAnalysisRuns(50),
|
|
enabled: open,
|
|
retry: false,
|
|
refetchInterval: (query) => awaitingRun
|
|
? 500
|
|
: query.state.data?.some((item) => !isTerminal(item)) ? 3_000 : false,
|
|
});
|
|
const visibleHistory = useMemo(
|
|
() => (historyQuery.data ?? []).filter((item) => !databaseId || item.databaseId === databaseId),
|
|
[databaseId, historyQuery.data],
|
|
);
|
|
const events = eventQuery.data ?? [];
|
|
const latestEventSequence = events.at(-1)?.sequence ?? 0;
|
|
const {
|
|
followingTail: followingEventTail,
|
|
handleScroll: handleEventLogScroll,
|
|
jumpToTail: jumpToLatestEvent,
|
|
viewportRef: eventLogRef,
|
|
} = useTailFollowing<HTMLDivElement>({
|
|
active: open && Boolean(run),
|
|
resetKey: runId,
|
|
tail: latestEventSequence,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const candidate = awaitingRun
|
|
? visibleHistory.find((item) => !isTerminal(item))
|
|
: visibleHistory[0];
|
|
if (!candidate || candidate.id === initialRun?.id) return;
|
|
onRunUpdate(candidate);
|
|
}, [awaitingRun, initialRun?.id, onRunUpdate, open, visibleHistory]);
|
|
|
|
useEffect(() => {
|
|
if (!run) return;
|
|
onRunUpdate(run);
|
|
queryClient.setQueryData<SensitivityAnalysisRun[]>(HISTORY_QUERY_KEY, (current) => {
|
|
if (!current) return [run];
|
|
return current.some((item) => item.id === run.id)
|
|
? current.map((item) => item.id === run.id ? run : item)
|
|
: [run, ...current];
|
|
});
|
|
}, [onRunUpdate, queryClient, run]);
|
|
|
|
if (!open) return null;
|
|
if (!run && awaitingRun && !historyQuery.isError) {
|
|
return (
|
|
<FleetLedgerDrawer
|
|
open
|
|
ariaLabel="Sensitivity analysis history"
|
|
eyebrow="Sensitivity analysis"
|
|
title={(
|
|
<span className="inline-flex items-center gap-2">
|
|
<LoaderCircle className="size-5 animate-spin" aria-hidden="true" />
|
|
Starting sensitivity analysis
|
|
</span>
|
|
)}
|
|
description="Preparing the local policy and source scan."
|
|
onClose={onClose}
|
|
closeLabel="Close sensitivity analysis history"
|
|
bodyClassName="thot-catalog-drawer__history-layout thot-catalog-drawer__run-layout"
|
|
>
|
|
<div className="thot-catalog-drawer__run-main">
|
|
<section aria-label="Sensitivity analysis startup progress">
|
|
<h3 className="thot-label mb-2">Progress</h3>
|
|
<div
|
|
role="progressbar"
|
|
aria-label="Sensitivity analysis is starting"
|
|
aria-valuetext="Preparing analysis run"
|
|
className="h-2 overflow-hidden rounded-full bg-muted"
|
|
>
|
|
<div className="h-full w-1/3 animate-pulse rounded-full bg-primary" />
|
|
</div>
|
|
</section>
|
|
<section className="thot-catalog-drawer__events mt-4" aria-label="Sensitivity analysis log">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<h3 className="thot-label">Events</h3>
|
|
<span className="text-xs tabular-nums text-muted-foreground">1</span>
|
|
</div>
|
|
<div
|
|
role="log"
|
|
aria-label="Sensitivity analysis events"
|
|
className="thot-catalog-drawer__event-log overflow-y-auto rounded-md bg-zinc-950 p-3 font-mono text-xs leading-5 text-zinc-200"
|
|
>
|
|
<p>Preparing sensitivity analysis…</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</FleetLedgerDrawer>
|
|
);
|
|
}
|
|
if (!run) {
|
|
return (
|
|
<FleetLedgerDrawer
|
|
open
|
|
ariaLabel="Sensitivity analysis history"
|
|
eyebrow="Sensitive data"
|
|
title="Analysis run history"
|
|
onClose={onClose}
|
|
closeLabel="Close sensitivity analysis history"
|
|
bodyClassName="thot-catalog-drawer__body--empty"
|
|
>
|
|
{historyQuery.isError ? (
|
|
<div role="alert" className="w-full rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
|
|
{apiErrorMessage(historyQuery.error)}
|
|
</div>
|
|
) : historyQuery.isLoading || awaitingRun || (historyQuery.data?.length ?? 0) > 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{awaitingRun ? "Starting sensitivity analysis…" : "Loading analysis history…"}
|
|
</p>
|
|
) : (
|
|
<div className="w-full rounded-md border border-border bg-muted/25 px-4 py-5 text-sm">
|
|
<p className="font-semibold">No sensitivity analysis runs yet.</p>
|
|
<p className="mt-1 text-muted-foreground">
|
|
Analyze sensitive fields to create the first history entry.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</FleetLedgerDrawer>
|
|
);
|
|
}
|
|
|
|
const finalError = safeFinalError(run.errorSummary);
|
|
const engineDisplay = run.engine === "local"
|
|
? `Local rules (${run.policyVersion ?? "unknown policy"})`
|
|
: `Legacy LLM (${run.modelId ?? "unknown model"})`;
|
|
const progressCounters = [
|
|
["total", "Total columns"],
|
|
["suggestedSensitive", "Sensitive"],
|
|
["suggestedNonSensitive", "Not sensitive"],
|
|
["unknown", "Unprocessed"],
|
|
] as const;
|
|
return (
|
|
<FleetLedgerDrawer
|
|
open
|
|
className={outcomeClass(run)}
|
|
ariaLabel="Sensitivity analysis history"
|
|
eyebrow="Sensitivity analysis"
|
|
title={(
|
|
<span className="inline-flex items-center gap-2">
|
|
{!isTerminal(run) ? <LoaderCircle className="size-5 animate-spin" aria-hidden="true" /> : null}
|
|
{statusLabel(run)}
|
|
</span>
|
|
)}
|
|
description={run.scope.replaceAll("_", " ")}
|
|
onClose={onClose}
|
|
closeLabel="Close sensitivity analysis history"
|
|
bodyClassName="thot-catalog-drawer__history-layout thot-catalog-drawer__run-layout"
|
|
>
|
|
<div className="thot-catalog-drawer__run-main">
|
|
{runQuery.isError ? (
|
|
<div role="alert" className="rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
|
|
{apiErrorMessage(runQuery.error)}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className={`grid gap-4 sm:grid-cols-2${runQuery.isError ? " mt-4" : ""}`}>
|
|
<section aria-label="Analysis engine">
|
|
<h3 className="thot-label mb-2">Analysis engine</h3>
|
|
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
|
|
<dt>Engine</dt><dd className="truncate text-right" title={engineDisplay}>{engineDisplay}</dd>
|
|
{run.engine === "llm" ? <>
|
|
<dt>Input tokens</dt><dd className="text-right tabular-nums">{(run.inputTokens ?? 0).toLocaleString("en-US")}</dd>
|
|
<dt>Cache tokens</dt><dd className="text-right tabular-nums">{(run.cacheReadTokens ?? 0).toLocaleString("en-US")}</dd>
|
|
<dt>Output tokens</dt><dd className="text-right tabular-nums">{(run.outputTokens ?? 0).toLocaleString("en-US")}</dd>
|
|
</> : null}
|
|
</dl>
|
|
</section>
|
|
<section aria-label="Sensitivity analysis timestamps">
|
|
<h3 className="thot-label mb-2">Timestamps</h3>
|
|
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
|
|
<dt className="text-muted-foreground">Created</dt><dd className="text-right tabular-nums">{timestamp(run.createdAt)}</dd>
|
|
<dt className="text-muted-foreground">Started</dt><dd className="text-right tabular-nums">{timestamp(run.startedAt)}</dd>
|
|
<dt className="text-muted-foreground">Updated</dt><dd className="text-right tabular-nums">{timestamp(run.updatedAt)}</dd>
|
|
<dt className="text-muted-foreground">Finished</dt><dd className="text-right tabular-nums">{timestamp(run.finishedAt)}</dd>
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
|
|
<section className="mt-4" aria-label="Sensitivity analysis counters">
|
|
<h3 className="thot-label mb-2">Results</h3>
|
|
<div className="overflow-x-auto rounded-md border border-border bg-muted/20">
|
|
<table className="w-full min-w-[20rem] table-fixed" aria-label="Sensitivity analysis progress">
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted/45">
|
|
{progressCounters.map(([name, label]) => (
|
|
<th key={name} scope="col" className="border-l border-border px-2 py-1.5 text-left text-xs font-semibold text-muted-foreground first:border-l-0">
|
|
{label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
{progressCounters.map(([name]) => (
|
|
<td key={name} data-count={name} className="border-l border-border px-2 py-1.5 text-base font-semibold tabular-nums first:border-l-0">
|
|
{run[name]}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
{finalError ? (
|
|
<div className="mt-3 rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
|
|
{finalError}
|
|
</div>
|
|
) : null}
|
|
|
|
<section className="thot-catalog-drawer__events mt-3" aria-label="Sensitivity analysis log">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<h3 className="thot-label">Events</h3>
|
|
<div className="flex items-center gap-2">
|
|
{!followingEventTail && events.length > 0 ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="xs"
|
|
onClick={jumpToLatestEvent}
|
|
>
|
|
Jump to latest
|
|
</Button>
|
|
) : null}
|
|
<span className="text-xs tabular-nums text-muted-foreground">{events.length}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref={eventLogRef}
|
|
role="log"
|
|
aria-label="Sensitivity analysis events"
|
|
aria-relevant="additions"
|
|
tabIndex={0}
|
|
onScroll={handleEventLogScroll}
|
|
className="thot-catalog-drawer__event-log overflow-y-auto rounded-md bg-zinc-950 p-3 font-mono text-xs leading-5 text-zinc-200"
|
|
>
|
|
{events.length === 0 ? <p className="text-zinc-500">Waiting for events…</p> : events.map((event) => (
|
|
<p key={event.sequence} className={event.level === "error" ? "text-red-300" : event.level === "warning" ? "text-warning" : undefined}>
|
|
<span className="mr-2 text-zinc-500">{new Date(event.createdAt).toLocaleTimeString()}</span>{event.message}
|
|
</p>
|
|
))}
|
|
</div>
|
|
{eventQuery.isError ? <p role="alert" className="mt-2 text-sm text-destructive">{apiErrorMessage(eventQuery.error)}</p> : null}
|
|
</section>
|
|
</div>
|
|
|
|
<section className="thot-catalog-drawer__history" aria-label="Sensitivity analysis run history">
|
|
<div className="mb-2 flex items-center justify-between gap-3">
|
|
<h3 className="thot-label">Recent runs</h3>
|
|
<span className="text-xs tabular-nums text-muted-foreground">
|
|
{visibleHistory.length}
|
|
</span>
|
|
</div>
|
|
{historyQuery.isError ? (
|
|
<p role="alert" className="text-sm text-destructive">{apiErrorMessage(historyQuery.error)}</p>
|
|
) : historyQuery.isLoading ? (
|
|
<p className="text-sm text-muted-foreground">Loading analysis history…</p>
|
|
) : visibleHistory.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No sensitivity analysis runs yet.</p>
|
|
) : (
|
|
<div className="thot-catalog-drawer__history-list divide-y divide-border overflow-y-auto rounded-md border border-border">
|
|
{visibleHistory.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
aria-label={`${statusLabel(item)} · ${item.scope.replaceAll("_", " ")}`}
|
|
aria-current={item.id === run.id ? "true" : undefined}
|
|
data-status={item.status}
|
|
className="flex w-full items-start justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/25"
|
|
onClick={() => onRunUpdate(item)}
|
|
>
|
|
<span className="font-medium">{statusLabel(item)}</span>
|
|
<span className="shrink-0 text-right text-xs text-muted-foreground">
|
|
{item.suggestedSensitive + item.suggestedNonSensitive + item.unknown}/{item.total}<br />
|
|
{new Date(item.createdAt).toLocaleString()}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</FleetLedgerDrawer>
|
|
);
|
|
}
|