refactor(环境组): 环境列域名显示优化

--story=1004261 --user=lyh 环境组不显示TCP域名优化
https://www.tapd.cn/55049933/s/1077414

backend/src/main/java/io/metersphere/api/dto/scenario/HttpConfig.java

@@ -29,6 +29,7 @@ public class HttpConfig {
     private MsJSR223PostProcessor postProcessor;
     private GlobalScriptConfig globalScriptConfig;
     private ApiModuleMapper apiModuleMapper;
+    private String description;
 
 
     public HttpConfig initHttpConfig(HttpConfigCondition configCondition) {

backend/src/main/java/io/metersphere/api/dto/scenario/TCPConfig.java

@@ -16,4 +16,5 @@ public class TCPConfig {
     private String eolByte = "";
     private String username = "";
     private String password = "";
+    private String description = "";
 }

frontend/src/business/components/api/test/components/environment/EnvironmentHttpConfig.vue

@@ -3,15 +3,23 @@
   <el-form :model="condition" :rules="rules" ref="httpConfig" class="ms-el-form-item__content" :disabled="isReadOnly">
     <div class="ms-border">
       <el-form-item prop="socket">
-        <span class="ms-env-span">{{ $t('api_test.environment.socket') }}</span>
+        <el-row type="flex" justify="space-between">
-        <el-input v-model="condition.socket" style="width: 80%" :placeholder="$t('api_test.request.url_description')" clearable size="small">
+          <el-col :span="16">
-          <template slot="prepend">
+            <span class="ms-env-span" style="line-height: 30px;">{{ $t('api_test.environment.socket') }}</span>
-            <el-select v-model="condition.protocol" class="request-protocol-select" size="small">
+            <el-input v-model="condition.socket" style="width: 85%" :placeholder="$t('api_test.request.url_description')" clearable size="small">
-              <el-option label="http://" value="http"/>
+              <template slot="prepend">
-              <el-option label="https://" value="https"/>
+                <el-select v-model="condition.protocol" class="request-protocol-select" size="small">
-            </el-select>
+                  <el-option label="http://" value="http"/>
-          </template>
+                  <el-option label="https://" value="https"/>
-        </el-input>
+                </el-select>
+              </template>
+            </el-input>
+          </el-col>
+          <el-col :span="8">
+            <span style="margin-right: 12px;">描述</span>
+            <el-input v-model="condition.description" maxlength="200" :show-word-limit="true" size="small" style="width: 85%;"/>
+          </el-col>
+        </el-row>
       </el-form-item>
       <el-form-item prop="enable">
         <span class="ms-env-span">{{ $t('api_test.environment.condition_enable') }}</span>
@@ -67,6 +75,11 @@
             <span>{{ row.time | timestampFormatDate }}</span>
           </template>
         </el-table-column>
+        <el-table-column prop="description" show-overflow-tooltip min-width="120px" :label="'描述'">
+          <template v-slot:default="{row}">
+            {{ row.description }}
+          </template>
+        </el-table-column>
         <el-table-column :label="$t('commons.operating')" width="100px">
           <template v-slot:default="{row}">
             <div>
@@ -146,6 +159,7 @@ export default {
         this.condition.domain = this.httpConfig.domain;
         this.condition.time = new Date().getTime();
         this.condition.headers = this.httpConfig.headers;
+        this.condition.description = this.httpConfig.description;
         this.add();
       }
       this.condition = {id: undefined, type: "NONE", details: [new KeyValue({name: "", value: "contains"})], protocol: "http", socket: "", domain: "", port: 0, headers: [new KeyValue()]};
@@ -195,6 +209,7 @@ export default {
         this.httpConfig.socket = row.socket;
         this.httpConfig.protocol = row.protocol;
         this.httpConfig.port = row.port;
+        this.httpConfig.description = row.description;
         this.condition = row;
         if (!this.condition.headers) {
           this.condition.headers = [new KeyValue()];
@@ -298,7 +313,7 @@ export default {
       this.validateSocket();
       let obj = {
         id: getUUID(), type: this.condition.type, socket: this.condition.socket, protocol: this.condition.protocol, headers: this.condition.headers,
-        domain: this.condition.domain, port: this.condition.port, time: new Date().getTime()
+        domain: this.condition.domain, port: this.condition.port, time: new Date().getTime(), description: this.condition.description
       };
       if (this.condition.type === "PATH") {
         obj.details = [JSON.parse(JSON.stringify(this.pathDetails))];

frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue

@@ -28,7 +28,7 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout">
+        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout" label-width="120px">
           <el-input-number v-model="config.timeout" controls-position="right" :min="0" :step="1000" :controls="false"/>
         </el-form-item>
       </el-col>
@@ -41,15 +41,23 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
+        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte" label-width="120px">
           <el-input v-model="config.eolByte"/>
         </el-form-item>
       </el-col>
     </el-row>
 
+    <el-row :gutter="10">
+      <el-col :span="24">
+        <el-form-item :label="'描述'" prop="description">
+          <el-input v-model="config.description" maxlength="200" :show-word-limit="true" size="small"/>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
     <el-row :gutter="10">
       <el-col :span="8">
-        <el-form-item :label="$t('api_test.request.tcp.re_use_connection')">
+        <el-form-item :label="$t('api_test.request.tcp.re_use_connection')" label-width="135px">
           <el-checkbox v-model="config.reUseConnection"/>
         </el-form-item>
       </el-col>

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

@@ -85,6 +85,7 @@ export class HttpConfig extends BaseConfig {
     this.port = undefined;
     this.conditions = [];
     this.isMock = false;
+    this.description = "";
     this.set(options);
     this.sets({headers: KeyValue}, options);
     this.sets({conditions: KeyValue}, options);
@@ -131,6 +132,7 @@ export function compatibleWithEnvironment(environment) {
     config.httpConfig.protocol = environment.protocol;
     config.httpConfig.domain = environment.domain;
     config.httpConfig.socket = environment.socket;
+    config.httpConfig.description = environment.description;
     environment.config = JSON.stringify(config);
   }
 }

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

@@ -569,6 +569,7 @@ export class TCPConfig extends BaseConfig {
 
     this.username = options.username;
     this.password = options.password;
+    this.description = options.description;
   }
 }
 

frontend/src/business/components/project/menu/EnvironmentList.vue

@@ -68,24 +68,35 @@
           <el-table :data="conditions">
             <el-table-column prop="socket" :label="$t('load_test.domain')" show-overflow-tooltip width="180">
               <template v-slot:default="{row}">
-                {{ getUrl(row) }}
+                {{ row.conditionType ? row.server : getUrl(row) }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="'类型'" show-overflow-tooltip
+                             min-width="100px">
+              <template v-slot:default="{row}">
+                <el-tag type="info" size="mini">{{ row.conditionType ? row.conditionType : "HTTP" }}</el-tag>
               </template>
             </el-table-column>
             <el-table-column prop="type" :label="$t('api_test.environment.condition_enable')" show-overflow-tooltip
                              min-width="100px">
               <template v-slot:default="{row}">
-                {{ getName(row) }}
+                {{ row.conditionType ? "-" : getName(row) }}
               </template>
             </el-table-column>
             <el-table-column prop="details" show-overflow-tooltip min-width="120px" :label="$t('api_test.value')">
               <template v-slot:default="{row}">
-                {{ getDetails(row) }}
+                {{ row.conditionType ? "-" : getDetails(row) }}
               </template>
             </el-table-column>
-            <el-table-column prop="createTime" show-overflow-tooltip min-width="120px"
+            <el-table-column prop="description" show-overflow-tooltip min-width="120px" :label="'描述'">
-                             :label="$t('commons.create_time')">
               <template v-slot:default="{row}">
-                <span>{{ row.time | timestampFormatDate }}</span>
+                <span>{{ row.description ? row.description : "-" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" show-overflow-tooltip min-width="120px" :label="$t('commons.create_time')">
+              <template v-slot:default="{row}">
+                <span v-if="!row.conditionType">{{ row.time | timestampFormatDate }}</span>
+                <span v-else>-</span>
               </template>
             </el-table-column>
           </el-table>
@@ -164,6 +175,14 @@ export default {
     showInfo(row) {
       const config = JSON.parse(row.config);
       this.conditions = config.httpConfig.conditions;
+      if (config.tcpConfig && config.tcpConfig.server) {
+        let condition = {
+          conditionType: 'TCP',
+          server: config.tcpConfig.server,
+          description: config.tcpConfig.description
+        }
+        this.conditions.push(condition);
+      }
       this.domainVisible = true;
     },
     getName(row) {
@@ -341,12 +360,17 @@ export default {
           return "";
         } else {
           if (config.httpConfig.conditions.length === 1) {
+            if (config.tcpConfig && config.tcpConfig.server) {
+              return "SHOW_INFO";
+            }
             let obj = config.httpConfig.conditions[0];
             if (obj.protocol && obj.domain) {
               return obj.protocol + "://" + obj.domain;
             }
           } else if (config.httpConfig.conditions.length > 1) {
             return "SHOW_INFO";
+          } else if (config.tcpConfig && config.tcpConfig.server) {
+            return "SHOW_INFO"; // 页面上该字段只要显示域名数据就表示该域名是HTTP类型.如果只有TCP类型则弹窗显示以区分域名类型.
           } else {
             return "";
           }

frontend/src/business/components/settings/workspace/environment/EnvironmentGroupRow.vue

@@ -35,8 +35,9 @@
             </el-col>
 
             <el-col :span="5">
-              <el-input prop="description" show-overflow-tooltip placeholder="备注" maxlength="100" v-model="item.description"
+              <el-input prop="description" show-overflow-tooltip placeholder="描述" maxlength="100"
-                        show-word-limit :size="itemSize" :disabled="rowReadOnly"/>
+                        v-model="item.domainDescription"
+                        show-word-limit :size="itemSize" :disabled="true"/>
             </el-col>
 
             <el-col :span="3">
@@ -52,30 +53,42 @@
         <el-table :data="conditions">
           <el-table-column prop="socket" :label="$t('load_test.domain')" show-overflow-tooltip width="180">
             <template v-slot:default="{row}">
-              {{ getUrl(row) }}
+              {{ row.conditionType ? row.server : getUrl(row) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="'类型'" show-overflow-tooltip
+                           min-width="100px">
+            <template v-slot:default="{row}">
+              <el-tag type="info" size="mini">{{ row.conditionType ? row.conditionType : "HTTP" }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column prop="type" :label="$t('api_test.environment.condition_enable')" show-overflow-tooltip
                            min-width="100px">
             <template v-slot:default="{row}">
-              {{ getName(row) }}
+              {{ row.conditionType ? "-" : getName(row) }}
             </template>
           </el-table-column>
           <el-table-column prop="details" show-overflow-tooltip min-width="120px" :label="$t('api_test.value')">
             <template v-slot:default="{row}">
-              {{ getDetails(row) }}
+              {{ row.conditionType ? "-" : getDetails(row) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="description" show-overflow-tooltip min-width="120px" :label="'描述'">
+            <template v-slot:default="{row}">
+              <span>{{ row.description ? row.description : "-" }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="createTime" show-overflow-tooltip min-width="120px" :label="$t('commons.create_time')">
             <template v-slot:default="{row}">
-              <span>{{ row.time | timestampFormatDate }}</span>
+              <span v-if="!row.conditionType">{{ row.time | timestampFormatDate }}</span>
+              <span v-else>-</span>
             </template>
           </el-table-column>
         </el-table>
         <span slot="footer" class="dialog-footer">
-        <el-button @click="domainVisible = false" size="mini">{{ $t('commons.cancel') }}</el-button>
+    <el-button @click="domainVisible = false" size="mini">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="domainVisible = false" size="mini">{{ $t('commons.confirm') }}</el-button>
+    <el-button type="primary" @click="domainVisible = false" size="mini">{{ $t('commons.confirm') }}</el-button>
-      </span>
+  </span>
       </el-dialog>
     </div>
   </div>
@@ -156,10 +169,12 @@ export default {
       // 环境改变时初始化判断状态
       this.$set(item, "moreDomain", false);
       this.$set(item, "domainName", '');
+      this.$set(item, "domainDescription", '');
       let environments = item.environments;
       let index = environments.findIndex(e => e.id === item.environmentId);
       if (index === -1) {
         this.$set(item, "domainName", '');
+        this.$set(item, "domainDescription", '');
         return;
       }
       let environment = environments[index].config;
@@ -169,25 +184,36 @@ export default {
           if (config.httpConfig.protocol && config.httpConfig.domain) {
             let domain = config.httpConfig.protocol + "://" + config.httpConfig.domain;
             this.$set(item, "domainName", domain);
+            this.$set(item, "domainDescription", config.httpConfig.description ? config.httpConfig.description : "");
             return;
           }
         } else {
           if (config.httpConfig.conditions.length === 1) {
+            if (config.tcpConfig && config.tcpConfig.server) {
+              this.$set(item, "moreDomain", true);
+              return;
+            }
             let obj = config.httpConfig.conditions[0];
             if (obj.protocol && obj.domain) {
               this.$set(item, "domainName", obj.protocol + "://" + obj.domain);
+              this.$set(item, "domainDescription", obj.description ? obj.description : "");
               return;
             }
           } else if (config.httpConfig.conditions.length > 1) {
             this.$set(item, "moreDomain", true);
             return;
+          } else if (config.tcpConfig && config.tcpConfig.server) {
+            this.$set(item, "moreDomain", true);
+            return;
           }
         }
       } else {
         this.$set(item, "domainName", environment.protocol + '://' + environment.domain);
+        this.$set(item, "domainDescription", environment.description ? environment.description : "");
         return;
       }
       this.$set(item, "domainName", "");
+      this.$set(item, "domainDescription", "");
     },
     showDomainInfo(item) {
       const index = item.environments.findIndex(e => e.id === item.environmentId);
@@ -197,6 +223,14 @@ export default {
       let environment = item.environments[index]
       const config = JSON.parse(environment.config);
       this.conditions = config.httpConfig.conditions;
+      if (config.tcpConfig && config.tcpConfig.server) {
+        let condition = {
+          conditionType: 'TCP',
+          server: config.tcpConfig.server,
+          description: config.tcpConfig.description
+        }
+        this.conditions.push(condition);
+      }
       this.domainVisible = true;
     },
     getProjects() {
@@ -245,20 +279,30 @@ export default {
           if (config.httpConfig.protocol && config.httpConfig.domain) {
             let domain = config.httpConfig.protocol + "://" + config.httpConfig.domain;
             this.$set(item, "domainName", domain);
+            this.$set(item, "domainDescription", config.httpConfig.description ? config.httpConfig.description : "");
           }
         } else {
           if (config.httpConfig.conditions.length === 1) {
+            if (config.tcpConfig && config.tcpConfig.server) {
+              this.$set(item, "moreDomain", true);
+              return;
+            }
             let obj = config.httpConfig.conditions[0];
             if (obj.protocol && obj.domain) {
               this.$set(item, "domainName", obj.protocol + "://" + obj.domain);
+              this.$set(item, "domainDescription", obj.description ? obj.description : "");
             }
           } else if (config.httpConfig.conditions.length > 1) {
             this.$set(item, "moreDomain", true);
             return;
+          } else if (config.tcpConfig && config.tcpConfig.server) {
+            this.$set(item, "moreDomain", true);
+            return;
           }
         }
       } else {
         this.$set(item, "domainName", environment.protocol + '://' + environment.domain);
+        this.$set(item, "domainDescription", environment.description ? environment.description : "");
       }
     },
     getName(row) {

frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue

@@ -80,23 +80,35 @@
       <el-table :data="conditions">
         <el-table-column prop="socket" :label="$t('load_test.domain')" show-overflow-tooltip width="180">
           <template v-slot:default="{row}">
-            {{ getUrl(row) }}
+            {{ row.conditionType ? row.server : getUrl(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="'类型'" show-overflow-tooltip
+                         min-width="100px">
+          <template v-slot:default="{row}">
+            <el-tag type="info" size="mini">{{ row.conditionType ? row.conditionType : "HTTP" }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="type" :label="$t('api_test.environment.condition_enable')" show-overflow-tooltip
                          min-width="100px">
           <template v-slot:default="{row}">
-            {{ getName(row) }}
+            {{ row.conditionType ? "-" : getName(row) }}
           </template>
         </el-table-column>
         <el-table-column prop="details" show-overflow-tooltip min-width="120px" :label="$t('api_test.value')">
           <template v-slot:default="{row}">
-            {{ getDetails(row) }}
+            {{ row.conditionType ? "-" : getDetails(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" show-overflow-tooltip min-width="120px" :label="'描述'">
+          <template v-slot:default="{row}">
+            <span>{{ row.description ? row.description : "-" }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="createTime" show-overflow-tooltip min-width="120px" :label="$t('commons.create_time')">
           <template v-slot:default="{row}">
-            <span>{{ row.time | timestampFormatDate }}</span>
+            <span v-if="!row.conditionType">{{ row.time | timestampFormatDate }}</span>
+            <span v-else>-</span>
           </template>
         </el-table-column>
       </el-table>
@@ -205,6 +217,14 @@ export default {
     showInfo(row) {
       const config = JSON.parse(row.config);
       this.conditions = config.httpConfig.conditions;
+      if (config.tcpConfig && config.tcpConfig.server) {
+        let condition = {
+          conditionType: 'TCP',
+          server: config.tcpConfig.server,
+          description: config.tcpConfig.description
+        }
+        this.conditions.push(condition);
+      }
       this.domainVisible = true;
     },
     getName(row) {
@@ -381,12 +401,17 @@ export default {
           return "";
         } else {
           if (config.httpConfig.conditions.length === 1) {
+            if (config.tcpConfig && config.tcpConfig.server) {
+              return "SHOW_INFO";
+            }
             let obj = config.httpConfig.conditions[0];
             if (obj.protocol && obj.domain) {
               return obj.protocol + "://" + obj.domain;
             }
           } else if (config.httpConfig.conditions.length > 1) {
             return "SHOW_INFO";
+          } else if (config.tcpConfig && config.tcpConfig.server) {
+            return "SHOW_INFO"; // 页面上该字段只要显示域名数据就表示该域名是HTTP类型.如果只有TCP类型则弹窗显示以区分域名类型.
           } else {
             return "";
           }