feat(接口测试): TCPSampler 增加环境配置和场景配置

2020-10-12 17:23:18 +08:00 · 2020-10-12 17:23:18 +08:00 · f2bf1e0d21
parent 43c05ee5fd
commit f2bf1e0d21
9 changed files with 114 additions and 79 deletions
--- a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
+++ b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
@ -49,9 +49,9 @@
        <div class="dubbo-config-title">Consumer & Service</div>
        <ms-dubbo-consumer-service :consumer="scenario.dubboConfig.consumerAndService" :is-read-only="isReadOnly"/>
      </el-tab-pane>
-<!--      <el-tab-pane :label="$t('api_test.environment.tcp_config')" name="tcp">-->
-<!--        <ms-tcp-config :config="scenario.tcpConfig" :is-read-only="isReadOnly"/>-->
-<!--      </el-tab-pane>-->
+      <el-tab-pane :label="$t('api_test.environment.tcp_config')" name="tcp">
+        <ms-tcp-config :config="scenario.tcpConfig" :is-read-only="isReadOnly"/>
+      </el-tab-pane>
    </el-tabs>

    <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
--- a/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue
+++ b/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue
@ -20,6 +20,9 @@
        <el-tab-pane :label="$t('api_test.environment.database_config')" name="sql">
          <ms-database-config :configs="environment.config.databaseConfigs"/>
        </el-tab-pane>
+        <el-tab-pane :label="$t('api_test.environment.tcp_config')" name="tcp">
+          <ms-tcp-config :config="environment.config.tcpConfig"/>
+        </el-tab-pane>
      </el-tabs>

      <div class="environment-footer">
@ -35,16 +38,18 @@
  import MsApiScenarioVariables from "../ApiScenarioVariables";
  import MsApiKeyValue from "../ApiKeyValue";
  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
-  import {REQUEST_HEADERS} from "../../../../../../common/js/constants";
+  import {REQUEST_HEADERS} from "@/common/js/constants";
  import {Environment} from "../../model/EnvironmentModel";
  import MsApiHostTable from "../ApiHostTable";
  import MsDatabaseConfig from "../request/database/DatabaseConfig";
  import MsEnvironmentHttpConfig from "./EnvironmentHttpConfig";
  import MsEnvironmentCommonConfig from "./EnvironmentCommonConfig";
+  import MsTcpConfig from "@/business/components/api/test/components/request/tcp/TcpConfig";

  export default {
    name: "EnvironmentEdit",
    components: {
+      MsTcpConfig,
      MsEnvironmentCommonConfig,
      MsEnvironmentHttpConfig,
      MsDatabaseConfig, MsApiHostTable, MsDialogFooter, MsApiKeyValue, MsApiScenarioVariables},
--- a/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
+++ b/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
@ -11,31 +11,44 @@
      </el-select>
    </el-form-item>

-    <el-row type="flex" justify="space-between">
-      <el-col :lg="8">
+    <el-row :gutter="10">
+      <el-col :span="16">
        <el-form-item :label="$t('api_test.request.tcp.server')" prop="server">
          <el-input v-model="request.server" maxlength="300" show-word-limit/>
        </el-form-item>
      </el-col>
-      <el-col :lg="6">
+      <el-col :span="8">
        <el-form-item :label="$t('api_test.request.tcp.port')" prop="port" label-width="60px">
          <el-input-number v-model="request.port" controls-position="right" :min="0" :max="65535"/>
        </el-form-item>
      </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout" label-width="80px">
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout">
          <el-input-number v-model="request.ctimeout" controls-position="right" :min="0"/>
        </el-form-item>
      </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout" label-width="80px">
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout">
          <el-input-number v-model="request.timeout" controls-position="right" :min="0"/>
        </el-form-item>
      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
+          <el-input v-model="request.soLinger"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
+          <el-input v-model="request.eolByte"/>
+        </el-form-item>
+      </el-col>
    </el-row>

-    <el-row type="flex" justify="space-between">
-      <el-col>
+    <el-row :gutter="10">
+      <el-col :span="6">
        <el-form-item>
          <el-switch
            v-model="request.useEnvironment"
@ -44,40 +57,30 @@
          </el-switch>
        </el-form-item>
      </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="6">
+        <el-form-item>
          <el-switch
            v-model="request.reUseConnection"
            :active-text="$t('api_test.request.tcp.re_use_connection')">
          </el-switch>
        </el-form-item>
      </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="6">
+        <el-form-item>
          <el-switch
            v-model="request.closeConnection"
            :active-text="$t('api_test.request.tcp.close_connection')">
          </el-switch>
        </el-form-item>
      </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="6">
+        <el-form-item>
          <el-switch
            v-model="request.nodelay"
            :active-text="$t('api_test.request.tcp.no_delay')">
          </el-switch>
        </el-form-item>
      </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
-          <el-input v-model="request.soLinger"/>
-        </el-form-item>
-      </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
-          <el-input v-model="request.eolByte"/>
-        </el-form-item>
-      </el-col>
    </el-row>

    <el-form-item :label="$t('api_test.request.tcp.request')" prop="request">
--- a/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue
+++ b/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue
@ -1,5 +1,6 @@
 <template>
-  <el-form class="tcp" :model="config" :rules="rules" ref="request" label-width="auto" :disabled="isReadOnly">
+  <el-form class="tcp" :model="config" :rules="rules" ref="config" label-width="120px" :disabled="isReadOnly"
+           size="small">

    <el-form-item label="TCPClient" prop="classname">
      <el-select v-model="config.classname" style="width: 100%">
@ -7,64 +8,67 @@
      </el-select>
    </el-form-item>

-    <el-row type="flex" justify="space-between">
-      <el-col :lg="8">
+    <el-row :gutter="10">
+      <el-col :span="16">
        <el-form-item :label="$t('api_test.request.tcp.server')" prop="server">
          <el-input v-model="config.server" maxlength="300" show-word-limit/>
        </el-form-item>
      </el-col>
-      <el-col :lg="6">
+      <el-col :span="8">
        <el-form-item :label="$t('api_test.request.tcp.port')" prop="port" label-width="60px">
-          <el-input-number v-model="config.port" controls-position="right" :min="0" :max="65535"/>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout" label-width="80px">
-          <el-input-number v-model="config.ctimeout" controls-position="right" :min="0"/>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout" label-width="80px">
-          <el-input-number v-model="config.timeout" controls-position="right" :min="0"/>
+          <el-input-number v-model="config.port" controls-position="right" :min="0" :max="65535" :controls="false"/>
        </el-form-item>
      </el-col>
    </el-row>

-    <el-row type="flex" justify="space-between">
-      <el-col>
-        <el-form-item label-width="0">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout">
+          <el-input-number v-model="config.ctimeout" controls-position="right" :min="0" :step="1000" :controls="false"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout">
+          <el-input-number v-model="config.timeout" controls-position="right" :min="0" :step="1000" :controls="false"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
+          <el-input v-model="config.soLinger"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
+          <el-input v-model="config.eolByte"/>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-form-item>
          <el-switch
            v-model="config.reUseConnection"
            :active-text="$t('api_test.request.tcp.re_use_connection')">
          </el-switch>
        </el-form-item>
      </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="8">
+        <el-form-item>
          <el-switch
            v-model="config.closeConnection"
            :active-text="$t('api_test.request.tcp.close_connection')">
          </el-switch>
        </el-form-item>
      </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="8">
+        <el-form-item>
          <el-switch
            v-model="config.nodelay"
            :active-text="$t('api_test.request.tcp.no_delay')">
          </el-switch>
        </el-form-item>
      </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
-          <el-input v-model="config.soLinger"/>
-        </el-form-item>
-      </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
-          <el-input v-model="config.eolByte"/>
-        </el-form-item>
-      </el-col>
    </el-row>

    <el-row :gutter="10">
@ -90,16 +94,15 @@ export default {
  name: "MsTcpConfig",
  props: {
    config: TCPConfig,
-    rules: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
  },
  data() {
    return {
      classes: TCPConfig.CLASSES,
+      rules: {}
    }
  },
 }
--- a/frontend/src/business/components/api/test/model/EnvironmentModel.js
+++ b/frontend/src/business/components/api/test/model/EnvironmentModel.js
@ -1,4 +1,5 @@
 import {BaseConfig, DatabaseConfig, KeyValue} from "./ScenarioModel";
+import {TCPConfig} from "@/business/components/api/test/model/ScenarioModel";

 export class Environment extends BaseConfig {
  constructor(options = {}) {
@ -26,14 +27,17 @@ export class Config extends BaseConfig {
    this.commonConfig = undefined;
    this.httpConfig = undefined;
    this.databaseConfigs = [];
+    this.tcpConfig = undefined;

    this.set(options);
    this.sets({databaseConfigs: DatabaseConfig}, options);
  }
+
  initOptions(options = {}) {
    this.commonConfig = new CommonConfig(options.commonConfig);
    this.httpConfig = new HttpConfig(options.httpConfig);
    options.databaseConfigs = options.databaseConfigs || [];
+    options.tcpConfig = new TCPConfig(options.tcpConfig);
    return options;
  }
 }
@ -91,7 +95,6 @@ export class Host extends BaseConfig {
 }


-
 /* ---------- Functions ------- */

 export function compatibleWithEnvironment(environment) {
--- a/frontend/src/business/components/api/test/model/ScenarioModel.js
+++ b/frontend/src/business/components/api/test/model/ScenarioModel.js
@ -111,12 +111,16 @@ export const EXTRACT_TYPE = {

 export class BaseConfig {

-  set(options) {
+  set(options, notUndefined) {
    options = this.initOptions(options)
    for (let name in options) {
      if (options.hasOwnProperty(name)) {
        if (!(this[name] instanceof Array)) {
-          this[name] = options[name];
+          if (notUndefined === true) {
+            this[name] = options[name] === undefined ? this[name] : options[name];
+          } else {
+            this[name] = options[name];
+          }
        }
      }
    }
@ -219,6 +223,7 @@ export class Scenario extends BaseConfig {
    this.enableCookieShare = false;
    this.enable = true;
    this.databaseConfigs = [];
+    this.tcpConfig = undefined;

    this.set(options);
    this.sets({
@ -234,6 +239,7 @@ export class Scenario extends BaseConfig {
    options.requests = options.requests || [new RequestFactory()];
    options.databaseConfigs = options.databaseConfigs || [];
    options.dubboConfig = new DubboConfig(options.dubboConfig);
+    options.tcpConfig = new TCPConfig(options.tcpConfig);
    return options;
  }

@ -512,11 +518,11 @@ export class SqlRequest extends Request {
  }
 }

-export class TCPConfig extends Request {
+export class TCPConfig extends BaseConfig {
  static CLASSES = ["TCPClientImpl", "BinaryTCPClientImpl", "LengthPrefixedBinaryTCPClientImpl"]

  constructor(options = {}) {
-    super(RequestFactory.TYPES.TCP, options);
+    super();
    this.classname = options.classname || TCPConfig.CLASSES[0];
    this.server = options.server;
    this.port = options.port;
@ -532,18 +538,17 @@ export class TCPConfig extends Request {
    this.username = options.username;
    this.password = options.password;
  }
-
-  isValid() {
-    return !!this.classname || !!this.server;
-  }
 }

-export class TCPRequest extends TCPConfig {
+export class TCPRequest extends Request {
  constructor(options = {}) {
-    super(options);
+    super(RequestFactory.TYPES.TCP, options);
    this.useEnvironment = options.useEnvironment;
    this.debugReport = undefined;

+    //设置TCPConfig的属性
+    this.set(new TCPConfig(options));
+
    this.request = options.request;
  }

@ -1040,6 +1045,19 @@ class JMXDubboRequest {
  }
 }

+class JMXTCPRequest {
+  constructor(request, scenario) {
+    let obj = request.clone();
+    if (request.useEnvironment) {
+      obj.set(scenario.environment.config.tcpConfig, true);
+      return obj;
+    }
+    obj.set(scenario.tcpConfig, true);
+
+    return obj;
+  }
+}
+
 class JMeterTestPlan extends Element {
  constructor() {
    super('jmeterTestPlan', {
@ -1098,7 +1116,7 @@ class JMXGenerator {
              request.dataSource = scenario.databaseConfigMap.get(request.dataSource);
              sampler = new JDBCSampler(request.name || "", request);
            } else if (request instanceof TCPRequest) {
-              sampler = new TCPSampler(request.name || "", request);
+              sampler = new TCPSampler(request.name || "", new JMXTCPRequest(request, scenario));
            }

            this.addDNSCacheManager(sampler, scenario.environment, request.useEnvironment);
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@ -436,6 +436,7 @@ export default {
      common_config: "Common Config",
      http_config: "HTTP Config",
      database_config: "Database Config",
+      tcp_config: "TCP Config",
    },
    scenario: {
      scenario: "Scenario",
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@ -437,6 +437,7 @@ export default {
      common_config: "通用配置",
      http_config: "HTTP配置",
      database_config: "数据库配置",
+      tcp_config: "TCP配置",
    },
    scenario: {
      scenario: "场景",
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@ -437,6 +437,7 @@ export default {
      common_config: "通用配置",
      http_config: "HTTP配置",
      database_config: "數據庫配置",
+      tcp_config: "TCP配置",
    },
    scenario: {
      scenario: "場景",