Use isto quando o leitor precisa ler o estado atual de um sistema num relance — o que está saudável, o que está indo na direção errada e o que acabou de quebrar.
Este é um exemplar copiável. Leve o bloco <section id="demo-stage"> para uma lição construída a partir de assets/lesson-template.html — os tokens de design e o padrão Simples → Técnico já combinam.
Um relatório de status responde a uma pergunta rapidamente: está tudo bem agora? Os números grandes no topo são os sinais vitais — disponibilidade, velocidade, erros, tráfego — cada um com uma pequena seta mostrando se melhorou ou piorou desde ontem. Abaixo deles, uma tabela lista cada parte do sistema, uma linha para cada, com um selo colorido dizendo se está bem, com dificuldades ou fora do ar.
Pense nisso como… o painel de um carro. O velocímetro e o medidor de combustível são seus blocos de KPI — um relance diz se algo precisa de atenção. A fileira de luzes de alerta é a tabela de status: cada luz é uma parte do motor, e verde significa relaxe, âmbar significa fique de olho, vermelho significa pare.
Disponibilidade é a parcela de tempo em que o serviço respondeu com sucesso ao longo da janela (aqui, 30 dias móveis). Latência p95 é o tempo de resposta que 95% das requisições superam — um sinal de saúde melhor que a média porque captura a cauda lenta que os usuários reais sentem.
Taxa de erro é a fração de requisições que retornam respostas 5xx / com falha. Requisições/min é a vazão — contexto útil, já que um pico de latência com 10× de tráfego se lê de forma muito diferente de um pico em repouso.
A cor codifica bom vs ruim, nunca subindo vs descendo. Disponibilidade mais alta é bom (verde); taxa de erro mais alta é ruim (ferrugem), mesmo que ambas as setas apontem para cima. O olho deve ler primeiro a cor e depois a seta.
Este é o formato em si: quatro blocos de KPI e, em seguida, uma tabela de status por serviço. Toque em Atualizar para puxar uma nova leitura, ou ligue o Ao vivo para ver os números e selos avançarem — do jeito que um engenheiro de plantão os vê.
Saúde dos serviços — plataforma Atlas API
production · us-east · janela móvel de 30 dias
| Serviço | Status | Taxa de erro | Último incidente |
|---|
Um único array de objetos de serviço alimenta tanto a tabela quanto o selo de consolidação. Cada tick perturba as métricas dentro de limites realistas, recalcula o status de cada serviço a partir de sua taxa de erro e então re-deriva o banner geral: qualquer fora do ar → vermelho, qualquer degradado → âmbar, senão verde. Os deltas dos KPIs são coloridos pelo significado (bom/ruim), não pela direção da seta.
O texto de “atualizado” é uma região aria-live="polite" para que leitores de tela anunciem as atualizações sem roubar o foco. O status nunca é só cor — cada selo combina o tom com um rótulo de texto e um ponto. O modo ao vivo é um verdadeiro botão aria-pressed; os SVGs de sparkline carregam role="img" + aria-label.