ui: reflect the network request related codes (#274)

Co-authored-by: rick <LinuxSuRen@users.noreply.github.com>

.github/workflows/release.yaml

@@ -10,6 +10,7 @@ on:
 env:
   REGISTRY: ghcr.io
   REGISTRY_DOCKERHUB: docker.io
+  REGISTRY_ALIYUN: registry.aliyuncs.com
   IMAGE_NAME: ${{ github.repository }}
 
 jobs:
@@ -179,3 +180,41 @@ jobs:
             unset HELM_VERSION
           fi
           make helm-package helm-push
+
+  image-aliyuncs:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-tags: true
+          fetch-depth: 0
+      - name: Set output
+        id: vars
+        run: echo "tag=$(git describe --tags)" >> $GITHUB_OUTPUT
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf
+      - name: Log into registry ${{ env.REGISTRY_ALIYUN }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
+        with:
+          registry: ${{ env.REGISTRY_ALIYUN }}
+          username: linuxsuren
+          password: ${{ secrets.REGISTRY_ALIYUN_PUBLISH_SECRETS }}
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.REGISTRY_ALIYUN }}/${{ env.IMAGE_NAME }}
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@ac9327eae2b366085ac7f6a2d02df8aa8ead720a
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: VERSION=${{ steps.vars.outputs.tag }}

.gitpod.yml

@@ -1,6 +1,6 @@
 # See https://www.gitpod.io/docs/configure/workspaces
 tasks:
-  - init: make init-env
+  - init: make init-env install-precheck
     before: IMG_TOOL=docker GOPROXY= make build-ext copy-ext build-image
     command: cd console/atest-ui/ && npm i
 

console/atest-ui/src/App.vue

@@ -10,8 +10,8 @@ import { ElTree, ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import { Edit, Share } from '@element-plus/icons-vue'
 import type { Suite } from './types'
+import { API } from './views/net'
 import { Cache } from './views/cache'
-import { DefaultResponseProcess } from './views/net'
 import { useI18n } from 'vue-i18n'
 import ClientMonitor from 'skywalking-client-js'
 import { name, version } from '../package'
@@ -48,18 +48,7 @@ const handleNodeClick = (data: Tree) => {
     testSuiteKind.value = data.kind
     Cache.SetCurrentStore(data.store)
 
-    const requestOptions = {
-      method: 'POST',
-      headers: {
-        'X-Store-Name': data.store
-      },
-      body: JSON.stringify({
-        name: data.label
-      })
-    }
-    fetch('/server.Runner/ListTestCase', requestOptions)
-      .then((response) => response.json())
-      .then((d) => {
+    API.ListTestCase(data.label, data.store, (d) => {
         if (d.items && d.items.length > 0) {
           data.children = []
           d.items.forEach((item: any) => {
@@ -73,7 +62,7 @@ const handleNodeClick = (data: Tree) => {
             } as Tree)
           })
         }
-      })
+    })
   } else {
     Cache.SetCurrentStore(data.store)
     Cache.SetLastTestCaseLocation(data.parentID, data.id)
@@ -133,13 +122,16 @@ interface Store {
 }
 
 const stores = ref([] as Store[])
+const storesLoading = ref(false)
 function loadStores() {
+  storesLoading.value = true
   const requestOptions = {
     method: 'POST',
   }
   fetch('/server.Runner/GetStores', requestOptions)
     .then((response) => response.json())
     .then(async (d) => {
+      storesLoading.value = false
       stores.value = d.data
       data.value = [] as Tree[]
       Cache.SetStores(d.data)
@@ -227,21 +219,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
     if (valid) {
       suiteCreatingLoading.value = true
 
-      const requestOptions = {
-        method: 'POST',
-        headers: {
-          'X-Store-Name': testSuiteForm.store
-        },
-        body: JSON.stringify({
-          name: testSuiteForm.name,
-          api: testSuiteForm.api,
-          kind: testSuiteForm.kind
-        })
-      }
-
-      fetch('/server.Runner/CreateTestSuite', requestOptions)
-        .then(DefaultResponseProcess())
-        .then((e) => {
+      API.CreateTestSuite(testSuiteForm, (e) => {
           suiteCreatingLoading.value = false
           if (e.error !== "") {
             ElMessage.error('Oops, ' + e.error)
@@ -272,23 +250,11 @@ const importSuiteFormSubmit = async (formEl: FormInstance | undefined) => {
     if (valid) {
       suiteCreatingLoading.value = true
 
-      const requestOptions = {
-        method: 'POST',
-        headers: {
-          'X-Store-Name': importSuiteForm.store
-        },
-        body: JSON.stringify({
-          url: importSuiteForm.url
-        })
-      }
-
-      fetch('/server.Runner/ImportTestSuite', requestOptions)
-        .then((response) => response.json())
-        .then(() => {
-          loadStores()
-          importDialogVisible.value = false
-          formEl.resetFields()
-        })
+      API.ImportTestSuite(importSuiteForm, () => {
+        loadStores()
+        importDialogVisible.value = false
+        formEl.resetFields()
+      })
     }
   })
 }
@@ -325,6 +291,11 @@ const suiteKinds = [{
 }, {
   "name": "tRPC",
 }]
+
+const appVersion = ref('')
+API.GetVersion((d) => {
+  appVersion.value = d.message
+})
 </script>
 
 <template>
@@ -340,7 +311,7 @@ const suiteKinds = [{
 
       <el-main>
         <el-container style="height: 100%">
-          <el-aside width="200px">
+          <el-aside>
             <el-button type="primary" @click="openTestSuiteCreateDialog"
               data-intro="Click here to create a new test suite"
               test-id="open-new-suite-dialog" :icon="Edit">{{ t('button.new') }}</el-button>
@@ -350,6 +321,7 @@ const suiteKinds = [{
             <el-input v-model="filterText" placeholder="Filter keyword" test-id="search" />
 
             <el-tree
+              v-loading="storesLoading"
               :data=data
               highlight-current
               :check-on-click-node="true"
@@ -361,8 +333,6 @@ const suiteKinds = [{
               @node-click="handleNodeClick"
               data-intro="This is the test suite tree. You can click the test suite to edit it."
             />
-
-            <TemplateFunctions/>
           </el-aside>
 
           <el-main>
@@ -392,6 +362,10 @@ const suiteKinds = [{
           </el-main>
         </el-container>
       </el-main>
+    <div style="position: absolute; bottom: 0px; right: 10px;">
+      <a href="https://github.com/LinuxSuRen/api-testing" target="_blank" rel="noopener">{{appVersion}}</a>
+    </div>
+    <TemplateFunctions/>
     </el-container>
   </div>
 

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

@@ -4,6 +4,7 @@ import { reactive, ref } from 'vue'
 import { Edit, Delete } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Pair } from './types'
+import { API } from './net'
 import { SupportedExtensions } from './store'
 import { useI18n } from 'vue-i18n'
 
@@ -50,39 +51,24 @@ interface Store {
 }
 
 function loadStores() {
-  const requestOptions = {
-    method: 'POST',
-  }
-  fetch('/server.Runner/GetStores', requestOptions)
-    .then((response) => response.json())
-    .then((e) => {
-      stores.value = e.data
-    })
-    .catch((e) => {
-      ElMessage.error('Oops, ' + e)
-    })
+  API.GetStores((e) => {
+    stores.value = e.data
+  }, (e) => {
+    ElMessage.error('Oops, ' + e)
+  })
 }
 loadStores()
 
 function deleteStore(name: string) {
-  const requestOptions = {
-    method: 'POST',
-    body: JSON.stringify({
-      name: name
-    })
-  }
-  fetch('/server.Runner/DeleteStore', requestOptions)
-    .then((response) => response.json())
-    .then((e) => {
-      ElMessage({
-        message: 'Deleted.',
-        type: 'success'
-      })
-      loadStores()
-    })
-    .catch((e) => {
-      ElMessage.error('Oops, ' + e)
+  API.DeleteStore(name, (e) => {
+    ElMessage({
+      message: 'Deleted.',
+      type: 'success'
     })
+    loadStores()
+  }, (e) => {
+    ElMessage.error('Oops, ' + e)
+  })
 }
 
 function editStore(name: string) {
@@ -161,36 +147,19 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 
 function storeVerify(formEl: FormInstance | undefined) {
   if (!formEl) return
-
-  const requestOptions = {
-    method: 'POST',
-    body: JSON.stringify({
-      name: storeForm.name
-    })
-  }
   
-  let api = '/server.Runner/VerifyStore'
-  fetch(api, requestOptions)
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error(response.statusText)
-      } else {
-        return response.json()
-      }
-    })
-    .then((e) => {
-      if (e.ready) {
-        ElMessage({
-          message: 'Verified!',
-          type: 'success'
-        })
-      } else {
-        ElMessage.error(e.message)
-      }
-    })
-    .catch((e) => {
-      ElMessage.error('Oops, ' + e)
-    })
+  API.VerifyStore(setStoreForm.name, (e) => {
+    if (e.ready) {
+      ElMessage({
+        message: 'Verified!',
+        type: 'success'
+      })
+    } else {
+      ElMessage.error(e.message)
+    }
+  }, (e) => {
+    ElMessage.error('Oops, ' + e)
+  })
 }
 
 function updateKeys() {