Skip to content

Commit dd5a19d

Browse files
HackStrixHackStrix
committed
Updating UI
1 parent 848e00d commit dd5a19d

File tree

12 files changed

+2367
-0
lines changed

12 files changed

+2367
-0
lines changed

‎frontend/src/components/scenario-builder/ScenarioBuilder.tsx‎

Lines changed: 452 additions & 0 deletions
Large diffs are not rendered by default.

‎frontend/src/components/scenario-builder/steps/BasicInfoStep.tsx‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
'use client'
2+
3+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
4+
import { Input } from '@/components/ui/input'
5+
import { Textarea } from '@/components/ui/textarea'
6+
import { Label } from '@/components/ui/label'
7+
import { Badge } from '@/components/ui/badge'
8+
import { Button } from '@/components/ui/button'
9+
import { X, Plus } from 'lucide-react'
10+
import { ScenarioData } from '../ScenarioBuilder'
11+
12+
interface BasicInfoStepProps {
13+
data: ScenarioData
14+
onUpdate: (data: ScenarioData) => void
15+
}
16+
17+
export function BasicInfoStep({ data, onUpdate }: BasicInfoStepProps) {
18+
const updateField = (field: keyof ScenarioData, value: any) => {
19+
onUpdate({ ...data, [field]: value })
20+
}
21+
22+
const addTag = (tag: string) => {
23+
if (tag.trim() && !data.tags.includes(tag.trim())) {
24+
updateField('tags', [...data.tags, tag.trim()])
25+
}
26+
}
27+
28+
const removeTag = (tag: string) => {
29+
updateField('tags', data.tags.filter(t => t !== tag))
30+
}
31+
32+
return (
33+
<Card>
34+
<CardHeader>
35+
<CardTitle className="text-xl text-gray-900">Basic Scenario Information</CardTitle>
36+
<p className="text-gray-600">Define the core properties of your CSMS load testing scenario</p>
37+
</CardHeader>
38+
<CardContent className="space-y-6">
39+
{/* Scenario Name */}
40+
<div className="space-y-2">
41+
<Label htmlFor="name">Scenario Name *</Label>
42+
<Input
43+
id="name"
44+
placeholder="e.g., High Load CSMS Test"
45+
value={data.name}
46+
onChange={(e) => updateField('name', e.target.value)}
47+
className="text-base"
48+
/>
49+
<p className="text-sm text-gray-500">Choose a descriptive name for your load testing scenario</p>
50+
</div>
51+
52+
{/* Description */}
53+
<div className="space-y-2">
54+
<Label htmlFor="description">Description</Label>
55+
<Textarea
56+
id="description"
57+
placeholder="Describe what this scenario tests, e.g., 'Tests CSMS performance under heavy concurrent load with gradual ramp-up'"
58+
value={data.description}
59+
onChange={(e) => updateField('description', e.target.value)}
60+
rows={3}
61+
/>
62+
</div>
63+
64+
{/* Duration and Version */}
65+
<div className="grid grid-cols-2 gap-4">
66+
<div className="space-y-2">
67+
<Label htmlFor="duration">Duration (seconds) *</Label>
68+
<Input
69+
id="duration"
70+
type="number"
71+
placeholder="600"
72+
value={data.duration}
73+
onChange={(e) => updateField('duration', parseInt(e.target.value) || 0)}
74+
min="1"
75+
max="3600"
76+
/>
77+
<p className="text-sm text-gray-500">
78+
{data.duration ? `${Math.floor(data.duration / 60)}m ${data.duration % 60}s` : 'Total test duration'}
79+
</p>
80+
</div>
81+
<div className="space-y-2">
82+
<Label htmlFor="version">Version</Label>
83+
<Input
84+
id="version"
85+
placeholder="1.0"
86+
value={data.version}
87+
onChange={(e) => updateField('version', e.target.value)}
88+
/>
89+
</div>
90+
</div>
91+
92+
{/* Tags */}
93+
<div className="space-y-2">
94+
<Label>Tags</Label>
95+
<div className="flex flex-wrap gap-2 mb-2">
96+
{data.tags.map((tag) => (
97+
<Badge key={tag} variant="secondary" className="flex items-center space-x-1">
98+
<span>{tag}</span>
99+
<button onClick={() => removeTag(tag)} className="ml-1 hover:text-red-600">
100+
<X className="h-3 w-3" />
101+
</button>
102+
</Badge>
103+
))}
104+
</div>
105+
<div className="flex space-x-2">
106+
<Input
107+
placeholder="Add tag (e.g., load-test, chaos, performance)"
108+
onKeyPress={(e) => {
109+
if (e.key === 'Enter') {
110+
addTag(e.currentTarget.value)
111+
e.currentTarget.value = ''
112+
}
113+
}}
114+
/>
115+
<Button variant="outline" size="sm">
116+
<Plus className="h-4 w-4" />
117+
</Button>
118+
</div>
119+
<p className="text-sm text-gray-500">Press Enter to add tags. Common tags: load-test, chaos, performance, csms</p>
120+
</div>
121+
122+
{/* Quick Template Suggestions */}
123+
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
124+
<h3 className="font-medium text-blue-900 mb-2">💡 CSMS Load Testing Templates</h3>
125+
<div className="grid grid-cols-1 md:grid-cols-3 gap-2">
126+
<Button
127+
variant="outline"
128+
size="sm"
129+
onClick={() => {
130+
updateField('name', 'CSMS Peak Load Test')
131+
updateField('description', 'Tests CSMS performance under peak concurrent load')
132+
updateField('duration', 900)
133+
updateField('tags', ['load-test', 'peak-load', 'csms', 'performance'])
134+
}}
135+
>
136+
Peak Load Test
137+
</Button>
138+
<Button
139+
variant="outline"
140+
size="sm"
141+
onClick={() => {
142+
updateField('name', 'Connection Spike Resilience')
143+
updateField('description', 'Tests CSMS handling of rapid connection spikes')
144+
updateField('duration', 300)
145+
updateField('tags', ['connection-spike', 'resilience', 'csms'])
146+
}}
147+
>
148+
Connection Spike
149+
</Button>
150+
<Button
151+
variant="outline"
152+
size="sm"
153+
onClick={() => {
154+
updateField('name', 'Transaction Recovery Test')
155+
updateField('description', 'Tests transaction state recovery after failures')
156+
updateField('duration', 600)
157+
updateField('tags', ['transaction', 'recovery', 'resilience'])
158+
}}
159+
>
160+
Transaction Recovery
161+
</Button>
162+
</div>
163+
</div>
164+
</CardContent>
165+
</Card>
166+
)
167+
}

0 commit comments

Comments
 (0)