乐趣区

关于监控:装X神器让你的grafana看板变得炫酷起来

失常 grafana 看板的色彩十分枯燥,工夫长了也会审美疲劳,对于那些喜新厌旧的人来说,多少有点不能满足,于是我就在网上找了一些形式来让我的 grafana 看板变得更加炫酷,讲之前先贴个比照图吧

再来个动图

第一张图显得黯淡了许多,哈哈哈。上面讲讲如何去做。

grafana 装置插件yesoreyeram-boomtheme-panel

因为我的 grafana 没有应用 k8s 进行装置,我间接用 docker 起的,所以这里我间接进入到 docker 里执行安装操作

# docker ps
CONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS              PORTS                    NAMES
cef753a202d5        grafana/grafana          "/run.sh"                3 months ago        Up 2 hours          0.0.0.0:3000->3000/tcp   grafana-server

查到 CONTAINER ID 而后进入容器

# 进入容器
docker exec -it cef75 bash
# 装置插件
grafana-cli plugins install yesoreyeram-boomtheme-panel

装置实现后,须要重启容器

docker container restart cef753a202d5

而后,咱们的 grafana 上就有了这个插件

装置很简略,没啥可说的

配置 grafana

配置的话也很简略,然而没接触过的小宝贝可能就比拟懵逼,其实整个流程是这样的,咱们先创立一个 dashboard,然在这个 dashboard 中新建一个面板,创立面板的时候,抉择刚装的插件Boom Theme,而后配置此插件,配置实现后,点击保留,保留残缺个 dashboard 就会发生变化,而后咱们拷贝此面板到任意其余的 dashboard 中,而后其余的 dashboard 主题也会相应的发生变化。

简而言之就是:看上面的操作吧

创立一个 dashboard 并增加面板

抉择 Boom Theme 并进行配置

点击增加新的主题

这里咱们看到有增加背景图片的,还有增加 CSS 一些款式的,文章结尾贴了一些图片,是不是明确了,有美女背景的,有 gif 动图的,也有相似于火焰的,其实就是设置的这里,而后你可能会问了,背景图片我晓得哪里弄,然而那些 CSS 的款式我哪里弄呢?

增加内部 CSS 地址

地址栏输出:https://github.com/gilbN/theme.park/tree/master/CSS/themes/grafana
而后你就会看到有好几个类型的 CSS,对应的就是不同色彩的款式,能够都配置下,看看什么成果

我这里都整顿好了,间接配置成我这里的地址就能够了

https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/aquamarine.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dark.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dashboard.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/plex.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/space-gray.css

如图所示:

而后点击apply,而后你就会看到整个 dashboard 产生了变动

也就是说只有利用了这个插件,整个 dashboard 就会变动,精确说是增加的这个面板

利用于其余的dashboard

尽管主题变了,然而得让其余的 dashboard 炫酷才行啊,所以把这个面板拷贝到其余 dashboard 中,这里我轻易找一个利用下


复制

而后就变了。有点简略。

尽管简略,然而你认为到这里就完了吗?还有点不完满,每次加载的时候速度有点慢,究其原因就是去 github 上获取这个 css,所以多少会有点慢,那么接下来就做下优化

优化 css 加载速度

优化无非就是把这个 css 放到国内,放到国内原厂商的对象存储里,或者彻底一点,间接放到本地,我这里都进行尝试了,都可!上面说一下如何将这个 css 放到本地

下载 css 并配置 grafana

先进入 docker 中创立寄存 css 的目录

docker exec -it --user root cef75 bash

留神: 这里加了一个--user root,因为不加这个进入容器后,创立目录会权限回绝,所以须要增加下,如果是虚机部署间接创立即可

# 进入到此目录中
cd /usr/share/grafana/public
# 创立目录
mkdir css
# 下载 css
wget https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css

这样就行了,而后配置下 grafana,其实就是改成本地的地址

留神前面的门路就好了: /public/css/hotline.css

而后速度就刷刷的了,简直关上就能失效。

退出移动版