fix: monitor bug

Author: jialong.wang

configs/config.toml

@@ -2,7 +2,7 @@
 # http监听地址
 Host = "0.0.0.0"
 # http监听端口
-Port = 8000
+Port = 9527
 # http优雅关闭等待超时时长(单位秒)
 ShutdownTimeout = 30
 SeverHeader = "probe"
@@ -14,7 +14,7 @@ Prefork = false
 # 定时任务执行间隔配置
 [Gorm]
 # 是否开启调试模式
-Debug = false
+Debug = true
 # 数据库类型(目前支持的数据库类型：postgres)
 DBType = "sqlite"
 # 设置连接可以重用的最长时间(单位：秒)
@@ -38,25 +38,27 @@ User = ""
 # 密码
 Password = ""
 # 数据库
-#DBName = "/app/probe"
-DBName = "/Users/amu/Desktop/probe"
+DBName = "/app/probe"
 # SSL模式
 SSLMode = ""
 
 [Disk]
-Devices = ["/dev/vda1", "/dev/vda3", "/dev/disk3s1s1"]
+# 需要监控的磁盘设备，可以根据 lsblk 命令查看
+Devices = ["sda", "sdb2"]
 
 [Ethernet]
-Names = ["eth0", "en0"]
+# 需要监控的网口，可以通过 ifconfig 命令查看
+Names = ["mgmt"]
 
 [Task]
-Interval = 60 # 单位 s
+# 主机监控数据的采集频率
+Interval = 30  # 单位 s
 
 [Logger]
-File = "/Users/amu/Desktop/probe.log"
+File = "/app/probe.log"
 Level = "debug"
-RotationTime = "1"      # 每天切分一个日志文件
-MaxAge = "7"            # 最多保留 7 天的日志
+RotationTime = "1"  # 每天切分一个日志文件
+MaxAge = "7"        # 最多保留 7 天的日志
 
 [Auth]
 # 是否启用
@@ -65,15 +67,12 @@ Enable = true
 SigningMethod = "HS512"
 # 签名key
 SigningKey = "amprobe"
-# access_token 过期时间（单位秒, 2h）
+# 过期时间（单位秒）
 Expired = 7200
-# refresh_token 过期时间（单位秒, 1d）
-RefreshExpired = 86400
 # key 前缀
 Prefix = "auth_"
 
 
 [InitData]
 Enable = true
-#InitConfigFile = "/app/configs/init.yaml"
-InitConfigFile = "/Users/amu/Desktop/github/amprobe/configs/init.yaml"
+InitConfigFile = "/app/configs/init.yaml"

configs/init.yaml

@@ -1,6 +1,6 @@
 users:
   - username: admin
-    password: amu123456
+    password: 123456
     status: 1
     is_admin: 1
   - username: amprobe

web/package.json

@@ -26,6 +26,7 @@
         "@iconify-json/ep": "^1.1.15",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^20.11.30",
+        "@types/numeral": "^2.0.5",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
         "@vitejs/plugin-vue": "^5.0.4",
@@ -34,6 +35,7 @@
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-vue": "^9.23.0",
+        "numeral": "^2.0.6",
         "prettier": "^3.2.5",
         "sass": "^1.72.0",
         "terser": "^5.30.3",

web/pnpm-lock.yaml

@@ -45,6 +45,6 @@ onMounted(() => {
 <style scoped lang="scss">
 @include b(box) {
     width: 100%;
-    height: 90%;
+    height: 80%;
 }
 </style>

web/src/components/Echarts/index.vue

@@ -46,10 +46,9 @@ export const cpuOptions: EChartsOption = {
         {
             name: 'CPU 使用率',
             type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-                focus: 'series'
+            smooth: true,
+            lineStyle: {
+                width: 2
             },
             data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
         }
@@ -94,10 +93,9 @@ export const memOptions: EChartsOption = {
         {
             name: '内存使用率',
             type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-                focus: 'series'
+            smooth: true,
+            lineStyle: {
+                width: 2
             },
             data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
         }
@@ -153,20 +151,18 @@ export const diskOptions: EChartsOption = {
         {
             name: 'Read',
             type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-                focus: 'series'
+            smooth: true,
+            lineStyle: {
+                width: 2
             },
             data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
         },
         {
             name: 'Write',
             type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-                focus: 'series'
+            smooth: true,
+            lineStyle: {
+                width: 2
             },
             data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
         }
@@ -222,20 +218,18 @@ export const netOptions: EChartsOption = {
         {
             name: 'Receive',
             type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-                focus: 'series'
+            smooth: true,
+            lineStyle: {
+                width: 2
             },
             data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
         },
         {
             name: 'Send',
             type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-                focus: 'series'
+            smooth: true,
+            lineStyle: {
+                width: 2
             },
             data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
         }

web/src/components/Echarts/line.ts

@@ -5,7 +5,7 @@
  */
 
 export function convertBytesToReadable(bytes: number): string {
-    const units = ['Bps', 'KBps', 'MBps', 'GBps', 'TBps']
+    const units = ['B', 'KB', 'MB', 'GB', 'TB']
     let unitIndex = 0
     while (bytes >= 1024 && unitIndex < units.length - 1) {
         bytes /= 1024

web/src/utils/convert.ts

@@ -123,7 +123,7 @@ const renderCPU = async () => {
     set(cpuOption, 'series', [
         {
             name: 'CPU使用率',
-            data: cpuData.map((item) => item.value),
+            data: cpuData.map((item) => item.value.toFixed(2)),
             type: 'line',
             smooth: true,
             showSymbol: false
@@ -165,7 +165,7 @@ const renderMem = async () => {
     set(memOption, 'series', [
         {
             name: '内存使用率',
-            data: memData.map((item) => item.value),
+            data: memData.map((item) => item.value.toFixed(2)),
             type: 'line',
             smooth: true,
             showSymbol: false
@@ -220,17 +220,17 @@ const renderDisk = async () => {
     set(diskOption, 'series', [
         {
             name: 'Read',
-            data: diskData.data.map((item: DiskIO) => convertBytesToReadable(item.io_read)),
+            data: diskData.data.map((item: DiskIO) => item.io_read),
             type: 'line',
             smooth: true,
-            showSymbol: false
+            showSymbol: true
         },
         {
             name: 'Write',
-            data: diskData.data.map((item: DiskIO) => convertBytesToReadable(item.io_write)),
+            data: diskData.data.map((item: DiskIO) => item.io_write),
             type: 'line',
             smooth: true,
-            showSymbol: false
+            showSymbol: true
         }
     ])
     console.log('disk options: ', diskOption)
@@ -267,17 +267,21 @@ const renderNet = async () => {
     set(netOption, 'series', [
         {
             name: 'Receive',
-            data: netData.data.map((item: NetIO) => convertBytesToReadable(item.bytes_recv)),
+            data: netData.data.map((item: NetIO) => item.bytes_recv),
             type: 'line',
-            smooth: true,
-            showSymbol: false
+            showSymbol: true,
+            symbolSize: 2,
+            hoverAnimation: true,
+            smooth: true
         },
         {
             name: 'Send',
-            data: netData.data.map((item: NetIO) => convertBytesToReadable(item.bytes_sent)),
+            data: netData.data.map((item: NetIO) => item.bytes_sent),
             type: 'line',
-            smooth: true,
-            showSymbol: false
+            showSymbol: true,
+            symbolSize: 2,
+            hoverAnimation: true,
+            smooth: true
         }
     ])
     console.log('net options: ', netOption)
@@ -331,7 +335,7 @@ watch(
     .el-row {
         margin-bottom: 4px;
         .el-col {
-            height: 300px;
+            height: 360px;
         }
     }
 

web/src/views/host/monitor/index.vue

@@ -11,7 +11,7 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    base: './', // 设置打包路径
+    base: '/', // 设置打包路径
     plugins: [
         vue(),
         AutoImport({