请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 7045|回复: 58

[进阶教程] 【grafana】绝美图表~装B神器!

  [复制链接]

18

主题

555

帖子

3976

积分

元老级技术达人

积分
3976
金钱
3386
HASS币
182
发表于 2022-12-12 20:10:23 | 显示全部楼层 |阅读模式
装B是智能家居第一生产力

不知道大家因为什么入坑的智能家居,反正我就是想简单搞个灯光控制,结果小玩意越买越多,光小米设备就100多件后来慢慢从小米全家桶过渡到home assistant,然后就来抄论坛大佬作业。现在作为一个智能家居练习时长长达三年半的个人玩家,实用的东西搞差不多了,就剩下装B需求啦!


我个人感觉,现在阻碍装B的最大障碍就是HA前端页面,尽管这些年HA前端页面一直在不断优化,然而在数据可视化特别是做图表方面,要么是很难搞,要么就是太难看。没办法,home-assistant毕竟是智能家居应用而非数据可视化应用,图表难搞也很好理解。然而耽误装B,我不能忍!所以,为了治好装B综合症,我只能向专业数据可视化应用grafana下手啦~


有的朋友可能没接触过电子厂IT运维工作,对Grafana并不熟悉。这是一款数据可视化应用,通常被用作IT应用服务监控可视化,大概是长这样的:


play-grafana-org-2.png



这不比HA自带的图表功能高端霸气上档次,简直是简直了~


心动不如行动~我首先在论坛上找到了大佬们的grafana教程,然而时间久远,基本都是18年前后,而且居然用的是influxDB做中间件,不做额外设置的话不会数据冗余嘛?


这里还得跟不了解grafana的朋友解释下,grafana只是一个画图应用,需要把数据源接入。然而HA默认使用sqlite作为数据库,这不是grafana支持的数据源,所以需要做个转化(类似你买了港行的PS5,需要买个转接头才能插电使用)。


我翻了论坛所有关于grafana的帖子,基本上都是用influxDB作为中间件(转化器)。我个人认为哈,influxDB本身是不错的时间序列数据库,做一些event、log存储非常好用,但并非home-assistant数据接入grafana的最优解。原因如下:


1. 上边提到了数据冗余问题,influxDB会把home-assistant数据接入后再存储一份,如果你不设置保留策略,磁盘占用空间会越来越大。
2. home-assistant数据更偏向于metric而非event、log
3. influxDB需要一定的SQL基础,完全不懂的朋友使用起来学习成本偏高


那有没有方便配置、易于使用、稳定可靠的方案呢?

微信截图_20221212172234.png

楼主首推Prometheus(普罗米修斯) + Grafana,理由也是三点:

1. Prometheus内置的时间序列数据库默认是滚动15天保存的,不用担心数据存满
2. 针对metric进行处理,更适配home-assistant
3. prometheus独有的Prom SQL,对于SQL完全不懂的人,学习成本更低(个人观点)


当然了Prometheus还有很多其他优点,比如说pull/push两种方法均可采集数据,灵活性高;比如说作为云原生项目,利用各类exporter,监控容器、服务方便易用。后续我会出些教程,分享如何轻松将openwrt、esxi、nas、云服务器甚至是docker等监控信息轻松接入。本篇主要分享在当前时间(2022年底),如何安装配置grafana,并将其接入HA。


废话时间结束,下一楼我们转入正题~


评分

参与人数 10金钱 +98 HASS币 +20 收起 理由
KevinYAN + 5 高手,这是高手!
carrot8848 + 5 论坛有你更精彩!
KNX-xdd50 + 5 膜拜大神!
forever2021 + 5 感谢楼主分享!
unixcs + 4 高手,这是高手!
Ari + 2 大哥,喝冰阔落
+ 20 + 20 高手,这是高手!
dscao + 20 论坛有你更精彩!
jjcs + 12 在下对你的景仰犹如滔滔长江之水,连绵不绝.
neroxps + 20 我来瀚思就为看你!

查看全部评分

回复

使用道具 举报

18

主题

555

帖子

3976

积分

元老级技术达人

积分
3976
金钱
3386
HASS币
182
 楼主| 发表于 2022-12-12 20:11:29 | 显示全部楼层
本帖最后由 louis_lee 于 2022-12-14 21:58 编辑

Grafana安装配置教程(基于HAOS, Supervised)

一、Prometheus安装配置

把prometheus放入HA只需要三步,轻松写意~

step1

首先我们需要在HA配置文件configuration.yaml中添加如下一行,当然更多配置参数可在HA官网找到。

prometheus: 

step2

浏览器打开home-assistant前端界面,依次点选配置-》加载项-》加载项商店,然后点击右上角的三个冒号-》仓库(Repo)。在弹出的页面中填入以下链接后点击添加

https://github.com/louisslee/addon-prometheus/

微信截图_20221212225430.png

注:这本来是一个社区的edge repo项目,但直接从edge repo安装会出问题。尽管我看已经有人提pr了,但得不到maintainer的及时响应。所以我fork了一个照着改了改。

step3

重启home-assistant,然后回到加载项商店,你就可以找到Prometheus了,点击安装。等待不到一分钟,就可以安装完毕了,别忘点击启动~

至此,Promethues安装配置好了~

二、grafana配置与使用

grafana安装

grafana安装非常的简单,直接在加载项商店直接可以找到,点击安装即可。不用在加载项配置,直接启动。(请使用HA 自带的grafana,否则后续过程可能出错)

Prometheus数据源配置

打开grafana web-ui,首先我们配置一下Prometheus数据源。点击左侧边栏的'>'按钮,在弹出的页面点击Data Source,然后再点击 Add data sources。
微信截图_20221212230816.png

我们选择prometheus数据源,并在URL中输入http://eee6de0d-prometheus:9090(或者可以先从Prometheus加载项中确定下主机名,看是不是eee6de0d-prometheus,不是的话替换一下),滑到最下边点击Save&Test。如无意外,可以看到成功提示。

微信截图_20221212231404.png

小试牛刀

配置好数据源后,我们就可以小试牛刀画个图。

首先我们先点击左侧边栏的'>'按钮,选择new dashboard, 然后再点击add a new panel,这样我们就到了作图页面了。

微信截图_20221212231723.png

整个啥好呢?我们先整个sensor电量柱状图吧,选取电量最低的5个设备作图,这样我们很方便的就掌握了需要充电设备的情况~

首先我们点击右侧的Time-series,并选择Bar gauge这个条形图。

微信截图_20221212231846.png

数据筛选

然后在左侧找到metric,输入homeassistant_sensor_battery_percent(你也可以输入homeassistant,然后在下拉菜单中找找),并点击run queries,这样初步的图形做好了。

我们调整下参数,点击"+Operations"选择Aggregation-》Bottomk,默认就是最低的五个啦。往下拉,点击option,legend选择custom,填入{{friendly_name}},然后在点击run queries看看结果。

微信截图_20221212190220.png

看起来有点雏形了,如果有哪几个设备你不想要,可以点击lable fitter,选择friendly_name,运算符号选择!~,在右侧下拉菜单中可以把不要的一个个排除掉。

微信截图_20221212190143.png

图像调整

然后我们调整下右侧的画图参数。

首先,不需要title的话(可以在HA中加入),置空即可。

Bar guage这栏可选喜欢的图像类型,我喜欢横向排列,选择horizontal,展示模式我偏好basic。

微信截图_20221212190403.png

Text Size可以放到HA后,觉得不合适再调整。

Standard options把min填上0,max填上100,使得条形图符合比例;color sheme可以自己选选,我使用的是from thresholds。

微信截图_20221212141754.png

由于我采用了from thresholds的color scheme,所以最后调下thresholds,base我偏好红色,没电了好提醒我,40置为黄色,70以上置为绿色。

最终效果图,感觉还不错呀。不要忘记点击save!那么我们怎么把他放到lovelace卡片里呢?

微信截图_20221212190521.png

三、grafana接入lovelace UI

安装cookies iframe card

官方自带的iframe card虽然可以用来展示grafana panel,不过如果你退出再进,可能会惊奇的发现变成了“401 unauthroized”。

这是为啥呢?这是因为作为加载项的grafana是利用ingress(类似于K8s中的ingress)做的反向代理,路径为/api/hassio_ingress/...。ingress转发前会验cookies(具体见supervisor github仓库),这个cookies,只有点击addon的打开webUI或侧边栏时才会获取。所以刚打开HA不会有cookies。

为了解决这个问题,我翻遍了官方社区,大部分都是些workaround,比如换个端口不走ingress。但我还是喜欢通过ingress访问grafana,从外面远程访问HA grafana图表方便而且更安全。然而grafana作为官方addon那么长时间了,这个需求居然一直挂在front-end github仓库discussion,居然没人做。好吧,那我来整吧。

安装方法也很简单,打开HACS,点击前端-》右上角三个点-》自定义存储库,填入以下链接,类型选择lovelace并点击添加。然后就出现了新的plugin,点击安装即可。

https://github.com/louisslee/cookies-iframe-card

微信截图_20221212225017.png

方法一:作为一张lovelace卡片接入

回到grafana界面,点击左侧边栏的'>'按钮,然后点击dashboard下边的browse,选择你刚才保存的dashboard界面。在点击图表最上方(标题位置),下拉菜单选择share。弹出的页面选择embed,去掉Current time range选项。

微信截图_20221212192517.png

这时你会得到一个iframe。我的是这样的:

<iframe src="http://ha/api/hassio_ingress/gMcIi0xmik7hlGTROGwHXTMyXRifg9kFb5oSztY6lUI/d-solo/nrNSHnc4z/new-dashboard?orgId=1&panelId=2" width="450" height="200" frameborder="0"></iframe>

由于我们就是放在HA前端页面,不需要跨域,咱们直接使用路径就行,不要带域名(方便远程访问)。所以需要把 /api....(一直到引号,不包含引号)复制下来,具体到我上边的案例就是/api/hassio_ingress/gMcIi0xmik7hlGTROGwHXTMyXRifg9kFb5oSztY6lUI/d-solo/nrNSHnc4z/new-dashboard?orgId=1&panelId=2

然后我们进入到HA 前端lovelace页面(概览),点击右上角编辑仪表盘,再点击右下角的添加卡片。滑到最后选择自定义:cookies iframe card(找不到话,关闭浏览器再新进入HA试试)再把刚才的复制的链接填上去。

微信截图_20221212234232.png

好啦,至此基本上整完了,如果你HA跟我一样都是dark theme,你会发现几乎跟homeassistant原生的卡片一模一样,嵌入效果非常好。

如果你是白色背景的lovelace页面,建议在刚才的链接后边加上“&theme=light”。改完后,天衣无缝,完美融入lovelace页面。

当然你可以调整下卡片的aspect_ratio,调整到合适比例,根据需要加上title,这样好看多了~

(我换了白色背景,发现与HA融合的也非常好~风格完全一致)

微信截图_20221212233113.png

方法二:作为单独页面接入

由于我主要用他接入服务监控,所以更希望作为单独页面接入lovelace。

首先,我们按照上边的方法回到grafana中建立的dashboard,直接点击最上方的分享图标,然后一样去掉lock time change,并复制url的path(同上边一样不包含域名、IP、port等)。

微信截图_20221212235219.png

再点击HA前端界面配置-》仪表盘,添加个新的。然后编辑新的仪表盘,选择从空白仪表盘开始。先把lovelace界面重新定义下,点击上边home的编辑按钮,视图类型选择面板(单张卡片),根据需要改名换图标。

微信截图_20221212235715.png

其他的就跟之前一样,建一个新的cookies-iframe-card,把url贴过来。根据需要看看添加“&theme=light”,另外我建议添加个“&kiosk”(或“kiosk=TV”,自已看着选)。添加后,是不是跟原生的一毛一样,毫无违和感~

微信截图_20221212235510.png
(与HA完美融合,B格简直max)

后记:后续有时间的话,我再把openwrt、NAS、各种服务器监控信息接入的方法分享出来。喜欢的朋友,Github上给个star啊~








微信截图_20221212190521.png

评分

参与人数 1金钱 +8 收起 理由
sorrypqa + 8 大神666!

查看全部评分

回复

使用道具 举报

36

主题

1204

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
3684
HASS币
0
发表于 2022-12-12 21:51:01 | 显示全部楼层
终于有新玩法和教程了,大佬一语中的influxDB,属实对我不友好,尤其是数据库的策略设置
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

36

主题

1204

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
3684
HASS币
0
发表于 2022-12-12 21:56:34 | 显示全部楼层
那么问题来了如何把influxDB的数据转到普罗米修斯里
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

36

主题

1204

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
3684
HASS币
0
发表于 2022-12-12 22:39:17 | 显示全部楼层
{我们选择prometheus数据源,并在URL中输入http://eee6de0d-prometheus:9090 ,滑到最下边点击Save&Test。如无意外,可以看到成功提示}
不知道为啥卡在这步了,我还以为docker端口冲突换了一个还是不行
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

36

主题

1204

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
3684
HASS币
0
发表于 2022-12-12 22:41:33 | 显示全部楼层
我配置了包含实体的选项。配置应该没问题把
QQ截图20221212224056.png
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

36

主题

1204

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
3684
HASS币
0
发表于 2022-12-12 22:43:24 | 显示全部楼层
加载项日志,系统hassos
QQ截图20221212224147.png
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

36

主题

1204

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
3684
HASS币
0
发表于 2022-12-12 22:45:48 | 显示全部楼层
难道需要先配置令牌,让普罗米修斯访问ha的数据库?
QQ截图20221212224512.png
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

36

主题

1204

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
3684
HASS币
0
发表于 2022-12-12 22:51:34 | 显示全部楼层
jjcs 发表于 2022-12-12 22:45
难道需要先配置令牌,让普罗米修斯访问ha的数据库?

好吧这个是配置外网的ha数据库连接
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

18

主题

555

帖子

3976

积分

元老级技术达人

积分
3976
金钱
3386
HASS币
182
 楼主| 发表于 2022-12-12 22:58:54 | 显示全部楼层
本帖最后由 louis_lee 于 2022-12-12 23:08 编辑
jjcs 发表于 2022-12-12 22:39
{我们选择prometheus数据源,并在URL中输入http://eee6de0d-prometheus:9090 ,滑到最下边点击Save&Test。 ...

这个问题,我觉得可以分这么几步看

1.首先你进入Prometheus add-on页面,看看Prometheus有没有启动
2.Prometheus addon页面里边有个主机名称,你的主机名称是不是eee6de0d-prometheus。不是的话,告诉我下,我也改下描述
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-3-29 18:01 , Processed in 0.060050 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表