perf: add auto-refresh option for slow log

This commit is contained in:
Lykin 2024-01-12 16:07:58 +08:00
parent 0a26ac6300
commit 718e89a641
4 changed files with 53 additions and 30 deletions

View File

@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
import { useThemeVars } from 'naive-ui' import { useThemeVars } from 'naive-ui'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
import { timeout } from '@/utils/promise.js'
import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue'
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -21,12 +23,16 @@ const props = defineProps({
}, },
}) })
const autoRefresh = reactive({
on: false,
interval: 5,
})
const data = reactive({ const data = reactive({
list: [], list: [],
sortOrder: 'descend', sortOrder: 'descend',
listLimit: 20, listLimit: 20,
loading: false, loading: false,
autoLoading: false,
client: '', client: '',
keyword: '', keyword: '',
}) })
@ -133,19 +139,37 @@ const _loadSlowLog = () => {
} }
const loadSlowLog = debounce(_loadSlowLog, 1000, { leading: true, trailing: true }) const loadSlowLog = debounce(_loadSlowLog, 1000, { leading: true, trailing: true })
let intervalID const startAutoRefresh = async () => {
onMounted(() => { let lastExec = Date.now()
loadSlowLog() do {
intervalID = setInterval(() => { if (!autoRefresh.on) {
if (data.autoLoading === true) { break
loadSlowLog()
} }
}, 5000) await timeout(100)
}) if (data.loading || Date.now() - lastExec < autoRefresh.interval * 1000) {
continue
}
lastExec = Date.now()
loadSlowLog()
} while (true)
stopAutoRefresh()
}
onUnmounted(() => { const stopAutoRefresh = () => {
clearInterval(intervalID) autoRefresh.on = false
}) }
onMounted(() => loadSlowLog())
onUnmounted(() => stopAutoRefresh())
const onToggleRefresh = (on) => {
if (on) {
startAutoRefresh()
} else {
stopAutoRefresh()
}
}
const onListLimitChanged = (limit) => { const onListLimitChanged = (limit) => {
loadSlowLog() loadSlowLog()
@ -162,23 +186,28 @@ const onListLimitChanged = (limit) => {
style="width: 120px" style="width: 120px"
@update:value="onListLimitChanged" /> @update:value="onListLimitChanged" />
</n-form-item> </n-form-item>
<n-form-item :label="$t('slog.auto_refresh')"> <n-form-item :label="$t('slog.filter')">
<n-switch v-model:value="data.autoLoading" :loading="data.loading" /> <n-input v-model:value="data.keyword" clearable placeholder="" />
</n-form-item> </n-form-item>
<n-form-item label="&nbsp;"> <n-form-item label="&nbsp;">
<n-tooltip> <n-popover :delay="500" keep-alive-on-hover placement="bottom" trigger="hover">
{{ $t('slog.refresh') }}
<template #trigger> <template #trigger>
<n-button :loading="data.loading" circle size="small" tertiary @click="_loadSlowLog"> <n-button :loading="data.loading" circle size="small" tertiary @click="_loadSlowLog">
<template #icon> <template #icon>
<n-icon :component="Refresh" /> <refresh
:class="{ 'auto-rotate': autoRefresh.on }"
:color="autoRefresh.on ? themeVars.primaryColor : undefined"
:stroke-width="autoRefresh.on ? 6 : 3" />
</template> </template>
</n-button> </n-button>
</template> </template>
</n-tooltip> <auto-refresh-form
</n-form-item> v-model:interval="autoRefresh.interval"
<n-form-item :label="$t('slog.filter')"> v-model:on="autoRefresh.on"
<n-input v-model:value="data.keyword" clearable placeholder="" /> :default-value="5"
:loading="data.loading"
@toggle="onToggleRefresh" />
</n-popover>
</n-form-item> </n-form-item>
</n-form> </n-form>
<n-data-table <n-data-table

View File

@ -368,9 +368,7 @@
"exec_time": "Time", "exec_time": "Time",
"client": "Client", "client": "Client",
"cmd": "Command", "cmd": "Command",
"cost_time": "Cost", "cost_time": "Cost"
"refresh": "Refresh Now",
"auto_refresh": "Auto Refresh"
}, },
"monitor": { "monitor": {
"title": "Monitor Commands", "title": "Monitor Commands",

View File

@ -300,8 +300,6 @@
"exec_time": "Tempo", "exec_time": "Tempo",
"client": "Cliente", "client": "Cliente",
"cmd": "Comando", "cmd": "Comando",
"cost_time": "Custo", "cost_time": "Custo"
"refresh": "Atualizar Agora",
"auto_refresh": "Atualização Automática"
} }
} }

View File

@ -368,9 +368,7 @@
"exec_time": "执行时间", "exec_time": "执行时间",
"client": "客户端", "client": "客户端",
"cmd": "命令", "cmd": "命令",
"cost_time": "耗时", "cost_time": "耗时"
"refresh": "立即刷新",
"auto_refresh": "自动刷新"
}, },
"monitor": { "monitor": {
"title": "监控命令", "title": "监控命令",