feat: support manage the secrets via UI (#193)
* feat: support manage the secrets via UI
This commit is contained in:
parent
0c32364fa2
commit
9e525dc0c4
|
@ -3,6 +3,7 @@ import WelcomePage from './views/WelcomePage.vue'
|
||||||
import TestCase from './views/TestCase.vue'
|
import TestCase from './views/TestCase.vue'
|
||||||
import TestSuite from './views/TestSuite.vue'
|
import TestSuite from './views/TestSuite.vue'
|
||||||
import StoreManager from './views/StoreManager.vue'
|
import StoreManager from './views/StoreManager.vue'
|
||||||
|
import SecretManager from './views/SecretManager.vue'
|
||||||
import TemplateFunctions from './views/TemplateFunctions.vue'
|
import TemplateFunctions from './views/TemplateFunctions.vue'
|
||||||
import { reactive, ref, watch } from 'vue'
|
import { reactive, ref, watch } from 'vue'
|
||||||
import { ElTree } from 'element-plus'
|
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! 👋">
|
<div class="common-layout" data-title="Welcome!" data-intro="Welcome to use api-testing! 👋">
|
||||||
<el-container style="height: 100%">
|
<el-container style="height: 100%">
|
||||||
<el-header style="height: 30px;justify-content: flex-end;">
|
<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-button type="primary" :icon="Share" @click="viewName = 'store'" data-intro="Manage the store backends." />
|
||||||
</el-header>
|
</el-header>
|
||||||
|
|
||||||
|
@ -300,6 +302,9 @@ const viewName = ref('')
|
||||||
<StoreManager
|
<StoreManager
|
||||||
v-else-if="viewName === 'store'"
|
v-else-if="viewName === 'store'"
|
||||||
/>
|
/>
|
||||||
|
<SecretManager
|
||||||
|
v-else-if="viewName === 'secret'"
|
||||||
|
/>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-main>
|
</el-main>
|
||||||
|
|
|
@ -15,7 +15,9 @@
|
||||||
"title": {
|
"title": {
|
||||||
"createTestSuite": "Create Test Suite",
|
"createTestSuite": "Create Test Suite",
|
||||||
"createTestCase": "Create Test Case",
|
"createTestCase": "Create Test Case",
|
||||||
"createStore": "Create Store"
|
"createStore": "Create Store",
|
||||||
|
"createSecret": "Create Secret",
|
||||||
|
"secretManager": "Secret Manager"
|
||||||
},
|
},
|
||||||
"tip": {
|
"tip": {
|
||||||
"filter": "Filter Keyword"
|
"filter": "Filter Keyword"
|
||||||
|
|
|
@ -15,7 +15,9 @@
|
||||||
"title": {
|
"title": {
|
||||||
"createTestSuite": "创建测试用例集",
|
"createTestSuite": "创建测试用例集",
|
||||||
"createTestCase": "创建测试用例",
|
"createTestCase": "创建测试用例",
|
||||||
"createStore": "创建存储"
|
"createStore": "创建存储",
|
||||||
|
"createSecret": "创建凭据",
|
||||||
|
"secretManager": "凭据管理"
|
||||||
},
|
},
|
||||||
"tip": {
|
"tip": {
|
||||||
"filter": "过滤"
|
"filter": "过滤"
|
||||||
|
|
|
@ -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>
|
|
@ -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/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/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/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/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/arrow/go/v11 v11.0.0/go.mod h1:Eg5OsL5H+e299f7u5ssuXsuHQVEGC4xei5aX110hRiI=
|
||||||
github.com/apache/thrift v0.16.0/go.mod h1:PHK3hniurgQaNMZYaCLEqXKsYK8upmhPbmdP2FXSqgU=
|
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-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-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-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/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/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=
|
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.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.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.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/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/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=
|
github.com/fogleman/gg v1.2.1-0.20190220221249-0403632d5b90/go.mod h1:R/bRT+9gY/C5z7JzPU0zXsXHKM4/ayA+zqcVNZzPa1k=
|
||||||
|
|
Loading…
Reference in New Issue