feat: add basic information and styles (#17)

Author: wu-clan

apps/web-antd/src/locales/langs/en-US/page.json

@@ -59,6 +59,24 @@
         "title": {
           "used_memory": "Used Memory"
         }
+      },
+      "info": {
+        "title": "Basic Info",
+        "version": "Version",
+        "mode": "Mode",
+        "os": "OS",
+        "arch": "Arch",
+        "uptime": "Uptime",
+        "clients": "Connections",
+        "memory_human": "Allocated Memory",
+        "connections_received": "Connections Received",
+        "commands_processed": "Commands Processed",
+        "rejected_connections": "Rejected Connections",
+        "keys_command_stats": "Keys Stats",
+        "role": "Role",
+        "used_cpu": "Used CPU",
+        "used_cpu_children": "Used CPU Children",
+        "keys_num": "Keys Num"
       }
     }
   }

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -59,6 +59,24 @@
         "title": {
           "used_memory": "已使用内存"
         }
+      },
+      "info": {
+        "title": "基础信息",
+        "version": "版本",
+        "mode": "模式",
+        "os": "操作系统",
+        "arch": "架构",
+        "uptime": "运行时间",
+        "clients": "连接数",
+        "memory_human": "已分配内存",
+        "connections_received": "可接受连接数",
+        "commands_processed": "已执行命令",
+        "rejected_connections": "已拒绝连接",
+        "keys_command_stats": "查询次数",
+        "role": "角色",
+        "used_cpu": "CPU 消耗",
+        "used_cpu_children": "后台 CPU 占用",
+        "keys_num": "Keys 数量"
       }
     }
   }

apps/web-antd/src/views/monitor/redis/index.vue

@@ -32,6 +32,71 @@ const fetchRedisData = async () => {
 };
 fetchRedisData();
 
+const redisDescriptionItems = computed(() => [
+  {
+    label: $t('page.monitor.redis.info.version'),
+    value: redisInfo.value?.redis_version,
+  },
+  {
+    label: $t('page.monitor.redis.info.os'),
+    value: redisInfo.value?.os,
+  },
+  {
+    label: $t('page.monitor.redis.info.arch'),
+    value: redisInfo.value?.arch_bits,
+  },
+  {
+    label: $t('page.monitor.redis.info.mode'),
+    value: redisInfo.value?.redis_mode,
+  },
+  {
+    label: $t('page.monitor.redis.info.role'),
+    value: redisInfo.value?.role,
+  },
+  {
+    label: $t('page.monitor.redis.info.memory_human'),
+    value: redisInfo.value?.used_memory_human,
+  },
+  {
+    label: $t('page.monitor.redis.info.connections_received'),
+    value: redisInfo.value?.total_connections_received,
+  },
+  {
+    label: $t('page.monitor.redis.info.clients'),
+    value: redisInfo.value?.blocked_clients,
+  },
+  {
+    label: $t('page.monitor.redis.info.rejected_connections'),
+    value: redisInfo.value?.rejected_connections,
+  },
+  {
+    label: $t('page.monitor.redis.info.commands_processed'),
+    value: redisInfo.value?.total_commands_processed,
+  },
+  {
+    label: $t('page.monitor.redis.info.keys_command_stats'),
+    value:
+      Number(redisInfo.value?.keyspace_hits) +
+      Number(redisInfo.value?.keyspace_misses),
+  },
+  {
+    label: $t('page.monitor.redis.info.keys_num'),
+    value: redisInfo.value?.keys_num,
+  },
+  {
+    label: $t('page.monitor.redis.info.used_cpu'),
+    value: redisInfo.value?.used_cpu_sys,
+  },
+  {
+    label: $t('page.monitor.redis.info.used_cpu_children'),
+    value: redisInfo.value?.used_cpu_sys_children,
+  },
+  {
+    label: $t('page.monitor.redis.info.uptime'),
+    value: redisInfo.value?.uptime_in_seconds,
+  },
+]);
+
 watch(redisInfo, (val) => {
   usedMemory.value = Number.parseFloat(
     (Number(val.used_memory) / 1024 / 1024).toFixed(2),
@@ -40,36 +105,37 @@ watch(redisInfo, (val) => {
 </script>
 
 <template>
-  <div>
-    <a-card
-      :title="$t('page.monitor.redis.desc.title')"
-      :loading="loading"
-      class="info-card"
-    >
-      <a-descriptions>
-        <a-descriptions-item label="Test">123</a-descriptions-item>
-      </a-descriptions>
-    </a-card>
-    <a-space style="padding-top: 22px" />
-    <a-row :gutter="20">
-      <a-col :span="12">
+  <div class="container mx-auto p-4">
+    <div class="mb-2 rounded-lg p-2 shadow-md">
+      <a-card :title="$t('page.monitor.redis.desc.title')" :loading="loading">
+        <a-descriptions>
+          <a-descriptions-item
+            v-for="item in redisDescriptionItems"
+            :label="item.label"
+            :key="item.label"
+          >
+            {{ item.value }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+    </div>
+    <div class="flex flex-col gap-2 md:flex-row">
+      <div class="rounded-lg p-2 shadow-md md:w-1/2">
         <a-card
           :title="$t('page.monitor.redis.cards.commands.title')"
           :loading="loading"
-          class="info-card"
         >
           <CommandsSeries :stats="redisStats" />
         </a-card>
-      </a-col>
-      <a-col :span="12">
+      </div>
+      <div class="rounded-lg p-2 shadow-md md:w-1/2">
         <a-card
           :title="$t('page.monitor.redis.cards.memory.title')"
           :loading="loading"
-          class="info-card"
         >
           <ActiveSeries :memory="redisUsedMemory" />
         </a-card>
-      </a-col>
-    </a-row>
+      </div>
+    </div>
   </div>
 </template>