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

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

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