System Status Dashboard — Uptime Widget HTML CSS JS

A system status dashboard communicates service health to end users, support teams, and stakeholders. It answers three questions instantly: is everything working right now, which services have had issues recently, and is there an active incident being worked on? This snippet implements a complete status page widget with six service rows, 30-bar uptime histograms, colour-coded status badges, an active incident callout box, and an animated pulsing dot for live outages.

Uptime bar chart generation

The 30 uptime bars are generated programmatically from a DATA object mapping service IDs to arrays of 30 values (0–1). A value of 1 means fully operational, 0 means outage, and intermediate values represent degraded performance. JavaScript creates one <div class="bar"> per value, sets its height proportionally (Math.max(8, Math.round(v * 24))px), and adds class out or deg for colouring. The minimum height of 8px ensures that even zero-uptime days are visible as a thin red bar rather than disappearing entirely.

Status colour system

Three states use a consistent colour system across the entire component: green (#22c55e) for operational, amber (#f59e0b) for degraded, red (#ef4444) for outage. Each state has a badge variant (light background tint + dark text), a dot variant (solid circle), and a bar variant (coloured fill). By using the same three colours throughout, users can instantly scan the entire page and understand the pattern without reading every label.

Animated outage pulse

The outage dot uses a CSS @keyframes pulse animation that cycles opacity between 1 and 0.4 every 1.2 seconds. This mimics the "live" indicator pattern used in broadcast media and emergency dashboards — the motion attracts attention to the one service that needs immediate focus. Only the outage dot pulses; operational and degraded dots are static, so the animation carries signal rather than noise.

Incident callout box

When an incident is active, an amber callout box below the service list provides human-readable context: what is affected, the current status (investigating/monitoring/resolved), and time since the incident started. The warm orange palette (#fff7ed background, #fed7aa border) visually connects to the amber degraded state but is distinct from the red outage badges — it signals "something is being worked on" rather than "everything is broken".

Service row layout

Each service row is a flex container with three zones: left (dot + service name + latency), center (uptime bar chart), right (badge + percentage). The center zone has flex: 1 so it expands to fill available space. The right zone has min-width: 88px and text-align: right to keep badges and percentages aligned across rows. The left zone has min-width: 150px to prevent service names from wrapping.

React integration

Define a SERVICES array where each entry has id, name, latency, status, uptime (percentage string), and bars (30-element array). Map over it to render <ServiceRow /> components. The uptime bars render inside a useEffect or directly as JSX with .map() — prefer JSX mapping over imperative DOM manipulation in React. The active incident can be a separate incident prop on the parent StatusDashboard component.

Real-world integration

In production, replace the hardcoded DATA object with API responses from a status monitoring service (Betterstack, PagerDuty, or your own health-check endpoints). Poll every 30 seconds with setInterval and update the bars array. Store historical uptime in a time-series database and query the last 90 days on page load. The visual component stays identical — only the data source changes.

See also the metric card grid snippet for KPI dashboards, the line chart widget snippet for time-series data visualization, and the activity heatmap snippet for calendar-based uptime visualization.