feat: list all server info in server status page

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,9 +67,33 @@ 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-scrollbar>
+        <n-space vertical>
             <n-card :theme-override1s="{ paddingMedium: '10px 20px 10px' }">
                 <template #header>
                     {{ props.server }}
@@ -89,11 +116,17 @@ const totalKeys = computed(() => {
                         </n-statistic>
                     </n-gi>
                     <n-gi :span="6">
-                <n-statistic :label="$t('connected_clients')" :value="get(props.info, 'connected_clients', 0)" />
+                        <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>
+                            <template #label
+                                >{{ $t('total_keys') }}
+                                <n-icon :component="Help" />
+                            </template>
                         </n-statistic>
                     </n-gi>
                     <n-gi :span="6">
@@ -103,6 +136,18 @@ const totalKeys = computed(() => {
                     </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>

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) {

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"
 }

frontend/src/langs/zh-cn.json

@@ -144,5 +144,6 @@
   "memory_used": "内存使用",
   "unit_day": "天",
   "unit_hour": "小时",
-  "unit_minute": "分钟"
+  "unit_minute": "分钟",
+  "all_info": "所有信息"
 }