ActiveIncidentsCard

Summary card displaying a list of active incidents/alerts with severity indicators, loading skeleton, and empty state. Rows are virtualized via `@tanstack/re…

Summary card displaying a list of active incidents/alerts with severity indicators, loading skeleton, and empty state. Rows are virtualized via @tanstack/react-virtual so the card stays responsive with thousands of incidents.

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

Prop	Status	Type	Default	Description
`label`	Optional	`string`	—	—
`isLoading`	Optional	`boolean`	—	—
`className`	Optional	`string`	—	—
`skeletonRows`	Optional	`number`	—	—
`emptyMessage`	Optional	`string`	—	—
`items`	Optional	`TIncidentRowProps[]`	—	—
`onItemClick`	Optional	`(id: string) => void`	—	—

Usage

Summary card displaying a list of active incidents/alerts with severity indicators, loading skeleton, and empty state.

Data contracts

TIncidentRowProps is exported alongside the component. Each item needs at least an id, severity (critical | warning | info), and title.

Notes

Designed for a side-panel placement, but works equally well as a section inside a dashboard page.
Rows are virtualized via @tanstack/react-virtual — the card stays responsive even with thousands of incidents in items.
Use CurrentAlerts / HistoricalAlerts instead when you need the full filterable, sortable data-table experience.

Example

/** * Runnable example for ActiveIncidentsCard. */import { ActiveIncidentsCard, type TIncidentRowProps } from '@tetherto/mdk-react-devkit'const mockItems: TIncidentRowProps[] = [  {    id: '1',    severity: 'critical',    title: 'Miner 0xA1 offline',    body: 'No telemetry received in 2 min.',    subtitle: '2 min ago',  },  {    id: '2',    severity: 'high',    title: 'Container 03 temp >78°C',    body: 'Sustained above warning threshold.',    subtitle: '12 min ago',  },  {    id: '3',    severity: 'medium',    title: 'Pool latency elevated',    body: 'Round-trip 220ms (baseline 80ms).',    subtitle: '1 h ago',  },]export const ActiveIncidentsCardExample = () => {  return (    <ActiveIncidentsCard      label="Active Alerts"      items={mockItems}      onItemClick={(id) => {        // eslint-disable-next-line no-console        console.log(`open alert ${id}`)      }}    />  )}