MDK by Tether

Views for inspecting past alerts and incident history. Pair this page with the dashboard for live context.

Prerequisites

Complete the @tetherto/mdk-ui-foundation installation and add the dependency

`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-ui-foundation'
import type { HistoricalAlertsProps, HistoricalAlertsRange } from '@tetherto/mdk-ui-foundation'

Props

Prop	Type	Default	Description
`alerts`	`Alert[]`	`[]`	Pre-fetched historical alert entries
`isLoading`	`boolean`	`false`	Show table loading state
`localFilters`	`AlertLocalFilters`	required	Filters and search state shared with `CurrentAlerts`
`filterTags`	`string[]`	required	Active filter tags
`dateRange`	`HistoricalAlertsRange`	required	Controlled start/end timestamps (ms)
`onDateRangeChange`	`(range: HistoricalAlertsRange) => void`	required	Fires when the user picks a new range
`onAlertClick`	`(id?: string, uuid?: string) => void`	none	Row click handler
`className`	`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 the useTimezone() hook's getFormattedDate.

Next steps

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

Alerts

On this page