CurrentAlerts

Sortable, searchable data table of currently active alerts derived from a raw devices payload. Plays an audible beep when a critical alert is present (gated …

Sortable, searchable data table of currently active alerts derived from a raw devices payload. Plays an audible beep when a critical alert is present (gated by isSoundEnabled + user confirmation modal).

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

Prop	Status	Type	Default	Description
`devices`	Optional	`Device[][] \| undefined`	—	Raw devices (with last.alerts) used to derive current alerts from. Shape mirrors the API response from the source app.
`isLoading`	Optional	`boolean \| undefined`	—	—
`localFilters`	Required	`AlertLocalFilters`	—	Filters controlled outside (typically by URL severity param).
`onLocalFiltersChange`	Required	`(filters: AlertLocalFilters) => void`	—	—
`filterTags`	Required	`string[]`	—	Search tags (controlled). Mirrors the redux `selectFilterTags` slice in the source app.
`onFilterTagsChange`	Required	`(tags: string[]) => void`	—	—
`selectedAlertId`	Optional	`string \| undefined`	—	Optional id used to focus on a single alert (deep-link from URL).
`onAlertClick`	Optional	`((id?: string \| undefined, uuid?: string \| undefined) => void) \| undefined`	—	Click handler when the user opens an alert (right arrow icon in the row).
`isSoundEnabled`	Optional	`boolean \| undefined`	`false`	Whether sound notifications are enabled in user preferences (e.g. theme slice).
`isDemoMode`	Optional	`boolean \| undefined`	`false`	Skip sound entirely (e.g. in demo/preview environments).
`typeFiltersForSite`	Optional	`CascaderOption[] \| undefined`	—	Optional site-specific overrides for the type filter.
`className`	Optional	`string \| undefined`	—	—

Usage

Sortable, searchable data table of currently active alerts derived from a raw Device[][] payload. Plays an audible beep when a critical alert is present (gated by user confirmation).

Sibling component: HistoricalAlerts. Both render the same DataTable columns from alerts-table-columns.tsx.

Data contracts

Alert — @tetherto/mdk-react-devkit / foundation/types/alerts
AlertLocalFilters — same package, foundation/components/alerts/alerts-types
Device — foundation/types/device

Notes

Calls useTimezoneFormatter from @tetherto/mdk-react-adapter; wrap your app in <MdkProvider> so the timezone store is reachable.
getRowId returns the alert uuid.

Example

/** * Runnable example for CurrentAlerts. */import { useState } from 'react'import { CurrentAlerts } from '@tetherto/mdk-react-devkit'// The component derives its rows from a raw `devices` payload (`device.last.alerts`).// We use `any` casts on the mock to avoid duplicating the long `Device` type here —// the production code expects a `Device[][]` from the Gateway API.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: Date.now() - 2 * 60 * 1000,          },        ],      },    },  ],]export const CurrentAlertsExample = () => {  const [filterTags, setFilterTags] = useState<string[]>([])  const [localFilters, setLocalFilters] = useState({})  return (    <CurrentAlerts      devices={mockDevices as never}      isLoading={false}      localFilters={localFilters}      onLocalFiltersChange={setLocalFilters}      filterTags={filterTags}      onFilterTagsChange={setFilterTags}      onAlertClick={(id) => {        // eslint-disable-next-line no-console        console.log(`open alert ${id}`)      }}      isDemoMode    />  )}