perf: add auto-refresh option for slow log

backend/services/browser_service.go

@@ -291,7 +291,8 @@ func (b *browserService) getRedisClient(server string, db int) (item *connection
 	var ok bool
 	var client redis.UniversalClient
 	if item, ok = b.connMap[server]; ok {
-		if item.db == db {
+		if item.db == db || db < 0 {
+			// return without switch database directly
 			return
 		}
 

frontend/src/components/common/AutoRefreshForm.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { isNumber } from 'lodash'
+
+const props = defineProps({
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    on: {
+        type: Boolean,
+        default: false,
+    },
+    defaultValue: {
+        type: Number,
+        default: 2,
+    },
+    interval: {
+        type: Number,
+        default: 2,
+    },
+    onRefresh: {
+        type: Function,
+        default: () => {},
+    },
+})
+
+const emit = defineEmits(['toggle', 'update:on', 'update:interval'])
+
+const onToggle = (on) => {
+    emit('update:on', on === true)
+    if (on) {
+        let interval = props.interval
+        if (!isNumber(interval)) {
+            interval = props.defaultValue
+        }
+        interval = Math.max(1, interval)
+        emit('update:interval', interval)
+        emit('toggle', true)
+    } else {
+        emit('toggle', false)
+    }
+}
+</script>
+
+<template>
+    <n-form :show-feedback="false" label-align="right" label-placement="left" label-width="auto" size="small">
+        <n-form-item :label="$t('interface.auto_refresh')">
+            <n-switch :loading="props.loading" :value="props.on" @update:value="onToggle" />
+        </n-form-item>
+        <n-form-item :label="$t('interface.refresh_interval')">
+            <n-input-number
+                :autofocus="false"
+                :default-value="props.defaultValue"
+                :disabled="props.on"
+                :max="9999"
+                :min="1"
+                :show-button="false"
+                :value="props.interval"
+                style="max-width: 100px"
+                @update:value="(val) => emit('update:interval', val)">
+                <template #suffix>
+                    {{ $t('common.unit_second') }}
+                </template>
+            </n-input-number>
+        </n-form-item>
+    </n-form>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/content/ContentLogPane.vue

@@ -107,7 +107,8 @@ const loadHistory = async () => {
         data.history = list || []
     } finally {
         data.loading = false
-        tableRef.value?.scrollTo({ top: 999999 })
+        await nextTick()
+        tableRef.value?.scrollTo({ position: 'bottom' })
     }
 }
 
@@ -118,7 +119,8 @@ const cleanHistory = async () => {
             const success = await browserStore.cleanCmdHistory()
             if (success) {
                 data.history = []
-                tableRef.value?.scrollTo({ top: 0 })
+                await nextTick()
+                tableRef.value?.scrollTo({ position: 'top' })
                 $message.success(i18n.t('dialogue.handle_succ'))
             }
         } finally {

frontend/src/components/content_value/ContentServerStatus.vue

@@ -1,20 +1,27 @@
 <script setup>
 import { get, isEmpty, map, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Filter from '@/components/icons/Filter.vue'
 import Refresh from '@/components/icons/Refresh.vue'
 import useBrowserStore from 'stores/browser.js'
+import { timeout } from '@/utils/promise.js'
+import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue'
+import { NIcon, useThemeVars } from 'naive-ui'
 
 const props = defineProps({
     server: String,
 })
 
 const browserStore = useBrowserStore()
+const themeVars = useThemeVars()
 const serverInfo = ref({})
-const autoRefresh = ref(false)
-const loading = ref(false) // loading status for refresh
-const autoLoading = ref(false) // loading status for auto refresh
+const pageState = reactive({
+    autoRefresh: false,
+    refreshInterval: 5,
+    loading: false, // loading status for refresh
+    autoLoading: false, // loading status for auto refresh
+})
 
 /**
  * refresh server status info
@@ -23,32 +30,58 @@ const autoLoading = ref(false) // loading status for auto refresh
  */
 const refreshInfo = async (force) => {
     if (force) {
-        loading.value = true
+        pageState.loading = true
     } else {
-        autoLoading.value = true
+        pageState.autoLoading = true
     }
     if (!isEmpty(props.server) && browserStore.isConnected(props.server)) {
         try {
             serverInfo.value = await browserStore.getServerInfo(props.server)
         } finally {
-            loading.value = false
-            autoLoading.value = false
+            pageState.loading = false
+            pageState.autoLoading = false
         }
     }
 }
 
-let intervalID
+const isLoading = computed(() => {
+    return pageState.loading || pageState.autoLoading
+})
+
+const startAutoRefresh = async () => {
+    let lastExec = Date.now()
+    do {
+        if (!pageState.autoRefresh) {
+            break
+        }
+        await timeout(100)
+        if (pageState.loading || pageState.autoLoading || Date.now() - lastExec < pageState.refreshInterval * 1000) {
+            continue
+        }
+        lastExec = Date.now()
+        await refreshInfo()
+    } while (true)
+    stopAutoRefresh()
+}
+
+const stopAutoRefresh = () => {
+    pageState.autoRefresh = false
+}
+
+const onToggleRefresh = (on) => {
+    if (on) {
+        startAutoRefresh()
+    } else {
+        stopAutoRefresh()
+    }
+}
+
 onMounted(() => {
     refreshInfo()
-    intervalID = setInterval(() => {
-        if (autoRefresh.value === true) {
-            refreshInfo()
-        }
-    }, 5000)
 })
 
 onUnmounted(() => {
-    clearInterval(intervalID)
+    stopAutoRefresh()
 })
 
 const scrollRef = ref(null)
@@ -128,7 +161,7 @@ const infoFilter = ref('')
                                 <n-tag size="small" type="primary">{{ redisMode }}</n-tag>
                             </template>
                         </n-tooltip>
-                        <n-tooltip v-if="redisMode">
+                        <n-tooltip v-if="role">
                             Role
                             <template #trigger>
                                 <n-tag size="small" type="primary">{{ role }}</n-tag>
@@ -137,27 +170,36 @@ const infoFilter = ref('')
                     </n-space>
                 </template>
                 <template #header-extra>
-                    <n-space align="center" inline>
-                        {{ $t('status.auto_refresh') }}
-                        <n-switch v-model:value="autoRefresh" :loading="autoLoading" />
-                        <n-tooltip>
-                            {{ $t('status.refresh') }}
+                    <n-popover keep-alive-on-hover placement="bottom-end" trigger="hover">
                         <template #trigger>
                             <n-button
-                                    :loading="autoLoading"
+                                :loading="pageState.loading"
+                                :type="isLoading ? 'primary' : 'default'"
                                 circle
                                 size="small"
                                 tertiary
                                 @click="refreshInfo(true)">
                                 <template #icon>
-                                        <n-icon :component="Refresh" />
+                                    <n-icon :size="props.size">
+                                        <refresh
+                                            :class="{
+                                                'auto-rotate': pageState.autoRefresh || isLoading,
+                                            }"
+                                            :color="pageState.autoRefresh ? themeVars.primaryColor : undefined"
+                                            :stroke-width="pageState.autoRefresh ? 6 : 3" />
+                                    </n-icon>
                                 </template>
                             </n-button>
                         </template>
-                        </n-tooltip>
-                    </n-space>
+                        <auto-refresh-form
+                            v-model:interval="pageState.refreshInterval"
+                            v-model:on="pageState.autoRefresh"
+                            :default-value="5"
+                            :loading="pageState.autoLoading"
+                            @toggle="onToggleRefresh" />
+                    </n-popover>
                 </template>
-                <n-spin :show="loading">
+                <n-spin :show="pageState.loading">
                     <n-grid style="min-width: 500px" x-gap="5">
                         <n-gi :span="6">
                             <n-statistic :label="$t('status.uptime')" :value="uptime[0]">
@@ -192,7 +234,7 @@ const infoFilter = ref('')
                         </template>
                     </n-input>
                 </template>
-                <n-spin :show="loading">
+                <n-spin :show="pageState.loading">
                     <n-tabs default-value="CPU" placement="left" type="line">
                         <n-tab-pane v-for="(v, k) in serverInfo" :key="k" :disabled="isEmpty(v)" :name="k">
                             <n-data-table

frontend/src/components/content_value/ContentSlog.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { computed, h, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import Refresh from '@/components/icons/Refresh.vue'
 import { debounce, isEmpty, map, size, split } from 'lodash'
 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: '',
 })
@@ -125,26 +131,45 @@ const _loadSlowLog = () => {
         .then((list) => {
             data.list = list || []
         })
-        .finally(() => {
+        .finally(async () => {
             data.loading = false
-            tableRef.value?.scrollTo({ top: data.sortOrder === 'ascend' ? 999999 : 0 })
+            await nextTick()
+            tableRef.value?.scrollTo({ position: data.sortOrder === 'ascend' ? 'bottom' : 'top' })
         })
 }
 const loadSlowLog = debounce(_loadSlowLog, 1000, { leading: true, trailing: true })
 
-let intervalID
-onMounted(() => {
-    loadSlowLog()
-    intervalID = setInterval(() => {
-        if (data.autoLoading === true) {
-            loadSlowLog()
+const startAutoRefresh = async () => {
+    let lastExec = Date.now()
+    do {
+        if (!autoRefresh.on) {
+            break
+        }
+        await timeout(100)
+        if (data.loading || Date.now() - lastExec < autoRefresh.interval * 1000) {
+            continue
+        }
+        lastExec = Date.now()
+        loadSlowLog()
+    } while (true)
+    stopAutoRefresh()
 }
-    }, 5000)
-})
 
-onUnmounted(() => {
-    clearInterval(intervalID)
-})
+const stopAutoRefresh = () => {
+    autoRefresh.on = false
+}
+
+onMounted(() => loadSlowLog())
+
+onUnmounted(() => stopAutoRefresh())
+
+const onToggleRefresh = (on) => {
+    if (on) {
+        startAutoRefresh()
+    } else {
+        stopAutoRefresh()
+    }
+}
 
 const onListLimitChanged = (limit) => {
     loadSlowLog()
@@ -161,23 +186,28 @@ const onListLimitChanged = (limit) => {
                     style="width: 120px"
                     @update:value="onListLimitChanged" />
             </n-form-item>
-            <n-form-item :label="$t('slog.auto_refresh')">
-                <n-switch v-model:value="data.autoLoading" :loading="data.loading" />
+            <n-form-item :label="$t('slog.filter')">
+                <n-input v-model:value="data.keyword" clearable placeholder="" />
             </n-form-item>
             <n-form-item label="&nbsp;">
-                <n-tooltip>
-                    {{ $t('slog.refresh') }}
+                <n-popover :delay="500" keep-alive-on-hover placement="bottom" trigger="hover">
                     <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>
-            </n-form-item>
-            <n-form-item :label="$t('slog.filter')">
-                <n-input v-model:value="data.keyword" clearable placeholder="" />
+                    <auto-refresh-form
+                        v-model:interval="autoRefresh.interval"
+                        v-model:on="autoRefresh.on"
+                        :default-value="5"
+                        :loading="data.loading"
+                        @toggle="onToggleRefresh" />
+                </n-popover>
             </n-form-item>
         </n-form>
         <n-data-table

frontend/src/components/content_value/ContentToolbar.vue

@@ -14,6 +14,7 @@ import { computed, onUnmounted, reactive, watch } from 'vue'
 import { padStart } from 'lodash'
 import { NIcon, useThemeVars } from 'naive-ui'
 import { timeout } from '@/utils/promise.js'
+import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue'
 
 const props = defineProps({
     server: String,
@@ -70,14 +71,6 @@ const ttlString = computed(() => {
 })
 
 const startAutoRefresh = async () => {
-    if (autoRefresh.on) {
-        return
-    }
-    autoRefresh.on = true
-    if (!isNaN(autoRefresh.interval)) {
-        autoRefresh.interval = 2
-    }
-    autoRefresh.interval = Math.min(autoRefresh.interval, 1)
     let lastExec = Date.now()
     do {
         if (!autoRefresh.on) {
@@ -147,42 +140,19 @@ const onTTL = () => {
                         <template #trigger>
                             <icon-button :loading="props.loading" size="18" @click="emit('reload')">
                                 <n-icon :size="props.size">
-                                    <component
-                                        :is="Refresh"
-                                        :class="{ 'auto-refreshing': autoRefresh.on }"
+                                    <refresh
+                                        :class="{ 'auto-rotate': autoRefresh.on }"
                                         :color="autoRefresh.on ? themeVars.primaryColor : undefined"
-                                        :stroke-width="autoRefresh.on ? 5 : 3" />
+                                        :stroke-width="autoRefresh.on ? 6 : 3" />
                                 </n-icon>
                             </icon-button>
                         </template>
-                        <n-form
-                            :show-feedback="false"
-                            label-align="right"
-                            label-placement="left"
-                            label-width="auto"
-                            size="small">
-                            <n-form-item :label="$t('interface.auto_refresh')">
-                                <n-switch
-                                    :loading="props.loading"
-                                    :value="autoRefresh.on"
-                                    @update:value="onToggleRefresh" />
-                            </n-form-item>
-                            <n-form-item :label="$t('interface.refresh_interval')">
-                                <n-input-number
-                                    v-model:value="autoRefresh.interval"
-                                    :autofocus="false"
+                        <auto-refresh-form
+                            v-model:interval="autoRefresh.interval"
+                            v-model:on="autoRefresh.on"
                             :default-value="2"
-                                    :disabled="autoRefresh.on"
-                                    :max="9999"
-                                    :min="1"
-                                    :show-button="false"
-                                    style="max-width: 100px">
-                                    <template #suffix>
-                                        {{ $t('common.unit_second') }}
-                                    </template>
-                                </n-input-number>
-                            </n-form-item>
-                        </n-form>
+                            :loading="props.loading"
+                            @toggle="onToggleRefresh" />
                     </n-popover>
                 </template>
             </n-input>
@@ -226,14 +196,4 @@ const onTTL = () => {
     align-items: center;
     gap: 5px;
 }
-
-.auto-refreshing {
-    animation: rotate 2s linear infinite;
-}
-
-@keyframes rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
 </style>

frontend/src/components/icons/Refresh.vue

@@ -16,14 +16,14 @@ const props = defineProps({
         <path
             :stroke-width="props.strokeWidth"
             d="M36.7279 36.7279C33.4706 39.9853 28.9706 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C28.9706 6 33.4706 8.01472 36.7279 11.2721C38.3859 12.9301 42 17 42 17"
-            stroke="currentColor"
+            :stroke="color"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
             :stroke-width="props.strokeWidth"
             class="default-stroke"
             d="M42 8V17H33"
-            stroke="currentColor"
+            :stroke="color"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>

frontend/src/langs/en-us.json

@@ -359,9 +359,7 @@
     "connected_clients": "Clients",
     "total_keys": "Keys",
     "memory_used": "Memory",
-    "all_info": "Information",
-    "refresh": "Refresh",
-    "auto_refresh": "Auto Refresh"
+    "all_info": "Information"
   },
   "slog": {
     "title": "Slow Log",
@@ -370,9 +368,7 @@
     "exec_time": "Time",
     "client": "Client",
     "cmd": "Command",
-    "cost_time": "Cost",
-    "refresh": "Refresh Now",
-    "auto_refresh": "Auto Refresh"
+    "cost_time": "Cost"
   },
   "monitor": {
     "title": "Monitor Commands",

frontend/src/langs/pt-br.json

@@ -291,9 +291,7 @@
     "connected_clients": "Clientes Conectados",
     "total_keys": "Chaves Totais",
     "memory_used": "Memória Usada",
-    "all_info": "Informações",
-    "refresh": "Atualizar",
-    "auto_refresh": "Atualização Automática"
+    "all_info": "Informações"
   },
   "slog": {
     "title": "Registro de Operações Lentas",
@@ -302,8 +300,6 @@
     "exec_time": "Tempo",
     "client": "Cliente",
     "cmd": "Comando",
-    "cost_time": "Custo",
-    "refresh": "Atualizar Agora",
-    "auto_refresh": "Atualização Automática"
+    "cost_time": "Custo"
   }
 }

frontend/src/langs/zh-cn.json

@@ -359,9 +359,7 @@
     "connected_clients": "已连客户端",
     "total_keys": "键总数",
     "memory_used": "内存使用",
-    "all_info": "全部信息",
-    "refresh": "立即刷新",
-    "auto_refresh": "自动刷新"
+    "all_info": "全部信息"
   },
   "slog": {
     "title": "慢日志",
@@ -370,9 +368,7 @@
     "exec_time": "执行时间",
     "client": "客户端",
     "cmd": "命令",
-    "cost_time": "耗时",
-    "refresh": "立即刷新",
-    "auto_refresh": "自动刷新"
+    "cost_time": "耗时"
   },
   "monitor": {
     "title": "监控命令",

frontend/src/stores/browser.js

@@ -347,7 +347,7 @@ const useBrowserStore = defineStore('browser', {
          */
         async getServerInfo(server) {
             try {
-                const { success, data } = await ServerInfo(server)
+                const { success, data, msg } = await ServerInfo(server)
                 if (success) {
                     /** @type {RedisServerState} **/
                     const serverInst = this.servers[server]
@@ -355,6 +355,8 @@ const useBrowserStore = defineStore('browser', {
                         serverInst.stats = data
                     }
                     return data
+                } else if (!isEmpty(msg)) {
+                    $message.warning(msg)
                 }
             } finally {
             }

frontend/src/styles/style.scss

@@ -168,3 +168,13 @@ body {
 .fade-leave-to {
     opacity: 0;
 }
+
+.auto-rotate {
+    animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}