Visualize Agent Metrics in Dashboard

[aarora79]

Parent Issue: #195

Objective

Create comprehensive dashboard visualization for A2A agent metrics, performance, and business intelligence.

Quick Links

• Strands Multi-Agent Documentation: https://strandsagents.com/latest/documentation/docs/user-guide/concepts/multi-agent/agent-to-agent/
• AWS Bedrock AgentCore A2A Runtime: https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/runtime-a2a.html

Dashboard Architecture

Frontend Components (React/TypeScript)

• Real-time metrics display
• Interactive charts and graphs
• Agent performance comparison
• Booking funnel visualization
• System health monitoring
• Alert notifications

Dashboard Pages

1. Overview Dashboard

Displays system-wide health and key metrics at a glance.

Components:

• Key Metrics Cards:

  • Total agents online
  • Active bookings in last hour
  • System uptime
  • Average response time

• System Health Gauge:

  • Overall system status (healthy, warning, critical)
  • Agent availability status
  • Database performance
  • Registry response time

• Revenue Summary:

  • Today's revenue
  • Yesterday's revenue
  • Weekly trend
  • Monthly projection

Code Example:

interface OverviewMetrics {
  totalAgentsOnline: number;
  activeBookings: number;
  systemUptime: number;
  avgResponseTime: number;
  todayRevenue: number;
  yesterdayRevenue: number;
}

const OverviewDashboard: React.FC = () => {
  const [metrics, setMetrics] = useState<OverviewMetrics | null>(null);
  
  useEffect(() => {
    const fetchMetrics = async () => {
      const response = await fetch('/api/metrics/summary');
      setMetrics(await response.json());
    };
    
    const interval = setInterval(fetchMetrics, 5000); // Refresh every 5s
    fetchMetrics();
    
    return () => clearInterval(interval);
  }, []);
  
  if (!metrics) return <div>Loading...</div>;
  
  return (
    <div className="overview-dashboard">
      <MetricCard title="Agents Online" value={metrics.totalAgentsOnline} />
      <MetricCard title="Active Bookings" value={metrics.activeBookings} />
      <SystemHealthGauge uptime={metrics.systemUptime} />
      <RevenueChart today={metrics.todayRevenue} yesterday={metrics.yesterdayRevenue} />
    </div>
  );
};

2. Agent Performance Dashboard

Detailed metrics for individual agents.

Components:

• Agent Selection Dropdown: Choose which agent to analyze

• Performance Metrics Panel:

  • Response time (p50, p95, p99)
  • Throughput (calls/min)
  • Error rate
  • Success rate

• Time Series Charts:

  • Response time trends (hourly, daily, weekly)
  • Error rate over time
  • Throughput trends
  • Availability timeline

• Comparative View:

  • Compare performance across multiple agents
  • Benchmark against average
  • Identify outliers

Code Example:

interface AgentPerformance {
  agentName: string;
  responseTimeP50: number;
  responseTimeP95: number;
  responseTimeP99: number;
  throughputPerMin: number;
  errorRate: number;
  successRate: number;
}

const AgentPerformanceDashboard: React.FC = () => {
  const [selectedAgent, setSelectedAgent] = useState<string>('');
  const [performance, setPerformance] = useState<AgentPerformance | null>(null);
  
  useEffect(() => {
    if (!selectedAgent) return;
    
    const fetchPerformance = async () => {
      const response = await fetch(`/api/metrics/agent/${selectedAgent}`);
      setPerformance(await response.json());
    };
    
    fetchPerformance();
    const interval = setInterval(fetchPerformance, 10000);
    
    return () => clearInterval(interval);
  }, [selectedAgent]);
  
  return (
    <div className="agent-performance-dashboard">
      <AgentSelector 
        onSelect={setSelectedAgent}
        selected={selectedAgent}
      />
      {performance && (
        <>
          <PerformanceMetricsPanel metrics={performance} />
          <ResponseTimeChart agentName={selectedAgent} />
          <ErrorRateChart agentName={selectedAgent} />
        </>
      )}
    </div>
  );
};

3. Booking Funnel Dashboard

Tracks conversion through booking stages.

Components:

• Funnel Visualization:

  • Searches initiated
  • Trip plans created
  • Bookings confirmed
  • Payments processed
  • Cancellations
  • Conversion percentages between stages

• Metrics by Stage:

  • Users at each stage
  • Drop-off analysis
  • Time spent per stage
  • Common abandonment reasons

• Trend Analysis:

  • Daily conversion rates
  • Weekly trends
  • Seasonal patterns
  • Impact of marketing campaigns

Code Example:

interface BookingFunnel {
  searches: number;
  tripPlans: number;
  bookingsConfirmed: number;
  paymentsProcessed: number;
  searchToPlanRate: number;
  planToBookingRate: number;
  bookingToPaymentRate: number;
}

const BookingFunnelDashboard: React.FC = () => {
  const [funnel, setFunnel] = useState<BookingFunnel | null>(null);
  
  useEffect(() => {
    const fetchFunnel = async () => {
      const response = await fetch('/api/metrics/booking-funnel');
      setFunnel(await response.json());
    };
    
    fetchFunnel();
    const interval = setInterval(fetchFunnel, 30000); // 30s
    
    return () => clearInterval(interval);
  }, []);
  
  if (!funnel) return <div>Loading...</div>;
  
  return (
    <div className="booking-funnel-dashboard">
      <FunnelChart data={funnel} />
      <ConversionMetricsGrid metrics={funnel} />
      <FunnelTrendChart period="7d" />
    </div>
  );
};

4. System Health Dashboard

Real-time system status and alerts.

Components:

• Service Status Matrix:

  • Travel Assistant Agent status
  • Flight Booking Agent status
  • Registry service status
  • Database health
  • Network connectivity

• Performance Metrics:

  • CPU usage per agent
  • Memory consumption
  • Disk usage
  • Network I/O

• Active Alerts:

  • Performance alerts
  • Error rate alerts
  • Resource utilization alerts
  • Service unavailability alerts

• Historical Data:

  • Incident history
  • Error logs
  • Recovery timeline

Code Example:

interface ServiceStatus {
  name: string;
  status: 'healthy' | 'warning' | 'critical' | 'offline';
  lastCheck: Date;
  uptime: number;
  avgLatency: number;
  errorCount: number;
}

const SystemHealthDashboard: React.FC = () => {
  const [services, setServices] = useState<ServiceStatus[]>([]);
  const [alerts, setAlerts] = useState<Alert[]>([]);
  
  useEffect(() => {
    const fetchHealth = async () => {
      const response = await fetch('/api/health/services');
      setServices(await response.json());
    };
    
    const fetchAlerts = async () => {
      const response = await fetch('/api/alerts/active');
      setAlerts(await response.json());
    };
    
    fetchHealth();
    fetchAlerts();
    
    const interval = setInterval(() => {
      fetchHealth();
      fetchAlerts();
    }, 5000);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div className="system-health-dashboard">
      <ServiceStatusMatrix services={services} />
      <AlertsList alerts={alerts} />
      <ResourceUtilizationChart />
    </div>
  );
};

5. Revenue Analytics Dashboard

Business intelligence for booking revenue.

Components:

• Revenue Summary:

  • Total revenue (today, this week, this month)
  • Revenue per agent
  • Average booking value
  • Revenue trends

• Charts:

  • Daily revenue bar chart
  • Revenue by agent pie chart
  • Revenue trends line chart
  • Booking volume vs. revenue correlation

• Insights:

  • Top performing agents by revenue
  • Peak booking times
  • Customer acquisition cost (CAC)
  • Lifetime value (LTV) trends

UI Components Library

Reusable Components

// MetricCard Component
interface MetricCardProps {
  title: string;
  value: number | string;
  unit?: string;
  trend?: 'up' | 'down' | 'stable';
  trendValue?: string;
}

const MetricCard: React.FC<MetricCardProps> = ({ 
  title, 
  value, 
  unit,
  trend,
  trendValue 
}) => (
  <div className="metric-card">
    <h3>{title}</h3>
    <div className="metric-value">
      {value} {unit && <span className="unit">{unit}</span>}
    </div>
    {trend && (
      <div className={`trend ${trend}`}>
        {trendValue}
      </div>
    )}
  </div>
);

// Chart Component
interface ChartProps {
  data: any[];
  title: string;
  type: 'line' | 'bar' | 'pie' | 'funnel';
  height?: number;
}

const Chart: React.FC<ChartProps> = ({ data, title, type, height = 400 }) => (
  <div className="chart-container">
    <h3>{title}</h3>
    <ResponsiveContainer width="100%" height={height}>
      {/* Chart implementation using recharts or similar */}
    </ResponsiveContainer>
  </div>
);

Styling and Theme

Color Scheme

• Primary: Blue (#0066CC)
• Success: Green (#00AA00)
• Warning: Orange (#FF9900)
• Critical: Red (#CC0000)
• Background: Light Gray (#F5F5F5)

Responsive Design

• Mobile: 1-column layout
• Tablet: 2-column layout
• Desktop: 3+ column layout

Real-Time Updates

WebSocket Integration

const useMetricsWebSocket = (agentName: string) => {
  const [metrics, setMetrics] = useState<AgentMetrics | null>(null);
  
  useEffect(() => {
    const ws = new WebSocket(`ws://localhost:5000/metrics/${agentName}`);
    
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setMetrics(data);
    };
    
    return () => ws.close();
  }, [agentName]);
  
  return metrics;
};

Performance Optimization

• Lazy Loading: Load components on-demand
• Debouncing: Limit API calls during interactions
• Caching: Cache metrics for 5-10 seconds
• Virtual Scrolling: For large lists of metrics
• Code Splitting: Separate dashboard chunks

Acceptance Criteria

• Overview dashboard displays real-time metrics
• Agent performance dashboard with time series data
• Booking funnel visualization with conversion rates
• System health dashboard with alerts
• Revenue analytics dashboard
• Real-time WebSocket updates
• Responsive design for mobile/tablet/desktop
• Performance < 2 second load time
• All charts interactive and filterable
• Mobile-optimized views
• Accessibility (WCAG 2.1 AA)
• Error handling and loading states