高级设置

frontend/src/i18n/en-US.js

@@ -84,6 +84,7 @@ export default {
     'ramp_up_time_within': 'In',
     'ramp_up_time_minutes': 'minutes, separate',
     'ramp_up_time_times': 'add concurrent users',
+    'advanced_config_error': 'Advanced configuration verification failed',
   },
   i18n: {
     'home': 'Home',

frontend/src/i18n/zh-CN.js

@@ -84,6 +84,7 @@ export default {
     'ramp_up_time_within': '在',
     'ramp_up_time_minutes': '分钟内，分',
     'ramp_up_time_times': '次增加并发用户',
+    'advanced_config_error': '高级配置校验失败',
   },
   i18n: {
     'home': '首页',

frontend/src/performance/App.vue

@@ -1,7 +1,7 @@
 <template>
   <el-col v-if="auth">
     <el-row id="header-top" type="flex" justify="space-between" align="middle">
-      <el-col :span="4">
+      <el-col :span="1">
         <a class="logo"/>
       </el-col>
       <el-col :span="6">

frontend/src/performance/components/testPlan/EditTestPlan.vue

@@ -23,16 +23,15 @@
 
         <el-tabs class="testplan-config" v-model="active" type="border-card" :stretch="true">
           <el-tab-pane :label="$t('load_test.basic_config')">
-            <ms-test-plan-basic-config :test-plan="testPlan"/>
+            <ms-test-plan-basic-config :test-plan="testPlan" ref="basicConfig"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('load_test.pressure_config')">
-            <ms-test-plan-pressure-config :test-plan="testPlan"/>
+            <ms-test-plan-pressure-config :test-plan="testPlan" ref="pressureConfig"/>
           </el-tab-pane>
-          <el-tab-pane :label="$t('load_test.advanced_config')">
+          <el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
-            <ms-test-plan-advanced-config/>
+            <ms-test-plan-advanced-config ref="advancedConfig"/>
           </el-tab-pane>
         </el-tabs>
-
       </el-card>
     </div>
   </div>
@@ -201,7 +200,16 @@
           return false;
         }
 
+        if (!this.$refs.advancedConfig.validConfig()) {
+          this.$message({
+            message: this.$t('load_test.advanced_config_error'),
+            type: 'error'
+          });
+          return false;
+        }
+
         /// todo: 其他校验
+
         return true;
       }
     }
@@ -235,4 +243,9 @@
   .edit-testplan-container .input-with-select .el-input-group__prepend {
     background-color: #fff;
   }
+
+  .advanced-config {
+    height: calc(100vh - 280px);
+    overflow: auto;
+  }
 </style>

frontend/src/performance/components/testPlan/components/AdvancedConfig.vue

@@ -1,11 +1,187 @@
-<style>
-
-</style>
-
 <template>
-  <div>
+  <div class="el-tab-pane-box">
-    我是第三个子组件
+
-    <el-button type="text" size="small">修改TestPlan值</el-button>
+    <el-row type="flex" justify="start">
+      <el-col :span="8">
+        <h3>域名绑定</h3>
+      </el-col>
+      <el-col :span="8">
+        <el-button type="primary" plain @click="add('domains')">添加</el-button>
+      </el-col>
+    </el-row>
+    <!-- -->
+    <el-row>
+      <el-table :data="domains">
+        <el-table-column
+          label="域名"
+          show-overflow-tooltip>
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-input v-model="row.domain" class="edit-input" size="mini"/>
+            </template>
+            <span v-else>{{ row.domain }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="是否启用"
+          show-overflow-tooltip>
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-switch
+                size="mini"
+                v-model="row.enable"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </template>
+            <span v-else>{{ row.enable }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="IP地址"
+          show-overflow-tooltip>
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-input v-model="row.ip" class="edit-input" size="mini"/>
+            </template>
+            <span v-else>{{ row.ip }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="Actions">
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-button
+                class="cancel-btn"
+                size="mini"
+                icon="el-icon-refresh"
+                type="warning"
+                circle
+                @click="cancelEdit(row)">
+              </el-button>
+              <el-button
+                type="success"
+                size="mini"
+                icon="el-icon-circle-check"
+                circle
+                @click="confirmEdit(row)">
+              </el-button>
+            </template>
+            <el-button
+              v-else
+              type="primary"
+              size="mini"
+              icon="el-icon-edit"
+              circle
+              @click="edit(row)">
+            </el-button>
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              circle
+              @click="del(row, 'domains', 'domain')">
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+    </el-row>
+
+    <el-row>
+      <el-col :span="8">
+        <h3>自定义属性</h3>
+      </el-col>
+      <el-col :span="8">
+        <el-button type="primary" plain @click="add('params')">添加</el-button>
+      </el-col>
+    </el-row>
+    <!-- -->
+    <el-row>
+      <el-table :data="params">
+        <el-table-column
+          label="属性名"
+          show-overflow-tooltip>
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-input v-model="row.name" class="edit-input" size="mini"/>
+            </template>
+            <span v-else>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="是否启用"
+          show-overflow-tooltip>
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-switch
+                size="mini"
+                v-model="row.enable"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </template>
+            <span v-else>{{ row.enable }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="属性值"
+          show-overflow-tooltip>
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-input v-model="row.value" class="edit-input" size="mini"/>
+            </template>
+            <span v-else>{{ row.value }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="Actions">
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-button
+                class="cancel-btn"
+                size="mini"
+                icon="el-icon-refresh"
+                type="warning"
+                circle
+                @click="cancelEdit(row)">
+              </el-button>
+              <el-button
+                type="success"
+                size="mini"
+                icon="el-icon-circle-check"
+                circle
+                @click="confirmEdit(row)">
+              </el-button>
+            </template>
+            <el-button
+              v-else
+              type="primary"
+              size="mini"
+              icon="el-icon-edit"
+              circle
+              @click="edit(row)">
+            </el-button>
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              circle
+              @click="del(row, 'params', 'name')">
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+
+    <el-row>
+      <el-col :span="8">
+        建立连接超时时间 10 ms
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8">
+        自定义 HTTP 响应成功状态码 302
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -14,9 +190,93 @@
     name: "MsTestPlanAdvancedConfig",
     data() {
       return {
+        domains: [
+          {domain: 'baidu.com0', enable: true, ip: '127.0.0.1', edit: false},
+          {domain: 'baidu.com1', enable: true, ip: '127.0.0.1', edit: false},
+          {domain: 'baidu.com2', enable: true, ip: '127.0.0.1', edit: false},
+          {domain: 'baidu.com3', enable: true, ip: '127.0.0.1', edit: false},
+        ],
+        params: [
+          {name: 'param1', value: '13134', enable: true, edit: false},
+          {name: 'param2', value: '13134', enable: true, edit: false},
+          {name: 'param3', value: '13134', enable: true, edit: false},
+          {name: 'param4', value: '13134', enable: true, edit: false},
+        ]
       }
     },
     methods: {
+      revertObject(row) {
+        Object.keys(row).forEach(function (key) {
+          row[key] = row[key + 'Origin'];
+        });
+      },
+      saveOriginObject(row) {
+        Object.keys(row).forEach(function (key) {
+          row[key + 'Origin'] = row[key];
+        });
+      },
+      add(dataName) {
+        if (dataName === 'domains') {
+          this[dataName].push({
+            domain: '',
+            enable: true,
+            ip: '',
+            edit: false,
+          });
+        }
+        if (dataName === 'params') {
+          this[dataName].push({
+            name: '',
+            enable: true,
+            value: '',
+            edit: false,
+          });
+        }
+      },
+      edit(row) {
+        this.saveOriginObject(row);
+        row.edit = !row.edit
+      },
+      del(row, dataName, id) {
+        this[dataName] = this[dataName].filter((d) => d[id] !== row[id]);
+      },
+      cancelEdit(row) {
+        row.edit = false;
+        // rollback changes
+        this.revertObject(row);
+        this.$message({
+          message: 'The row has been restored to the original value',
+          type: 'warning'
+        })
+      },
+      confirmEdit(row) {
+        row.edit = false;
+        this.saveOriginObject(row);
+        this.$message({
+          message: 'The row has been edited',
+          type: 'success'
+        })
+      },
+      validConfig() {
+        return this.domains.filter(d => !d.domain || !d.ip).length === 0
+          &&
+          this.params.filter(d => !d.name || !d.value).length === 0;
+      },
     }
   }
 </script>
+
+<style scoped>
+  .el-row {
+    margin-bottom: 10px;
+  }
+
+  .edit-input {
+    padding-right: 100px;
+  }
+
+  .container-tab >>> .el-tabs__content {
+    flex-grow: 1;
+    overflow-y: scroll;
+  }
+</style>

frontend/src/performance/components/testPlan/components/PressureConfig.vue

@@ -127,7 +127,7 @@
   }
 </script>
 
-<style>
+<style scoped>
   .pressure-config-container .el-input {
     width: 130px;
   }