Eidetic

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: 11:55:51 AM

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: 11:55:51 AM

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: 11:55:51 AM

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: 11:55:51 AM

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