chore: show server address on the test case page

Author: LinuxSuRen

console/atest-ui/src/views/TestCase.vue

@@ -886,20 +886,24 @@ Magic.Keys(() => {
                 :key="item.value"
                 :label="item.key"
                 :value="item.value"
-              />
+              >
+              <el-text class="mx-1" :type="item.type">{{ item.key }}</el-text>
+             </el-option>
             </el-select>
           </el-col>
           <el-col :span="18">
             <el-autocomplete
               v-model="testCaseWithSuite.data.request.api"
               style="width: 100%"
               :fetch-suggestions="querySuggestedAPIs"
-              placeholder="API Address"
               :readonly="isHistoryTestCase">
               <template #default="{ item }">
                 <div class="value">{{ item.request.method }}</div>
                 <span class="link">{{ item.request.api }}</span>
               </template>
+              <template #prefix v-if="!testCaseWithSuite.data.request.api.startsWith('http://') && !testCaseWithSuite.data.request.api.startsWith('https://')">
+                {{ testCaseWithSuite.data.server }}
+              </template>
             </el-autocomplete>
           </el-col>
           <el-col :span="3">

console/atest-ui/src/views/TestingPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TestCase from './TestCase.vue'
 import TestSuite from './TestSuite.vue'
+import { GetHTTPMethod } from './types'
 import TemplateFunctions from './TemplateFunctions.vue'
 import { ref, watch } from 'vue'
 import { ElTree, ElMessage } from 'element-plus'
@@ -283,10 +284,7 @@ const viewName = ref('')
             >
               <template #default="{ node, data }">
                 <span class="custom-tree-node">
-                  <el-text class="mx-1" v-if="data.method === 'POST'" type="success">{{ node.label }}</el-text>
-                  <el-text class="mx-1" v-else-if="data.method === 'PUT'" type="warning">{{ node.label }}</el-text>
-                  <el-text class="mx-1" v-else-if="data.method === 'DELETE'" type="danger">{{ node.label }}</el-text>
-                  <el-text class="mx-1" v-else>{{ node.label }}</el-text>
+                  <el-text class="mx-1" :type="GetHTTPMethod(data.method).type">{{ node.label }}</el-text>
                 </span>
               </template>
             </el-tree>

console/atest-ui/src/views/types.ts

@@ -44,6 +44,7 @@ export interface TestResult {
 export interface Pair {
   key: string
   value: string
+  type: string
   defaultValue: string
   description: string
 }
@@ -55,6 +56,7 @@ export interface TestCaseWithSuite {
 
 export interface TestCase {
   name: string
+  server: string
   request: TestCaseRequest
   response: TestCaseResponse
 }
@@ -122,35 +124,51 @@ export function GetHTTPMethods() {
   return [
     {
       value: 'GET',
-      key: 'GET'
+      key: 'GET',
+      type: ''
     },
     {
       value: 'POST',
-      key: 'POST'
+      key: 'POST',
+      type: 'success'
     },
     {
       value: 'DELETE',
-      key: 'DELETE'
+      key: 'DELETE',
+      type: 'danger'
     },
     {
       value: 'PUT',
-      key: 'PUT'
+      key: 'PUT',
+      type: 'warning'
     },
     {
       value: 'HEAD',
-      key: 'HEAD'
+      key: 'HEAD',
+      type: ''
     },
     {
       value: 'PATCH',
-      key: 'PATCH'
+      key: 'PATCH',
+      type: ''
     },
     {
       value: 'OPTIONS',
-      key: 'OPTIONS'
+      key: 'OPTIONS',
+      type: ''
     }
   ] as Pair[]
 }
 
+export function GetHTTPMethod(name: string) {
+  for (const method of GetHTTPMethods()) {
+    if (method.key === name) {
+      return method
+    }
+  }
+  return {} as Pair
+}
+
 export function FlattenObject(obj: any): any {
   function _flattenPairs(obj: any, prefix: string): [string, any][] {
     if (!_.isObject(obj)) {

pkg/server/remote_server.go

@@ -608,6 +608,11 @@ func (s *server) GetTestCase(ctx context.Context, in *TestCaseIdentity) (reply *
 	defer loader.Close()
 	if result, err = loader.GetTestCase(in.Suite, in.Testcase); err == nil {
 		reply = ToGRPCTestCase(result)
+
+		var suite testing.TestSuite
+		if suite, err = loader.GetTestSuite(in.Suite, false); err == nil {
+			reply.Server = suite.API
+		}
 	}
 	return
 }