Exception Dashboard

Monitoring
Enterprise
Dashboard

Comprehensive overview dashboard for monitoring all system exceptions and anomalies. Real-time aggregation with multiple view modes, filtering, and auto-refresh capabilities.

Preview

Dashboard with category summaries and multiple view modes

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 Ratio
info
78%
Expected: 85–100 %
Auto-refresh every 30sLast updated: 8:48:01 PM

View Modes

Switch between card, list, and grid layouts

Card View (Default)

Exception Dashboard

2 total exceptions

Critical
1
Warning
1
Attention
0
Info
0
Server Response Time
critical
2450ms
Expected: 100–500 ms
Memory Usage
warning
87%
Expected: 40–75 %
Auto-refresh every 30sLast updated: 8:48:01 PM

Grid View

Exception Dashboard

2 total exceptions

Critical
1
Warning
1
Attention
0
Info
0
Server Response Time
critical
2450ms
Expected: 100–500 ms
Memory Usage
warning
87%
Expected: 40–75 %
Auto-refresh every 30sLast updated: 8:48:01 PM

Empty State

Clean display when no exceptions are detected

Exception Dashboard

0 total exceptions

Critical
0
Warning
0
Attention
0
Info
0

All Clear!

No exceptions requiring attention

Auto-refresh every 30sLast updated: 8:48:01 PM

Props

ExceptionDashboard component API reference

PropTypeDefaultDescription
exceptionsException[][]Array of exceptions to display in the dashboard
defaultViewMode'card' | 'list' | 'grid''card'Initial view mode for displaying exceptions
onRefresh() => void—Callback when the refresh button is clicked
onExport() => void—Callback when the 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

Exception Type

interface Exception {
  id: string
  severity: 'critical' | 'warning' | 'attention' | 'info'
  metric: string
  currentValue: number
  unit: string
  expectedRange: {
    min: number
    max: number
  }
}

Usage

Import and implementation example

import { ExceptionDashboard, 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() {
  const handleRefresh = () => {
    // Fetch latest exceptions
    console.log('Refreshing...')
  }

  const handleExport = () => {
    // Export exception data
    console.log('Exporting...')
  }

  const handleExceptionClick = (exception: Exception) => {
    // Navigate to exception details
    console.log('Exception clicked:', exception)
  }

  return (
    <ExceptionDashboard
      exceptions={exceptions}
      defaultViewMode="grid"
      onRefresh={handleRefresh}
      onExport={handleExport}
      onExceptionClick={handleExceptionClick}
      autoRefreshInterval={60}
    />
  )
}
This block is self-contained (no UI component dependencies)

Features

Built-in functionality

  • Category summaries: At-a-glance view of exception counts by severity level
  • Multiple view modes: Card, list, and grid layouts for different preferences
  • Real-time search: Filter exceptions by metric name or description
  • Auto-refresh: Configurable automatic data refresh intervals
  • Export capabilities: Download exception data for reporting and analysis
  • Severity-based styling: Color-coded exceptions by severity level
  • Expected range display: Shows current value vs expected range for context
  • Responsive layout: Adapts to different screen sizes seamlessly
  • Dark mode: Full dark mode support with proper color contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="region" on dashboard containeraria-label for search inputaria-pressed on view mode togglesrole="listbox" for exception list

Keyboard Navigation

KeyAction
TabNavigate between search, view toggles, and exception cards
Enter / SpaceActivate buttons or select an exception
Arrow KeysNavigate between view mode options

Notes

  • Severity categories use semantic color coding for visual indication
  • Search input has clear placeholder text for guidance
  • View mode toggles announce their current state
  • Exception cards are clickable and keyboard accessible
  • Auto-refresh interval is displayed in the footer for transparency

Related Components

AlertSystemAnomalyCardThresholdConfiguratorDataTable