Monitoring
System monitoring and status display components
Components for system monitoring and status displays.
Prerequisites
- Complete the installation
- Add the dependency to your app's
package.json
{
"dependencies": {
"@tetherto/mdk-react-devkit": "*",
"@tetherto/mdk-react-adapter": "*",
"@tetherto/mdk-ui-foundation": "*"
}
}Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
LogActivityIcon
Status icon used inside <LogRow> to indicate event severity (info / warning / error / success)
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
status | Required | string | - | - |
LogDot
Coloured dot used to mark a log event's severity or category inline with the row
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
status | Required | string | - | Severity string for color mapping |
type | Required | string | - | 'Incidents' renders a colored circle; 'Activity' renders an activity icon |
LogItem
Compact log-line element rendering a single event with optional icon, timestamp, and message
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
data | Required | LogData | - | - |
onLogClicked | Optional | ((uuid: string) => void) | - | - |
LogRow
Single row of a logs feed — composes the dot/icon, timestamp, and message into one entry
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
log | Required | LogData | - | Log entry data |
type | Required | string | - | Log type (controls dot appearance) |
onLogClicked | Optional | ((uuid: string) => void) | - | Click handler |
style | Optional | React.CSSProperties | - | Inline style for the row container |
LogsCard
Card wrapper for a vertically scrolling logs feed with a sticky header
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
emptyMessage | Optional | string | "No active incidents" | Message shown when logsData is empty |
isDark | Optional | boolean | false | Applies dark card theme |
isLoading | Optional | boolean | false | Shows skeleton rows while loading |
label | Optional | string | - | Card header label |
logsData | Optional | LogData[] | [] | Array of log entries to display |
onLogClicked | Optional | (uuid: string) => void | - | Fired with the log UUID when a row is clicked |
pagination | Optional | LogPagination | - | Pagination config; hides pagination when on page 1 or data is empty |
skeletonRows | Optional | number | 4 | Number of skeleton rows shown during loading |
type | Optional | string | - | Log type ('Incidents' or 'Activity'); controls the LogDot appearance |