AlertRow
Zapis alertu, który się zdarzył, takiego jak awaria albo nieudane sprawdzenie stanu, z miejscem i czasem. Wybierz go dla historii alertów; Enter przechodzi do źródła.
- AlertRow
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: AlertRow
Error: worker crashed with exit code 137docs · 2 min agoOut of memory
Warning: db failed its health check three timesdocs · 12 min agoUnhealthy
Error: api restarted 5 times in 2 minutessearch · 1 h agoRestart loop
Success: db is healthy againdocs · 3 h agoRecovered
Noc, podgląd: AlertRow
Error: worker crashed with exit code 137docs · 2 min agoOut of memory
Warning: db failed its health check three timesdocs · 12 min agoUnhealthy
Error: api restarted 5 times in 2 minutessearch · 1 h agoRestart loop
Success: db is healthy againdocs · 3 h agoRecovered
Wysoki kontrast, podgląd: AlertRow
Error: worker crashed with exit code 137docs · 2 min agoOut of memory
Warning: db failed its health check three timesdocs · 12 min agoUnhealthy
Error: api restarted 5 times in 2 minutessearch · 1 h agoRestart loop
Success: db is healthy againdocs · 3 h agoRecovered
UżycieLink do sekcji Użycie
import { AlertRow } from '@skribly/ui/ops'<List aria-label={t('alerts.recent')} items={alerts} emptyState={t('alerts.none')}>
{(a) => <AlertRow id={a.id} tone={a.kind === 'unhealthy' ? 'warn' : 'danger'} toneLabel={t(`tone.${tone}`)}
title={a.message} meta={`${a.project} · ${ago(a.at)}`} kindLabel={t(`alerts.${a.kind}`)}
onAction={() => focus(a.containerId)} />}
</List>Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Każdy ton ma własny kształt ikony i jest odczytywany jako słowo przed tytułem.
- Wiersz jest historią, a nie alertem na żywo: nowy alert ogłoś przez toast, w trybie assertive, gdy blokuje pracę.
- Enter uruchamia onAction; meta i plakietki zawijają się przy dużym powiększeniu.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.