Anomaly Card

AI
Detection

AI-powered exception detection card with severity indicators, trend analysis, and intelligent root cause analysis. Helps teams quickly identify and respond to system anomalies.

Interactive Preview

Different severity levels with AI-generated root cause analysis

Critical
Server Response Time
Current Value
2450ms
+390%
Expected Range
100 – 500 ms
Warning
Memory Usage
Current Value
87%
+16%
Expected Range
40 – 75 %

Features

  • Severity indicators: Color-coded borders and badges for critical, warning, attention, and info levels
  • Deviation tracking: Visual trend indicators showing positive or negative deviations
  • AI root cause analysis: Intelligent explanation with confidence scores
  • Supporting data: Tagged evidence supporting the AI's analysis
  • Quick actions: Snooze, dismiss, investigate, and resolve options
  • Expandable details: Collapsible AI analysis section

Installation

Import the AnomalyCard component and provide metric data, severity level, and optional AI root cause analysis.

// Example usage
import { AnomalyCard } from '@/components/ai/anomaly-card'

<AnomalyCard
  severity="critical"
  metric="Server Response Time"
  currentValue={2450}
  unit="ms"
  expectedRange={{ min: 100, max: 500 }}
  deviation={390}
  trend={[450, 520, 680, 1200, 1800, 2450]}
  rootCause={{
    explanation: "Database connection pool exhaustion...",
    confidence: 0.87,
    supportingData: ['Connection pool: 98%', 'Query avg: 2.3s']
  }}
  onInvestigate={() => handleInvestigate()}
  onSnooze={(duration) => handleSnooze(duration)}
  onDismiss={() => handleDismiss()}
/>