78 lines
3.4 KiB
Svelte
78 lines
3.4 KiB
Svelte
<!-- [DEF:frontend/src/components/llm/ValidationReport.svelte:Component] -->
|
|
<!-- @TIER: STANDARD -->
|
|
<!-- @PURPOSE: Displays the results of an LLM-based dashboard validation task. -->
|
|
|
|
<script>
|
|
let {
|
|
report,
|
|
} = $props();
|
|
|
|
|
|
function getStatusColor(status) {
|
|
switch (status) {
|
|
case 'PASS': return 'text-green-600 bg-green-100';
|
|
case 'WARN': return 'text-yellow-600 bg-yellow-100';
|
|
case 'FAIL': return 'text-red-600 bg-red-100';
|
|
default: return 'text-gray-600 bg-gray-100';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if result}
|
|
<div class="bg-white shadow rounded-lg p-6 space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-bold text-gray-900">Validation Report</h2>
|
|
<span class={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(result.status)}`}>
|
|
{result.status}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="prose max-w-none">
|
|
<h3 class="text-lg font-semibold">Summary</h3>
|
|
<p>{result.summary}</p>
|
|
</div>
|
|
|
|
{#if result.issues && result.issues.length > 0}
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-semibold">Detected Issues</h3>
|
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">Severity</th>
|
|
<th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Message</th>
|
|
<th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Location</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
{#each result.issues as issue}
|
|
<tr>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm">
|
|
<span class={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(issue.severity)}`}>
|
|
{issue.severity}
|
|
</span>
|
|
</td>
|
|
<td class="px-3 py-4 text-sm text-gray-500">{issue.message}</td>
|
|
<td class="px-3 py-4 text-sm text-gray-500">{issue.location || 'N/A'}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if result.screenshot_path}
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-semibold">Screenshot</h3>
|
|
<img src={`/api/storage/file?path=${encodeURIComponent(result.screenshot_path)}`} alt="Dashboard Screenshot" class="rounded-lg border border-gray-200 shadow-sm max-w-full" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
|
|
<p class="text-gray-500">No validation result available.</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- [/DEF:frontend/src/components/llm/ValidationReport.svelte] --> |