diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 0254508a..9a26a093 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -44,13 +44,14 @@ jobs:
       - uses: ./tools/github-actions/setup-deps
       - name: Unit Test
         run: |
-          make test
+          make test build-ui test-ui
       - name: Report
         if: github.actor == 'linuxsuren'
         env:
           CODACY_PROJECT_TOKEN: ${{ secrets.CODACY_PROJECT_TOKEN }}
         run: |
           bash <(curl -Ls https://coverage.codacy.com/get.sh) report --partial --force-coverage-parser go -r coverage.out
+          bash <(curl -Ls https://coverage.codacy.com/get.sh) report --partial console/atest-ui/coverage/clover.xml
           bash <(curl -Ls https://coverage.codacy.com/get.sh) final
 
   image:
diff --git a/README.md b/README.md
index ffd3073f..23aa5468 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 > English | [中文](README-ZH.md)
 
-This is a API testing tool. 🚀
+This is an awesome API testing tool. 🚀
 
 ## Features
 
diff --git a/console/atest-ui/package-lock.json b/console/atest-ui/package-lock.json
index 43b67551..a35aea4b 100644
--- a/console/atest-ui/package-lock.json
+++ b/console/atest-ui/package-lock.json
@@ -43,6 +43,7 @@
         "eslint-plugin-vue": "^9.11.0",
         "fetch-mock-jest": "^1.5.1",
         "jest": "^29.6.1",
+        "jest-fetch-mock": "^3.0.3",
         "jsdom": "^22.1.0",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.8.8",
@@ -4270,6 +4271,15 @@
       "resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.6.tgz",
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
+      "dev": true,
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -7492,6 +7502,16 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/jest-fetch-mock": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz",
+      "integrity": "sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==",
+      "dev": true,
+      "dependencies": {
+        "cross-fetch": "^3.0.4",
+        "promise-polyfill": "^8.1.3"
+      }
+    },
     "node_modules/jest-get-type": {
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.4.3.tgz",
@@ -9299,8 +9319,6 @@
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
       "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -9320,25 +9338,19 @@
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true,
-      "optional": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/node-fetch/node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -10025,6 +10037,12 @@
         "asap": "~2.0.6"
       }
     },
+    "node_modules/promise-polyfill": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz",
+      "integrity": "sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==",
+      "dev": true
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -15368,6 +15386,15 @@
       "resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.6.tgz",
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
     },
+    "cross-fetch": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
+      "dev": true,
+      "requires": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -17864,6 +17891,16 @@
         "jest-util": "^29.6.1"
       }
     },
+    "jest-fetch-mock": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz",
+      "integrity": "sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==",
+      "dev": true,
+      "requires": {
+        "cross-fetch": "^3.0.4",
+        "promise-polyfill": "^8.1.3"
+      }
+    },
     "jest-get-type": {
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.4.3.tgz",
@@ -19264,8 +19301,6 @@
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
       "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "requires": {
         "whatwg-url": "^5.0.0"
       },
@@ -19274,25 +19309,19 @@
           "version": "0.0.3",
           "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
           "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-          "dev": true,
-          "optional": true,
-          "peer": true
+          "dev": true
         },
         "webidl-conversions": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
           "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-          "dev": true,
-          "optional": true,
-          "peer": true
+          "dev": true
         },
         "whatwg-url": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
           "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
           "dev": true,
-          "optional": true,
-          "peer": true,
           "requires": {
             "tr46": "~0.0.3",
             "webidl-conversions": "^3.0.0"
@@ -19823,6 +19852,12 @@
         "asap": "~2.0.6"
       }
     },
+    "promise-polyfill": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz",
+      "integrity": "sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==",
+      "dev": true
+    },
     "prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
diff --git a/console/atest-ui/package.json b/console/atest-ui/package.json
index 8e34fdfc..7b1e7da9 100644
--- a/console/atest-ui/package.json
+++ b/console/atest-ui/package.json
@@ -51,6 +51,7 @@
     "eslint-plugin-vue": "^9.11.0",
     "fetch-mock-jest": "^1.5.1",
     "jest": "^29.6.1",
+    "jest-fetch-mock": "^3.0.3",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
diff --git a/console/atest-ui/src/components/LoginDialog.vue b/console/atest-ui/src/components/LoginDialog.vue
new file mode 100644
index 00000000..357666dc
--- /dev/null
+++ b/console/atest-ui/src/components/LoginDialog.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { reactive, ref } from 'vue'
+import { API } from '@/views/net'
+
+const { t } = useI18n()
+const props = defineProps({
+    visible: Boolean,
+})
+
+const deviceAuthActive = ref(0)
+const deviceAuthResponse = ref({
+    user_code: '',
+    verification_uri: '',
+    device_code: ''
+})
+const deviceAuthNext = () => {
+    if (deviceAuthActive.value++ > 2) {
+        return
+    }
+
+    if (deviceAuthActive.value === 1) {
+        fetch('/oauth2/getLocalCode')
+            .then(API.DefaultResponseProcess)
+            .then((d) => {
+                deviceAuthResponse.value = d
+            })
+    } else if (deviceAuthActive.value === 2) {
+        window.location.href = '/oauth2/getUserInfoFromLocalCode?device_code=' + deviceAuthResponse.value.device_code
+    }
+}
+</script>
+
+<template>
+    <el-dialog
+        :modelValue="visible"
+        title="You need to login first."
+        width="30%"
+    >
+        <el-collapse accordion>
+            <el-collapse-item title="Server in cloud" name="1">
+                <a href="/oauth2/token" target="_blank">
+                    <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">
+                        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+                    </svg>
+                </a>
+            </el-collapse-item>
+            <el-collapse-item title="Server in local" name="2">
+                <el-steps :active="deviceAuthActive" finish-status="success">
+                    <el-step title="Request Device Code" />
+                    <el-step title="Input Code"/>
+                    <el-step title="Finished" />
+                </el-steps>
+
+                <div v-if="deviceAuthActive===1">
+                    Open <a :href="deviceAuthResponse.verification_uri" target="_blank">this link</a>, and type the code: <span>{{ deviceAuthResponse.user_code }}. Then click the next step button.</span>
+                </div>
+                <el-button style="margin-top: 12px" @click="deviceAuthNext">Next step</el-button>
+            </el-collapse-item>
+        </el-collapse>
+    </el-dialog>
+</template>
diff --git a/console/atest-ui/src/components/TestSuiteCreationDialog.vue b/console/atest-ui/src/components/TestSuiteCreationDialog.vue
new file mode 100644
index 00000000..ff4e4c18
--- /dev/null
+++ b/console/atest-ui/src/components/TestSuiteCreationDialog.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { reactive, ref } from 'vue'
+import type { Suite } from '@/views/types'
+import { ElMessage } from 'element-plus'
+import { API } from '@/views/net'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const { t } = useI18n()
+
+interface Store {
+    name: string,
+    description: string,
+}
+
+const emit = defineEmits(['created'])
+const props = defineProps({
+    visible: Boolean,
+})
+
+const stores = ref([] as Store[])
+function loadStores() {
+    const requestOptions = {
+        headers: {
+            'X-Auth': API.getToken()
+        }
+    }
+    fetch('/api/v1/stores', requestOptions)
+        .then(API.DefaultResponseProcess)
+        .then(async (d) => {
+            stores.value = d.data
+        })
+}
+loadStores()
+
+const suiteCreatingLoading = ref(false)
+const suiteFormRef = ref<FormInstance>()
+const testSuiteForm = reactive({
+    name: '',
+    api: '',
+    store: '',
+    kind: ''
+})
+const rules = reactive<FormRules<Suite>>({
+    name: [{ required: true, message: 'Name is required', trigger: 'blur' }],
+    store: [{ required: true, message: 'Location is required', trigger: 'blur' }]
+})
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid: boolean) => {
+        if (valid) {
+            suiteCreatingLoading.value = true
+
+            API.CreateTestSuite(testSuiteForm, (e) => {
+                suiteCreatingLoading.value = false
+                if (e.error !== "") {
+                    ElMessage.error('Oops, ' + e.error)
+                } else {
+                    formEl.resetFields()
+                }
+
+                emit('created')
+            }, (e) => {
+                suiteCreatingLoading.value = false
+                ElMessage.error('Oops, ' + e)
+            })
+        }
+    })
+}
+
+const suiteKinds = [{
+    "name": "HTTP",
+}, {
+    "name": "gRPC",
+}, {
+    "name": "tRPC",
+}]
+</script>
+
+<template>
+    <el-dialog :modelValue="visible" :title="t('title.createTestSuite')" width="30%" draggable>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-form
+                :rules="rules"
+                :model="testSuiteForm"
+                ref="suiteFormRef"
+                status-icon label-width="120px">
+              <el-form-item :label="t('field.storageLocation')" prop="store">
+                <el-select v-model="testSuiteForm.store" class="m-2"
+                           test-id="suite-form-store"
+                           filterable
+                           default-first-option
+                           placeholder="Storage Location">
+                  <el-option
+                      v-for="item in stores"
+                      :key="item.name"
+                      :label="item.name"
+                      :value="item.name"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="t('field.suiteKind')" prop="kind">
+                <el-select v-model="testSuiteForm.kind" class="m-2"
+                           filterable
+                           test-id="suite-form-kind"
+                           default-first-option>
+                  <el-option
+                      v-for="item in suiteKinds"
+                      :key="item.name"
+                      :label="item.name"
+                      :value="item.name"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="t('field.name')" prop="name">
+                <el-input v-model="testSuiteForm.name" test-id="suite-form-name" />
+              </el-form-item>
+              <el-form-item label="API" prop="api">
+                <el-input v-model="testSuiteForm.api" placeholder="http://foo" test-id="suite-form-api" />
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                    type="primary"
+                    @click="submitForm(suiteFormRef)"
+                    :loading="suiteCreatingLoading"
+                    test-id="suite-form-submit"
+                >{{ t('button.submit') }}</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </span>
+        </template>
+    </el-dialog>
+</template>
diff --git a/console/atest-ui/src/components/TestSuiteImportDialog.vue b/console/atest-ui/src/components/TestSuiteImportDialog.vue
new file mode 100644
index 00000000..ddb0f1d5
--- /dev/null
+++ b/console/atest-ui/src/components/TestSuiteImportDialog.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { reactive, ref } from 'vue'
+import type { Suite } from '@/views/types'
+import { API } from '@/views/net'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const { t } = useI18n()
+const emit = defineEmits(['created'])
+const props = defineProps({
+    visible: Boolean,
+})
+
+const importSuiteFormRef = ref<FormInstance>()
+const importSuiteForm = reactive({
+    url: '',
+    store: '',
+    kind: ''
+})
+
+const importSuiteFormRules = reactive<FormRules<Suite>>({
+    url: [
+        { required: true, message: 'URL is required', trigger: 'blur' },
+        { type: 'url', message: 'Should be a valid URL value', trigger: 'blur' }
+    ],
+    store: [{ required: true, message: 'Location is required', trigger: 'blur' }],
+    kind: [{ required: true, message: 'Kind is required', trigger: 'blur' }]
+})
+
+const importSuiteFormSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid: boolean) => {
+        if (valid) {
+            API.ImportTestSuite(importSuiteForm, () => {
+                emit('created')
+                formEl.resetFields()
+            }, (e) => {
+                ElMessage.error(e)
+            })
+        }
+    })
+}
+
+interface Store {
+    name: string,
+    description: string,
+}
+const stores = ref([] as Store[])
+function loadStores() {
+    const requestOptions = {
+        headers: {
+            'X-Auth': API.getToken()
+        }
+    }
+    fetch('/api/v1/stores', requestOptions)
+        .then(API.DefaultResponseProcess)
+        .then(async (d) => {
+            stores.value = d.data
+        })
+}
+loadStores()
+
+const importSourceKinds = [{
+    "name": "Postman",
+    "value": "postman",
+    "description": "https://api.postman.com/collections/xxx"
+}, {
+    "name": "Native",
+    "value": "native",
+    "description": "http://your-server/api/v1/suites/xxx/yaml?x-store-name=xxx"
+}]
+const placeholderOfImportURL = ref("")
+const kindChanged = (e) => {
+    importSourceKinds.forEach(k => {
+        if (k.value === e) {
+            placeholderOfImportURL.value = k.description
+        }
+    });
+}
+</script>
+
+<template>
+    <el-dialog :modelValue="visible" title="Import Test Suite" width="40%"
+        draggable destroy-on-close>
+        <el-form
+            :rules="importSuiteFormRules"
+            :model="importSuiteForm"
+            ref="importSuiteFormRef"
+            status-icon label-width="85px">
+            <el-form-item label="Location" prop="store">
+                <el-select v-model="importSuiteForm.store" class="m-2"
+                    test-id="suite-import-form-store"
+                    filterable
+                    default-first-option
+                    placeholder="Storage Location">
+                    <el-option
+                        v-for="item in stores"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.name"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="Kind" prop="kind">
+                <el-select v-model="importSuiteForm.kind" class="m-2"
+                    filterable
+                    @change="kindChanged"
+                    test-id="suite-import-form-kind"
+                    default-first-option
+                    placeholder="Kind">
+                    <el-option
+                        v-for="item in importSourceKinds"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="URL" prop="url">
+                <el-input v-model="importSuiteForm.url" test-id="suite-import-form-api" :placeholder="placeholderOfImportURL" />
+            </el-form-item>
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    @click="importSuiteFormSubmit(importSuiteFormRef)"
+                    test-id="suite-import-submit"
+                >{{ t('button.import') }}</el-button>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
+</template>
diff --git a/console/atest-ui/src/locales/en.json b/console/atest-ui/src/locales/en.json
index 6a4a60b0..1d7e487c 100644
--- a/console/atest-ui/src/locales/en.json
+++ b/console/atest-ui/src/locales/en.json
@@ -68,7 +68,7 @@
         "disabled": "Disabled",
         "status": "Status",
         "operations": "Operations",
-        "storageLocation": "Storage Location",
+        "storageLocation": "Location",
         "suiteKind": "Suite Kind",
         "key": "Key",
         "value": "Value"
diff --git a/console/atest-ui/src/views/TestingHistoryPanel.vue b/console/atest-ui/src/views/TestingHistoryPanel.vue
index 6b5374bc..e1eaba09 100644
--- a/console/atest-ui/src/views/TestingHistoryPanel.vue
+++ b/console/atest-ui/src/views/TestingHistoryPanel.vue
@@ -232,29 +232,6 @@ const filterTestCases = (value: string, data: Tree) => {
 }
 
 const viewName = ref('')
-
-const deviceAuthActive = ref(0)
-const deviceAuthResponse = ref({
-  user_code: '',
-  verification_uri: '',
-  device_code: ''
-})
-const deviceAuthNext = () => {
-  if (deviceAuthActive.value++ > 2) {
-    return
-  }
-
-  if (deviceAuthActive.value === 1) {
-    fetch('/oauth2/getLocalCode')
-      .then(API.DefaultResponseProcess)
-      .then((d) => {
-        deviceAuthResponse.value = d
-      })
-  } else if (deviceAuthActive.value === 2) {
-    window.location.href = '/oauth2/getUserInfoFromLocalCode?device_code=' + deviceAuthResponse.value.device_code
-  }
-}
-
 </script>
 
 <template>
@@ -290,34 +267,6 @@ const deviceAuthNext = () => {
       </el-main>
     </el-container>
   </div>
-
-  <el-dialog v-model="loginDialogVisible" title="You need to login first." width="30%">
-    <el-collapse accordion="true">
-      <el-collapse-item title="Server in cloud" name="1">
-        <a href="/oauth2/token" target="_blank">
-          <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"
-            class="octicon octicon-mark-github v-align-middle color-fg-default">
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
-            </path>
-          </svg>
-        </a>
-      </el-collapse-item>
-      <el-collapse-item title="Server in local" name="2">
-        <el-steps :active="deviceAuthActive" finish-status="success">
-          <el-step title="Request Device Code" />
-          <el-step title="Input Code" />
-          <el-step title="Finished" />
-        </el-steps>
-
-        <div v-if="deviceAuthActive === 1">
-          Open <a :href="deviceAuthResponse.verification_uri" target="_blank">this link</a>, and type the code: <span>{{
-              deviceAuthResponse.user_code }}. Then click the next step button.</span>
-        </div>
-        <el-button style="margin-top: 12px" @click="deviceAuthNext">Next step</el-button>
-      </el-collapse-item>
-    </el-collapse>
-  </el-dialog>
 </template>
 
 <style scoped>
diff --git a/console/atest-ui/src/views/TestingPanel.vue b/console/atest-ui/src/views/TestingPanel.vue
index 02f6e18e..c52b9215 100644
--- a/console/atest-ui/src/views/TestingPanel.vue
+++ b/console/atest-ui/src/views/TestingPanel.vue
@@ -2,15 +2,16 @@
 import TestCase from './TestCase.vue'
 import TestSuite from './TestSuite.vue'
 import TemplateFunctions from './TemplateFunctions.vue'
-import { reactive, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { ElTree, ElMessage } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
 import { Edit, Refresh } from '@element-plus/icons-vue'
-import type { Suite } from './types'
 import { API } from './net'
 import { Cache } from './cache'
 import { useI18n } from 'vue-i18n'
 import { Magic } from './magicKeys'
+import TestSuiteCreationDialog from '../components/TestSuiteCreationDialog.vue'
+import TestSuiteImportDialog from '../components/TestSuiteImportDialog.vue'
+import LoginDialog from '../components/LoginDialog.vue'
 
 const { t } = useI18n()
 
@@ -231,20 +232,6 @@ loadStores()
 
 const dialogVisible = ref(false)
 const importDialogVisible = ref(false)
-const suiteCreatingLoading = ref(false)
-const suiteFormRef = ref<FormInstance>()
-const testSuiteForm = reactive({
-  name: '',
-  api: '',
-  store: '',
-  kind: ''
-})
-const importSuiteFormRef = ref<FormInstance>()
-const importSuiteForm = reactive({
-  url: '',
-  store: '',
-  kind: ''
-})
 
 function openTestSuiteCreateDialog() {
   dialogVisible.value = true
@@ -254,63 +241,6 @@ function openTestSuiteImportDialog() {
   importDialogVisible.value = true
 }
 
-const rules = reactive<FormRules<Suite>>({
-  name: [{ required: true, message: 'Name is required', trigger: 'blur' }],
-  store: [{ required: true, message: 'Location is required', trigger: 'blur' }]
-})
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid: boolean) => {
-    if (valid) {
-      suiteCreatingLoading.value = true
-
-      API.CreateTestSuite(testSuiteForm, (e) => {
-          suiteCreatingLoading.value = false
-          if (e.error !== "") {
-            ElMessage.error('Oops, ' + e.error)
-          } else {
-            loadStores()
-            dialogVisible.value = false
-            formEl.resetFields()
-          }
-        }, (e) => {
-          suiteCreatingLoading.value = false
-          ElMessage.error('Oops, ' + e)
-        })
-    }
-  })
-}
-
-const emit = defineEmits(['toHistoryPanel']);
-const handleToHistoryPanel = (payload) => {
-  emit('toHistoryPanel', payload);
-};
-
-const importSuiteFormRules = reactive<FormRules<Suite>>({
-  url: [
-    { required: true, message: 'URL is required', trigger: 'blur' },
-    { type: 'url', message: 'Should be a valid URL value', trigger: 'blur' }
-  ],
-  store: [{ required: true, message: 'Location is required', trigger: 'blur' }],
-  kind: [{ required: true, message: 'Kind is required', trigger: 'blur' }]
-})
-const importSuiteFormSubmit = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid: boolean) => {
-    if (valid) {
-      suiteCreatingLoading.value = true
-
-      API.ImportTestSuite(importSuiteForm, () => {
-        loadStores()
-        importDialogVisible.value = false
-        formEl.resetFields()
-      }, (e) => {
-        ElMessage.error(e)
-      })
-    }
-  })
-}
-
 const filterText = ref('')
 watch(filterText, (val) => {
   treeRef.value!.filter(val)
@@ -321,45 +251,6 @@ const filterTestCases = (value: string, data: Tree) => {
 }
 
 const viewName = ref('')
-
-const deviceAuthActive = ref(0)
-const deviceAuthResponse = ref({
-  user_code: '',
-  verification_uri: '',
-  device_code: ''
-})
-const deviceAuthNext = () => {
-  if (deviceAuthActive.value++ > 2) {
-    return
-  }
-
-  if (deviceAuthActive.value === 1) {
-    fetch('/oauth2/getLocalCode')
-    .then(API.DefaultResponseProcess)
-    .then((d) => {
-      deviceAuthResponse.value = d
-    })
-  } else if (deviceAuthActive.value === 2) {
-    window.location.href = '/oauth2/getUserInfoFromLocalCode?device_code=' + deviceAuthResponse.value.device_code
-  }
-}
-
-const suiteKinds = [{
-  "name": "HTTP",
-}, {
-  "name": "gRPC",
-}, {
-  "name": "tRPC",
-}]
-
-const importSourceKinds = [{
-  "name": "Postman",
-  "value": "postman"
-}, {
-  "name": "Native",
-  "value": "native"
-}]
-
 </script>
 
 <template>
@@ -425,141 +316,16 @@ const importSourceKinds = [{
     </el-container>
   </div>
 
-  <el-dialog v-model="dialogVisible" :title="t('title.createTestSuite')" width="30%" draggable>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-form
-          :rules="rules"
-          :model="testSuiteForm"
-          ref="suiteFormRef"
-          status-icon label-width="120px">
-          <el-form-item :label="t('field.storageLocation')" prop="store">
-            <el-select v-model="testSuiteForm.store" class="m-2"
-              test-id="suite-form-store"
-              filterable=true
-              default-first-option=true
-              placeholder="Storage Location" size="middle">
-              <el-option
-                v-for="item in stores"
-                :key="item.name"
-                :label="item.name"
-                :value="item.name"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="t('field.suiteKind')" prop="kind">
-            <el-select v-model="testSuiteForm.kind" class="m-2"
-              filterable=true
-              test-id="suite-form-kind"
-              default-first-option=true
-              size="middle">
-              <el-option
-                v-for="item in suiteKinds"
-                :key="item.name"
-                :label="item.name"
-                :value="item.name"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="t('field.name')" prop="name">
-            <el-input v-model="testSuiteForm.name" test-id="suite-form-name" />
-          </el-form-item>
-          <el-form-item label="API" prop="api">
-            <el-input v-model="testSuiteForm.api" placeholder="http://foo" test-id="suite-form-api" />
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              @click="submitForm(suiteFormRef)"
-              v-loading="suiteCreatingLoading"
-              test-id="suite-form-submit"
-              >{{ t('button.submit') }}</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </span>
-    </template>
-  </el-dialog>
-
-  <el-dialog v-model="importDialogVisible" title="Import Test Suite" width="30%" draggable>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-form
-          :rules="importSuiteFormRules"
-          :model="importSuiteForm"
-          ref="importSuiteFormRef"
-          status-icon label-width="120px">
-          <el-form-item label="Location" prop="store">
-            <el-select v-model="importSuiteForm.store" class="m-2"
-              test-id="suite-import-form-store"
-              filterable=true
-              default-first-option=true
-              placeholder="Storage Location" size="middle">
-              <el-option
-                v-for="item in stores"
-                :key="item.name"
-                :label="item.name"
-                :value="item.name"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="Kind" prop="kind">
-            <el-select v-model="importSuiteForm.kind" class="m-2"
-              filterable=true
-              test-id="suite-import-form-kind"
-              default-first-option=true
-              placeholder="Kind" size="middle">
-              <el-option
-                v-for="item in importSourceKinds"
-                :key="item.name"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="URL" prop="url">
-            <el-input v-model="importSuiteForm.url" test-id="suite-import-form-api" placeholder="https://api.postman.com/collections/xxx" />
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              @click="importSuiteFormSubmit(importSuiteFormRef)"
-              test-id="suite-import-submit"
-              >{{ t('button.import') }}</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </span>
-    </template>
-  </el-dialog>
-
-  <el-dialog
-    v-model="loginDialogVisible"
-    title="You need to login first."
-    width="30%"
-  >
-    <el-collapse accordion="true">
-      <el-collapse-item title="Server in cloud" name="1">
-        <a href="/oauth2/token" target="_blank">
-          <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">
-              <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
-          </svg>
-        </a>
-      </el-collapse-item>
-      <el-collapse-item title="Server in local" name="2">
-        <el-steps :active="deviceAuthActive" finish-status="success">
-          <el-step title="Request Device Code" />
-          <el-step title="Input Code"/>
-          <el-step title="Finished" />
-        </el-steps>
-
-        <div v-if="deviceAuthActive===1">
-          Open <a :href="deviceAuthResponse.verification_uri" target="_blank">this link</a>, and type the code: <span>{{ deviceAuthResponse.user_code }}. Then click the next step button.</span>
-        </div>
-        <el-button style="margin-top: 12px" @click="deviceAuthNext">Next step</el-button>
-      </el-collapse-item>
-    </el-collapse>
-  </el-dialog>
+    <TestSuiteCreationDialog
+        :visible="dialogVisible"
+        @created="dialogVisible=false; loadStores()"/>
+
+    <TestSuiteImportDialog
+        :visible="importDialogVisible"
+        @created="importDialogVisible=false; loadStores()"/>
+
+    <LoginDialog
+        :visible="loginDialogVisible"/>
 </template>
 
 <style scoped>
diff --git a/console/atest-ui/src/views/__test__/cache.spec.ts b/console/atest-ui/src/views/__test__/cache.spec.ts
index d6fc93f7..8a95998e 100644
--- a/console/atest-ui/src/views/__test__/cache.spec.ts
+++ b/console/atest-ui/src/views/__test__/cache.spec.ts
@@ -14,39 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe } from 'node:test'
 import {Cache, SetPreference, TestCaseResponse, Store, Stores} from '../cache'
+import { SetupStorage } from './common'
 
-const localStorageMock = (() => {
-    let store = {};
-
-    return {
-        getItem(key) {
-            return store[key] || null;
-        },
-        setItem(key, value) {
-            store[key] = value.toString();
-        },
-        removeItem(key) {
-            delete store[key];
-        },
-        clear() {
-            store = {};
-        }
-    };
-})();
-
-Object.defineProperty(global, 'sessionStorage', {
-    value: localStorageMock
-});
-Object.defineProperty(global, 'localStorage', {
-    value: localStorageMock
-});
-Object.defineProperty(global, 'navigator', {
-    value: {
-        language: 'en'
-    }
-});
+SetupStorage()
 
 describe('TestCaseResponseCache', () => {
     test('should set and get test case response cache', () => {
diff --git a/console/atest-ui/src/views/__test__/common.ts b/console/atest-ui/src/views/__test__/common.ts
new file mode 100644
index 00000000..16d3f250
--- /dev/null
+++ b/console/atest-ui/src/views/__test__/common.ts
@@ -0,0 +1,48 @@
+/*
+Copyright 2024 API Testing Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export function SetupStorage() {
+    const localStorageMock = (() => {
+        let store = new Map<string, string>;
+
+        return {
+            getItem(key: string) {
+                return store.get(key) || null;
+            },
+            setItem(key: string, value: string) {
+                store.set(key, value);
+            },
+            removeItem(key: string) {
+                store.delete(key)
+            },
+            clear() {
+                store.clear();
+            }
+        };
+    })();
+
+    Object.defineProperty(global, 'sessionStorage', {
+        value: localStorageMock
+    });
+    Object.defineProperty(global, 'localStorage', {
+        value: localStorageMock
+    });
+    Object.defineProperty(global, 'navigator', {
+        value: {
+            language: 'en'
+        }
+    });
+}
diff --git a/console/atest-ui/src/views/__test__/net.spec.ts b/console/atest-ui/src/views/__test__/net.spec.ts
new file mode 100644
index 00000000..1d1840cc
--- /dev/null
+++ b/console/atest-ui/src/views/__test__/net.spec.ts
@@ -0,0 +1,81 @@
+/*
+Copyright 2024 API Testing Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {API} from '../net'
+import { type TestCase } from '../net'
+import { SetupStorage } from './common'
+import fetchMock from "jest-fetch-mock";
+
+fetchMock.enableMocks();
+SetupStorage()
+
+beforeEach(() => {
+    fetchMock.resetMocks();
+});
+
+describe('net', () => {
+    test('GetVersion', () => {
+        fetchMock.mockResponseOnce(`{"version":"v0.0.2"}`)
+        API.GetVersion((d) => {
+            expect(d.version).toEqual('v0.0.2')
+        })
+    })
+
+    test('CreateTestSuite', () => {
+        fetchMock.mockResponseOnce(`{"version":"v0.0.1"}`)
+        API.CreateTestSuite({
+            store: 'store',
+            name: 'name',
+            api: 'api',
+            kind: 'kind',
+        }, (d) => {
+            expect(d).toEqual({})
+        }, () => {})
+    })
+
+    test('UpdateTestSuite', () => {
+        API.UpdateTestSuite({}, () => {}, () => {})
+    })
+
+    test('GetTestSuite', () => {
+        API.GetTestSuite('fake', () => {}, () => {})
+    })
+
+    test('DeleteTestSuite', () => {
+        API.DeleteTestSuite('fake', () => {}, () => {})
+    })
+
+    test('ConvertTestSuite', () => {
+        API.ConvertTestSuite('fake', 'generator', () => {}, () => {})
+    })
+
+    test('DuplicateTestSuite', () => {
+        API.DuplicateTestSuite('source', 'target', () => {}, () => {})
+    })
+
+    test('GetTestSuiteYaml', () => {
+        API.GetTestSuiteYaml('fake', () => {}, () => {})
+    })
+
+    test('CreateTestCase', () => {
+        API.CreateTestCase({
+            suiteName: 'store',
+            name: 'name'
+        } as TestCase, (d) => {
+            expect(d).toEqual({})
+        }, () => {})
+    })
+})
diff --git a/console/atest-ui/src/views/__test__/store.spec.ts b/console/atest-ui/src/views/__test__/store.spec.ts
index b86b5c78..ae6717c1 100644
--- a/console/atest-ui/src/views/__test__/store.spec.ts
+++ b/console/atest-ui/src/views/__test__/store.spec.ts
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe } from "node:test";
 import {SupportedExtension, SupportedExtensions} from "../store";
 
 describe("SupportedExtensions", () => {
diff --git a/console/atest-ui/src/views/__test__/types.spec.ts b/console/atest-ui/src/views/__test__/types.spec.ts
index 734cfa0c..d48d34ea 100644
--- a/console/atest-ui/src/views/__test__/types.spec.ts
+++ b/console/atest-ui/src/views/__test__/types.spec.ts
@@ -14,22 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe } from 'node:test'
 import { NewSuggestedAPIsQuery, CreateFilter, GetHTTPMethods, FlattenObject } from '../types'
 import type { Pair } from '../types'
+import fetchMock from "jest-fetch-mock";
 
-const fakeFetch: { [key:string]:string; } = {};
-
-global.fetch = jest.fn((key: string) =>
-  Promise.resolve({
-    json: () => {
-      if (fakeFetch[key] === undefined) {
-        return Promise.resolve({})
-      }
-      return Promise.resolve(JSON.parse(fakeFetch[key]))
-    },
-  }),
-) as jest.Mock;
+fetchMock.enableMocks();
 
 describe('NewSuggestedAPIsQuery', () => {
   test('empty data', () => {
diff --git a/console/atest-ui/src/views/net.ts b/console/atest-ui/src/views/net.ts
index 0848b126..8fff988a 100644
--- a/console/atest-ui/src/views/net.ts
+++ b/console/atest-ui/src/views/net.ts
@@ -42,13 +42,13 @@ function safeToggleFunc(toggle?: (e: boolean) => void) {
   return toggle
 }
 
-function GetVersion(callback: (v: AppVersion) => void) {
+function GetVersion(callback?: (v: AppVersion) => void) {
   const requestOptions = {
     method: 'GET',
   }
   fetch('/api/v1/version', requestOptions)
   .then(DefaultResponseProcess)
-    .then(callback)
+    .then(emptyOrDefault(callback))
 }
 
 interface TestSuite {
@@ -75,7 +75,7 @@ function CreateTestSuite(suite: TestSuite,
 
   fetch('/api/v1/suites', requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 interface ImportSource {
@@ -96,11 +96,11 @@ function UpdateTestSuite(suite: any,
   }
   fetch(`/api/v1/suites/${suite.name}`, requestOptions)
   .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function GetTestSuite(name: string,
-  callback: (d: any) => void, errHandle: (e: any) => void) {
+  callback: (d: any) => void, errHandle?: (e: any) => void) {
   const store = Cache.GetCurrentStore()
   const requestOptions = {
     headers: {
@@ -110,7 +110,7 @@ function GetTestSuite(name: string,
   }
   fetch(`/api/v1/suites/${name}`, requestOptions)
   .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function DeleteTestSuite(name: string,
@@ -124,7 +124,7 @@ function DeleteTestSuite(name: string,
   }
   fetch(`/api/v1/suites/${name}`, requestOptions)
   .then(DefaultResponseProcess)
-  .then(callback).catch(errHandle)
+  .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function ConvertTestSuite(suiteName: string, genertor: string,
@@ -142,11 +142,11 @@ function ConvertTestSuite(suiteName: string, genertor: string,
   }
   fetch(`/api/v1/converters/convert`, requestOptions)
   .then(DefaultResponseProcess)
-  .then(callback).catch(errHandle)
+  .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function DuplicateTestSuite(sourceSuiteName: string, targetSuiteName: string,
-    callback: (d: any) => void, errHandle?: ((reason: any) => PromiseLike<never>) | undefined | null) {
+    callback: (d: any) => void, errHandle?: (e: any) => void | null) {
     const requestOptions = {
       method: 'POST',
       headers: {
@@ -168,8 +168,9 @@ function ImportTestSuite(source: ImportSource, callback: (d: any) => void,
   const requestOptions = {
     method: 'POST',
     headers: {
-      'X-Store-Name': source.store,
-      'X-Auth': getToken()
+        'Content-Type': 'application/json',
+        'X-Store-Name': source.store,
+        'X-Auth': getToken()
     },
     body: JSON.stringify(source)
   }
@@ -178,7 +179,7 @@ function ImportTestSuite(source: ImportSource, callback: (d: any) => void,
     then(DefaultResponseProcess).then(callback).catch(errHandle)
 }
 
-interface TestCase {
+export interface TestCase {
   suiteName: string
   name: string
   request: any
@@ -209,7 +210,7 @@ function CreateTestCase(testcase: TestCase,
 
   fetch(`/api/v1/suites/${testcase.suiteName}/cases`, requestOptions)
   .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function UpdateTestCase(testcase: any,
@@ -226,7 +227,7 @@ function UpdateTestCase(testcase: any,
     safeToggleFunc(toggle)(true)
     fetch(`/api/v1/suites/${testcase.suiteName}/cases/${testcase.data.name}`, requestOptions)
       .then(DefaultResponseProcess)
-      .then(callback).catch(errHandle)
+      .then(callback).catch(emptyOrDefault(errHandle))
       .finally(() => {
         safeToggleFunc(toggle)(false)
       })
@@ -242,7 +243,7 @@ function GetTestCase(req: TestCase,
   }
   fetch(`/api/v1/suites/${req.suiteName}/cases/${req.name}`, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function ListTestCase(suite: string, store: string,
@@ -255,7 +256,7 @@ function ListTestCase(suite: string, store: string,
   }
   fetch(`/api/v1/suites/${suite}/cases`, requestOptions)
   .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function DeleteTestCase(testcase: TestCase,
@@ -272,7 +273,7 @@ function DeleteTestCase(testcase: TestCase,
       })
     }
     fetch(`/api/v1/suites/${testcase.suiteName}/cases/${testcase.name}`, requestOptions)
-      .then(callback).catch(errHandle)
+      .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 interface RunTestCaseRequest {
@@ -297,7 +298,7 @@ function RunTestCase(request: RunTestCaseRequest,
   }
   fetch(`/api/v1/suites/${request.suiteName}/cases/${request.name}/run`, requestOptions)
   .then(DefaultResponseProcess)
-  .then(callback).catch(errHandle)
+  .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function DuplicateTestCase(sourceSuiteName: string, targetSuiteName: string,
@@ -344,7 +345,7 @@ function GenerateCode(request: GenerateRequest,
   }
   fetch(`/api/v1/codeGenerators/generate`, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function HistoryGenerateCode(request: GenerateRequest,
@@ -371,7 +372,7 @@ function ListCodeGenerator(callback: (d: any) => void, errHandle?: (e: any) => v
       'X-Auth': getToken()
     },
   }).then(DefaultResponseProcess)
-  .then(callback).catch(errHandle)
+  .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function PopularHeaders(callback: (d: any) => void, errHandle?: (e: any) => void | null) {
@@ -383,7 +384,7 @@ function PopularHeaders(callback: (d: any) => void, errHandle?: (e: any) => void
   }
   fetch(`/api/v1/popularHeaders`, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function CreateOrUpdateStore(payload: any, create: boolean,
@@ -406,13 +407,13 @@ function CreateOrUpdateStore(payload: any, create: boolean,
   safeToggleFunc(toggle)(true)
   fetch(api, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle).finally(() => {
+    .then(callback).catch(emptyOrDefault(errHandle)).finally(() => {
       safeToggleFunc(toggle)(false)
     })
 }
 
 function GetStores(callback: (d: any) => void,
-  errHandle?: (e: any) => void | null, final?: () => void | null) {
+  errHandle?: (e: any) => void | null, final?: () => void | undefined | null) {
   const requestOptions = {
     headers: {
       'X-Auth': getToken()
@@ -420,7 +421,7 @@ function GetStores(callback: (d: any) => void,
   }
   fetch('/api/v1/stores', requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle).finally(final)
+    .then(callback).catch(emptyOrDefault(errHandle)).finally(emptyOrDefault(final))
 }
 
 function DeleteStore(name: string,
@@ -433,7 +434,7 @@ function DeleteStore(name: string,
   }
   fetch(`/api/v1/stores/${name}`, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function VerifyStore(name: string,
@@ -451,7 +452,7 @@ function VerifyStore(name: string,
   const api = `/api/v1/stores/verify`
   fetch(api, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 export interface Secret {
@@ -468,11 +469,11 @@ function GetSecrets(callback: (d: any) => void, errHandle?: (e: any) => void | n
   fetch(`/api/v1/secrets`, requestOptions)
     .then(DefaultResponseProcess)
     .then(callback)
-    .catch(errHandle)
+    .catch(emptyOrDefault(errHandle))
 }
 
 function FunctionsQuery(filter: string,
-  callback: (d: any) => void, errHandle?: (e: any) => void | null) {
+  callback: (d: any) => void, errHandle?: (e: any) => (PromiseLike<void | null | undefined> | void | null | undefined) | undefined | null) {
   const requestOptions = {
     headers: {
       'X-Auth': getToken()
@@ -480,7 +481,7 @@ function FunctionsQuery(filter: string,
   }
   fetch(`/api/v1/functions?name=${filter}`, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle)
+    .then(callback).catch(emptyOrDefault(errHandle))
 }
 
 function DeleteSecret(name: string,
@@ -494,7 +495,7 @@ function DeleteSecret(name: string,
   fetch(`/api/v1/secrets/${name}`, requestOptions)
     .then(DefaultResponseProcess)
     .then(callback)
-    .catch(errHandle)
+    .catch(emptyOrDefault(errHandle))
 }
 
 function CreateOrUpdateSecret(payload: Secret, create: boolean,
@@ -517,7 +518,7 @@ function CreateOrUpdateSecret(payload: Secret, create: boolean,
   safeToggleFunc(toggle)(true)
   fetch(api, requestOptions)
     .then(DefaultResponseProcess)
-    .then(callback).catch(errHandle).finally(() => {
+    .then(callback).catch(emptyOrDefault(errHandle)).finally(() => {
       safeToggleFunc(toggle)(false)
     })
 }
@@ -578,7 +579,14 @@ const GetTestSuiteYaml = (suite: string, callback: (d: any) => void, errHandle?:
   fetch(`/api/v1/suites/${suite}/yaml`, requestOptions)
     .then(DefaultResponseProcess)
     .then(callback)
-    .catch(errHandle)
+    .catch(emptyOrDefault(errHandle))
+}
+
+function emptyOrDefault(fn: any) {
+    if (fn) {
+        return fn
+    }
+    return () => {}
 }
 
 function GetHistoryTestCaseWithResult(req: HistoryTestCase,
@@ -681,7 +689,7 @@ function DownloadResponseFile(testcase,
 export const API = {
   DefaultResponseProcess,
   GetVersion,
-  CreateTestSuite, UpdateTestSuite, ImportTestSuite, GetTestSuite, DeleteTestSuite, ConvertTestSuite,GetTestSuiteYaml,
+  CreateTestSuite, UpdateTestSuite, ImportTestSuite, GetTestSuite, DeleteTestSuite, ConvertTestSuite, DuplicateTestSuite, GetTestSuiteYaml,
   CreateTestCase, UpdateTestCase, GetTestCase, ListTestCase, DeleteTestCase, RunTestCase,
   GetHistoryTestCaseWithResult, DeleteHistoryTestCase,GetHistoryTestCase, GetTestCaseAllHistory, DeleteAllHistoryTestCase, DownloadResponseFile,
   GenerateCode, ListCodeGenerator, HistoryGenerateCode,
diff --git a/pkg/server/store_ext_manager.go b/pkg/server/store_ext_manager.go
index 3e5a7300..e8bbfdb1 100644
--- a/pkg/server/store_ext_manager.go
+++ b/pkg/server/store_ext_manager.go
@@ -18,7 +18,6 @@ package server
 import (
 	"context"
 	"errors"
-	"github.com/linuxsuren/api-testing/pkg/util/home"
 	"io"
 	"net/http"
 	"os"
@@ -27,6 +26,8 @@ import (
 	"syscall"
 	"time"
 
+	"github.com/linuxsuren/api-testing/pkg/util/home"
+
 	"github.com/linuxsuren/api-testing/pkg/downloader"
 	"github.com/linuxsuren/api-testing/pkg/logging"
 
@@ -127,7 +128,7 @@ func (s *storeExtManager) startPlugin(socketURL, plugin, pluginName string) (err
 	s.filesNeedToBeRemoved = append(s.filesNeedToBeRemoved, socketFile)
 	s.extStatusMap[pluginName] = true
 	if err = s.execer.RunCommandWithIO(plugin, "", os.Stdout, os.Stderr, s.processChan, "--socket", socketFile); err != nil {
-		serverLogger.Info("failed to start: ", socketURL, "error: ", err.Error())
+		serverLogger.Info("failed to start ext manager", "socket", socketURL, "error: ", err.Error())
 	}
 	return
 }