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>