Update ui/components.py
Browse files- ui/components.py +25 -20
ui/components.py
CHANGED
|
@@ -34,7 +34,7 @@ def create_status_bar() -> gr.HTML:
|
|
| 34 |
""")
|
| 35 |
|
| 36 |
# -----------------------------
|
| 37 |
-
# Tab 1: Live Incident Demo -
|
| 38 |
# -----------------------------
|
| 39 |
def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
|
| 40 |
"""
|
|
@@ -42,6 +42,11 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
|
|
| 42 |
Shows the complete OSS analysis β Enterprise execution workflow.
|
| 43 |
"""
|
| 44 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 45 |
# Left Column: Scenario Selection & Live Visualization
|
| 46 |
with gr.Column(scale=1, variant="panel") as left_col:
|
| 47 |
# Scenario Selection with rich preview
|
|
@@ -54,35 +59,35 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
|
|
| 54 |
container=False
|
| 55 |
)
|
| 56 |
|
| 57 |
-
# Scenario Card with rich information
|
| 58 |
-
scenario_card = gr.HTML("""
|
| 59 |
<div class="scenario-card">
|
| 60 |
<div class="scenario-header">
|
| 61 |
-
<h3>π¨
|
| 62 |
-
<span class="severity-badge
|
| 63 |
</div>
|
| 64 |
<div class="scenario-details">
|
| 65 |
<div class="scenario-detail-row">
|
| 66 |
<span class="detail-label">Component:</span>
|
| 67 |
-
<span class="detail-value">
|
| 68 |
</div>
|
| 69 |
<div class="scenario-detail-row">
|
| 70 |
-
<span class="detail-label">
|
| 71 |
-
<span class="detail-value">
|
| 72 |
</div>
|
| 73 |
<div class="scenario-detail-row">
|
| 74 |
<span class="detail-label">Revenue Risk:</span>
|
| 75 |
-
<span class="detail-value revenue-risk">$
|
| 76 |
</div>
|
| 77 |
<div class="scenario-detail-row">
|
| 78 |
<span class="detail-label">Detection Time:</span>
|
| 79 |
-
<span class="detail-value">45 seconds</span>
|
| 80 |
</div>
|
| 81 |
<div class="scenario-tags">
|
| 82 |
-
<span class="scenario-tag">
|
| 83 |
-
<span class="scenario-tag">
|
| 84 |
-
<span class="scenario-tag">
|
| 85 |
-
<span class="scenario-tag">
|
| 86 |
</div>
|
| 87 |
</div>
|
| 88 |
</div>
|
|
@@ -301,12 +306,12 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
|
|
| 301 |
</div>
|
| 302 |
""")
|
| 303 |
|
| 304 |
-
savings = gr.HTML("""
|
| 305 |
<div class="metric-card savings">
|
| 306 |
<div class="metric-icon">π°</div>
|
| 307 |
<div class="metric-content">
|
| 308 |
<h4>Cost Saved</h4>
|
| 309 |
-
<p class="metric-value">$
|
| 310 |
<p class="metric-comparison">Per incident avoided</p>
|
| 311 |
</div>
|
| 312 |
</div>
|
|
@@ -379,7 +384,7 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
|
|
| 379 |
)
|
| 380 |
|
| 381 |
# -----------------------------
|
| 382 |
-
# Tab 2: Business ROI - Updated
|
| 383 |
# -----------------------------
|
| 384 |
def create_tab2_business_roi(scenarios=INCIDENT_SCENARIOS) -> tuple:
|
| 385 |
dashboard_output = gr.Plot(label="Executive Dashboard", show_label=True)
|
|
@@ -413,7 +418,7 @@ def create_tab2_business_roi(scenarios=INCIDENT_SCENARIOS) -> tuple:
|
|
| 413 |
calculate_btn, roi_output, roi_chart)
|
| 414 |
|
| 415 |
# -----------------------------
|
| 416 |
-
# Tab 3: Enterprise Features
|
| 417 |
# -----------------------------
|
| 418 |
def create_tab3_enterprise_features() -> tuple:
|
| 419 |
license_display = gr.JSON(
|
|
@@ -471,7 +476,7 @@ def create_tab3_enterprise_features() -> tuple:
|
|
| 471 |
mcp_mode, mcp_mode_info, features_table, integrations_table)
|
| 472 |
|
| 473 |
# -----------------------------
|
| 474 |
-
# Tab 4: Audit Trail
|
| 475 |
# -----------------------------
|
| 476 |
def create_tab4_audit_trail() -> tuple:
|
| 477 |
refresh_btn = gr.Button("π Refresh Audit Trail", variant="secondary")
|
|
@@ -499,7 +504,7 @@ def create_tab4_audit_trail() -> tuple:
|
|
| 499 |
return (refresh_btn, clear_btn, export_btn, execution_table, incident_table, export_text)
|
| 500 |
|
| 501 |
# -----------------------------
|
| 502 |
-
# Tab 5: Learning Engine
|
| 503 |
# -----------------------------
|
| 504 |
def create_tab5_learning_engine() -> tuple:
|
| 505 |
learning_graph = gr.Plot(label="RAG Memory Graph")
|
|
|
|
| 34 |
""")
|
| 35 |
|
| 36 |
# -----------------------------
|
| 37 |
+
# Tab 1: Live Incident Demo - UPDATED TO USE SCENARIOS DATA
|
| 38 |
# -----------------------------
|
| 39 |
def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
|
| 40 |
"""
|
|
|
|
| 42 |
Shows the complete OSS analysis β Enterprise execution workflow.
|
| 43 |
"""
|
| 44 |
|
| 45 |
+
# Get the default scenario data
|
| 46 |
+
default_scenario_data = scenarios.get(default_scenario, {})
|
| 47 |
+
business_impact = default_scenario_data.get("business_impact", {})
|
| 48 |
+
metrics = default_scenario_data.get("metrics", {})
|
| 49 |
+
|
| 50 |
# Left Column: Scenario Selection & Live Visualization
|
| 51 |
with gr.Column(scale=1, variant="panel") as left_col:
|
| 52 |
# Scenario Selection with rich preview
|
|
|
|
| 59 |
container=False
|
| 60 |
)
|
| 61 |
|
| 62 |
+
# Scenario Card with rich information - UPDATED TO USE SCENARIOS DATA
|
| 63 |
+
scenario_card = gr.HTML(f"""
|
| 64 |
<div class="scenario-card">
|
| 65 |
<div class="scenario-header">
|
| 66 |
+
<h3>π¨ {default_scenario}</h3>
|
| 67 |
+
<span class="severity-badge {default_scenario_data.get('severity', 'HIGH').lower()}">{default_scenario_data.get('severity', 'HIGH')}</span>
|
| 68 |
</div>
|
| 69 |
<div class="scenario-details">
|
| 70 |
<div class="scenario-detail-row">
|
| 71 |
<span class="detail-label">Component:</span>
|
| 72 |
+
<span class="detail-value">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span>
|
| 73 |
</div>
|
| 74 |
<div class="scenario-detail-row">
|
| 75 |
+
<span class="detail-label">Affected Users:</span>
|
| 76 |
+
<span class="detail-value">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
|
| 77 |
</div>
|
| 78 |
<div class="scenario-detail-row">
|
| 79 |
<span class="detail-label">Revenue Risk:</span>
|
| 80 |
+
<span class="detail-value revenue-risk">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
|
| 81 |
</div>
|
| 82 |
<div class="scenario-detail-row">
|
| 83 |
<span class="detail-label">Detection Time:</span>
|
| 84 |
+
<span class="detail-value">45 seconds (ARF AI)</span>
|
| 85 |
</div>
|
| 86 |
<div class="scenario-tags">
|
| 87 |
+
<span class="scenario-tag">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span>
|
| 88 |
+
<span class="scenario-tag">{default_scenario_data.get('severity', 'high').lower()}</span>
|
| 89 |
+
<span class="scenario-tag">production</span>
|
| 90 |
+
<span class="scenario-tag">incident</span>
|
| 91 |
</div>
|
| 92 |
</div>
|
| 93 |
</div>
|
|
|
|
| 306 |
</div>
|
| 307 |
""")
|
| 308 |
|
| 309 |
+
savings = gr.HTML(f"""
|
| 310 |
<div class="metric-card savings">
|
| 311 |
<div class="metric-icon">π°</div>
|
| 312 |
<div class="metric-content">
|
| 313 |
<h4>Cost Saved</h4>
|
| 314 |
+
<p class="metric-value">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
|
| 315 |
<p class="metric-comparison">Per incident avoided</p>
|
| 316 |
</div>
|
| 317 |
</div>
|
|
|
|
| 384 |
)
|
| 385 |
|
| 386 |
# -----------------------------
|
| 387 |
+
# Tab 2: Business ROI - Updated
|
| 388 |
# -----------------------------
|
| 389 |
def create_tab2_business_roi(scenarios=INCIDENT_SCENARIOS) -> tuple:
|
| 390 |
dashboard_output = gr.Plot(label="Executive Dashboard", show_label=True)
|
|
|
|
| 418 |
calculate_btn, roi_output, roi_chart)
|
| 419 |
|
| 420 |
# -----------------------------
|
| 421 |
+
# Tab 3: Enterprise Features
|
| 422 |
# -----------------------------
|
| 423 |
def create_tab3_enterprise_features() -> tuple:
|
| 424 |
license_display = gr.JSON(
|
|
|
|
| 476 |
mcp_mode, mcp_mode_info, features_table, integrations_table)
|
| 477 |
|
| 478 |
# -----------------------------
|
| 479 |
+
# Tab 4: Audit Trail
|
| 480 |
# -----------------------------
|
| 481 |
def create_tab4_audit_trail() -> tuple:
|
| 482 |
refresh_btn = gr.Button("π Refresh Audit Trail", variant="secondary")
|
|
|
|
| 504 |
return (refresh_btn, clear_btn, export_btn, execution_table, incident_table, export_text)
|
| 505 |
|
| 506 |
# -----------------------------
|
| 507 |
+
# Tab 5: Learning Engine
|
| 508 |
# -----------------------------
|
| 509 |
def create_tab5_learning_engine() -> tuple:
|
| 510 |
learning_graph = gr.Plot(label="RAG Memory Graph")
|