LogsCard
Card wrapper for a vertically scrolling logs feed with a sticky header.
Card wrapper for a vertically scrolling logs feed with a sticky header.
import { LogsCard } from "@tetherto/mdk-react-devkit";
| Prop | Status | Type | Default | Description |
|---|
type | Optional | string | — | — |
label | Optional | string | — | — |
isDark | Optional | boolean | — | — |
isLoading | Optional | boolean | — | — |
logsData | Optional | LogData[] | — | — |
emptyMessage | Optional | string | — | — |
skeletonRows | Optional | number | — | — |
pagination | Optional | LogPagination | — | — |
onLogClicked | Optional | (uuid: string) => void | — | — |
Usage
A set of components for displaying paginated incident and activity log lists inside a labeled card.
Exports
| Name | Description |
|---|
LogsCard | High-level card containing a list of LogRow items, skeleton loading state, empty state, and optional pagination |
LogRow | A single log entry row (status dot + item content) |
LogItem | The content area of a log entry (title, subtitle, body, and optional navigate arrow) |
LogDot | Status indicator dot rendered to the left of a LogItem — appearance varies by type |
LogsCard Props
| Prop | Type | Required | Default | Description |
|---|
logsData | LogData[] | no | [] | Array of log entries to display |
type | string | no | — | Log type ('Incidents' or 'Activity'); controls the LogDot appearance |
label | string | no | — | Card header label |
isDark | boolean | no | false | Applies dark card theme |
isLoading | boolean | no | false | Shows skeleton rows while loading |
skeletonRows | number | no | 4 | Number of skeleton rows shown during loading |
emptyMessage | string | no | 'No active incidents' | Message shown when logsData is empty |
pagination | LogPagination | no | — | Pagination config; hides pagination when on page 1 or data is empty |
onLogClicked | (uuid: string) => void | no | — | Fired with the log UUID when a row is clicked |
LogData
| Field | Type | Description |
|---|
uuid | string | Unique identifier |
title | string | Primary text |
subtitle | string | Secondary text (truncated with title tooltip) |
body | string | Body text; |-separated values are split into separate lines |
status | string | Severity / status string ('Critical', 'High', 'Medium', activity status, etc.) |
LogPagination
| Field | Type | Description |
|---|
current | number | Current page number |
total | number | Total number of items |
pageSize | number | Items per page |
handlePaginationChange | (page: number) => void | Fired when the user changes the page |
LogRow Props
| Prop | Type | Required | Description |
|---|
log | LogData | yes | Log entry data |
type | string | yes | Log type (controls dot appearance) |
style | CSSProperties | no | Inline style for the row container |
onLogClicked | (uuid: string) => void | no | Click handler |
LogDot Props
| Prop | Type | Required | Description |
|---|
type | string | yes | 'Incidents' renders a colored circle; 'Activity' renders an activity icon |
status | string | yes | Severity string for color mapping |
Notes
LOG_TYPES constants ('Incidents', 'Activity') are exported from constants.tsx.- Severity colors map
'Critical' → red, 'High' → high-severity style, 'Medium' → medium-severity style.
Example
/** * Runnable example for LogsCard (and supporting log components). */import { useState } from 'react'import { LogsCard } from '@tetherto/mdk-react-devkit'import type { LogData } from '@tetherto/mdk-react-devkit'const INCIDENT_LOGS: LogData[] = [ { uuid: '1', title: 'High temperature detected', subtitle: 'Miner S19-042 · Rack 3', body: 'Chip temp: 98°C|Ambient: 42°C', status: 'Critical', }, { uuid: '2', title: 'Hash rate drop', subtitle: 'Miner S19-017 · Rack 1', body: 'Expected: 100 TH/s|Actual: 62 TH/s', status: 'High', }, { uuid: '3', title: 'Pool connection unstable', subtitle: 'Pool Manager', body: 'Reconnections: 4 in last 15 min', status: 'Medium', },]const ACTIVITY_LOGS: LogData[] = [ { uuid: '4', title: 'Firmware update completed', subtitle: '12 miners · Rack 2', body: 'Version: 2.1.4', status: 'Success', }, { uuid: '5', title: 'Miner restarted', subtitle: 'Miner A1346-008', body: 'Reason: Manual restart', status: 'Info', },]export const LogsExample = () => { const [page, setPage] = useState(2) return ( <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}> {/* Incidents with pagination */} <LogsCard label="Recent Incidents" type="Incidents" logsData={INCIDENT_LOGS} pagination={{ current: page, total: 30, pageSize: 3, handlePaginationChange: setPage, }} onLogClicked={(uuid) => console.warn('clicked', uuid)} /> {/* Activity log */} <LogsCard label="Activity Log" type="Activity" logsData={ACTIVITY_LOGS} /> {/* Loading state */} <LogsCard label="Loading…" type="Incidents" isLoading skeletonRows={4} /> {/* Empty state */} <LogsCard label="No Incidents" type="Incidents" logsData={[]} emptyMessage="All systems normal" /> </div> )}
