add: detail info tooltip of cpu, ram and disk

API.ZH.md

@@ -76,9 +76,13 @@ Authorization: Basic <base64('username:password')>
             },
             "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

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

CHANGELOG.md

@@ -1,3 +1,11 @@
+## v0.0.7
+
+* Add: detail info tooltip of cpu, ram and disk.
+
+* 新增：CPU、内存、磁盘的详细信息的提示。
+
+
+
 ## v0.0.6
 
 * Update: i18n.

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     | ✔       | ✔     | ✔     |

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,

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 {

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',

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

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

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 (
+        <Tooltip
+            title={props.title??`${usage}%`}
+            overlayInnerStyle={{
+                whiteSpace: 'nowrap',
+                wordBreak: 'keep-all',
+                maxWidth: '300px',
+            }}
+            overlayStyle={{
+                maxWidth: '300px',
+            }}
+        >
+            <Progress percent={usage} showInfo={false} strokeWidth={12} trailColor='#FFECFF'/>
+        </Tooltip>
+    );
+}
+
 function overview(props) {
     const [procMgr, setProcMgr] = useState(false);
     const [explorer, setExplorer] = useState(false);
@@ -52,23 +74,23 @@ function overview(props) {
             title: i18n.t('cpuUsage'),
             dataIndex: 'cpu_usage',
             ellipsis: true,
-            render: (_, v) => <Progress percent={v.cpu_usage} showInfo={false} strokeWidth={12} trailColor='#FFECFF'/>,
+            render: (_, v) => <UsageBar title={renderCPUStat(v.cpu)} {...v.cpu} />,
             width: 100
         },
         {
             key: 'ram_usage',
             title: i18n.t('ramUsage'),
             dataIndex: 'ram_usage',
             ellipsis: true,
-            render: (_, v) => <Progress percent={v.ram_usage} showInfo={false} strokeWidth={12} trailColor='#FFECFF'/>,
+            render: (_, v) => <UsageBar title={renderRAMStat(v.ram)} {...v.ram} />,
             width: 100
         },
         {
             key: 'disk_usage',
             title: i18n.t('diskUsage'),
             dataIndex: 'disk_usage',
             ellipsis: true,
-            render: (_, v) => <Progress percent={v.disk_usage} showInfo={false} strokeWidth={12} trailColor='#FFECFF'/>,
+            render: (_, v) => <UsageBar title={renderDiskStat(v.disk)} {...v.disk} />,
             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 (
+            <div>
+                <div
+                    style={{
+                        fontSize: '10px',
+                    }}
+                >
+                    {model}
+                </div>
+                {i18n.t('cpuUsage') + i18n.t('colon') + usage + '%'}
+                <br />
+                {i18n.t('cpuLogicalCores') + i18n.t('colon') + cores.logical}
+                <br />
+                {i18n.t('cpuPhysicalCores') + i18n.t('colon') + cores.physical}
+            </div>
+        );
+    }
+    function renderRAMStat(info) {
+        let { usage, total, used } = info;
+        usage = Math.round(usage * 100) / 100;
+        return (
+            <div>
+                {i18n.t('ramUsage') + i18n.t('colon') + usage + '%'}
+                <br />
+                {i18n.t('free') + i18n.t('colon') + formatSize(total - used)}
+                <br />
+                {i18n.t('used') + i18n.t('colon') + formatSize(used)}
+                <br />
+                {i18n.t('total') + i18n.t('colon') + formatSize(total)}
+            </div>
+        );
+    }
+    function renderDiskStat(info) {
+        let { usage, total, used } = info;
+        usage = Math.round(usage * 100) / 100;
+        return (
+            <div>
+                {i18n.t('diskUsage') + i18n.t('colon') + usage + '%'}
+                <br />
+                {i18n.t('free') + i18n.t('colon') + formatSize(total - used)}
+                <br />
+                {i18n.t('used') + i18n.t('colon') + formatSize(used)}
+                <br />
+                {i18n.t('total') + i18n.t('colon') + formatSize(total)}
+            </div>
+        );
+    }
     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];
                     }
                 }
             }