in source/console/src/Components/Details/Details.js [236:421]
render() {
const { data, testDuration } = this.state;
const cancelled = (
<div className="box">
<h2>测试结果</h2>
<p>No results available as the test was cancelled.</p>
</div>
)
const failed = (
<div className="box">
<h2>测试失败</h2>
<h6>
<pre>{JSON.stringify(data.taskError, null, 2) || data.errorReason}</pre>
</h6>
</div>
)
const details = (
<div>
<div className="box">
<h1>压测结果详情</h1>
{
data.status === 'running' ?
[
<Button id="cancelButton" key="cancelButton" color="danger" onClick={this.cancelToggle} size="sm">取消测试</Button>,
<Button id="refreshButton" key="refreshButton" onClick={ this.reloadData } size="sm">刷新</Button>
] :
[
<Button id="deleteButton" key="deleteButton" color="danger" onClick={this.deleteToggle} size="sm">删除测试</Button>,
<Link key="update_link" to= {{ pathname: '/create', state: { data } }}>
<Button id="updateButton" key="updateButton" size="sm">更新测试</Button>
</Link>,
<Button id="startButton" key="startButton" onClick={this.handleStart} size="sm" disabled={this.state.runningTasks}>开始测试</Button>
]
}
</div>
<div className="box">
<Row>
<Col sm="7">
<Row className="detail">
<Col sm="3"><b>标识</b></Col>
<Col sm="9">{data.testId}</Col>
</Row>
<Row className="detail">
<Col sm="3"><b>名称</b></Col>
<Col sm="9">{data.testName}</Col>
</Row>
<Row className="detail">
<Col sm="3"><b>描述</b></Col>
<Col sm="9">{data.testDescription}</Col>
</Row>
{
(!data.testType || ['', 'simple'].includes(data.testType)) &&
<div>
<Row className="detail">
<Col sm="3"><b>访问端点</b></Col>
<Col sm="9">{ data.endpoint }</Col>
</Row>
<Row className="detail">
<Col sm="3"><b>方法</b></Col>
<Col sm="9">{ data.method }</Col>
</Row>
<Row className="detail">
<Col sm="3"><b>HTTP请求</b></Col>
<Col sm="9">
<AceEditor
id="headers"
name="headers"
value={ JSON.stringify(data.headers, null, 2) }
mode="json"
theme="github"
width="100%"
maxLines={10}
showPrintMargin={false}
showGutter={false}
readOnly={true}
editorProps={{$blockScrolling: true}}
/>
</Col>
</Row>
<Row className="detail">
<Col sm="3"><b>HTTP主体</b></Col>
<Col sm="9">
<AceEditor
id="body"
name="body"
value={ JSON.stringify(data.body, null, 2) }
mode="json"
theme="github"
width="100%"
maxLines={10}
showPrintMargin={false}
showGutter={false}
readOnly={true}
editorProps={{$blockScrolling: true}}
/>
</Col>
</Row>
</div>
}
{
data.testType && data.testType !== '' && data.testType !== 'simple' &&
<Row className="detail">
<Col sm="3"><b>{ data.fileType === 'zip' ? 'ZIP包' : 'JMX脚本' }</b></Col>
{/* <Col sm="9"><Button className="btn-link-custom" color="link" size="sm" onClick={this.handleDownload}>下载脚本</Button></Col> */}
<Col sm="9"><b>{ '请跳转到https://console.amazonaws.cn/s3，按照以下路径查看：scenariobucket/public/test-scenarios/jmeter/TESTID.jmx' }</b></Col>
</Row>
}
</Col>
<Col sm="5">
<Row className="detail">
<Col sm="4"><b>状态</b></Col>
<Col className={data.status} sm="8">{data.status}</Col>
</Row>
<Row className="detail">
<Col sm="4"><b>开始时间</b></Col>
<Col sm="8">{data.startTime}</Col>
</Row>
{
data.status === 'complete' &&
<Row className="detail">
<Col sm="4"><b>结束时间</b></Col>
<Col sm="8">{data.endTime}</Col>
</Row>
}
<Row className="detail">
<Col sm="4"><b>任务数量</b></Col>
<Col sm="8">{data.taskCount} {data.status === 'complete' && data.completeTasks !== undefined && `(${data.completeTasks} completed)`}</Col>
</Row>
<Row className="detail">
<Col sm="4"><b>并发量</b></Col>
<Col sm="8">{ data.concurrency }</Col>
</Row>
<Row className="detail">
<Col sm="4"><b>预热时间</b></Col>
<Col sm="8">{ data.rampUp }</Col>
</Row>
<Row className="detail">
<Col sm="4"><b>持续时间</b></Col>
<Col sm="8">{ data.holdFor }</Col>
</Row>
</Col>
</Row>
</div>
{ data.status === 'complete' && <Results data={data} testDuration={testDuration} /> }
{ data.status === 'cancelled' && cancelled }
{ data.status === 'failed' && failed }
{ data.status === 'running' && <Running data={data} /> }
{ data.status !== 'running' && <History data={data} /> }
</div>
)
return (
<div>
{ this.state.isLoading ? <div className="loading"><Spinner color="secondary" /></div> : details }
<Modal isOpen={this.state.deleteModal} toggle={this.deleteToggle}>
<ModalHeader>Warning</ModalHeader>
<ModalBody>
This will delete the test scenario and all of of the results
</ModalBody>
<ModalFooter>
<Button id="cancelDeleteButton" color="link" size="sm" onClick={this.deleteToggle}>取消</Button>
<Button id="deleteConfirmButton" color="danger" size="sm" onClick={this.deleteTest}>删除</Button>
</ModalFooter>
</Modal>
<Modal isOpen={this.state.cancelModal} toggle={this.cancelToggle}>
<ModalHeader>Warning</ModalHeader>
<ModalBody>
This will stop all running tasks and end the test.
</ModalBody>
<ModalFooter>
<Button id="cancelStopButton" color="link" size="sm" onClick={this.cancelToggle}>取消</Button>
<Button id="cancelTestButton" color="danger" size="sm" onClick={this.cancelTest}>取消测试</Button>
</ModalFooter>
</Modal>
</div>
)
}
}