[#1401] feat(dashboard): Shuffle server page list sorting function (#…

…1868)

### What changes were proposed in this pull request?

On the Shuffle Server list page, you can sort the Shuffle Server by column to facilitate you to view information about the Shuffle Server.You can sort IP, used memory, pre-allocated memory, available memory, heartbeat time, and so on.
![image](https://github.com/apache/incubator-uniffle/assets/33595968/a9a04744-29e3-40a7-b3f1-a2586fc8dad0)

### Why are the changes needed?

Fix: #1401 

### Does this PR introduce _any_ user-facing change?

Yes.

### How was this patch tested?

Page view.

dashboard/src/main/webapp/src/pages/ApplicationPage.vue

@@ -32,28 +32,42 @@
     <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
+        :data="pageData.userAppCount"
+        height="250"
+        style="width: 100%"
+        :default-sort="sortAppCollect"
+        @sort-change="sortAppCollectChangeEvent"
+      >
+        <el-table-column prop="userName" label="UserName" min-width="180" sortable fixed />
+        <el-table-column prop="appNum" label="Totality" min-width="180" sortable />
       </el-table>
     </div>
     <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
+      <el-table
+        :data="pageData.appInfoData"
+        height="250"
+        style="width: 100%"
+        :default-sort="sortApp"
+        @sort-change="sortAppChangeEvent"
+      >
+        <el-table-column prop="appId" label="AppId" min-width="180" sortable fixed />
+        <el-table-column prop="userName" label="UserName" min-width="180" sortable />
+        <el-table-columnsortable
           prop="registrationTime"
           label="Registration Time"
           min-width="180"
           :formatter="dateFormatter"
+          sortable
         />
         <el-table-column
           prop="updateTime"
           label="Update Time"
           min-width="180"
           :formatter="dateFormatter"
+          sortable
         />
       </el-table>
     </div>
@@ -107,7 +121,31 @@ export default {
         getAppTotalPage()
       }
     })
-    return { pageData, dateFormatter }
+
+    const sortAppCollect = reactive({})
+    const sortAppCollectChangeEvent = (sortInfo) => {
+      for (const sortColumnKey in sortAppCollect) {
+        delete sortAppCollect[sortColumnKey]
+      }
+      sortAppCollect[sortInfo.prop] = sortInfo.order
+    }
+
+    const sortApp = reactive({})
+    const sortAppChangeEvent = (sortInfo) => {
+      for (const sortColumnKey in sortApp) {
+        delete sortApp[sortColumnKey]
+      }
+      sortApp[sortInfo.prop] = sortInfo.order
+    }
+
+    return {
+      pageData,
+      sortAppCollect,
+      sortAppCollectChangeEvent,
+      sortApp,
+      sortAppChangeEvent,
+      dateFormatter
+    }
   }
 }
 </script>

dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue

@@ -121,6 +121,7 @@ export default {
         UNHEALTHY: 0
       }
     })
+
     const currentServerStore = useCurrentServerStore()
 
     async function getShufflegetStatusTotalPage() {