Add paginated test history listing with disable option
Add GET /tests endpoint returning lightweight test summaries (grade, score, domain, date) with pagination, using database-level JSON extraction to avoid loading full report blobs. The feature can be disabled with --disable-test-list flag. Frontend includes a new /tests/ page with table view and a conditional "History" navbar link. Fixes: https://github.com/happyDomain/happydeliver/issues/12
This commit is contained in:
parent
e540377bd9
commit
7422f6ed0a
12 changed files with 546 additions and 3 deletions
72
web/src/lib/components/HistoryTable.svelte
Normal file
72
web/src/lib/components/HistoryTable.svelte
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
import type { TestSummary } from "$lib/api/types.gen";
|
||||
import GradeDisplay from "./GradeDisplay.svelte";
|
||||
|
||||
interface Props {
|
||||
tests: TestSummary[];
|
||||
}
|
||||
|
||||
let { tests }: Props = $props();
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="table-responsive shadow-sm">
|
||||
<table class="table table-hover mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ps-4" style="width: 80px;">Grade</th>
|
||||
<th style="width: 80px;">Score</th>
|
||||
<th>Domain</th>
|
||||
<th>Date</th>
|
||||
<th style="width: 50px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each tests as test}
|
||||
<tr class="cursor-pointer" onclick={() => goto(`/test/${test.test_id}`)}>
|
||||
<td class="ps-4">
|
||||
<GradeDisplay grade={test.grade} size="small" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">{test.score}%</span>
|
||||
</td>
|
||||
<td>
|
||||
{#if test.from_domain}
|
||||
<code>{test.from_domain}</code>
|
||||
{:else}
|
||||
<span class="text-muted">-</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-muted">
|
||||
{formatDate(test.created_at)}
|
||||
</td>
|
||||
<td>
|
||||
<i class="bi bi-chevron-right text-muted"></i>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-pointer:hover td {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -23,5 +23,6 @@ export { default as RspamdCard } from "./RspamdCard.svelte";
|
|||
export { default as SpamAssassinCard } from "./SpamAssassinCard.svelte";
|
||||
export { default as SpfRecordsDisplay } from "./SpfRecordsDisplay.svelte";
|
||||
export { default as SummaryCard } from "./SummaryCard.svelte";
|
||||
export { default as HistoryTable } from "./HistoryTable.svelte";
|
||||
export { default as TinySurvey } from "./TinySurvey.svelte";
|
||||
export { default as WhitelistCard } from "./WhitelistCard.svelte";
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ interface AppConfig {
|
|||
survey_url?: string;
|
||||
custom_logo_url?: string;
|
||||
rbls?: string[];
|
||||
test_list_enabled?: boolean;
|
||||
}
|
||||
|
||||
const defaultConfig: AppConfig = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue