Log components

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

Prerequisites

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

`LogsCard`

Container for displaying a list of log entries with pagination.

Import

import { LogsCard } from '@mdk/core'

Props

Prop	Type	Default	Description
`logsData`	`LogData[]`	`[]`	Array of log entries
`type`	`string`	none	Log type identifier
`label`	`string`	none	Card label
`isLoading`	`boolean`	`false`	Show loading skeleton
`isDark`	`boolean`	`false`	Dark theme variant
`emptyMessage`	`string`	`'No incidents'`	Empty state message
`skeletonRows`	`number`	`5`	Number of skeleton rows
`pagination`	`LogPagination`	none	Pagination configuration
`onLogClicked`	`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.

Import

import { LogRow } from '@mdk/core'

Props

Prop	Type	Default	Description
`log`	`LogData`	none	Required: Log entry data
`type`	`string`	none	Required: Log type identifier
`style`	`CSSProperties`	none	Custom styles
`onLogClicked`	`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.

Import

import { LogItem } from '@mdk/core'

Props

Prop	Type	Default	Description
`data`	`LogData`	none	Required: Log entry data
`onLogClicked`	`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 for log entries.

Import

import { LogDot } from '@mdk/core'

Props

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

Basic usage

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

`ActivityLogIcon`

Icon for activity log entries.

Import

import { ActivityLogIcon } from '@mdk/core'

Props

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

Basic usage

<ActivityLogIcon status="online" />
<ActivityLogIcon status="offline" />
<ActivityLogIcon 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