UptimeMonitors

Code

import { UptimeMonitors, type UptimeMonitor } from "@fadymondy/nasaq/web";declare const monitors: UptimeMonitor[];declare const api: { pause(id: string): Promise<void>; checkNow(id: string): Promise<void> };export const Uptime = () => (  <UptimeMonitors    monitors={monitors}    onPause={(id) => api.pause(id)}    onCheckNow={(id) => api.checkNow(id)}  />);

Monitoring · beta

Live examples and controls: UptimeMonitors in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/uptime-monitors.json

Monitor sites and services. The table shows each monitor's status, a strip of recent checks, the uptime for the chosen period (switch between 24 hours, 7 days and 30 days above the table), the response time and the last check. Row actions (also on right-click): check now, pause, resume, edit and delete. Below it, incidents are listed with their status, impact, how long they lasted and an update timeline. The parts are exported too: UptimeBar, UptimeBadge and IncidentList are reused by the public status page. It has no backend: your callbacks act and you pass the new monitors back.

When to useCopy Anchor Link

• An admin page for monitoring.
• UptimeBar and UptimeBadge anywhere a service's health is shown.

When not to useCopy Anchor Link

• The public page customers see: use StatusPage.
• Metrics over time (latency curves): use TimeSeriesPanel.

ImportCopy Anchor Link

import { UptimeMonitors } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { UptimeMonitors, type UptimeMonitor } from "@fadymondy/nasaq/web";

declare const monitors: UptimeMonitor[];
declare const api: { pause(id: string): Promise<void>; checkNow(id: string): Promise<void> };

export const Uptime = () => (
  <UptimeMonitors
    monitors={monitors}
    onPause={(id) => api.pause(id)}
    onCheckNow={(id) => api.checkNow(id)}
  />
);

AnatomyCopy Anchor Link

UptimeMonitors               data-slot="uptime-monitors"
├─ header                    title, overall status Badge
├─ toolbar                   search, period ToggleGroup (24h, 7d, 30d), Add monitor
├─ DataTable                 monitor, Status, UptimeBar, UptimeBadge, response, last check; row menu
├─ incidents                 IncidentList (Timeline of updates)
├─ monitor Dialog            name, address, type, interval
└─ AlertDialog               delete confirm

UptimeBar                    data-slot="uptime-bar"       one segment per check, oldest first
UptimeBadge                  data-slot="uptime-badge"     percent, coloured by health
IncidentList                 data-slot="incident-list"    newest first

APICopy Anchor Link

UptimeMonitors: every Card prop except children, plus:

UptimeBar: checks ("up" \| "degraded" \| "down" \| "none"), label. UptimeBadge: percent, period. IncidentList: incidents, showUpdates.

Helpers (pure, tested): computeUptime, formatUptime (truncates: never shows a false 100%), uptimeTone (99.9 and up is green, 99 and up amber, below red), overallStatus, incidentMinutes, formatIncidentDuration, isOpenIncident, responseLabel.

ExamplesCopy Anchor Link

Just the bar and badge

import { UptimeBadge, UptimeBar } from "@fadymondy/nasaq/web";

export const Health = () => (
  <>
    <UptimeBar checks={["up", "up", "degraded", "down", "up"]} />
    <UptimeBadge percent={99.95} period="30d" />
  </>
);

AccessibilityCopy Anchor Link

• The bar is an image with a text summary; each segment has a title. The uptime badge always carries the figure, never colour alone.
• The period switch is a labelled ToggleGroup. Row actions are also a button in the row.
• Errors from callbacks appear in an Alert.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. The bar runs right to left (oldest on the right). Percentages, addresses and times of response stay left to right.

Styling & tokensCopy Anchor Link

• Built on DataTable, Card, Badge, Status, Timeline, ToggleGroup and --nq-* tokens. Target [data-slot="uptime-monitors"].

Do / Don'tCopy Anchor Link

• Do count degraded as up for the percentage: the service answered.
• Do pass none for periods with no data instead of up.
• Don't round 99.996 up to 100%: use formatUptime.
• Don't hide open incidents behind a filter.

RelatedCopy Anchor Link

• status-page
• status-page-manager
• cert-monitor

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-monitoring-uptime-monitors--docs