Composant · Données

EventFeedPanel

Stable

Flux d'événements datés et défilable (façon observabilité / New Relic). PANNEAU (liste DOM), pas un graphe SVG : chaque événement est trié par date décroissante (le plus récent en tête), teinté par sa severity (pastille + bordure sémantique), avec son type, son horodatage et son message. La hauteur est bornée par maxHeight (ou height) pour activer le défilement vertical. a11y : role="feed" sur la liste, role="article" par item.

Exemples

Cinq événements d'un service sur quelques minutes : déploiement, montée en charge, alerte de latence, pic d'erreurs et reprise — chaque ligne colorée par sa sévérité.

Activité du service

recover 09:05 AM

Erreurs résorbées, latence nominale
alert 09:04 AM

Pic d'erreurs 5xx sur /checkout
latency 09:03 AM

Latence p99 au-dessus de 800 ms
scale 09:01 AM

Montée en charge (4 → 8 réplicas)
deploy 09:00 AM

Déploiement de la v2.4.0

Voir le code (Svelte)

<div class="docs-feed-box">
  <EventFeedPanel
    label="Activité du service"
    maxHeight={220}
    data={[{"at":1781427600000,"type":"deploy","severity":"info","message":"Déploiement de la v2.4.0"},{"at":1781427690000,"type":"scale","severity":"success","message":"Montée en charge (4 → 8 réplicas)"},{"at":1781427780000,"type":"latency","severity":"warning","message":"Latence p99 au-dessus de 800 ms"},{"at":1781427840000,"type":"alert","severity":"error","message":"Pic d'erreurs 5xx sur /checkout"},{"at":1781427900000,"type":"recover","severity":"success","message":"Erreurs résorbées, latence nominale"}]}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`EventFeedPanelEvent[]`	`[]`	Événements : { at, type, severity, message }.
`label`	`string`	–	Libellé accessible du flux.
`maxHeight`	`number`	–	Hauteur max (px) déclenchant le défilement.
`height`	`number`	–	Alias de maxHeight.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

EventFeedPanelEvent = { at: number; type: string; severity: 'info' | 'success' | 'warning' | 'error' | string; message: string } : une severity inconnue retombe sur le ton neutre.

Tokens CSS

Variable CSS	Description
`--st-semantic-surface-subtle`	Fond des items du flux.
`--st-semantic-feedback-info` / `success` / `warning` / `error`	Couleurs de pastille et de bordure par sévérité.
`--st-semantic-border-strong`	Bordure/pastille du ton neutre (sévérité inconnue).
`--st-semantic-text-primary` / `secondary`	Type/horodatage et message.