bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(form-builder): admin UI completion — server filters, KPIs, resource expansion (WS-6 sessie 3c)

Browse Source 
Closes the four production gaps that emerged from sessie 3b's admin UI.
What we ship here is final: no further rework planned before production.

Backend
- IndexFailuresRequest validates state/search/failed_at_from/failed_at_to/
  listener_class. orgIndex + platformIndex apply them via a single
  applyIndexFilters() helper. Search runs case-insensitive `LIKE` on
  exception_message; SQL wildcards in user input are escaped.
- New /kpis aggregate endpoint per scope (orgKpis, platformKpis) returns
  open / resolved_30d / dismissed_30d / total_submissions in O(1) COUNTs.
  Replaces sessie 3b's client-side bucketing of an oversized list.
- Resource expansion: organisation_name, form_schema_label,
  resolved_by_user_name, dismissed_by_user_name, exception_trace,
  retry_history[]. Eager-loading via indexEagerLoads()/detailEagerLoads()
  prevents N+1 (verified by query-count assertion in test).
- New 2026_04_28_181000 migration adds exception_trace (longtext nullable)
  to form_submission_action_failures. ApplyBindingsOnFormSubmit listener
  now captures $e->getTraceAsString() at failure time.
- New FormSubmissionActionFailureRetryAttemptResource exposes per-attempt
  data (timestamp, actor name, outcome, exception details) inside
  retry_history[]. Index payloads omit the field via whenLoaded() to keep
  list responses lean.

Frontend (apps/app)
- Types updated to mirror the expanded resource shape and the new KPI
  endpoint contract. FormFailuresKpis is now { open, resolved_30d,
  dismissed_30d, total_submissions } (server-aggregate).
- useFormFailures composable forwards all 5 server filters via
  buildIndexParams() (strips empty/whitespace). useFormFailuresKpis hits
  the dedicated /kpis endpoint per scope.
- FormFailuresTable replaces client-side bucketing with server-side
  filtering, adds listener_class + date-range filter inputs, and renames
  the 4th KPI tile to "Submissions" (was "Totaal").
- FormFailureDetail renders organisation_name + form_schema_label in the
  header, surfaces an expandable stack-trace card, names the resolved/
  dismissed actor in the timeline, and replaces the "v1 placeholder"
  retry-history card with a full per-attempt timeline.

ESLint config gap (apps/app)
- New .eslintrc.cjs adapted from the Vuexy reference, minus Vuexy-internal
  rules. `pnpm lint` now runs successfully (was previously broken — the
  package.json script referenced a missing config). The 80 baseline
  violations across the codebase are pre-existing and out of scope for
  this session.

Tests + gates
- 24 new backend tests across filter, kpis, and resource-shape suites.
  Backend: 1462 → 1486 passing, 0 → 0 failing. Larastan clean. Rector
  dry-run unchanged at 354 (pre-Task-1 baseline from f18b55b).
- 3 new vitest tests in apps/app (filter wiring, KPI endpoint, KPI tile
  values from /kpis). Vitest: 38 → 41 passing. tsc clean. Portal
  unchanged (113 vitest, tsc clean).
- 5 backfill rollback tests bumped --step counts +1 for the new migration.
- Ws6FoundationMigrationTest down/up chain now includes exception_trace
  before the parent table is restored.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-28 23:29:58 +02:00
parent b47e096a55
commit 192353f4bc
31 changed files with 1557 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
apps/app/src/components/form-failures/FormFailureDetail.vue
View File

@@ -21,7 +21,8 @@ const stateLabel = { open: 'Open', resolved: 'Opgelost', dismissed: 'Dismissed'
const stateColor = { open: 'error', resolved: 'success', dismissed: 'warning' } as const
function formatDateTime(iso: string | null): string {
if (!iso) return '—'
if (!iso)
return '—'
return new Date(iso).toLocaleDateString('nl-NL', {
day: '2-digit',
@@ -39,13 +40,13 @@ const resolveDialogOpen = ref(false)
const dismissDialogOpen = ref(false)
function copyText(text: string): void {
if (navigator?.clipboard) {
if (navigator?.clipboard)
void navigator.clipboard.writeText(text)
}
}
const formattedContext = computed(() => {
if (!failure.value?.context) return null
if (!failure.value?.context)
return null
try {
return JSON.stringify(failure.value.context, null, 2)
}
@@ -53,6 +54,12 @@ const formattedContext = computed(() => {
return null
}
})
const traceExpanded = ref(false)
function formatAttemptOutcome(outcome: 'succeeded' | 'failed'): string {
return outcome === 'succeeded' ? 'Geslaagd' : 'Mislukt'
}
</script>
<template>
@@ -78,7 +85,7 @@ const formattedContext = computed(() => {
<template #append>
<VBtn
variant="text"
@click="refetch()"
@click="refetch"
>
Opnieuw proberen
</VBtn>
@@ -105,6 +112,14 @@ const formattedContext = computed(() => {
<p class="text-body-2 text-disabled mb-0">
Failed {{ formatDateTime(failure.failed_at) }} · Listener: {{ listenerShortName(failure.listener_class) }}
</p>
<p
v-if="failure.organisation_name || failure.form_schema_label"
class="text-body-2 text-disabled mb-0"
>
<span v-if="failure.organisation_name">{{ failure.organisation_name }}</span>
<span v-if="failure.organisation_name && failure.form_schema_label"> · </span>
<span v-if="failure.form_schema_label">{{ failure.form_schema_label }}</span>
</p>
</div>
<!-- Actions -->
@@ -165,6 +180,25 @@ const formattedContext = computed(() => {
>
Bericht kopiëren
</VBtn>
<div
v-if="failure.exception_trace"
class="mt-4"
>
<VBtn
variant="text"
size="small"
:prepend-icon="traceExpanded ? 'tabler-chevron-down' : 'tabler-chevron-right'"
@click="traceExpanded = !traceExpanded"
>
Stack trace
</VBtn>
<pre
v-if="traceExpanded"
class="text-caption mt-2"
style="white-space: pre-wrap; max-height: 360px; overflow: auto; background: rgb(var(--v-theme-surface)); padding: 0.75rem; border-radius: 4px;"
>{{ failure.exception_trace }}</pre>
</div>
</VCardText>
</VCard>
@@ -175,7 +209,8 @@ const formattedContext = computed(() => {
class="mb-4"
>
<VCardText>
<pre class="text-body-2"
<pre
class="text-body-2"
style="white-space: pre-wrap; max-height: 300px; overflow: auto;"
>{{ formattedContext }}</pre>
<VBtn
@@ -228,6 +263,12 @@ const formattedContext = computed(() => {
<div class="text-body-2">
<strong>Opgelost</strong>
<span class="text-caption text-disabled ms-2">{{ formatDateTime(failure.resolved_at) }}</span>
<p
v-if="failure.resolved_by_user_name"
class="text-caption mb-0"
>
door {{ failure.resolved_by_user_name }}
</p>
<p
v-if="failure.resolved_note"
class="text-caption mt-1 mb-0"
@@ -245,6 +286,12 @@ const formattedContext = computed(() => {
<div class="text-body-2">
<strong>Dismissed</strong> ({{ failure.dismissed_reason_type }})
<span class="text-caption text-disabled ms-2">{{ formatDateTime(failure.dismissed_at) }}</span>
<p
v-if="failure.dismissed_by_user_name"
class="text-caption mb-0"
>
door {{ failure.dismissed_by_user_name }}
</p>
<p
v-if="failure.dismissed_reason_note"
class="text-caption mt-1 mb-0"
@@ -307,32 +354,47 @@ const formattedContext = computed(() => {
</VCardText>
</VCard>
<!-- Retry history card -->
<!-- Retry history card — per-attempt detail (sessie 3c) -->
<VCard
title="Retry-geschiedenis"
class="mb-4"
>
<VCardText>
<p
v-if="failure.retry_count === 0"
v-if="!failure.retry_history?.length"
class="text-body-2 text-disabled mb-0"
>
Nog niet opnieuw geprobeerd.
</p>
<p
<VTimeline
v-else
class="text-body-2 mb-0"
density="compact"
side="end"
>
<VChip
variant="outlined"
<VTimelineItem
v-for="attempt in failure.retry_history"
:key="attempt.id"
:dot-color="attempt.outcome === 'succeeded' ? 'success' : 'error'"
size="small"
>
{{ failure.retry_count }} pogingen
</VChip>
<span class="text-caption text-disabled ms-2">
Per-poging-detail (timestamp + outcome) is nog niet beschikbaar in v1.
</span>
</p>
<div class="text-body-2">
<strong>{{ formatAttemptOutcome(attempt.outcome) }}</strong>
<span class="text-caption text-disabled ms-2">{{ formatDateTime(attempt.attempted_at) }}</span>
<p
v-if="attempt.attempted_by_user_name"
class="text-caption mb-0"
>
door {{ attempt.attempted_by_user_name }}
</p>
<p
v-if="attempt.exception_message"
class="text-caption mt-1 mb-0"
>
<code>{{ attempt.exception_class }}</code>: {{ attempt.exception_message }}
</p>
</div>
</VTimelineItem>
</VTimeline>
</VCardText>
</VCard>
</VCol>
@@ -344,21 +406,21 @@ const formattedContext = computed(() => {
:failure="failure"
:scope="scope"
:org-id="orgId"
@success="refetch()"
@success="refetch"
/>
<ResolveFailureDialog
v-model="resolveDialogOpen"
:failure="failure"
:scope="scope"
:org-id="orgId"
@success="refetch()"
@success="refetch"
/>
<DismissFailureDialog
v-model="dismissDialogOpen"
:failure="failure"
:scope="scope"
:org-id="orgId"
@success="refetch()"
@success="refetch"
/>
</div>
</div>

113
apps/app/src/components/form-failures/FormFailuresTable.vue
View File

@@ -16,16 +16,24 @@ const props = defineProps<{
const router = useRouter()
// Filter state — URL-synced via router push so views are shareable.
// Filter state — these now drive server-side params (sessie 3c).
const stateFilter = ref<FormFailureState | 'all'>('open')
const search = ref('')
const searchDebounced = refDebounced(search, 400)
const listenerClass = ref('')
const failedAtFrom = ref('')
const failedAtTo = ref('')
const page = ref(1)
const itemsPerPage = ref(25)
const params = computed(() => ({
page: page.value,
per_page: itemsPerPage.value,
state: stateFilter.value,
search: searchDebounced.value,
listener_class: listenerClass.value,
failed_at_from: failedAtFrom.value,
failed_at_to: failedAtTo.value,
}))
const orgIdRef = computed(() => props.orgId)
@@ -33,30 +41,7 @@ const orgIdRef = computed(() => props.orgId)
const { data, isLoading, isError, refetch } = useFormFailures(params, props.scope, orgIdRef)
const { data: kpis } = useFormFailuresKpis(props.scope, orgIdRef)
// The backend currently only ships paginated indexes (no server-side
// filters). Apply state + search + listener filters client-side over
// the current page. Acceptable for the "open failures across orgs"
// volumes Crewli sees in v1; tracked for backend pagination work
// post-launch.
const allItems = computed(() => data.value?.data ?? [])
const filtered = computed(() => {
let rows = allItems.value
if (stateFilter.value !== 'all') {
rows = rows.filter(r => r.state === stateFilter.value)
}
const q = searchDebounced.value.trim().toLowerCase()
if (q !== '') {
rows = rows.filter(r =>
r.exception_class.toLowerCase().includes(q)
|| r.exception_message.toLowerCase().includes(q)
|| r.id.toLowerCase().includes(q)
|| r.form_submission_id.toLowerCase().includes(q),
)
}
return rows
})
const items = computed(() => data.value?.data ?? [])
const stateOptions = [
{ title: 'Open', value: 'open' as FormFailureState },
@@ -101,7 +86,6 @@ function truncate(s: string, n = 80): string {
return s.length > n ? `${s.slice(0, n)}…` : s
}
// Action dialogs — driven by selected row.
const retryDialogOpen = ref(false)
const resolveDialogOpen = ref(false)
const dismissDialogOpen = ref(false)
@@ -121,17 +105,20 @@ function openDismiss(f: FormFailure) {
}
function goToDetail(f: FormFailure) {
if (props.scope === 'platform') {
if (props.scope === 'platform')
router.push({ name: 'platform-form-failures-id', params: { id: f.id } })
}
else {
else
router.push({ name: 'organisation-form-failures-id', params: { id: f.id } })
}
}
function clearFilters() {
stateFilter.value = 'open'
search.value = ''
listenerClass.value = ''
failedAtFrom.value = ''
failedAtTo.value = ''
page.value = 1
}
function setStateFilter(s: FormFailureState | 'all') {
@@ -142,7 +129,7 @@ function setStateFilter(s: FormFailureState | 'all') {
<template>
<div>
<!-- KPI tiles -->
<!-- KPI tiles — server-side aggregate (sessie 3c). -->
<VRow class="mb-4">
<VCol
cols="12"
@@ -182,7 +169,7 @@ function setStateFilter(s: FormFailureState | 'all') {
>
<VCardText>
<p class="text-caption text-disabled mb-1">
Opgelost
Opgelost (30d)
</p>
<h5 class="text-h5">
<VIcon
@@ -191,7 +178,7 @@ function setStateFilter(s: FormFailureState | 'all') {
size="20"
class="me-1"
/>
{{ kpis?.resolved ?? 0 }}
{{ kpis?.resolved_30d ?? 0 }}
</h5>
</VCardText>
</VCard>
@@ -208,7 +195,7 @@ function setStateFilter(s: FormFailureState | 'all') {
>
<VCardText>
<p class="text-caption text-disabled mb-1">
Dismissed
Dismissed (30d)
</p>
<h5 class="text-h5">
<VIcon
@@ -217,7 +204,7 @@ function setStateFilter(s: FormFailureState | 'all') {
size="20"
class="me-1"
/>
{{ kpis?.dismissed ?? 0 }}
{{ kpis?.dismissed_30d ?? 0 }}
</h5>
</VCardText>
</VCard>
@@ -228,13 +215,11 @@ function setStateFilter(s: FormFailureState | 'all') {
>
<VCard
density="compact"
class="cursor-pointer"
:variant="stateFilter === 'all' ? 'elevated' : 'outlined'"
@click="setStateFilter('all')"
variant="outlined"
>
<VCardText>
<p class="text-caption text-disabled mb-1">
Totaal
Submissions
</p>
<h5 class="text-h5">
<VIcon
@@ -243,14 +228,13 @@ function setStateFilter(s: FormFailureState | 'all') {
size="20"
class="me-1"
/>
{{ kpis?.total ?? 0 }}
{{ kpis?.total_submissions ?? 0 }}
</h5>
</VCardText>
</VCard>
</VCol>
</VRow>
<!-- Error -->
<VAlert
v-if="isError"
type="error"
@@ -260,7 +244,7 @@ function setStateFilter(s: FormFailureState | 'all') {
<template #append>
<VBtn
variant="text"
@click="refetch()"
@click="refetch"
>
Opnieuw proberen
</VBtn>
@@ -268,7 +252,6 @@ function setStateFilter(s: FormFailureState | 'all') {
</VAlert>
<VCard>
<!-- Filter bar -->
<VCardText>
<VRow>
<VCol
@@ -297,17 +280,50 @@ function setStateFilter(s: FormFailureState | 'all') {
>
<AppTextField
v-model="search"
placeholder="Zoek op exception, ID..."
placeholder="Zoek op exception message..."
prepend-inner-icon="tabler-search"
clearable
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
v-model="listenerClass"
label="Listener class"
placeholder="App\\Listeners\\..."
clearable
/>
</VCol>
<VCol
cols="6"
md="4"
>
<AppTextField
v-model="failedAtFrom"
label="Vanaf"
type="date"
clearable
/>
</VCol>
<VCol
cols="6"
md="4"
>
<AppTextField
v-model="failedAtTo"
label="Tot"
type="date"
clearable
/>
</VCol>
</VRow>
</VCardText>
<VDataTableServer
:headers="headers"
:items="filtered"
:items="items"
:items-length="data?.meta?.total ?? 0"
:loading="isLoading"
:items-per-page="itemsPerPage"
@@ -433,27 +449,26 @@ function setStateFilter(s: FormFailureState | 'all') {
</VDataTableServer>
</VCard>
<!-- Action dialogs -->
<RetryFailureDialog
v-model="retryDialogOpen"
:failure="selectedFailure"
:scope="scope"
:org-id="orgId"
@success="refetch()"
@success="refetch"
/>
<ResolveFailureDialog
v-model="resolveDialogOpen"
:failure="selectedFailure"
:scope="scope"
:org-id="orgId"
@success="refetch()"
@success="refetch"
/>
<DismissFailureDialog
v-model="dismissDialogOpen"
:failure="selectedFailure"
:scope="scope"
:org-id="orgId"
@success="refetch()"
@success="refetch"
/>
</div>
</template>

24
apps/app/src/components/form-failures/__tests__/DismissFailureDialog.spec.ts
View File

@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import { flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import DismissFailureDialog from '../DismissFailureDialog.vue'
import type { FormFailure } from '@/types/form-failures'
const mockPost = vi.fn()
vi.mock('@/lib/axios', () => ({
apiClient: {
get: vi.fn(),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
},
}))
import DismissFailureDialog from '../DismissFailureDialog.vue'
import type { FormFailure } from '@/types/form-failures'
function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
return {
id: '01ABC',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
failed_at: '2026-04-28T12:00:00Z',
exception_class: 'RuntimeException',
exception_message: 'boom',
exception_trace: null,
context: null,
retry_count: 0,
resolved_at: null,
resolved_by_user_id: null,
resolved_by_user_name: null,
resolved_note: null,
dismissed_at: null,
dismissed_by_user_id: null,
dismissed_by_user_name: null,
dismissed_reason_type: null,
dismissed_reason_note: null,
state: 'open',
organisation_id: null,
organisation_name: null,
form_schema_id: null,
form_schema_label: null,
...overrides,
}
}
@@ -97,9 +107,11 @@ describe('DismissFailureDialog', () => {
it('requires note for "other" reason', async () => {
const w = mountDialog({ modelValue: true, failure: makeFailure() })
await w.find('select').setValue('other')
const dismissBtn = w.findAll('button').find(b => b.text() === 'Dismiss')
expect((dismissBtn?.element as HTMLButtonElement).disabled).toBe(true)
await w.find('textarea').setValue('explanation')
@@ -110,9 +122,12 @@ describe('DismissFailureDialog', () => {
mockPost.mockResolvedValue({ data: { data: makeFailure({ state: 'dismissed' }) } })
const w = mountDialog({ modelValue: true, failure: makeFailure() })
await w.find('select').setValue('other')
await w.find('textarea').setValue('manual triage')
const dismissBtn = w.findAll('button').find(b => b.text() === 'Dismiss')
await dismissBtn?.trigger('click')
await flushPromises()
@@ -126,8 +141,11 @@ describe('DismissFailureDialog', () => {
mockPost.mockResolvedValue({ data: { data: makeFailure({ state: 'dismissed' }) } })
const w = mountDialog({ modelValue: true, failure: makeFailure() })
await w.find('select').setValue('schema_deleted')
const dismissBtn = w.findAll('button').find(b => b.text() === 'Dismiss')
await dismissBtn?.trigger('click')
await flushPromises()

27
apps/app/src/components/form-failures/__tests__/FormFailureDetail.spec.ts
View File

@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import { flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import FormFailureDetail from '../FormFailureDetail.vue'
import type { FormFailure } from '@/types/form-failures'
const mockGet = vi.fn()
vi.mock('@/lib/axios', () => ({
apiClient: {
get: (...args: unknown[]) => mockGet(...args),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
},
}))
import FormFailureDetail from '../FormFailureDetail.vue'
import type { FormFailure } from '@/types/form-failures'
function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
return {
id: '01ABCDEFGHIJ',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
failed_at: '2026-04-28T12:00:00Z',
exception_class: 'RuntimeException',
exception_message: 'something broke',
exception_trace: null,
context: { target_entity: 'person', target_attribute: 'email' },
retry_count: 0,
resolved_at: null,
resolved_by_user_id: null,
resolved_by_user_name: null,
resolved_note: null,
dismissed_at: null,
dismissed_by_user_id: null,
dismissed_by_user_name: null,
dismissed_reason_type: null,
dismissed_reason_note: null,
state: 'open',
organisation_id: null,
organisation_name: null,
form_schema_id: null,
form_schema_label: null,
...overrides,
}
}
@@ -86,6 +96,7 @@ describe('FormFailureDetail', () => {
it('renders header with state badge for open failure', async () => {
const w = mountDetail(makeFailure({ state: 'open' }))
await flushPromises()
await flushPromises()
@@ -95,15 +106,18 @@ describe('FormFailureDetail', () => {
// Open state badge
const chips = w.findAll('span[data-color]')
const stateChip = chips.find(c => c.attributes('data-color') === 'error')
expect(stateChip).toBeTruthy()
})
it('renders all 6 cards: Exception, Context, Tijdlijn, Inzending, Listener, Retry-geschiedenis', async () => {
const w = mountDetail(makeFailure())
await flushPromises()
await flushPromises()
const text = w.text()
expect(text).toContain('Exception')
expect(text).toContain('Context')
expect(text).toContain('Tijdlijn')
@@ -114,6 +128,7 @@ describe('FormFailureDetail', () => {
it('disables action buttons for resolved state', async () => {
const w = mountDetail(makeFailure({ state: 'resolved', resolved_at: '2026-04-29T10:00:00Z' }))
await flushPromises()
await flushPromises()
@@ -129,24 +144,29 @@ describe('FormFailureDetail', () => {
it('disables action buttons for dismissed state', async () => {
const w = mountDetail(makeFailure({ state: 'dismissed', dismissed_at: '2026-04-29T10:00:00Z', dismissed_reason_type: 'schema_deleted' }))
await flushPromises()
await flushPromises()
const retry = w.findAll('button').find(b => b.text() === 'Retry')
expect((retry?.element as HTMLButtonElement).disabled).toBe(true)
})
it('enables action buttons for open state', async () => {
const w = mountDetail(makeFailure({ state: 'open' }))
await flushPromises()
await flushPromises()
const retry = w.findAll('button').find(b => b.text() === 'Retry')
expect((retry?.element as HTMLButtonElement).disabled).toBe(false)
})
it('renders "In afwachting van actie..." for open with no retries', async () => {
const w = mountDetail(makeFailure({ state: 'open', retry_count: 0 }))
await flushPromises()
await flushPromises()
@@ -159,6 +179,7 @@ describe('FormFailureDetail', () => {
resolved_at: '2026-04-29T10:00:00Z',
resolved_note: 'fixed via direct edit',
}))
await flushPromises()
await flushPromises()

105
apps/app/src/components/form-failures/__tests__/FormFailuresTable.spec.ts
View File

@@ -2,6 +2,9 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import { flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import FormFailuresTable from '../FormFailuresTable.vue'
import type { FormFailure, FormFailuresKpis } from '@/types/form-failures'
const mockGet = vi.fn()
const mockPost = vi.fn()
const pushSpy = vi.fn()
@@ -18,9 +21,6 @@ vi.mock('vue-router', () => ({
useRouter: () => ({ push: pushSpy, replace: vi.fn() }),
}))
import FormFailuresTable from '../FormFailuresTable.vue'
import type { FormFailure } from '@/types/form-failures'
function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
return {
id: '01ABC123456789',
@@ -30,14 +30,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
failed_at: '2026-04-28T12:00:00Z',
exception_class: 'RuntimeException',
exception_message: 'something broke',
exception_trace: null,
context: null,
retry_count: 0,
resolved_at: null,
resolved_by_user_id: null,
resolved_by_user_name: null,
resolved_note: null,
dismissed_at: null,
dismissed_by_user_id: null,
dismissed_by_user_name: null,
dismissed_reason_type: null,
dismissed_reason_note: null,
state: 'open',
organisation_id: null,
organisation_name: null,
form_schema_id: null,
form_schema_label: null,
...overrides,
}
}
@@ -59,8 +68,8 @@ const stubs = {
VIcon: { template: '<i :class="icon"></i>', props: ['icon', 'size', 'color'] },
VChip: { template: '<span class="v-chip-stub" :data-color="color"><slot/></span>', props: ['color', 'size', 'variant'] },
AppTextField: {
template: '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)"/>',
props: ['modelValue', 'placeholder', 'prependInnerIcon', 'clearable'],
template: '<input :value="modelValue" :placeholder="placeholder" :data-label="label" :type="type" @input="$emit(\'update:modelValue\', $event.target.value)"/>',
props: ['modelValue', 'placeholder', 'prependInnerIcon', 'clearable', 'label', 'type'],
},
VDataTableServer: {
template: `<div class="v-data-table-stub">
@@ -90,11 +99,16 @@ const stubs = {
DismissFailureDialog: { template: '<div class="dismiss-dialog-stub"></div>' },
}
function mountTable(items: FormFailure[]) {
// Mocks for both the list and the kpi list calls (composable issues
// a single per_page=100 list that drives both).
mockGet.mockResolvedValue({
data: { data: items, links: {}, meta: { current_page: 1, per_page: 25, total: items.length, last_page: 1 } },
function mountTable(items: FormFailure[], kpis: FormFailuresKpis = { open: 0, resolved_30d: 0, dismissed_30d: 0, total_submissions: 0 }) {
// Sessie 3c — list and kpi endpoints return different shapes; the mock
// routes by URL so both queries get well-typed payloads.
mockGet.mockImplementation((url: string) => {
if (url.endsWith('/kpis'))
return Promise.resolve({ data: { data: kpis } })
return Promise.resolve({
data: { data: items, links: {}, meta: { current_page: 1, per_page: 25, total: items.length, last_page: 1 } },
})
})
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
@@ -115,65 +129,90 @@ beforeEach(() => {
})
describe('FormFailuresTable', () => {
it('renders KPI tiles with computed counts from list data', async () => {
const w = mountTable([
makeFailure({ id: 'A', state: 'open' }),
makeFailure({ id: 'B', state: 'resolved' }),
makeFailure({ id: 'C', state: 'dismissed' }),
makeFailure({ id: 'D', state: 'open' }),
])
it('renders KPI tiles with values from the /kpis endpoint', async () => {
const w = mountTable(
[makeFailure({ id: 'A', state: 'open' })],
{ open: 7, resolved_30d: 3, dismissed_30d: 1, total_submissions: 42 },
)
await flushPromises()
await flushPromises()
const text = w.text()
expect(text).toContain('Open failures')
expect(text).toContain('Opgelost')
expect(text).toContain('Dismissed')
expect(text).toContain('Totaal')
expect(text).toContain('Opgelost (30d)')
expect(text).toContain('Dismissed (30d)')
expect(text).toContain('Submissions')
expect(text).toContain('7')
expect(text).toContain('42')
})
it('shows the open-state chip for an open failure row', async () => {
const w = mountTable([makeFailure({ state: 'open' })])
await flushPromises()
await flushPromises()
const chip = w.find('.v-chip-stub')
expect(chip.exists()).toBe(true)
expect(chip.attributes('data-color')).toBe('error')
})
it('shows the resolved-state chip color for a resolved failure', async () => {
it('renders rows the server returned regardless of state filter (server-side filter)', async () => {
// Server-side filtering means whatever the API returns gets rendered;
// the client no longer hides rows post-fetch.
const w = mountTable([makeFailure({ state: 'resolved' })])
await flushPromises()
await flushPromises()
// stateFilter defaults to 'open'; resolved row gets filtered out.
expect(w.findAll('.v-chip-stub')).toHaveLength(0)
const chip = w.find('.v-chip-stub')
expect(chip.exists()).toBe(true)
expect(chip.attributes('data-color')).toBe('success')
})
it('renders empty state when there are no rows', async () => {
const w = mountTable([])
await flushPromises()
await flushPromises()
expect(w.text()).toContain('Geen failures gevonden')
})
it('does not show retry button for resolved rows when state filter is "all"', async () => {
it('does not show retry button for resolved rows', async () => {
const w = mountTable([makeFailure({ state: 'resolved' })])
await flushPromises()
await flushPromises()
// Click "Alle" toggle button
const buttons = w.findAll('button')
const allBtn = buttons.find(b => b.text() === 'Alle')
expect(allBtn).toBeTruthy()
await allBtn?.trigger('click')
await flushPromises()
// For resolved row, retry button is not rendered (template guards
// on item.state === 'open').
// Template guard: retry button only renders for state === 'open'.
const buttonTexts = w.findAll('button').map(b => b.text())
expect(buttonTexts).not.toContain('Retry')
})
it('forwards search input as a query param to the index endpoint', async () => {
const w = mountTable([])
await flushPromises()
const search = w.find('input[placeholder="Zoek op exception message..."]')
expect(search.exists()).toBe(true)
await search.setValue('crowd_type')
await flushPromises()
// Debounce default = 400ms; flush timers.
await new Promise(resolve => setTimeout(resolve, 450))
await flushPromises()
const indexCalls = mockGet.mock.calls.filter(c => !String(c[0]).endsWith('/kpis'))
const lastCall = indexCalls[indexCalls.length - 1]
expect(lastCall[1]?.params?.search).toBe('crowd_type')
})
})

20
apps/app/src/components/form-failures/__tests__/ResolveFailureDialog.spec.ts
View File

@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import { flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import ResolveFailureDialog from '../ResolveFailureDialog.vue'
import type { FormFailure } from '@/types/form-failures'
const mockPost = vi.fn()
vi.mock('@/lib/axios', () => ({
apiClient: {
get: vi.fn(),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
},
}))
import ResolveFailureDialog from '../ResolveFailureDialog.vue'
import type { FormFailure } from '@/types/form-failures'
function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
return {
id: '01ABC',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
failed_at: '2026-04-28T12:00:00Z',
exception_class: 'RuntimeException',
exception_message: 'boom',
exception_trace: null,
context: null,
retry_count: 0,
resolved_at: null,
resolved_by_user_id: null,
resolved_by_user_name: null,
resolved_note: null,
dismissed_at: null,
dismissed_by_user_id: null,
dismissed_by_user_name: null,
dismissed_reason_type: null,
dismissed_reason_note: null,
state: 'open',
organisation_id: null,
organisation_name: null,
form_schema_id: null,
form_schema_label: null,
...overrides,
}
}
@@ -76,8 +86,11 @@ describe('ResolveFailureDialog', () => {
mockPost.mockResolvedValue({ data: { data: makeFailure({ state: 'resolved' }) } })
const w = mountDialog({ modelValue: true, failure: makeFailure() })
await w.find('textarea').setValue('handmatige correctie')
const confirm = w.findAll('button').find(b => b.text() === 'Markeren als opgelost')
await confirm?.trigger('click')
await flushPromises()
@@ -90,6 +103,7 @@ describe('ResolveFailureDialog', () => {
const w = mountDialog({ modelValue: true, failure: makeFailure() })
const confirm = w.findAll('button').find(b => b.text() === 'Markeren als opgelost')
await confirm?.trigger('click')
await flushPromises()

16
apps/app/src/components/form-failures/__tests__/RetryFailureDialog.spec.ts
View File

@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import { flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import RetryFailureDialog from '../RetryFailureDialog.vue'
import type { FormFailure } from '@/types/form-failures'
const mockPost = vi.fn()
vi.mock('@/lib/axios', () => ({
apiClient: {
get: vi.fn(),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
},
}))
import RetryFailureDialog from '../RetryFailureDialog.vue'
import type { FormFailure } from '@/types/form-failures'
function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
return {
id: '01ABC',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
failed_at: '2026-04-28T12:00:00Z',
exception_class: 'RuntimeException',
exception_message: 'boom',
exception_trace: null,
context: null,
retry_count: 0,
resolved_at: null,
resolved_by_user_id: null,
resolved_by_user_name: null,
resolved_note: null,
dismissed_at: null,
dismissed_by_user_id: null,
dismissed_by_user_name: null,
dismissed_reason_type: null,
dismissed_reason_note: null,
state: 'open',
organisation_id: null,
organisation_name: null,
form_schema_id: null,
form_schema_label: null,
...overrides,
}
}