Update ui/components.py

ui/components.py

@@ -4,6 +4,7 @@ Ensures full compatibility with app.py
 Updated with proper imports and error handling
 NOW WITH REAL ARF INSTALLATION DETECTION
 UPDATED: Added realism panel integration for Tab 1
+UPDATED: Added dynamic performance metrics function for Phase 2
 """
 
 import gradio as gr
@@ -64,6 +65,132 @@ def create_status_bar() -> gr.HTML:
     </div>
     """)
 
+# -----------------------------
+# Performance Metrics Function - NEW FOR PHASE 2
+# -----------------------------
+def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS) -> tuple:
+    """
+    Update performance metrics based on scenario
+    Returns: (detection_time_html, mttr_html, auto_heal_html, savings_html)
+    
+    Different metrics based on scenario type:
+    - Cache scenarios: Fast detection, moderate recovery
+    - Database scenarios: Medium detection, slower recovery  
+    - Kubernetes scenarios: Slower detection, fast recovery
+    - Network scenarios: Very fast detection, very fast recovery
+    - Storage scenarios: Fast detection, slow recovery
+    """
+    
+    # Scenario-specific metrics mapping
+    metrics_config = {
+        # Cache scenarios
+        "Cache": {
+            "detection_time": ("45s", "↓89%", "#3b82f6"),
+            "mttr": ("12m", "↓73%", "#10b981"),
+            "auto_heal": ("81.7%", "↑5.4×", "#8b5cf6"),
+            "savings_multiplier": 0.85
+        },
+        # Database scenarios
+        "Database": {
+            "detection_time": ("38s", "↓91%", "#3b82f6"),
+            "mttr": ("18m", "↓68%", "#10b981"),
+            "auto_heal": ("74.3%", "↑4.8×", "#8b5cf6"),
+            "savings_multiplier": 0.82
+        },
+        # Kubernetes scenarios
+        "Kubernetes": {
+            "detection_time": ("52s", "↓87%", "#3b82f6"),
+            "mttr": ("15m", "↓71%", "#10b981"),
+            "auto_heal": ("79.2%", "↑5.1×", "#8b5cf6"),
+            "savings_multiplier": 0.83
+        },
+        # Network scenarios
+        "Network": {
+            "detection_time": ("28s", "↓93%", "#3b82f6"),
+            "mttr": ("8m", "↓82%", "#10b981"),
+            "auto_heal": ("88.5%", "↑6.2×", "#8b5cf6"),
+            "savings_multiplier": 0.88
+        },
+        # Storage scenarios
+        "Storage": {
+            "detection_time": ("35s", "↓92%", "#3b82f6"),
+            "mttr": ("22m", "↓65%", "#10b981"),
+            "auto_heal": ("71.8%", "↑4.6×", "#8b5cf6"),
+            "savings_multiplier": 0.80
+        },
+        # Default (fallback)
+        "Default": {
+            "detection_time": ("42s", "↓90%", "#3b82f6"),
+            "mttr": ("14m", "↓70%", "#10b981"),
+            "auto_heal": ("78.9%", "↑5.0×", "#8b5cf6"),
+            "savings_multiplier": 0.85
+        }
+    }
+    
+    # Determine scenario type
+    scenario_type = "Default"
+    for key in ["Cache", "Database", "Kubernetes", "Network", "Storage"]:
+        if key.lower() in scenario_name.lower():
+            scenario_type = key
+            break
+    
+    # Get metrics for scenario type
+    metrics = metrics_config.get(scenario_type, metrics_config["Default"])
+    
+    # Get scenario data for savings calculation
+    scenario_data = scenarios.get(scenario_name, {})
+    business_impact = scenario_data.get("business_impact", {})
+    revenue_loss = business_impact.get('revenue_loss_per_hour', 8500)
+    savings_amount = int(revenue_loss * metrics["savings_multiplier"] / 1000)
+    
+    # Create HTML for each metric card
+    detection_time_html = f"""
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid {metrics['detection_time'][2]};">
+        <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div>
+        <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4>
+            <p style="font-size: 28px; font-weight: bold; color: {metrics['detection_time'][2]}; margin: 8px 0;">{metrics['detection_time'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['detection_time'][1]} faster than average</p>
+        </div>
+    </div>
+    """
+    
+    mttr_html = f"""
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid {metrics['mttr'][2]};">
+        <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
+        <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Mean Time to Resolve</h4>
+            <p style="font-size: 28px; font-weight: bold; color: {metrics['mttr'][2]}; margin: 8px 0;">{metrics['mttr'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['mttr'][1]} faster than manual</p>
+        </div>
+    </div>
+    """
+    
+    auto_heal_html = f"""
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid {metrics['auto_heal'][2]};">
+        <div style="font-size: 28px; margin-bottom: 10px;">🤖</div>
+        <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Auto-Heal Rate</h4>
+            <p style="font-size: 28px; font-weight: bold; color: {metrics['auto_heal'][2]}; margin: 8px 0;">{metrics['auto_heal'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['auto_heal'][1]} industry average</p>
+        </div>
+    </div>
+    """
+    
+    savings_html = f"""
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #f59e0b;">
+        <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
+        <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Saved</h4>
+            <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${savings_amount:.1f}K</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
+        </div>
+    </div>
+    """
+    
+    logger.info(f"✅ Updated performance metrics for {scenario_name} ({scenario_type} type)")
+    return detection_time_html, mttr_html, auto_heal_html, savings_html
+
 # -----------------------------
 # Tab 1: Live Incident Demo - UPDATED WITH REALISM PANEL
 # -----------------------------