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

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

再来个动图

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

grafana装置插件`yesoreyeram-boomtheme-panel`

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

# docker psCONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS              PORTS                    NAMEScef753a202d5        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.csshttps://gilbn.github.io/theme.park/CSS/themes/grafana/aquamarine.csshttps://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dark.csshttps://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dashboard.csshttps://gilbn.github.io/theme.park/CSS/themes/grafana/plex.csshttps://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# 下载csswget https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css

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

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

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

grafana装置插件yesoreyeram-boomtheme-panel