test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/fit2cloudrd/metersphere-server into dev

This commit is contained in:
chenjianxing 2020-04-20 14:24:36 +08:00
parent 54d28eaf0c 825183edd2
commit 9fa9a2df6b
19 changed files with 717 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
backend/src/main/java/io/metersphere/commons/utils/MsJMeterUtils.java Normal file
View File

@ -0,0 +1,44 @@
package io.metersphere.commons.utils;
import org.apache.commons.lang3.reflect.FieldUtils;
import org.apache.jmeter.util.JMeterUtils;
import org.apache.jorphan.util.JOrphanUtils;
import java.io.InputStream;
import java.util.Properties;
public class MsJMeterUtils {
/**
* Load the JMeter properties file; if not found, then
* default to "org/apache/jmeter/jmeter.properties" from the classpath
*
* <p>
* c.f. loadProperties
*
* @param file Name of the file from which the JMeter properties should be loaded
*/
public static void loadJMeterProperties(String file) {
InputStream is = null;
try {
JMeterUtils.loadJMeterProperties(file);
} catch (Exception e) {
try {
Properties p = new Properties(System.getProperties());
// In jar file classpath is
is = ClassLoader.getSystemResourceAsStream(
"BOOT-INF/classes/org/apache/jmeter/jmeter.properties"); // $NON-NLS-1$
if (is == null) {
throw new RuntimeException("Could not read JMeter properties file:" + file);
}
p.load(is);
FieldUtils.writeStaticField(JMeterUtils.class, "appProperties", p, true);
} catch (Exception ex) {
throw new RuntimeException("Could not read JMeter properties file:" + file);
}
} finally {
JOrphanUtils.closeQuietly(is);
}
}
}

160
backend/src/main/java/io/metersphere/report/JtlResolver.java
View File

@ -3,7 +3,7 @@ package io.metersphere.report;
import com.opencsv.bean.CsvToBean;
import com.opencsv.bean.CsvToBeanBuilder;
import com.opencsv.bean.HeaderColumnNameMappingStrategy;
import io.metersphere.base.domain.LoadTestReportWithBLOBs;
import io.metersphere.commons.utils.MsJMeterUtils;
import io.metersphere.report.base.*;
import io.metersphere.report.dto.ErrorsTop5DTO;
import io.metersphere.report.dto.RequestStatisticsDTO;
@ -11,15 +11,11 @@ import org.apache.commons.lang3.StringUtils;
import org.apache.jmeter.report.core.Sample;
import org.apache.jmeter.report.core.SampleMetadata;
import org.apache.jmeter.report.dashboard.JsonizerVisitor;
import org.apache.jmeter.report.processor.ListResultData;
import org.apache.jmeter.report.processor.MapResultData;
import org.apache.jmeter.report.processor.ResultData;
import org.apache.jmeter.report.processor.SampleContext;
import org.apache.jmeter.report.processor.*;
import org.apache.jmeter.report.processor.graph.AbstractOverTimeGraphConsumer;
import org.apache.jmeter.report.processor.graph.impl.ActiveThreadsGraphConsumer;
import org.apache.jmeter.report.processor.graph.impl.HitsPerSecondGraphConsumer;
import org.apache.jmeter.report.processor.graph.impl.ResponseTimeOverTimeGraphConsumer;
import org.apache.jmeter.util.JMeterUtils;
import java.io.Reader;
import java.io.StringReader;
@ -346,61 +342,6 @@ public class JtlResolver {
return testOverview;
}
// public static List<ChartsData> getLoadChartData(String jtlString) {
// List<ChartsData> chartsDataList = new ArrayList<>();
// List<Metric> totalMetricList = JtlResolver.resolver(jtlString);
//
// if (totalMetricList != null) {
// for (Metric metric : totalMetricList) {
// metric.setTimestamp(stampToDate(DATE_TIME_PATTERN, metric.getTimestamp()));
// }
// }
// Map<String, List<Metric>> collect = Objects.requireNonNull(totalMetricList).stream().collect(Collectors.groupingBy(Metric::getTimestamp));
// List<Map.Entry<String, List<Metric>>> entries = new ArrayList<>(collect.entrySet());
//
// for (Map.Entry<String, List<Metric>> entry : entries) {
// int failSize = 0;
// List<Metric> metrics = entry.getValue();
// Map<String, List<Metric>> metricsMap = metrics.stream().collect(Collectors.groupingBy(Metric::getThreadName));
// int maxUsers = metricsMap.size();
// for (Metric metric : metrics) {
// String isSuccess = metric.getSuccess();
// if (!"true".equals(isSuccess)) {
// failSize++;
// }
// }
//
// String timeStamp = "";
// try {
// timeStamp = formatDate(entry.getKey());
// } catch (ParseException e) {
// e.printStackTrace();
// }
//
// ChartsData chartsData = new ChartsData();
// chartsData.setxAxis(timeStamp);
// chartsData.setGroupName("hits");
// chartsData.setyAxis(new BigDecimal(metrics.size() * 1.0 / maxUsers));
// chartsDataList.add(chartsData);
//
// chartsData = new ChartsData();
// chartsData.setxAxis(timeStamp);
// chartsData.setGroupName("users");
// chartsData.setyAxis(new BigDecimal(maxUsers));
// chartsDataList.add(chartsData);
//
// chartsData = new ChartsData();
// chartsData.setxAxis(timeStamp);
// chartsData.setGroupName("errors");
// chartsData.setyAxis(new BigDecimal(failSize));
// chartsDataList.add(chartsData);
//
// }
//
// return chartsDataList;
// }
public static List<ChartsData> getLoadChartData(String jtlString) {
Map<String, Object> activeThreadMap = getResultDataMap(jtlString, new ActiveThreadsGraphConsumer());
Map<String, Object> hitsMap = getResultDataMap(jtlString, new HitsPerSecondGraphConsumer());
@ -412,45 +353,6 @@ public class JtlResolver {
return activeThreadList;
}
// public static List<ChartsData> getResponseTimeChartData(String jtlString) {
// List<ChartsData> chartsDataList = new ArrayList<>();
// List<Metric> totalMetricList = JtlResolver.resolver(jtlString);
//
// totalMetricList.forEach(metric -> {
// metric.setTimestamp(stampToDate(DATE_TIME_PATTERN, metric.getTimestamp()));
// });
//
// Map<String, List<Metric>> metricMap = totalMetricList.stream().collect(Collectors.groupingBy(Metric::getTimestamp));
// List<Map.Entry<String, List<Metric>>> entries = new ArrayList<>(metricMap.entrySet());
//
// for (Map.Entry<String, List<Metric>> entry : entries) {
// List<Metric> metricList = entry.getValue();
// Map<String, List<Metric>> metricsMap = metricList.stream().collect(Collectors.groupingBy(Metric::getThreadName));
// int maxUsers = metricsMap.size();
// int sumElapsedTime = metricList.stream().mapToInt(metric -> Integer.parseInt(metric.getElapsed())).sum();
// String timeStamp = "";
// try {
// timeStamp = formatDate(entry.getKey());
// } catch (ParseException e) {
// e.printStackTrace();
// }
//
// ChartsData chartsData = new ChartsData();
// chartsData.setxAxis(timeStamp);
// chartsData.setGroupName("users");
// chartsData.setyAxis(new BigDecimal(maxUsers));
// chartsDataList.add(chartsData);
//
// ChartsData chartsData2 = new ChartsData();
// chartsData2.setxAxis(timeStamp);
// chartsData2.setGroupName("responseTime");
// chartsData2.setyAxis(new BigDecimal(sumElapsedTime * 1.0 / metricList.size()));
// chartsDataList.add(chartsData2);
//
// }
//
// return chartsDataList;
// }
public static List<ChartsData> getResponseTimeChartData(String jtlString) {
Map<String, Object> activeThreadMap = getResultDataMap(jtlString, new ActiveThreadsGraphConsumer());
Map<String, Object> responseTimeMap = getResultDataMap(jtlString, new ResponseTimeOverTimeGraphConsumer());
@ -464,44 +366,56 @@ public class JtlResolver {
}
public static void mapResolver(Map<String, Object> map, List list, String seriesName) {
// ThreadGroup-1
for (String key : map.keySet()) {
MapResultData mapResultData = (MapResultData) map.get(key);
ResultData maxY = mapResultData.getResult("maxY");
ListResultData series = (ListResultData) mapResultData.getResult("series");
if (series.getSize() > 0) {
MapResultData resultData = (MapResultData) series.get(0);
ListResultData data = (ListResultData) resultData.getResult("data");
if (data.getSize() > 0) {
for (int i = 0; i < data.getSize(); i++) {
ListResultData listResultData = (ListResultData) data.get(i);
String result = listResultData.accept(new JsonizerVisitor());
result = result.substring(1, result.length() - 1);
String[] split = result.split(",");
ChartsData chartsData = new ChartsData();
BigDecimal bigDecimal = new BigDecimal(split[0]);
String timeStamp = bigDecimal.toPlainString();
String time = null;
try {
time = formatDate(stampToDate(DATE_TIME_PATTERN, timeStamp));
} catch (ParseException e) {
e.printStackTrace();
for (int j = 0; j < series.getSize(); j++) {
MapResultData resultData = (MapResultData) series.get(j);
// data, isOverall, label, isController
ListResultData data = (ListResultData) resultData.getResult("data");
ValueResultData label = (ValueResultData) resultData.getResult("label");
if (data.getSize() > 0) {
for (int i = 0; i < data.getSize(); i++) {
ListResultData listResultData = (ListResultData) data.get(i);
String result = listResultData.accept(new JsonizerVisitor());
result = result.substring(1, result.length() - 1);
String[] split = result.split(",");
ChartsData chartsData = new ChartsData();
BigDecimal bigDecimal = new BigDecimal(split[0]);
String timeStamp = bigDecimal.toPlainString();
String time = null;
try {
time = formatDate(stampToDate(DATE_TIME_PATTERN, timeStamp));
} catch (ParseException e) {
e.printStackTrace();
}
chartsData.setxAxis(time);
chartsData.setyAxis(new BigDecimal(split[1].trim()));
if (series.getSize() == 1) {
chartsData.setGroupName(seriesName);
} else {
chartsData.setGroupName((String) label.getValue());
}
list.add(chartsData);
}
chartsData.setxAxis(time);
chartsData.setyAxis(new BigDecimal(split[1].trim()));
chartsData.setGroupName(seriesName);
list.add(chartsData);
}
}
}
}
}
public static Map<String, Object> getResultDataMap(String jtlString, AbstractOverTimeGraphConsumer timeGraphConsumer) {
int row = 0;
AbstractOverTimeGraphConsumer abstractOverTimeGraphConsumer = timeGraphConsumer;
abstractOverTimeGraphConsumer.setGranularity(60000);
// 这个路径不存在
JMeterUtils.loadJMeterProperties("jmeter.properties");
// 使用反射获取properties
MsJMeterUtils.loadJMeterProperties("jmeter.properties"); // 这个路径不存在
SampleMetadata sampleMetaData = createTestMetaData();
SampleContext sampleContext = new SampleContext();
abstractOverTimeGraphConsumer.setSampleContext(sampleContext);
@ -513,7 +427,7 @@ public class JtlResolver {
while (tokenizer.hasMoreTokens()) {
String line = tokenizer.nextToken();
String[] data = line.split(",", -1);
Sample sample = new Sample(0, sampleMetaData, data);
Sample sample = new Sample(row++, sampleMetaData, data);
abstractOverTimeGraphConsumer.consume(sample, 0);
}
abstractOverTimeGraphConsumer.stopConsuming();

34
backend/src/main/java/io/metersphere/service/PerformanceTestService.java
View File

@ -93,8 +93,6 @@ public class PerformanceTestService {
loadTest.setProjectId(request.getProjectId());
loadTest.setCreateTime(System.currentTimeMillis());
loadTest.setUpdateTime(System.currentTimeMillis());
loadTest.setScenarioDefinition("todo");
loadTest.setDescription("todo");
loadTest.setTestResourcePoolId(request.getTestResourcePoolId());
loadTest.setLoadConfiguration(request.getLoadConfiguration());
loadTest.setAdvancedConfiguration(request.getAdvancedConfiguration());
@ -133,6 +131,14 @@ public class PerformanceTestService {
}
public String edit(EditTestPlanRequest request, List<MultipartFile> files) {
//
LoadTestWithBLOBs loadTest = loadTestMapper.selectByPrimaryKey(request.getId());
if (loadTest == null) {
MSException.throwException(Translator.get("edit_load_test_not_found") + request.getId());
}
if (StringUtils.containsAny(loadTest.getStatus(), PerformanceTestStatus.Running.name(), PerformanceTestStatus.Starting.name())) {
MSException.throwException(Translator.get("cannot_edit_load_test_running"));
}
// 新选择了一个文件，删除原来的文件
List<FileMetadata> updatedFiles = request.getUpdatedFileList();
List<FileMetadata> originFiles = fileService.getFileMetadataByTestId(request.getId());
@ -152,22 +158,14 @@ public class PerformanceTestService {
});
}
final LoadTestWithBLOBs loadTest = loadTestMapper.selectByPrimaryKey(request.getId());
if (loadTest == null) {
MSException.throwException(Translator.get("edit_load_test_not_found") + request.getId());
} else {
loadTest.setName(request.getName());
loadTest.setProjectId(request.getProjectId());
loadTest.setUpdateTime(System.currentTimeMillis());
loadTest.setScenarioDefinition("todo");
loadTest.setDescription("todo");
loadTest.setLoadConfiguration(request.getLoadConfiguration());
loadTest.setAdvancedConfiguration(request.getAdvancedConfiguration());
loadTest.setTestResourcePoolId(request.getTestResourcePoolId());
// todo 修改 load_test 的时候排除状态，这里存在修改了 Running 的测试状态的风险
// loadTest.setStatus(PerformanceTestStatus.Saved.name());
loadTestMapper.updateByPrimaryKeySelective(loadTest);
}
loadTest.setName(request.getName());
loadTest.setProjectId(request.getProjectId());
loadTest.setUpdateTime(System.currentTimeMillis());
loadTest.setLoadConfiguration(request.getLoadConfiguration());
loadTest.setAdvancedConfiguration(request.getAdvancedConfiguration());
loadTest.setTestResourcePoolId(request.getTestResourcePoolId());
loadTest.setStatus(PerformanceTestStatus.Saved.name());
loadTestMapper.updateByPrimaryKeySelective(loadTest);
return request.getId();
}

1
backend/src/main/resources/i18n/messages_en_US.properties
View File

@ -19,3 +19,4 @@ duplicate_node_ip=Duplicate IPs
only_one_k8s=Only one K8s can be added
organization_id_is_null=Organization ID cannot be null
max_thread_insufficient=The number of concurrent users exceeds
cannot_edit_load_test_running=Cannot modify the running test

3
backend/src/main/resources/i18n/messages_zh_CN.properties
View File

@ -18,4 +18,5 @@ no_nodes_message=\u6CA1\u6709\u8282\u70B9\u4FE1\u606F
duplicate_node_ip=\u8282\u70B9 IP \u91CD\u590D
only_one_k8s=\u53EA\u80FD\u6DFB\u52A0\u4E00\u4E2A K8s
organization_id_is_null=\u7EC4\u7EC7 ID \u4E0D\u80FD\u4E3A\u7A7A
max_thread_insufficient=\u5E76\u53D1\u7528\u6237\u6570\u8D85\u989D
max_thread_insufficient=\u5E76\u53D1\u7528\u6237\u6570\u8D85\u989D
cannot_edit_load_test_running=不能修改正在运行的测试

54
frontend/src/business/components/api/test/ApiScenarioConfig.vue
View File

@ -26,13 +26,14 @@
</ms-api-collapse-item>
</ms-api-collapse>
</div>
<el-button class="scenario-create" type="primary" size="mini" icon="el-icon-plus" plain @click="create"/>
<el-button class="scenario-create" type="primary" size="mini" icon="el-icon-plus" plain
@click="createScenario"/>
</el-aside>
<el-main class="scenario-main">
<div class="scenario-form">
<ms-api-scenario-form :scenario="selected"></ms-api-scenario-form>
<ms-api-request-form :request="selected"></ms-api-request-form>
<ms-api-scenario-form :scenario="selected" v-if="isScenario"></ms-api-scenario-form>
<ms-api-request-form :request="selected" v-if="isRequest"></ms-api-request-form>
</div>
</el-main>
</el-container>
@ -49,6 +50,7 @@
import MsApiRequest from "./components/ApiRequest";
import MsApiRequestForm from "./components/ApiRequestForm";
import MsApiScenarioForm from "./components/ApiScenarioForm";
import {Scenario, Request} from "./model/APIModel";
export default {
name: "MsApiScenarioConfig",
@ -64,6 +66,17 @@
},
methods: {
createScenario: function () {
let scenario = new Scenario({name: "Scenario"});
this.scenarios.push(scenario);
},
deleteScenario: function (index) {
this.scenarios.splice(index, 1);
if (this.scenarios.length === 0) {
this.createScenario();
this.select(this.scenarios[0]);
}
},
handleChange: function (index) {
this.select(this.scenarios[index]);
},
@ -74,35 +87,23 @@
break;
}
},
createScenario: function () {
return {
type: "Scenario",
name: "Scenario",
address: "",
file: "",
variables: [],
headers: [],
requests: []
}
},
deleteScenario: function (index) {
this.scenarios.splice(index, 1);
if (this.scenarios.length === 0) {
this.create();
}
},
create: function () {
let scenario = this.createScenario();
this.scenarios.push(scenario);
},
select: function (obj) {
this.selected = obj;
}
},
computed: {
isScenario() {
return this.selected instanceof Scenario;
},
isRequest() {
return this.selected instanceof Request;
}
},
created() {
if (this.scenarios.length === 0) {
this.create();
this.createScenario();
this.select(this.scenarios[0]);
}
}
@ -137,6 +138,9 @@
}
.scenario-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
width: 100%;
}

64
frontend/src/business/components/api/test/components/ApiAssertionRegex.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<div>
<el-row :gutter="10" type="flex" align="middle">
<el-col :span="4">
<el-select class="assertion-item" v-model="regex.subject" size="small"
:placeholder="$t('api_test.request.assertions.select_subject')">
<el-option label="Http-Code" value="HTTP-CODE"></el-option>
<el-option label="Header" value="HEADER"></el-option>
<el-option label="Body" value="BODY"></el-option>
</el-select>
</el-col>
<el-col :span="19">
<el-input v-model="regex.expression" maxlength="255" size="small" show-word-limit
:placeholder="$t('api_test.request.assertions.expression')"/>
</el-col>
<el-col :span="1" class="assertion-btn">
<el-button type="danger" size="mini" icon="el-icon-delete" circle @click="remove" v-if="edit"/>
<el-button type="primary" size="small" icon="el-icon-plus" plain @click="add" v-else/>
</el-col>
</el-row>
</div>
</template>
<script>
import {Regex} from "../model/APIModel";
export default {
name: "MsApiAssertionRegex",
props: {
regex: {
type: Regex,
default: () => {
return new Regex();
}
},
edit: {
type: Boolean,
default: false
},
index: Number,
list: Array
},
methods: {
add: function () {
this.list.push(new Regex(this.regex));
},
remove: function () {
this.list.splice(this.index, 1);
}
}
}
</script>
<style scoped>
.assertion-item {
width: 100%;
}
.assertion-btn {
text-align: center;
}
</style>

51
frontend/src/business/components/api/test/components/ApiAssertionResponseTime.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div>
<el-row :gutter="10" align="middle">
<el-col :span="23">
<el-input v-model="time" step="100" size="small" type="number"
:placeholder="$t('api_test.request.assertions.response_in_time')"/>
</el-col>
<el-col :span="1" class="assertion-btn">
<el-button type="danger" size="mini" icon="el-icon-delete" circle @click="remove" v-if="edit"/>
<el-button type="primary" size="small" icon="el-icon-plus" plain @click="add" v-else/>
</el-col>
</el-row>
</div>
</template>
<script>
import {ResponseTime} from "../model/APIModel";
export default {
name: "MsApiAssertionResponseTime",
props: {
edit: Boolean,
responseTime: ResponseTime
},
data() {
return {
time: this.responseTime.responseInTime
}
},
methods: {
add: function () {
this.remove();
setTimeout(() => {
this.responseTime.responseInTime = this.time;
})
},
remove: function () {
this.responseTime.responseInTime = null;
}
}
}
</script>
<style scoped>
.assertion-btn {
text-align: center;
}
</style>

95
frontend/src/business/components/api/test/components/ApiAssertionText.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-select class="assertion-item" v-model="subject" size="small"
:placeholder="$t('api_test.request.assertions.select_subject')">
<el-option label="Http-Code" value="HTTP-CODE"></el-option>
<el-option label="Header" value="HEADER"></el-option>
<el-option label="Body" value="BODY"></el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select class="assertion-item" v-model="condition" size="small"
:placeholder="$t('api_test.request.assertions.select_contains')">
<el-option :label="$t('api_test.request.assertions.contains')" value="CONTAINS"></el-option>
<el-option :label="$t('api_test.request.assertions.not_contains')" value="NOT_CONTAINS"></el-option>
<el-option :label="$t('api_test.request.assertions.equals')" value="EQUALS"></el-option>
<el-option :label="$t('api_test.request.assertions.start_with')" value="START_WITH"></el-option>
<el-option :label="$t('api_test.request.assertions.end_with')" value="END_WITH"></el-option>
</el-select>
</el-col>
<el-col :span="15">
<el-input v-model="value" maxlength="255" size="small" show-word-limit
:placeholder="$t('api_test.request.assertions.value')"/>
</el-col>
<el-col :span="1">
<el-button type="primary" size="small" icon="el-icon-plus" plain @click="add"/>
</el-col>
</el-row>
</div>
</template>
<script>
import {Regex} from "../model/APIModel";
export default {
name: "MsApiAssertionText",
props: {
list: Array
},
data() {
return {
subject: "",
condition: "",
value: ""
}
},
methods: {
add: function () {
this.list.push(this.toRegex());
},
toRegex: function () {
let expression = "";
let description = "";
switch (this.condition) {
case "CONTAINS":
expression = ".*" + this.value + ".*";
description = "contains: " + this.value;
break;
case "NOT_CONTAINS":
expression = "^((?!" + this.value + ").)*$";
description = "not contains: " + this.value;
break;
case "EQUALS":
expression = "^" + this.value + "$";
description = "equals: " + this.value;
break;
case "START_WITH":
expression = "^" + this.value;
description = "start with: " + this.value;
break;
case "END_WITH":
expression = this.value + "$";
description = "end with: " + this.value;
break;
}
return new Regex({
subject: this.subject,
expression: expression,
description: description
}
);
}
}
}
</script>
<style scoped>
.assertion-item {
width: 100%;
}
</style>

59
frontend/src/business/components/api/test/components/ApiAssertions.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-select class="assertion-item" v-model="type" :placeholder="$t('api_test.request.assertions.select_type')"
size="small">
<el-option :label="$t('api_test.request.assertions.text')" :value="options.TEXT"/>
<el-option :label="$t('api_test.request.assertions.regex')" :value="options.REGEX"/>
<el-option :label="$t('api_test.request.assertions.response_time')" :value="options.RESPONSE_TIME"/>
</el-select>
</el-col>
<el-col :span="20">
<ms-api-assertion-text :list="assertions.regex" v-if="type === options.TEXT"/>
<ms-api-assertion-regex :list="assertions.regex" v-if="type === options.REGEX"/>
<ms-api-assertion-response-time :response-time="assertions.responseTime" v-if="type === options.RESPONSE_TIME"/>
</el-col>
</el-row>
<ms-api-assertions-edit :assertions="assertions"/>
</div>
</template>
<script>
import MsApiAssertionText from "./ApiAssertionText";
import MsApiAssertionRegex from "./ApiAssertionRegex";
import MsApiAssertionResponseTime from "./ApiAssertionResponseTime";
import {ASSERTION_TYPE, Assertions, Regex} from "../model/APIModel";
import MsApiAssertionsEdit from "./ApiAssertionsEdit";
export default {
name: "MsApiAssertions",
components: {MsApiAssertionsEdit, MsApiAssertionResponseTime, MsApiAssertionRegex, MsApiAssertionText},
props: {
assertions: Assertions
},
data() {
return {
options: ASSERTION_TYPE,
type: "",
}
},
methods: {
createRegex: function () {
return new Regex();
}
}
}
</script>
<style scoped>
.assertion-item {
width: 100%;
}
</style>

57
frontend/src/business/components/api/test/components/ApiAssertionsEdit.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div>
<div class="assertion-item-editing regex" v-if="assertions.regex.length > 0">
<div>
{{$t("api_test.request.assertions.regex")}}
</div>
<div class="regex-item" v-for="(regex, index) in assertions.regex" :key="index">
<ms-api-assertion-regex :list="assertions.regex" :regex="regex" :edit="true" :index="index"/>
</div>
</div>
<div class="assertion-item-editing response-time" v-if="assertions.responseTime.isValid()">
<div>
{{$t("api_test.request.assertions.response_time")}}
</div>
<ms-api-assertion-response-time :response-time="assertions.responseTime" :edit="true"/>
</div>
</div>
</template>
<script>
import MsApiAssertionRegex from "./ApiAssertionRegex";
import MsApiAssertionResponseTime from "./ApiAssertionResponseTime";
import {Assertions} from "../model/APIModel";
export default {
name: "MsApiAssertionsEdit",
components: {MsApiAssertionResponseTime, MsApiAssertionRegex},
props: {
assertions: Assertions
}
}
</script>
<style scoped>
.assertion-item-editing {
padding-left: 10px;
margin-top: 10px;
}
.assertion-item-editing.regex {
border-left: 2px solid #7B0274;
}
.assertion-item-editing.response-time {
border-left: 2px solid #DD0240;
}
.regex-item {
margin-top: 10px;
}
</style>

19
frontend/src/business/components/api/test/components/ApiBody.vue
View File

@ -1,15 +1,15 @@
<template>
<div>
<el-radio-group v-model="body.type" size="mini">
<el-radio-button label="kv">
<el-radio-button :label="type.KV">
{{$t('api_test.request.body_kv')}}
</el-radio-button>
<el-radio-button label="text">
<el-radio-button :label="type.TEXT">
{{$t('api_test.request.body_text')}}
</el-radio-button>
</el-radio-group>
<ms-api-key-value :items="body.kvs" v-if="isKV"/>
<ms-api-key-value :items="body.kvs" v-if="body.isKV()"/>
<el-input class="textarea" type="textarea" v-model="body.text" :autosize="{ minRows: 10, maxRows: 25}" resize="none"
v-else/>
@ -18,23 +18,26 @@
<script>
import MsApiKeyValue from "./ApiKeyValue";
import {Body, BODY_TYPE} from "../model/APIModel";
export default {
name: "MsApiBody",
components: {MsApiKeyValue},
props: {
body: Object
body: Body
},
data() {
return {};
return {
type: BODY_TYPE
};
},
methods: {},
computed: {
isKV() {
return this.body.type === "kv";
created() {
if (this.body.type === null) {
this.body.type = BODY_TYPE.KV;
}
}
}

23
frontend/src/business/components/api/test/components/ApiKeyValue.vue
View File

@ -12,7 +12,8 @@
<el-input v-model="item.value" placeholder="Value" size="small" maxlength="100" @change="check"/>
</el-col>
<el-col :span="1">
<el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"/>
<el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
:disabled="isDisable(index)"/>
</el-col>
</el-row>
</div>
@ -20,6 +21,8 @@
</template>
<script>
import {KeyValue} from "../model/APIModel";
export default {
name: "MsApiKeyValue",
@ -29,23 +32,20 @@
},
methods: {
create: function () {
return {
key: "",
value: ""
}
add: function () {
this.items.push(new KeyValue());
},
remove: function (index) {
this.items.splice(index, 1);
if (this.items.length === 0) {
this.items.push(this.create());
this.add();
}
},
check: function () {
let isNeedCreate = true;
let removeIndex = -1;
this.items.forEach((item, index) => {
if (item.key === "" && item.value === "") {
if (!item.key && !item.value) {
// 多余的空行
if (index !== this.items.length - 1) {
removeIndex = index;
@ -55,18 +55,21 @@
}
});
if (isNeedCreate) {
this.items.push(this.create());
this.add();
}
if (removeIndex !== -1) {
this.remove(removeIndex);
}
// TODO 检查key重复
},
isDisable: function (index) {
return this.items.length - 1 === index;
}
},
created() {
if (this.items.length === 0) {
this.items.push(this.create());
this.add();
}
}
}

85
frontend/src/business/components/api/test/components/ApiRequest.vue
View File

@ -2,28 +2,30 @@
<div class="request-container">
<div class="request-item" v-for="(request, index) in requests" :key="index" @click="select(request)"
:class="{'selected': isSelected(request)}">
<span class="request-method">
{{request.method}}
</span>
<span class="request-name">
{{request.name}}
</span>
<span class="request-btn">
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link el-icon-more"></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{type: 'copy', index: index}">复制请求</el-dropdown-item>
<el-dropdown-item :command="{type: 'delete', index: index}">删除请求</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<el-row type="flex">
<div class="request-method">
{{request.method}}
</div>
<div class="request-name">
{{request.name}}
</div>
<div class="request-btn">
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link el-icon-more"></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{type: 'copy', index: index}">复制请求</el-dropdown-item>
<el-dropdown-item :command="{type: 'delete', index: index}">删除请求</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-row>
</div>
<el-button class="request-create" type="primary" size="mini" icon="el-icon-plus" plain @click="create"/>
<el-button class="request-create" type="primary" size="mini" icon="el-icon-plus" plain @click="createRequest"/>
</div>
</template>
<script>
import {generateId} from 'element-ui/src/utils/util';
import {Request} from "../model/APIModel";
export default {
name: "MsApiRequest",
@ -34,7 +36,7 @@
data() {
return {
selected: 0
selected: 0,
}
},
@ -47,10 +49,20 @@
},
methods: {
create: function () {
let request = this.createRequest();
createRequest: function () {
let request = new Request({method: "GET"});
this.requests.push(request);
},
copyRequest: function (index) {
let request = this.requests[index];
this.requests.push(JSON.parse(JSON.stringify(request)));
},
deleteRequest: function (index) {
this.requests.splice(index, 1);
if (this.requests.length === 0) {
this.createRequest();
}
},
handleCommand: function (command) {
switch (command.type) {
case "copy":
@ -61,33 +73,6 @@
break;
}
},
copyRequest: function (index) {
let request = this.requests[index];
this.requests.push(JSON.parse(JSON.stringify(request)));
},
deleteRequest: function (index) {
this.requests.splice(index, 1);
if (this.requests.length === 0) {
this.create();
}
},
createRequest: function () {
return {
randomId: generateId(),
type: "Request",
method: "GET",
name: "",
parameters: [],
headers: [],
body: {
type: "kv",
kvs: [],
text: ""
},
assertions: [],
extract: []
}
},
select: function (request) {
this.selected = request;
this.open(request);
@ -96,7 +81,7 @@
created() {
if (this.requests.length === 0) {
this.create();
this.createRequest();
this.select(this.requests[0]);
}
}
@ -126,11 +111,13 @@
.request-method {
padding: 0 5px;
width: 60px;
color: #1E90FF;
}
.request-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
width: 100%;
}

26
frontend/src/business/components/api/test/components/ApiRequestForm.vue
View File

@ -1,11 +1,11 @@
<template>
<el-form :model="request" :rules="rules" ref="request" label-width="100px" label-position="left" v-if="isRequest">
<el-form :model="request" :rules="rules" ref="request" label-width="100px">
<el-form-item :label="$t('api_test.request.name')" prop="name">
<el-input v-model="request.name"></el-input>
<el-input v-model="request.name" maxlength="100"></el-input>
</el-form-item>
<el-form-item :label="$t('api_test.request.url')" prop="url">
<el-input v-model="request.url" :placeholder="$t('api_test.request.url_describe')">
<el-input v-model="request.url" maxlength="100" :placeholder="$t('api_test.request.url_description')">
<el-select v-model="request.method" slot="prepend" class="request-method-select">
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
@ -29,8 +29,8 @@
<el-tab-pane :label="$t('api_test.request.body')" name="body" v-if="isNotGet">
<ms-api-body :body="request.body"/>
</el-tab-pane>
<el-tab-pane :label="$t('api_test.request.assertions')" name="assertions" v-if="false">
TODO
<el-tab-pane :label="$t('api_test.request.assertions.label')" name="assertions">
<ms-api-assertions :assertions="request.assertions"></ms-api-assertions>
</el-tab-pane>
<el-tab-pane :label="$t('api_test.request.extract')" name="extract" v-if="false">
TODO
@ -42,10 +42,11 @@
<script>
import MsApiKeyValue from "./ApiKeyValue";
import MsApiBody from "./ApiBody";
import MsApiAssertions from "./ApiAssertions";
export default {
name: "MsApiRequestForm",
components: {MsApiBody, MsApiKeyValue},
components: {MsApiAssertions, MsApiBody, MsApiKeyValue},
props: {
request: Object
},
@ -53,14 +54,19 @@
data() {
return {
activeName: "parameters",
rules: {}
rules: {
name: [
{required: true, message: this.$t('api_test.scenario.input_name'), trigger: 'blur'},
{max: 100, message: this.$t('commons.input_limit', [0, 100]), trigger: 'blur'}
],
url: [
{max: 100, message: this.$t('commons.input_limit', [0, 100]), trigger: 'blur'}
]
}
}
},
computed: {
isRequest() {
return this.request.type === "Request";
},
isNotGet() {
return this.request.method !== "GET";
}

24
frontend/src/business/components/api/test/components/ApiScenarioForm.vue
View File

@ -1,11 +1,11 @@
<template>
<el-form :model="scenario" :rules="rules" ref="scenario" label-width="100px" label-position="left" v-if="isScenario">
<el-form :model="scenario" :rules="rules" ref="scenario" label-width="100px">
<el-form-item :label="$t('api_test.scenario.name')" prop="name">
<el-input v-model="scenario.name"></el-input>
<el-input v-model="scenario.name" maxlength="100"></el-input>
</el-form-item>
<el-form-item :label="$t('api_test.scenario.base_url')" prop="url">
<el-input :placeholder="$t('api_test.scenario.base_url_describe')" v-model="scenario.url"></el-input>
<el-input :placeholder="$t('api_test.scenario.base_url_description')" v-model="scenario.url" maxlength="100"/>
</el-form-item>
<el-tabs v-model="activeName">
@ -32,15 +32,17 @@
data() {
return {
activeName: "variables",
rules: {}
rules: {
name: [
{required: true, message: this.$t('api_test.scenario.input_name'), trigger: 'blur'},
{max: 100, message: this.$t('commons.input_limit', [0, 100]), trigger: 'blur'}
],
url: [
{max: 100, message: this.$t('commons.input_limit', [0, 100]), trigger: 'blur'}
]
}
}
},
computed: {
isScenario() {
return this.scenario.type === "Scenario";
}
},
}
}
</script>

123
frontend/src/business/components/api/test/model/APIModel.js Normal file
View File

@ -0,0 +1,123 @@
import {generateId} from "element-ui/src/utils/util";
const assign = function (obj, options) {
for (let name in options) {
if (options.hasOwnProperty(name)) {
obj[name] = options[name];
}
}
}
export const BODY_TYPE = {
KV: "KV",
TEXT: "TEXT"
}
export const ASSERTION_TYPE = {
TEXT: "TEXT",
REGEX: "REGEX",
RESPONSE_TIME: "RESPONSE_TIME"
}
export class Scenario {
constructor(options) {
this.name = null;
this.url = null;
this.variables = [];
this.headers = [];
this.requests = [];
assign(this, options);
}
}
export class Request {
constructor(options) {
this.randomId = generateId();
this.name = null;
this.url = null;
this.method = null;
this.parameters = [];
this.headers = [];
this.body = new Body();
this.assertions = new Assertions();
this.extract = [];
assign(this, options);
}
}
export class Body {
constructor(options) {
this.type = null;
this.text = null;
this.kvs = [];
assign(this, options);
}
isKV() {
return this.type === BODY_TYPE.KV;
}
}
export class KeyValue {
constructor(options) {
this.key = null;
this.value = null;
assign(this, options);
}
}
export class Assertions {
constructor(options) {
this.text = [];
this.regex = [];
this.responseTime = new ResponseTime();
assign(this, options);
}
}
class AssertionType {
constructor(type) {
this.type = type;
}
}
export class Text extends AssertionType {
constructor(options) {
super(ASSERTION_TYPE.TEXT);
this.subject = null;
this.condition = null;
this.value = null;
assign(this, options);
}
}
export class Regex extends AssertionType {
constructor(options) {
super(ASSERTION_TYPE.REGEX);
this.subject = null;
this.expression = null;
this.description = null;
assign(this, options);
}
}
export class ResponseTime extends AssertionType {
constructor(options) {
super(ASSERTION_TYPE.RESPONSE_TIME);
this.responseInTime = null;
assign(this, options);
}
isValid() {
return this.responseInTime !== null && this.responseInTime > 0;
}
}

38
frontend/src/business/components/performance/report/components/TestOverview.vue
View File

@ -157,7 +157,8 @@
this.$get("/performance/report/content/res_chart/" + this.id, res => {
let data = res.data;
let userList = data.filter(m => m.groupName === "users").map(m => m.yAxis);
let responseTimeList = data.filter(m => m.groupName === "responseTime").map(m => m.yAxis);
let responseTimeList = data.filter(m => m.groupName != "users").map(m => m.yAxis);
let responseGroupNameList = data.filter(m => m.groupName != "users").map(m => m.groupName);
let userMax = this._getChartMax(userList);
let resMax = this._getChartMax(responseTimeList);
let resOption = {
@ -171,7 +172,24 @@
},
tooltip: {
show: true,
trigger: 'axis'
trigger: 'axis',
extraCssText: 'z-index: 999;',
formatter: function (params, ticket, callback) {
let result = "";
let name = params[0].name;
result += name + "<br/>";
for (let i = 0; i < params.length; i++) {
let seriesName = params[i].seriesName;
if (seriesName.length > 100) {
seriesName = seriesName.substring(0, 100);
}
let value = params[i].value;
let marker = params[i].marker;
result += marker + seriesName + ": " + value[1] + "<br/>";
}
return result;
}
},
legend: {},
xAxis: {},
@ -197,14 +215,12 @@
{
name: 'users',
color: '#0CA74A',
},
{
name: "responseTime",
yAxisIndex: '1',
color: '#99743C',
}
]
}
responseGroupNameList.forEach(item => {
setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
})
this.resOption = this.generateOption(resOption, data, setting);
})
},
@ -229,10 +245,11 @@
legend.push(name)
series[name] = []
}
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, Math.round(item.yAxis.toFixed(2))]);
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis.toFixed(2)]);
})
this.$set(option.legend, "data", legend);
this.$set(option.legend, "bottom", 10);
this.$set(option.legend, "type", "scroll");
this.$set(option.legend, "bottom", "10px");
this.$set(option.xAxis, "data", xAxis);
for (let name in series) {
let d = series[name];
@ -259,9 +276,6 @@
_getChartMax(arr) {
const max = Math.max(...arr);
return Math.ceil(max / 4.5) * 5;
},
_arraySort(a, b) {
return a[0] > b[0];
}
},
watch: {

29
frontend/src/i18n/zh-CN.js
View File

@ -45,7 +45,8 @@ export default {
'refresh': '刷新',
'remark': '备注',
'delete': '删除',
'not_filled': '未填写'
'not_filled': '未填写',
'please_select': '请选择',
},
workspace: {
'create': '创建工作空间',
@ -169,25 +170,43 @@ export default {
},
api_test: {
scenario: {
input_name: "请输入场景名称",
name: "场景名称",
base_url: "基础URL",
base_url_describe: "基础URL作为所有请求的URL前缀",
base_url_description: "基础URL作为所有请求的URL前缀",
variables: "变量",
headers: "请求头"
},
request: {
input_name: "请输入请求名称",
name: "请求名称",
method: "请求方法",
url: "请求URL",
url_describe: "例如: https://fit2cloud.com",
url_description: "例如: https://fit2cloud.com",
parameters: "请求参数",
parameters_desc: "参数追加到URL，例如https://fit2cloud.com/entries?key1=Value1&Key2=Value2",
headers: "请求头",
body: "请求内容",
body_kv: "键值对",
body_text: "文本",
assertions: "断言",
extract: "提取"
assertions: {
label: "断言",
text: "文本",
regex: "正则",
response_time: "响应时间",
select_type: "请选择类型",
select_subject: "请选择对象",
select_contains: "请选择条件",
contains: "包含",
not_contains: "不包含",
equals: "等于",
start_with: "以...开始",
end_with: "以...结束",
value: "值",
expression: "正则表达式",
response_in_time: "响应时间在...毫秒以内",
},
extract: "提取",
}
},
test_track: {