Gabarit · Console ops / Support

Liste + flux d'événements

Disponible

Layout opérationnel : navigation à gauche, liste au centre, panneau utilitaire (flux d'événements, journal d'activité) à droite. Le panneau peut être réservé (occupe l'espace) ou overlay (glisse par-dessus). Convient aux consoles de supervision, ops et support.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular.

Liste + flux d'événements (données mock)

Ops

Incidents ouverts

Titre	Service	Sévérité
Latence API élevée	api-gateway	Critique
Pic mémoire pods	worker-fleet	Avertissement
Déploiement v2.4.1	backend	Info

Voir le code (Svelte)

<div class="lef-shell">
  <Header
    title="Ops"
    navItems={[{"label":"Incidents","href":"#","active":true},{"label":"Services","href":"#"},{"label":"Alertes","href":"#"}]}
  />
  <div class="lef-body">
    <aside class="lef-nav">
      <SideNav
        items={[{"label":"Incidents","href":"#","active":true},{"label":"Services","href":"#"},{"label":"Alertes","href":"#"}]}
        label="Vues"
      />
    </aside>
    <main class="lef-main">
      <h2 class="lef-section-title">Incidents ouverts</h2>
      <table class="lef-table" role="table">
        <thead>
          <tr>
            <th scope="col">Titre</th>
            <th scope="col">Service</th>
            <th scope="col">Sévérité</th>
          </tr>
        </thead>
        <tbody>
          <tr class="lef-table-row lef-table-row--open">
            <td class="lef-td-title">Latence API élevée</td>
            <td class="lef-td-svc">api-gateway</td>
            <td>
              <Badge tone="danger">Critique</Badge>
            </td>
          </tr>
          <tr class="lef-table-row lef-table-row--open">
            <td class="lef-td-title">Pic mémoire pods</td>
            <td class="lef-td-svc">worker-fleet</td>
            <td>
              <Badge tone="warning">Avertissement</Badge>
            </td>
          </tr>
          <tr class="lef-table-row">
            <td class="lef-td-title">Déploiement v2.4.1</td>
            <td class="lef-td-svc">backend</td>
            <td>
              <Badge tone="neutral">Info</Badge>
            </td>
          </tr>
        </tbody>
      </table>
    </main>
    <aside class="lef-feed" aria-label="Flux d'activité">
      <h3 class="lef-feed-title">Événements</h3>
      <ul class="lef-feed-list" role="list">
        <li class="lef-feed-item lef-feed-item--error">
          <div class="lef-feed-item-dot" aria-hidden="true" />
          <div class="lef-feed-item-body">
            <span class="lef-feed-item-title">Alerte CPU > 90 %</span>
            <span class="lef-feed-item-time">10:02</span>
          </div>
        </li>
        <li class="lef-feed-item lef-feed-item--success">
          <div class="lef-feed-item-dot" aria-hidden="true" />
          <div class="lef-feed-item-body">
            <span class="lef-feed-item-title">Déploiement OK — v2.4.0</span>
            <span class="lef-feed-item-time">09:40</span>
          </div>
        </li>
        <li class="lef-feed-item lef-feed-item--info">
          <div class="lef-feed-item-dot" aria-hidden="true" />
          <div class="lef-feed-item-body">
            <span class="lef-feed-item-title">Scale-out automatique</span>
            <span class="lef-feed-item-time">09:12</span>
          </div>
        </li>
        <li class="lef-feed-item lef-feed-item--success">
          <div class="lef-feed-item-dot" aria-hidden="true" />
          <div class="lef-feed-item-body">
            <span class="lef-feed-item-title">Backup terminé</span>
            <span class="lef-feed-item-time">08:55</span>
          </div>
        </li>
      </ul>
    </aside>
  </div>
</div>

Composants DS utilisés

Modes du panneau utilitaire

Réservé — le panneau occupe un espace fixe (utilisé ici)
Overlay — le panneau glisse par-dessus le contenu sans décaler la mise en page