feat: support show the human-readable http status code on ui (#221)

console/atest-ui/src/locales/en.json

@@ -34,5 +34,18 @@
         "status": "Status",
         "operations": "Operations",
         "storageLocation": "Storage Location"
+    },
+    "//see http spec": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/403",
+    "httpCode": {
+        "200": "200 OK",
+        "201": "201 Created",
+        "204": "204 No Content",
+        "400": "400 Bad Request",
+        "401": "401 Unauthorized",
+        "403": "403 Forbidden",
+        "405": "405 Method Not Allowed",
+        "500": "500 Internal Server Error",
+        "502": "502 Bad Gateway",
+        "503": "503 Service Unavailable"
     }
 }

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

@@ -64,7 +64,8 @@ const sendRequest = async () => {
 
       SetTestCaseResponseCache(suite + '-' + name, {
         body: testResult.value.bodyObject,
-        output: e.output
+        output: e.output,
+        statusCode: testResult.value.statusCode
       } as TestCaseResponse)
     })
     .catch((e) => {
@@ -159,14 +160,15 @@ function load() {
   }
 
   // load cache
-  console.log('load cache')
   const cache = GetTestCaseResponseCache(suite + '-' + name)
   if (cache.body) {
     testResult.value.bodyObject = cache.body
     testResult.value.output = cache.output
+    testResult.value.statusCode = cache.statusCode
   } else {
     testResult.value.bodyObject = {}
     testResult.value.output = ''
+    testResult.value.statusCode = 0
   }
 
   const requestOptions = {
@@ -643,6 +645,9 @@ const queryPupularHeaders = (queryString: string, cb: (arg: any) => void) => {
       <el-footer>
         <el-tabs v-model="testResultActiveTab" class="demo-tabs">
           <el-tab-pane label="Output" name="output">
+            <el-tag class="ml-2" type="success" v-if="testResult.statusCode && testResult.error === ''">{{ t('httpCode.' + testResult.statusCode) }}</el-tag>
+            <el-tag class="ml-2" type="danger" v-if="testResult.statusCode && testResult.error !== ''">{{ t('httpCode.' + testResult.statusCode) }}</el-tag>
+
             <el-input
               v-model="testResult.output"
               :autosize="{ minRows: 4, maxRows: 6 }"
@@ -656,7 +661,7 @@ const queryPupularHeaders = (queryString: string, cb: (arg: any) => void) => {
           </el-tab-pane>
           <el-tab-pane name="response-header">
             <template #label>
-              <el-badge :value="testResult.header.length" class="item"> Header </el-badge>
+              <el-badge :value="testResult.header.length" class="item">Header</el-badge>
             </template>
             <el-table :data="testResult.header" style="width: 100%">
               <el-table-column label="Key" width="200">

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

@@ -1,6 +1,7 @@
 export interface TestCaseResponse {
     output: string
-    body: {}
+    body: {},
+    statusCode: number
 }
 
 export function GetTestCaseResponseCache(id: string) {

pkg/testing/remote/grpc_store.go

@@ -151,16 +151,7 @@ func (g *gRPCLoader) GetTestSuite(name string, full bool) (suite testing.TestSui
 	var result *TestSuite
 	if result, err = g.client.GetTestSuite(g.ctx,
 		&TestSuite{Name: name, Full: full}); err == nil {
-		suite = testing.TestSuite{
-			Name: result.Name,
-			API:  result.Api,
-		}
-
-		if result.Items != nil {
-			for i := range result.Items {
-				suite.Items = append(suite.Items, ConvertToNormalTestCase(result.Items[i]))
-			}
-		}
+		suite = *ConvertToNormalTestSuite(result)
 	}
 	return
 }