From 9b63e51300647c3dd69a9f4ceb62b37c4e5ca016 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 25 Jul 2023 11:51:23 +0800
Subject: [PATCH] perf: grouped server info

---
 backend/services/connection_service.go        | 14 +++--
 .../content_value/ContentServerStatus.vue     | 55 ++++++++++---------
 .../src/components/sidebar/BrowserPane.vue    | 14 ++---
 3 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/backend/services/connection_service.go b/backend/services/connection_service.go
index cfbccfa..7ba560a 100644
--- a/backend/services/connection_service.go
+++ b/backend/services/connection_service.go
@@ -201,7 +201,7 @@ func (c *connectionService) OpenConnection(name string) (resp types.JSResp) {
 	info := c.parseInfo(res)
 	for i := 0; i < totaldb; i++ {
 		dbName := "db" + strconv.Itoa(i)
-		dbInfoStr := info[dbName]
+		dbInfoStr := info["Keyspace"][dbName]
 		if len(dbInfoStr) > 0 {
 			dbInfo := c.parseDBItemInfo(dbInfoStr)
 			dbs = append(dbs, types.ConnectionDB{
@@ -296,17 +296,21 @@ func (c *connectionService) getRedisClient(connName string, db int) (*redis.Clie
 
 // parse command response content which use "redis info"
 // # Keyspace\r\ndb0:keys=2,expires=1,avg_ttl=1877111749\r\ndb1:keys=33,expires=0,avg_ttl=0\r\ndb3:keys=17,expires=0,avg_ttl=0\r\ndb5:keys=3,expires=0,avg_ttl=0\r\n
-func (c *connectionService) parseInfo(info string) map[string]string {
-	parsedInfo := map[string]string{}
+func (c *connectionService) parseInfo(info string) map[string]map[string]string {
+	parsedInfo := map[string]map[string]string{}
 	lines := strings.Split(info, "\r\n")
 	if len(lines) > 0 {
+		var subInfo map[string]string
 		for _, line := range lines {
-			if !strings.HasPrefix(line, "#") {
+			if strings.HasPrefix(line, "#") {
+				subInfo = map[string]string{}
+				parsedInfo[strings.TrimSpace(strings.TrimLeft(line, "#"))] = subInfo
+			} else {
 				items := strings.SplitN(line, ":", 2)
 				if len(items) < 2 {
 					continue
 				}
-				parsedInfo[items[0]] = items[1]
+				subInfo[items[0]] = items[1]
 			}
 		}
 	}
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index 352488b..9879db9 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { get, map, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
+import { get, isEmpty, map, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
 import { computed, ref } from 'vue'
 import Help from '../icons/Help.vue'
 import IconButton from '../common/IconButton.vue'
@@ -17,20 +17,20 @@ const emit = defineEmits(['update:autoRefresh', 'refresh'])
 
 const scrollRef = ref(null)
 const redisVersion = computed(() => {
-    return get(props.info, 'redis_version', '')
+    return get(props.info, 'Server.redis_version', '')
 })
 
 const redisMode = computed(() => {
-    return get(props.info, 'redis_mode', '')
+    return get(props.info, 'Server.redis_mode', '')
 })
 
 const role = computed(() => {
-    return get(props.info, 'role', '')
+    return get(props.info, 'Replication.role', '')
 })
 
 const timeUnit = ['unit_minute', 'unit_hour', 'unit_day']
 const uptime = computed(() => {
-    let seconds = get(props.info, 'uptime_in_seconds', 0)
+    let seconds = get(props.info, 'Server.uptime_in_seconds', 0)
     seconds /= 60
     if (seconds < 60) {
         // minutes
@@ -46,7 +46,7 @@ const uptime = computed(() => {
 
 const units = ['B', 'KB', 'MB', 'GB', 'TB']
 const usedMemory = computed(() => {
-    let size = get(props.info, 'used_memory', 0)
+    let size = get(props.info, 'Memory.used_memory', 0)
     let unitIndex = 0
 
     while (size >= 1024 && unitIndex < units.length - 1) {
@@ -59,7 +59,7 @@ const usedMemory = computed(() => {
 
 const totalKeys = computed(() => {
     const regex = /^db\d+$/
-    const result = pickBy(props.info, (value, key) => {
+    const result = pickBy(props.info['Keyspace'], (value, key) => {
         return regex.test(key)
     })
     const nums = mapValues(result, (v) => {
@@ -70,6 +70,7 @@ const totalKeys = computed(() => {
     return sum(toArray(nums))
 })
 const infoList = computed(() => map(props.info, (value, key) => ({ value, key })))
+const infoTab = ref('')
 const infoFilter = ref('')
 </script>
 
@@ -127,7 +128,7 @@ const infoFilter = ref('')
                         <n-gi :span="6">
                             <n-statistic
                                 :label="$t('connected_clients')"
-                                :value="get(props.info, 'connected_clients', 0)"
+                                :value="get(props.info, 'Clients.connected_clients', 0)"
                             />
                         </n-gi>
                         <n-gi :span="6">
@@ -155,23 +156,27 @@ const infoFilter = ref('')
                     </n-input>
                 </template>
                 <n-spin :show="props.loading">
-                    <n-data-table
-                        :columns="[
-                            {
-                                title: $t('key'),
-                                key: 'key',
-                                defaultSortOrder: 'ascend',
-                                sorter: 'default',
-                                minWidth: 100,
-                                filterOptionValue: infoFilter,
-                                filter(value, row) {
-                                    return !!~row.key.indexOf(value.toString())
-                                },
-                            },
-                            { title: $t('value'), key: 'value' },
-                        ]"
-                        :data="infoList"
-                    />
+                    <n-tabs type="line" placement="left" default-value="CPU">
+                        <n-tab-pane v-for="(v, k) in props.info" :key="k" :name="k" :disabled="isEmpty(v)">
+                            <n-data-table
+                                :columns="[
+                                    {
+                                        title: $t('key'),
+                                        key: 'key',
+                                        defaultSortOrder: 'ascend',
+                                        sorter: 'default',
+                                        minWidth: 100,
+                                        filterOptionValue: infoFilter,
+                                        filter(value, row) {
+                                            return !!~row.key.indexOf(value.toString())
+                                        },
+                                    },
+                                    { title: $t('value'), key: 'value' },
+                                ]"
+                                :data="map(v, (value, key) => ({ value, key }))"
+                            />
+                        </n-tab-pane>
+                    </n-tabs>
                 </n-spin>
             </n-card>
         </n-space>
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 18f454a..4ca7047 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -98,13 +98,13 @@ const filterTypeOptions = computed(() => {
         <div class="nav-pane-bottom flex-box-h">
             <icon-button :icon="AddLink" size="20" stroke-width="4" t-tooltip="new_key" @click="onNewKey" />
             <icon-button :icon="Refresh" size="20" stroke-width="4" t-tooltip="reload" @click="onRefresh" />
-            <icon-button
-                :icon="Filter"
-                size="20"
-                stroke-width="4"
-                t-tooltip="filter_key"
-                @click="filterForm.showFilter = !filterForm.showFilter"
-            />
+            <!--            <icon-button-->
+            <!--                :icon="Filter"-->
+            <!--                size="20"-->
+            <!--                stroke-width="4"-->
+            <!--                t-tooltip="filter_key"-->
+            <!--                @click="filterForm.showFilter = !filterForm.showFilter"-->
+            <!--            />-->
             <div class="flex-item-expand"></div>
             <icon-button
                 :disabled="currentSelect.key == null"