Eidetic

Exception Dashboard

Dashboard
Monitoring
AI

A monitoring dashboard that displays system exceptions categorized by severity with search, view modes, and auto-refresh.

Built With

3 components

This block uses the following UI components from the design system:

BadgeButtonInput

Preview

Full exception dashboard with category summary and exception cards

Exception Dashboard

4 total exceptions

Critical
1
Warning
1
Attention
1
Info
1
Server Response Time
critical
2450ms
Expected: 100–500 ms
Memory Usage
warning
87%
Expected: 40–75 %
API Error Rate
attention
4.2%
Expected: 0–2 %
Cache Hit Rate
info
72%
Expected: 80–99 %
Auto-refresh every 30sLast updated: 11:55:56 AM

With Default Data

Dashboard using built-in sample exceptions

Exception Dashboard

3 total exceptions

Critical
1
Warning
1
Attention
1
Info
0
Server Response Time
critical
2450ms
Expected: 100–500 ms
Memory Usage
warning
87%
Expected: 40–75 %
API Error Rate
attention
4.2%
Expected: 0–2 %
Auto-refresh every 30sLast updated: 11:55:56 AM

Props

Component API reference

PropTypeDefaultDescription
exceptionsException[][...defaultExceptions]Array of exception objects to display
defaultViewMode'card' | 'list' | 'grid''card'Initial view mode
onRefresh() => void—Callback when refresh button is clicked
onExport() => void—Callback when export button is clicked
onExceptionClick(exception: Exception) => void—Callback when an exception card is clicked
autoRefreshIntervalnumber30Auto-refresh interval in seconds (0 to disable)
classNamestring—Additional CSS classes

Usage

Import and implementation example

import { ExceptionDashboard } from '@/components/ui/exception-dashboard'
import type { Exception } from '@/components/ui/exception-dashboard'


const exceptions: Exception[] = [
  {
    id: '1',
    severity: 'critical',
    metric: 'Server Response Time',
    currentValue: 2450,
    unit: 'ms',
    expectedRange: { min: 100, max: 500 },
  },
  {
    id: '2',
    severity: 'warning',
    metric: 'Memory Usage',
    currentValue: 87,
    unit: '%',
    expectedRange: { min: 40, max: 75 },
  },
]


export default function Example() {
  return (
    <ExceptionDashboard
      exceptions={exceptions}
      defaultViewMode="card"
      onRefresh={() => refetchData()}
      onExport={() => downloadCSV()}
      onExceptionClick={(e) => openDetail(e.id)}
    />
  )
}

Features

Built-in functionality

  • Severity categories: Critical, warning, attention, and info with color-coded summary cards
  • Three view modes: Card, list, and grid views with toggle buttons
  • Search filtering: Filter exceptions by metric name
  • Auto-refresh: Configurable auto-refresh interval display
  • Refresh & export: Built-in refresh and export action buttons
  • Empty state: Friendly all-clear message when no exceptions
  • Expected ranges: Displays expected vs current values for each metric

Accessibility

Accessibility considerations

ARIA Attributes

Severity badges provide semantic color codingInteractive cards are clickable with cursor feedback

Keyboard Navigation

KeyAction
TabNavigate between buttons, search, and cards
Enter / SpaceActivate focused button or card

Notes

  • Severity information is conveyed through both color and text labels
  • View mode toggle provides visual feedback for current selection
  • Search input allows quick filtering without mouse interaction

Related Components

BadgeAlertDataTable