(incubator-uniffle) branch master updated: [#2152] improvement(dashboard): Add session cache to support refresh page of dashboard (#2238)

[maobaolong]

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

maobaolong 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 4db95c3c8 [#2152] improvement(dashboard): Add session cache to support 
refresh page of dashboard (#2238)
4db95c3c8 is described below

commit 4db95c3c883b338076d6ccaacd2aca7268e222e6
Author: kqhzz <kuangq...@gmail.com>
AuthorDate: Mon Nov 11 20:00:09 2024 +0800

    [#2152] improvement(dashboard): Add session cache to support refresh page 
of dashboard (#2238)
    
    ### Why are the changes needed?
    
    Fix: #2152
    
    ### Does this PR introduce _any_ user-facing change?
    
    No.
---
 dashboard/src/main/webapp/src/components/LayoutPage.vue       |  7 +++++--
 dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue | 10 ++++------
 dashboard/src/main/webapp/src/store/useCurrentServerStore.js  | 11 ++++++++---
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/main/webapp/src/components/LayoutPage.vue 
b/dashboard/src/main/webapp/src/components/LayoutPage.vue
index b96913022..2d55d539b 100644
--- a/dashboard/src/main/webapp/src/components/LayoutPage.vue
+++ b/dashboard/src/main/webapp/src/components/LayoutPage.vue
@@ -109,18 +109,21 @@ export default {
       }
     }
 
-    function handleChangeServer(key) {
+    const handleChangeServer = (key) => {
       currentServerStore.currentServer = key
     }
 
     async function getSelectCurrentServer() {
       const res = await getAllCoordinatorAddrees()
       const selectCurrentServer = res.data.data
-      currentServerStore.currentServer = Object.keys(selectCurrentServer)[0]
+      if (!currentServerStore.currentServer) {
+        currentServerStore.currentServer = Object.keys(selectCurrentServer)[0]
+      }
       hostNameAndPorts.length = 0
       Object.entries(selectCurrentServer).forEach(([key, value]) => {
         hostNameAndPorts.push({ value: value, label: key })
       })
+      hostNameAndPorts.sort((a, b) => a.label.localeCompare(b.label))
     }
 
     onMounted(() => {
diff --git a/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue 
b/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
index 9d0cc7a5c..f5b0b94ce 100644
--- a/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
+++ b/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import {
   getCoordinatorConf,
@@ -196,11 +196,9 @@ export default {
     /**
      * The system obtains data from global variables and requests the 
interface to obtain new data after data changes.
      */
-    currentServerStore.$subscribe((mutable, state) => {
-      if (state.currentServer) {
-        getCoordinatorServerConfPage()
-        getCoorServerInfo()
-      }
+    watch(() => currentServerStore.currentServer, () => {
+      getCoordinatorServerConfPage()
+      getCoorServerInfo()
     })
 
     onMounted(() => {
diff --git a/dashboard/src/main/webapp/src/store/useCurrentServerStore.js 
b/dashboard/src/main/webapp/src/store/useCurrentServerStore.js
index f03375164..a9ecd56d6 100644
--- a/dashboard/src/main/webapp/src/store/useCurrentServerStore.js
+++ b/dashboard/src/main/webapp/src/store/useCurrentServerStore.js
@@ -16,13 +16,18 @@
  */
 
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 /**
  * Create a global shared repository that allows you to share state across 
components/pages.
  * @type {StoreDefinition<"overall", 
_ExtractStateFromSetupStore<{currentServer: Ref<UnwrapRef<string>>}>, 
_ExtractGettersFromSetupStore<{currentServer: Ref<UnwrapRef<string>>}>, 
_ExtractActionsFromSetupStore<{currentServer: Ref<UnwrapRef<string>>}>>}
  */
 export const useCurrentServerStore = defineStore('overall', () => {
-  const currentServer = ref('')
-  return { currentServer }
+    const currentServer = ref(sessionStorage.getItem('currentServer'))
+
+    watch(currentServer, (newVal) => {
+        sessionStorage.setItem('currentServer', newVal)
+    })
+
+    return { currentServer }
 })