title: CloudSlash - Web UI Components Reference description: The web dashboard is 22 React components. Here is the full component map with props and responsibilities. Displays four cards: total waste count, projected m...
Web UI Components¶
The web dashboard is 22 React components. Here is the full component map with props and responsibilities.
Dashboard Components¶
DashboardInsightCards¶
4KB: Top-level KPI summary displayed on the Overview tab.
Displays four cards: total waste count, projected monthly savings (USD), total resource count, and aggregate risk score. Updates in real time via WebSocket.
API: GET /api/v1/waste-ledger, GET /api/v1/heuristics/status
ErrorBoundary¶
2KB: React error boundary that prevents full-page crashes.
Wraps the entire application. When a child component throws, displays a fallback UI with error details and a reload button instead of crashing the tab.
Analysis Components¶
InsightsTab¶
23KB: Deep analysis hub with five sub-views.
- Anomaly Detection: Statistical outliers with 30-second TTL cache (
GET /api/v1/anomalies) - Drift Analysis: Terraform state drift findings (
GET /api/v1/drift/report) - Solver Results: MILP fleet optimizer and formal verification scores (
GET /api/v1/solver/results) - Oracle Proofs: Per-resource reachability and risk scores (
GET /api/v1/oracle/{crn}) - Provenance: Git blame data from the Rosetta engine (
GET /api/v1/provenance)
TrendTab¶
12KB: Cost trend time-series analysis.
Renders week-over-week cost comparisons with line charts. Supports 7, 30, and 90-day windows. Data from GET /api/v1/history/summary.
ForecastChart¶
6KB: Projected spend trend lines based on historical scan data.
Extrapolates current waste trajectory to show 30-day cost forecast if no remediations are taken.
AllocationView¶
9KB: Cost distribution breakdown.
Visualizes spend by provider, service, region, and tag dimension. Supports drill-down by clicking any segment. Useful for cost attribution and chargeback reporting.
Topology Components¶
InfrastructureGraph¶
23KB: Primary React Flow dependency graph.
Force-directed layout rendering all cloud resources as nodes with typed edges. Features:
- Provider-based node coloring
- Edge type labels (AttachedTo, SecuredBy, FlowsTo, Contains, Grants)
- Click-to-expand resource detail panel
- Provider filter sidebar
- Real-time node updates via WebSocket
API: GET /api/v1/graph
UniversalGraphView¶
19KB: Advanced graph explorer for large infrastructure.
Full-featured graph navigator with: - Full-text search across all node properties - Filter by provider, service, region, phase, and verdict - Graph algorithm visualization (connected components, topological sort) - CRN-based node lookup - Export graph as JSON
API: GET /api/v1/graph/topology
NetworkReachability¶
9KB: Oracle formal verification results visualizer.
Displays the output of the reachability proof engine: which resources are reachable from the Internet, which security groups allow which ports, and the formal proof trace (reachable / unreachable / unknown).
API: GET /api/v1/solver/results
WebGPUSimulator¶
7KB: GPU-accelerated physics-based graph rendering.
Uses WebGPU WGSL compute shaders for force-directed layout calculations when the browser supports WebGPU (Chrome 113+, Edge 113+). Falls back to CPU rendering on unsupported browsers. Handles graphs with tens of thousands of nodes smoothly.
Remediation Components¶
PipelineTab¶
13KB: Kanban-style remediation pipeline visualization.
Renders resources flowing through six stages: Flagged → Analyzed → Codegen → s.a.u Gate → Pending → Applied. Supports drag-and-drop between stages. Click any resource card to see its Terraform plan diff and blast radius.
API: GET /api/v1/remediation/queue, POST /api/v1/remediation/move
BulkActionBar¶
9KB: Multi-select action toolbar.
Appears when multiple resources are selected in the pipeline. Supports bulk approve, bulk reject, and bulk dismiss with a single click.
API: POST /api/v1/remediation/bulk
SagaTimeline¶
12KB: s.a.u saga execution step visualizer.
For each active saga, renders the ordered list of (forward action, compensating rollback) pairs with current execution progress. Shows which step failed and triggered unwinding, with timestamps and error messages.
API: GET /api/v1/remediation/queue
SAUAuditLedger¶
6KB: Real-time audit event log.
Chronological stream of all engine decisions: quarantine requests, approvals, rejections, policy blocks, phase transitions. Each entry shows timestamp, actor, resource CRN, and outcome.
API: GET /api/v1/history
AI Components¶
AITab¶
27KB: DEVI AI copilot chat interface.
Full multi-turn conversation interface with: - Tier indicator badge (router vs deep model) - Tool call visualization: shows each MCP tool DEVI called inline in the conversation - Streaming text delta rendering - Escalation events displayed as system messages - 20-message conversation history
API: POST /api/v1/cortex/assimilate
Policy Components¶
PolicyMesh¶
10KB: Policy dashboard and rule management.
Displays all loaded CEL rules with trigger counts, enforcement mode indicators, and priority ordering. Supports one-click toggle between shadow and enforcing mode.
API: GET /api/v1/policies/mesh, POST /api/v1/policies/toggle
PolicyEditorModal¶
11KB: In-browser CEL policy editor.
Syntax-highlighted editor with:
- Live CEL compilation validation
- Dry-run against live graph before saving
- Field autocomplete for known variables (cost, kind, tags, etc.)
- Save directly to daemon (hot-reloads immediately)
API: POST /api/v1/policies/dry-run, POST /api/v1/policies
Management Components¶
PluginsTab¶
11KB: Plugin management panel.
Lists all installed plugins with version, category, and active/inactive status. Toggle any plugin with a single click. Click for full detail view showing scanned resource types and remediation capabilities.
API: GET /api/v1/plugins, POST /api/v1/plugins/toggle
MarketplaceTab¶
10KB: Community plugin browser.
Search and browse available plugins from the CloudSlash registry. View plugin details (author, version, description, scanned resources). One-click install triggers download, verification, and hot-load.
API: GET /api/v1/marketplace/search, POST /api/v1/marketplace/install
HistoryTab¶
11KB: Event audit timeline browser.
Paginated view of all historical events with filtering by type, CRN, status, and time range. Supports cursor-based pagination for large event stores.
API: GET /api/v1/history
SettingsModal¶
17KB: Global configuration panel.
Organized into sections: - AI Provider: Select provider, enter API key, choose model (fetches live model list) - Heuristic Sliders: Tune waste detection thresholds per resource type - Plugin Management: Activate/deactivate installed plugins - Data Management: Configure event retention, prune old history - Notifications: Configure Slack webhook, test notification delivery
All settings hot-reload without daemon restart.
API: GET /api/v1/config, PUT /api/v1/config, POST /api/v1/config/slack-test