lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: add auto refresh server status indicator

This commit is contained in:
tiny-craft 2023-09-03 00:20:47 +08:00
parent 2f95b803b9
commit 7ef5e16e72
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/content/ContentPane.vue
View File

@ -21,6 +21,7 @@ const serverName = computed(() => {
return ''
})
const loadingServerInfo = ref(false)
const autoLoadingServerInfo = ref(false)
/**
* refresh server status info
@ -30,12 +31,15 @@ const loadingServerInfo = ref(false)
const refreshInfo = async (force) => {
if (force) {
loadingServerInfo.value = true
} else {
autoLoadingServerInfo.value = true
}
if (!isEmpty(serverName.value) && connectionStore.isConnected(serverName.value)) {
try {
serverInfo.value = await connectionStore.getServerInfo(serverName.value)
} finally {
loadingServerInfo.value = false
autoLoadingServerInfo.value = false
}
}
}
@ -129,6 +133,7 @@ const onReloadKey = async () => {
v-model:auto-refresh="autoRefresh"
:info="serverInfo"
:loading="loadingServerInfo"
:auto-loading="autoLoadingServerInfo"
:server="serverName"
@refresh="refreshInfo(true)" />
</div>

13
frontend/src/components/content_value/ContentServerStatus.vue
View File

@ -10,6 +10,7 @@ const props = defineProps({
info: Object,
autoRefresh: false,
loading: false,
autoLoading: false,
})
const emit = defineEmits(['update:autoRefresh', 'refresh'])
@ -102,11 +103,19 @@ const infoFilter = ref('')
<template #header-extra>
<n-space align="center" inline>
{{ $t('auto_refresh') }}
<n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
<n-switch
:value="props.autoRefresh"
:loading="props.autoLoading"
@update:value="(v) => emit('update:autoRefresh', v)" />
<n-tooltip>
{{ $t('refresh') }}
<template #trigger>
<n-button circle size="small" tertiary @click="emit('refresh')">
<n-button
circle
size="small"
tertiary
@click="emit('refresh')"
:loading="props.autoLoading">
<template #icon>
<n-icon :component="Refresh" />
</template>