BIGTOP-4380: Display key filename after uploaded when adding host

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>

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,20 +31,31 @@
   }
 
   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',
     2: 'error',
     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"

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);