Improve dashboard LLM validation UX and report flow
This commit is contained in:
260
frontend/src/routes/reports/llm/[taskId]/+page.svelte
Normal file
260
frontend/src/routes/reports/llm/[taskId]/+page.svelte
Normal file
@@ -0,0 +1,260 @@
|
||||
<!-- [DEF:frontend/src/routes/reports/llm/[taskId]/+page.svelte:Component] -->
|
||||
<script>
|
||||
/**
|
||||
* @TIER: CRITICAL
|
||||
* @PURPOSE: Full report page for LLM dashboard validation task execution.
|
||||
* @LAYER: UI
|
||||
* @RELATION: CALLS -> /api/tasks/{taskId}, /api/tasks/{taskId}/logs
|
||||
* @RELATION: BINDS_TO -> page store
|
||||
* @UX_STATE: Loading -> Skeleton placeholders visible.
|
||||
* @UX_STATE: Loaded -> Full report with durations, screenshots, sent logs and task logs.
|
||||
* @UX_STATE: Error -> Alert with retry action.
|
||||
* @UX_FEEDBACK: Refresh button reloads report payload.
|
||||
* @UX_RECOVERY: Retry via refresh button after API error.
|
||||
* @TEST_DATA: llm_report_success -> {"task":{"id":"task-1","plugin_id":"llm_dashboard_validation","status":"SUCCESS","started_at":"2026-02-26T12:00:00Z","finished_at":"2026-02-26T12:00:10Z","result":{"summary":"OK","issues":[],"screenshot_paths":["/tmp/s1.png"],"logs_sent_to_llm":["[2026-02-26] explore_json"],"timings":{"validation_duration_ms":10000}}},"logs":[{"timestamp":"2026-02-26T12:00:01Z","level":"INFO","source":"llm","message":"Analyzing"}]}
|
||||
* @TEST_DATA: llm_report_error -> {"error":"Failed to load LLM report"}
|
||||
*/
|
||||
import { onMount } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
import { goto } from "$app/navigation";
|
||||
import { api } from "$lib/api.js";
|
||||
import { t } from "$lib/i18n";
|
||||
import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
|
||||
import Icon from "$lib/ui/Icon.svelte";
|
||||
|
||||
$: taskId = $page.params.taskId;
|
||||
|
||||
let task = null;
|
||||
let logs = [];
|
||||
let isLoading = true;
|
||||
let error = null;
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return "-";
|
||||
const parsed = new Date(value);
|
||||
if (Number.isNaN(parsed.getTime())) return "-";
|
||||
return `${parsed.toLocaleDateString()} ${parsed.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`;
|
||||
}
|
||||
|
||||
function formatMs(value) {
|
||||
const ms = Number(value);
|
||||
if (!Number.isFinite(ms) || ms < 0) return "-";
|
||||
if (ms < 1000) return `${ms} ms`;
|
||||
return `${(ms / 1000).toFixed(2)} s`;
|
||||
}
|
||||
|
||||
function getDashboardCheckResult(resultPayload) {
|
||||
const rawStatus = String(resultPayload?.status || "").toUpperCase();
|
||||
if (rawStatus === "FAIL") return { label: "FAIL", level: "fail", icon: "!" };
|
||||
if (rawStatus === "WARN") return { label: "WARN", level: "warn", icon: "!" };
|
||||
if (rawStatus === "PASS") return { label: "PASS", level: "pass", icon: "OK" };
|
||||
return { label: "UNKNOWN", level: "unknown", icon: "?" };
|
||||
}
|
||||
|
||||
function getCheckResultClasses(level) {
|
||||
if (level === "fail") return "bg-rose-100 text-rose-700 border-rose-200";
|
||||
if (level === "warn") return "bg-amber-100 text-amber-700 border-amber-200";
|
||||
if (level === "pass") return "bg-emerald-100 text-emerald-700 border-emerald-200";
|
||||
return "bg-slate-100 text-slate-700 border-slate-200";
|
||||
}
|
||||
|
||||
async function loadReport() {
|
||||
if (!taskId) return;
|
||||
isLoading = true;
|
||||
error = null;
|
||||
try {
|
||||
const [taskPayload, logsPayload] = await Promise.all([
|
||||
api.getTask(taskId),
|
||||
api.getTaskLogs(taskId, { limit: 1000 }),
|
||||
]);
|
||||
task = taskPayload;
|
||||
logs = Array.isArray(logsPayload) ? logsPayload : [];
|
||||
} catch (err) {
|
||||
error = err?.message || "Failed to load LLM report";
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function backToReports() {
|
||||
goto("/reports");
|
||||
}
|
||||
|
||||
function openTaskDetails() {
|
||||
if (!taskId) return;
|
||||
openDrawerForTask(taskId);
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await loadReport();
|
||||
});
|
||||
|
||||
$: result = task?.result || {};
|
||||
$: checkResult = getDashboardCheckResult(result);
|
||||
$: timings = result?.timings || {};
|
||||
$: screenshotPaths = Array.isArray(result?.screenshot_paths)
|
||||
? result.screenshot_paths
|
||||
: (result?.screenshot_path ? [result.screenshot_path] : []);
|
||||
$: sentLogs = Array.isArray(result?.logs_sent_to_llm) ? result.logs_sent_to_llm : [];
|
||||
</script>
|
||||
|
||||
<div class="mx-auto w-full max-w-7xl space-y-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<button
|
||||
class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
|
||||
on:click={backToReports}
|
||||
>
|
||||
<Icon name="chevronLeft" size={16} />
|
||||
{$t.nav?.reports || "Reports"}
|
||||
</button>
|
||||
<h1 class="mt-2 text-2xl font-bold text-slate-900">
|
||||
{$t.tasks?.result_llm_validation || "LLM Validation Report"}
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-slate-500">Task: {taskId}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
||||
on:click={openTaskDetails}
|
||||
>
|
||||
{$t.tasks?.details_logs || "Task details and logs"}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
|
||||
on:click={loadReport}
|
||||
>
|
||||
{$t.common?.refresh || "Refresh"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-rose-700">
|
||||
<div>{error}</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<div class="space-y-3">
|
||||
<div class="h-24 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
|
||||
<div class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
|
||||
<div class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
|
||||
</div>
|
||||
{:else if task}
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-5">
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Status</p>
|
||||
<p class="mt-2 text-lg font-semibold text-slate-900">{task?.status || "-"}</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Dashboard check</p>
|
||||
<span class={`mt-2 inline-flex items-center gap-1 rounded-full border px-2 py-1 text-sm font-semibold uppercase ${getCheckResultClasses(checkResult.level)}`}>
|
||||
<span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold">
|
||||
{checkResult.icon}
|
||||
</span>
|
||||
{checkResult.label}
|
||||
</span>
|
||||
</div>
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Started</p>
|
||||
<p class="mt-2 text-sm font-semibold text-slate-900">{formatDate(task?.started_at)}</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Finished</p>
|
||||
<p class="mt-2 text-sm font-semibold text-slate-900">{formatDate(task?.finished_at)}</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Duration</p>
|
||||
<p class="mt-2 text-lg font-semibold text-slate-900">{formatMs(timings?.validation_duration_ms)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
Text Report
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-slate-800">{result?.summary || "-"}</p>
|
||||
{#if Array.isArray(result?.issues) && result.issues.length > 0}
|
||||
<div class="mt-4 space-y-2">
|
||||
{#each result.issues as issue}
|
||||
<div class="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm">
|
||||
<div class="font-semibold text-slate-900">{issue?.severity || "INFO"}</div>
|
||||
<div class="text-slate-700">{issue?.message || "-"}</div>
|
||||
{#if issue?.location}
|
||||
<div class="text-xs text-slate-500">Location: {issue.location}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
Screenshots
|
||||
</h2>
|
||||
{#if screenshotPaths.length === 0}
|
||||
<p class="mt-2 text-sm text-slate-500">No screenshots saved.</p>
|
||||
{:else}
|
||||
<div class="mt-3 grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
{#each screenshotPaths as path}
|
||||
<a href={`/api/storage/file?path=${encodeURIComponent(path)}`} target="_blank" rel="noreferrer noopener" class="block">
|
||||
<img
|
||||
src={`/api/storage/file?path=${encodeURIComponent(path)}`}
|
||||
alt="Validation screenshot"
|
||||
class="h-64 w-full rounded-lg border border-slate-200 object-cover"
|
||||
/>
|
||||
<p class="mt-1 truncate text-xs text-slate-500">{path}</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
Logs sent to LLM ({sentLogs.length})
|
||||
</h2>
|
||||
{#if sentLogs.length === 0}
|
||||
<p class="mt-2 text-sm text-slate-500">No source logs were attached.</p>
|
||||
{:else}
|
||||
<pre class="mt-3 max-h-80 overflow-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{sentLogs.join('\n')}</pre>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
Task execution logs ({logs.length})
|
||||
</h2>
|
||||
{#if logs.length === 0}
|
||||
<p class="mt-2 text-sm text-slate-500">No task logs available.</p>
|
||||
{:else}
|
||||
<div class="mt-3 max-h-96 overflow-auto rounded-lg border border-slate-200">
|
||||
<table class="min-w-full divide-y divide-slate-200 text-xs">
|
||||
<thead class="bg-slate-50">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left font-semibold text-slate-600">Time</th>
|
||||
<th class="px-3 py-2 text-left font-semibold text-slate-600">Level</th>
|
||||
<th class="px-3 py-2 text-left font-semibold text-slate-600">Source</th>
|
||||
<th class="px-3 py-2 text-left font-semibold text-slate-600">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
{#each logs as logEntry}
|
||||
<tr>
|
||||
<td class="px-3 py-2 align-top text-slate-600">{formatDate(logEntry?.timestamp)}</td>
|
||||
<td class="px-3 py-2 align-top text-slate-700">{logEntry?.level || "-"}</td>
|
||||
<td class="px-3 py-2 align-top text-slate-700">{logEntry?.source || "-"}</td>
|
||||
<td class="px-3 py-2 align-top text-slate-800 whitespace-pre-wrap">{logEntry?.message || "-"}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- [/DEF:frontend/src/routes/reports/llm/[taskId]/+page.svelte:Component] -->
|
||||
Reference in New Issue
Block a user