This is an automated email from the ASF dual-hosted git repository.
wuzhiguo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/bigtop-manager.git
The following commit(s) were added to refs/heads/main by this push:
new 4a4d8a15 BIGTOP-4380: Display key filename after uploaded when adding
host (#187)
4a4d8a15 is described below
commit 4a4d8a154d32e1ec6290dd05dd362a9dddc9b26c
Author: Fdefined <[email protected]>
AuthorDate: Mon Mar 3 00:14:45 2025 +0800
BIGTOP-4380: Display key filename after uploaded when adding host (#187)
---
bigtop-manager-ui/src/layouts/index.vue | 2 +-
bigtop-manager-ui/src/layouts/sider.vue | 21 ++++++++---
.../src/pages/cluster-manage/hosts/create.vue | 43 ++++++----------------
3 files changed, 29 insertions(+), 37 deletions(-)
diff --git a/bigtop-manager-ui/src/layouts/index.vue
b/bigtop-manager-ui/src/layouts/index.vue
index c48ab595..f36aca0a 100644
--- a/bigtop-manager-ui/src/layouts/index.vue
+++ b/bigtop-manager-ui/src/layouts/index.vue
@@ -55,7 +55,7 @@
@on-sider-click="menuStore.onSiderClick"
/>
<a-layout class="layout-inner">
- <router-view />
+ <router-view :key="$route.fullPath" />
<layout-footer />
</a-layout>
</a-layout>
diff --git a/bigtop-manager-ui/src/layouts/sider.vue
b/bigtop-manager-ui/src/layouts/sider.vue
index bdb988b0..ba88658d 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -18,7 +18,7 @@
-->
<script setup lang="ts">
- import { toRefs, ref } from 'vue'
+ import { toRefs, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { RouteExceptions } from '@/enums'
import { useMenuStore } from '@/store/menu'
@@ -31,13 +31,13 @@
}
const props = withDefaults(defineProps<Props>(), {
- siderMenuSelectedKey: '',
- siderMenus: () => []
+ siderMenuSelectedKey: ''
})
- const { siderMenuSelectedKey, siderMenus } = toRefs(props)
+ const { siderMenuSelectedKey } = toRefs(props)
const router = useRouter()
const menuStore = useMenuStore()
+ const menus = ref<MenuItem[]>([])
const emits = defineEmits(['onSiderClick'])
const clusterStatus = ref<Record<ClusterStatusType, string>>({
1: 'success',
@@ -45,6 +45,17 @@
3: 'warning'
})
+ watch(
+ () => props.siderMenus,
+ (val) => {
+ menus.value = []
+ menus.value = val
+ },
+ {
+ deep: true
+ }
+ )
+
const toggleActivatedIcon = (menuItem: MenuItem) => {
const { key, icon } = menuItem
if (menuStore.isDynamicRouteMatched) {
@@ -66,7 +77,7 @@
<template>
<a-layout-sider class="sider">
<a-menu :selected-keys="[siderMenuSelectedKey]" mode="inline"
@select="onSiderClick">
- <template v-for="menuItem in siderMenus" :key="menuItem.key">
+ <template v-for="menuItem in menus" :key="menuItem.key">
<a-sub-menu
v-if="menuItem.children && menuItem.name ===
RouteExceptions.SPECIAL_ROUTE_NAME"
:key="menuItem.key"
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
index 8a946e3b..5354a8ae 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
@@ -49,6 +49,7 @@
const hiddenItems = ref<string[]>([])
const autoFormRef = ref<Comp.AutoFormInstance | null>(null)
const formValue = ref<HostReq & { hostname?: string }>({})
+ const fileName = ref('')
const { locale } = storeToRefs(localeStore)
const isEdit = computed(() => mode.value === 'EDIT')
@@ -163,7 +164,7 @@
}
},
{
- type: 'input',
+ type: 'inputPassword',
field: 'sshKeyPassword',
formItemProps: {
name: 'sshKeyPassword',
@@ -174,7 +175,7 @@
}
},
{
- type: 'textarea',
+ type: 'inputPassword',
field: 'sshKeyPasswordAgain',
formItemProps: {
name: 'sshKeyPasswordAgain',
@@ -428,6 +429,7 @@
authType: '1',
inputType: '1'
}
+ fileName.value = ''
open.value = false
}
@@ -452,16 +454,16 @@
formData.append('file', file)
const data = await uploadFile(formData)
formValue.value!.sshKeyFilename = data
+ fileName.value = file.name
onSuccess(data, file)
message.success(t('common.upload_success'))
} catch (error) {
onError(error)
message.error(t('common.upload_failed'))
+ fileName.value = ''
}
}
- const fileList = ref()
-
defineExpose({
handleOpen
})
@@ -492,7 +494,7 @@
<template #sshKeyFilenameSlot="{ item }">
<a-form-item v-bind="item.formItemProps">
<a-upload
- :file-list="fileList"
+ accept="text/plain"
:before-upload="beforeUpload"
:custom-request="customRequest"
:show-upload-list="false"
@@ -502,34 +504,9 @@
{{ $t('common.upload_file') }}
</a-button>
</a-upload>
+ <span class="filename">{{ fileName }}</span>
</a-form-item>
</template>
- <!-- <template #agentDirSlot="{ item, state }">
- <a-form-item>
- <template #label>
- <div class="question">
- <span>
- {{ item.formItemProps?.label }}
- </span>
- <svg-icon style="padding: 1px 0 0 0" name="question" />
- </div>
- </template>
- <a-input v-bind="item.controlProps"
v-model:value="state[item.field]" />
- </a-form-item>
- </template> -->
- <!-- <template #grpcPortSlot="{ item, state }">
- <a-form-item>
- <template #label>
- <div class="question">
- <span>
- {{ item.formItemProps?.label }}
- </span>
- <svg-icon style="padding: 1px 0 0 0" name="question" />
- </div>
- </template>
- <a-input v-bind="item.controlProps"
v-model:value="state[item.field]" />
- </a-form-item>
- </template> -->
</auto-form>
<template #footer>
<footer>
@@ -551,6 +528,10 @@
.question {
cursor: pointer;
}
+ .filename {
+ color: $color-primary;
+ padding-inline: $space-sm;
+ }
footer {
width: 100%;
@include flexbox($justify: flex-end);
