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 loading indicator to server status page

This commit is contained in:
tiny-craft 2023-07-17 11:03:31 +08:00
parent 5806b19fb1
commit d976cd1731
2 changed files with 66 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,15 +22,29 @@ const serverName = computed(() => {
} }
return '' 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)) { if (!isEmpty(serverName.value) && connectionStore.isConnected(serverName.value)) {
serverInfo.value = await connectionStore.getServerInfo(serverName.value) try {
serverInfo.value = await connectionStore.getServerInfo(serverName.value)
} finally {
loadingServerInfo.value = false
}
} }
} }
let intervalId let intervalId
onMounted(() => { onMounted(() => {
refreshInfo() refreshInfo(true)
intervalId = setInterval(() => { intervalId = setInterval(() => {
if (autoRefresh.value) { if (autoRefresh.value) {
refreshInfo() refreshInfo()
@ -143,7 +157,8 @@ const onCloseTab = (tabIndex) => {
v-model:auto-refresh="autoRefresh" v-model:auto-refresh="autoRefresh"
:server="serverName" :server="serverName"
:info="serverInfo" :info="serverInfo"
@refresh="refreshInfo" :loading="loadingServerInfo"
@refresh="refreshInfo(true)"
/> />
</div> </div>
<div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v"> <div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v">

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

@ -10,6 +10,7 @@ const props = defineProps({
server: String, server: String,
info: Object, info: Object,
autoRefresh: false, autoRefresh: false,
loading: false,
}) })
const emit = defineEmits(['update:autoRefresh', 'refresh']) const emit = defineEmits(['update:autoRefresh', 'refresh'])
@ -116,32 +117,34 @@ const infoFilter = ref('')
</n-tooltip> </n-tooltip>
</n-space> </n-space>
</template> </template>
<n-grid x-gap="5" style="min-width: 500px"> <n-spin :show="props.loading">
<n-gi :span="6"> <n-grid x-gap="5" style="min-width: 500px">
<n-statistic :label="$t('uptime')" :value="uptime[0]"> <n-gi :span="6">
<template #suffix> {{ $t(uptime[1]) }}</template> <n-statistic :label="$t('uptime')" :value="uptime[0]">
</n-statistic> <template #suffix> {{ $t(uptime[1]) }}</template>
</n-gi> </n-statistic>
<n-gi :span="6"> </n-gi>
<n-statistic <n-gi :span="6">
:label="$t('connected_clients')" <n-statistic
:value="get(props.info, 'connected_clients', 0)" :label="$t('connected_clients')"
/> :value="get(props.info, 'connected_clients', 0)"
</n-gi> />
<n-gi :span="6"> </n-gi>
<n-statistic :value="totalKeys"> <n-gi :span="6">
<template #label> <n-statistic :value="totalKeys">
{{ $t('total_keys') }} <template #label>
<n-icon :component="Help" /> {{ $t('total_keys') }}
</template> <n-icon :component="Help" />
</n-statistic> </template>
</n-gi> </n-statistic>
<n-gi :span="6"> </n-gi>
<n-statistic :label="$t('memory_used')" :value="usedMemory[0]"> <n-gi :span="6">
<template #suffix> {{ usedMemory[1] }}</template> <n-statistic :label="$t('memory_used')" :value="usedMemory[0]">
</n-statistic> <template #suffix> {{ usedMemory[1] }}</template>
</n-gi> </n-statistic>
</n-grid> </n-gi>
</n-grid>
</n-spin>
</n-card> </n-card>
<n-card :title="$t('all_info')"> <n-card :title="$t('all_info')">
<template #header-extra> <template #header-extra>
@ -151,23 +154,25 @@ const infoFilter = ref('')
</template> </template>
</n-input> </n-input>
</template> </template>
<n-data-table <n-spin :show="props.loading">
:columns="[ <n-data-table
{ :columns="[
title: $t('key'), {
key: 'key', title: $t('key'),
defaultSortOrder: 'ascend', key: 'key',
sorter: 'default', defaultSortOrder: 'ascend',
minWidth: 100, sorter: 'default',
filterOptionValue: infoFilter, minWidth: 100,
filter(value, row) { filterOptionValue: infoFilter,
return !!~row.key.indexOf(value.toString()) filter(value, row) {
return !!~row.key.indexOf(value.toString())
},
}, },
}, { title: $t('value'), key: 'value' },
{ title: $t('value'), key: 'value' }, ]"
]" :data="infoList"
:data="infoList" />
/> </n-spin>
</n-card> </n-card>
</n-space> </n-space>
</n-scrollbar> </n-scrollbar>