增加提取功能的页面

2020-05-12 11:25:04 +08:00 · 2020-05-12 11:25:04 +08:00 · 796f00f403
parent 3c10555c9e
commit 796f00f403
14 changed files with 346 additions and 27 deletions
--- a/frontend/src/business/components/api/test/components/ApiKeyValue.vue
+++ b/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 {
--- a/frontend/src/business/components/api/test/components/ApiRequestForm.vue
+++ b/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">
-        TODO
+      <el-tab-pane :label="$t('api_test.request.extract.label')" name="extract">
+        <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
    },
--- a/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
+++ b/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]);
--- a/frontend/src/business/components/api/test/components/assertion/ApiAssertionRegex.vue
+++ b/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",
--- a/frontend/src/business/components/api/test/components/assertion/ApiAssertionResponseTime.vue
+++ b/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",
--- a/frontend/src/business/components/api/test/components/assertion/ApiAssertionText.vue
+++ b/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",
--- a/frontend/src/business/components/api/test/components/assertion/ApiAssertions.vue
+++ b/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 {
--- a/frontend/src/business/components/api/test/components/assertion/ApiAssertionsEdit.vue
+++ b/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",
--- a/frontend/src/business/components/api/test/components/extract/ApiExtract.vue
+++ b/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>
--- a/frontend/src/business/components/api/test/components/extract/ApiExtractCommon.vue
+++ b/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>
--- a/frontend/src/business/components/api/test/components/extract/ApiExtractEdit.vue
+++ b/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>
--- a/frontend/src/business/components/api/test/model/ScenarioModel.js
+++ b/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,
--- a/frontend/src/i18n/en-US.js
+++ b/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_subject: "Please select a request subject",
-        select_condition: "Please select a condition",
+        select_type: "Choose type",
+        select_subject: "Subject",
+        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_desc: "Extract data from the response and store it in variables. Use the variables in subsequent requests.",
+      extract: {
+        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: {
--- a/frontend/src/i18n/zh-CN.js
+++ b/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_desc: "从响应中提取数据并将其存储在变量中。在后续请求中使用变量",
+      extract: {
+        label: "提取",
+        select_type: "请选择类型",
+        description: "从响应中提取数据并将其存储在变量中，在后续请求中使用变量。",
+        regex: "正则",
+        variable_name: "变量名",
+        regex_expression: "正则表达式",
+        json_path_expression: "JSONPath表达式",
+        xpath_expression: "XPath表达式",
+      }
    }
  },
  api_report: {