feat: support manage the secrets via UI (#193)

* feat: support manage the secrets via UI
2023-08-30 09:59:48 +08:00 · 2023-08-30 09:59:48 +08:00 · 9e525dc0c4
parent 0c32364fa2
commit 9e525dc0c4
5 changed files with 168 additions and 4 deletions
--- a/console/atest-ui/src/App.vue
+++ b/console/atest-ui/src/App.vue
@ -3,6 +3,7 @@ import WelcomePage from './views/WelcomePage.vue'
 import TestCase from './views/TestCase.vue'
 import TestSuite from './views/TestSuite.vue'
 import StoreManager from './views/StoreManager.vue'
+import SecretManager from './views/SecretManager.vue'
 import TemplateFunctions from './views/TemplateFunctions.vue'
 import { reactive, ref, watch } from 'vue'
 import { ElTree } from 'element-plus'
@ -250,6 +251,7 @@ const viewName = ref('')
  <div class="common-layout" data-title="Welcome!" data-intro="Welcome to use api-testing! 👋">
    <el-container style="height: 100%">
      <el-header style="height: 30px;justify-content: flex-end;">
+        <el-button type="primary" :icon="Edit" @click="viewName = 'secret'" data-intro="Manage the secrets."/>
        <el-button type="primary" :icon="Share" @click="viewName = 'store'" data-intro="Manage the store backends." />
      </el-header>

@ -300,6 +302,9 @@ const viewName = ref('')
            <StoreManager
            v-else-if="viewName === 'store'"
            />
+            <SecretManager
+            v-else-if="viewName === 'secret'"
+            />
          </el-main>
        </el-container>
      </el-main>
--- a/console/atest-ui/src/locales/en.json
+++ b/console/atest-ui/src/locales/en.json
@ -15,7 +15,9 @@
    "title": {
        "createTestSuite": "Create Test Suite",
        "createTestCase": "Create Test Case",
-        "createStore": "Create Store"
+        "createStore": "Create Store",
+        "createSecret": "Create Secret",
+        "secretManager": "Secret Manager"
    },
    "tip": {
        "filter": "Filter Keyword"
--- a/console/atest-ui/src/locales/zh.json
+++ b/console/atest-ui/src/locales/zh.json
@ -15,7 +15,9 @@
    "title": {
        "createTestSuite": "创建测试用例集",
        "createTestCase": "创建测试用例",
-        "createStore": "创建存储"
+        "createStore": "创建存储",
+        "createSecret": "创建凭据",
+        "secretManager": "凭据管理"
    },
    "tip": {
        "filter": "过滤"
--- a/console/atest-ui/src/views/SecretManager.vue
+++ b/console/atest-ui/src/views/SecretManager.vue
@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { reactive, ref } from 'vue'
+import { Edit, Delete } from '@element-plus/icons-vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const secrets = ref([] as Secret[])
+const dialogVisible = ref(false)
+const creatingLoading = ref(false)
+const secretFormRef = ref<FormInstance>()
+const secret = ref({} as Secret)
+const createAction = ref(true)
+const secretForm = reactive(secret)
+
+interface Secret {
+  Name: string
+  Value: string
+}
+
+function loadStores() {
+  const requestOptions = {
+    method: 'POST',
+  }
+  fetch('/server.Runner/GetSecrets', requestOptions)
+    .then((response) => response.json())
+    .then((e) => {
+      secrets.value = e.data
+    })
+    .catch((e) => {
+      ElMessage.error('Oops, ' + e)
+    })
+}
+loadStores()
+
+function deleteSecret(name: string) {
+  const requestOptions = {
+    method: 'POST',
+    body: JSON.stringify({
+      name: name
+    })
+  }
+  fetch('/server.Runner/DeleteSecret', requestOptions)
+    .then((response) => response.json())
+    .then((e) => {
+      ElMessage({
+        message: 'Deleted.',
+        type: 'success'
+      })
+      loadStores()
+    })
+    .catch((e) => {
+      ElMessage.error('Oops, ' + e)
+    })
+}
+
+function editSecret(name: string) {
+    dialogVisible.value = true
+    secrets.value.forEach((e: Secret) => {
+        if (e.Name === name) {
+            secret.value = e
+        }
+    })
+    createAction.value = false
+}
+
+function addSecret() {
+    dialogVisible.value = true
+    createAction.value = true
+}
+
+const rules = reactive<FormRules<Secret>>({
+  Name: [{ required: true, message: 'Name is required', trigger: 'blur' }]
+})
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid: boolean, fields) => {
+    if (valid) {
+      creatingLoading.value = true
+
+      const requestOptions = {
+        method: 'POST',
+        body: JSON.stringify(secret.value)
+      }
+      
+      let api = '/server.Runner/CreateSecret'
+      if (!createAction.value) {
+        api = '/server.Runner/UpdateSecret'
+      }
+
+      fetch(api, requestOptions)
+        .then((response) => response.json())
+        .then(() => {
+          creatingLoading.value = false
+          loadStores()
+          dialogVisible.value = false
+          formEl.resetFields()
+        })
+    }
+  })
+}
+
+</script>
+
+<template>
+    <div>{{t('title.secretManager')}}</div>
+    <div>
+        <el-button type="primary" @click="addSecret" :icon="Edit">{{t('button.new')}}</el-button>
+    </div>
+    <el-table :data="secrets" style="width: 100%">
+      <el-table-column :label="t('field.name')" width="180">
+        <template #default="scope">
+          <el-text class="mx-1">{{ scope.row.Name }}</el-text>
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('field.operations')" width="220">
+        <template #default="scope">
+          <div style="display: flex; align-items: center">
+            <el-button type="primary" @click="deleteSecret(scope.row.Name)" :icon="Delete">{{t('button.delete')}}</el-button>
+            <el-button type="primary" @click="editSecret(scope.row.Name)" :icon="Edit">{{t('button.edit')}}</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="dialogVisible" :title="t('title.createSecret')" width="30%" draggable>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-form
+          :rules="rules"
+          :model="secretForm"
+          ref="secretFormRef"
+          status-icon label-width="120px">
+          <el-form-item :label="t('field.name')" prop="Name">
+            <el-input v-model="secretForm.Name" test-id="secret-form-name" />
+          </el-form-item>
+          <el-form-item :label="t('field.password')" prop="Value">
+            <el-input v-model="secretForm.Value" type="password" test-id="secret-form-password" />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              @click="submitForm(secretFormRef)"
+              :loading="creatingLoading"
+              test-id="store-form-submit"
+              >{{t('button.submit')}}</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </span>
+    </template>
+  </el-dialog>
+</template>
--- a/go.work.sum
+++ b/go.work.sum
@ -545,8 +545,6 @@ github.com/ajstarks/svgo v0.0.0-20180226025133-644b8db467af/go.mod h1:K08gAheRH3
 github.com/ajstarks/svgo v0.0.0-20211024235047-1546f124cd8b/go.mod h1:1KcenG0jGWcpt8ov532z81sp/kMMUG485J2InIOyADM=
 github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
 github.com/antihax/optional v1.0.0/go.mod h1:uupD/76wgC+ih3iEmQUL+0Ugr19nfwCT1kdvxnR2qWY=
-github.com/antonmedv/expr v1.14.0 h1:C4BHw+0cVyKy/ndU3uqYo6TV5rCtq/SY2Wdlwanvo/Q=
-github.com/antonmedv/expr v1.14.0/go.mod h1:FPC8iWArxls7axbVLsW+kpg1mz29A1b2M6jt+hZfDkU=
 github.com/apache/arrow/go/v10 v10.0.1/go.mod h1:YvhnlEePVnBS4+0z3fhPfUy7W1Ikj0Ih0vcRo/gZ1M0=
 github.com/apache/arrow/go/v11 v11.0.0/go.mod h1:Eg5OsL5H+e299f7u5ssuXsuHQVEGC4xei5aX110hRiI=
 github.com/apache/thrift v0.16.0/go.mod h1:PHK3hniurgQaNMZYaCLEqXKsYK8upmhPbmdP2FXSqgU=
@ -567,6 +565,7 @@ github.com/cncf/xds/go v0.0.0-20210922020428-25de7278fc84/go.mod h1:eXthEFrGJvWH
 github.com/cncf/xds/go v0.0.0-20220314180256-7f1daf1720fc/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
 github.com/cncf/xds/go v0.0.0-20230105202645-06c439db220b/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
 github.com/cncf/xds/go v0.0.0-20230310173818-32f1caf87195/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
+github.com/cncf/xds/go v0.0.0-20230607035331-e9ce68804cb4 h1:/inchEIKaYC1Akx+H+gqO04wryn5h75LSazbRlnya1k=
 github.com/cncf/xds/go v0.0.0-20230607035331-e9ce68804cb4/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
 github.com/cockroachdb/datadriven v0.0.0-20190809214429-80d97fb3cbaa/go.mod h1:zn76sxSg3SzpJ0PPJaLDCu+Bu0Lg3sKTORVIj19EIF8=
 github.com/coreos/go-semver v0.2.0/go.mod h1:nnelYz7RCh+5ahJtPPxZlU+153eP4D4r3EedlOD2RNk=
@ -582,6 +581,7 @@ github.com/envoyproxy/go-control-plane v0.11.1-0.20230524094728-9239064ad72f/go.
 github.com/envoyproxy/protoc-gen-validate v0.6.7/go.mod h1:dyJXwwfPK2VSqiB9Klm1J6romD608Ba7Hij42vrOBCo=
 github.com/envoyproxy/protoc-gen-validate v0.9.1/go.mod h1:OKNgG7TCp5pF4d6XftA0++PMirau2/yoOwVac3AbF2w=
 github.com/envoyproxy/protoc-gen-validate v0.10.0/go.mod h1:DRjgyB0I43LtJapqN6NiRwroiAU2PaFuvk/vjgh61ss=
+github.com/envoyproxy/protoc-gen-validate v0.10.1 h1:c0g45+xCJhdgFGw7a5QAfdS4byAbud7miNWJ1WwEVf8=
 github.com/envoyproxy/protoc-gen-validate v0.10.1/go.mod h1:DRjgyB0I43LtJapqN6NiRwroiAU2PaFuvk/vjgh61ss=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 github.com/fogleman/gg v1.2.1-0.20190220221249-0403632d5b90/go.mod h1:R/bRT+9gY/C5z7JzPU0zXsXHKM4/ayA+zqcVNZzPa1k=