裝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

而後速度就刷刷的了，幾乎打開就能生效。