-
-
{scenario.name}
-
{scenario.description}
+ {/* Header */}
+
+
+
+
+
+
+
+
{scenario.name}
+
+ {scenario.status}
+
+
+
{scenario.description}
+
+ Region: {scenario.region}
+ •
+ Created: {new Date(scenario.created_at).toLocaleDateString()}
+
+
+
+
+
+
+
+ {scenario.status === 'draft' && (
+
+ )}
+ {scenario.status === 'running' && (
+
+ )}
-
- {scenario.status}
-
+ {/* Stats Cards */}
- Total Requests
-
-
- {metrics?.summary.total_requests || 0}
-
-
-
-
- Total Cost
+ Total Requests
- ${(metrics?.summary.total_cost_usd || 0).toFixed(6)}
+ {formatNumber(metrics?.summary.total_requests || 0)}
- SQS Blocks
+ Total Cost
- {metrics?.summary.sqs_blocks || 0}
+
+ {formatCurrency(metrics?.summary.total_cost_usd || 0)}
+
- LLM Tokens
+ SQS Blocks
- {metrics?.summary.llm_tokens || 0}
+
+ {formatNumber(metrics?.summary.sqs_blocks || 0)}
+
+
+
+
+
+ Lambda Invocations
+
+
+
+ {formatNumber(metrics?.summary.lambda_invocations || 0)}
+
+
+ {/* Tabs */}
+
+
+
+
+ Overview
+
+
+
+ Metrics
+
+
+
+ Analysis
+
+
+
+
+
+ {/* Cost Breakdown Chart */}
+ {metrics?.cost_breakdown && metrics.cost_breakdown.length > 0 && (
+
+ )}
+
+ {/* Summary Card */}
+
+
+ Additional Metrics
+ Detailed breakdown of scenario metrics
+
+
+
+ LLM Tokens
+ {formatNumber(metrics?.summary.llm_tokens || 0)}
+
+
+ PII Violations
+ {formatNumber(metrics?.summary.pii_violations || 0)}
+
+
+ Avg Cost per Request
+
+ {metrics?.summary.total_requests
+ ? formatCurrency(metrics.summary.total_cost_usd / metrics.summary.total_requests)
+ : '$0.0000'}
+
+
+
+ Status
+ {scenario.status}
+
+
+
+
+
+
Cost Efficiency
+
+ {metrics?.summary.total_requests
+ ? `Average cost per request: ${formatCurrency(
+ metrics.summary.total_cost_usd / metrics.summary.total_requests
+ )}`
+ : 'No request data available'}
+
+
+
+
PII Risk Assessment
+
+ {metrics?.summary.pii_violations
+ ? `${metrics.summary.pii_violations} potential PII violations detected`
+ : 'No PII violations detected'}
+
+
+
);
}
diff --git a/frontend/src/pages/ScenariosPage.tsx b/frontend/src/pages/ScenariosPage.tsx
index 7cda3fe..6d82511 100644
--- a/frontend/src/pages/ScenariosPage.tsx
+++ b/frontend/src/pages/ScenariosPage.tsx
@@ -1,11 +1,45 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { useScenarios, useStartScenario, useStopScenario, useDeleteScenario } from '@/hooks/useScenarios';
+import {
+ useScenarios,
+ useStartScenario,
+ useStopScenario,
+ useDeleteScenario
+} from '@/hooks/useScenarios';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { MoreHorizontal, Play, Square, Trash2 } from 'lucide-react';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow
+} from '@/components/ui/table';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import {
+ MoreHorizontal,
+ Play,
+ Square,
+ Trash2,
+ BarChart3,
+ X,
+ FileText,
+} from 'lucide-react';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
const statusColors = {
draft: 'secondary',
@@ -17,13 +51,76 @@ const statusColors = {
export function ScenariosPage() {
const navigate = useNavigate();
const { data: scenarios, isLoading } = useScenarios();
+ const [selectedScenarios, setSelectedScenarios] = useState
>(new Set());
+ const [showCompareModal, setShowCompareModal] = useState(false);
+ const startScenario = useStartScenario('');
+ const stopScenario = useStopScenario('');
+ const deleteScenario = useDeleteScenario();
+
+ const toggleScenario = (id: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ setSelectedScenarios((prev) => {
+ const next = new Set(prev);
+ if (next.has(id)) {
+ next.delete(id);
+ } else if (next.size < 4) {
+ next.add(id);
+ }
+ return next;
+ });
+ };
+
+ const toggleAll = () => {
+ if (selectedScenarios.size > 0) {
+ setSelectedScenarios(new Set());
+ } else if (scenarios?.items) {
+ const firstFour = scenarios.items.slice(0, 4).map((s) => s.id);
+ setSelectedScenarios(new Set(firstFour));
+ }
+ };
+
+ const clearSelection = () => {
+ setSelectedScenarios(new Set());
+ };
+
+ const handleCompare = () => {
+ setShowCompareModal(true);
+ };
+
+ const confirmCompare = () => {
+ const ids = Array.from(selectedScenarios);
+ navigate('/compare', { state: { scenarioIds: ids } });
+ };
+
+ const handleStart = (_id: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ startScenario.mutate();
+ };
+
+ const handleStop = (_id: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ stopScenario.mutate();
+ };
+
+ const handleDelete = (id: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (confirm('Are you sure you want to delete this scenario?')) {
+ deleteScenario.mutate(id);
+ }
+ };
+
+ const canCompare = selectedScenarios.size >= 2 && selectedScenarios.size <= 4;
+
if (isLoading) {
return Loading...
;
}
+ const selectedScenarioData = scenarios?.items.filter((s) => selectedScenarios.has(s.id));
+
return (
+ {/* Header */}
Scenarios
@@ -31,26 +128,84 @@ export function ScenariosPage() {
Manage your AWS cost simulation scenarios
+ {selectedScenarios.size > 0 && (
+
+
+ {selectedScenarios.size} selected
+
+
+
+
+ )}
+ {/* Selection Mode Indicator */}
+ {selectedScenarios.size > 0 && (
+
+
+ Comparison Mode: Select 2-4 scenarios
+
+
+ {selectedScenarioData?.map((s) => (
+
+ {s.name}
+ setSelectedScenarios((prev) => {
+ const next = new Set(prev);
+ next.delete(s.id);
+ return next;
+ })}
+ />
+
+ ))}
+
+
+ )}
+
+
+ 0 && selectedScenarios.size === (scenarios?.items.length || 0)}
+ onCheckedChange={toggleAll}
+ aria-label="Select all"
+ />
+
Name
Status
Region
Requests
Cost
- Actions
+ Actions
{scenarios?.items.map((scenario) => (
navigate(`/scenarios/${scenario.id}`)}
>
+ e.stopPropagation()}>
+ {}}
+ onClick={(e: React.MouseEvent) => toggleScenario(scenario.id, e)}
+ aria-label={`Select ${scenario.name}`}
+ />
+
{scenario.name}
@@ -58,39 +213,89 @@ export function ScenariosPage() {
{scenario.region}
- {scenario.total_requests}
+ {scenario.total_requests.toLocaleString()}
${scenario.total_cost_estimate.toFixed(6)}
e.stopPropagation()}>
-
-
-
-
-
- {scenario.status === 'draft' && (
-
-
- Start
+
+
+
+
+
+
+
+ {scenario.status === 'draft' && (
+ handleStart(scenario.id, e as React.MouseEvent)}>
+
+ Start
+
+ )}
+ {scenario.status === 'running' && (
+ handleStop(scenario.id, e as React.MouseEvent)}>
+
+ Stop
+
+ )}
+ handleDelete(scenario.id, e as React.MouseEvent)}
+ >
+
+ Delete
- )}
- {scenario.status === 'running' && (
-
-
- Stop
-
- )}
-
-
- Delete
-
-
-
+
+
+
+
+ {/* Compare Confirmation Modal */}
+