feat: complete catalog sensitivity enhancements
This commit is contained in:
Codex
@@ -2,18 +2,21 @@ 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;
|
||||
}
|
||||
@@ -55,6 +58,7 @@ export function SensitivityAnalysisHistoryDrawer({
|
||||
open,
|
||||
databaseId = null,
|
||||
run: initialRun,
|
||||
awaitingRun = false,
|
||||
onClose,
|
||||
onRunUpdate,
|
||||
}: Props) {
|
||||
@@ -66,7 +70,7 @@ export function SensitivityAnalysisHistoryDrawer({
|
||||
enabled: open && Boolean(runId),
|
||||
initialData: initialRun ?? undefined,
|
||||
retry: false,
|
||||
refetchInterval: (query) => isTerminal(query.state.data) ? false : 1_000,
|
||||
refetchInterval: (query) => isTerminal(query.state.data) ? false : 750,
|
||||
});
|
||||
const run = runQuery.data;
|
||||
const eventQuery = useQuery({
|
||||
@@ -74,26 +78,42 @@ export function SensitivityAnalysisHistoryDrawer({
|
||||
queryFn: () => listSensitivityAnalysisEvents(runId!),
|
||||
enabled: open && Boolean(runId),
|
||||
retry: false,
|
||||
refetchInterval: run && isTerminal(run) ? false : 1_500,
|
||||
refetchInterval: run && isTerminal(run) ? false : 750,
|
||||
});
|
||||
const historyQuery = useQuery({
|
||||
queryKey: HISTORY_QUERY_KEY,
|
||||
queryFn: () => listSensitivityAnalysisRuns(50),
|
||||
enabled: open,
|
||||
retry: false,
|
||||
refetchInterval: (query) => query.state.data?.some((item) => !isTerminal(item))
|
||||
? 3_000
|
||||
: 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 || initialRun || !visibleHistory[0]) return;
|
||||
onRunUpdate(visibleHistory[0]);
|
||||
}, [initialRun, onRunUpdate, open, visibleHistory]);
|
||||
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;
|
||||
@@ -107,6 +127,52 @@ export function SensitivityAnalysisHistoryDrawer({
|
||||
}, [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
|
||||
@@ -122,8 +188,10 @@ export function SensitivityAnalysisHistoryDrawer({
|
||||
<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 || (historyQuery.data?.length ?? 0) > 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Loading analysis history…</p>
|
||||
) : 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>
|
||||
@@ -136,7 +204,6 @@ export function SensitivityAnalysisHistoryDrawer({
|
||||
);
|
||||
}
|
||||
|
||||
const events = eventQuery.data ?? [];
|
||||
const finalError = safeFinalError(run.errorSummary);
|
||||
const engineDisplay = run.engine === "local"
|
||||
? `Local rules (${run.policyVersion ?? "unknown policy"})`
|
||||
@@ -229,11 +296,27 @@ export function SensitivityAnalysisHistoryDrawer({
|
||||
<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>
|
||||
<span className="text-xs tabular-nums text-muted-foreground">{events.length}</span>
|
||||
<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) => (
|
||||
|
||||
Reference in New Issue
Block a user