Audit Log (Event Feed) ​

Feed d'événements sécurisé pour les pages d'administration. Affiche l'historique des actions critiques avec acteur, entité et catégorie.

Démo ​

13:11:02rotate_secretsurCorp Alphapara.lavonsecurity
13:09:44scope_updatesurCorp Alphaparm.dupontoidc
13:07:21permission_changesurFinServ Betaparadminiam
12:58:35rotate_secretsurNeoBank Gammapara.lavonsecurity
12:45:10scope_updatesurCorp Alphapara.lavonoidc

Format d'une entrée ​

[timestamp mono]  [action bold]  sur [entité]  par [acteur lien].  [tag]

Exemple :
13:11:02  rotate_secret  sur Corp Alpha  par a.lavon.  [security]

Tags catégories ​

TagCouleurActions typiques
securityRouge (danger)rotate_secret, revoke_key, block_user
oidcBleu (primary)scope_update, consent_grant, token_refresh
iamViolet (info)permission_change, role_assign, access_revoke

Implémentation ​

vue
<script setup>
const events = ref([
  { time: '13:11:02', action: 'rotate_secret', entity: 'Corp Alpha', actor: 'a.lavon', tag: 'security' },
  { time: '13:09:44', action: 'scope_update',  entity: 'Corp Alpha', actor: 'm.dupont', tag: 'oidc' },
  // ...
])
const tagVariant = { security: 'danger', oidc: 'primary', iam: 'info' }
</script>

<div style="border: 1px solid var(--bc-border); border-radius: var(--bc-r); overflow: hidden; max-height: 400px; overflow-y: auto;">
  <div
    v-for="(event, index) in events"
    :key="index"
    :style="{
      display: 'flex',
      alignItems: 'center',
      gap: '12px',
      padding: '8px 16px',
      background: index % 2 === 0 ? 'var(--bc-well)' : 'transparent',
      fontSize: '13px',
    }"
  >
    <span :style="{ fontFamily: 'var(--bc-mono)', color: 'var(--bc-sub)', width: '60px', flexShrink: 0 }">
      {{ event.time }}
    </span>
    <strong>{{ event.action }}</strong>
    <span style="color: var(--bc-sub)">sur</span>
    <span>{{ event.entity }}</span>
    <span style="color: var(--bc-sub)">par</span>
    <a :href="`/admin/users/${event.actor}`" style="color: var(--bc-pink)">{{ event.actor }}</a>
    <bc-badge :variant="tagVariant[event.tag]" style="margin-left: auto; font-size: 11px;">
      {{ event.tag }}
    </bc-badge>
  </div>
</div>

Type AuditEvent ​

typescript
interface AuditEvent {
  time: string        // Format HH:MM:SS
  action: string      // rotate_secret | scope_update | permission_change | …
  entity: string      // Nom de l'entité impactée
  actor: string       // Identifiant utilisateur
  tag: 'security' | 'oidc' | 'iam'
  details?: string    // Détails optionnels (JSON diff, raison…)
}

Règles d'utilisation ​

  • Immutabilité : les lignes d'audit ne sont jamais modifiables ni supprimables via l'UI
  • Densité : garder font-size: 13px — le feed est dense par nature
  • Timestamp : toujours en mono — facilite le scan visuel rapide
  • Acteur : lien cliquable vers le profil utilisateur (pas de texte "par admin" non cliquable)
  • Tags : limiter à 3-4 tags max pour garder le système cohérent
  • Pagination : utiliser le scroll interne ou un bouton "Charger plus" (pas de pagination numérotée)