test contracts
This commit is contained in:
@@ -16,64 +16,79 @@
|
||||
* @UX_STATE: Error -> Inline error with retry preserving filters.
|
||||
* @UX_FEEDBACK: Filter change reloads list immediately.
|
||||
* @UX_RECOVERY: Retry and clear filters actions available.
|
||||
*
|
||||
* @TEST_CONTRACT Page_Reports ->
|
||||
* {
|
||||
* required_props: {},
|
||||
* optional_props: {},
|
||||
* invariants: [
|
||||
* "Loads reports on mount using query filters",
|
||||
* "Reloads reports automatically upon filter changes",
|
||||
* "Loads selected report detail on click"
|
||||
* ]
|
||||
* }
|
||||
* @TEST_FIXTURE init_state -> {}
|
||||
* @TEST_EDGE server_error -> shows error block and retry button
|
||||
* @TEST_EDGE empty_filtered_list -> displays \"No results matching filters\"
|
||||
* @TEST_INVARIANT pagination_and_filtering -> verifies: [init_state]
|
||||
*/
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '$lib/i18n';
|
||||
import { PageHeader } from '$lib/ui';
|
||||
import { getReports, getReportDetail } from '$lib/api/reports.js';
|
||||
import ReportsList from '$lib/components/reports/ReportsList.svelte';
|
||||
import ReportDetailPanel from '$lib/components/reports/ReportDetailPanel.svelte';
|
||||
import { onMount } from "svelte";
|
||||
import { t } from "$lib/i18n";
|
||||
import { PageHeader } from "$lib/ui";
|
||||
import { getReports, getReportDetail } from "$lib/api/reports.js";
|
||||
import ReportsList from "$lib/components/reports/ReportsList.svelte";
|
||||
import ReportDetailPanel from "$lib/components/reports/ReportDetailPanel.svelte";
|
||||
|
||||
let loading = true;
|
||||
let error = '';
|
||||
let error = "";
|
||||
let collection = null;
|
||||
let selectedReport = null;
|
||||
let selectedReportDetail = null;
|
||||
|
||||
let taskType = 'all';
|
||||
let status = 'all';
|
||||
let taskType = "all";
|
||||
let status = "all";
|
||||
let page = 1;
|
||||
const pageSize = 20;
|
||||
|
||||
const TASK_TYPE_OPTIONS = [
|
||||
{ value: 'all', label: $t.reports?.all_types },
|
||||
{ value: 'llm_verification', label: 'LLM' },
|
||||
{ value: 'backup', label: $t.nav?.backups },
|
||||
{ value: 'migration', label: $t.nav?.migration },
|
||||
{ value: 'documentation', label: 'Documentation' }
|
||||
{ value: "all", label: $t.reports?.all_types },
|
||||
{ value: "llm_verification", label: "LLM" },
|
||||
{ value: "backup", label: $t.nav?.backups },
|
||||
{ value: "migration", label: $t.nav?.migration },
|
||||
{ value: "documentation", label: "Documentation" },
|
||||
];
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: 'all', label: $t.reports?.all_statuses },
|
||||
{ value: 'success', label: 'Success' },
|
||||
{ value: 'failed', label: 'Failed' },
|
||||
{ value: 'in_progress', label: 'In progress' },
|
||||
{ value: 'partial', label: 'Partial' }
|
||||
{ value: "all", label: $t.reports?.all_statuses },
|
||||
{ value: "success", label: "Success" },
|
||||
{ value: "failed", label: "Failed" },
|
||||
{ value: "in_progress", label: "In progress" },
|
||||
{ value: "partial", label: "Partial" },
|
||||
];
|
||||
|
||||
function buildQuery() {
|
||||
return {
|
||||
page,
|
||||
page_size: pageSize,
|
||||
task_types: taskType === 'all' ? [] : [taskType],
|
||||
statuses: status === 'all' ? [] : [status],
|
||||
sort_by: 'updated_at',
|
||||
sort_order: 'desc'
|
||||
task_types: taskType === "all" ? [] : [taskType],
|
||||
statuses: status === "all" ? [] : [status],
|
||||
sort_by: "updated_at",
|
||||
sort_order: "desc",
|
||||
};
|
||||
}
|
||||
|
||||
async function loadReports({ silent = false } = {}) {
|
||||
try {
|
||||
if (!silent) loading = true;
|
||||
error = '';
|
||||
error = "";
|
||||
collection = await getReports(buildQuery());
|
||||
if (!selectedReport && collection?.items?.length) {
|
||||
selectedReport = collection.items[0];
|
||||
selectedReportDetail = await getReportDetail(selectedReport.report_id);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e?.message || 'Failed to load reports';
|
||||
error = e?.message || "Failed to load reports";
|
||||
collection = null;
|
||||
} finally {
|
||||
if (!silent) loading = false;
|
||||
@@ -81,12 +96,12 @@
|
||||
}
|
||||
|
||||
function hasActiveFilters() {
|
||||
return taskType !== 'all' || status !== 'all';
|
||||
return taskType !== "all" || status !== "all";
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
taskType = 'all';
|
||||
status = 'all';
|
||||
taskType = "all";
|
||||
status = "all";
|
||||
page = 1;
|
||||
selectedReport = null;
|
||||
selectedReportDetail = null;
|
||||
@@ -112,7 +127,7 @@
|
||||
|
||||
<div class="mx-auto w-full max-w-7xl space-y-4">
|
||||
<PageHeader
|
||||
title={$t.reports?.title }
|
||||
title={$t.reports?.title}
|
||||
subtitle={() => null}
|
||||
actions={() => null}
|
||||
/>
|
||||
@@ -143,38 +158,52 @@
|
||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
||||
on:click={() => loadReports()}
|
||||
>
|
||||
{$t.common?.refresh }
|
||||
{$t.common?.refresh}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
||||
on:click={clearFilters}
|
||||
>
|
||||
{$t.reports?.clear_filters }
|
||||
{$t.reports?.clear_filters}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
|
||||
{$t.reports?.loading }
|
||||
<div
|
||||
class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm"
|
||||
>
|
||||
{$t.reports?.loading}
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 shadow-sm">
|
||||
<div
|
||||
class="rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 shadow-sm"
|
||||
>
|
||||
<p>{error}</p>
|
||||
<button class="mt-2 inline-flex items-center justify-center rounded-lg border border-red-300 px-3 py-1 text-sm font-medium text-red-700 transition-colors hover:bg-red-100" on:click={() => loadReports()}>
|
||||
{$t.reports?.retry_load || $t.common?.retry }
|
||||
<button
|
||||
class="mt-2 inline-flex items-center justify-center rounded-lg border border-red-300 px-3 py-1 text-sm font-medium text-red-700 transition-colors hover:bg-red-100"
|
||||
on:click={() => loadReports()}
|
||||
>
|
||||
{$t.reports?.retry_load || $t.common?.retry}
|
||||
</button>
|
||||
</div>
|
||||
{:else if !collection || collection.total === 0}
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
|
||||
{$t.reports?.empty }
|
||||
<div
|
||||
class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm"
|
||||
>
|
||||
{$t.reports?.empty}
|
||||
</div>
|
||||
{:else if collection.items.length === 0 && hasActiveFilters()}
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
|
||||
<p>{$t.reports?.filtered_empty }</p>
|
||||
<button class="mt-2 inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-1 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50" on:click={clearFilters}>
|
||||
{$t.reports?.clear_filters }
|
||||
<div
|
||||
class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm"
|
||||
>
|
||||
<p>{$t.reports?.filtered_empty}</p>
|
||||
<button
|
||||
class="mt-2 inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-1 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
||||
on:click={clearFilters}
|
||||
>
|
||||
{$t.reports?.clear_filters}
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -191,4 +220,4 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- [/DEF:UnifiedReportsPage:Component] -->
|
||||
<!-- [/DEF:UnifiedReportsPage:Component] -->
|
||||
|
||||
@@ -13,6 +13,19 @@
|
||||
* @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"}
|
||||
*
|
||||
* @TEST_CONTRACT Page_LLMReport ->
|
||||
* {
|
||||
* required_props: {},
|
||||
* optional_props: {},
|
||||
* invariants: [
|
||||
* "Loads specific task details and logs based on the URL parameter `taskId`",
|
||||
* "Renders detailed statistics seamlessly considering possible missing payload elements",
|
||||
* "Handles missing and non-null validation durations safely"
|
||||
* ]
|
||||
* }
|
||||
* @TEST_FIXTURE init_state -> {"taskId": "task-1"}
|
||||
* @TEST_INVARIANT correct_fetch -> verifies: [init_state]
|
||||
*/
|
||||
import { onMount } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
@@ -45,16 +58,20 @@
|
||||
|
||||
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" };
|
||||
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";
|
||||
if (level === "pass")
|
||||
return "bg-emerald-100 text-emerald-700 border-emerald-200";
|
||||
return "bg-slate-100 text-slate-700 border-slate-200";
|
||||
}
|
||||
|
||||
@@ -94,8 +111,12 @@
|
||||
$: 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 : [];
|
||||
: 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">
|
||||
@@ -130,43 +151,73 @@
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-rose-700">
|
||||
<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
|
||||
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>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -178,11 +229,17 @@
|
||||
{#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="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>
|
||||
<div class="text-xs text-slate-500">
|
||||
Location: {issue.location}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
@@ -199,7 +256,12 @@
|
||||
{: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">
|
||||
<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"
|
||||
@@ -219,7 +281,10 @@
|
||||
{#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>
|
||||
<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>
|
||||
|
||||
@@ -230,23 +295,42 @@
|
||||
{#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">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user