From 484cdcf54e32c08d9be4c00fc9a43506e1f64a7a Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:36:07 +0800
Subject: [PATCH] feat: list all server info in server status page

---
 .../content_value/ContentServerStatus.vue     | 121 ++++++++++++------
 .../src/components/sidebar/ConnectionTree.vue |   2 +-
 frontend/src/langs/en.json                    |   3 +-
 frontend/src/langs/zh-cn.json                 |   3 +-
 4 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index c00f4ff..2dc7348 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -1,7 +1,10 @@
 <script setup>
-import { get, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
-import { computed } from 'vue'
+import { get, map, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
+import { computed, reactive, ref } from 'vue'
 import Help from '../icons/Help.vue'
+import IconButton from '../common/IconButton.vue'
+import Filter from '../icons/Filter.vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
     server: String,
@@ -64,45 +67,87 @@ const totalKeys = computed(() => {
     })
     return sum(toArray(nums))
 })
+
+const infoList = computed(() => map(props.info, (value, key) => ({ value, key })))
+
+const i18n = useI18n()
+const infoColumns = [
+    reactive({
+        title: i18n.t('key'),
+        key: 'key',
+        defaultSortOrder: 'ascend',
+        sorter: 'default',
+        minWidth: 100,
+        filterOptionValue: null,
+        filter(value, row) {
+            return !!~row.key.indexOf(value.toString())
+        },
+    }),
+    { title: i18n.t('value'), key: 'value' },
+]
+const infoFilter = ref('')
+const onFilterInfo = (val) => {
+    infoColumns[0].filterOptionValue = val
+}
 </script>
 
 <template>
-    <n-card :theme-override1s="{ paddingMedium: '10px 20px 10px' }">
-        <template #header>
-            {{ props.server }}
-            <n-space inline size="small">
-                <n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag>
-                <n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag>
-                <n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag>
-            </n-space>
-        </template>
-        <template #header-extra>
-            <n-space inline size="small">
-                {{ $t('auto_refresh') }}
-                <n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
-            </n-space>
-        </template>
-        <n-grid x-gap="5" style="min-width: 500px">
-            <n-gi :span="6">
-                <n-statistic :label="$t('uptime')" :value="uptime[0]">
-                    <template #suffix> {{ $t(uptime[1]) }}</template>
-                </n-statistic>
-            </n-gi>
-            <n-gi :span="6">
-                <n-statistic :label="$t('connected_clients')" :value="get(props.info, 'connected_clients', 0)" />
-            </n-gi>
-            <n-gi :span="6">
-                <n-statistic :value="totalKeys">
-                    <template #label>{{ $t('total_keys') }} <n-icon :component="Help" /></template>
-                </n-statistic>
-            </n-gi>
-            <n-gi :span="6">
-                <n-statistic :label="$t('memory_used')" :value="usedMemory[0]">
-                    <template #suffix> {{ usedMemory[1] }}</template>
-                </n-statistic>
-            </n-gi>
-        </n-grid>
-    </n-card>
+    <n-scrollbar>
+        <n-space vertical>
+            <n-card :theme-override1s="{ paddingMedium: '10px 20px 10px' }">
+                <template #header>
+                    {{ props.server }}
+                    <n-space inline size="small">
+                        <n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag>
+                        <n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag>
+                        <n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag>
+                    </n-space>
+                </template>
+                <template #header-extra>
+                    <n-space inline size="small">
+                        {{ $t('auto_refresh') }}
+                        <n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
+                    </n-space>
+                </template>
+                <n-grid x-gap="5" style="min-width: 500px">
+                    <n-gi :span="6">
+                        <n-statistic :label="$t('uptime')" :value="uptime[0]">
+                            <template #suffix> {{ $t(uptime[1]) }}</template>
+                        </n-statistic>
+                    </n-gi>
+                    <n-gi :span="6">
+                        <n-statistic
+                            :label="$t('connected_clients')"
+                            :value="get(props.info, 'connected_clients', 0)"
+                        />
+                    </n-gi>
+                    <n-gi :span="6">
+                        <n-statistic :value="totalKeys">
+                            <template #label
+                                >{{ $t('total_keys') }}
+                                <n-icon :component="Help" />
+                            </template>
+                        </n-statistic>
+                    </n-gi>
+                    <n-gi :span="6">
+                        <n-statistic :label="$t('memory_used')" :value="usedMemory[0]">
+                            <template #suffix> {{ usedMemory[1] }}</template>
+                        </n-statistic>
+                    </n-gi>
+                </n-grid>
+            </n-card>
+            <n-card :title="$t('all_info')">
+                <template #header-extra>
+                    <n-input v-model:value="infoFilter" @update:value="onFilterInfo" placeholder="">
+                        <template #prefix>
+                            <icon-button :icon="Filter" size="18" />
+                        </template>
+                    </n-input>
+                </template>
+                <n-data-table :columns="infoColumns" :data="infoList" />
+            </n-card>
+        </n-space>
+    </n-scrollbar>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index c6fc3fe..a092a6d 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -29,7 +29,7 @@ const selectedKeys = ref([])
 
 watch(selectedKeys, () => {
     const key = selectedKeys.value[0]
-    // try remove group name
+    // try to remove group name
     const kparts = split(key, '/')
     const len = size(kparts)
     if (len > 1) {
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index e8a5ba4..dfc87bb 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -141,5 +141,6 @@
   "memory_used": "Memory",
   "unit_day": "D",
   "unit_hour": "H",
-  "unit_minute": "M"
+  "unit_minute": "M",
+  "all_info": "All Info"
 }
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 762fc9e..0edae14 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -144,5 +144,6 @@
   "memory_used": "内存使用",
   "unit_day": "天",
   "unit_hour": "小时",
-  "unit_minute": "分钟"
+  "unit_minute": "分钟",
+  "all_info": "所有信息"
 }