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 4a1de0671 [#1401] improvement:(dashboard): The list of servers and the
number of states are updated synchronously. (#1891)
4a1de0671 is described below
commit 4a1de06710afa963f0a904944f72f2dd64f14c6b
Author: yl09099 <33595968+yl09...@users.noreply.github.com>
AuthorDate: Fri Jul 12 21:20:28 2024 +0800
[#1401] improvement:(dashboard): The list of servers and the number of
states are updated synchronously. (#1891)
### What changes were proposed in this pull request?
1、To change the status label of the shuffle server, the number of servers
must be updated simultaneously. Otherwise, the number in the status list may be
inconsistent with that in the status statistics.
2、When removing lost servers, you should also update the number of lost
servers.
### Why are the changes needed?
Fix: #1401
### Does this PR introduce _any_ user-facing change?
Yes.
### How was this patch tested?
Deploy page Click Test.
---
.../main/webapp/src/pages/ShuffleServerPage.vue | 59 +++++++++++++++++-----
.../webapp/src/pages/serverstatus/NodeListPage.vue | 40 +++++++--------
2 files changed, 65 insertions(+), 34 deletions(-)
diff --git a/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue
b/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue
index 6aa63615b..43d23ee3e 100644
--- a/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue
+++ b/dashboard/src/main/webapp/src/pages/ShuffleServerPage.vue
@@ -19,7 +19,11 @@
<div>
<el-row :gutter="20">
<el-col :span="4">
- <router-link class="router-link-active"
to="/shuffleserverpage/activeNodeList">
+ <router-link
+ class="router-link-active"
+ to="/shuffleserverpage/activeNodeList"
+ @click.native="routerHandler"
+ >
<el-card class="box-card" shadow="hover">
<template #header>
<div class="card-header">
@@ -31,7 +35,11 @@
</router-link>
</el-col>
<el-col :span="4">
- <router-link class="router-link-active"
to="/shuffleserverpage/decommissioningNodeList">
+ <router-link
+ class="router-link-active"
+ to="/shuffleserverpage/decommissioningNodeList"
+ @click.native="routerHandler"
+ >
<el-card class="box-card" shadow="hover">
<template #header>
<div class="card-header">
@@ -45,7 +53,11 @@
</router-link>
</el-col>
<el-col :span="4">
- <router-link class="router-link-active"
to="/shuffleserverpage/decommissionedNodeList">
+ <router-link
+ class="router-link-active"
+ to="/shuffleserverpage/decommissionedNodeList"
+ @click.native="routerHandler"
+ >
<el-card class="box-card" shadow="hover">
<template #header>
<div class="card-header">
@@ -59,7 +71,12 @@
</router-link>
</el-col>
<el-col :span="4">
- <router-link class="router-link-active"
to="/shuffleserverpage/lostNodeList">
+ <router-link
+ class="router-link-active"
+ to="/shuffleserverpage/lostNodeList"
+ @click.native="routerHandler"
+ :updateTotalPage="updateTotalPage"
+ >
<el-card class="box-card" shadow="hover">
<template #header>
<div class="card-header">
@@ -71,7 +88,11 @@
</router-link>
</el-col>
<el-col :span="4">
- <router-link class="router-link-active"
to="/shuffleserverpage/unhealthyNodeList">
+ <router-link
+ class="router-link-active"
+ to="/shuffleserverpage/unhealthyNodeList"
+ @click.native="routerHandler"
+ >
<el-card class="box-card" shadow="hover">
<template #header>
<div class="card-header">
@@ -83,7 +104,11 @@
</router-link>
</el-col>
<el-col :span="4">
- <router-link class="router-link-active"
to="/shuffleserverpage/excludeNodeList">
+ <router-link
+ class="router-link-active"
+ to="/shuffleserverpage/excludeNodeList"
+ @click.native="routerHandler"
+ >
<el-card class="box-card" shadow="hover">
<template #header>
<div class="card-header">
@@ -105,7 +130,7 @@
</template>
<script>
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, provide } from 'vue'
import { getShufflegetStatusTotal } from '@/api/api'
import { useCurrentServerStore } from '@/store/useCurrentServerStore'
@@ -123,8 +148,7 @@ export default {
})
const currentServerStore = useCurrentServerStore()
-
- async function getShufflegetStatusTotalPage() {
+ async function getShuffleStatusTotalPage() {
const res = await getShufflegetStatusTotal()
dataList.allshuffleServerSize = res.data.data
}
@@ -132,17 +156,28 @@ 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) {
- getShufflegetStatusTotalPage()
+ getShuffleStatusTotalPage()
}
})
onMounted(() => {
// If the coordinator address to request is not found in the global
variable, the request is not initiated.
if (currentServerStore.currentServer) {
- getShufflegetStatusTotalPage()
+ getShuffleStatusTotalPage()
}
})
- return { dataList }
+
+ const routerHandler = () => {
+ getShuffleStatusTotalPage()
+ }
+ /**
+ * After the missing server list is removed, the number of callbacks is
reduced.
+ */
+ provide('updateTotalPage', () => {
+ getShuffleStatusTotalPage()
+ })
+
+ return { dataList, routerHandler }
}
}
</script>
diff --git a/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue
b/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue
index 383c8425f..8c455f747 100644
--- a/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue
+++ b/dashboard/src/main/webapp/src/pages/serverstatus/NodeListPage.vue
@@ -77,7 +77,7 @@
</div>
</template>
<script>
-import { onMounted, reactive, watch, ref } from 'vue'
+import { onMounted, reactive, watch, ref, inject } from 'vue'
import { memFormatter, dateFormatter } from '@/utils/common'
import { useRouter } from 'vue-router'
import { useCurrentServerStore } from '@/store/useCurrentServerStore'
@@ -114,16 +114,20 @@ export default {
}
]
})
- const deleteFlag = reactive({
- code: 0,
- data: '',
- errMsg: ''
- })
const isShowRemove = ref(false)
async function deleteLostServer(row) {
- const params = { serverId: row.id }
- const res = await deleteConfirmedLostServer(params, {})
- Object.assign(deleteFlag, res.data)
+ try {
+ const params = { serverId: row.id }
+ const res = await deleteConfirmedLostServer(params, {})
+ // Invoke the interface to delete the lost server, prompting a message
based on the result returned.
+ if (res.data.data === 'success') {
+ ElMessage.success('remove ' + row.id + ' sucess...')
+ } else {
+ ElMessage.error('remove ' + row.id + ' fail...')
+ }
+ } catch (err) {
+ ElMessage.error('remove ' + row.id + ' request timeout...')
+ }
}
async function getShuffleActiveNodesPage() {
@@ -202,7 +206,10 @@ export default {
}
sortColumn[sortInfo.prop] = sortInfo.order
}
-
+ /**
+ * Get the callback method of the parent page and update the number of
servers on the page.
+ */
+ const updateTotalPage = inject('updateTotalPage')
const showDeleteConfirm = (row) => {
ElMessageBox.confirm(`Are you sure to remove ${row.id}?`,
'Confirmation', {
confirmButtonText: 'Remove',
@@ -212,19 +219,9 @@ export default {
.then(() => {
// Perform deletion logic here.
deleteLostServer(row)
- // Invoke the interface to delete the lost server, prompting a
message based on the result returned.
- if (deleteFlag.data === 'success') {
- ElMessage.success('remove ' + row.id + ' sucess...')
- } else {
- ElMessage.error('remove ' + row.id + ' fail...')
- }
// Reload the lost server information
getShuffleLostListPage()
- Object.assign(deleteFlag, {
- code: 0,
- data: '',
- errMsg: ''
- })
+ updateTotalPage()
})
.catch(() => {
// Cancelled
@@ -233,7 +230,6 @@ export default {
return {
listPageData,
sortColumn,
- deleteFlag,
isShowRemove,
showDeleteConfirm,
sortChangeEvent,
