Monitoring Components
System monitoring and status display components
Components for system monitoring and status displays.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
LogActivityIcon
Status icon used inside <[**LogRow**](/reference/ui/components/monitoring/#logrow)> to indicate event severity (info / warning / error / success).
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
status | string | ✓ | - | - |
LogDot
Coloured dot used to mark a log event's severity or category inline with the row.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
type | string | ✓ | - | - |
status | string | ✓ | - | - |
LogItem
Compact log-line element rendering a single event with optional icon, timestamp, and message.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | LogData | ✓ | - | - |
onLogClicked | ((uuid: string) => void) | undefined | - | - |
LogRow
Single row of a logs feed — composes the dot/icon, timestamp, and message into one entry.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
log | LogData | ✓ | - | - |
type | string | ✓ | - | - |
style | React.CSSProperties | undefined | - | - | |
onLogClicked | ((uuid: string) => void) | undefined | - | - |
LogsCard
Card wrapper for a vertically scrolling logs feed with a sticky header.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
type | string | - | - | |
label | string | - | - | |
isDark | boolean | - | - | |
isLoading | boolean | - | - | |
logsData | LogData[] | - | - | |
emptyMessage | string | - | - | |
skeletonRows | number | - | - | |
pagination | LogPagination | - | - | |
onLogClicked | (uuid: string) => void | - | - |