perf: add loading indicator to server status page
This commit is contained in:
parent
5806b19fb1
commit
d976cd1731
|
@ -22,15 +22,29 @@ const serverName = computed(() => {
|
|||
}
|
||||
return ''
|
||||
})
|
||||
const refreshInfo = async () => {
|
||||
const loadingServerInfo = ref(false)
|
||||
|
||||
/**
|
||||
* refresh server status info
|
||||
* @param {boolean} [force] force refresh will show loading indicator
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const refreshInfo = async (force) => {
|
||||
if (force) {
|
||||
loadingServerInfo.value = true
|
||||
}
|
||||
if (!isEmpty(serverName.value) && connectionStore.isConnected(serverName.value)) {
|
||||
try {
|
||||
serverInfo.value = await connectionStore.getServerInfo(serverName.value)
|
||||
} finally {
|
||||
loadingServerInfo.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let intervalId
|
||||
onMounted(() => {
|
||||
refreshInfo()
|
||||
refreshInfo(true)
|
||||
intervalId = setInterval(() => {
|
||||
if (autoRefresh.value) {
|
||||
refreshInfo()
|
||||
|
@ -143,7 +157,8 @@ const onCloseTab = (tabIndex) => {
|
|||
v-model:auto-refresh="autoRefresh"
|
||||
:server="serverName"
|
||||
:info="serverInfo"
|
||||
@refresh="refreshInfo"
|
||||
:loading="loadingServerInfo"
|
||||
@refresh="refreshInfo(true)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v">
|
||||
|
|
|
@ -10,6 +10,7 @@ const props = defineProps({
|
|||
server: String,
|
||||
info: Object,
|
||||
autoRefresh: false,
|
||||
loading: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:autoRefresh', 'refresh'])
|
||||
|
@ -116,6 +117,7 @@ const infoFilter = ref('')
|
|||
</n-tooltip>
|
||||
</n-space>
|
||||
</template>
|
||||
<n-spin :show="props.loading">
|
||||
<n-grid x-gap="5" style="min-width: 500px">
|
||||
<n-gi :span="6">
|
||||
<n-statistic :label="$t('uptime')" :value="uptime[0]">
|
||||
|
@ -142,6 +144,7 @@ const infoFilter = ref('')
|
|||
</n-statistic>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-spin>
|
||||
</n-card>
|
||||
<n-card :title="$t('all_info')">
|
||||
<template #header-extra>
|
||||
|
@ -151,6 +154,7 @@ const infoFilter = ref('')
|
|||
</template>
|
||||
</n-input>
|
||||
</template>
|
||||
<n-spin :show="props.loading">
|
||||
<n-data-table
|
||||
:columns="[
|
||||
{
|
||||
|
@ -168,6 +172,7 @@ const infoFilter = ref('')
|
|||
]"
|
||||
:data="infoList"
|
||||
/>
|
||||
</n-spin>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</n-scrollbar>
|
||||
|
|
Loading…
Reference in New Issue