perf: add auto-refresh option for slow log
This commit is contained in:
parent
0a26ac6300
commit
718e89a641
|
@ -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=" ">
|
<n-form-item label=" ">
|
||||||
<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
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -368,9 +368,7 @@
|
||||||
"exec_time": "执行时间",
|
"exec_time": "执行时间",
|
||||||
"client": "客户端",
|
"client": "客户端",
|
||||||
"cmd": "命令",
|
"cmd": "命令",
|
||||||
"cost_time": "耗时",
|
"cost_time": "耗时"
|
||||||
"refresh": "立即刷新",
|
|
||||||
"auto_refresh": "自动刷新"
|
|
||||||
},
|
},
|
||||||
"monitor": {
|
"monitor": {
|
||||||
"title": "监控命令",
|
"title": "监控命令",
|
||||||
|
|
Loading…
Reference in New Issue