Log components

Components for displaying log entries, activity feeds, and event histories.

Prerequisites

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

`LogsCard`

Container for displaying a list of log entries with pagination.

Import

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

Props

Prop	Status	Type	Default	Description
`logsData`	Required	`LogData[]`	`[]`	Array of log entries
`type`	Required	`string`	none	Log type identifier
`label`	Required	`string`	none	Card label
`isLoading`	Required	`boolean`	`false`	Show loading skeleton
`isDark`	Required	`boolean`	`false`	Dark theme variant
`emptyMessage`	Required	`string`	`'No incidents'`	Empty state message
`skeletonRows`	Required	`number`	`5`	Number of skeleton rows
`pagination`	Required	`LogPagination`	none	Pagination configuration
`onLogClicked`	Required	`function`	none	Log click callback

`LogData` type

type LogData = {
  uuid: string
  body: string
  title: string
  status: string
  subtitle: string
}

`LogPagination` type

type LogPagination = {
  current: number
  total: number
  pageSize: number
  handlePaginationChange: (page: number) => void
}

Basic usage

const logs = [
  {
    uuid: '1',
    title: 'Miner Offline',
    subtitle: 'Site A - Rack 12',
    body: 'Miner 001 went offline at 14:32',
    status: 'error',
  },
  {
    uuid: '2',
    title: 'Hashrate Drop',
    subtitle: 'Site B - Rack 5',
    body: 'Hashrate dropped below threshold',
    status: 'warning',
  },
]

<LogsCard
  label="Recent Incidents"
  logsData={logs}
  type="incident"
  onLogClicked={(uuid) => handleLogClick(uuid)}
/>

With pagination

const [page, setPage] = useState(1)

<LogsCard
  label="Activity Log"
  logsData={logs}
  type="activity"
  pagination={{
    current: page,
    total: 100,
    pageSize: 10,
    handlePaginationChange: setPage,
  }}
/>

Loading state

<LogsCard
  label="Loading..."
  isLoading
  skeletonRows={5}
/>

Styling

.mdk-logs-card: Root container
.mdk-logs-card__inner-container: Content wrapper
.mdk-logs-card__list-container: Log list container
.mdk-logs-card__pagination: Pagination area
.mdk-logs-card__empty: Empty state container

`LogRow`

Renders an individual log entry row with title, subtitle, body, and status indicator. Supports a click callback via onLogClicked.

Import

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

Props

Prop	Status	Type	Default	Description
`log`	Required	`LogData`	none	Log entry data
`type`	Required	`string`	none	Log type identifier
`style`	Optional	`CSSProperties`	none	Custom styles
`onLogClicked`	Optional	`function`	none	Click callback

Basic usage

<LogRow
  log={{
    uuid: '1',
    title: 'System Alert',
    subtitle: 'High temperature detected',
    body: 'Rack 5 temperature exceeded 80°C',
    status: 'warning',
  }}
  type="alert"
  onLogClicked={(uuid) => viewDetails(uuid)}
/>

`LogItem`

Compact log item display driven by a LogData object, with an optional onLogClicked callback.

Import

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

Props

Prop	Status	Type	Default	Description
`data`	Required	`LogData`	none	Log entry data
`onLogClicked`	Optional	`function`	none	Click callback

Basic usage

<LogItem
  data={{
    uuid: '1',
    title: 'Configuration Change',
    subtitle: 'Pool settings updated',
    body: 'Primary pool changed to us-east',
    status: 'info',
  }}
/>

`LogDot`

Status indicator dot used in log entries, color-coded by log type and status values.

Import

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

Props

Prop	Status	Type	Default	Description
`type`	Required	`string`	none	Log type identifier
`status`	Required	`string`	none	Status value

Basic usage

<LogDot type="incident" status="error" />
<LogDot type="activity" status="success" />
<LogDot type="alert" status="warning" />

`LogActivityIcon`

Status icon used in activity log entries, reflecting online, offline, and warning states.

Import

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

Props

Prop	Status	Type	Default	Description
`status`	Required	`string`	none	Status value

Basic usage

<LogActivityIcon status="online" />
<LogActivityIcon status="offline" />
<LogActivityIcon status="warning" />

Status values

Log components support the following status values:

Status	Color	Use case
`success`	Green	Successful operations
`error`	Red	Errors, failures
`warning`	Yellow	Warnings, alerts
`info`	Blue	Informational
`default`	Gray	Neutral/unknown

Log components

On this page