Alerts and monitoring

Components for displaying active alerts, incidents, and system monitoring status in Bitcoin mining operations dashboards.

Prerequisites

Before using these components, complete the @mdk/foundation installation and add the dependency.

`ActiveIncidentsCard`

Dashboard card showing current alerts and incidents with severity indicators.

Import

import { ActiveIncidentsCard } from '@mdk/foundation'

Props

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

`TIncidentRowProps`

Each incident item requires these properties:

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

Basic usage

<ActiveIncidentsCard
  items={[
    {
      id: '1',
      title: 'High Temperature Alert',
      subtitle: '2 minutes ago',
      body: 'Container A3 exceeds 85°C threshold',
      severity: 'critical',
    },
    {
      id: '2',
      title: 'Hashrate Drop',
      subtitle: '15 minutes ago',
      body: 'Miner M-042 hashrate below 90 TH/s',
      severity: 'high',
    },
  ]}
  onItemClick={(id) => console.log('Clicked:', id)}
/>

Loading state

<ActiveIncidentsCard isLoading skeletonRows={3} />

Empty state

<ActiveIncidentsCard
  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

`AlarmRow`

Individual alarm display with color-coded severity indicator and status icon.

Import

import { AlarmRow } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`TimelineItemData`	required	Alarm data object
`onNavigate`	`(path: string) => void`	required	Navigation handler when row is clicked

`TimelineItemData` type

type AlarmItemData = {
  title: string
  subtitle: string
  body: string
  uuid?: string
  status: string  // Determines color and icon
}

type TimelineItemData = {
  item: AlarmItemData
  dot: ReactNode
  children: ReactNode
}

Basic usage

<AlarmRow
  data={{
    item: {
      title: 'Temperature Warning',
      subtitle: 'Container A1',
      body: 'Board temp exceeds 80°C',
      uuid: 'alert-001',
      status: 'warning',
    },
    dot: null,
    children: null,
  }}
  onNavigate={(path) => router.push(path)}
/>

Styling

.mdk-alarm-row: Root element (uses --mdk-alarm-color CSS variable)
.mdk-alarm-row__container: Clickable container
.mdk-alarm-row__title-row: Title and icon row
.mdk-alarm-row__title: Alarm title
.mdk-alarm-row__subtitle: Alarm subtitle
.mdk-alarm-row__body: Alarm body text (supports | delimiter for line breaks)

`AlarmContents`

Container component that renders a list of alarms with empty state handling.

Import

import { AlarmContents } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`alarmsData`	`TimelineItemData[]`	required	Array of alarm data objects
`onNavigate`	`(path: string) => void`	required	Navigation handler passed to each AlarmRow

Basic usage

<AlarmContents
  alarmsData={[
    {
      item: {
        title: 'Critical Alert',
        subtitle: 'Miner M-042',
        body: 'Hashboard failure detected',
        uuid: 'alert-001',
        status: 'critical',
      },
      dot: null,
      children: null,
    },
    {
      item: {
        title: 'Warning',
        subtitle: 'Container B2',
        body: 'Fan speed below threshold',
        uuid: 'alert-002',
        status: 'warning',
      },
      dot: null,
      children: null,
    },
  ]}
  onNavigate={(path) => router.push(path)}
/>

Empty state

When alarmsData is empty or undefined, displays "No active alarm or event":

<AlarmContents alarmsData={[]} onNavigate={handleNavigate} />

Styling

.mdk-alarm-contents: Root element
.mdk-alarm-contents__list: List container for AlarmRow components
.mdk-alarm-contents__fallback: Fallback content container

Alerts and monitoring

On this page