Alerts | MDK

Full alerts page — combines the searchable current-alerts table, an optional historical-alerts log section, severity filters, and the sound confirmation moda…

Full alerts page — combines the searchable current-alerts table, an optional historical-alerts log section, severity filters, and the sound confirmation modal. Wraps CurrentAlerts and HistoricalAlerts and coordinates their shared filter / date-range / selected-id state.

Must be rendered inside <MdkProvider> — the embedded tables read tag filters from the devices store and use the timezone formatter hook.

import { Alerts } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`devices`	Optional	`Device[][] \| undefined`	—	Devices payload powering the "Current Alerts" table. Mirrors the API response shape of `useGetListThingsQuery({ ... alerts query })`.
`isCurrentAlertsLoading`	Optional	`boolean \| undefined`	—	Loading flag for the "Current Alerts" table.
`historicalAlerts`	Optional	`Alert[] \| undefined`	—	Pre-fetched historical alerts log entries.
`isHistoricalAlertsLoading`	Optional	`boolean \| undefined`	—	—
`isHistoricalAlertsEnabled`	Optional	`boolean \| undefined`	`false`	When true, shows the "Historical Alerts Log" section. Mirrors the `alertsHistoricalLogEnabled` feature flag in the source app.
`selectedAlertId`	Optional	`string \| undefined`	—	Optional alert id used to focus on a single alert (deep-link from URL).
`initialSeverity`	Optional	`string \| undefined`	—	Initial severity selection (typically derived from `?severity=` URL param).
`onAlertClick`	Optional	`((id?: string \| undefined, uuid?: string \| undefined) => void) \| undefined`	—	Callback invoked when the operator clicks an alert row. Receives the device id and alert uuid.
`dateRange`	Optional	`HistoricalAlertsRange \| undefined`	—	Controlled date range for the historical alerts. Defaults to last 14 days.
`onDateRangeChange`	Optional	`((range: HistoricalAlertsRange) => void) \| undefined`	—	—
`isSoundEnabled`	Optional	`boolean \| undefined`	`false`	Whether sound notifications are enabled in user preferences.
`isDemoMode`	Optional	`boolean \| undefined`	`false`	When true, sound notifications are skipped (e.g. demo / preview).
`typeFiltersForSite`	Optional	`CascaderOption[] \| undefined`	—	Optional site-specific overrides for the type filter.
`header`	Optional	`React.ReactNode`	—	Optional header (e.g. breadcrumbs) rendered above the alerts.
`className`	Optional	`string \| undefined`	—	—

Usage

Page-level alerts feature: composes the searchable Current Alerts table with an optional Historical Alerts Log section. Handles severity-filter state, the sound-confirmation modal, historical date-range state, and the shared filterTags slice on the devices store.

Use this when you want a drop-in /alerts route. For just the current-alerts table or just the historical log, drop down to CurrentAlerts / HistoricalAlerts directly.

Requirements

Render inside <MdkProvider>. The component reads filterTags from the devices store and the historical log uses useTimezoneFormatter.

Data contracts

Device — foundation/types/device. Same shape consumed by CurrentAlerts.
Alert — foundation/types/alerts. Same shape consumed by HistoricalAlerts.
HistoricalAlertsRange — { start: number; end: number } (ms epoch).

Notes

Filter tags are written to the shared devices store via useDevices().setFilterTags — clicking a row appends the device id, mirroring the source app behaviour.
When isHistoricalAlertsEnabled is false, only the current-alerts table renders.
For URL-driven deep links, pass initialSeverity (one render only) for the severity dropdown and selectedAlertId to highlight a row.

Example

/** * Runnable example for the Alerts feature page. * * Wrap the app in `<MdkProvider>` — the embedded tables read filter tags from * the devices store and the historical log uses the timezone formatter hook. */import type { Alert } from '@tetherto/mdk-react-devkit'import { Alerts } from '@tetherto/mdk-react-devkit'const NOW = Date.now()const MIN = 60 * 1000const DAY = 24 * 60 * MIN// The current-alerts table derives rows from `device.last.alerts`. We cast to// `never` to avoid duplicating the full `Device` type in the example.const mockDevices = [  [    {      id: 'miner-A1',      last: {        alerts: [          {            id: '1',            uuid: 'alrt-1',            severity: 'critical',            name: 'miner_offline',            description: 'Miner 0xA1 has stopped reporting.',            code: '001',            createdAt: NOW - 2 * MIN,          },        ],      },    },  ],]const mockHistorical: Alert[] = [  {    id: '2',    uuid: 'alrt-2',    severity: 'warning',    name: 'temp_high',    description: 'Container 03 exceeded 78°C.',    code: '002',    createdAt: NOW - 3 * DAY,    thing: { id: 'container-03' },  },]export const AlertsExample = () => {  return (    <Alerts      devices={mockDevices as never}      historicalAlerts={mockHistorical}      isHistoricalAlertsEnabled      isDemoMode      onAlertClick={(id, uuid) => {        // eslint-disable-next-line no-console        console.log('open alert', { id, uuid })      }}      onDateRangeChange={(range) => {        // eslint-disable-next-line no-console        console.log('historical range changed', range)      }}    />  )}