perf: optimize the performance of command monitor

backend/services/monitor_service.go

@@ -17,6 +17,7 @@ import (
 type monitorItem struct {
 	client    *redis.Client
 	cmd       *redis.MonitorCmd
+	mutex     sync.Mutex
 	ch        chan string
 	closeCh   chan struct{}
 	eventName string
@@ -88,7 +89,7 @@ func (c *monitorService) StartMonitor(server string) (resp types.JSResp) {
 	item.cmd = item.client.Monitor(c.ctx, item.ch)
 	item.cmd.Start()
 
-	go c.processMonitor(item.ch, item.closeCh, item.eventName)
+	go c.processMonitor(&item.mutex, item.ch, item.closeCh, item.eventName)
 	resp.Success = true
 	resp.Data = struct {
 		EventName string `json:"eventName"`
@@ -98,12 +99,23 @@ func (c *monitorService) StartMonitor(server string) (resp types.JSResp) {
 	return
 }
 
-func (c *monitorService) processMonitor(ch <-chan string, closeCh <-chan struct{}, eventName string) {
+func (c *monitorService) processMonitor(mutex *sync.Mutex, ch <-chan string, closeCh <-chan struct{}, eventName string) {
+	lastEmitTime := time.Now().Add(-1 * time.Minute)
+	cache := make([]string, 0, 1000)
 	for {
 		select {
 		case data := <-ch:
 			if data != "OK" {
-				runtime.EventsEmit(c.ctx, eventName, data)
+				go func() {
+					mutex.Lock()
+					defer mutex.Unlock()
+					cache = append(cache, data)
+					if time.Now().Sub(lastEmitTime) > 1*time.Second || len(cache) > 300 {
+						runtime.EventsEmit(c.ctx, eventName, cache)
+						cache = cache[:0:cap(cache)]
+						lastEmitTime = time.Now()
+					}
+				}()
 			}
 
 		case <-closeCh:

frontend/src/components/content_value/ContentMonitor.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
-import { filter, get, includes, isEmpty, join } from 'lodash'
+import { debounce, filter, get, includes, isEmpty, join } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import { useThemeVars } from 'naive-ui'
 import useBrowserStore from 'stores/browser.js'
@@ -53,6 +53,13 @@ const displayList = computed(() => {
     return data.list
 })
 
+const _scrollToBottom = () => {
+    nextTick(() => {
+        listRef.value?.scrollTo({ position: 'bottom' })
+    })
+}
+const scrollToBottom = debounce(_scrollToBottom, 1000, { leading: true, trailing: true })
+
 const onStartMonitor = async () => {
     if (isMonitoring.value) {
         return
@@ -65,11 +72,13 @@ const onStartMonitor = async () => {
     }
     data.monitorEvent = get(ret, 'eventName')
     EventsOn(data.monitorEvent, (content) => {
+        if (content instanceof Array) {
+            data.list.push(...content)
+        } else {
             data.list.push(content)
+        }
         if (data.autoShowLast) {
-            nextTick(() => {
+            scrollToBottom()
-                listRef.value.scrollTo({ position: 'bottom' })
-            })
         }
     })
 }
@@ -108,7 +117,7 @@ const onCleanLog = () => {
 <template>
     <div class="content-log content-container fill-height flex-box-v">
         <n-form class="flex-item" label-align="left" label-placement="left" label-width="auto" size="small">
-            <n-form-item :label="$t('monitor.actions')">
+            <n-form-item :feedback="$t('monitor.warning')" :label="$t('monitor.actions')">
                 <n-space>
                     <n-button
                         v-if="!isMonitoring"

frontend/src/langs/en-us.json

@@ -305,8 +305,6 @@
     },
     "upgrade": {
       "title": "New Version Available",
-      "import_expire_title": "Expiration",
-      "import_expire": "Include Expiration Time",
       "new_version_tip": "A new version({ver}) is available. Download now?",
       "no_update": "You're update to date",
       "download_now": "Download",
@@ -364,6 +362,7 @@
   "monitor": {
     "title": "Monitor Commands",
     "actions": "Actions",
+    "warning": "Monitor command may lead to server congestion. Please use it cautiously on production servers.",
     "start": "Start",
     "stop": "Stop",
     "search": "Search",

frontend/src/langs/zh-cn.json

@@ -362,6 +362,7 @@
   "monitor": {
     "title": "监控命令",
     "actions": "操作",
+    "warning": "命令监控可能会造成服务端堵塞，请谨慎在生产环境的服务器使用",
     "start": "开启监控",
     "stop": "停止监控",
     "search": "搜索",