使用button-card写一些服务器状态监控页面，配合nodered

gasment · 发表于 2024-12-11 10:52:43

在ha中写了些卡片页面来展示各个服务器设备的运行状态，分享一下纯纯button-card叠叠乐，绝大部分数值实体由nodered提供，在nodered提前处理并格式化

没有美工基础，图标都是现成的svg缝合，主题颜色为配合tapbar选了蓝紫色系
没有限制卡片宽度，可以根据设备视图宽度自动拉伸，在PC和平板上有相似的显示效果，但是注意最小宽度，大约在370px左右（针对自己的手机宽度做了限制）
全部页面代码1w多行，非常多自定义的实体，不好复刻，贴几个有代表性的卡片吧
button-card和nodered怎么玩，坛内有相关教程

首先是设备名卡片

实体由UPnP/IGD集成提供，如果同一局域网内存在openwrt设备，该集成会提示发现并是否添加设备
微信截图_20241211093811.png

需要的实体：
binary_sensor.openwrt_router_wan_status
sensor.openwrt_router_uptime
图标资源：

openwrt.svg (9.09 KB, 下载次数: 24)
自定义图标的制作，可以在图标库 - Yesicon搜索下载需要的svg图标资源，使用ps等软件编辑，最后导出回svg即可
配色代码可以在在线颜色选择器 - 码工具选择，英文名称和rgb值均可
示例代码：

op_head.yaml (6.45 KB, 下载次数: 31)
右边有一个重启的弹窗需要用到browser-mod，发送重启的实现方式很多种，我这里是ssh途径，使用nodered的bigssh节点+ha_entity_button触发
微信截图_20241211095513.png

CPU/GPU占用卡片
微信截图_20241211095920.png

进度条根据占用%动态变化，分3个阈值变化颜色
需要的实体：
cpu或gpu的使用率实体（怎么获取这里就不示例了，为了达到高刷新率，我的方法过于复杂，不便细说）
示例代码：

cpu_gpu.yaml (5.28 KB, 下载次数: 43)
举一反三，内存、显存、闪存等需要用到进度条的卡片都可以使用
进度条依赖百分比，只有具体数值的话需要在对应的js代码段做下换算
微信截图_20241211100653.png

以上是进度条样式，下面是信息块
微信截图_20241211101114.png

需要的实体：
网口信息
上传、下载速率
示例代码：

net.yaml (5.56 KB, 下载次数: 24)

进度条与信息块组合的样式，以及子视图（详细）跳转
微信截图_20241211101535.png

代码示例：

disk.yaml (10.47 KB, 下载次数: 21)

docker容器状态卡片示例
微信截图_20241211101932.png

这里需要的实体状态，我在nodered中使用docker相关节点获取，二次处理流程过于复杂，不便细说
请各位自显神通了
微信截图_20241211102211.png

管理弹窗需要browser-mod,容器操作使用select实体，由nodered+ha_entity_select+bigssh节点实现
微信截图_20241211102327.png

储存池卡片，这里主要针对群晖编写
微信截图_20241211102924.png

大图标会根据储存池状态变化，分别对应健康、警告、降级、损毁
微信截图_20241211103126.png

需要的实体大部分可在Synology DSM集成中添加获取
代码示例：（这里整体卡片代码过多，只展示其中一个存储池的，其他池按需复制即可）

pool.yaml (7.4 KB, 下载次数: 21)

磁盘卡片
微信截图_20241211103623.png

大图标也会根据磁盘健康状态变化，样式类似上面存储池的标识
实体使用脚本+nodered_http节点+ha_entity_sensor节点提供
实体获取与自定义过程复杂，复刻难度大，有兴趣的朋友可以探讨下
微信截图_20241211104219.png

示例代码：（提供了一组示例）

disk2.yaml (7.6 KB, 下载次数: 13)

最后提一下这个clash页面嵌套的问题，clash与ha页面的http(s)需要一致，
如果你的ha配置了https，那么clash页面也需要配置https,方可以进行嵌套，反之亦然
比如我这里使用的是yacd，需要同时反向代理yacd的web地址，以及clash api 的地址，而且需要把secret带入到嵌套的url来实现免密登录
代码示例：
         type: iframe
         url: >-
            https://yacd-web.xxxx.com:9999/? ... xxx&theme=light
         aspect_ratio: 180%

flashcj · 发表于 2024-12-11 17:35:00

太牛了。天花板更高了

sorrypqa · 发表于 2024-12-11 19:50:40

一万多行代码？我的天呀！想想都可怕.......

jole · 发表于 2024-12-11 19:55:05

不错，大佬逐条说明，很用心

luoyulong · 发表于 2024-12-12 19:48:31

这个很棒！收藏了

solekg · 发表于 2024-12-23 18:02:37

东西很好，实现难度太大

kloar · 发表于 2024-12-27 01:18:52

感谢大佬分享,厉害了

taioner · 发表于 2024-12-27 01:34:34

感谢大佬

lxgxdx · 发表于 2024-12-27 08:29:52

感谢分享

guoqiang881245 · 发表于 2025-2-15 20:34:25

就这个好我来操作业了哈哈给大佬一个赞

		自动登录	找回密码
密码			立即注册

[UI界面] 使用button-card写一些服务器状态监控页面，配合nodered

评分

浏览过的版块