MDK Logo
ReferenceUI KitReactUI Kit foundationComponentsFeedback

AlarmRow

Single alarm-feed row with severity dot, timestamp, source device, and the alert message.

Single alarm-feed row with severity dot, timestamp, source device, and the alert message.

import { AlarmRow } from "@tetherto/mdk-react-devkit";
PropStatusTypeDefaultDescription
dataRequiredTimelineItemData
onNavigateRequired(path: string) => void

Usage

Single alarm-feed row with a severity dot, timestamp, source device label, and the alert message body. Clicking the row triggers onNavigate to route to the alarm detail page.

Notes

  • Severity colour is driven by item.status via ALERT_COLOR_MAP; supported values match the alert severity palette (critical, warning, info, etc.).
  • The body string is split on | and each segment is rendered as a separate line.

Example

import { AlarmRow } from '@tetherto/mdk-react-devkit'const mockAlarm = {  item: {    title: 'Container 03 temp >78°C',    subtitle: '12 min ago',    body: 'Sustained above warning threshold.|Fan speed at maximum.',    uuid: 'alarm-002',    status: 'warning',  },  dot: null,  children: null,}export const AlarmRowExample = () => (  <div className="mdk-example-row">    <AlarmRow      data={mockAlarm}      onNavigate={(path) => {        console.warn(`navigate to ${path}`)      }}    />  </div>)