(incubator-uniffle) branch master updated: [#1985] fix(dashboard): Cannot display server info when refreshing the server page. (#1996)

[rickyma]

This is an automated email from the ASF dual-hosted git repository.

rickyma pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-uniffle.git


The following commit(s) were added to refs/heads/master by this push:
     new 30c137cd8 [#1985] fix(dashboard): Cannot display server info when 
refreshing the server page. (#1996)
30c137cd8 is described below

commit 30c137cd8277bbb39d225c3625b1763680e01a19
Author: yl09099 <33595968+yl09...@users.noreply.github.com>
AuthorDate: Thu Aug 1 10:58:08 2024 +0800

    [#1985] fix(dashboard): Cannot display server info when refreshing the 
server page. (#1996)
    
    ### What changes were proposed in this pull request?
    
    
![image](https://github.com/user-attachments/assets/bad4510b-ab93-440e-bfae-e7e96cee3f8e)
    
    This submission fixes these two problems:
    1. When the browser refreshes the address bar directly, the server list is 
not displayed;
    2. The menu item cannot be correctly selected;
    
    ### Why are the changes needed?
    
    Fix: #1985
    
    ### Does this PR introduce _any_ user-facing change?
    
    Yes.
    
    ### How was this patch tested?
    
    Interface view.
---
 .../src/main/webapp/src/components/LayoutPage.vue  | 26 +++++++++++++++++-----
 .../webapp/src/pages/serverstatus/NodeListPage.vue | 12 +++++-----
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/main/webapp/src/components/LayoutPage.vue 
b/dashboard/src/main/webapp/src/components/LayoutPage.vue
index a3ccbdcb7..ead2e7469 100644
--- a/dashboard/src/main/webapp/src/components/LayoutPage.vue
+++ b/dashboard/src/main/webapp/src/components/LayoutPage.vue
@@ -22,7 +22,7 @@
         <el-row>
           <el-col :span="24">
             <el-menu
-              :default-active="activeIndex1"
+              :default-active="currentActive"
               router
               class="el-menu-demo"
               mode="horizontal"
@@ -54,7 +54,7 @@
                   v-for="item in hostNameAndPorts"
                   :key="item.label"
                   index="/nullpage"
-                  @click="changeServer(item.label)"
+                  @click="handleChangeServer(item.label)"
                 >
                   <span>{{ item.label }}</span>
                 </el-menu-item>
@@ -83,7 +83,7 @@ import { useCurrentServerStore } from 
'@/store/useCurrentServerStore'
 
 export default {
   setup() {
-    const activeIndex1 = ref('1')
+    const currentActive = ref('0')
     const currentServerStore = useCurrentServerStore()
     const hostNameAndPorts = reactive([
       {
@@ -92,7 +92,20 @@ export default {
       }
     ])
 
-    function changeServer(key) {
+    /**
+     * Troubleshoot the problem that the browser refresh address menu cannot 
be selected.
+     */
+    function handleSelectMenu() {
+      const urlAddress = window.location.hash.toString().replace(/^#/, '')
+      const shuffleServerPage = '/shuffleserverpage'
+      if (urlAddress.startsWith(shuffleServerPage)) {
+        currentActive.value = shuffleServerPage
+      } else {
+        currentActive.value = urlAddress
+      }
+    }
+
+    function handleChangeServer(key) {
       currentServerStore.currentServer = key
     }
 
@@ -108,13 +121,14 @@ export default {
 
     onMounted(() => {
       getSelectCurrentServer()
+      handleSelectMenu()
     })
 
     return {
-      activeIndex1,
+      currentActive,
       currentServerStore,
       hostNameAndPorts,
-      changeServer
+      handleChangeServer
     }
   }
 }
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue 
b/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue
index bc6e87ef4..7c1ff41a8 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue
@@ -108,7 +108,7 @@
   </div>
 </template>
 <script>
-import { onMounted, reactive, watch, ref, inject } from 'vue'
+import { onMounted, reactive, watch, ref, inject, watchEffect } from 'vue'
 import { memFormatter, dateFormatter } from '@/utils/common'
 import { useRouter } from 'vue-router'
 import { useCurrentServerStore } from '@/store/useCurrentServerStore'
@@ -313,10 +313,12 @@ export default {
     }
 
     onMounted(() => {
-      // If the coordinator address to request is not found in the global 
variable, the request is not initiated.
-      if (currentServerStore.currentServer) {
-        loadPageData()
-      }
+      watchEffect(() => {
+        // If the coordinator address to request is not found in the global 
variable, the request is not initiated.
+        if (currentServerStore.currentServer) {
+          loadPageData()
+        }
+      })
     })
 
     watch(router.currentRoute, () => {