From 2c492654d890a4f9db87fd46125aeb87de11497a Mon Sep 17 00:00:00 2001
From: yl09099 <shaq376260428@qq.com>
Date: Thu, 13 Jun 2024 10:29:43 +0800
Subject: [PATCH] [#1778][Improvement] Dashboard adds the ability to
 automatically format code.

---
 dashboard/src/main/webapp/.eslintignore       |  4 +
 dashboard/src/main/webapp/.eslintrc.js        | 14 +--
 dashboard/src/main/webapp/.prettierrc.json    | 26 +++++
 dashboard/src/main/webapp/babel.config.js     |  4 +-
 dashboard/src/main/webapp/jsconfig.json       | 11 +--
 .../main/webapp/packagescript/cleanfile.js    | 18 ++--
 .../src/main/webapp/packagescript/filecopy.js | 10 +-
 .../main/webapp/packagescript/fileutils.js    | 52 +++++-----
 dashboard/src/main/webapp/public/index.html   | 15 +--
 dashboard/src/main/webapp/src/App.vue         |  2 +-
 dashboard/src/main/webapp/src/api/api.js      | 28 +++---
 .../main/webapp/src/components/LayoutPage.vue | 44 +++++----
 dashboard/src/main/webapp/src/main.js         | 24 ++---
 .../main/webapp/src/pages/ApplicationPage.vue | 48 +++++-----
 .../src/pages/CoordinatorServerPage.vue       | 55 +++++------
 .../webapp/src/pages/ShuffleServerPage.vue    | 40 ++++----
 .../pages/serverstatus/ActiveNodeListPage.vue | 67 ++++++++-----
 .../DecommissionednodeListPage.vue            | 69 +++++++------
 .../DecommissioningNodeListPage.vue           | 71 ++++++++------
 .../pages/serverstatus/ExcludeNodeList.vue    | 22 ++---
 .../src/pages/serverstatus/LostNodeList.vue   | 71 ++++++++------
 .../serverstatus/UnhealthyNodeListPage.vue    | 70 ++++++++------
 dashboard/src/main/webapp/src/router/index.js | 96 +++++++++----------
 .../webapp/src/store/useCurrentServerStore.js | 12 +--
 dashboard/src/main/webapp/src/utils/common.js | 26 ++---
 dashboard/src/main/webapp/src/utils/http.js   | 38 ++++----
 .../src/main/webapp/src/utils/request.js      | 56 +++++------
 dashboard/src/main/webapp/vue.config.js       | 16 ++--
 28 files changed, 552 insertions(+), 457 deletions(-)
 create mode 100644 dashboard/src/main/webapp/.eslintignore
 create mode 100644 dashboard/src/main/webapp/.prettierrc.json

diff --git a/dashboard/src/main/webapp/.eslintignore b/dashboard/src/main/webapp/.eslintignore
new file mode 100644
index 0000000000..952e9f633e
--- /dev/null
+++ b/dashboard/src/main/webapp/.eslintignore
@@ -0,0 +1,4 @@
+/node_modules
+/package-lock.json
+/dist
+.DS_Store
\ No newline at end of file
diff --git a/dashboard/src/main/webapp/.eslintrc.js b/dashboard/src/main/webapp/.eslintrc.js
index e05fa6948d..71e913eecd 100644
--- a/dashboard/src/main/webapp/.eslintrc.js
+++ b/dashboard/src/main/webapp/.eslintrc.js
@@ -20,12 +20,14 @@ module.exports = {
     browser: true,
     commonjs: true,
     es2021: true,
-    node: true,
+    node: true
   },
-  extends: ["plugin:vue/essential", "standard", "@vue/prettier"],
+  extends: ['plugin:vue/essential', 'standard', '@vue/prettier'],
   parserOptions: {
-    ecmaVersion: 12,
+    ecmaVersion: 13
   },
-  plugins: ["vue"],
-  rules: {},
-};
+  plugins: ['vue'],
+  rules: {
+    quotes: [2, 'single']
+  }
+}
diff --git a/dashboard/src/main/webapp/.prettierrc.json b/dashboard/src/main/webapp/.prettierrc.json
new file mode 100644
index 0000000000..933d6fbea2
--- /dev/null
+++ b/dashboard/src/main/webapp/.prettierrc.json
@@ -0,0 +1,26 @@
+{
+  "___asflicense__": [
+    "",
+    "Licensed to the Apache Software Foundation (ASF) under one",
+    "or more contributor license agreements.  See the NOTICE file",
+    "distributed with this work for additional information",
+    "regarding copyright ownership.  The ASF licenses this file",
+    "to you under the Apache License, Version 2.0 (the",
+    "\"License\"); you may not use this file except in compliance",
+    "with the License.  You may obtain a copy of the License at",
+    "",
+    "     http://www.apache.org/licenses/LICENSE-2.0",
+    "",
+    "Unless required by applicable law or agreed to in writing, software",
+    "distributed under the License is distributed on an \"AS IS\" BASIS,",
+    "WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.",
+    "See the License for the specific language governing permissions and",
+    "limitations under the License."
+  ],
+
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
diff --git a/dashboard/src/main/webapp/babel.config.js b/dashboard/src/main/webapp/babel.config.js
index 5e4045d0e3..8f440e2115 100644
--- a/dashboard/src/main/webapp/babel.config.js
+++ b/dashboard/src/main/webapp/babel.config.js
@@ -16,5 +16,5 @@
  */
 
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
+  presets: ['@vue/cli-plugin-babel/preset']
+}
diff --git a/dashboard/src/main/webapp/jsconfig.json b/dashboard/src/main/webapp/jsconfig.json
index bb01e412c4..ee50273037 100644
--- a/dashboard/src/main/webapp/jsconfig.json
+++ b/dashboard/src/main/webapp/jsconfig.json
@@ -23,15 +23,8 @@
     "baseUrl": "./",
     "moduleResolution": "node",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   }
 }
diff --git a/dashboard/src/main/webapp/packagescript/cleanfile.js b/dashboard/src/main/webapp/packagescript/cleanfile.js
index ed5d24efde..bd4af60cfd 100644
--- a/dashboard/src/main/webapp/packagescript/cleanfile.js
+++ b/dashboard/src/main/webapp/packagescript/cleanfile.js
@@ -15,19 +15,19 @@
  * limitations under the License.
  */
 
-const fs = require("fs");
-const p = require("path");
+const fs = require('fs')
+const p = require('path')
 
-const nodeModulesPath = p.join(__dirname, "../node_modules");
-const lockJsonPath = p.join(__dirname, "../package-lock.json");
+const nodeModulesPath = p.join(__dirname, '../node_modules')
+const lockJsonPath = p.join(__dirname, '../package-lock.json')
 
 if (fs.existsSync(nodeModulesPath)) {
-  const fileUtil = require("./fileutils");
+  const fileUtil = require('./fileutils')
 
   // fileUtil.deleteFolderByRimraf(nodeModulesPath)
-  fileUtil.deleteFolder(nodeModulesPath);
-  console.log("Deleted node_modules successfully!");
+  fileUtil.deleteFolder(nodeModulesPath)
+  console.log('Deleted node_modules successfully!')
 
-  fileUtil.deleteFile(lockJsonPath);
-  console.log("Delete package-lock.json successfully!");
+  fileUtil.deleteFile(lockJsonPath)
+  console.log('Delete package-lock.json successfully!')
 }
diff --git a/dashboard/src/main/webapp/packagescript/filecopy.js b/dashboard/src/main/webapp/packagescript/filecopy.js
index a4519fedee..9966d0a86d 100644
--- a/dashboard/src/main/webapp/packagescript/filecopy.js
+++ b/dashboard/src/main/webapp/packagescript/filecopy.js
@@ -15,12 +15,12 @@
  * limitations under the License.
  */
 
-const fileUtil = require("./fileutils");
+const fileUtil = require('./fileutils')
 
 // Destination folder
-const staticDirectory = "../resources/static";
+const staticDirectory = '../resources/static'
 // Delete
-fileUtil.deleteFolder(staticDirectory);
+fileUtil.deleteFolder(staticDirectory)
 // Copy
-fileUtil.copyFolder("./dist", staticDirectory);
-console.log("File copy successful!");
+fileUtil.copyFolder('./dist', staticDirectory)
+console.log('File copy successful!')
diff --git a/dashboard/src/main/webapp/packagescript/fileutils.js b/dashboard/src/main/webapp/packagescript/fileutils.js
index bea83f9c51..7021b3d4fe 100644
--- a/dashboard/src/main/webapp/packagescript/fileutils.js
+++ b/dashboard/src/main/webapp/packagescript/fileutils.js
@@ -15,29 +15,29 @@
  * limitations under the License.
  */
 
-const fs = require("fs");
-const pathName = require("path");
+const fs = require('fs')
+const pathName = require('path')
 
 /**
  * Delete folder
  * @param path Path of the folder to be deleted
  */
 function deleteFolder(path) {
-  let files = [];
+  let files = []
   if (fs.existsSync(path)) {
     if (fs.statSync(path).isDirectory()) {
-      files = fs.readdirSync(path);
+      files = fs.readdirSync(path)
       files.forEach((file) => {
-        const curPath = path + "/" + file;
+        const curPath = path + '/' + file
         if (fs.statSync(curPath).isDirectory()) {
-          deleteFolder(curPath);
+          deleteFolder(curPath)
         } else {
-          fs.unlinkSync(curPath);
+          fs.unlinkSync(curPath)
         }
-      });
-      fs.rmdirSync(path);
+      })
+      fs.rmdirSync(path)
     } else {
-      fs.unlinkSync(path);
+      fs.unlinkSync(path)
     }
   }
 }
@@ -49,9 +49,9 @@ function deleteFolder(path) {
 function deleteFile(path) {
   if (fs.existsSync(path)) {
     if (fs.statSync(path).isDirectory()) {
-      deleteFolder(path);
+      deleteFolder(path)
     } else {
-      fs.unlinkSync(path);
+      fs.unlinkSync(path)
     }
   }
 }
@@ -62,36 +62,36 @@ function deleteFile(path) {
  * @param to Target directory
  */
 function copyFolder(from, to) {
-  let files = [];
+  let files = []
   // Whether the file exists If it does not exist, it is created
   if (fs.existsSync(to)) {
-    files = fs.readdirSync(from);
+    files = fs.readdirSync(from)
     files.forEach((file) => {
-      const targetPath = from + "/" + file;
-      const toPath = to + "/" + file;
+      const targetPath = from + '/' + file
+      const toPath = to + '/' + file
 
       // Copy folder
       if (fs.statSync(targetPath).isDirectory()) {
-        copyFolder(targetPath, toPath);
+        copyFolder(targetPath, toPath)
       } else {
         // Copy file
-        fs.copyFileSync(targetPath, toPath);
+        fs.copyFileSync(targetPath, toPath)
       }
-    });
+    })
   } else {
-    mkdirsSync(to);
-    copyFolder(from, to);
+    mkdirsSync(to)
+    copyFolder(from, to)
   }
 }
 
 // Create a directory synchronization method recursively
 function mkdirsSync(dirname) {
   if (fs.existsSync(dirname)) {
-    return true;
+    return true
   } else {
     if (mkdirsSync(pathName.dirname(dirname))) {
-      fs.mkdirSync(dirname);
-      return true;
+      fs.mkdirSync(dirname)
+      return true
     }
   }
 }
@@ -99,5 +99,5 @@ function mkdirsSync(dirname) {
 module.exports = {
   deleteFolder,
   deleteFile,
-  copyFolder,
-};
+  copyFolder
+}
diff --git a/dashboard/src/main/webapp/public/index.html b/dashboard/src/main/webapp/public/index.html
index d703f0fe3a..6d36f664eb 100644
--- a/dashboard/src/main/webapp/public/index.html
+++ b/dashboard/src/main/webapp/public/index.html
@@ -15,18 +15,21 @@
   ~ limitations under the License.
   -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
+        JavaScript enabled. Please enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/dashboard/src/main/webapp/src/App.vue b/dashboard/src/main/webapp/src/App.vue
index deaa982ad1..1eb251396e 100644
--- a/dashboard/src/main/webapp/src/App.vue
+++ b/dashboard/src/main/webapp/src/App.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import LayoutPage from "@/components/LayoutPage";
+import LayoutPage from '@/components/LayoutPage'
 export default {
   name: 'App',
   components: {
diff --git a/dashboard/src/main/webapp/src/api/api.js b/dashboard/src/main/webapp/src/api/api.js
index e381c750b6..155759a284 100644
--- a/dashboard/src/main/webapp/src/api/api.js
+++ b/dashboard/src/main/webapp/src/api/api.js
@@ -15,68 +15,68 @@
  * limitations under the License.
  */
 
-import http from "@/utils/http";
+import http from '@/utils/http'
 // Create a Coordinator information interface
 export function getCoordinatorServerInfo(params, headers) {
-  return http.get("/coordinator/info", params, headers, 0);
+  return http.get('/coordinator/info', params, headers, 0)
 }
 
 // Create a coordinator configuration file interface
 export function getCoordinatorConf(params, headers) {
-  return http.get("/coordinator/conf", params, headers, 0);
+  return http.get('/coordinator/conf', params, headers, 0)
 }
 
 // Create an interface for the total number of nodes
 export function getShufflegetStatusTotal(params, headers) {
-  return http.get("/server/nodes/summary", params, headers, 0);
+  return http.get('/server/nodes/summary', params, headers, 0)
 }
 
 // Create an interface for activeNodes
 export function getShuffleActiveNodes(params, headers) {
-  return http.get("/server/nodes?status=active", params, headers, 0);
+  return http.get('/server/nodes?status=active', params, headers, 0)
 }
 
 // Create an interface for lostNodes
 export function getShuffleLostList(params, headers) {
-  return http.get("/server/nodes?status=lost", params, headers, 0);
+  return http.get('/server/nodes?status=lost', params, headers, 0)
 }
 
 // Create an interface for unhealthyNodes
 export function getShuffleUnhealthyList(params, headers) {
-  return http.get("/server/nodes?status=unhealthy", params, headers, 0);
+  return http.get('/server/nodes?status=unhealthy', params, headers, 0)
 }
 
 // Create an interface for decommissioningNodes
 export function getShuffleDecommissioningList(params, headers) {
-  return http.get("/server/nodes?status=decommissioning", params, headers, 0);
+  return http.get('/server/nodes?status=decommissioning', params, headers, 0)
 }
 
 // Create an interface for decommissionedNodes
 export function getShuffleDecommissionedList(params, headers) {
-  return http.get("/server/nodes?status=decommissioned", params, headers, 0);
+  return http.get('/server/nodes?status=decommissioned', params, headers, 0)
 }
 
 // Create an interface for excludeNodes
 export function getShuffleExcludeNodes(params, headers) {
-  return http.get("/server/nodes?status=excluded", params, headers, 0);
+  return http.get('/server/nodes?status=excluded', params, headers, 0)
 }
 
 // Total number of interfaces for new App
 export function getAppTotal(params, headers) {
-  return http.get("/app/total", params, headers, 0);
+  return http.get('/app/total', params, headers, 0)
 }
 
 // Create an interface for the app basic information list
 export function getApplicationInfoList(params, headers) {
-  return http.get("/app/appInfos", params, headers, 0);
+  return http.get('/app/appInfos', params, headers, 0)
 }
 
 // Create an interface for the number of apps for a user
 export function getTotalForUser(params, headers) {
-  return http.get("/app/userTotal", params, headers, 0);
+  return http.get('/app/userTotal', params, headers, 0)
 }
 
 // Obtain the configured coordinator server list
 export function getAllCoordinatorAddrees(params, headers) {
-  return http.get("/coordinator/coordinatorServers", params, headers, 1);
+  return http.get('/coordinator/coordinatorServers', params, headers, 1)
 }
diff --git a/dashboard/src/main/webapp/src/components/LayoutPage.vue b/dashboard/src/main/webapp/src/components/LayoutPage.vue
index aa24a3847a..a3ccbdcb71 100644
--- a/dashboard/src/main/webapp/src/components/LayoutPage.vue
+++ b/dashboard/src/main/webapp/src/components/LayoutPage.vue
@@ -22,17 +22,18 @@
         <el-row>
           <el-col :span="24">
             <el-menu
-                :default-active="activeIndex1"
-                router
-                class="el-menu-demo"
-                mode="horizontal"
-                background-color="#20B2AA"
-                box-shadow="0 -2px 8px 0 rgba(0,0,0,0.12)"
-                text-color="#fff"
-                active-text-color="#ffd04b">
+              :default-active="activeIndex1"
+              router
+              class="el-menu-demo"
+              mode="horizontal"
+              background-color="#20B2AA"
+              box-shadow="0 -2px 8px 0 rgba(0,0,0,0.12)"
+              text-color="#fff"
+              active-text-color="#ffd04b"
+            >
               <el-menu-item index="0">
                 <div class="unffilelogo">
-                  <img src="../assets/uniffle-logo.png" alt="unffile">
+                  <img src="../assets/uniffle-logo.png" alt="unffile" />
                 </div>
               </el-menu-item>
               <el-menu-item index="/coordinatorserverpage">
@@ -50,10 +51,11 @@
               <el-sub-menu index="">
                 <template #title>Switching server</template>
                 <el-menu-item
-                    v-for="item in hostNameAndPorts"
-                    :key="item.label"
-                    index="/nullpage"
-                    @click="changeServer(item.label)">
+                  v-for="item in hostNameAndPorts"
+                  :key="item.label"
+                  index="/nullpage"
+                  @click="changeServer(item.label)"
+                >
                   <span>{{ item.label }}</span>
                 </el-menu-item>
               </el-sub-menu>
@@ -75,9 +77,9 @@
 </template>
 
 <script>
-import {ref, reactive, onMounted} from 'vue'
-import {getAllCoordinatorAddrees} from '@/api/api'
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { ref, reactive, onMounted } from 'vue'
+import { getAllCoordinatorAddrees } from '@/api/api'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
@@ -96,11 +98,11 @@ export default {
 
     async function getSelectCurrentServer() {
       const res = await getAllCoordinatorAddrees()
-      const  selectCurrentServer = res.data.data
+      const selectCurrentServer = res.data.data
       currentServerStore.currentServer = Object.keys(selectCurrentServer)[0]
       hostNameAndPorts.length = 0
       Object.entries(selectCurrentServer).forEach(([key, value]) => {
-        hostNameAndPorts.push({"value": value, "label": key})
+        hostNameAndPorts.push({ value: value, label: key })
       })
     }
 
@@ -112,7 +114,7 @@ export default {
       activeIndex1,
       currentServerStore,
       hostNameAndPorts,
-      changeServer,
+      changeServer
     }
   }
 }
@@ -125,7 +127,7 @@ a {
 }
 
 .unffilelogo {
-  background-color: #20B2AA;
+  background-color: #20b2aa;
   height: 100%;
   position: relative;
 }
@@ -135,7 +137,7 @@ a {
 }
 
 .currentserver {
-  font-family: "Andale Mono";
+  font-family: 'Andale Mono';
   font-size: smaller;
   color: yellow;
 }
diff --git a/dashboard/src/main/webapp/src/main.js b/dashboard/src/main/webapp/src/main.js
index e47c558aee..4ab2741340 100644
--- a/dashboard/src/main/webapp/src/main.js
+++ b/dashboard/src/main/webapp/src/main.js
@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 
-import { createApp } from "vue";
-import { createPinia } from "pinia";
-import App from "./App.vue";
-import ElementPlus from "element-plus";
-import * as ElementPlusIconsVue from "@element-plus/icons-vue";
-import "element-plus/dist/index.css";
-import router from "@/router";
-const app = createApp(App);
-const pinia = createPinia();
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
+import router from '@/router'
+const app = createApp(App)
+const pinia = createPinia()
 Object.keys(ElementPlusIconsVue).forEach((key) => {
-  app.component(key, ElementPlusIconsVue[key]);
-});
-app.use(router).use(pinia).use(ElementPlus).mount("#app");
+  app.component(key, ElementPlusIconsVue[key])
+})
+app.use(router).use(pinia).use(ElementPlus).mount('#app')
diff --git a/dashboard/src/main/webapp/src/pages/ApplicationPage.vue b/dashboard/src/main/webapp/src/pages/ApplicationPage.vue
index 0a29fa897c..0e0f31b317 100644
--- a/dashboard/src/main/webapp/src/pages/ApplicationPage.vue
+++ b/dashboard/src/main/webapp/src/pages/ApplicationPage.vue
@@ -29,84 +29,80 @@
         </el-card>
       </el-col>
     </el-row>
-    <el-divider/>
+    <el-divider />
     <el-tag>User App ranking</el-tag>
     <div>
       <el-table :data="pageData.userAppCount" height="250" style="width: 100%">
-        <el-table-column prop="userName" label="UserName" min-width="180"/>
-        <el-table-column prop="appNum" label="Totality" min-width="180"/>
+        <el-table-column prop="userName" label="UserName" min-width="180" />
+        <el-table-column prop="appNum" label="Totality" min-width="180" />
       </el-table>
     </div>
-    <el-divider/>
+    <el-divider />
     <el-tag>Apps</el-tag>
     <div>
       <el-table :data="pageData.appInfoData" height="250" style="width: 100%">
-        <el-table-column prop="appId" label="AppId" min-width="180"/>
-        <el-table-column prop="userName" label="UserName" min-width="180"/>
-        <el-table-column prop="updateTime" label="Update Time" min-width="180"/>
+        <el-table-column prop="appId" label="AppId" min-width="180" />
+        <el-table-column prop="userName" label="UserName" min-width="180" />
+        <el-table-column prop="updateTime" label="Update Time" min-width="180" />
       </el-table>
     </div>
   </div>
 </template>
 
 <script>
-import {
-  getApplicationInfoList,
-  getAppTotal,
-  getTotalForUser
-} from "@/api/api";
-import {onMounted, reactive} from "vue";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { getApplicationInfoList, getAppTotal, getTotalForUser } from '@/api/api'
+import { onMounted, reactive } from 'vue'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
       apptotal: {},
       userAppCount: [{}],
-      appInfoData: [{appId: "", userName: "", updateTime: ""}]
+      appInfoData: [{ appId: '', userName: '', updateTime: '' }]
     })
     const currentServerStore = useCurrentServerStore()
 
     async function getApplicationInfoListPage() {
-      const res = await getApplicationInfoList();
+      const res = await getApplicationInfoList()
       pageData.appInfoData = res.data.data
     }
 
     async function getTotalForUserPage() {
-      const res = await getTotalForUser();
+      const res = await getTotalForUser()
       pageData.userAppCount = res.data.data
     }
 
     async function getAppTotalPage() {
-      const res = await getAppTotal();
+      const res = await getAppTotal()
       pageData.apptotal = res.data.data
     }
 
     // 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) {
-        getApplicationInfoListPage();
-        getTotalForUserPage();
-        getAppTotalPage();
+        getApplicationInfoListPage()
+        getTotalForUserPage()
+        getAppTotalPage()
       }
     })
 
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getApplicationInfoListPage();
-        getTotalForUserPage();
-        getAppTotalPage();
+        getApplicationInfoListPage()
+        getTotalForUserPage()
+        getAppTotalPage()
       }
     })
-    return {pageData}
+    return { pageData }
   }
 }
 </script>
 
 <style>
 .appcnt {
-  font-family: "Lantinghei SC";
+  font-family: 'Lantinghei SC';
   font-style: normal;
   font-weight: bolder;
   font-size: 30px;
diff --git a/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue b/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
index 7e8a898324..a13be3bde7 100644
--- a/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
+++ b/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
@@ -20,16 +20,12 @@
     <el-collapse v-model="pageData.activeNames" accordion:false>
       <el-collapse-item title="Coordinator Server" name="1">
         <div>
-          <el-descriptions
-              class="margin-top"
-              :column="3"
-              :size="size"
-              border>
+          <el-descriptions class="margin-top" :column="3" :size="size" border>
             <el-descriptions-item>
               <template #label>
                 <div class="cell-item">
                   <el-icon :style="iconStyle">
-                    <Platform/>
+                    <Platform />
                   </el-icon>
                   Coordinatro ID
                 </div>
@@ -40,7 +36,7 @@
               <template #label>
                 <div class="cell-item">
                   <el-icon :style="iconStyle">
-                    <Link/>
+                    <Link />
                   </el-icon>
                   IP Address
                 </div>
@@ -51,7 +47,7 @@
               <template #label>
                 <div class="cell-item">
                   <el-icon :style="iconStyle">
-                    <Wallet/>
+                    <Wallet />
                   </el-icon>
                   Coordinator Server Port
                 </div>
@@ -62,7 +58,7 @@
               <template #label>
                 <div class="cell-item">
                   <el-icon :style="iconStyle">
-                    <Wallet/>
+                    <Wallet />
                   </el-icon>
                   Coordinator Web Port
                 </div>
@@ -74,8 +70,8 @@
       </el-collapse-item>
       <el-collapse-item title="Coordinator Properties" name="2">
         <el-table :data="pageData.tableData" stripe style="width: 100%">
-          <el-table-column prop="argumentKey" label="Name" min-width="380"/>
-          <el-table-column prop="argumentValue" label="Value" min-width="380"/>
+          <el-table-column prop="argumentKey" label="Name" min-width="380" />
+          <el-table-column prop="argumentValue" label="Value" min-width="380" />
         </el-table>
       </el-collapse-item>
     </el-collapse>
@@ -83,19 +79,18 @@
 </template>
 
 <script>
-import {ref, reactive, computed, onMounted} from 'vue'
-import {getCoordinatorConf, getCoordinatorServerInfo} from "@/api/api";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { ref, reactive, computed, onMounted } from 'vue'
+import { getCoordinatorConf, getCoordinatorServerInfo } from '@/api/api'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
-          activeNames: ['1', '2'],
-          tableData: [],
-          serverInfo: {}
-        }
-    );
-    const currentServerStore= useCurrentServerStore()
+      activeNames: ['1', '2'],
+      tableData: [],
+      serverInfo: {}
+    })
+    const currentServerStore = useCurrentServerStore()
 
     async function getCoordinatorServerConfPage() {
       const res = await getCoordinatorConf()
@@ -109,40 +104,40 @@ export default {
     /**
      * The system obtains data from global variables and requests the interface to obtain new data after data changes.
      */
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
-        getCoordinatorServerConfPage();
-        getCoorServerInfo();
+        getCoordinatorServerConfPage()
+        getCoorServerInfo()
       }
     })
 
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getCoordinatorServerConfPage();
-        getCoorServerInfo();
+        getCoordinatorServerConfPage()
+        getCoorServerInfo()
       }
     })
-    
+
     const size = ref('')
     const iconStyle = computed(() => {
       const marginMap = {
         large: '8px',
         default: '6px',
-        small: '4px',
+        small: '4px'
       }
       return {
-        marginRight: marginMap[size.value] || marginMap.default,
+        marginRight: marginMap[size.value] || marginMap.default
       }
     })
     const blockMargin = computed(() => {
       const marginMap = {
         large: '32px',
         default: '28px',
-        small: '24px',
+        small: '24px'
       }
       return {
-        marginTop: marginMap[size.value] || marginMap.default,
+        marginTop: marginMap[size.value] || marginMap.default
       }
     })
 
diff --git a/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue b/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue
index 0c6ce6955d..6c70f42dd2 100644
--- a/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue
+++ b/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue
@@ -38,7 +38,9 @@
                 <span class="cardtile">Decommissioning</span>
               </div>
             </template>
-            <div class="decommissioningnode">{{ dataList.allshuffleServerSize.DECOMMISSIONING ?? 0 }}</div>
+            <div class="decommissioningnode">
+              {{ dataList.allshuffleServerSize.DECOMMISSIONING ?? 0 }}
+            </div>
           </el-card>
         </router-link>
       </el-col>
@@ -50,7 +52,9 @@
                 <span class="cardtile">Decommissioned</span>
               </div>
             </template>
-            <div class="decommissionednode">{{ dataList.allshuffleServerSize.DECOMMISSIONED ?? 0 }}</div>
+            <div class="decommissionednode">
+              {{ dataList.allshuffleServerSize.DECOMMISSIONED ?? 0 }}
+            </div>
           </el-card>
         </router-link>
       </el-col>
@@ -91,7 +95,7 @@
         </router-link>
       </el-col>
     </el-row>
-    <el-divider/>
+    <el-divider />
     <el-row :gutter="24">
       <div style="width: 100%">
         <router-view></router-view>
@@ -101,9 +105,9 @@
 </template>
 
 <script>
-import {onMounted, reactive} from 'vue'
-import {getShufflegetStatusTotal} from "@/api/api"
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { onMounted, reactive } from 'vue'
+import { getShufflegetStatusTotal } from '@/api/api'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
@@ -117,27 +121,27 @@ export default {
         UNHEALTHY: 0
       }
     })
-    const currentServerStore= useCurrentServerStore()
+    const currentServerStore = useCurrentServerStore()
 
     async function getShufflegetStatusTotalPage() {
-      const res = await getShufflegetStatusTotal();
+      const res = await getShufflegetStatusTotal()
       dataList.allshuffleServerSize = res.data.data
     }
 
     // The system obtains data from global variables and requests the interface to obtain new data after data changes.
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
-        getShufflegetStatusTotalPage();
+        getShufflegetStatusTotalPage()
       }
     })
 
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getShufflegetStatusTotalPage();
+        getShufflegetStatusTotalPage()
       }
     })
-    return {dataList}
+    return { dataList }
   }
 }
 </script>
@@ -148,7 +152,7 @@ export default {
 }
 
 .activenode {
-  font-family: "Lantinghei SC";
+  font-family: 'Lantinghei SC';
   font-style: normal;
   font-weight: bolder;
   font-size: 30px;
@@ -157,7 +161,7 @@ export default {
 }
 
 .decommissioningnode {
-  font-family: "Lantinghei SC";
+  font-family: 'Lantinghei SC';
   font-style: normal;
   font-weight: bolder;
   font-size: 30px;
@@ -166,7 +170,7 @@ export default {
 }
 
 .decommissionednode {
-  font-family: "Lantinghei SC";
+  font-family: 'Lantinghei SC';
   font-style: normal;
   font-weight: bolder;
   font-size: 30px;
@@ -175,7 +179,7 @@ export default {
 }
 
 .lostnode {
-  font-family: "Lantinghei SC";
+  font-family: 'Lantinghei SC';
   font-style: normal;
   font-weight: bolder;
   font-size: 30px;
@@ -184,7 +188,7 @@ export default {
 }
 
 .unhealthynode {
-  font-family: "Lantinghei SC";
+  font-family: 'Lantinghei SC';
   font-style: normal;
   font-weight: bolder;
   font-size: 30px;
@@ -193,7 +197,7 @@ export default {
 }
 
 .excludesnode {
-  font-family: "Lantinghei SC";
+  font-family: 'Lantinghei SC';
   font-style: normal;
   font-weight: bolder;
   font-size: 30px;
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/ActiveNodeListPage.vue b/dashboard/src/main/webapp/src/pages/serverstatus/ActiveNodeListPage.vue
index e1dce07673..35166900b5 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/ActiveNodeListPage.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/ActiveNodeListPage.vue
@@ -18,54 +18,69 @@
 <template>
   <div>
     <el-table :data="pageData.tableData" height="550" style="width: 100%">
-      <el-table-column prop="id" label="Id" min-width="140"/>
-      <el-table-column prop="ip" label="IP" min-width="80"/>
-      <el-table-column prop="grpcPort" label="GrpcPort" min-width="80"/>
-      <el-table-column prop="nettyPort" label="NettyPort" min-width="80"/>
-      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="preAllocatedMemory" label="PreAllocatedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="availableMemory" label="AvailableMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80"/>
-      <el-table-column prop="status" label="Status" min-width="80"/>
-      <el-table-column prop="timestamp" label="RegistrationTime" min-width="80" :formatter="dateFormatter"/>
-      <el-table-column prop="tags" label="Tags" min-width="80"/>
+      <el-table-column prop="id" label="Id" min-width="140" />
+      <el-table-column prop="ip" label="IP" min-width="80" />
+      <el-table-column prop="grpcPort" label="GrpcPort" min-width="80" />
+      <el-table-column prop="nettyPort" label="NettyPort" min-width="80" />
+      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter" />
+      <el-table-column
+        prop="preAllocatedMemory"
+        label="PreAllocatedMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column
+        prop="availableMemory"
+        label="AvailableMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80" />
+      <el-table-column prop="status" label="Status" min-width="80" />
+      <el-table-column
+        prop="timestamp"
+        label="RegistrationTime"
+        min-width="80"
+        :formatter="dateFormatter"
+      />
+      <el-table-column prop="tags" label="Tags" min-width="80" />
     </el-table>
   </div>
 </template>
 <script>
-import {onMounted, reactive} from 'vue'
-import { getShuffleActiveNodes} from "@/api/api";
-import {memFormatter, dateFormatter} from "@/utils/common";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { onMounted, reactive } from 'vue'
+import { getShuffleActiveNodes } from '@/api/api'
+import { memFormatter, dateFormatter } from '@/utils/common'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
       tableData: [
         {
-          id: "",
-          ip: "",
+          id: '',
+          ip: '',
           grpcPort: 0,
-          nettyPort:0,
+          nettyPort: 0,
           usedMemory: 0,
           preAllocatedMemory: 0,
           availableMemory: 0,
           eventNumInFlush: 0,
-          tags: "",
-          status: "",
-          timestamp: ""
+          tags: '',
+          status: '',
+          timestamp: ''
         }
       ]
     })
-    const currentServerStore= useCurrentServerStore()
+    const currentServerStore = useCurrentServerStore()
 
     async function getShuffleActiveNodesPage() {
-      const res = await getShuffleActiveNodes();
+      const res = await getShuffleActiveNodes()
       pageData.tableData = res.data.data
     }
 
     // The system obtains data from global variables and requests the interface to obtain new data after data changes.
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
         getShuffleActiveNodesPage()
       }
@@ -74,11 +89,11 @@ export default {
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getShuffleActiveNodesPage();
+        getShuffleActiveNodesPage()
       }
     })
 
-    return {pageData, memFormatter, dateFormatter}
+    return { pageData, memFormatter, dateFormatter }
   }
 }
 </script>
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/DecommissionednodeListPage.vue b/dashboard/src/main/webapp/src/pages/serverstatus/DecommissionednodeListPage.vue
index c95da69bd1..cdcc3fb55b 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/DecommissionednodeListPage.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/DecommissionednodeListPage.vue
@@ -18,67 +18,82 @@
 <template>
   <div>
     <el-table :data="pageData.tableData" height="550" style="width: 100%">
-      <el-table-column prop="id" label="Id" min-width="140"/>
-      <el-table-column prop="ip" label="IP" min-width="80"/>
-      <el-table-column prop="grpcPort" label="Port" min-width="80"/>
-      <el-table-column prop="nettyPort" label="NettyPort" min-width="80"/>
-      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="preAllocatedMemory" label="PreAllocatedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="availableMemory" label="AvailableMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80"/>
-      <el-table-column prop="status" label="Status" min-width="80"/>
-      <el-table-column prop="timestamp" label="RegistrationTime" min-width="80" :formatter="dateFormatter"/>
-      <el-table-column prop="tags" label="Tags" min-width="80"/>
+      <el-table-column prop="id" label="Id" min-width="140" />
+      <el-table-column prop="ip" label="IP" min-width="80" />
+      <el-table-column prop="grpcPort" label="Port" min-width="80" />
+      <el-table-column prop="nettyPort" label="NettyPort" min-width="80" />
+      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter" />
+      <el-table-column
+        prop="preAllocatedMemory"
+        label="PreAllocatedMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column
+        prop="availableMemory"
+        label="AvailableMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80" />
+      <el-table-column prop="status" label="Status" min-width="80" />
+      <el-table-column
+        prop="timestamp"
+        label="RegistrationTime"
+        min-width="80"
+        :formatter="dateFormatter"
+      />
+      <el-table-column prop="tags" label="Tags" min-width="80" />
     </el-table>
   </div>
 </template>
 <script>
-import {onMounted, reactive} from 'vue'
-import { getShuffleDecommissionedList } from "@/api/api";
-import {memFormatter, dateFormatter} from "@/utils/common";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore';
+import { onMounted, reactive } from 'vue'
+import { getShuffleDecommissionedList } from '@/api/api'
+import { memFormatter, dateFormatter } from '@/utils/common'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
       tableData: [
         {
-          id: "",
-          ip: "",
+          id: '',
+          ip: '',
           grpcPort: 0,
-          nettyPort:0,
+          nettyPort: 0,
           usedMemory: 0,
           preAllocatedMemory: 0,
           availableMemory: 0,
           eventNumInFlush: 0,
-          tags: "",
-          status: "",
-          timestamp: ""
+          tags: '',
+          status: '',
+          timestamp: ''
         }
       ]
     })
-    const currentServerStore= useCurrentServerStore()
+    const currentServerStore = useCurrentServerStore()
 
     async function getShuffleDecommissionedListPage() {
-      const res = await getShuffleDecommissionedList();
+      const res = await getShuffleDecommissionedList()
       pageData.tableData = res.data.data
     }
 
     // The system obtains data from global variables and requests the interface to obtain new data after data changes.
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
-        getShuffleDecommissionedListPage();
+        getShuffleDecommissionedListPage()
       }
     })
 
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getShuffleDecommissionedListPage();
+        getShuffleDecommissionedListPage()
       }
     })
 
-    return {pageData, memFormatter, dateFormatter}
+    return { pageData, memFormatter, dateFormatter }
   }
 }
 </script>
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/DecommissioningNodeListPage.vue b/dashboard/src/main/webapp/src/pages/serverstatus/DecommissioningNodeListPage.vue
index d6d7a75e6b..a289fa6b63 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/DecommissioningNodeListPage.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/DecommissioningNodeListPage.vue
@@ -18,69 +18,82 @@
 <template>
   <div>
     <el-table :data="pageData.tableData" height="550" style="width: 100%">
-      <el-table-column prop="id" label="Id" min-width="140"/>
-      <el-table-column prop="ip" label="IP" min-width="80"/>
-      <el-table-column prop="grpcPort" label="Port" min-width="80"/>
-      <el-table-column prop="nettyPort" label="NettyPort" min-width="80"/>
-      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="preAllocatedMemory" label="PreAllocatedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="availableMemory" label="AvailableMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80"/>
-      <el-table-column prop="status" label="Status" min-width="80"/>
-      <el-table-column prop="timestamp" label="RegistrationTime" min-width="80" :formatter="dateFormatter"/>
-      <el-table-column prop="tags" label="Tags" min-width="80"/>
+      <el-table-column prop="id" label="Id" min-width="140" />
+      <el-table-column prop="ip" label="IP" min-width="80" />
+      <el-table-column prop="grpcPort" label="Port" min-width="80" />
+      <el-table-column prop="nettyPort" label="NettyPort" min-width="80" />
+      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter" />
+      <el-table-column
+        prop="preAllocatedMemory"
+        label="PreAllocatedMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column
+        prop="availableMemory"
+        label="AvailableMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80" />
+      <el-table-column prop="status" label="Status" min-width="80" />
+      <el-table-column
+        prop="timestamp"
+        label="RegistrationTime"
+        min-width="80"
+        :formatter="dateFormatter"
+      />
+      <el-table-column prop="tags" label="Tags" min-width="80" />
     </el-table>
   </div>
 </template>
 <script>
-import {onMounted, reactive} from 'vue'
-import { getShuffleDecommissioningList } from "@/api/api";
-import {memFormatter, dateFormatter} from "@/utils/common";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { onMounted, reactive } from 'vue'
+import { getShuffleDecommissioningList } from '@/api/api'
+import { memFormatter, dateFormatter } from '@/utils/common'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
       tableData: [
         {
-          id: "",
-          ip: "",
+          id: '',
+          ip: '',
           grpcPort: 0,
-          nettyPort:0,
+          nettyPort: 0,
           usedMemory: 0,
           preAllocatedMemory: 0,
           availableMemory: 0,
           eventNumInFlush: 0,
-          tags: "",
-          status: "",
-          timestamp: ""
+          tags: '',
+          status: '',
+          timestamp: ''
         }
       ]
     })
-    const currentServerStore= useCurrentServerStore()
+    const currentServerStore = useCurrentServerStore()
 
     async function getShuffleDecommissioningListPage() {
-      const res = await getShuffleDecommissioningList();
+      const res = await getShuffleDecommissioningList()
       pageData.tableData = res.data.data
     }
 
     // The system obtains data from global variables and requests the interface to obtain new data after data changes.
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
-        getShuffleDecommissioningListPage();
+        getShuffleDecommissioningListPage()
       }
     })
 
-
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getShuffleDecommissioningListPage();
+        getShuffleDecommissioningListPage()
       }
     })
 
-
-    return {pageData, memFormatter, dateFormatter}
+    return { pageData, memFormatter, dateFormatter }
   }
 }
 </script>
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/ExcludeNodeList.vue b/dashboard/src/main/webapp/src/pages/serverstatus/ExcludeNodeList.vue
index 3566657f9e..4e3b7f861b 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/ExcludeNodeList.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/ExcludeNodeList.vue
@@ -18,46 +18,46 @@
 <template>
   <div>
     <el-table :data="pageData.tableData" height="550" style="width: 100%">
-      <el-table-column prop="id" label="ExcludeNodeId" min-width="180"/>
+      <el-table-column prop="id" label="ExcludeNodeId" min-width="180" />
     </el-table>
   </div>
 </template>
 <script>
-import {onMounted, reactive} from 'vue'
-import { getShuffleExcludeNodes } from "@/api/api";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { onMounted, reactive } from 'vue'
+import { getShuffleExcludeNodes } from '@/api/api'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
       tableData: [
         {
-          id:""
+          id: ''
         }
       ]
     })
-    const currentServerStore= useCurrentServerStore()
+    const currentServerStore = useCurrentServerStore()
 
     async function getShuffleExcludeNodesPage() {
-      const res = await getShuffleExcludeNodes();
+      const res = await getShuffleExcludeNodes()
       pageData.tableData = res.data.data
     }
 
     // The system obtains data from global variables and requests the interface to obtain new data after data changes.
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
-        getShuffleExcludeNodesPage();
+        getShuffleExcludeNodesPage()
       }
     })
 
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getShuffleExcludeNodesPage();
+        getShuffleExcludeNodesPage()
       }
     })
 
-    return {pageData}
+    return { pageData }
   }
 }
 </script>
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/LostNodeList.vue b/dashboard/src/main/webapp/src/pages/serverstatus/LostNodeList.vue
index adfef3f526..9beb8d8816 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/LostNodeList.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/LostNodeList.vue
@@ -18,70 +18,83 @@
 <template>
   <div>
     <el-table :data="pageData.tableData" height="550" style="width: 100%">
-      <el-table-column prop="id" label="Id" min-width="140"/>
-      <el-table-column prop="ip" label="IP" min-width="80"/>
-      <el-table-column prop="grpcPort" label="Port" min-width="80"/>
-      <el-table-column prop="nettyPort" label="NettyPort" min-width="80"/>
-      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="preAllocatedMemory" label="PreAllocatedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="availableMemory" label="AvailableMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80"/>
-      <el-table-column prop="status" label="Status" min-width="80"/>
-      <el-table-column prop="timestamp" label="RegistrationTime" min-width="80" :formatter="dateFormatter"/>
-      <el-table-column prop="tags" label="Tags" min-width="80"/>
+      <el-table-column prop="id" label="Id" min-width="140" />
+      <el-table-column prop="ip" label="IP" min-width="80" />
+      <el-table-column prop="grpcPort" label="Port" min-width="80" />
+      <el-table-column prop="nettyPort" label="NettyPort" min-width="80" />
+      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter" />
+      <el-table-column
+        prop="preAllocatedMemory"
+        label="PreAllocatedMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column
+        prop="availableMemory"
+        label="AvailableMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80" />
+      <el-table-column prop="status" label="Status" min-width="80" />
+      <el-table-column
+        prop="timestamp"
+        label="RegistrationTime"
+        min-width="80"
+        :formatter="dateFormatter"
+      />
+      <el-table-column prop="tags" label="Tags" min-width="80" />
     </el-table>
   </div>
 </template>
 <script>
-import {onMounted, reactive} from 'vue'
-import { getShuffleLostList } from "@/api/api";
-import {memFormatter, dateFormatter} from "@/utils/common";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { onMounted, reactive } from 'vue'
+import { getShuffleLostList } from '@/api/api'
+import { memFormatter, dateFormatter } from '@/utils/common'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
       tableData: [
         {
-          id: "",
-          ip: "",
+          id: '',
+          ip: '',
           grpcPort: 0,
-          nettyPort:0,
+          nettyPort: 0,
           usedMemory: 0,
           preAllocatedMemory: 0,
           availableMemory: 0,
           eventNumInFlush: 0,
-          tags: "",
-          status: "",
-          timestamp: ""
+          tags: '',
+          status: '',
+          timestamp: ''
         }
       ]
     })
 
-    const currentServerStore= useCurrentServerStore()
+    const currentServerStore = useCurrentServerStore()
 
     async function getShuffleLostListPage() {
-      const res = await getShuffleLostList();
+      const res = await getShuffleLostList()
       pageData.tableData = res.data.data
     }
 
     // The system obtains data from global variables and requests the interface to obtain new data after data changes.
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
-        getShuffleLostListPage();
+        getShuffleLostListPage()
       }
     })
 
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getShuffleLostListPage();
+        getShuffleLostListPage()
       }
     })
 
-
-
-    return {pageData, memFormatter, dateFormatter}
+    return { pageData, memFormatter, dateFormatter }
   }
 }
 </script>
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/UnhealthyNodeListPage.vue b/dashboard/src/main/webapp/src/pages/serverstatus/UnhealthyNodeListPage.vue
index 627ce47cf1..c568bf5391 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/UnhealthyNodeListPage.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/UnhealthyNodeListPage.vue
@@ -18,68 +18,82 @@
 <template>
   <div>
     <el-table :data="pageData.tableData" height="550" style="width: 100%">
-      <el-table-column prop="id" label="Id" min-width="140"/>
-      <el-table-column prop="ip" label="IP" min-width="80"/>
-      <el-table-column prop="grpcPort" label="Port" min-width="80"/>
-      <el-table-column prop="nettyPort" label="NettyPort" min-width="80"/>
-      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="preAllocatedMemory" label="PreAllocatedMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="availableMemory" label="AvailableMem" min-width="80" :formatter="memFormatter"/>
-      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80"/>
-      <el-table-column prop="status" label="Status" min-width="80"/>
-      <el-table-column prop="timestamp" label="RegistrationTime" min-width="80" :formatter="dateFormatter"/>
-      <el-table-column prop="tags" label="Tags" min-width="80"/>
+      <el-table-column prop="id" label="Id" min-width="140" />
+      <el-table-column prop="ip" label="IP" min-width="80" />
+      <el-table-column prop="grpcPort" label="Port" min-width="80" />
+      <el-table-column prop="nettyPort" label="NettyPort" min-width="80" />
+      <el-table-column prop="usedMemory" label="UsedMem" min-width="80" :formatter="memFormatter" />
+      <el-table-column
+        prop="preAllocatedMemory"
+        label="PreAllocatedMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column
+        prop="availableMemory"
+        label="AvailableMem"
+        min-width="80"
+        :formatter="memFormatter"
+      />
+      <el-table-column prop="eventNumInFlush" label="FlushNum" min-width="80" />
+      <el-table-column prop="status" label="Status" min-width="80" />
+      <el-table-column
+        prop="timestamp"
+        label="RegistrationTime"
+        min-width="80"
+        :formatter="dateFormatter"
+      />
+      <el-table-column prop="tags" label="Tags" min-width="80" />
     </el-table>
   </div>
 </template>
 <script>
-import {onMounted, reactive} from 'vue'
-import { getShuffleUnhealthyList } from "@/api/api";
-import {memFormatter, dateFormatter} from "@/utils/common";
-import {useCurrentServerStore} from '@/store/useCurrentServerStore'
+import { onMounted, reactive } from 'vue'
+import { getShuffleUnhealthyList } from '@/api/api'
+import { memFormatter, dateFormatter } from '@/utils/common'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 export default {
   setup() {
     const pageData = reactive({
       tableData: [
         {
-          id: "",
-          ip: "",
+          id: '',
+          ip: '',
           grpcPort: 0,
-          nettyPort:0,
+          nettyPort: 0,
           usedMemory: 0,
           preAllocatedMemory: 0,
           availableMemory: 0,
           eventNumInFlush: 0,
-          tags: "",
-          status: "",
-          timestamp: ""
+          tags: '',
+          status: '',
+          timestamp: ''
         }
       ]
     })
-    const currentServerStore= useCurrentServerStore()
+    const currentServerStore = useCurrentServerStore()
 
     async function getShuffleUnhealthyListPage() {
-      const res = await getShuffleUnhealthyList();
+      const res = await getShuffleUnhealthyList()
       pageData.tableData = res.data.data
     }
 
     // The system obtains data from global variables and requests the interface to obtain new data after data changes.
-    currentServerStore.$subscribe((mutable,state)=>{
+    currentServerStore.$subscribe((mutable, state) => {
       if (state.currentServer) {
-        getShuffleUnhealthyListPage();
+        getShuffleUnhealthyListPage()
       }
     })
 
     onMounted(() => {
       // If the coordinator address to request is not found in the global variable, the request is not initiated.
       if (currentServerStore.currentServer) {
-        getShuffleUnhealthyListPage();
+        getShuffleUnhealthyListPage()
       }
     })
 
-
-    return {pageData, memFormatter, dateFormatter}
+    return { pageData, memFormatter, dateFormatter }
   }
 }
 </script>
diff --git a/dashboard/src/main/webapp/src/router/index.js b/dashboard/src/main/webapp/src/router/index.js
index 102c473a15..950c111818 100644
--- a/dashboard/src/main/webapp/src/router/index.js
+++ b/dashboard/src/main/webapp/src/router/index.js
@@ -15,79 +15,79 @@
  * limitations under the License.
  */
 
-import { createRouter, createWebHashHistory } from "vue-router";
-import ApplicationPage from "@/pages/ApplicationPage.vue";
-import CoordinatorServerPage from "@/pages/CoordinatorServerPage.vue";
-import ShuffleServerPage from "@/pages/ShuffleServerPage.vue";
-import ActiveNodeListPage from "@/pages/serverstatus/ActiveNodeListPage";
-import DecommissioningNodeListPage from "@/pages/serverstatus/DecommissioningNodeListPage";
-import DecommissionednodeListPage from "@/pages/serverstatus/DecommissionednodeListPage";
-import LostNodeList from "@/pages/serverstatus/LostNodeList";
-import UnhealthyNodeListPage from "@/pages/serverstatus/UnhealthyNodeListPage";
-import ExcludeNodeList from "@/pages/serverstatus/ExcludeNodeList";
+import { createRouter, createWebHashHistory } from 'vue-router'
+import ApplicationPage from '@/pages/ApplicationPage.vue'
+import CoordinatorServerPage from '@/pages/CoordinatorServerPage.vue'
+import ShuffleServerPage from '@/pages/ShuffleServerPage.vue'
+import ActiveNodeListPage from '@/pages/serverstatus/ActiveNodeListPage'
+import DecommissioningNodeListPage from '@/pages/serverstatus/DecommissioningNodeListPage'
+import DecommissionednodeListPage from '@/pages/serverstatus/DecommissionednodeListPage'
+import LostNodeList from '@/pages/serverstatus/LostNodeList'
+import UnhealthyNodeListPage from '@/pages/serverstatus/UnhealthyNodeListPage'
+import ExcludeNodeList from '@/pages/serverstatus/ExcludeNodeList'
 
 const routes = [
   {
-    path: "/coordinatorserverpage",
-    name: "coordinatorserverpage",
-    component: CoordinatorServerPage,
+    path: '/coordinatorserverpage',
+    name: 'coordinatorserverpage',
+    component: CoordinatorServerPage
   },
   {
-    path: "/shuffleserverpage",
-    name: "shuffleserverpage",
+    path: '/shuffleserverpage',
+    name: 'shuffleserverpage',
     component: ShuffleServerPage,
-    redirect: "/shuffleserverpage/activeNodeList",
+    redirect: '/shuffleserverpage/activeNodeList',
     children: [
       {
-        path: "/shuffleserverpage/activeNodeList",
-        name: "activeNodeList",
-        component: ActiveNodeListPage,
+        path: '/shuffleserverpage/activeNodeList',
+        name: 'activeNodeList',
+        component: ActiveNodeListPage
       },
       {
-        path: "/shuffleserverpage/decommissioningNodeList",
-        name: "decommissioningNodeList",
-        component: DecommissioningNodeListPage,
+        path: '/shuffleserverpage/decommissioningNodeList',
+        name: 'decommissioningNodeList',
+        component: DecommissioningNodeListPage
       },
       {
-        path: "/shuffleserverpage/decommissionedNodeList",
-        name: "decommissionedNodeList",
-        component: DecommissionednodeListPage,
+        path: '/shuffleserverpage/decommissionedNodeList',
+        name: 'decommissionedNodeList',
+        component: DecommissionednodeListPage
       },
       {
-        path: "/shuffleserverpage/lostNodeList",
-        name: "lostNodeList",
-        component: LostNodeList,
+        path: '/shuffleserverpage/lostNodeList',
+        name: 'lostNodeList',
+        component: LostNodeList
       },
       {
-        path: "/shuffleserverpage/unhealthyNodeList",
-        name: "unhealthyNodeList",
-        component: UnhealthyNodeListPage,
+        path: '/shuffleserverpage/unhealthyNodeList',
+        name: 'unhealthyNodeList',
+        component: UnhealthyNodeListPage
       },
       {
-        path: "/shuffleserverpage/excludeNodeList",
-        name: "excludeNodeList",
-        component: ExcludeNodeList,
-      },
-    ],
+        path: '/shuffleserverpage/excludeNodeList',
+        name: 'excludeNodeList',
+        component: ExcludeNodeList
+      }
+    ]
   },
   {
-    path: "/applicationpage",
-    name: "applicationpage",
-    component: ApplicationPage,
+    path: '/applicationpage',
+    name: 'applicationpage',
+    component: ApplicationPage
   },
   {
-    path: "/nullpage",
-    name: "nullpage",
+    path: '/nullpage',
+    name: 'nullpage',
     beforeEnter: (to, from, next) => {
-      next(false);
+      next(false)
     },
-    component: ApplicationPage,
-  },
-];
+    component: ApplicationPage
+  }
+]
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes,
-});
+  routes
+})
 
-export default router;
+export default router
diff --git a/dashboard/src/main/webapp/src/store/useCurrentServerStore.js b/dashboard/src/main/webapp/src/store/useCurrentServerStore.js
index fce4ac3f77..f033751648 100644
--- a/dashboard/src/main/webapp/src/store/useCurrentServerStore.js
+++ b/dashboard/src/main/webapp/src/store/useCurrentServerStore.js
@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { defineStore } from "pinia";
-import { ref } from "vue";
+import { defineStore } from 'pinia'
+import { ref } 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 };
-});
+export const useCurrentServerStore = defineStore('overall', () => {
+  const currentServer = ref('')
+  return { currentServer }
+})
diff --git a/dashboard/src/main/webapp/src/utils/common.js b/dashboard/src/main/webapp/src/utils/common.js
index 7642713a79..d0e86397d8 100644
--- a/dashboard/src/main/webapp/src/utils/common.js
+++ b/dashboard/src/main/webapp/src/utils/common.js
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import moment from "moment";
+import moment from 'moment'
 /**
  * Format the memory display value.
  * @param row
@@ -24,17 +24,17 @@ import moment from "moment";
  * @returns {string}
  */
 const memFormatter = (row, column, cellValue) => {
-  const arrUnit = ["B", "K", "M", "G", "T", "P"];
-  const baseStep = 1024;
-  const unitCount = arrUnit.length;
-  let unitIndex = 0;
+  const arrUnit = ['B', 'K', 'M', 'G', 'T', 'P']
+  const baseStep = 1024
+  const unitCount = arrUnit.length
+  let unitIndex = 0
   while (cellValue >= baseStep && unitIndex < unitCount - 1) {
-    unitIndex++;
-    cellValue /= baseStep;
+    unitIndex++
+    cellValue /= baseStep
   }
-  cellValue = cellValue.toFixed(2);
-  return cellValue + " " + arrUnit[unitIndex];
-};
+  cellValue = cellValue.toFixed(2)
+  return cellValue + ' ' + arrUnit[unitIndex]
+}
 /**
  * Format the time display value.
  * @param row
@@ -43,7 +43,7 @@ const memFormatter = (row, column, cellValue) => {
  * @returns {string}
  */
 const dateFormatter = (row, column, cellValue) => {
-  return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
-};
+  return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
+}
 
-export { memFormatter, dateFormatter };
+export { memFormatter, dateFormatter }
diff --git a/dashboard/src/main/webapp/src/utils/http.js b/dashboard/src/main/webapp/src/utils/http.js
index 689f3a3dbe..c22f78e50a 100644
--- a/dashboard/src/main/webapp/src/utils/http.js
+++ b/dashboard/src/main/webapp/src/utils/http.js
@@ -15,39 +15,39 @@
  * limitations under the License.
  */
 
-import request from "@/utils/request";
-import { useCurrentServerStore } from "@/store/useCurrentServerStore";
+import request from '@/utils/request'
+import { useCurrentServerStore } from '@/store/useCurrentServerStore'
 
 const http = {
   get(url, params, headers, fontBackFlag) {
     if (fontBackFlag === 0) {
       // The system obtains the address of the Coordinator to be accessed from global variables.
-      const currentServerStore = useCurrentServerStore();
-      if (typeof headers !== "undefined") {
-        headers.targetAddress = currentServerStore.currentServer;
+      const currentServerStore = useCurrentServerStore()
+      if (typeof headers !== 'undefined') {
+        headers.targetAddress = currentServerStore.currentServer
       } else {
-        headers = {};
-        headers.targetAddress = currentServerStore.currentServer;
+        headers = {}
+        headers.targetAddress = currentServerStore.currentServer
       }
-      return request.getBackEndAxiosInstance().get(url, { params, headers });
+      return request.getBackEndAxiosInstance().get(url, { params, headers })
     } else {
-      return request.getFrontEndAxiosInstance().get(url, { params, headers });
+      return request.getFrontEndAxiosInstance().get(url, { params, headers })
     }
   },
   post(url, data, headers, fontBackFlag) {
     if (fontBackFlag === 0) {
       // The system obtains the address of the Coordinator to be accessed from global variables.
-      const currentServerStore = useCurrentServerStore();
-      if (typeof headers !== "undefined") {
-        headers.targetAddress = currentServerStore.currentServer;
+      const currentServerStore = useCurrentServerStore()
+      if (typeof headers !== 'undefined') {
+        headers.targetAddress = currentServerStore.currentServer
       } else {
-        headers = {};
-        headers.targetAddress = currentServerStore.currentServer;
+        headers = {}
+        headers.targetAddress = currentServerStore.currentServer
       }
-      return request.getBackEndAxiosInstance().post(url, data, headers);
+      return request.getBackEndAxiosInstance().post(url, data, headers)
     } else {
-      return request.getFrontEndAxiosInstance().post(url, data, headers);
+      return request.getFrontEndAxiosInstance().post(url, data, headers)
     }
-  },
-};
-export default http;
+  }
+}
+export default http
diff --git a/dashboard/src/main/webapp/src/utils/request.js b/dashboard/src/main/webapp/src/utils/request.js
index 12559ac8fa..783539b72d 100644
--- a/dashboard/src/main/webapp/src/utils/request.js
+++ b/dashboard/src/main/webapp/src/utils/request.js
@@ -15,62 +15,62 @@
  * limitations under the License.
  */
 
-import axios from "axios";
+import axios from 'axios'
 
 /**
  * The root directory, starting with web, is handled by the dashboard server's servlet
  * @type {axios.AxiosInstance}
  */
 const frontEndAxiosInstance = axios.create({
-  baseURL: "/web",
-  timeout: 10000,
-});
+  baseURL: '/web',
+  timeout: 10000
+})
 /**
  * The root directory starts with API. The dashboard server reverse proxy requests Coordinator apis
  * @type {axios.AxiosInstance}
  */
 const backEndAxiosInstance = axios.create({
-  baseURL: "/api",
-  timeout: 10000,
-});
+  baseURL: '/api',
+  timeout: 10000
+})
 
 const axiosInstance = {
   getFrontEndAxiosInstance() {
-    return frontEndAxiosInstance;
+    return frontEndAxiosInstance
   },
   getBackEndAxiosInstance() {
-    return backEndAxiosInstance;
-  },
-};
+    return backEndAxiosInstance
+  }
+}
 
 frontEndAxiosInstance.interceptors.request.use((config) => {
-  config.headers["Content-type"] = "application/json";
-  config.headers.Accept = "application/json";
-  return config;
-});
+  config.headers['Content-type'] = 'application/json'
+  config.headers.Accept = 'application/json'
+  return config
+})
 
 backEndAxiosInstance.interceptors.request.use((config) => {
-  config.headers["Content-type"] = "application/json";
-  config.headers.Accept = "application/json";
-  return config;
-});
+  config.headers['Content-type'] = 'application/json'
+  config.headers.Accept = 'application/json'
+  return config
+})
 
 frontEndAxiosInstance.interceptors.response.use(
   (response) => {
-    return response;
+    return response
   },
   (error) => {
-    return error;
-  },
-);
+    return error
+  }
+)
 
 backEndAxiosInstance.interceptors.response.use(
   (response) => {
-    return response;
+    return response
   },
   (error) => {
-    return error;
-  },
-);
+    return error
+  }
+)
 
-export default axiosInstance;
+export default axiosInstance
diff --git a/dashboard/src/main/webapp/vue.config.js b/dashboard/src/main/webapp/vue.config.js
index df1b136736..5d8136629d 100644
--- a/dashboard/src/main/webapp/vue.config.js
+++ b/dashboard/src/main/webapp/vue.config.js
@@ -18,14 +18,14 @@
 module.exports = {
   // Proxies can be set up by configuring the vue.config.js file to proxy requests to the backend server.
   devServer: {
-    host: "localhost",
+    host: 'localhost',
     port: 8080,
     proxy: {
-      "/": {
+      '/': {
         ws: false,
-        target: "http://localhost:19997",
-        changeOrigin: true,
-      },
-    },
-  },
-};
+        target: 'http://localhost:19997',
+        changeOrigin: true
+      }
+    }
+  }
+}