装X神器，让你的grafana看板变得炫酷起来

2021-02-04 10:01:19 浏览数 (1)

正常grafana看板的颜色非常单调，时间长了也会审美疲劳，对于那些喜新厌旧的人来说，多少有点不能满足，于是我就在网上找了一些方式来让我的grafana看板变得更加炫酷，讲之前先贴个对比图吧

旧的旧的
新的新的
新的新的

再来个动图

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

grafana安装插件yesoreyeram-boomtheme-panel

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

代码语言：txt复制
# 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然后进入容器

代码语言：txt复制
# 进入容器
docker exec -it cef75 bash
# 安装插件
grafana-cli plugins install yesoreyeram-boomtheme-panel

安装完成后，需要重启容器

代码语言：txt复制
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，对应的就是不同颜色的样式，可以都配置下，看看什么效果

我这里都整理好了，直接配置成我这里的地址就可以了

代码语言：txt复制
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的目录

代码语言：txt复制
docker exec -it --user root cef75 bash

注意： 这里加了一个--user root，因为不加这个进入容器后，创建目录会权限拒绝，所以需要添加下，如果是虚机部署直接创建即可

代码语言：txt复制
# 进入到此目录中
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

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

腾讯云可观测平台

0 人点赞