正常grafana看板的颜色非常单调，时间长了也会审美疲劳，对于那些喜新厌旧的人来说，多少有点不能满足，于是我就在网上找了一些方式来让我的grafana看板变得更加炫酷，讲之前先贴个对比图吧
旧的
新的
新的
再来个动图
image
第一张图显得暗淡了许多，哈哈哈。下面讲讲如何去做。
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上就有了这个插件
image
安装很简单，没啥可说的
配置grafana
配置的话也很简单，但是没接触过的小宝贝可能就比较懵逼，其实整个流程是这样的，我们先创建一个dashboard，然在这个dashboard中新建一个面板，创建面板的时候，选择刚装的插件Boom Theme，然后配置此插件，配置完成后，点击保存，保存完整个dashboard就会发生变化，然后我们拷贝此面板到任意其他的dashboard中，然后其他的dashboard主题也会相应的发生变化。
简而言之就是：看下面的操作吧
创建一个dashboard并添加面板
image
选择Boom Theme并进行配置
image
点击添加新的主题
image
image
这里我们看到有添加背景图片的，还有添加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
如图所示：
image
然后点击apply，然后你就会看到整个dashboard发生了变化
image
也就是说只要应用了这个插件，整个dashboard就会变化，准确说是添加的这个面板
应用于其他的dashboard
虽然主题变了，但是得让其他的dashboard炫酷才行啊，所以把这个面板拷贝到其他dashboard中，这里我随便找一个应用下
image
复制
image
image
然后就变了。有点简单。
虽然简单，但是你以为到这里就完了吗？还有点不完美，每次加载的时候速度有点慢，究其原因就是去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，其实就是改成本地的地址
image
注意后面的路径就好了: /public/css/hotline.css
然后速度就刷刷的了，几乎打开就能生效。
网友评论