Alerts

Alerts views and bell button — current alerts, historical log, and header alarm indicator

@tetherto/mdk-react-devkit/foundation

Alerts components cover the full alarm surface: AlarmsBellButton in the app header, the Alerts feature composite (current + historical tabs), and the standalone HistoricalAlerts table. Pair with the dashboard for live context.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency

Components

Component	Description
`HistoricalAlerts`	Historical alerts log with date-range picker and data table
`AlarmsBellButton`	Top-bar bell button with three-line severity alarm badge
`Alerts`	Current and historical alerts log view

`HistoricalAlerts`

Renders the historical alerts log as a sortable data table, with a date-range picker in the title row for adjusting the query window. Shares filter state with the current alerts view.

Import

import { HistoricalAlerts } from '@tetherto/mdk-react-devkit/foundation'
import type { HistoricalAlertsProps, HistoricalAlertsRange } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`alerts`	Optional	`Alert[]`	`[]`	Pre-fetched historical alert entries
`isLoading`	Optional	`boolean`	`false`	Show table loading state
`localFilters`	Required	`AlertLocalFilters`	none	Filters and search state shared with `CurrentAlerts`
`filterTags`	Required	`string[]`	none	Active filter tags
`dateRange`	Required	`HistoricalAlertsRange`	none	Controlled start/end timestamps (ms)
`onDateRangeChange`	Required	`function`	none	Fires when the user picks a new range
`onAlertClick`	Optional	`function`	none	Row click handler
`className`	Optional	`string`	none	Additional CSS class

`HistoricalAlertsRange` type

type HistoricalAlertsRange = {
  start: number
  end: number
}

Basic usage

<HistoricalAlerts
  alerts={historicalAlerts}
  localFilters={localFilters}
  filterTags={filterTags}
  dateRange={{ start: rangeStart, end: rangeEnd }}
  onDateRangeChange={({ start, end }) => setRange({ start, end })}
  onAlertClick={(id, uuid) => console.log('Alert clicked', id, uuid)}
/>

Loading state

<HistoricalAlerts
  alerts={[]}
  isLoading
  localFilters={localFilters}
  filterTags={filterTags}
  dateRange={dateRange}
  onDateRangeChange={onDateRangeChange}
/>

Behaviour notes

The component wires a DateRangePicker into the table title via AlertsTableTitle, so date range changes come back through onDateRangeChange.
Rows are sorted by severity (descending) then creation date (descending) by default.
Timestamps are formatted through useTimezoneFormatter()'s getFormattedDate.

Next steps

For live incident context, see ActiveIncidentsCard on the dashboard Feeds page

On this page