perf: add auto-refresh option for slow log

frontend/src/components/content_value/ContentSlog.vue

@@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
 import { useThemeVars } from 'naive-ui'
 import dayjs from 'dayjs'
 import useBrowserStore from 'stores/browser.js'
+import { timeout } from '@/utils/promise.js'
+import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue'
 
 const themeVars = useThemeVars()
 
@@ -21,12 +23,16 @@ const props = defineProps({
     },
 })
 
+const autoRefresh = reactive({
+    on: false,
+    interval: 5,
+})
+
 const data = reactive({
     list: [],
     sortOrder: 'descend',
     listLimit: 20,
     loading: false,
-    autoLoading: false,
     client: '',
     keyword: '',
 })
@@ -133,19 +139,37 @@ const _loadSlowLog = () => {
 }
 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) => {
     loadSlowLog()
@@ -162,23 +186,28 @@ const onListLimitChanged = (limit) => {
                     style="width: 120px"
                     @update:value="onListLimitChanged" />
             </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 label="&nbsp;">
-                <n-tooltip>
+                <n-popover :delay="500" keep-alive-on-hover placement="bottom" trigger="hover">
-                    {{ $t('slog.refresh') }}
                     <template #trigger>
                         <n-button :loading="data.loading" circle size="small" tertiary @click="_loadSlowLog">
                             <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>
                         </n-button>
                     </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>
         <n-data-table

frontend/src/langs/en-us.json

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

frontend/src/langs/pt-br.json

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

frontend/src/langs/zh-cn.json

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