From ee57346df6a865b55a5c69979851047b2621eb52 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 16 Jan 2024 16:13:13 +0800
Subject: [PATCH] feat: add activity monitor
---
.../content_value/ContentServerStatus.vue | 543 +++++++++++++-----
frontend/src/langs/en-us.json | 7 +-
frontend/src/langs/pt-br.json | 3 +-
frontend/src/langs/zh-cn.json | 7 +-
frontend/src/main.js | 2 +
frontend/src/utils/byte_convert.js | 34 ++
frontend/src/utils/chart.js | 15 +
7 files changed, 475 insertions(+), 136 deletions(-)
create mode 100644 frontend/src/utils/byte_convert.js
create mode 100644 frontend/src/utils/chart.js
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index 9161581..a91c6e3 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -1,6 +1,6 @@
-
-
-
-
-
-
- {{ props.server }}
-
- Redis Version
-
- v{{ redisVersion }}
-
-
-
- Mode
-
- {{ redisMode }}
-
-
-
- Role
-
- {{ role }}
-
-
-
-
-
-
+
+
+
+
+ {{ props.server }}
+
+ Redis Version
+ v{{ redisVersion }}
+
+
+
+ Mode
+
+ {{ redisMode }}
+
+
+
+ Role
+
+ {{ role }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t(uptime.unit) }}
+
+
+
+
+
+
+
+
+ {{ $t('status.total_keys') }}
+
+
+
+
+
+ {{ usedMemory[1] }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+ @click="onFilterGroup(k)">
+ {{ k }}
-
-
-
-
-
-
-
-
- {{ $t(uptime[1]) }}
-
-
-
-
-
-
-
-
- {{ $t('status.total_keys') }}
-
-
-
-
-
- {{ usedMemory[1] }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ },
+ { title: $t('common.value'), titleAlign: 'center', key: 'value' },
+ ]"
+ :data="env"
+ :loading="pageState.loading"
+ :single-line="false"
+ class="flex-item-expand"
+ flex-height
+ striped />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index f83f7c5..109222d 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -359,7 +359,12 @@
"connected_clients": "Clients",
"total_keys": "Keys",
"memory_used": "Memory",
- "all_info": "Information"
+ "all_info": "Information",
+ "env_info": "Environment",
+ "activity_status": "Activity",
+ "act_cmd": "Commands Per Second",
+ "act_network_input": "Network Input",
+ "act_network_output": "Network Output"
},
"slog": {
"title": "Slow Log",
diff --git a/frontend/src/langs/pt-br.json b/frontend/src/langs/pt-br.json
index 0f98f57..a607283 100644
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@@ -290,8 +290,7 @@
"uptime": "Tempo de Atividade",
"connected_clients": "Clientes Conectados",
"total_keys": "Chaves Totais",
- "memory_used": "Memória Usada",
- "all_info": "Informações"
+ "memory_used": "Memória Usada"
},
"slog": {
"title": "Registro de Operações Lentas",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index b401eac..70cf57d 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -359,7 +359,12 @@
"connected_clients": "已连客户端",
"total_keys": "键总数",
"memory_used": "内存使用",
- "all_info": "全部信息"
+ "all_info": "全部信息",
+ "env_info": "运行环境",
+ "activity_status": "活动状态",
+ "act_cmd": "命令执行数/秒",
+ "act_network_input": "网络输入",
+ "act_network_output": "网络输出"
},
"slog": {
"title": "慢日志",
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 452e1c4..94f9804 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -10,6 +10,7 @@ import { setupDiscreteApi } from '@/utils/discrete.js'
import usePreferencesStore from 'stores/preferences.js'
import { loadEnvironment } from '@/utils/platform.js'
import { setupMonaco } from '@/utils/monaco.js'
+import { setupChart } from '@/utils/chart.js'
dayjs.extend(duration)
dayjs.extend(relativeTime)
@@ -21,6 +22,7 @@ async function setupApp() {
await loadEnvironment()
setupMonaco()
+ setupChart()
const prefStore = usePreferencesStore()
await prefStore.loadPreferences()
await setupDiscreteApi()
diff --git a/frontend/src/utils/byte_convert.js b/frontend/src/utils/byte_convert.js
new file mode 100644
index 0000000..3b5518c
--- /dev/null
+++ b/frontend/src/utils/byte_convert.js
@@ -0,0 +1,34 @@
+const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+/**
+ * convert byte value
+ * @param {number} bytes
+ * @param {number} decimals
+ * @return {{unit: string, value: number}}
+ */
+export const convertBytes = (bytes, decimals = 2) => {
+ if (bytes <= 0) {
+ return {
+ value: 0,
+ unit: sizes[0],
+ }
+ }
+
+ const k = 1024
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
+ const j = Math.min(i, sizes.length - 1)
+ return {
+ value: parseFloat((bytes / Math.pow(k, j)).toFixed(decimals)),
+ unit: sizes[j],
+ }
+}
+
+/**
+ *
+ * @param {number} bytes
+ * @param {number} decimals
+ * @return {string}
+ */
+export const formatBytes = (bytes, decimals = 2) => {
+ const res = convertBytes(bytes, decimals)
+ return res.value + ' ' + res.unit
+}
diff --git a/frontend/src/utils/chart.js b/frontend/src/utils/chart.js
new file mode 100644
index 0000000..ff25358
--- /dev/null
+++ b/frontend/src/utils/chart.js
@@ -0,0 +1,15 @@
+import {
+ CategoryScale,
+ Chart as ChartJS,
+ Filler,
+ Legend,
+ LinearScale,
+ LineElement,
+ PointElement,
+ Title,
+ Tooltip,
+} from 'chart.js'
+
+export const setupChart = () => {
+ ChartJS.register(Title, Tooltip, LineElement, CategoryScale, LinearScale, PointElement, Legend, Filler)
+}