feat: add connected client list

backend/services/browser_service.go

@@ -2513,3 +2513,52 @@ func (b *browserService) GetSlowLogs(server string, num int64) (resp types.JSRes
 	}
 	return
 }
+
+// GetClientList get all connected client info
+func (b *browserService) GetClientList(server string) (resp types.JSResp) {
+	item, err := b.getRedisClient(server, -1)
+	if err != nil {
+		resp.Msg = err.Error()
+		return
+	}
+
+	parseContent := func(content string) []map[string]string {
+		lines := strings.Split(content, "\n")
+		list := make([]map[string]string, 0, len(lines))
+		for _, line := range lines {
+			line = strings.TrimSpace(line)
+			if len(line) > 0 {
+				items := strings.Split(line, " ")
+				itemKV := map[string]string{}
+				for _, it := range items {
+					kv := strings.SplitN(it, "=", 2)
+					if len(kv) > 1 {
+						itemKV[kv[0]] = kv[1]
+					}
+				}
+				list = append(list, itemKV)
+			}
+		}
+		return list
+	}
+
+	client, ctx := item.client, item.ctx
+	var fullList []map[string]string
+	var mutex sync.Mutex
+	if cluster, ok := client.(*redis.ClusterClient); ok {
+		cluster.ForEachMaster(ctx, func(ctx context.Context, cli *redis.Client) error {
+			mutex.Lock()
+			defer mutex.Unlock()
+			fullList = append(fullList, parseContent(cli.ClientList(ctx).Val())...)
+			return nil
+		})
+	} else {
+		fullList = append(fullList, parseContent(client.ClientList(ctx).Val())...)
+	}
+
+	resp.Success = true
+	resp.Data = map[string]any{
+		"list": fullList,
+	}
+	return
+}

frontend/src/components/content_value/ContentServerStatus.vue

@@ -14,20 +14,21 @@ import {
     toArray,
     toNumber,
 } from 'lodash'
-import { computed, onMounted, onUnmounted, reactive, ref, shallowRef, toRaw, watch } from 'vue'
+import { computed, h, onMounted, onUnmounted, reactive, ref, shallowRef, toRaw, watch } 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'
+import { NButton, NIcon, NSpace, useThemeVars } from 'naive-ui'
 import { Line } from 'vue-chartjs'
 import dayjs from 'dayjs'
 import { convertBytes, formatBytes } from '@/utils/byte_convert.js'
 import usePreferencesStore from 'stores/preferences.js'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
+import { toHumanReadable } from '@/utils/date.js'
 
 const props = defineProps({
     server: String,
@@ -501,6 +502,87 @@ const byteChartOption = computed(() => {
         },
     }
 })
+
+const clientInfo = reactive({
+    loading: false,
+    content: [],
+})
+const onShowClients = async (show) => {
+    if (show) {
+        try {
+            clientInfo.loading = true
+            clientInfo.content = await browserStore.getClientList(props.server)
+        } finally {
+            clientInfo.loading = false
+        }
+    }
+}
+
+const clientTableColumns = computed(() => {
+    return [
+        {
+            key: 'title',
+            title: () => {
+                return h(NSpace, { wrap: false, wrapItem: false, justify: 'center' }, () => [
+                    h('span', { style: { fontWeight: '550', fontSize: '15px' } }, i18n.t('status.client.title')),
+                    h(IconButton, {
+                        icon: Refresh,
+                        size: 16,
+                        onClick: () => onShowClients(true),
+                    }),
+                ])
+            },
+            align: 'center',
+            titleAlign: 'center',
+            children: [
+                {
+                    key: 'no',
+                    title: '#',
+                    width: 60,
+                    align: 'center',
+                    titleAlign: 'center',
+                    render: (row, index) => {
+                        return index + 1
+                    },
+                },
+                {
+                    key: 'addr',
+                    title: () => i18n.t('status.client.addr'),
+                    sorter: 'default',
+                    align: 'center',
+                    titleAlign: 'center',
+                },
+                {
+                    key: 'db',
+                    title: () => i18n.t('status.client.db'),
+                    align: 'center',
+                    titleAlign: 'center',
+                },
+                {
+                    key: 'age',
+                    title: () => i18n.t('status.client.age'),
+                    sorter: (row1, row2) => row1.age - row2.age,
+                    defaultSortOrder: 'descend',
+                    align: 'center',
+                    titleAlign: 'center',
+                    render: ({ age }, index) => {
+                        return toHumanReadable(age)
+                    },
+                },
+                {
+                    key: 'idle',
+                    title: () => i18n.t('status.client.idle'),
+                    sorter: (row1, row2) => row1.age - row2.age,
+                    align: 'center',
+                    titleAlign: 'center',
+                    render: ({ idle }, index) => {
+                        return toHumanReadable(idle)
+                    },
+                },
+            ],
+        },
+    ]
+})
 </script>
 
 <template>
@@ -568,7 +650,24 @@ const byteChartOption = computed(() => {
                 <n-gi :span="6">
                     <n-statistic
                         :label="$t('status.connected_clients')"
-                        :value="get(serverInfo, 'Clients.connected_clients', '0')" />
+                        :value="get(serverInfo, 'Clients.connected_clients', '0')">
+                        <template #suffix>
+                            <n-tooltip trigger="click" width="70vw" @update-show="onShowClients">
+                                <template #trigger>
+                                    <n-button :bordered="false" size="small">&LowerRightArrow;</n-button>
+                                </template>
+                                <n-data-table
+                                    :columns="clientTableColumns"
+                                    :data="clientInfo.content"
+                                    :loading="clientInfo.loading"
+                                    :single-column="false"
+                                    :single-line="false"
+                                    max-height="50vh"
+                                    size="small"
+                                    striped />
+                            </n-tooltip>
+                        </template>
+                    </n-statistic>
                 </n-gi>
                 <n-gi :span="6">
                     <n-statistic :value="totalKeys">

frontend/src/components/content_value/ContentToolbar.vue

@@ -10,11 +10,11 @@ import { useI18n } from 'vue-i18n'
 import IconButton from '@/components/common/IconButton.vue'
 import Copy from '@/components/icons/Copy.vue'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
-import { computed, onUnmounted, reactive, watch } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, watch } from 'vue'
 import { NIcon, useThemeVars } from 'naive-ui'
 import { timeout } from '@/utils/promise.js'
 import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue'
-import dayjs from 'dayjs'
+import { toHumanReadable } from '@/utils/date.js'
 
 const props = defineProps({
     server: String,
@@ -45,6 +45,12 @@ const autoRefresh = reactive({
     interval: 2,
 })
 
+const ttl = reactive({
+    value: 0,
+    expire: 0,
+    intervalID: 0,
+})
+
 const themeVars = useThemeVars()
 const dialogStore = useDialog()
 const i18n = useI18n()
@@ -54,15 +60,9 @@ const binaryKey = computed(() => {
 })
 
 const ttlString = computed(() => {
-    if (props.ttl > 0) {
-        const dur = dayjs.duration(props.ttl, 'seconds')
-        const days = dur.days()
-        if (days > 0) {
-            return days + i18n.t('common.unit_day') + ' ' + dur.format('HH:mm:ss')
-        } else {
-            return dur.format('HH:mm:ss')
-        }
-    } else if (props.ttl < 0) {
+    if (ttl.value > 0) {
+        return toHumanReadable(ttl.value)
+    } else if (ttl.value < 0) {
         return i18n.t('interface.forever')
     } else {
         return '00:00:00'
@@ -89,15 +89,46 @@ const stopAutoRefresh = () => {
     autoRefresh.on = false
 }
 
+const syncTTL = (seconds) => {
+    ttl.value = seconds
+    if (seconds >= 0) {
+        ttl.expire = Math.floor(Date.now() / 1000 + seconds)
+    } else {
+        ttl.expire = 0
+    }
+}
+
 watch(
     () => props.keyPath,
     () => {
         stopAutoRefresh()
-        autoRefresh.interval = props.interval
     },
 )
 
-onUnmounted(() => stopAutoRefresh())
+watch(
+    () => props.ttl,
+    (seconds) => syncTTL(seconds),
+)
+
+onMounted(() => {
+    syncTTL(props.ttl)
+    ttl.intervalID = setInterval(() => {
+        if (ttl.expire > 0) {
+            const nowSeconds = Math.floor(Date.now() / 1000)
+            ttl.value = Math.max(0, ttl.expire - nowSeconds)
+        } else {
+            ttl.value = -1
+        }
+    }, 1000)
+})
+
+onUnmounted(() => {
+    stopAutoRefresh()
+    if (ttl.intervalID > 0) {
+        clearInterval(ttl.intervalID)
+        ttl.intervalID = 0
+    }
+})
 
 const onToggleRefresh = (on) => {
     if (on) {
@@ -168,7 +199,7 @@ const onTTL = () => {
                         <template #icon>
                             <n-icon :component="Timer" size="18" />
                         </template>
-                        {{ ttlString }}
+                        <span style="font-variant-numeric: tabular-nums">{{ ttlString }}</span>
                     </n-button>
                 </template>
                 TTL{{ `${ttl > 0 ? ': ' + ttl + $t('common.second') : ''}` }}

frontend/src/components/sidebar/BrowserTree.vue

@@ -567,7 +567,11 @@ defineExpose({
 </script>
 
 <template>
-    <div :style="{ backgroundColor }" class="flex-box-v browser-tree-wrapper" @contextmenu="(e) => e.preventDefault()">
+    <div
+        :style="{ backgroundColor }"
+        class="flex-box-v browser-tree-wrapper"
+        @contextmenu="(e) => e.preventDefault()"
+        @keydown.esc="contextMenuParam.show = false">
         <n-spin v-if="props.loading" class="fill-height" />
         <n-empty v-else-if="!props.loading && isEmpty(data)" class="empty-content" />
         <n-tree

frontend/src/components/sidebar/ConnectionTree.vue

@@ -479,6 +479,7 @@ const onCancelOpen = () => {
 </script>
 
 <template>
+    <div class="connection-tree-wrapper" @keydown.esc="contextMenuParam.show = false">
         <n-empty
             v-if="isEmpty(connectionStore.connections)"
             :description="$t('interface.empty_server_list')"
@@ -538,8 +539,14 @@ const onCancelOpen = () => {
             trigger="manual"
             @clickoutside="contextMenuParam.show = false"
             @select="handleSelectContextMenu" />
+    </div>
 </template>
 
 <style lang="scss" scoped>
 @import '@/styles/content';
+
+.connection-tree-wrapper {
+    height: 100%;
+    overflow: hidden;
+}
 </style>

frontend/src/langs/en-us.json

@@ -379,7 +379,14 @@
     "activity_status": "Activity",
     "act_cmd": "Commands Per Second",
     "act_network_input": "Network Input",
-    "act_network_output": "Network Output"
+    "act_network_output": "Network Output",
+    "client": {
+      "title": "Connected Client List",
+      "addr": "Client Address",
+      "age": "Age (sec)",
+      "idle": "Idle (sec)",
+      "db": "Database"
+    }
   },
   "slog": {
     "title": "Slow Log",

frontend/src/langs/zh-cn.json

@@ -379,7 +379,14 @@
     "activity_status": "活动状态",
     "act_cmd": "命令执行数/秒",
     "act_network_input": "网络输入",
-    "act_network_output": "网络输出"
+    "act_network_output": "网络输出",
+    "client": {
+      "title": "所有客户端列表",
+      "addr": "客户端地址",
+      "age": "连接时长(秒)",
+      "idle": "空闲时长(秒)",
+      "db": "数据库"
+    }
   },
   "slog": {
     "title": "慢日志",

frontend/src/stores/browser.js

@@ -13,6 +13,7 @@ import {
     DeleteKeys,
     ExportKey,
     FlushDB,
+    GetClientList,
     GetCmdHistory,
     GetKeyDetail,
     GetKeySummary,
@@ -1869,6 +1870,26 @@ const useBrowserStore = defineStore('browser', {
             }
         },
 
+        /**
+         * get client list info
+         * @param {string} server
+         * @return {Promise<{idle: number, name: string, addr: string, age: number, db: number}[]>}
+         */
+        async getClientList(server) {
+            const { success, msg, data } = await GetClientList(server)
+            if (success) {
+                const { list = [] } = data
+                return map(list, (item) => ({
+                    addr: item['addr'],
+                    name: item['name'],
+                    age: item['age'] || 0,
+                    idle: item['idle'] || 0,
+                    db: item['db'] || 0,
+                }))
+            }
+            return []
+        },
+
         /**
          * get slow log list
          * @param {string} server

frontend/src/utils/date.js

@@ -0,0 +1,17 @@
+import dayjs from 'dayjs'
+import { i18nGlobal } from '@/utils/i18n.js'
+
+/**
+ * convert seconds number to human-readable string
+ * @param {number} duration duration in seconds
+ * @return {string}
+ */
+export const toHumanReadable = (duration) => {
+    const dur = dayjs.duration(duration, 'seconds')
+    const days = dur.days()
+    if (days > 0) {
+        return days + i18nGlobal.t('common.unit_day') + ' ' + dur.format('HH:mm:ss')
+    } else {
+        return dur.format('HH:mm:ss')
+    }
+}

go.mod

@@ -5,7 +5,7 @@ go 1.21
 require (
 	github.com/adrg/sysfont v0.1.2
 	github.com/andybalholm/brotli v1.1.0
-	github.com/google/uuid v1.5.0
+	github.com/google/uuid v1.6.0
 	github.com/klauspost/compress v1.17.4
 	github.com/redis/go-redis/v9 v9.4.0
 	github.com/vrischmann/userdir v0.0.0-20151206171402-20f291cebd68

go.sum

@@ -26,8 +26,8 @@ github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE=
 github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78=
 github.com/godbus/dbus/v5 v5.1.0 h1:4KLkAxT3aOY8Li4FRJe/KvhoNFFxo0m6fNuFUO8QJUk=
 github.com/godbus/dbus/v5 v5.1.0/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
-github.com/google/uuid v1.5.0 h1:1p67kYwdtXjb0gL0BPiP1Av9wiZPo5A8z2cWkTZ+eyU=
-github.com/google/uuid v1.5.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
 github.com/klauspost/compress v1.17.4 h1:Ej5ixsIri7BrIjBkRZLTo6ghwrEtHFk7ijlczPW4fZ4=