From e878ea1e4480b9810647af6526c25dffb0713cd1 Mon Sep 17 00:00:00 2001 From: XZB Date: Thu, 12 May 2022 15:27:15 +0800 Subject: [PATCH] add: detail info tooltip of cpu, ram and disk --- API.ZH.md | 8 +++- API.md | 8 +++- CHANGELOG.md | 8 ++++ README.md | 2 +- client/core/device.go | 4 +- modules/modules.go | 6 ++- web/src/components/explorer.js | 2 +- web/src/locale/en.json | 11 ++++- web/src/locale/zh-CN.json | 9 +++- web/src/pages/overview.js | 86 +++++++++++++++++++++++++++++++--- web/src/utils/utils.js | 2 +- 11 files changed, 128 insertions(+), 18 deletions(-) diff --git a/API.ZH.md b/API.ZH.md index 21ff3fd..51e2230 100644 --- a/API.ZH.md +++ b/API.ZH.md @@ -76,9 +76,13 @@ Authorization: Basic }, "cpu": { "model": "Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz", - "usage": 8.658854166666668 + "usage": 8.658854166666668, + "cores": { + "logical": 8, + "physical": 4 + } }, - "mem": { + "ram": { "total": 8432967680, "used": 5109829632, "usage": 60.593492420452385 diff --git a/API.md b/API.md index 1bac7ff..51f7c04 100644 --- a/API.md +++ b/API.md @@ -74,9 +74,13 @@ The key of the device object is its connection UUID, it's random and temporary. }, "cpu": { "model": "Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz", - "usage": 8.658854166666668 + "usage": 8.658854166666668, + "cores": { + "logical": 8, + "physical": 4 + } }, - "mem": { + "ram": { "total": 8432967680, "used": 5109829632, "usage": 60.593492420452385 diff --git a/CHANGELOG.md b/CHANGELOG.md index a8d7966..c0d78f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## v0.0.7 + +* Add: detail info tooltip of cpu, ram and disk. + +* 新增：CPU、内存、磁盘的详细信息的提示。 + + + ## v0.0.6 * Update: i18n. diff --git a/README.md b/README.md index b73b036..87f7b96 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ Only local installation are available yet. |-----------------|---------|-------|-------| | Process manager | ✔ | ✔ | ✔ | | Kill process | ✔ | ✔ | ✔ | -| Network Status | ✔ | ✔ | ✔ | +| Network Traffic | ✔ | ✔ | ✔ | | File explorer | ✔ | ✔ | ✔ | | File transfer | ✔ | ✔ | ✔ | | Delete file | ✔ | ✔ | ✔ | diff --git a/client/core/device.go b/client/core/device.go index 3d9a299..6835050 100644 --- a/client/core/device.go +++ b/client/core/device.go @@ -121,6 +121,8 @@ func GetCPUInfo() (modules.CPU, error) { return result, errors.New(`failed to read cpu info`) } result.Model = info[0].ModelName + result.Cores.Logical, _ = cpu.Counts(true) + result.Cores.Physical, _ = cpu.Counts(false) stat, err := cpu.Percent(3*time.Second, false) if err != nil { return result, nil @@ -232,7 +234,7 @@ func GetDevice() (*modules.Device, error) { OS: runtime.GOOS, Arch: runtime.GOARCH, LAN: localIP, - Mac: macAddr, + MAC: macAddr, CPU: cpuInfo, RAM: ramInfo, Net: netInfo, diff --git a/modules/modules.go b/modules/modules.go index d59a2f0..0f72ed4 100644 --- a/modules/modules.go +++ b/modules/modules.go @@ -22,7 +22,7 @@ type Device struct { Arch string `json:"arch"` LAN string `json:"lan"` WAN string `json:"wan"` - Mac string `json:"mac"` + MAC string `json:"mac"` Net Net `json:"net"` CPU CPU `json:"cpu"` RAM IO `json:"ram"` @@ -42,6 +42,10 @@ type IO struct { type CPU struct { Model string `json:"model"` Usage float64 `json:"usage"` + Cores struct { + Logical int `json:"logical"` + Physical int `json:"physical"` + } `json:"cores"` } type Net struct { diff --git a/web/src/components/explorer.js b/web/src/components/explorer.js index 36080df..e7271cd 100644 --- a/web/src/components/explorer.js +++ b/web/src/components/explorer.js @@ -24,7 +24,7 @@ function FileBrowser(props) { ellipsis: true, width: 60, // only display file size when it is a file or disk - renderText: (size, file) => file.type !== 1 ? formatSize(size) : '-' + renderText: (size, file) => file.type === 0 || file.type === 2 ? formatSize(size) : '-' }, { key: 'Time', diff --git a/web/src/locale/en.json b/web/src/locale/en.json index 6ba7755..a58e7c5 100644 --- a/web/src/locale/en.json +++ b/web/src/locale/en.json @@ -7,13 +7,18 @@ "hostname": "Hostname", "username": "Username", "cpuUsage": "CPU Usage", + "cpuLogicalCores": "Logical Processors", + "cpuPhysicalCores": "Physical Processors", "ramUsage": "RAM Usage", "diskUsage": "Disk Usage", + "free": "Free", + "used": "Used", + "total": "Total", "ram": "RAM", "os": "OS", "arch": "Arch", "uptime": "Uptime", - "netStat": "Network IO", + "netStat": "Traffic", "operations": "Operations", "hours": "h", "minutes": "m", @@ -73,5 +78,7 @@ "screenshotObtainFailed": "Failed to obtain screenshot", "invalidFileRange": "Invalid file range", "operationNotSupported": "Operation is not supported", - "noDisplayFound": "No display found" + "noDisplayFound": "No display found", + + "colon": ": " } \ No newline at end of file diff --git a/web/src/locale/zh-CN.json b/web/src/locale/zh-CN.json index aeb1fe8..b7c7513 100644 --- a/web/src/locale/zh-CN.json +++ b/web/src/locale/zh-CN.json @@ -7,8 +7,13 @@ "hostname": "主机名", "username": "用户名", "cpuUsage": "CPU使用率", + "cpuLogicalCores": "逻辑核心数量", + "cpuPhysicalCores": "物理核心数量", "ramUsage": "内存使用率", "diskUsage": "磁盘使用率", + "free": "剩余", + "used": "已用", + "total": "总大小", "ram": "RAM", "os": "操作系统", "arch": "架构", @@ -81,5 +86,7 @@ "screenshotObtainFailed": "截屏读取失败", "invalidFileRange": "文件范围错误", "operationNotSupported": "不支持该操作", - "noDisplayFound": "设备未连接显示器" + "noDisplayFound": "设备未连接显示器", + + "colon": "：" } \ No newline at end of file diff --git a/web/src/pages/overview.js b/web/src/pages/overview.js index 313ca2f..8224853 100644 --- a/web/src/pages/overview.js +++ b/web/src/pages/overview.js @@ -1,6 +1,6 @@ import React, {useEffect, useRef, useState} from 'react'; import ProTable, {TableDropdown} from '@ant-design/pro-table'; -import {Button, Image, message, Modal, Progress} from 'antd'; +import {Button, Image, message, Modal, Progress, Tooltip} from 'antd'; import {formatSize, request, translate, tsToTime, waitTime} from "../utils/utils"; import Terminal from "../components/terminal"; import Processes from "../components/processes"; @@ -14,6 +14,28 @@ import defaultColumnsState from "../config/columnsState.json"; // DO NOT EDIT OR DELETE THIS COPYRIGHT MESSAGE. console.log("%c By XZB %c https://github.com/XZB-1248/Spark", 'font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:64px;color:#00bbee;-webkit-text-fill-color:#00bbee;-webkit-text-stroke:1px#00bbee;', 'font-size:12px;'); +function UsageBar(props) { + let {usage} = props; + usage = usage || 0; + usage = Math.round(usage * 100) / 100; + + return ( + + + + ); +} + function overview(props) { const [procMgr, setProcMgr] = useState(false); const [explorer, setExplorer] = useState(false); @@ -52,7 +74,7 @@ function overview(props) { title: i18n.t('cpuUsage'), dataIndex: 'cpu_usage', ellipsis: true, - render: (_, v) => , + render: (_, v) => , width: 100 }, { @@ -60,7 +82,7 @@ function overview(props) { title: i18n.t('ramUsage'), dataIndex: 'ram_usage', ellipsis: true, - render: (_, v) => , + render: (_, v) => , width: 100 }, { @@ -68,7 +90,7 @@ function overview(props) { title: i18n.t('diskUsage'), dataIndex: 'disk_usage', ellipsis: true, - render: (_, v) => , + render: (_, v) => , width: 100 }, { @@ -176,6 +198,60 @@ function overview(props) { localStorage.setItem(`columnsState`, JSON.stringify(stateMap)); } + function renderCPUStat(cpu) { + let { model, usage, cores } = cpu; + usage = Math.round(usage * 100) / 100; + cores = { + physical: Math.max(cores.physical, 1), + logical: Math.max(cores.logical, 1), + } + return ( +
+
+ {model} +
+ {i18n.t('cpuUsage') + i18n.t('colon') + usage + '%'} +
+ {i18n.t('cpuLogicalCores') + i18n.t('colon') + cores.logical} +
+ {i18n.t('cpuPhysicalCores') + i18n.t('colon') + cores.physical} +
+ ); + } + function renderRAMStat(info) { + let { usage, total, used } = info; + usage = Math.round(usage * 100) / 100; + return ( +
+ {i18n.t('ramUsage') + i18n.t('colon') + usage + '%'} +
+ {i18n.t('free') + i18n.t('colon') + formatSize(total - used)} +
+ {i18n.t('used') + i18n.t('colon') + formatSize(used)} +
+ {i18n.t('total') + i18n.t('colon') + formatSize(total)} +
+ ); + } + function renderDiskStat(info) { + let { usage, total, used } = info; + usage = Math.round(usage * 100) / 100; + return ( +
+ {i18n.t('diskUsage') + i18n.t('colon') + usage + '%'} +
+ {i18n.t('free') + i18n.t('colon') + formatSize(total - used)} +
+ {i18n.t('used') + i18n.t('colon') + formatSize(used)} +
+ {i18n.t('total') + i18n.t('colon') + formatSize(total)} +
+ ); + } function renderNetworkIO(device) { // Make unit starts with Kbps. let sent = device.net_sent * 8 / 1024; @@ -191,7 +267,6 @@ function overview(props) { return (size / Math.pow(k, i)).toFixed(1) + ' ' + units[i]; } } - function renderOperation(device) { let menus = [ {key: 'screenshot', name: i18n.t('screenshot')}, @@ -280,7 +355,6 @@ function overview(props) { for (const key in result[i][k]) { result[i][k + '_' + key] = result[i][k][key]; } - delete result[i][k]; } } } diff --git a/web/src/utils/utils.js b/web/src/utils/utils.js index 8b61a95..e1ae24f 100644 --- a/web/src/utils/utils.js +++ b/web/src/utils/utils.js @@ -24,7 +24,7 @@ function waitTime(time) { }; function formatSize(size) { - if (size === 0) return 'Unknown'; + if (size === 0) return '0 B'; let k = 1024, i = Math.floor(Math.log(size) / Math.log(k)), units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];