React Alarm Console

Copy Page

The screen an operator looks at first and trusts most. Active alarms sorted so the unacknowledged and the critical rise to the top, with acknowledge, shelve, and clear on every row — and a summary bar that answers "how bad is it right now?" at a glance.

Installation

Props

The lifecycle it encodes

Alarm management is a discipline with a standard behind it — ISA-18.2 — and the details this component gets right are the ones that standard exists to enforce:

• Unacknowledged is a distinct state, and it sorts first. An alarm nobody has claimed is the most important thing on the screen; it carries a badge, a subtle row wash for critical, and a pulsing bell in the header. Acknowledging it does not make it go away — the condition is still active — it records that an operator has seen it.
• Shelving is not clearing. A nuisance alarm can be shelved to quiet it without pretending the condition resolved; shelved rows dim but remain, and are excluded from the critical/warning counts so a shelved alarm can't hide a real one.
• Clearing removes it. Reserve that for a genuinely resolved condition.

Severity is critical, warning, or info, and it is never signalled by colour alone — each carries an icon and a text badge, so the screen still works for a colour-blind operator on a night shift. Wire the three callbacks to your historian; the component manages the optimistic UI and re-syncs when the alarms prop updates.