StatusPageManager

Code

import { StatusPageManager, type StatusPageSettings } from "@fadymondy/nasaq/web";declare const settings: StatusPageSettings;declare const api: { save(s: StatusPageSettings): Promise<void> };export const Manager = () => <StatusPageManager settings={settings} onSave={(next) => api.save(next)} />;

Monitoring · beta

Live examples and controls: StatusPageManager in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/status-page-manager.json

Decide what the public status page shows. Set the page title, the address (a slug) and an optional custom domain; switch a service off to hide it and use the arrows to reorder. Changes are staged: Save and Discard appear when something differs from the saved settings. Post incident opens a dialog with a title, a message, impact, status and the services affected, and lists the incidents below. It has no backend: onSave and onPostIncident talk to the server and you pass the new settings back.

When to useCopy Anchor Link

• The settings side of a status page product.

When not to useCopy Anchor Link

• Monitors and their checks: use UptimeMonitors.
• The public page itself: use StatusPage.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

import { StatusPageManager, type StatusPageSettings } from "@fadymondy/nasaq/web";

declare const settings: StatusPageSettings;
declare const api: { save(s: StatusPageSettings): Promise<void> };

export const Manager = () => <StatusPageManager settings={settings} onSave={(next) => api.save(next)} />;

AnatomyCopy Anchor Link

StatusPageManager            data-slot="status-page-manager"
├─ header                    title, View public page, Post incident
├─ settings                  title, slug, custom domain
├─ services                  list: Switch (show), name, Move up, Move down
├─ Save bar                  Discard, Save changes
├─ incidents                 IncidentList
└─ incident Dialog           title, message, impact, status, affected services

APICopy Anchor Link

StatusPageManager: every Card prop except children, plus:

Helpers (pure, tested): isValidStatusSlug, moveItem(list, index, delta).

ExamplesCopy Anchor Link

Validate a slug

import { isValidStatusSlug } from "@fadymondy/nasaq/web";

isValidStatusSlug("acme-status"); // true
isValidStatusSlug("Acme Status"); // false

AccessibilityCopy Anchor Link

• Each switch and arrow has a name that includes the service. Invalid fields are described by their message.
• The incident dialog traps focus and returns it. Saved and error messages are alerts.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. The slug and domain fields stay left to right; the arrow icon mirrors.

Styling & tokensCopy Anchor Link

• Built on Card, Switch, Dialog, Select, IncidentList and --nq-* tokens. Target [data-slot="status-page-manager"].

Do / Don'tCopy Anchor Link

• Do make posting an incident one step: it is used in an emergency.
• Do keep hidden services out of the public page (hidden means hidden).
• Don't save an invalid slug: the form blocks it, so should the server.
• Don't reuse the admin names on the public page without a check.

RelatedCopy Anchor Link

• status-page
• uptime-monitors
• domains-manager

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-monitoring-status-page-manager--docs