Grafana插件Plugin中文漢化

示例Github地址

漢化三方插件

前面說過漢化Grafana的工作。目前在7.2.1上面，大部分已經完成。細節繼續完善。
今天考慮在第三方插件上做一些漢化。點到插件一看全是英文感覺很突出。領導看到了也不爽啊-.-！。

找個軟的捏

餅圖在展示方面比較直觀。Grafana上有一個插件Pie Chart
。這個現象比較少，同時在一些模版上使用中。就拿這個熱熱身。

具體步驟

1. 下載項目

   項目地址：piechart-panel
   文件結構：

   

   git clone [e-mail]:grafana/piechart-panel.git
   cd piechart-panel # 進入到目錄
   yarn install  
   

   我直接把項目clone到grafana存放插件的位置，我的grafana是為了測試run的一個docker鏡像。把插件目錄掛載到本機，代碼clone到目錄中。

2. 漢化工作

   根據上面目錄看，主要修改文件都在src里面。
   IDE打開此項目，在src中修改需要編輯的文件。

   

   圖片舉例，選項第一項選擇圖形類型。選項內容pie / donut。通過翻譯我修改成了 派/甜甜圈。根據修改內容其他地方設計修改的都需要修改。我通過查詢替換方式，在其他文件中修改了代碼中的判斷。例如上圖右側展示的文件類似。

3. build插件

   修改完需要的內容之后，grafana是能識別到有一個插件，但沒有build時候他會提示你沒有build插件。就是他不認識你的項目代碼。

   這個怎么處理呢？看官方的文檔

   執行 yarn dev

   # 執行結束提示，美滋滋～
   ✔ Bundling plugin in dev mode
   ✨  Done in 4.91s.
   

   執行完畢我們重啟grafana就可以看到成果了。

   對比下原來的版本和漢化后的版本：

   before：

After：

4. 測試&調試

   以上2，3步驟基本就是一個測試、調試的過程。

   • 我開始先把所有配置項漢化。然后再處理選項參數。
   • 接着build，重啟grafana查看。如此往復達到預期目標。

我本機調試用docker啟動grafana，測完刪了容器就好了。

持續改進

考慮持續處理某個插件，可以考慮fork原插件項目，remote add XXX源。
然后新建分之來做自己的處理。master fetch XXX源 以跟蹤上游的更新。
這樣自己項目安裝插件時候拉自己的就好啦，美滋滋。