Feeds

Feeds surface streams of operational events on the dashboard. ActiveIncidentsCard renders the current alerts feed; LogsCard (from @tetherto/mdk-react-devkit/core) renders activity and event logs.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency

`ActiveIncidentsCard`

Dashboard card showing current alerts and incidents with severity indicators.

Import

import { ActiveIncidentsCard } from '@tetherto/mdk-react-devkit/foundation'
import type { TIncidentRowProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`label`	Optional	`string`	`'Active Alerts'`	Card header label
`items`	Optional	`TIncidentRowProps[]`	`[]`	Array of incident items to display
`isLoading`	Optional	`boolean`	`false`	Show skeleton loading state
`skeletonRows`	Optional	`number`	`4`	Number of skeleton rows when loading
`emptyMessage`	Required	`string`	none	Message when no incidents
`onItemClick`	Required	`function`	none	Callback when an incident row is clicked
`className`	Optional	`string`	none	Additional CSS class

`TIncidentRowProps`

Each incident item requires these properties:

Prop	Status	Type	Default	Description
`id`	Optional	`string`	none	Unique incident identifier
`title`	Required	`string`	none	Incident title
`subtitle`	Required	`string`	none	Secondary text (e.g., timestamp or source)
`body`	Required	`string`	none	Incident description
`severity`	Required	`'critical' \| none	'high' \| 'medium'`	Severity level

Basic usage

<ActiveIncidentsCard
  label="Active Alerts"
  items={[
    {
      id: '1',
      title: 'High Temperature Alert',
      subtitle: 'Miner #A2341',
      body: 'Temperature exceeded 85°C threshold',
      severity: 'critical',
    },
    {
      id: '2',
      title: 'Network Connection Lost',
      subtitle: 'Pool: pool.example.com',
      body: 'Connection timeout after 30 seconds',
      severity: 'high',
    },
  ]}
  onItemClick={(id) => console.log('Clicked:', id)}
/>

Loading state

<ActiveIncidentsCard label="Active Alerts" isLoading skeletonRows={4} />

Empty state

<ActiveIncidentsCard
  label="Active Alerts"
  items={[]}
  emptyMessage="No active incidents"
/>

Styling

.mdk-active-incidents-card: Root element
.mdk-active-incidents-card__header: Header container
.mdk-active-incidents-card__label: Header label text
.mdk-active-incidents-card__list: Incidents list container
.mdk-active-incidents-card__row: Individual incident row
.mdk-active-incidents-card__row--clickable: Clickable row modifier
.mdk-active-incidents-card__row-title: Incident title
.mdk-active-incidents-card__row-subtitle: Incident subtitle
.mdk-active-incidents-card__row-body: Incident body text
.mdk-active-incidents-card__empty: Empty state container
.mdk-active-incidents-card__skeleton-container: Loading skeleton container

`LogsCard`

LogsCard is a @tetherto/mdk-react-devkit/core component used on the dashboard to render paginated activity and event log feeds..

Import from @tetherto/mdk-react-devkit/core:

import { LogsCard } from '@tetherto/mdk-react-devkit/core'

Next steps

For past alerts to pair with the active incidents feed, see HistoricalAlerts.

On this page