feat(性能测试): 支持批量添加监控项

frontend/src/business/components/performance/test/components/BatchAddMonitor.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    title="添加监控"
+    :visible.sync="dialogVisible"
+    width="70%"
+    @closed="closeFunc"
+    :destroy-on-close="true"
+    v-loading="result.loading"
+  >
+    <el-alert
+      title="Notice:"
+      type="info"
+      show-icon>
+      <template v-slot:default>
+        <div v-html="$t('report.batch_add_monitor_tips')"></div>
+      </template>
+    </el-alert>
+    <div style="padding-top: 10px;">
+      <ms-code-edit :enable-format="false" mode="text"
+                    height="250px"
+                    :data.sync="parameters"
+                    theme="eclipse"
+                    :modes="['text']"
+                    ref="codeEdit"/>
+    </div>
+
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="dialogVisible = false"
+        @confirm="save"/>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
+import MsCodeEdit from "@/business/components/api/definition/components/MsCodeEdit";
+
+export default {
+  name: "BatchAddMonitor",
+  components: {MsCodeEdit, MsDialogFooter},
+  data() {
+    return {
+      result: {},
+      dialogVisible: false,
+      parameters: "",
+    };
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true;
+    },
+    save() {
+      this.dialogVisible = false;
+      this.$emit("batchSave", this.parameters);
+    },
+    closeFunc() {
+      this.dialogVisible = false;
+    },
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/performance/test/components/PerformanceAdvancedConfig.vue

@@ -181,20 +181,24 @@
 
     <el-row>
       <el-col :span="8">
-        <h3>监控集成</h3>
+        <h3>{{ $t('commons.monitor') }}</h3>
         <el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini" @click="addMonitor">
           {{ $t('commons.add') }}
         </el-button>
+        <el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini"
+                   @click="batchAddMonitor">
+          {{ $t('commons.batch_add') }}
+        </el-button>
       </el-col>
     </el-row>
     <el-row>
 
       <el-col :span="24">
-        <el-table :data="monitorParams" size="mini" class="tb-edit" align="center" border highlight-current-row>
+        <el-table :data="monitorParams" size="mini" class="tb-edit" border highlight-current-row>
           <el-table-column
             align="center"
             prop="name"
-            label="名称">
+            :label="$t('commons.name')">
           </el-table-column>
           <!--        <el-table-column-->
           <!--          align="center"-->
@@ -223,7 +227,7 @@
           <el-table-column
             align="center"
             prop="description"
-            label="描述">
+            :label="$t('commons.description')">
           </el-table-column>
           <el-table-column align="center" :label="$t('load_test.operating')">
             <template v-slot:default="{row, $index}">
@@ -240,6 +244,7 @@
     </el-row>
 
     <edit-monitor ref="monitorDialog" :testId="testId" :list.sync="monitorParams"/>
+    <batch-add-monitor ref="batchMonitorDialog" @batchSave="batchSave"/>
   </div>
 </template>
 
@@ -247,10 +252,11 @@
 import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
 import EditMonitor from "@/business/components/performance/test/components/EditMonitor";
 import {hasPermission} from "@/common/js/utils";
+import BatchAddMonitor from "@/business/components/performance/test/components/BatchAddMonitor";
 
 export default {
   name: "PerformanceAdvancedConfig",
-  components: {EditMonitor, MsTableOperatorButton},
+  components: {BatchAddMonitor, EditMonitor, MsTableOperatorButton},
   data() {
     return {
       timeout: undefined,
@@ -412,6 +418,32 @@ export default {
     addMonitor() {
       this.$refs.monitorDialog.open();
     },
+    batchAddMonitor() {
+      this.$refs.batchMonitorDialog.open();
+    },
+    batchSave(params) {
+      let targets = this._handleBatchVars(params);
+      targets.forEach(row => {
+        this.monitorParams.push(row);
+      });
+    },
+    _handleBatchVars(data) {
+      let params = data.split("\n");
+      let keyValues = [];
+      params.forEach(item => {
+        let line = item.split(/，|,/);
+        if (line.length < 3) {
+          return;
+        }
+        keyValues.push({
+          name: line[0],
+          ip: line[1],
+          port: line[2],
+          description: line[3] || '',
+        });
+      });
+      return keyValues;
+    },
     modifyMonitor(row, index) {
       this.$refs.monitorDialog.open(row, index);
     },

frontend/src/i18n/en-US.js

@@ -537,6 +537,7 @@ export default {
     test_plan_report: 'Test Plan Report',
     recent: 'My recent Report',
     search_by_name: 'Search by Name',
+    batch_add_monitor_tips: 'Format: name, IP, Port, description<br/>such as: item 1, 192.168.1.52, 9100, test',
     test_name: 'Test',
     test_overview: 'Test Overview',
     test_request_statistics: 'Test Request Statistics',

frontend/src/i18n/zh-CN.js

@@ -536,6 +536,7 @@ export default {
     test_plan_report: '测试计划报告',
     recent: '我最近的报告',
     search_by_name: '根据名称搜索',
+    batch_add_monitor_tips: '格式：名称,IP,Port,描述<br/>如：项目1,192.168.1.52,9100,测试',
     test_name: '所属测试',
     test_overview: '测试概览',
     test_request_statistics: '请求统计',

frontend/src/i18n/zh-TW.js

@@ -536,6 +536,7 @@ export default {
     test_plan_report: '測試計劃報告',
     recent: '我最近的報告',
     search_by_name: '根據名稱搜索',
+    batch_add_monitor_tips: '格式：名稱,IP,Port,描述<br/>如：項目1,192.168.1.52,9100,測試',
     test_name: '所屬測試',
     test_overview: '測試概覽',
     test_request_statistics: '請求統計',