增加提取功能的页面

frontend/src/business/components/api/test/components/ApiKeyValue.vue

@@ -70,7 +70,7 @@
 
 <style scoped>
   .kv-description {
-    font-size: 14px;
+    font-size: 13px;
   }
 
   .kv-row {

frontend/src/business/components/api/test/components/ApiRequestForm.vue

@@ -34,8 +34,8 @@
       <el-tab-pane :label="$t('api_test.request.assertions.label')" name="assertions">
         <ms-api-assertions :assertions="request.assertions"/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('api_test.request.extract')" name="extract" v-if="false">
+      <el-tab-pane :label="$t('api_test.request.extract.label')" name="extract">
-        TODO
+        <ms-api-extract :extract="request.extract"/>
       </el-tab-pane>
     </el-tabs>
   </el-form>
@@ -44,12 +44,13 @@
 <script>
   import MsApiKeyValue from "./ApiKeyValue";
   import MsApiBody from "./ApiBody";
-  import MsApiAssertions from "./ApiAssertions";
+  import MsApiAssertions from "./assertion/ApiAssertions";
   import {KeyValue, Request} from "../model/ScenarioModel";
+  import MsApiExtract from "./extract/ApiExtract";
 
   export default {
     name: "MsApiRequestForm",
-    components: {MsApiAssertions, MsApiBody, MsApiKeyValue},
+    components: {MsApiExtract, MsApiAssertions, MsApiBody, MsApiKeyValue},
     props: {
       request: Request
     },

frontend/src/business/components/api/test/components/ApiScenarioConfig.vue

@@ -96,7 +96,6 @@
         });
       },
       reset: function () {
-        this.selected = null;
         this.$nextTick(function () {
           this.activeName = 0;
           this.select(this.scenarios[0]);

frontend/src/business/components/api/test/components/assertion/ApiAssertionRegex.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-  import {ASSERTION_REGEX_SUBJECT, Regex} from "../model/ScenarioModel";
+  import {ASSERTION_REGEX_SUBJECT, Regex} from "../../model/ScenarioModel";
 
   export default {
     name: "MsApiAssertionRegex",

frontend/src/business/components/api/test/components/assertion/ApiAssertionResponseTime.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-  import {ResponseTime} from "../model/ScenarioModel";
+  import {ResponseTime} from "../../model/ScenarioModel";
 
   export default {
     name: "MsApiAssertionResponseTime",

frontend/src/business/components/api/test/components/assertion/ApiAssertionText.vue

@@ -11,7 +11,7 @@
       </el-col>
       <el-col class="assertion-select">
         <el-select class="assertion-item" v-model="condition" size="small"
-                   :placeholder="$t('api_test.request.assertions.select_contains')">
+                   :placeholder="$t('api_test.request.assertions.select_condition')">
           <el-option :label="$t('api_test.request.assertions.contains')" value="CONTAINS"/>
           <el-option :label="$t('api_test.request.assertions.not_contains')" value="NOT_CONTAINS"/>
           <el-option :label="$t('api_test.request.assertions.equals')" value="EQUALS"/>
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-  import {Regex, ASSERTION_REGEX_SUBJECT} from "../model/ScenarioModel";
+  import {Regex, ASSERTION_REGEX_SUBJECT} from "../../model/ScenarioModel";
 
   export default {
     name: "MsApiAssertionText",

frontend/src/business/components/api/test/components/assertion/ApiAssertions.vue

@@ -24,7 +24,7 @@
   import MsApiAssertionText from "./ApiAssertionText";
   import MsApiAssertionRegex from "./ApiAssertionRegex";
   import MsApiAssertionResponseTime from "./ApiAssertionResponseTime";
-  import {ASSERTION_TYPE, Assertions, Regex} from "../model/ScenarioModel";
+  import {ASSERTION_TYPE, Assertions} from "../../model/ScenarioModel";
   import MsApiAssertionsEdit from "./ApiAssertionsEdit";
 
   export default {

frontend/src/business/components/api/test/components/assertion/ApiAssertionsEdit.vue

@@ -22,7 +22,7 @@
 <script>
   import MsApiAssertionRegex from "./ApiAssertionRegex";
   import MsApiAssertionResponseTime from "./ApiAssertionResponseTime";
-  import {Assertions} from "../model/ScenarioModel";
+  import {Assertions} from "../../model/ScenarioModel";
 
   export default {
     name: "MsApiAssertionsEdit",

frontend/src/business/components/api/test/components/extract/ApiExtract.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="extract-description">
+      {{$t('api_test.request.extract.description')}}
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="4">
+        <el-select class="extract-item" v-model="type" :placeholder="$t('api_test.request.extract.select_type')"
+                   size="small">
+          <el-option :label="$t('api_test.request.extract.regex')" :value="options.REGEX"/>
+          <el-option label="JSONPath" :value="options.JSON_PATH"/>
+          <el-option label="XPath" :value="options.XPATH"/>
+        </el-select>
+      </el-col>
+      <el-col :span="20">
+        <ms-api-extract-common :extract-type="type" :list="list" v-if="type"/>
+      </el-col>
+    </el-row>
+
+    <ms-api-extract-edit :extract="extract"/>
+  </div>
+</template>
+
+<script>
+  import {EXTRACT_TYPE, Extract} from "../../model/ScenarioModel";
+  import MsApiExtractEdit from "./ApiExtractEdit";
+  import MsApiExtractCommon from "./ApiExtractCommon";
+
+  export default {
+    name: "MsApiExtract",
+
+    components: {
+      MsApiExtractCommon,
+      MsApiExtractEdit,
+    },
+
+    props: {
+      extract: Extract
+    },
+
+    data() {
+      return {
+        options: EXTRACT_TYPE,
+        type: "",
+      }
+    },
+
+    computed: {
+      list() {
+        switch (this.type) {
+          case EXTRACT_TYPE.REGEX:
+            return this.extract.regex;
+          case EXTRACT_TYPE.JSON_PATH:
+            return this.extract.json;
+          case EXTRACT_TYPE.XPATH:
+            return this.extract.xpath;
+          default:
+            return [];
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .extract-description {
+    font-size: 13px;
+    margin-bottom: 10px;
+  }
+
+  .extract-item {
+    width: 100%;
+  }
+</style>

frontend/src/business/components/api/test/components/extract/ApiExtractCommon.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <el-row :gutter="10" type="flex" justify="space-between" align="middle">
+      <el-col :span="10">
+        <el-input v-model="common.variable" maxlength="60" size="small" @input="change"
+                  :placeholder="$t('api_test.request.extract.variable_name')"/>
+      </el-col>
+      <el-col>
+        <el-input v-model="common.expression" maxlength="255" size="small" :placeholder="expression"/>
+      </el-col>
+      <el-col class="extract-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 {EXTRACT_TYPE, ExtractCommon} from "../../model/ScenarioModel";
+
+  export default {
+    name: "MsApiExtractCommon",
+
+    props: {
+      extractType: {
+        type: String,
+        validator: function (value) {
+          return [EXTRACT_TYPE.XPATH, EXTRACT_TYPE.JSON_PATH, EXTRACT_TYPE.REGEX].indexOf(value) !== -1
+        }
+      },
+      common: {
+        type: ExtractCommon,
+        default: () => {
+          return new ExtractCommon();
+        }
+      },
+      edit: {
+        type: Boolean,
+        default: false
+      },
+      index: Number,
+      list: Array
+    },
+
+    methods: {
+      add() {
+        this.list.push(new ExtractCommon(this.extractType, this.common));
+        this.clear();
+      },
+      change(variable) {
+        this.common.value = "${" + variable + "}";
+      },
+      remove() {
+        this.list.splice(this.index, 1);
+      },
+      clear() {
+        this.common.variable = null;
+        this.common.expression = null;
+        this.common.value = null;
+      }
+    },
+
+    computed: {
+      expression() {
+        switch (this.extractType) {
+          case EXTRACT_TYPE.REGEX:
+            return this.$t('api_test.request.extract.regex_expression');
+          case EXTRACT_TYPE.JSON_PATH:
+            return this.$t('api_test.request.extract.json_path_expression');
+          case EXTRACT_TYPE.XPATH:
+            return this.$t('api_test.request.extract.xpath_expression');
+          default:
+            return "";
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .extract-btn {
+    width: 60px;
+  }
+</style>

frontend/src/business/components/api/test/components/extract/ApiExtractEdit.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="extract-item-editing regex" v-if="extract.regex.length > 0">
+      <div>
+        {{$t("api_test.request.extract.regex")}}
+      </div>
+      <div class="regex-item" v-for="(regex, index) in extract.regex" :key="index">
+        <ms-api-extract-common :extract-type="type.REGEX" :list="extract.regex" :common="regex"
+                               :edit="true" :index="index"/>
+      </div>
+    </div>
+
+    <div class="extract-item-editing json" v-if="extract.json.length > 0">
+      <div>
+        JSONPath
+      </div>
+      <div class="regex-item" v-for="(json, index) in extract.json" :key="index">
+        <ms-api-extract-common :extract-type="type.JSON_PATH" :list="extract.json" :common="json"
+                               :edit="true" :index="index"/>
+      </div>
+    </div>
+
+    <div class="extract-item-editing xpath" v-if="extract.xpath.length > 0">
+      <div>
+        XPath
+      </div>
+      <div class="regex-item" v-for="(xpath, index) in extract.xpath" :key="index">
+        <ms-api-extract-common :extract-type="type.XPATH" :list="extract.xpath" :common="xpath"
+                               :edit="true" :index="index"/>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import {Extract, EXTRACT_TYPE} from "../../model/ScenarioModel";
+  import MsApiExtractCommon from "./ApiExtractCommon";
+
+  export default {
+    name: "MsApiExtractEdit",
+
+    components: {MsApiExtractCommon},
+
+    props: {
+      extract: Extract
+    },
+
+    data() {
+      return {
+        type: EXTRACT_TYPE
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .extract-item-editing {
+    padding-left: 10px;
+    margin-top: 10px;
+  }
+
+  .extract-item-editing.regex {
+    border-left: 2px solid #7B0274;
+  }
+
+  .extract-item-editing.json {
+    border-left: 2px solid #44B3D2;
+  }
+
+  .extract-item-editing.xpath {
+    border-left: 2px solid #E6A200;
+  }
+
+  .regex-item {
+    margin-top: 10px;
+  }
+
+
+</style>

frontend/src/business/components/api/test/model/ScenarioModel.js

@@ -49,6 +49,12 @@ export const ASSERTION_REGEX_SUBJECT = {
   RESPONSE_DATA: "Response Data"
 }
 
+export const EXTRACT_TYPE = {
+  REGEX: "Regex",
+  JSON_PATH: "JSONPath",
+  XPATH: "XPath"
+}
+
 export class BaseConfig {
 
   set(options) {
@@ -144,11 +150,10 @@ export class Request extends BaseConfig {
     this.headers = [];
     this.body = null;
     this.assertions = null;
-    this.extract = [];
+    this.extract = null;
 
     this.set(options);
     this.sets({parameters: KeyValue, headers: KeyValue}, options);
-    // TODO assigns extract
   }
 
   initOptions(options) {
@@ -156,6 +161,7 @@ export class Request extends BaseConfig {
     options.method = "GET";
     options.body = new Body(options.body);
     options.assertions = new Assertions(options.assertions);
+    options.extract = new Extract(options.extract);
     return options;
   }
 
@@ -278,6 +284,64 @@ export class ResponseTime extends AssertionType {
   }
 }
 
+export class Extract extends BaseConfig {
+  constructor(options) {
+    super();
+    this.regex = [];
+    this.json = [];
+    this.xpath = [];
+
+    this.set(options);
+    let types = {
+      json: ExtractJSONPath,
+      xpath: ExtractXPath,
+      regex: ExtractRegex
+    }
+    this.sets(types, options);
+  }
+}
+
+export class ExtractType extends BaseConfig {
+  constructor(type) {
+    super();
+    this.type = type;
+  }
+}
+
+export class ExtractCommon extends ExtractType {
+  constructor(type, options) {
+    super(type);
+    this.variable = null;
+    this.value = ""; // ${variable}
+    this.expression = null;
+    this.description = null;
+
+    this.set(options);
+  }
+
+  isValid() {
+    return !!this.variable && !!this.expression;
+  }
+}
+
+export class ExtractRegex extends ExtractCommon {
+  constructor(options) {
+    super(EXTRACT_TYPE.REGEX, options);
+  }
+}
+
+export class ExtractJSONPath extends ExtractCommon {
+  constructor(options) {
+    super(EXTRACT_TYPE.JSON_PATH, options);
+  }
+}
+
+export class ExtractXPath extends ExtractCommon {
+  constructor(options) {
+    super(EXTRACT_TYPE.XPATH, options);
+  }
+}
+
 /** ------------------------------------------------------------------------ **/
 const JMX_ASSERTION_CONDITION = {
   MATCH: 1,

frontend/src/i18n/en-US.js

@@ -221,9 +221,9 @@ export default {
         text: "Text",
         regex: "Regex",
         response_time: "Response Time",
-        select_type: "Please select a request type",
+        select_type: "Choose type",
-        select_subject: "Please select a request subject",
+        select_subject: "Subject",
-        select_condition: "Please select a condition",
+        select_condition: "Condition",
         contains: "Contains",
         not_contains: "Not contains",
         equals: "Equals",
@@ -231,10 +231,18 @@ export default {
         end_with: "End With",
         value: "Value",
         expression: "Expression",
-        response_in_time: "Response in time",
+        response_in_time: "Response Time",
       },
-      extract: "Extract from response",
+      extract: {
-      extract_desc: "Extract data from the response and store it in variables. Use the variables in subsequent requests.",
+        label: "Extract from response",
+        select_type: "Choose type",
+        description: "Extract data from the response and store it in variables. Use the variables in subsequent requests.",
+        regex: "Regex",
+        variable_name: "Variable name",
+        regex_expression: "Regular expression",
+        json_path_expression: "JSONPath expression",
+        xpath_expression: "XPath expression",
+      }
     }
   },
   api_report: {

frontend/src/i18n/zh-CN.js

@@ -96,7 +96,7 @@ export default {
     'special_characters_are_not_supported': '不支持特殊字符',
     'mobile_number_format_is_incorrect': '手机号码格式不正确',
     'email_format_is_incorrect': '邮箱格式不正确',
-    'password_format_is_incorrect':'密码格式不正确(至少8-16个字符，至少1个大写字母，1个小写字母和1个数字)',
+    'password_format_is_incorrect': '密码格式不正确(至少8-16个字符，至少1个大写字母，1个小写字母和1个数字)',
   },
   user: {
     'create': '创建用户',
@@ -104,7 +104,7 @@ export default {
     'input_name': '请输入用户名',
     'input_id': '请输入ID',
     'input_email': '请输入邮箱',
-    'input_password':'请输入密码',
+    'input_password': '请输入密码',
     'special_characters_are_not_supported': '不支持特殊字符',
     'mobile_number_format_is_incorrect': '手机号码格式不正确',
     'email_format_is_incorrect': '邮箱格式不正确',
@@ -133,7 +133,7 @@ export default {
     'being_generated': '报告正在生成中...',
   },
   load_test: {
-    'operating':'操作',
+    'operating': '操作',
     'recent': '最近的测试',
     'search_by_name': '根据名称搜索',
     'project_name': '所属项目',
@@ -187,7 +187,7 @@ export default {
     'select_resource_pool': '请选择资源池',
     'resource_pool_is_null': '资源池为空',
     'download_log_file': '下载完整日志文件',
-    'pressure_prediction_chart':'压力预估图',
+    'pressure_prediction_chart': '压力预估图',
 
   },
   api_test: {
@@ -233,11 +233,19 @@ export default {
         start_with: "以...开始",
         end_with: "以...结束",
         value: "值",
-        expression: "正则表达式",
+        expression: "表达式",
         response_in_time: "响应时间在...毫秒以内",
       },
-      extract: "提取",
+      extract: {
-      extract_desc: "从响应中提取数据并将其存储在变量中。在后续请求中使用变量",
+        label: "提取",
+        select_type: "请选择类型",
+        description: "从响应中提取数据并将其存储在变量中，在后续请求中使用变量。",
+        regex: "正则",
+        variable_name: "变量名",
+        regex_expression: "正则表达式",
+        json_path_expression: "JSONPath表达式",
+        xpath_expression: "XPath表达式",
+      }
     }
   },
   api_report: {