Try   HackMD

Grafana 技巧 如何更改登入 Title 與分頁 Title

如果想對下圖登入介面的紅框處 "Welcome to Grafana" 以及藍框處的分頁 Title 進行修改，可以參考本文的做法

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

1.打開資料夾 ...\grafana\public\build

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2.以編輯器打開檔案 5893.****.js，如果找不到該名稱的檔案請參考下方補充的方法

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

3.搜尋 AppTitle 找到 o(l,"AppTitle","填入你想要的title") 進行修改

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

重新打開 Grafana 登入畫面發現分頁 Title 已經修改完成
(如果沒成功的話可以嘗試以訪客模式打開 http://localhost:3000)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

4.搜尋 LoginTitle 找到 o(l,"LoginTitle","Welcome to XXX") 進行修改

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

重新打開 Grafana 登入畫面發現畫面中間的 "Welcome to XXX" 已經修改完成
(如果沒成功的話可以嘗試以訪客模式打開 http://localhost:3000)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

5.如果想對登入後分頁的 Dashoboard Title 進行修改，在同個資料夾打開 DashboardPage.****.js

搜尋 document.title，在 r.title + " - " + "輸入你想要的title結尾" 的地方進行修改

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

再重新打開 Grafana dashboard，即可看到分頁 Title 後 "-" 帶有剛剛修改的字串

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

補充

如果在本文步驟二中，找不到一樣的 5893.****.js 檔名或在該檔搜尋不到 LoginTitle 與 AppTitle，可以嘗試以下列步驟進行搜尋

1.在 notepad++ 中選擇搜尋 -> 在多個檔案中尋找 -> 尋找內容: LoginTitle -> 資料夾: ...\grafana\public\bulid -> 全部尋找

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2.搜尋完應該只會有 ****.js 與 ****.js.map 兩個檔案帶有 LoginTitle 的搜尋結果

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

3.找到此 ****.js 並打開，即可回到本文的步驟三往下繼續操作

參考影片:
https://www.youtube.com/watch?v=g_bU7QBAWDY&t=416s

相關技術連結:
Grafana 如何更改 Logo

tags: Grafana tips title
Last changed by 
 
梁鎧軒
0
1042

Read more

Grafana 操作手冊

一、Grafana 下載 & 登入 官方下載連結: https://grafana.com/grafana/download Version: Grafana 版本，本篇是選擇使用 v8.4.4 Edition: 選擇OSS(Open Source Software) 作業系統: 依照自身電腦選擇對應的即可 預設 port 為3000，網址: localhost:3000 預設登入帳號/密碼 : admin / admin

Aug 12, 2022
Grafana 技巧 防止 Timestamp 與資料庫差8小時

明明 MySQL 資料庫裡的 timestamp 已經是GMT+8的時間了，但在 Grafana 裡又因為時區 而自動幫你+8小時，導致資料的 timestamp 有錯誤，對觀看者的體驗影響很大 1.我們將以下 SQL Query 分別輸入至 MySQL 跟 Grafana SELECT dt as 'time', val FROM demo ORDER BY dt

Aug 5, 2022
Grafana 技巧 Value Mapping

將接收到的值(value)去映射(mapping)到想要的文字或 emoji😊 1.匯入 data source 後，在 Edit panel 右方找到 overrides，點選 +Add field override 2.選擇 field with name，找到你想做 value mapping 的欄位 3.選擇 +Add override property，找到 Value mappings > value mappings 4.選擇 Add value mappings，在 Condition 欄位填入想進行 mapping 的值(有四種輸入格式: value, range, regex, special)，並在 Display text 填入要對應顯示的文字或符號 Condition 這邊我輸入格式以 range 做示範

Aug 5, 2022
Grafana 技巧 如何顯示固定時間區間的 Panel

1.進入 edit panel 中，找到 Query options 設定 2.將 Relative time 填入想要的時間範圍(從 now 往前推所填入的時間，s=秒 m=分 h=時 d=日) ++註:可以填入 variable 讓 relative time 隨著 variable 的輸入而改變，不用進入 edit panel 修改++ 3.即可讓該 panel 不受右上角的 absolute time range 影響而變化 如果想將右上角的 Last XXX 關掉，把 Hide time info 打開就會消失了

Aug 4, 2022
Read more from 梁鎧軒
Published on HackMD