""" 🚀 ARF Ultimate Investor Demo v3.8.0 - ENTERPRISE EDITION MODULAR VERSION - Properly integrated with all components COMPLETE FIXED VERSION with enhanced Tab 1 """ # ... [Previous imports remain the same] ... try: # Import scenarios from demo.scenarios import INCIDENT_SCENARIOS # Import orchestrator from demo.orchestrator import DemoOrchestrator # Import ROI calculator from core.calculators import EnhancedROICalculator # Import visualizations from core.visualizations import EnhancedVisualizationEngine # Import UI components - IMPORTANT: These functions now return gr.HTML, not gr.Markdown from ui.components import ( create_header, create_status_bar, create_tab1_incident_demo, create_tab2_business_roi, create_tab3_enterprise_features, create_tab4_audit_trail, create_tab5_learning_engine, create_footer ) # Import styles from ui.styles import get_styles logger.info("✅ Successfully imported all modular components") except ImportError as e: logger.error(f"Failed to import components: {e}") logger.error(traceback.format_exc()) raise # ... [AuditTrailManager, scenario_impact_mapping, roi_data_adapter remain the same] ... # =========================================== # VISUALIZATION HELPERS FOR TAB 1 # =========================================== def create_telemetry_plot(scenario_name: str): """Create a telemetry visualization for the selected scenario""" import plotly.graph_objects as go import numpy as np # Generate some sample data time_points = np.arange(0, 100, 1) # Different patterns for different scenarios if "Cache" in scenario_name: data = 100 + 50 * np.sin(time_points * 0.2) + np.random.normal(0, 10, 100) threshold = 180 metric_name = "Cache Hit Rate (%)" elif "Database" in scenario_name: data = 70 + 30 * np.sin(time_points * 0.15) + np.random.normal(0, 8, 100) threshold = 120 metric_name = "Connection Pool Usage" elif "Memory" in scenario_name: data = 50 + 40 * np.sin(time_points * 0.1) + np.random.normal(0, 12, 100) threshold = 95 metric_name = "Memory Usage (%)" else: data = 80 + 20 * np.sin(time_points * 0.25) + np.random.normal(0, 5, 100) threshold = 110 metric_name = "System Load" # Create the plot fig = go.Figure() # Add normal data fig.add_trace(go.Scatter( x=time_points[:70], y=data[:70], mode='lines', name='Normal', line=dict(color='#3b82f6', width=3), fill='tozeroy', fillcolor='rgba(59, 130, 246, 0.1)' )) # Add anomaly data fig.add_trace(go.Scatter( x=time_points[70:], y=data[70:], mode='lines', name='Anomaly Detected', line=dict(color='#ef4444', width=3, dash='dash'), fill='tozeroy', fillcolor='rgba(239, 68, 68, 0.1)' )) # Add threshold line fig.add_hline( y=threshold, line_dash="dot", line_color="#f59e0b", annotation_text="Threshold", annotation_position="bottom right" ) # Add detection point fig.add_vline( x=70, line_dash="dash", line_color="#10b981", annotation_text="ARF Detection", annotation_position="top" ) # Update layout fig.update_layout( title=f"📈 {metric_name} - Live Telemetry", xaxis_title="Time (minutes)", yaxis_title=metric_name, height=300, margin=dict(l=20, r=20, t=50, b=20), plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)', legend=dict( orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1 ) ) return fig def create_impact_plot(scenario_name: str): """Create a business impact visualization""" import plotly.graph_objects as go # Get impact data based on scenario impact_map = { "Cache Miss Storm": {"revenue": 8500, "users": 45000, "services": 12}, "Database Connection Pool Exhaustion": {"revenue": 4200, "users": 22000, "services": 8}, "Kubernetes Memory Leak": {"revenue": 5500, "users": 28000, "services": 15}, "API Rate Limit Storm": {"revenue": 3800, "users": 19000, "services": 6}, "Network Partition": {"revenue": 12000, "users": 65000, "services": 25}, "Storage I/O Saturation": {"revenue": 6800, "users": 32000, "services": 10} } impact = impact_map.get(scenario_name, {"revenue": 5000, "users": 25000, "services": 10}) # Create gauge for revenue impact fig = go.Figure(go.Indicator( mode="gauge+number", value=impact["revenue"], title={'text': "💰 Hourly Revenue Risk", 'font': {'size': 16}}, number={'prefix': "$", 'font': {'size': 28}}, gauge={ 'axis': {'range': [0, 15000], 'tickwidth': 1}, 'bar': {'color': "#ef4444"}, 'steps': [ {'range': [0, 3000], 'color': '#10b981'}, {'range': [3000, 7000], 'color': '#f59e0b'}, {'range': [7000, 15000], 'color': '#ef4444'} ], 'threshold': { 'line': {'color': "black", 'width': 4}, 'thickness': 0.75, 'value': impact["revenue"] } } )) fig.update_layout( height=300, margin=dict(l=20, r=20, t=50, b=20), paper_bgcolor='rgba(0,0,0,0)' ) return fig def create_timeline_plot(scenario_name: str): """Create an incident timeline visualization""" import plotly.graph_objects as go # Timeline data events = [ {"time": 0, "event": "Incident Starts", "duration": 45}, {"time": 45, "event": "ARF Detection", "duration": 30}, {"time": 75, "event": "OSS Analysis Complete", "duration": 60}, {"time": 135, "event": "Enterprise Execution", "duration": 720}, {"time": 2700, "event": "Manual Resolution", "duration": 0} ] # Create timeline fig = go.Figure() # Add event bars for i, event in enumerate(events): if event["duration"] > 0: fig.add_trace(go.Bar( x=[event["duration"]], y=[event["event"]], orientation='h', name=event["event"], marker_color=['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b', '#ef4444'][i], text=[f"{event['duration']}s"], textposition='auto', hoverinfo='text', hovertemplate=f"{event['event']}: {event['duration']} seconds" )) fig.update_layout( title="⏰ Incident Timeline Comparison", xaxis_title="Time (seconds)", yaxis_title="", barmode='stack', height=300, margin=dict(l=20, r=20, t=50, b=20), plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)', showlegend=False ) return fig # =========================================== # SCENARIO UPDATE HANDLER # =========================================== def update_scenario_display(scenario_name: str) -> dict: """Update all scenario-related displays""" scenario = INCIDENT_SCENARIOS.get(scenario_name, {}) impact = scenario.get("business_impact", {}) # Create scenario card HTML scenario_html = f"""

🚨 {scenario_name}

{scenario.get('severity', 'HIGH')}
Component: {scenario.get('component', 'Unknown')}
Impact Radius: {scenario.get('impact_radius', 'Unknown')}
Revenue Risk: ${impact.get('revenue_loss_per_hour', 0):,}/hour
Detection Time: {scenario.get('detection_time', 'Unknown')}
{''.join([f'{tag}' for tag in scenario.get('tags', ['incident', 'demo'])])}
""" # Create visualizations telemetry_plot = create_telemetry_plot(scenario_name) impact_plot = create_impact_plot(scenario_name) timeline_plot = create_timeline_plot(scenario_name) return { "scenario_html": scenario_html, "telemetry_plot": telemetry_plot, "impact_plot": impact_plot, "timeline_plot": timeline_plot } # =========================================== # CREATE DEMO INTERFACE - UPDATED FOR ENHANCED TAB 1 # =========================================== def create_demo_interface(): """Create demo interface using modular components""" import gradio as gr # Initialize components viz_engine = EnhancedVisualizationEngine() roi_calculator = EnhancedROICalculator() audit_manager = AuditTrailManager() orchestrator = DemoOrchestrator() # Get CSS styles css_styles = get_styles() with gr.Blocks( title="🚀 ARF Investor Demo v3.8.0", theme=gr.themes.Soft(primary_hue="blue"), css=css_styles ) as demo: # Header header_html = create_header("3.3.6", False) # Status bar status_html = create_status_bar() # ============ 5 TABS ============ with gr.Tabs(elem_classes="tab-nav"): # TAB 1: Live Incident Demo - ENHANCED with gr.TabItem("🔥 Live Incident Demo", id="tab1"): # Get components from UI module (scenario_dropdown, scenario_card, telemetry_viz, impact_viz, workflow_header, detection_agent, recall_agent, decision_agent, oss_section, enterprise_section, oss_btn, enterprise_btn, approval_toggle, mcp_mode, timeline_viz, detection_time, mttr, auto_heal, savings, oss_results_display, enterprise_results_display, approval_display, demo_btn) = create_tab1_incident_demo() # ... [Tabs 2-5 remain the same as before] ... with gr.TabItem("💰 Business Impact & ROI", id="tab2"): (dashboard_output, roi_scenario_dropdown, monthly_slider, team_slider, calculate_btn, roi_output, roi_chart) = create_tab2_business_roi(INCIDENT_SCENARIOS) with gr.TabItem("🏢 Enterprise Features", id="tab3"): (license_display, validate_btn, trial_btn, upgrade_btn, mcp_mode_tab3, mcp_mode_info, features_table, integrations_table) = create_tab3_enterprise_features() with gr.TabItem("📜 Audit Trail & History", id="tab4"): (refresh_btn, clear_btn, export_btn, execution_table, incident_table, export_text) = create_tab4_audit_trail() with gr.TabItem("🧠 Learning Engine", id="tab5"): (learning_graph, graph_type, show_labels, search_query, search_btn, clear_btn_search, search_results, stats_display, patterns_display, performance_display) = create_tab5_learning_engine() # Footer footer_html = create_footer() # ============ EVENT HANDLERS FOR ENHANCED TAB 1 ============ # Update scenario display when dropdown changes scenario_dropdown.change( fn=update_scenario_display, inputs=[scenario_dropdown], outputs={ scenario_card: gr.HTML(), telemetry_viz: gr.Plot(), impact_viz: gr.Plot(), timeline_viz: gr.Plot() } ) # Run OSS Analysis async def run_oss_analysis(scenario_name): scenario = INCIDENT_SCENARIOS.get(scenario_name, {}) # Use orchestrator analysis = await orchestrator.analyze_incident(scenario_name, scenario) # Add to audit trail audit_manager.add_incident(scenario_name, scenario.get("severity", "HIGH")) # Update incident table incident_table_data = audit_manager.get_incident_table() # Enhanced OSS results oss_results = { "status": "✅ OSS Analysis Complete", "scenario": scenario_name, "confidence": 0.85, "agents_executed": ["Detection", "Recall", "Decision"], "findings": [ "Anomaly detected with 99.8% confidence", "3 similar incidents found in RAG memory", "Historical success rate for similar actions: 87%" ], "recommendations": [ "Scale resources based on historical patterns", "Implement circuit breaker pattern", "Add enhanced monitoring for key metrics" ], "healing_intent": { "action": "scale_out", "component": scenario.get("component", "unknown"), "parameters": {"nodes": "3→5", "region": "auto-select"}, "confidence": 0.94, "requires_enterprise": True, "advisory_only": True, "safety_check": "✅ Passed (blast radius: 2 services)" } } # Update agent status detection_html = """
🕵️‍♂️

Detection Agent

Analysis complete: 99.8% confidence

Time: 45s Accuracy: 98.7%
COMPLETE
""" recall_html = """
🧠

Recall Agent

3 similar incidents retrieved from memory

Recall: 92% Patterns: 5
COMPLETE
""" decision_html = """
🎯

Decision Agent

HealingIntent created with 94% confidence

Success Rate: 87% Safety: 100%
COMPLETE
""" return ( detection_html, recall_html, decision_html, oss_results, incident_table_data ) oss_btn.click( fn=run_oss_analysis, inputs=[scenario_dropdown], outputs=[ detection_agent, recall_agent, decision_agent, oss_results_display, incident_table ] ) # Execute Enterprise Healing def execute_enterprise_healing(scenario_name, approval_required, mcp_mode_value): scenario = INCIDENT_SCENARIOS.get(scenario_name, {}) # Determine mode mode = "Approval" if approval_required else "Autonomous" if "Advisory" in mcp_mode_value: return gr.HTML.update(value="

❌ Cannot execute in Advisory mode. Switch to Approval or Autonomous mode.

"), {}, [] # Calculate savings impact = scenario.get("business_impact", {}) revenue_loss = impact.get("revenue_loss_per_hour", 5000) savings = int(revenue_loss * 0.85) # 85% savings # Add to audit trail audit_manager.add_execution(scenario_name, mode, savings=savings) # Create approval display if approval_required: approval_html = f"""

👤 Human Approval Required

PENDING

Scenario: {scenario_name}

Action: Scale Redis cluster from 3 to 5 nodes

Estimated Savings: ${savings:,}

✅ 1. ARF generated intent (94% confidence)
⏳ 2. Awaiting human review...
3. ARF will execute upon approval
""" else: approval_html = f"""

⚡ Autonomous Execution Complete

AUTO-EXECUTED

Scenario: {scenario_name}

Mode: Autonomous

Action Executed: Scaled Redis cluster from 3 to 5 nodes

Recovery Time: 12 minutes (vs 45 min manual)

Cost Saved: ${savings:,}

✅ 1. ARF generated intent
✅ 2. Safety checks passed
✅ 3. Autonomous execution completed
""" # Enterprise results enterprise_results = { "execution_mode": mode, "scenario": scenario_name, "timestamp": datetime.datetime.now().isoformat(), "actions_executed": [ "✅ Scaled resources based on ML recommendations", "✅ Implemented circuit breaker pattern", "✅ Deployed enhanced monitoring", "✅ Updated RAG memory with outcome" ], "business_impact": { "recovery_time": "60 min → 12 min", "cost_saved": f"${savings:,}", "users_impacted": "45,000 → 0", "mttr_reduction": "73% faster" }, "safety_checks": { "blast_radius": "2 services (within limit)", "business_hours": "Compliant", "action_type": "Approved", "circuit_breaker": "Active" } } # Update execution table execution_table_data = audit_manager.get_execution_table() return approval_html, enterprise_results, execution_table_data enterprise_btn.click( fn=execute_enterprise_healing, inputs=[scenario_dropdown, approval_toggle, mcp_mode], outputs=[approval_display, enterprise_results_display, execution_table] ) # Run Complete Demo def run_complete_demo(scenario_name): """Run a complete demo walkthrough""" import time # Step 1: Update scenario update_result = update_scenario_display(scenario_name) # Simulate OSS analysis time.sleep(1) # Step 2: Run OSS analysis oss_result = asyncio.run(run_oss_analysis(scenario_name)) # Step 3: Execute Enterprise (simulated) time.sleep(2) scenario = INCIDENT_SCENARIOS.get(scenario_name, {}) impact = scenario.get("business_impact", {}) revenue_loss = impact.get("revenue_loss_per_hour", 5000) savings = int(revenue_loss * 0.85) enterprise_results = { "demo_mode": "Complete Walkthrough", "scenario": scenario_name, "steps_completed": [ "1. Incident detected (45s)", "2. OSS analysis completed", "3. HealingIntent created (94% confidence)", "4. Enterprise license validated", "5. Autonomous execution simulated", "6. Outcome recorded in RAG memory" ], "outcome": { "recovery_time": "12 minutes", "manual_comparison": "45 minutes", "cost_saved": f"${savings:,}", "users_protected": "45,000", "learning": "Pattern added to RAG memory" } } # Create demo completion message demo_message = f"""

✅ Demo Complete

SUCCESS

Scenario: {scenario_name}

Workflow: OSS Analysis → Enterprise Execution

Time Saved: 33 minutes (73% faster)

Cost Avoided: ${savings:,}

This demonstrates the complete ARF value proposition from detection to autonomous healing.

""" return ( update_result["scenario_html"], update_result["telemetry_plot"], update_result["impact_plot"], update_result["timeline_plot"], oss_result[0], oss_result[1], oss_result[2], # Agent updates oss_result[3], # OSS results demo_message, # Demo message enterprise_results # Enterprise results ) demo_btn.click( fn=run_complete_demo, inputs=[scenario_dropdown], outputs=[ scenario_card, telemetry_viz, impact_viz, timeline_viz, detection_agent, recall_agent, decision_agent, oss_results_display, approval_display, enterprise_results_display ] ) # ... [Rest of the event handlers remain the same] ... # Initialize scenario display demo.load( fn=lambda: update_scenario_display("Cache Miss Storm"), outputs=[scenario_card, telemetry_viz, impact_viz, timeline_viz] ) # Initialize dashboard def initialize_dashboard(): try: chart = viz_engine.create_executive_dashboard() return chart except Exception as e: logger.error(f"Dashboard initialization failed: {e}") import plotly.graph_objects as go fig = go.Figure(go.Indicator( mode="number+gauge", value=5.2, title={"text": "Executive Dashboard
ROI Multiplier"}, domain={'x': [0, 1], 'y': [0, 1]}, gauge={ 'axis': {'range': [0, 10]}, 'bar': {'color': "#4ECDC4"}, 'steps': [ {'range': [0, 2], 'color': 'lightgray'}, {'range': [2, 4], 'color': 'gray'}, {'range': [4, 6], 'color': 'lightgreen'}, {'range': [6, 10], 'color': "#4ECDC4"} ] } )) fig.update_layout(height=700, paper_bgcolor="rgba(0,0,0,0)") return fig demo.load( fn=initialize_dashboard, outputs=[dashboard_output] ) return demo