Système de design Elastic UI.

Structure de l’explorateur du système de design Elastic UI

Un espace d’investigation plutôt qu’un tableau de bord générique

L’exemple comprend trois statistiques récapitulatives compactes et un seul flux d’événements. Un champ de recherche et un groupe de gravité permettent de filtrer ce flux ; chaque ligne propose une action d’enregistrement indépendante. Placer l’action à côté de l’événement permet de recueillir des éléments sans quitter le contexte filtré. Le résumé indique explicitement le nombre d’événements d’exemple au lieu de prétendre afficher le trafic en temps réel.

Utilisez la frontière de thème actuelle

Cet exemple associe EUI 123.0.0 à Borealis 8.1.0. Les valeurs de référence proviennent de ce thème publié, et non d’une ancienne capture d’écran Amsterdam. EuiProvider gère le mode visuel et le contexte de styles. L’état de l’application reste indépendant de tout calcul de thème : modifier l’apparence ne réinitialise donc ni les événements enregistrés ni la requête en cours.

Elastic UI Rôles sémantiques des couleurs du système de conception

Associez les niveaux de gravité à des rôles pertinents

Dans cette application, Info utilise le rôle principal, Warning le rôle d’avertissement et Error le rôle de danger. EuiHealth affiche le niveau de gravité sous forme de texte à côté du point. Cette correspondance relève des règles de l’application ; elle ne signifie pas que tout élément de couleur principale indique un niveau de gravité informatif. Les nombres d’erreurs et les libellés d’événements doivent rester lisibles.

Récupérez les couleurs depuis le thème actif

Screen appelle useEuiTheme et utilise les couleurs obtenues pour son fond, son texte et ses indicateurs de santé. Les tableaux d’exportation présentent les valeurs claires et sombres côte à côte pour rendre la différence visible. Ne réutilisez pas une valeur hexadécimale dans les deux modes et ne ciblez pas les noms de classes Emotion générés pour forcer une correspondance.

Elastic UI Typographie et hiérarchie numérique du système de conception

Présentez le contexte des statistiques avant de mettre les chiffres en évidence

EuiStat associe les 6 événements d’exemple, l’événement en erreur et le nombre d’éléments enregistrés à des descriptions. Le nombre seul serait ambigu. EuiTitle introduit l’investigation, tandis qu’EuiText précise la période et indique qu’il s’agit de données d’exemple. L’en-tête du flux utilise un titre de niveau inférieur plutôt qu’un second titre de page.

Gardez les textes des journaux lisibles malgré leur densité

Borealis utilise une base exportée de 14px et une hauteur de ligne de référence de 1.5, ainsi qu’une échelle typographique de 12/16/20/24/30px. Les horodatages et les noms de services occupent des colonnes prévisibles, tandis que le message de l’événement dispose d’une largeur flexible. L’exemple utilise les polices système disponibles dans la pile native et ne prétend pas charger une ressource Inter à distance.

Elastic UI Tableau de base et filtres contrôlés du système de conception

Séparez la présentation du filtrage

EuiBasicTable reçoit les éléments déjà filtrés. Les colonnes définissent un champ ou un moteur de rendu personnalisé, et itemId utilise l’ID stable de l’événement. EuiFieldSearch met à jour l’état de la requête ; EuiButtonGroup met à jour l’ID du niveau de gravité sélectionné. L’application combine les deux critères avant de transmettre à la table la collection à afficher.

1. Saisissez un nom de service ou un fragment de message.
2. Choisissez Error ou Warning pour appliquer un critère de gravité.
3. Enregistrez un événement correspondant à l’aide de l’action de sa ligne.
4. Effacez les filtres et vérifiez que l’événement enregistré est toujours marqué comme tel.

Enregistrez les événements par identité, pas par position de ligne

Elastic UI Espacement et données adaptatives du système de conception

Utilisez l’échelle native d’espacement entre les groupes

Les tailles publiées sont 4, 8, 12, 16, 24, 32 et 40px. EuiSpacer et EuiFlexGroup assurent l’espacement entre les statistiques récapitulatives, les filtres et le tableau des événements. EuiPanel fournit la forme du conteneur ; le thème distingue son rayon de panneau de 12px des rayons de 8px des contrôles et de 16px du cadre.

Gardez la page dans les limites de la fenêtre d’affichage mobile

Les groupes de statistiques et de filtres se réorganisent grâce au comportement natif de FlexGroup. Le tableau se trouve dans une zone de défilement horizontal délimitée, avec une largeur minimale de 640px pour l’application. Les liens entre l’horodatage, le message et l’action sont ainsi préservés, sans débordement de toute la page. Pour un tableau de production, vous pouvez choisir les options de tableau adaptatif documentées en fonction des colonnes utilisées.

Elastic UI Recherche et états vide et enregistré du système de conception

Une recherche sans résultat propose une action directe pour rétablir les résultats

Une requête sans résultat affiche Aucun événement ne correspond aux filtres actuels et propose l’action Effacer les filtres. La réinitialisation de la requête et du niveau de gravité rétablit les six événements d’exemple sans modifier les ID enregistrés. Le nombre affiché au-dessus du tableau annonce le total d’événements correspondants dans une région de mise à jour polie.

Un enregistrement local ne constitue pas un flux de gestion des incidents

L’enregistrement d’un événement modifie le libellé de sa ligne et la statistique des éléments enregistrés. Il ne contacte pas Elasticsearch, ne crée pas d’incident et ne conserve pas les données après actualisation. Un véritable produit d’investigation devrait ajouter un point de terminaison de persistance documenté et signaler les réponses en attente ou en échec avant d’affirmer que la collection enregistrée est conservée durablement.

Elastic UI Actions de tableau accessibles du système de conception

Nommez les filtres indépendamment de leurs textes indicatifs

La recherche possède un nom accessible et le groupe de boutons fournit une légende pour le niveau de gravité. Les colonnes du tableau ont des en-têtes descriptifs ; chaque action de ligne est un EuiButtonEmpty natif. EuiHealth inclut du texte : la couleur du statut n’est donc jamais le seul moyen de transmettre l’information. Préservez ces principes lorsque vous remplacez les données d’exemple.

• Indiquez le niveau de gravité avec des mots visibles.
• Conservez la légende du tableau et les noms des colonnes.
• Associez l’état enregistré à l’ID stable de l’événement.

Maintenez la cohérence entre l’état clavier et l’état visuel

Les utilisateurs peuvent placer le focus dans la recherche, sélectionner un filtre de gravité, accéder aux actions de ligne et modifier le réglage d’apparence. L’anneau de focus de 2px fait partie de la référence du thème. Testez un ensemble filtré après avoir enregistré une ligne, puis après avoir effacé le filtre ; le libellé de l’action et la statistique des éléments enregistrés doivent rester cohérents.

Elastic UI Configuration et intégration du thème du système de conception

Installez les dépendances homologues documentées

Le guide officiel de configuration utilise Yarn et répertorie Borealis, Emotion, datemath et moment avec EUI. Cet exemple utilise React 18 et n’encapsule pas l’arbre dans StrictMode. La configuration ci-dessous explicite ces contraintes au lieu d’hériter silencieusement de React 19 d’une application nouvellement générée.

Considérez le fichier d’entrée complet comme l’implémentation

Elastic UI Exemples de composants du système de conception

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  EuiProvider,
  EuiPanel,
  EuiTitle,
  EuiText,
  EuiSpacer,
  EuiFlexGroup,
  EuiFlexItem,
  EuiFieldSearch,
  EuiButtonGroup,
  EuiButtonEmpty,
  EuiBasicTable,
  EuiHealth,
  EuiStat,
  EuiSwitch,
  EuiCallOut,
  useEuiTheme,
} from "@elastic/eui";
const logs = [
  {
    id: 1,
    time: "09:42:18",
    service: "gateway",
    message: "Request completed",
    level: "Info",
    duration: 42,
  },
  {
    id: 2,
    time: "09:42:21",
    service: "worker",
    message: "Retry queued after timeout",
    level: "Warning",
    duration: 1200,
  },
  {
    id: 3,
    time: "09:42:24",
    service: "gateway",
    message: "Upstream connection refused",
    level: "Error",
    duration: 800,
  },
  {
    id: 4,
    time: "09:42:29",
    service: "indexer",
    message: "Batch indexed",
    level: "Info",
    duration: 180,
  },
  {
    id: 5,
    time: "09:42:32",
    service: "worker",
    message: "Job completed",
    level: "Info",
    duration: 94,
  },
  {
    id: 6,
    time: "09:42:36",
    service: "gateway",
    message: "Upstream connection restored",
    level: "Info",
    duration: 51,
  },
];
function Screen({ dark, setDark }) {
  const { euiTheme } = useEuiTheme();
  const [query, setQuery] = useState(""),
    [level, setLevel] = useState("all"),
    [saved, setSaved] = useState([]);
  const visible = logs.filter(
    (x) =>
      (level === "all" || x.level === level) &&
      (x.service + " " + x.message).toLowerCase().includes(query.toLowerCase()),
  );
  const colors = {
    Info: euiTheme.colors.primary,
    Warning: euiTheme.colors.warning,
    Error: euiTheme.colors.danger,
  };
  const columns = [
    { field: "time", name: "Time", width: "105px" },
    { field: "service", name: "Service", width: "105px" },
    {
      field: "message",
      name: "Event",
      render: (value, item) => (
        <span>
          {value}
          {saved.includes(item.id) ? " · Saved locally" : ""}
        </span>
      ),
    },
    {
      field: "level",
      name: "Level",
      width: "110px",
      render: (value) => <EuiHealth color={colors[value]}>{value}</EuiHealth>,
    },
    {
      name: "Action",
      width: "110px",
      render: (item) => (
        <EuiButtonEmpty
          size="xs"
          onClick={() =>
            setSaved((v) =>
              v.includes(item.id)
                ? v.filter((id) => id !== item.id)
                : [...v, item.id],
            )
          }
        >
          {saved.includes(item.id) ? "Unsave" : "Save event"}
        </EuiButtonEmpty>
      ),
    },
  ];
  return (
    <main
      style={{
        padding: 24,
        background: euiTheme.colors.backgroundBasePlain,
        color: euiTheme.colors.textParagraph,
      }}
    >
      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
        <EuiFlexItem>
          <EuiText size="xs">
            <p>ELASTIC UI · LOG EXPLORER</p>
          </EuiText>
          <EuiTitle size="m">
            <h1>Investigate gateway events</h1>
          </EuiTitle>
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
          <EuiSwitch
            label="Dark mode"
            checked={dark}
            onChange={(e) => setDark(e.target.checked)}
          />
        </EuiFlexItem>
      </EuiFlexGroup>
      <EuiSpacer size="l" />
      <EuiFlexGroup>
        <EuiFlexItem>
          <EuiPanel>
            <EuiStat title="6" description="Sample events" titleSize="m" />
          </EuiPanel>
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiPanel>
            <EuiStat
              title="1"
              description="Error event"
              titleSize="m"
              titleColor="danger"
            />
          </EuiPanel>
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiPanel>
            <EuiStat
              title={String(saved.length)}
              description="Saved in this preview"
              titleSize="m"
            />
          </EuiPanel>
        </EuiFlexItem>
      </EuiFlexGroup>
      <EuiSpacer size="l" />
      <EuiPanel>
        <EuiTitle size="xs">
          <h2>Event stream</h2>
        </EuiTitle>
        <EuiText size="s">
          <p>09:42:18–09:42:36 · fictional data · no live telemetry</p>
        </EuiText>
        <EuiSpacer size="m" />
        <EuiFlexGroup alignItems="center">
          <EuiFlexItem>
            <EuiFieldSearch
              fullWidth
              aria-label="Search log events"
              placeholder="Search service or message"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              incremental
            />
          </EuiFlexItem>
          <EuiFlexItem grow={false}>
            <EuiButtonGroup
              legend="Filter severity"
              options={[
                { id: "all", label: "All" },
                { id: "Warning", label: "Warning" },
                { id: "Error", label: "Error" },
              ]}
              idSelected={level}
              onChange={(id) => setLevel(id)}
            />
          </EuiFlexItem>
        </EuiFlexGroup>
        <EuiSpacer size="m" />
        <EuiText size="xs">
          <p aria-live="polite">{visible.length} matching events</p>
        </EuiText>
        <div style={{ overflowX: "auto", maxWidth: "100%" }}>
          <div style={{ minWidth: 640 }}>
            <EuiBasicTable
                  responsiveBreakpoint={false}
              items={visible}
              itemId="id"
              columns={columns}
              tableCaption="Fictional application events"
              noItemsMessage="No events match the current filters."
            />
          </div>
        </div>
        {!visible.length && (
          <EuiButtonEmpty
            onClick={() => {
              setLevel("all");
              setQuery("");
            }}
          >
            Clear filters
          </EuiButtonEmpty>
        )}
      </EuiPanel>
      <EuiSpacer size="l" />
      <EuiCallOut size="s" title="Local investigation workspace">
        Saving an event only changes this preview. No query is sent to
        Elasticsearch and no incident is created.
      </EuiCallOut>
      <EuiSpacer size="m" />
      <EuiText size="xs">
        <p>
          Native Elastic UI 123.0.0 · Borealis 8.1.0 theme · controlled filters
          and table actions.
        </p>
      </EuiText>
    </main>
  );
}
function App() {
  const [dark, setDark] = useState(false);
  return (
    <EuiProvider colorMode={dark ? "dark" : "light"}>
      <Screen dark={dark} setDark={setDark} />
    </EuiProvider>
  );
}
createRoot(document.getElementById("root")).render(<App />);

import React from 'react';
import { useEuiTheme } from '@elastic/eui';
export function InvestigationNote({ children }) {
  const { euiTheme } = useEuiTheme();
  return <aside style={{ padding: euiTheme.size.m, color: euiTheme.colors.textParagraph, borderLeft: `2px solid ${euiTheme.colors.primary}` }}>{children}</aside>;
}