in source/console/src/Components/Create/Create.js [288:604]
render() {
const cancel = () => {
return this.state.testId === null ?
this.props.history.push('/') :
this.props.history.push({ pathname: '/details', state: { testId: this.state.testId }})
}
const warning = (
<div>
<div className="box">
<h1>{ this.state.testId === null ? '创建' : '更新' }压力测试</h1>
</div>
<p className="warning">Warning there is a test running, multiple concurrent tests is currently not supported to avoid hitting the AWS Fargate task limits. Please wait for the test to finish before submitting a new test!</p>
</div>
)
const heading = (
<div className="box">
<h1>{ this.state.testId === null ? '创建' : '更新' }压力测试</h1>
</div>
)
const createTestForm = (
<div>
<Row>
<Col sm="6">
<div className="box create-box">
<h3>基础设置</h3>
<FormGroup>
<Label for="testName">测试例名称</Label>
<Input
value={this.state.formValues.testName}
type="text"
name="testName"
id="testName"
required
onChange={this.handleInputChange}
/>
<FormText color="muted">
测试例名称，可以非全局唯一
</FormText>
</FormGroup>
<FormGroup>
<Label for="testDescription">测试例描述</Label>
<Input
value={this.state.formValues.testDescription}
type="textarea"
name="testDescription"
id="testDescription"
required
onChange={this.handleInputChange}
/>
<FormText color="muted">
测试场景描述
</FormText>
</FormGroup>
<FormGroup>
<Label for="taskCount">任务数量</Label>
<Input
value={this.state.formValues.taskCount}
className="form-short"
type="number"
name="taskCount"
id="taskCount"
max={500}
min={1}
step={1}
required
onChange={this.handleInputChange}
/>
<FormText color="muted">
最多可拉起的任务数量，每个任务对应一个容器，目前最大值500
</FormText>
</FormGroup>
<FormGroup>
<Label for="concurrency">用户并发量</Label>
<Input
value={this.state.formValues.concurrency}
className="form-short"
type="number"
max={200}
min={1}
step={1}
name="concurrency"
id="concurrency"
required
onChange={this.handleInputChange}
/>
<FormText color="muted">
每个任务可以模拟的虚拟用户数量，目前最大值200
</FormText>
</FormGroup>
<FormGroup>
<Label for="rampUp">预热时间</Label>
<InputGroup className="input-group-short">
<Input
value={this.state.formValues.rampUp}
className="form-short"
type="number"
name="rampUp"
id="rampUp"
required
onChange={this.handleInputChange}
/>
<Input
type="select"
className="form-short"
name="rampUpUnits"
value={this.state.formValues.rampUpUnits}
id="rampUpUnits"
onChange={this.handleInputChange}
>
<option value="m">分钟</option>
<option value="s">秒钟</option>
</Input>
</InputGroup>
<FormText color="muted">
达到预设并发量的预热时间
</FormText>
</FormGroup>
<FormGroup>
<Label for="holdFor">持续时间</Label>
<InputGroup className="input-group-short">
<Input
value={this.state.formValues.holdFor}
className="form-short"
type="number"
min={1}
name="holdFor"
id="holdFor"
required
onChange={this.handleInputChange}
/>
<Input
type="select"
value={this.state.formValues.holdForUnits}
className="form-short"
name="holdForUnits"
id="holdForUnits"
onChange={this.handleInputChange}
>
<option value="m">分钟</option>
<option value="s">秒钟</option>
</Input>
</InputGroup>
<FormText color="muted">
保持预设并发量的持续时间
</FormText>
</FormGroup>
</div>
</Col>
<Col sm="6">
<div className="box create-box">
<h3>测试场景</h3>
<FormGroup>
<Label for="testType">测试类型</Label>
<Input
type="select"
id="testType"
name="testType"
required
value={this.state.formValues.testType}
onChange={this.handleInputChange}
>
<option value="simple">HTTP端点</option>
<option value="jmeter">JMeter</option>
</Input>
</FormGroup>
{
this.state.formValues.testType === 'simple' &&
<div>
<FormGroup>
<Label for="endpoint">进行测试的HTTP端点</Label>
<Input
value={this.state.formValues.endpoint}
type="url"
name="endpoint"
id="endpoint"
required
onChange={this.handleInputChange}
/>
<FormText color="muted">
执行压力测试的目标URL, 支持HTTP和HTTPS，例如
https://example.com:8080.
</FormText>
</FormGroup>
<FormGroup>
<Label for="method">HTTP方法</Label>
<Input
value={this.state.formValues.method}
className="form-short"
type="select"
name="method"
id="method"
required
onChange={this.handleInputChange}
>
<option>GET</option>
<option>PUT</option>
<option>POST</option>
<option>DELETE</option>
</Input>
<FormText color="muted">
请求方法，默认为GET.
</FormText>
</FormGroup>
<FormGroup>
<Label for="testDescription">HTTP报文头(可选)</Label>
<AceEditor
id="headers"
mode="json"
theme="github"
value={this.state.formValues.headers}
highlightActiveLine={true}
onChange={this.handleHeadersChange}
name="headers"
width="100%"
height="190px"
editorProps={{$blockScrolling: true}}
setOptions={{
showLineNumbers: true,
tabSize: 2,
}}
/>
<FormText color="muted">
包含在HTTP请求报文头中的键值内容，JSON格式
</FormText>
</FormGroup>
<FormGroup>
<Label>HTTP请求报文主体内容(可选)</Label>
<AceEditor
id="bodyPayload"
mode="json"
theme="github"
highlightActiveLine={true}
onChange={this.handleBodyPayloadChange}
name="bodyPayload"
value={this.state.formValues.body}
width="100%"
height="190px"
editorProps={{$blockScrolling: true}}
setOptions={{
showLineNumbers: true,
tabSize: 2,
}}
/>
<FormText color="muted">
包含在HTTP请求报文主体中的键值内容，JSON格式
</FormText>
</FormGroup>
</div>
}
{
this.state.formValues.testType !== 'simple' &&
<div>
{
['zip', 'script'].includes(this.state.formValues.fileType) &&
<FormGroup check>
<Label check>
<Input id="newScriptCheckboux" type="checkbox" onClick={this.handleCheckBox} defaultChecked={this.state.chooseNewFile} /> 选择一个新文件
</Label>
</FormGroup>
}
{
((this.state.formValues.testType !== 'simple' && !['zip', 'script'].includes(this.state.formValues.fileType)) || this.state.chooseNewFile) &&
<FormGroup>
<Label for="fileUpload">上传文件</Label>
{/* <CustomInput
type="file"
id="fileUpload"
name="fileUpload"
onChange={this.handleFileChange}
disabled={this.state.runningTasks} /> */}
<FormText color="muted">
请跳转到https://console.amazonaws.cn/s3，按照以下路径上传：{awsConfig.aws_user_files_s3_bucket}/public/test-scenarios/jmeter/[TESTID].jmx，其中TESTID为您测试用例的唯一标示（如x7-TL9Gup），您可以选择 <code>.jmx</code> 文件或者 <code>.zip</code> 文件。
</FormText>
</FormGroup>
}
</div>
}
<Button
id="submitButton"
className="submit"
size="sm"
onClick={this.handleSubmit}
disabled={this.state.runningTasks
// (this.state.formValues.testType !== 'simple' && (!this.state.file && (this.state.chooseNewFile || !['zip', 'script'].includes(this.state.formValues.fileType))))
}
>
提交
</Button>
<Button
id="cancelButton"
className="submit"
color="danger"
size="sm"
onClick={cancel}
disabled={this.state.isLoading}
>
取消
</Button>
</div>
</Col>
</Row>
</div>
);
return (
<div>
<form ref={this.form} onSubmit={e => e.preventDefault()}>