feat : audit log (table + writer + listener + API + admin UI + timeline) (#9)
## Résumé
Implémente le journal d'audit append-only couvrant les 5 tickets de `doc/audit-log.md` et embarque au passage plusieurs corrections périphériques (sidebar Admin/Mon compte, drawer RBAC, Swagger, schema_filter Doctrine) ainsi que l'initialisation de la suite e2e Playwright. Toutes les mutations Doctrine sur les entités portant `#[Auditable]` sont tracées dans une table PostgreSQL dédiée, exposée en lecture seule via API Platform et consultable par les admins dans une page dédiée.
## Ce qui change
### Audit log — cœur de la PR
**Backend**
- Migration : table `audit_log` (UUID v7 natif Postgres en PK, `jsonb changes`, 3 index pour tri chrono, par entité et par utilisateur).
- `AuditLogWriter` : service bas-niveau, écrit via une connexion DBAL dédiée `audit` (même DSN que `default`, service séparé) pour sortir de la transaction ORM en batch. Blacklist defense-in-depth `password`/`plainPassword`/`token`/`secret`.
- `RequestIdProvider` : UUID v4 généré au `kernel.request` principal, injecté dans chaque ligne d'audit de la requête.
- Attributs `#[Auditable]` / `#[AuditIgnore]` dans `src/Shared/Domain/Attribute/` (accessibles par tous les modules).
- `AuditListener` : capture `onFlush` / écriture `postFlush` avec pattern swap-and-clear contre les flushes ré-entrants. Erreurs loguées, jamais propagées. Entité `User` annotée (password / plainPassword ignorés).
- API Platform read-only `/api/audit-logs` (permission RBAC `core.audit_log.view`) : `GET` collection paginée + `GET` item, pas de POST/PUT/PATCH/DELETE. Filtres `entity_type`, `entity_id`, `action`, `performed_by`, `performed_at[after]`/`[before]`.
- `DbalPaginator` implémentant `PaginatorInterface` : `hydra:view` généré automatiquement par API Platform, pas de construction manuelle.
- Ressource `AuditLogEntityTypesResource` + provider dédié pour peupler le filtre par type d'entité côté UI (réponse cachée, pas de requête à chaque ouverture du drawer).
- Permission `core.audit_log.view` déclarée dans `CoreModule::permissions()`.
- `audit_log` exclu du `schema_filter` Doctrine : plus de faux diff sur `make migration-diff`.
**Frontend**
- Page admin `/admin/audit-log` : tableau paginé, filtres locaux (état dans le composant, non persistés dans l'URL — conforme règle CLAUDE.md « Tableaux : pas de persistance URL »), drawer de détail (diff + timeline complète de l'entité), badges colorés par action.
- Composable partagé `useAuditLog` avec `resetAuditLog()` auto-enregistré sur `onAuthSessionCleared` (règle CLAUDE.md composables singletons).
- Composant réutilisable `<AuditTimeline :entity-type :entity-id>` : garde permission (pas d'appel API sans le droit), lazy loading (10 items + bouton « Voir plus »), dates relatives FR via `Intl.RelativeTimeFormat`, skeleton loader.
- Entrée sidebar « Journal d'audit » gated sur `core.audit_log.view` + clés i18n imbriquées dans `fr.json`.
### Fixes embarqués
- **Review fixes audit-log** (commits `37eafd2`, `1505e84`, `99c77eb`) : précision des timestamps, `ESCAPE` sur les `LIKE`, plafond pagination, diverses remarques du 1er tour de review.
- **Sidebar** (`701a480`, `e2fbf51`) : nouvelle section « Administration » + groupe « Mon compte », gate de section sur permissions, « Tableau de bord » déplacé dans « Mon compte ». Convention admin documentée.
- **Drawer RBAC utilisateurs** (`617ee31`, `5f5afcc`) : corrige l'affichage des sites et l'écrasement via merge-patch (garde anti-écrasement + spec `GET /users/{id}/rbac` documentée).
- **Swagger UI** (`6db955f`) : réactivé en ajoutant `symfony/twig-bundle` aux deps (régression depuis l'arrivée d'API Platform 4.2).
- **`phpunit.dist.xml`** : `<env APP_ENV=dev>` forçait la suite à tourner sous `framework.test=false` (→ `test.service_container` introuvable) ; `JWT_PASSPHRASE` ne matchait pas les clés de dev. Corrigés pour débloquer la suite.
### E2E Playwright (nouveau, commit `4603ab2`)
- `playwright.config.ts` + structure `frontend/tests/e2e/` (personas, helpers `loginAs`, page objects `LoginPage` + `SidebarComponent`).
- Specs : `auth/login.spec.ts` + `permissions/sidebar-visibility.spec.ts` (vérifie la visibilité de la sidebar par rôle RBAC).
- Commande `SeedE2ECommand` pour préparer un jeu de données déterministe côté backend.
- `make e2e` ajouté au Makefile.
## Décisions techniques
- **UUID v7 natif Postgres** (16 octets vs 36 en varchar) : index `performed_at` ~40 % plus petit sur une table append-only à croissance infinie.
- **`entity_type` format `module.Entity`** (ex: `core.User`) : évite les collisions si deux modules ont des entités de même nom.
- **`performed_by` dénormalisé** (string, pas FK) : le nom persiste même après suppression de l'utilisateur.
- **Connexion DBAL dédiée `audit`** : évite l'entanglement transactionnel entre audit et ORM en batch.
- **`ManyToMany` non audité** : limitation connue (`getEntityChangeSet()` ne couvre pas les collections) ; extension future via `getScheduledCollectionUpdates()` si besoin.
- **Filtres locaux non persistés dans l'URL** : choix assumé (cf. CLAUDE.md) pour éviter le couplage table ↔ routeur.
## Test plan
- [x] `make test` : 218 tests passent (writer unitaires + listener intégration + API fonctionnels + UserRbacProcessor).
- [x] `npm run lint` + `npm run test` + `npm run build` (frontend).
- [x] Migration appliquée sur dev + test, `audit_log` ignoré par `schema_filter`.
- [x] Permissions synchronisées (`app:sync-permissions`).
- [x] Swagger `/api/docs` accessible de nouveau.
- [ ] Playwright : `make e2e` vert en local (login + sidebar-visibility).
- [ ] Vérifier en local : création/modif/suppression d'un user apparaît dans `/admin/audit-log`.
- [ ] Vérifier : user sans `core.audit_log.view` → 403 sur l'endpoint + item absent de la sidebar.
- [ ] Vérifier : expansion d'une ligne affiche la timeline de l'entité avec dates relatives FR.
- [ ] Vérifier : drawer RBAC utilisateur n'écrase plus la liste des sites au `PATCH`.
## Points d'attention pour le review
- `AuditListener` : pattern swap-and-clear sur `postFlush` — relire la gestion des flushes ré-entrants.
- `DbalPaginator` : vérifier que l'absence d'`Iterator` custom ne casse pas la normalisation API Platform sur collections vides.
- `UserRbacProcessor` : logique merge-patch + garde anti-écrasement des sites (régression corrigée dans `617ee31`).
- Playwright : nouvelle dépendance de dev, s'assurer que `make e2e` ne fait pas partie du pipeline CI par défaut (à brancher explicitement).
Co-authored-by: Matthieu <mtholot19@gmail.com>
Reviewed-on: MALIO-DEV/Coltura#9
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-committed-by: matthieu <matthieu@yuno.malio.fr>
This commit was merged in pull request #9.
This commit is contained in:
100
frontend/shared/components/audit/AuditLogDetail.vue
Normal file
100
frontend/shared/components/audit/AuditLogDetail.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<!--
|
||||
Vue de detail d'une ligne d'audit : tableau field/old/new pour une
|
||||
update, sinon snapshot complet sous forme de liste { cle: valeur }.
|
||||
-->
|
||||
<div class="text-sm">
|
||||
<p class="text-xs text-gray-500 mb-2">
|
||||
<span v-if="entry.ipAddress">IP: {{ entry.ipAddress }}</span>
|
||||
<span v-if="entry.requestId" class="ml-3">Req: {{ entry.requestId }}</span>
|
||||
</p>
|
||||
|
||||
<div v-if="entry.action === 'update'">
|
||||
<!-- Tableau de comparaison field/old/new. MalioDataTable n'est
|
||||
pas adapte ici : cas presentationnel non-paginable (cf.
|
||||
exception documentee dans CLAUDE.md). -->
|
||||
<table class="min-w-full border border-gray-200 text-xs">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.field') }}</th>
|
||||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.old_value') }}</th>
|
||||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.new_value') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(diff, field) in updateDiff" :key="field" class="border-t border-gray-200">
|
||||
<td class="px-2 py-1 font-mono">{{ field }}</td>
|
||||
<td class="px-2 py-1 text-red-700">{{ formatValue(diff.old) }}</td>
|
||||
<td class="px-2 py-1 text-green-700">{{ formatValue(diff.new) }}</td>
|
||||
</tr>
|
||||
<!-- Modifications de collections to-many : shape different
|
||||
{ added: [ids], removed: [ids] } → affiche + et - sur
|
||||
la meme ligne pour garder une colonne field unique. -->
|
||||
<tr v-for="(diff, field) in collectionDiff" :key="`col-${field}`" class="border-t border-gray-200">
|
||||
<td class="px-2 py-1 font-mono">{{ field }}</td>
|
||||
<td class="px-2 py-1 text-red-700">
|
||||
<span v-if="diff.removed.length">− {{ diff.removed.join(', ') }}</span>
|
||||
<span v-else class="text-gray-400">∅</span>
|
||||
</td>
|
||||
<td class="px-2 py-1 text-green-700">
|
||||
<span v-if="diff.added.length">+ {{ diff.added.join(', ') }}</span>
|
||||
<span v-else class="text-gray-400">∅</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-1">
|
||||
<div v-for="(value, key) in entry.changes" :key="key" class="flex gap-2">
|
||||
<span class="font-mono text-xs text-gray-600">{{ key }}:</span>
|
||||
<span class="text-xs">{{ formatValue(value) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { AuditLogEntry } from '~/shared/types'
|
||||
|
||||
const props = defineProps<{ entry: AuditLogEntry }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// Extrait les entrees au shape { old, new } pour les updates scalaires.
|
||||
const updateDiff = computed<Record<string, { old: unknown; new: unknown }>>(() => {
|
||||
const out: Record<string, { old: unknown; new: unknown }> = {}
|
||||
for (const [key, value] of Object.entries(props.entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
|
||||
out[key] = value as { old: unknown; new: unknown }
|
||||
}
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
// Extrait les entrees au shape { added, removed } pour les modifications
|
||||
// de collections to-many (cf. AuditListener::captureCollectionChange).
|
||||
const collectionDiff = computed<Record<string, { added: unknown[]; removed: unknown[] }>>(() => {
|
||||
const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
|
||||
for (const [key, value] of Object.entries(props.entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
|
||||
const diff = value as { added: unknown; removed: unknown }
|
||||
out[key] = {
|
||||
added: Array.isArray(diff.added) ? diff.added : [],
|
||||
removed: Array.isArray(diff.removed) ? diff.removed : [],
|
||||
}
|
||||
}
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
function formatValue(value: unknown): string {
|
||||
if (value === null || value === undefined) return '∅'
|
||||
// Passe par i18n plutot qu'un hardcode FR : si une autre locale est
|
||||
// ajoutee, le rendu s'adapte sans nouvelle passe sur ce composant.
|
||||
if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
|
||||
if (typeof value === 'object') return JSON.stringify(value)
|
||||
return String(value)
|
||||
}
|
||||
</script>
|
||||
252
frontend/shared/components/audit/AuditTimeline.vue
Normal file
252
frontend/shared/components/audit/AuditTimeline.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<!--
|
||||
Garde permission : aucun rendu DOM ni appel API si l'utilisateur n'a
|
||||
pas le droit. On wrappe le contenu dans un bloc v-if plutot qu'un div
|
||||
vide pour eviter de polluer la layout quand le composant est embarque
|
||||
dans une page qui rend deja sa propre structure.
|
||||
-->
|
||||
<div v-if="canView" class="audit-timeline">
|
||||
<!-- Skeleton loader initial -->
|
||||
<ul v-if="loading && entries.length === 0" class="space-y-3">
|
||||
<li v-for="i in 3" :key="i" class="flex gap-3">
|
||||
<div class="h-3 w-3 rounded-full bg-gray-200 animate-pulse mt-1.5" />
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="h-3 w-1/3 rounded bg-gray-200 animate-pulse" />
|
||||
<div class="h-2 w-2/3 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p
|
||||
v-else-if="!loading && entries.length === 0"
|
||||
class="text-sm text-gray-500 italic"
|
||||
>
|
||||
{{ t('audit.timeline.empty') }}
|
||||
</p>
|
||||
|
||||
<ul v-else class="relative border-l-2 border-gray-200 pl-6 space-y-5">
|
||||
<li
|
||||
v-for="entry in entries"
|
||||
:key="entry.id"
|
||||
class="relative"
|
||||
>
|
||||
<!-- Dot sur la barre verticale. Couleur selon action. -->
|
||||
<span
|
||||
class="absolute -left-[31px] top-1 h-3 w-3 rounded-full ring-2 ring-white"
|
||||
:class="dotClass(entry.action)"
|
||||
/>
|
||||
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm">
|
||||
<span class="font-medium">{{ entry.performedBy }}</span>
|
||||
<span class="text-gray-500"> — {{ t(`audit.action.${entry.action}`) }}</span>
|
||||
</p>
|
||||
|
||||
<!-- Update : diff field-by-field. Create/Delete : liste des champs. -->
|
||||
<div v-if="entry.action === 'update'" class="mt-1 text-xs text-gray-600 space-y-0.5">
|
||||
<div v-for="(diff, field) in updateDiff(entry)" :key="field">
|
||||
<span class="font-medium">{{ field }}</span> :
|
||||
<span class="line-through text-red-600">{{ formatValue(diff.old) }}</span>
|
||||
<span class="mx-1">→</span>
|
||||
<span class="text-green-700">{{ formatValue(diff.new) }}</span>
|
||||
</div>
|
||||
<!-- Modifications de collections to-many. -->
|
||||
<div v-for="(diff, field) in collectionDiff(entry)" :key="`col-${field}`">
|
||||
<span class="font-medium">{{ field }}</span> :
|
||||
<span v-if="diff.removed.length" class="text-red-600">−{{ diff.removed.join(', ') }}</span>
|
||||
<span v-if="diff.removed.length && diff.added.length" class="mx-1"> </span>
|
||||
<span v-if="diff.added.length" class="text-green-700">+{{ diff.added.join(', ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mt-1 text-xs text-gray-600">
|
||||
{{ snapshotSummary(entry) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date relative FR + tooltip absolu -->
|
||||
<time
|
||||
:title="absoluteDate(entry.performedAt)"
|
||||
class="shrink-0 text-xs text-gray-500"
|
||||
>
|
||||
{{ relativeDate(entry.performedAt) }}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Lazy loading : bouton "Voir plus" si plus de pages. -->
|
||||
<div v-if="hasMore" class="mt-4 flex justify-center">
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
:label="loading ? t('common.loading') : t('audit.timeline.load_more')"
|
||||
:disabled="loading"
|
||||
button-class="text-sm"
|
||||
@click="loadMore"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, toRefs, watch } from 'vue'
|
||||
import type { AuditLogEntry } from '~/shared/types'
|
||||
|
||||
const props = defineProps<{
|
||||
entityType: string
|
||||
entityId: string | number
|
||||
}>()
|
||||
|
||||
const { entityType, entityId } = toRefs(props)
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const { can } = usePermissions()
|
||||
const { fetchEntityLogs } = useAuditLog()
|
||||
|
||||
const canView = computed(() => can('core.audit_log.view'))
|
||||
|
||||
const entries = ref<AuditLogEntry[]>([])
|
||||
const page = ref(1)
|
||||
const totalItems = ref(0)
|
||||
const loading = ref(false)
|
||||
|
||||
// Lazy loading : 10 items par page cote UX. On aligne la pagination backend
|
||||
// (itemsPerPage=10 dans fetchEntityLogs) avec cette taille pour eviter de
|
||||
// slicer cote client — sinon les items 11-30 de chaque page etaient ignores.
|
||||
const PAGE_SIZE = 10
|
||||
|
||||
// Anti-race : un utilisateur qui change rapidement d'entite affichee (ouvre
|
||||
// une ligne puis une autre dans le tableau admin) peut declencher deux fetchs
|
||||
// dont le premier repond en retard et ecrase l'etat de la seconde timeline.
|
||||
// On incremente un token a chaque fetch ; seule la derniere requete ecrit le
|
||||
// resultat. loadMore() est aussi protege : une reponse tardive append sur
|
||||
// une timeline dont l'entite a deja change serait visuellement confuse.
|
||||
let requestToken = 0
|
||||
|
||||
const hasMore = computed(() => entries.value.length < totalItems.value)
|
||||
|
||||
async function loadPage(targetPage: number, append: boolean): Promise<void> {
|
||||
if (!canView.value) return
|
||||
|
||||
const token = ++requestToken
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await fetchEntityLogs(entityType.value, entityId.value, targetPage, PAGE_SIZE)
|
||||
if (token !== requestToken) return
|
||||
const items = data.member ?? []
|
||||
entries.value = append ? [...entries.value, ...items] : items
|
||||
totalItems.value = data.totalItems ?? entries.value.length
|
||||
page.value = targetPage
|
||||
} catch {
|
||||
if (token !== requestToken) return
|
||||
// Erreur silencieuse (timeline secondaire) — useApi n'affiche pas de toast avec toast: false.
|
||||
entries.value = append ? entries.value : []
|
||||
} finally {
|
||||
if (token === requestToken) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
await loadPage(page.value + 1, true)
|
||||
}
|
||||
|
||||
function dotClass(action: string): string {
|
||||
switch (action) {
|
||||
case 'create': return 'bg-green-500'
|
||||
case 'update': return 'bg-yellow-500'
|
||||
case 'delete': return 'bg-red-500'
|
||||
default: return 'bg-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
// Relativise une date via Intl.RelativeTimeFormat. On selectionne l'unite
|
||||
// la plus grossiere possible (secondes < minutes < heures < jours < semaines
|
||||
// < mois < annees). La locale suit dynamiquement celle de l'app pour qu'un
|
||||
// switch de langue prenne effet sans nouveau mount (recomputed = cache
|
||||
// par-locale). Paliers mois/annee approximes (30.44j / 365.25j) : suffisant
|
||||
// pour un affichage humain, la tooltip absoluteDate garde la date exacte.
|
||||
const rtf = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
|
||||
|
||||
function relativeDate(iso: string): string {
|
||||
const diffMs = Date.now() - new Date(iso).getTime()
|
||||
const diffSec = Math.round(diffMs / 1000)
|
||||
const absSec = Math.abs(diffSec)
|
||||
const sign = -Math.sign(diffSec)
|
||||
const fmt = rtf.value
|
||||
|
||||
if (absSec < 60) return fmt.format(sign * absSec, 'second')
|
||||
if (absSec < 3600) return fmt.format(sign * Math.round(absSec / 60), 'minute')
|
||||
if (absSec < 86400) return fmt.format(sign * Math.round(absSec / 3600), 'hour')
|
||||
if (absSec < 604800) return fmt.format(sign * Math.round(absSec / 86400), 'day')
|
||||
if (absSec < 2629800) return fmt.format(sign * Math.round(absSec / 604800), 'week') // < ~30.44j
|
||||
if (absSec < 31557600) return fmt.format(sign * Math.round(absSec / 2629800), 'month') // < ~365.25j
|
||||
return fmt.format(sign * Math.round(absSec / 31557600), 'year')
|
||||
}
|
||||
|
||||
function absoluteDate(iso: string): string {
|
||||
// Meme logique : la locale de formatage suit celle de l'app.
|
||||
return new Date(iso).toLocaleString(locale.value, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
})
|
||||
}
|
||||
|
||||
function updateDiff(entry: AuditLogEntry): Record<string, { old: unknown; new: unknown }> {
|
||||
// Format attendu: { champ: { old, new } }. On filtre defensivement les
|
||||
// valeurs qui ne correspondent pas a ce shape (pas d'erreur runtime).
|
||||
const out: Record<string, { old: unknown; new: unknown }> = {}
|
||||
for (const [key, value] of Object.entries(entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
|
||||
const diff = value as { old: unknown; new: unknown }
|
||||
out[key] = diff
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
function collectionDiff(entry: AuditLogEntry): Record<string, { added: unknown[]; removed: unknown[] }> {
|
||||
// Format to-many : { champ: { added: [ids], removed: [ids] } } produit
|
||||
// par AuditListener::captureCollectionChange.
|
||||
const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
|
||||
for (const [key, value] of Object.entries(entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
|
||||
const diff = value as { added: unknown; removed: unknown }
|
||||
out[key] = {
|
||||
added: Array.isArray(diff.added) ? diff.added : [],
|
||||
removed: Array.isArray(diff.removed) ? diff.removed : [],
|
||||
}
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
function snapshotSummary(entry: AuditLogEntry): string {
|
||||
const keys = Object.keys(entry.changes)
|
||||
if (keys.length === 0) return '—'
|
||||
if (keys.length <= 4) return keys.join(', ')
|
||||
return `${keys.slice(0, 4).join(', ')}…`
|
||||
}
|
||||
|
||||
function formatValue(value: unknown): string {
|
||||
if (value === null || value === undefined) return '∅'
|
||||
// Passe par i18n plutot qu'un hardcode FR : si une autre locale est
|
||||
// ajoutee, le rendu s'adapte sans nouvelle passe sur ce composant.
|
||||
if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
|
||||
if (typeof value === 'object') return JSON.stringify(value)
|
||||
return String(value)
|
||||
}
|
||||
|
||||
// Reload si l'entite affichee change.
|
||||
watch([entityType, entityId], () => {
|
||||
entries.value = []
|
||||
page.value = 1
|
||||
totalItems.value = 0
|
||||
loadPage(1, false)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadPage(1, false)
|
||||
})
|
||||
</script>
|
||||
144
frontend/shared/composables/useAuditLog.ts
Normal file
144
frontend/shared/composables/useAuditLog.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
import { ref } from 'vue'
|
||||
import type { AuditLogEntityTypes, AuditLogEntry, AuditLogFilters } from '~/shared/types'
|
||||
import type { HydraCollection } from '~/shared/utils/api'
|
||||
import { onAuthSessionCleared } from '~/shared/stores/auth'
|
||||
|
||||
/**
|
||||
* Cache module-level : evite un double-fetch si la page et le composant
|
||||
* Timeline demandent la meme page simultanement. Volontairement minimaliste :
|
||||
* on ne cache que le dernier resultat, pas un LRU par filtre — un CRM interne
|
||||
* n'en a pas besoin et le cache complexe complique le reset.
|
||||
*
|
||||
* Un logout / 401 doit purger ce cache : on s'enregistre au callback
|
||||
* `onAuthSessionCleared` expose par auth.ts.
|
||||
*/
|
||||
const lastCollection = ref<HydraCollection<AuditLogEntry> | null>(null)
|
||||
|
||||
function resetAuditLog(): void {
|
||||
lastCollection.value = null
|
||||
}
|
||||
|
||||
// Auto-enregistrement singleton : si la session est invalidee (401,
|
||||
// logout) le cache est purge automatiquement, evitant qu'un autre user
|
||||
// connecte ensuite ne voit des donnees residuelles.
|
||||
onAuthSessionCleared(resetAuditLog)
|
||||
|
||||
/**
|
||||
* Traduit le modele front (camelCase) en query params API Platform
|
||||
* (snake_case, avec la syntaxe performed_at[after] / [before]).
|
||||
*
|
||||
* @returns objet plat directement consommable par `useApi().get(url, query)`.
|
||||
*/
|
||||
function buildQuery(filters: AuditLogFilters | undefined): Record<string, string | number | string[]> {
|
||||
const query: Record<string, string | number | string[]> = {}
|
||||
if (!filters) return query
|
||||
|
||||
// `entity_type` : chaine simple ou liste pour un filtre multi-selection.
|
||||
// Cote PHP, la syntaxe `entity_type[]=X&entity_type[]=Y` est requise pour
|
||||
// que $_GET['entity_type'] soit un tableau (sinon "last wins").
|
||||
if (Array.isArray(filters.entityType)) {
|
||||
if (filters.entityType.length > 0) query['entity_type[]'] = filters.entityType
|
||||
} else if (filters.entityType) {
|
||||
query.entity_type = filters.entityType
|
||||
}
|
||||
if (filters.entityId) query.entity_id = filters.entityId
|
||||
if (filters.action) query.action = filters.action
|
||||
if (filters.performedBy) query.performed_by = filters.performedBy
|
||||
if (filters.performedAtAfter) query['performed_at[after]'] = filters.performedAtAfter
|
||||
if (filters.performedAtBefore) query['performed_at[before]'] = filters.performedAtBefore
|
||||
if (filters.page) query.page = filters.page
|
||||
if (filters.itemsPerPage) query.itemsPerPage = filters.itemsPerPage
|
||||
|
||||
return query
|
||||
}
|
||||
|
||||
/**
|
||||
* Composable partage entre la page globale d'audit (admin) et le composant
|
||||
* Timeline. Expose des methodes de lecture + une fonction `resetAuditLog()`
|
||||
* pour purger le cache (conforme a la regle CLAUDE.md sur les composables
|
||||
* singletons, cf. `useSidebar.resetSidebar`).
|
||||
*/
|
||||
// Accept explicitement JSON-LD : API Platform 4 retourne un tableau PLAT (liste
|
||||
// d'items, sans envelope de pagination) sous `application/json`, et un objet
|
||||
// Hydra complet avec `member`, `totalItems` et `view` (first/last/next/previous)
|
||||
// sous `application/ld+json`. Pour obtenir `view` cote front — indispensable
|
||||
// a la pagination prev/next — on force donc ld+json.
|
||||
const JSONLD_HEADERS = { Accept: 'application/ld+json' } as const
|
||||
|
||||
export function useAuditLog() {
|
||||
const api = useApi()
|
||||
|
||||
async function fetchLogs(filters?: AuditLogFilters): Promise<HydraCollection<AuditLogEntry>> {
|
||||
return api.get<HydraCollection<AuditLogEntry>>(
|
||||
'/audit-logs',
|
||||
buildQuery(filters),
|
||||
{ toast: false, headers: JSONLD_HEADERS },
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Variante de `fetchLogs` qui met a jour le cache `lastCollection`.
|
||||
* N'est utilisee que par la page admin — le composant Timeline appelle
|
||||
* `fetchEntityLogs` qui bypass le cache pour ne pas polluer la reference
|
||||
* page-level quand plusieurs timelines sont ouvertes.
|
||||
*/
|
||||
async function fetchLogsCached(filters?: AuditLogFilters): Promise<HydraCollection<AuditLogEntry>> {
|
||||
const data = await fetchLogs(filters)
|
||||
lastCollection.value = data
|
||||
return data
|
||||
}
|
||||
|
||||
async function fetchLogById(id: string): Promise<AuditLogEntry> {
|
||||
return api.get<AuditLogEntry>(`/audit-logs/${id}`, {}, { toast: false, headers: JSONLD_HEADERS })
|
||||
}
|
||||
|
||||
/**
|
||||
* Liste des valeurs distinctes de `entity_type` pour alimenter le filtre
|
||||
* multi-selection. Alimente par un endpoint DBAL, aucune cache cote front
|
||||
* (la liste peut evoluer a chaque nouvelle ecriture d'audit).
|
||||
*/
|
||||
async function fetchEntityTypes(): Promise<string[]> {
|
||||
const data = await api.get<AuditLogEntityTypes>(
|
||||
'/audit-log-entity-types',
|
||||
{},
|
||||
{ toast: false, headers: JSONLD_HEADERS },
|
||||
)
|
||||
return data.entityTypes ?? []
|
||||
}
|
||||
|
||||
async function fetchEntityLogs(
|
||||
entityType: string,
|
||||
entityId: string | number,
|
||||
page: number = 1,
|
||||
itemsPerPage: number = 10,
|
||||
): Promise<HydraCollection<AuditLogEntry>> {
|
||||
// Volontairement via `fetchLogs` (sans cache) pour ne pas ecraser
|
||||
// `lastCollection` — la timeline peut etre rendue simultanement a
|
||||
// la page globale et doit rester independante.
|
||||
//
|
||||
// Le backend pagine a 30 par defaut (paginationItemsPerPage) ; on
|
||||
// passe explicitement itemsPerPage ici pour que la taille de page
|
||||
// soit alignee avec l'UX timeline (10 items + bouton "Voir plus").
|
||||
// Sans ce param, le client slice a 10 et rate 20 entrees par page.
|
||||
return fetchLogs({
|
||||
entityType,
|
||||
entityId: String(entityId),
|
||||
page,
|
||||
itemsPerPage,
|
||||
})
|
||||
}
|
||||
|
||||
// API publique : on expose volontairement deux noms distincts pour les
|
||||
// deux contrats (cache/no-cache). Aliaser `fetchLogs` vers la version
|
||||
// cachee trompait les appelants : un consommateur qui destructurait
|
||||
// `{ fetchLogs }` en pensant faire un appel neutre polluait en realite
|
||||
// `lastCollection`, effet indetectable sans lire l'impl.
|
||||
return {
|
||||
lastCollection,
|
||||
fetchLogsCached,
|
||||
fetchLogById,
|
||||
fetchEntityLogs,
|
||||
fetchEntityTypes,
|
||||
resetAuditLog,
|
||||
}
|
||||
}
|
||||
@@ -2,14 +2,23 @@
|
||||
* Composable de lecture des modules actifs (source : `/api/modules`).
|
||||
*
|
||||
* State singleton au niveau module : `useSidebar` suit la meme convention.
|
||||
* Chargement idempotent via le flag `loaded`, reset explicite au logout
|
||||
* (voir pages/logout.vue).
|
||||
* Chargement idempotent via le flag `loaded`, reset automatique au logout
|
||||
* via `onAuthSessionCleared` (cf. CLAUDE.md : « composables avec state
|
||||
* singleton doivent etre reinitialises au logout »).
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
import { onAuthSessionCleared } from '~/shared/stores/auth'
|
||||
|
||||
const activeModuleIds = ref<string[]>([])
|
||||
const loaded = ref(false)
|
||||
|
||||
function resetModulesState(): void {
|
||||
activeModuleIds.value = []
|
||||
loaded.value = false
|
||||
}
|
||||
|
||||
onAuthSessionCleared(resetModulesState)
|
||||
|
||||
export function useModules() {
|
||||
async function loadModules() {
|
||||
try {
|
||||
@@ -35,8 +44,7 @@ export function useModules() {
|
||||
}
|
||||
|
||||
function resetModules() {
|
||||
activeModuleIds.value = []
|
||||
loaded.value = false
|
||||
resetModulesState()
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,10 +1,23 @@
|
||||
import { ref } from 'vue'
|
||||
import type { SidebarSection } from '~/shared/types'
|
||||
import { onAuthSessionCleared } from '~/shared/stores/auth'
|
||||
|
||||
const sections = ref<SidebarSection[]>([])
|
||||
const disabledRoutes = ref<string[]>([])
|
||||
const loaded = ref(false)
|
||||
|
||||
function resetSidebarState(): void {
|
||||
sections.value = []
|
||||
disabledRoutes.value = []
|
||||
loaded.value = false
|
||||
}
|
||||
|
||||
// Auto-enregistrement singleton : purge la sidebar sur 401/logout pour
|
||||
// eviter qu'un nouvel utilisateur logue sur le meme onglet voie transitoirement
|
||||
// les items de l'ancienne session (cf. CLAUDE.md : « composables avec state
|
||||
// singleton doivent etre reinitialises au logout »).
|
||||
onAuthSessionCleared(resetSidebarState)
|
||||
|
||||
export function useSidebar() {
|
||||
async function loadSidebar() {
|
||||
try {
|
||||
@@ -31,9 +44,7 @@ export function useSidebar() {
|
||||
}
|
||||
|
||||
function resetSidebar() {
|
||||
sections.value = []
|
||||
disabledRoutes.value = []
|
||||
loaded.value = false
|
||||
resetSidebarState()
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -9,3 +9,44 @@ export interface SidebarSection {
|
||||
icon: string
|
||||
items: SidebarItem[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Entree d'audit telle qu'elle est renvoyee par GET /api/audit-logs.
|
||||
*
|
||||
* `changes` est un payload libre dont le format depend de `action` :
|
||||
* - `create` / `delete` : snapshot complet { champ: valeur } ;
|
||||
* - `update` : diff { champ: { old, new } }.
|
||||
*/
|
||||
export interface AuditLogEntry {
|
||||
id: string
|
||||
entityType: string
|
||||
entityId: string
|
||||
action: 'create' | 'update' | 'delete'
|
||||
changes: Record<string, unknown>
|
||||
performedBy: string
|
||||
performedAt: string
|
||||
ipAddress: string | null
|
||||
requestId: string | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Filtres combinables en query params (AND) pour GET /api/audit-logs.
|
||||
* Les bornes de date utilisent la syntaxe API Platform `performed_at[after]` /
|
||||
* `performed_at[before]`.
|
||||
*/
|
||||
export interface AuditLogFilters {
|
||||
/** Chaine pour un seul type, liste pour un filtre multi-selection. */
|
||||
entityType?: string | string[]
|
||||
entityId?: string
|
||||
action?: string
|
||||
performedBy?: string
|
||||
performedAtAfter?: string
|
||||
performedAtBefore?: string
|
||||
page?: number
|
||||
itemsPerPage?: number
|
||||
}
|
||||
|
||||
export interface AuditLogEntityTypes {
|
||||
id: string
|
||||
entityTypes: string[]
|
||||
}
|
||||
|
||||
@@ -21,7 +21,19 @@ export interface UserListItem {
|
||||
isAdmin: boolean
|
||||
roles: string[]
|
||||
directPermissions: string[]
|
||||
/** IRIs des sites autorises (ticket 2 module Sites). */
|
||||
}
|
||||
|
||||
/**
|
||||
* Detail RBAC d'un user, renvoye par GET /api/users/{id}/rbac (groupe user:rbac:read).
|
||||
* Utilise par UserRbacDrawer pour initialiser son formulaire avec l'etat complet
|
||||
* (sites inclus). Le endpoint de liste /api/users reste volontairement leger et
|
||||
* n'expose pas ces champs.
|
||||
*/
|
||||
export interface UserRbacDetail {
|
||||
id: number
|
||||
isAdmin: boolean
|
||||
roles: string[]
|
||||
directPermissions: string[]
|
||||
sites: string[]
|
||||
}
|
||||
|
||||
|
||||
52
frontend/shared/utils/__tests__/debounce.test.ts
Normal file
52
frontend/shared/utils/__tests__/debounce.test.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { debounce } from '../debounce'
|
||||
|
||||
describe('debounce', () => {
|
||||
it('attend delay ms avant d\'appeler fn une seule fois apres plusieurs invocations rapides', () => {
|
||||
vi.useFakeTimers()
|
||||
const fn = vi.fn()
|
||||
const debounced = debounce(fn, 100)
|
||||
|
||||
debounced()
|
||||
debounced()
|
||||
debounced()
|
||||
expect(fn).not.toHaveBeenCalled()
|
||||
|
||||
vi.advanceTimersByTime(100)
|
||||
expect(fn).toHaveBeenCalledTimes(1)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('passe les arguments du dernier appel a fn', () => {
|
||||
vi.useFakeTimers()
|
||||
const fn = vi.fn<(a: string, b: number) => void>()
|
||||
const debounced = debounce(fn, 50)
|
||||
|
||||
debounced('first', 1)
|
||||
debounced('second', 2)
|
||||
debounced('third', 3)
|
||||
vi.advanceTimersByTime(50)
|
||||
|
||||
expect(fn).toHaveBeenCalledTimes(1)
|
||||
expect(fn).toHaveBeenCalledWith('third', 3)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('autorise plusieurs executions espacees dans le temps', () => {
|
||||
vi.useFakeTimers()
|
||||
const fn = vi.fn()
|
||||
const debounced = debounce(fn, 50)
|
||||
|
||||
debounced()
|
||||
vi.advanceTimersByTime(50)
|
||||
expect(fn).toHaveBeenCalledTimes(1)
|
||||
|
||||
debounced()
|
||||
vi.advanceTimersByTime(50)
|
||||
expect(fn).toHaveBeenCalledTimes(2)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
})
|
||||
@@ -1,8 +1,33 @@
|
||||
/**
|
||||
* Schemas Hydra / API Platform 4.
|
||||
*
|
||||
* Important : API Platform 4 abandonne le prefixe `hydra:` dans les noms de
|
||||
* proprietes (compare a la version 3). Un GET /api/audit-logs renvoie :
|
||||
* { "@context": ..., "@id": ..., "@type": "...",
|
||||
* "member": [...],
|
||||
* "totalItems": 30,
|
||||
* "view": { "@id": ..., "@type": "...", "first": ..., "next": ..., ... } }
|
||||
*
|
||||
* En `application/json` (sans ld), API Platform retourne un simple tableau
|
||||
* plat sans ces metadonnees — on doit donc explicitement demander
|
||||
* `application/ld+json` (via l'option `headers: { Accept: ... }` de useApi)
|
||||
* pour avoir acces a la pagination.
|
||||
*/
|
||||
export interface HydraView {
|
||||
'@id'?: string
|
||||
'@type'?: string
|
||||
first?: string
|
||||
last?: string
|
||||
next?: string
|
||||
previous?: string
|
||||
}
|
||||
|
||||
export interface HydraCollection<T> {
|
||||
'hydra:member': T[]
|
||||
'hydra:totalItems': number
|
||||
member: T[]
|
||||
totalItems: number
|
||||
view?: HydraView
|
||||
}
|
||||
|
||||
export function extractHydraMembers<T>(collection: HydraCollection<T>): T[] {
|
||||
return collection['hydra:member'] ?? []
|
||||
return collection.member ?? []
|
||||
}
|
||||
|
||||
15
frontend/shared/utils/debounce.ts
Normal file
15
frontend/shared/utils/debounce.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Utilitaire de debounce partage.
|
||||
*
|
||||
* Retarde l'execution d'une fonction : chaque appel reset un timer et
|
||||
* l'execution reelle n'a lieu qu'apres `delay` ms sans nouvelle invocation.
|
||||
* Utile pour eviter un spam d'appels reseau sur un champ de recherche
|
||||
* (une requete par touche -> une seule requete apres la derniere frappe).
|
||||
*/
|
||||
export function debounce<T extends (...args: never[]) => void>(fn: T, delay: number): T {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
return ((...args: Parameters<T>) => {
|
||||
if (null !== timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => fn(...args), delay)
|
||||
}) as T
|
||||
}
|
||||
Reference in New Issue
Block a user