装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

而后速度就刷刷的了，几乎打开就能生效。