Elastic UI Sistema di progettazione.

Struttura dell’esploratore del sistema di progettazione sistema di design Elastic UI

Uno spazio di lavoro per le indagini, non una dashboard generica

L’esempio presenta tre statistiche di riepilogo compatte e un unico flusso di eventi. Un campo di ricerca e un gruppo di gravità restringono il flusso; ogni riga offre un’azione di salvataggio indipendente. Tenere l’azione accanto all’evento permette a chi legge di raccogliere elementi utili senza uscire dal contesto filtrato. Il riepilogo indica esplicitamente il conteggio degli eventi di esempio, senza dichiarare che si tratti di traffico in tempo reale.

Usa il perimetro del tema corrente

Questo esempio abbina EUI 123.0.0 a Borealis 8.1.0. I valori di riferimento provengono da quel tema pubblicato, non da uno screenshot precedente di Amsterdam. EuiProvider gestisce la modalità visiva e il contesto degli stili. Lo stato dell’applicazione resta indipendente dai calcoli del tema, quindi cambiare aspetto non azzera gli eventi salvati né la query corrente.

Ruoli semantici dei colori nel sistema di progettazione sistema di design Elastic UI

Usa la gravità per esprimere una relazione significativa

In questa applicazione, Info usa il ruolo primario, Warning quello di avviso ed Error quello di pericolo. EuiHealth mostra la parola che indica la gravità accanto al punto. Questa corrispondenza è una regola dell’applicazione; non implica che ogni elemento del colore primario rappresenti una gravità informativa. Anche il conteggio degli errori e le etichette degli eventi devono essere leggibili come testo.

Risolvi i colori dal tema attivo

La schermata richiama useEuiTheme e usa i colori risolti per lo sfondo, il testo principale e gli indicatori di stato. Le tabelle di esportazione includono i valori abbinati per modalità chiara e scura, così che la differenza sia visibile. Non copiare lo stesso valore esadecimale in entrambe le modalità e non usare i nomi delle classi Emotion generate per forzare una corrispondenza.

Gerarchia tipografica e numerica del sistema di progettazione sistema di design Elastic UI

Fornisci il contesto delle statistiche prima di mettere in risalto il numero

EuiStat abbina 6 eventi di esempio, 1 evento di errore e il conteggio degli elementi salvati alle rispettive descrizioni. Il numero da solo sarebbe ambiguo. EuiTitle introduce l’indagine, mentre EuiText specifica l’intervallo temporale e chiarisce che si tratta di dati di esempio. L’intestazione del flusso è un titolo di livello inferiore, non un secondo titolo di pagina.

Mantieni leggibile il testo dei log anche con una densità elevata

Borealis usa un valore base di esportazione di 14px con un riferimento di interlinea pari a 1.5, oltre a passi tipografici di 12/16/20/24/30px. Timestamp e nomi dei servizi hanno colonne prevedibili, mentre il messaggio dell’evento occupa lo spazio flessibile. L’esempio usa i font di sistema disponibili tramite lo stack nativo e non dichiara di caricare da remoto un asset Inter.

Tabella di base e filtri controllati del sistema di progettazione sistema di design Elastic UI

Separa la presentazione dal filtraggio

EuiBasicTable riceve gli elementi già filtrati. Le colonne definiscono un campo o un renderer personalizzato, mentre itemId usa l’ID stabile dell’evento. EuiFieldSearch aggiorna lo stato della query; EuiButtonGroup aggiorna l’ID della gravità selezionata. L’applicazione combina entrambi i criteri prima di passare alla tabella la raccolta visibile.

1. Digita il nome di un servizio o una parte del messaggio.
2. Scegli Error o Warning per applicare anche un criterio di gravità.
3. Salva un evento corrispondente usando l’azione della relativa riga.
4. Cancella i filtri e verifica che l’evento salvato rimanga contrassegnato.

Salva usando l’identità dell’evento, non la posizione della riga

Spaziatura e dati adattabili del sistema di progettazione sistema di design Elastic UI

Usa la scala di spaziatura nativa per tutti i gruppi

Le dimensioni pubblicate sono 4, 8, 12, 16, 24, 32 e 40px. EuiSpacer ed EuiFlexGroup gestiscono lo spazio tra statistiche riepilogative, filtri e tabella degli eventi. EuiPanel definisce la forma del contenitore; il tema distingue il raggio di 12px dei pannelli da quello di 8px dei controlli e di 16px delle cornici.

Mantieni la pagina entro l’area visibile del dispositivo mobile

I gruppi di riepilogo e i filtri si ridispongono grazie al comportamento nativo di FlexGroup. La tabella si trova in un’area delimitata con scorrimento orizzontale e larghezza minima dell’applicazione di 640px: timestamp, messaggio e azioni restano così correlati, senza che l’intera pagina fuoriesca dall’area visibile. Per una tabella di produzione, puoi scegliere le opzioni documentate per le tabelle responsive in base alle colonne effettivamente presenti.

Elastic UI Stati di ricerca, vuoto e salvataggio del sistema di design

Una ricerca senza risultati offre un’azione per riprendere

Una query senza corrispondenze mostra il messaggio Nessun evento corrisponde ai filtri correnti e l’azione Cancella filtri. Reimpostando la query e la gravità vengono ripristinati tutti e sei gli eventi di esempio, senza modificare gli ID salvati. Il conteggio sopra la tabella comunica il numero di eventi corrispondenti tramite una regione live con annuncio cortese.

Un salvataggio locale non è un flusso di gestione degli incidenti

Il salvataggio di un evento modifica l’etichetta visibile della riga e la statistica degli elementi salvati. Non contatta Elasticsearch, non crea un incidente e non conserva i dati dopo l’aggiornamento della pagina. Un prodotto reale per le indagini dovrebbe aggiungere un endpoint di persistenza documentato e segnalare le risposte in sospeso o non riuscite prima di dichiarare persistente la raccolta salvata.

Elastic UI Azioni accessibili nelle tabelle del sistema di design

Assegna ai filtri un nome indipendente dai segnaposto

La ricerca ha un nome accessibile e il gruppo di pulsanti fornisce una legenda per la gravità. Le colonne della tabella hanno intestazioni descrittive; l’azione di ogni riga è un EuiButtonEmpty nativo. EuiHealth include del testo, quindi il colore dello stato non è mai l’unica informazione disponibile. Mantieni queste caratteristiche quando sostituisci i dati di esempio.

• Indica la gravità con parole visibili.
• Mantieni la didascalia della tabella e i nomi delle colonne.
• Associa lo stato salvato all’ID stabile dell’evento.

Mantieni coerenti lo stato visivo e quello da tastiera

Gli utenti possono portare il focus sulla ricerca, selezionare un filtro di gravità, raggiungere le azioni delle righe e attivare o disattivare l’impostazione dell’aspetto. L’anello di focus da 2px fa parte del riferimento del tema. Prova un insieme filtrato dopo aver salvato una riga e dopo aver cancellato il filtro: l’etichetta dell’azione e la statistica degli elementi salvati devono continuare a essere coerenti.

Elastic UI Configurazione e integrazione del tema del sistema di design

Installa le dipendenze peer documentate

La guida ufficiale alla configurazione usa Yarn e indica Borealis, Emotion, datemath e moment tra le dipendenze richieste insieme a EUI. Questo esempio viene eseguito con React 18 e non racchiude l’albero in StrictMode. La configurazione seguente esplicita questi vincoli, invece di ereditare implicitamente React 19 da un’applicazione appena generata.

Considera il file di ingresso completo come l’implementazione

Elastic UI Esempi di componenti del sistema di design

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>;
}