基于华为云CodeArts构建实时系统资源监控看板
基于华为云CodeArts构建实时系统资源监控看板
一、项目背景
在云原生开发和运维场景中，实时掌握服务器资源使用状况是保障业务稳定运行的基础。传统的监控方案往往依赖重量级的监控系统（如Prometheus+Grafana），部署成本高、学习曲线陡峭。对于开发者个人环境或轻量级运维场景，一个开箱即用、零配置启动的系统资源看板显得尤为实用。
本文介绍如何利用华为云CodeArts代码智能体，从需求描述到代码生成、项目部署、作品发布，全流程构建一个实时系统资源监控看板。该看板支持CPU使用率与温度监控、GPU状态显示、内存/磁盘/网络实时图表，以及进程Top5排行，采用暗色科技风格设计，数据每2秒自动刷新。
二、功能设计
看板包含以下七大功能模块：
1. 系统信息卡片
顶部信息栏展示主机名、操作系统类型与发行版（如openEuler 22.03 LTS）、内核版本、系统运行时长、CPU型号和核心数等基础信息，让运维人员一目了然地了解服务器基本情况。
2. CPU监控
实时CPU使用率折线图采用Chart.js渲染，保留最近30个数据点，曲线平滑过渡。同时读取Linux系统下/sys/class/thermal/thermal_zone*路径获取CPU温度数据，并展示系统负载均值（1分钟/5分钟/15分钟），帮助判断系统繁忙程度。
3. GPU监控
通过执行nvidia-smi命令采集GPU信息，包括GPU型号、使用率、显存已用/总量、GPU温度。使用进度条配合数字双重展示，直观反映GPU负载状况。在无GPU环境下自动显示"未检测到GPU"，避免误导。
4. 内存监控
展示内存总量、已用、可用（以GB为单位），使用Chart.js环形图（doughnut）可视化使用率，并附带Swap分区信息，全面反映内存使用状况。
5. 磁盘监控
遍历系统各挂载分区，以进度条形式展示每个分区的总量、已用、可用空间和使用率。同时通过读取/proc/diskstats计算2秒差值，实时展示磁盘读写速率。
6. 网络I/O
从/proc/net/dev读取网络接口数据，计算2秒差值得到上行和下行速率，以实时曲线展示最近30个数据点。速率数值自动格式化为KB/s或MB/s，方便阅读。
7. 进程Top5
通过读取/proc/*/stat和/proc/*/status采集各进程的CPU和内存占用，按CPU使用率排序展示前5个进程，显示PID、进程名、CPU占用百分比和内存占用百分比。
三、技术架构
本项目采用前后端分离的轻量级架构：
| 层级 | 技术 | 说明 |
|---|---|---|
| 前端展示层 | HTML + CSS + JavaScript + Chart.js | 原生三件套，CDN引入图表库，无框架依赖 |
| 后端服务层 | Node.js + Express + ws | 内置os模块采集数据，WebSocket实时推送 |
| 通信机制 | WebSocket + REST API | 每2秒推送全量数据，首次加载走REST |
| 数据采集层 | os模块 + /proc + nvidia-smi | 直接读取系统接口，零外部依赖 |
数据流：前端建立WebSocket连接 → 后端每2秒采集系统数据 → JSON推送至前端 → 更新所有图表和数值
四、界面设计
看板采用暗色科技风格，适合长时间盯屏的运维场景：
- 配色：背景
#0f172a，卡片#1e293b，CPU蓝#3b82f6，GPU粉#ec4899，内存绿#10b981，磁盘橙#f59e0b，网络紫#8b5cf6 - 布局：卡片式，圆角12px，CSS Grid响应式（桌面3列/平板2列/手机1列）
- 动效：数字滚动动画 + 图表平滑过渡
五、开发流程
本项目通过华为云CodeArts代码智能体完成全部开发工作：
- 需求描述：向CodeArts描述功能模块、技术栈、界面风格，自动生成任务计划
- 代码生成：依次创建package.json、server.js（310行）、index.html（103行）、style.css（242行）、app.js，共约1000行代码
- 依赖安装与启动：自动npm install，检测端口，启动服务，验证API
- GitCode仓库：OAuth授权，创建仓库，推送代码
- 作品发布：生成封面截图、架构图、详情文章，发布到华为云作品展览馆
六、关键代码解析
CPU使用率：两次os.cpusinfo()差值计算各核心使用率
CPU温度：遍历/sys/class/thermal/thermal_zone*，读取temp文件除以1000转摄氏度
GPU数据：nvidia-smi --query-gpu=name,utilization.gpu,memory.used,memory.total,temperature.gpu --format=csv,noheader,nounits
网络速率：/proc/net/dev两次读取差值除以时间间隔
WebSocket推送：每2秒采集全量数据，JSON序列化广播给所有客户端
七、部署与使用
git clone https://gitcode.com/sdf2342/sys-dashboard.git
cd sys-dashboard
npm install
npm start
八、总结
本项目展示了如何利用华为云CodeArts代码智能体，从自然语言需求描述到完整可运行项目的全流程开发能力。整个开发过程无需手动编写一行代码，CodeArts根据需求自动生成、安装依赖、启动验证，大幅提升了开发效率。
系统资源看板涵盖了系统监控的核心场景：CPU（含温度）、GPU、内存、磁盘、网络、进程，技术栈简洁，零配置启动，适合个人开发者和小团队快速部署使用。暗色科技风格的界面设计也使得长时间监控不会造成视觉疲劳。
- 点赞
- 收藏
- 关注作者
评论（0）