HistoricalAlerts

Sortable data table of historical alerts within a controlled date range. Renders a header with title + `DateRangePicker`, then the table.

Sortable data table of historical alerts within a controlled date range. Renders a header with title + DateRangePicker, then the table.

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

Prop	Status	Type	Default	Description
`alerts`	Optional	`Alert[] \| undefined`	—	Pre-fetched historical alerts log entries (each with a `thing` device payload).
`isLoading`	Optional	`boolean \| undefined`	—	—
`localFilters`	Required	`AlertLocalFilters`	—	Filters and search tags coming from the parent (typically shared with `CurrentAlerts`).
`filterTags`	Required	`string[]`	—	—
`dateRange`	Required	`HistoricalAlertsRange`	—	Selected date range for the historical query (controlled).
`onDateRangeChange`	Required	`(range: HistoricalAlertsRange) => void`	—	—
`onAlertClick`	Optional	`((id?: string \| undefined, uuid?: string \| undefined) => void) \| undefined`	—	—
`className`	Optional	`string \| undefined`	—	—

Usage

Sortable data table of historical alerts within a controlled date range, with an embedded DateRangePicker.

Sibling component: CurrentAlerts. 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

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 HistoricalAlerts. * * Wrap the page in `<MdkProvider>` so the `useTimezoneFormatter` hook used by * the table can read the timezone store. */import { useState } from 'react'import type { Alert } from '@tetherto/mdk-react-devkit'import { HistoricalAlerts } from '@tetherto/mdk-react-devkit'const NOW = Date.now()const DAY = 24 * 60 * 60 * 1000const mockAlerts: Alert[] = [  {    id: '1',    uuid: 'alrt-1',    severity: 'critical',    name: 'miner_offline',    description: 'Miner 0xA1 has stopped reporting.',    code: '001',    createdAt: NOW - 2 * DAY,    thing: { id: 'miner-A1' },  },  {    id: '2',    uuid: 'alrt-2',    severity: 'warning',    name: 'temp_high',    description: 'Container 03 exceeded 78°C.',    code: '002',    createdAt: NOW - 5 * DAY,    thing: { id: 'container-03' },  },]export const HistoricalAlertsExample = () => {  const [range, setRange] = useState({ start: NOW - 7 * DAY, end: NOW })  return (    <HistoricalAlerts      alerts={mockAlerts}      isLoading={false}      localFilters={{}}      filterTags={[]}      dateRange={range}      onDateRangeChange={setRange}      onAlertClick={(id) => {        // eslint-disable-next-line no-console        console.log(`open alert ${id}`)      }}    />  )}