232
134
在电脑桌面实现对NAS与路由器的负载监控（基于Netdata和Wall
2020-09-18 19:55:04
93点赞
573收藏
51评论
前言
折腾目的：利用电脑桌面的空闲空间，监控路由器与NAS的实时工作状态。
需要软件：
Netdata：一款针对Linux系统的性能监控软件，具有参数获取全面、数据刷新率高、显示延迟低、图表美观等优点。
Wallpaper Engine：一款功能强大的动态桌面实现软件。
实现思路：首先通过Netdata获取路由器与NAS的负载信息，再利用Wallpaper Engine将信息嵌入桌面背景，实现如下效果：
具体操作流程如下：
1. 安装Netdata
NAS
群晖/QNAP：需要先安装Docker，再安装Netdata
1. 在“套件（应用）中心”中查找Docker并安装
2. 在Docker中查找Netdata并安装
3. 设置本地端口：19999，点击启动
路由器
Merlin（梅林）：需要先安装Entware-NG，再安装Netdata
Openwrt/LEDE：通过软件库直接安装
Netdata被Openwrt/LEDE的官方软件源收录，只需在SSH中执行以下命令即可
opkg update
opkg install netdata
安装完成后，访问http://主机IP:19999，即可进入Netdata的web主界面：
滚动页面可以获取系统CPU、RAM、磁盘、网络等各项性能数据，右侧边栏可以帮助快速定位需要的数据。
资料显示，Netdata能够监控的指标包括（但不限于）：
1.CPU的使用率，中断，软中断和频率(总量和每个单核)
2.RAM，互换和内核内存的使用率（包括KSM和内核内存deduper）
3.硬盘输入/输出(每个硬盘的带宽，操作，整理，利用等)
4.IPv4网络（数据包，错误，分片）：
TCP：连接，数据包，错误，握手
UDP:数据包，错误
广播：带宽，数据包
组播：带宽，数据包
5.Netfilter/iptables Linux防火墙(连接，连接跟踪事件，错误等)
6.进程(运行，受阻，分叉，活动等)
7.NFS文件服务器
8.网络服务质量
9.应用程序，通过对进程树进行分组（CPU，内存，硬盘读取，硬盘写入，交换，线程，管道，套接字等）
10.Apache Web服务器状态(v2.2， v2.4)
11.Mysql数据库（多台服务器，单个显示：带宽，查询/s， 处理者，锁，问题，临时操作，连接，二进制日志，线程，innodb引擎等）
2. 自定义Dashboard界面
开启NAS/路由器的SSH功能，通过Winscp访问Netdata的web文件存放位置：
/usr/share/netdata/web
找到以下几个html文件：
dashboard.html # Dashboard的配置文档
index.html # Netdata的web主界面
tv.html # Netdata的TV监控模板
浏览器访问Dashboard配置文档：
该文档列出了一个空白配置模板，以及各种图表的样式与配置说明
图表功能说明
Netdata提供的监控图表模板主要包括：
饼图（EasyPieChart）/速度表（Gauge）：特点是聚焦当前数据，可显示CPU、RAM、磁盘、网络端口等的实时负载情况（一个图表只显示一个参数）
动态线图（Sparkline/Dygraph）：特点是带时间轴，可记录负载随时间的变化情况，拖动时间轴可回溯历史数据（Dygraph一个图表可以显示多个参数）
图表参数配置
基本参数（重要）
data-netdata="net.br-lan" // 数据标签
data-dimensions="received" // 数据参数
data-title="LAN" // 图表标题
data-chart-library="gauge" // 图表类型：EasyPieChart/Gauge/Sparkline/Dygraph/...
data-width="25%" // 图表宽度
data-height="100%" // 图表高度
其他参数
data-decimal-digits="0" // 小数位数
data-dygraph-valuerange="[0, 100]" // 数值显示范围
data-common-max="netdata-requests" // 数值上限
data-common-max="netdata-requests" // 数值下限
data-after="-300" // 动态线图的时间轴长度（默认值：300秒）
data-points="300" // 与时间轴匹配的数据个数（默认值：300秒）
如需监控其他主机的性能数据，需要加上data-host参数（可实现路由器与NAS的同步监控）
data-host="https://Host_IP" // 目标主机的URL
配置图表参数时，需要通过“数据标签”和“数据参数”定位图表的数据源：
查找方式：在web主界面中找到相应图表（如下图所示），表头括号里的内容（system.ram）即是“数据标签”，右侧的free/used/cached/buffers即是4个“数据参数”
了解了图表的功能和参数配置，便可以根据dashboard.html中提供的html空白模板进行页面配置，根据需求选择添加图表。
如果你和我一样是新手，这里更推荐在“TV监控模板”的基础上进行修改
浏览器访问TV监控模板：
TV监控面板相比web主界面清爽很多，且在html中保留了常用的js脚本控制命令
按F12进行元素检查，发现图表元素被嵌套在一个3级div标签下
这3级div标签的作用分别是：
1级<div>标签：控制整个dashboard窗口的尺寸与位置
2级<div>标签：控制每一行图表窗口的尺寸与位置
3级<div>标签：控制单个图表的尺寸与位置
我们可以参考其排版方式来制定自己的Dashboard界面
备份tv.html于同一目录，重命名为wallpaper.html
编辑该文件，删除整个<body>标签，替换为：
<body>
// 1级div头部
<div style="width: 100%; text-align: center; display: inline-block;">
// 2级div头部
<div style="width: 100%; height: 20vh; text-align: center; display: inline-block;">
<div 图表参数 ></div>
></div>
// 2级div尾部
></div>
// 1级div尾部
</body>
图表参数示例：
<div data-netdata="system.cpu"
data-title="CPU usage"
data-chart-library="dygraph"
data-width="95%"
data-height="100%"
data-after="-300"
data-dygraph-valuerange="[0, 100]"
></div>
如需添加图表到下一行，则复制粘贴整个2级div标签：
// 2级div头部
<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
<div 图表参数1 ></div>
></div>
// 2级div尾部
// 2级div头部
<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
<div 图表参数2 ></div>
></div>
// 2级div尾部
如需添加图表到本行做并列显示，则复制粘贴“图表参数”行的div标签，并调整该行图表的显示宽度（data-width）之和不超过100%：
<div 图表参数1 ></div>
<div 图表参数2 ></div>
访问wallpaper.html的网络链接即可查看Dashboard界面
Tips: 配置Dashboard界面时，需要考虑其在桌面的显示面积，从而规划适合数量的图表。这里推荐将浏览器窗口缩放至Dashboard的最终显示区域进行调试。
3. 将Dashboard设为桌面背景
1. 使用Wallpaper Engine将Dashboard设置为电脑桌面
在Wallpaper Engine中选择“从URL打开壁纸”，在地址框中输入wallpaper.html的网络链接，点击确认即可将Dashboard设置为桌面背景。
2. 调整Dashboard的大小与显示位置
将wallpaper.html设置为桌面后，Dashboard会铺满整个桌面，图表会被桌面图表遮挡。
此时需要调整Dashboard的窗口位置，让其显示在桌面右侧的空白处。
编辑wallpaper.html，定位到1级div标签
修改其宽度与对其方式：
width: 100%; text-align: center;
替换为："width: 50%; float:right; //表示窗口横向显示占比=50%；右对齐；
理论上，Dashboard可以被放置在桌面任意位置
3. 设置背景图片
选择一张与屏幕分辨率一致的图片作为壁纸(wallpaper.jpg)，放置在以下目录：
/usr/share/netdata/web/images
编辑wallpaper.html，在head标签下增加一行代码：
<body style="background-image: url(图片链接);">
示例：<body style="background-image: url(./images/wallpaper.jpg);">
便实现了将Dashboard嵌入桌面背景
桌面1
桌面2
4. Dashboard显示效果优化
将Dashboard嵌入桌面背景后，会发现显示效果并不理想。
主要问题包括：当指针移动到图表区域外，或是其他窗口被激活时，数据便会停止刷新；图表中某些元素存在背景色块；图表与背景图片契合度低等。
针对以上问题的解决方案：
开启数据强制刷新（避免Dashboard在失去焦点后停止刷新）
位置：/usr/share/netdata/web
文件：wallpaper.html
参数：NETDATA.options.current.stop_updates_when_focus_is_lost
默认值： true
修改值： false
关闭图表数据同步（避免指针移动对数据显示造成干扰）
位置：/usr/share/netdata/web
文件：dashboard.js
参数：sync_selection
默认值： true
修改值： false
切换白色主题（适用于浅色背景图片）
位置：/usr/share/netdata/web
文件：wallpaper.html
参数：var netdataTheme
默认值： slate
修改值： default
消除图表中部分元素的背景色块
位置：/usr/share/netdata/web
文件：
dashboard.slate.css // 暗色主题
dashboard.css // 白色主题
参数：
.netdata-legend-toolbox
.netdata-legend-toolbox-button
.netdata-legend-resize-handler
.netdata-legend-value
默认值： background-color: #272b30;
修改值： background-color: transparent;
壁纸（背景图片）的选择
Netdata的图表具有一定透明度，在复杂的背景下的显示效果欠佳。
采用画面简单、对比度低的背景图片可以获得更好的显示效果，这里推荐两个极简壁纸网站：
当然也可以通过修改图表的线型与透明度来缓解这一问题。
使用感受
优点：可以更加便捷地监控路由器与NAS的系统负载状态（CPU、内存、硬盘、网络等），特别适合桌面空间大的带鱼屏用户；Netdata监控响应速度快，精度高，图表颜值高，资源占用少。
缺点：配置比较繁琐；与部分桌面背景图片的契合度低。
值友4219702890
校验提示文案
Ahiok
校验提示文案
abcam
校验提示文案
Joynaruto
校验提示文案
Joynaruto
校验提示文案
夕阳308
校验提示文案
有次元袋的tiger
校验提示文案
sniper_sh
在你写的：
“如需监控其他主机的性能数据，需要加上data-host参数（可实现路由器与NAS的同步监控） data-host="https://Host_IP" // 目标主机的URL”
这一段内容中，我应该在哪个文件里进行编辑，在什么位置编辑并添加这段参数，主要是想实现路由与NAS同时监控。恳请不吝赐教！谢谢
我的邮件地址sniper_sh@163.com
校验提示文案
JethroShen
校验提示文案
值友6798005271
校验提示文案
lambzi
校验提示文案
大法今天倒闭了嘛
校验提示文案
赐予我Money
校验提示文案
值友9918046395
校验提示文案
jhonbulls
校验提示文案
kungfuzyb
校验提示文案
DDI_
校验提示文案
iceing2017
校验提示文案
老男孩折腾记
校验提示文案
NuistSecurity
校验提示文案
值友6798005271
校验提示文案
JethroShen
校验提示文案
冯老虎猫
校验提示文案
sniper_sh
在你写的：
“如需监控其他主机的性能数据，需要加上data-host参数（可实现路由器与NAS的同步监控） data-host="https://Host_IP" // 目标主机的URL”
这一段内容中，我应该在哪个文件里进行编辑，在什么位置编辑并添加这段参数，主要是想实现路由与NAS同时监控。恳请不吝赐教！谢谢
我的邮件地址sniper_sh@163.com
校验提示文案
Yes观察员
校验提示文案
有次元袋的tiger
校验提示文案
[已注销]
校验提示文案
夕阳308
校验提示文案
值友9918046395
校验提示文案
Hoper007
校验提示文案
ljzkirito
校验提示文案
筆歌墨舞丶
校验提示文案
今晚打UFO
校验提示文案
Jaqen-Hghar
校验提示文案
孙权斌
看腻了只需要俩小时
校验提示文案
Joynaruto
校验提示文案
Joynaruto
校验提示文案
Joynaruto
校验提示文案
abcam
校验提示文案
BitBoxKing
校验提示文案