Alarm panel

Industrial alarm records with independent condition, acknowledgement and shelving states, explicit filters and host-confirmed actions.

Preview

Plant alarms

2 of 2 alarm records

Cooling flowMedium
Circulation loop
Condition
Cleared
Acknowledgement
Unacknowledged
Shelving
Not shelved
Sensor connection
Example instrument
Condition
Active
Acknowledgement
Acknowledged
Shelving
Shelved
Shelved until 15:00, local plant time

In action

Review a cleared event

Operator log / Local demonstration

Circulation events

The condition cleared before the operator reviewed it.

1 of 1 alarm records

Cooling flowMedium
Circulation loop / Example event
Condition
Cleared
Acknowledgement
Unacknowledged
Shelving
Not shelved
14:32, plant time

When to use

Use it for

Operator alarm lists with supplied lifecycle fields and explicit unknown values.
Supply allowed actions and onAction to request acknowledgement, shelving or unshelving. Return pending and then confirmed records from the host.
Use filter and onFilterChange for an application-owned filter; uncontrolled filtering starts from defaultFilter.
Provide unique alarm ids, a bounded set of visible records, event time labels and the site's explicit time-zone context.

Not for

Treating acknowledgement as clearing a condition, or shelving as acknowledgement.
Using a displayed action as proof that equipment changed state. The host owns permissions, audit records, filtering of large streams and shelving timers.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { AlarmPanel } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/alarm-panel.

2. Vendor the source

npx @noorddev/vlak-cli add alarm-panel

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/alarm-panel.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { AlarmPanel } from "@noorddev/vlak-react";

<AlarmPanel label="Plant alarms" alarms={[
  { id: "flow", label: "Cooling flow", source: "Example circulation loop", priority: "Medium", condition: "cleared", acknowledgement: "unacknowledged", shelving: "unshelved", timeLabel: "14:32, supplied event time" },
  { id: "sensor", label: "Sensor connection", condition: "active", acknowledgement: "acknowledged", shelving: "shelved", shelvedUntilLabel: "15:00, local plant time" },
]} />

Props

AlarmPanel

An industrial alarm's condition, acknowledgement and shelving are independent records.

Prop	Type	Default	Description
`label`required	`string`
`alarms`required	`readonly AlarmRecord[]`
`filter`	`AlarmFilter`
`defaultFilter`	`AlarmFilter`	`"all"`
`onFilterChange`	`(filter: AlarmFilter) => void`
`onAction`	`(id: string, action: AlarmAction) => void`		Requests an operation. Update the supplied record only after the host confirms it.
`disabled`	`boolean`
`description`	`ReactNode`

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab`	Moves through filter buttons and supplied enabled alarm actions.
`Enter, Space`	Applies a filter or requests the focused action.

Accessibility

Each alarm exposes separate condition, acknowledgement and shelving fields as visible text in a description list.
Pressed filter buttons use a full fill; all controls have 44px targets, visible keyboard focus and forced-colour support.
A polite record count reflects the current filter. Pending records keep their confirmed state and disable actions.
The div ref, native attributes, className and style pass through.

Markup

<div class="rs-alarm-panel"><p class="rs-alarm-panel-heading">Plant alarms</p><ul class="rs-alarm-panel-list"><li class="rs-alarm-panel-item"><div class="rs-alarm-panel-head">Cooling flow</div><dl class="rs-alarm-panel-states"><div><dt class="rs-alarm-panel-term">Condition</dt><dd class="rs-alarm-panel-value">Cleared</dd></div><div><dt class="rs-alarm-panel-term">Acknowledgement</dt><dd class="rs-alarm-panel-value">Unacknowledged</dd></div><div><dt class="rs-alarm-panel-term">Shelving</dt><dd class="rs-alarm-panel-value">Not shelved</dd></div></dl></li></ul></div>

Classes

.rs-alarm-panel.rs-alarm-panel-heading.rs-alarm-panel-copy.rs-alarm-panel-filters.rs-alarm-panel-button.rs-alarm-panel-selected.rs-alarm-panel-list.rs-alarm-panel-item.rs-alarm-panel-head.rs-alarm-panel-states.rs-alarm-panel-term.rs-alarm-panel-value.rs-alarm-panel-actions

Depends on

/button