Grafana中文化

chenweil發表於2020-12-10

docker hub

視覺化圖表

Grafana是一個通用的視覺化工具。通過Grafana可以管理使用者許可權,資料分析,檢視,匯出,設定告警等。

儀表盤Dashboard

通過資料來源定義好視覺化的資料來源之後,對於使用者而言最重要的事情就是實現資料的視覺化。

皮膚 Panel

Panel是Grafana中最基本的視覺化單元。每一種型別的皮膚都提供了相應的查詢編輯器(Query Editor),讓使用者可以從不同的資料來源(如Prometheus)中查詢出相應的監控資料,並且以視覺化的方式展現。
Grafana中所有的皮膚均以外掛的形式進行使用,當前內建了5種型別的皮膚,分別是:Graph,Singlestat,Heatmap, Dashlist,Table以及Text。

翻譯工作

上面簡單介紹了一下工具,主要是讓我們方便檢視監控的資料。這裡我還是沒有更深入的去研究公式等圖形的設定。這裡先主要寫一下翻譯方面的工作。

公司也考慮展示內容為中文化比較好,這裡Grafana沒有提供語言包的方式來處理多語言問題。在我檢視程式碼過程中,發現工具後臺是在GO裡面寫死的很多導航,返回值等資料。前臺是在頁面上直接寫的很多內容。所以我個人認為無法使用語言包來直接處理多語言問題。那就只好自己來搞定了。

翻譯的內容

更具程式碼檢視,主要分為兩大部分:

  • 後端: go檔案,主要內容在/pkg 目錄下。
  • 前端: 1. 系統頁面 2. 外掛頁面 這些在/public 目錄下

準備工作

首先git clone Grafana庫
git clone https://github.com/chenweil/grafana.git

之後我們根據自己翻譯的版本來檢出自己的專案。
這裡我們使用的v6.3.4 ,官方版本中可以檢視到tag v6.3.4,並重新命名自己的分支為6.3.4-chs:
git checkout -b 6.3.4-chs

通過 git branch 命令檢視自己處於哪個分支上。

這裡如果你不是很熟悉git命令列,可以使用sourcetree工具操作,相對來說點點滑鼠就可以搞定了。

我們在自己建立的分支就可以來處理我們的工作了。

前端除錯環境

需要 npm,nodejs,yarn

終端執行命令yarn install --pure-lockfile 初始化. 如果沒有報錯的情況,證明ok.

出現錯誤請先處理問題.
開啟除錯環境時候,是開啟前端的熱載入來協助我們除錯。
這裡安裝完三個環境可能在執行 yarn start 時報錯,這裡如果你是在windows上,需要再安裝一下sass.(根據報錯來看問題,我這裡遇到缺少sass問題)

當我們yarn start 執行後,等待一段時間,build at 時間證明準備工作已完成,下面就需要我們在除錯模式下測試了。

還需要一個除錯的Grafana服務程式,這裡是windows環境,所以直接從官方下載了zip包,執行bin下的grafana-server.exe 來啟動服務。需要再conf資料夾修改一下public前端資源的配置,如果不修改那麼你翻譯的資訊是看不到的,服務會直接讀取的當前的public,我們這需要讀取翻譯的public檔案位置。

配置在windows服務程式的 /conf/defaults.ini
修改內容:

app_mode = development               # 開發模式
static_root_path = D:\grafana\public #這裡配置到git拉取得位置的public

按照正常的操作 是需要開啟webpack-dev-server
我這裡沒有這麼設定,直接利用3000埠除錯的。(當我們yarn start 後,通過修改頁面可以看修改的內容。)

翻譯前端檔案

前面環境已經搭建好之後,我們通過修改頁面檔案展示內容來翻譯。
例如翻譯登陸頁面:
/public/app/partials/login.html

把對應的英文改為中文,儲存後webpack會處理。處理完成重新整理頁面可以看到結果。

前端翻譯檔案不止html,還有ts,tsx等檔案。這裡如果不知道具體檔案可以在public資料夾下,通過全域性搜尋頁面的單詞等資訊定位到檔案。
我沒有翻譯帶有test 的測試檔案。

最後我們把需要的檔案都翻譯之後,通過yarn build 生成檔案。這些檔案都存在生成的目錄/public/build中。把這些檔案覆蓋到自己搭建的專案中完成漢文。
建議把整體public目錄替換。
重啟服務既可以看到中文版的頁面了。

後端環境

後端是用GO寫的。後端我沒有除錯,不想前端那樣可以邊調邊看。我的辦法就是全部改完,build程式,啟動檢視後端翻譯的結果。
所需,本人是在windows10下處理的,需要gcc,go。

翻譯後端檔案

檔案所在位置: /pkg/

首頁我們的導航,二級選單這些不是前端控制的,這些是在 /pkg/api/index.go

其餘還有很多檔案,內容包含:html資料,返回值資訊,debug資訊等。如果你前端翻譯完成,那麼後端對你來說也是很輕鬆的。

請注意一些引數或者判斷不要給翻譯了

當翻譯完成後,需要build。
首先到專案根目錄,這裡可以看到 build.go 檔案。用這個來生成後端程式。 windows下可以build .exe程式。 時間很短,便於我們除錯。

build前,先steup一下,執行 go run build.go setup

$ go run build.go setup
Version: 6.3.4, Linux Version: 6.3.4, Package Iteration: 1568870230
go install -v ./pkg/cmd/grafana-server
github.com/grafana/grafana/pkg/api
github.com/grafana/grafana/pkg/cmd/grafana-server

如果沒有報錯,那麼證明是可以執行build了。
這裡可能你會遇到一些錯誤,出現錯誤先解決錯誤再重新執行 go run build.go setup,直到沒有錯誤。
我遇到一下錯誤:

  • error loading module requirements
    這個問題一查一大把,原因就是你需要的模組下載不到,地址被牆。
    解決方式: 其中一種:go.mod 新增replace() 替換地址。下面並非全部用到,我是偷懶全粘上。

      replace (
          golang.org/x/build => github.com/golang/build v0.0.0-20190416225751-b5f252a0a7dd
          golang.org/x/crypto => github.com/golang/crypto v0.0.0-20190411191339-88737f569e3a
          golang.org/x/exp => github.com/golang/exp v0.0.0-20190413192849-7f338f571082
          golang.org/x/image => github.com/golang/image v0.0.0-20190417020941-4e30a6eb7d9a
          golang.org/x/lint => github.com/golang/lint v0.0.0-20190409202823-959b441ac422
          golang.org/x/mobile => github.com/golang/mobile v0.0.0-20190415191353-3e0bab5405d6
          golang.org/x/net => github.com/golang/net v0.0.0-20190415214537-1da14a5a36f2
          golang.org/x/oauth2 => github.com/golang/oauth2 v0.0.0-20190402181905-9f3314589c9a
          golang.org/x/perf => github.com/golang/perf v0.0.0-20190312170614-0655857e383f
          golang.org/x/sync => github.com/golang/sync v0.0.0-20190412183630-56d357773e84
          golang.org/x/sys => github.com/golang/sys v0.0.0-20190416152802-12500544f89f
          golang.org/x/text => github.com/golang/text v0.3.0
          golang.org/x/time => github.com/golang/time v0.0.0-20190308202827-9d24e82272b4
          golang.org/x/tools => github.com/golang/tools v0.0.0-20190417005754-4ca4b55e2050
          golang.org/x/xerrors => github.com/golang/xerrors v0.0.0-20190410155217-1f06c39b4373
          google.golang.org/api => github.com/googleapis/google-api-go-client v0.3.2
          google.golang.org/appengine => github.com/golang/appengine v1.5.0
          google.golang.org/genproto => github.com/google/go-genproto v0.0.0-20190415143225-d1146b9035b9
          google.golang.org/grpc => github.com/grpc/grpc-go v1.20.0
          gopkg.in/asn1-ber.v1 => github.com/go-asn1-ber/asn1-ber v0.0.0-20181015200546-f715ec2f112d
          gopkg.in/fsnotify.v1 => github.com/Jwsonic/recinotify v0.0.0-20151201212458-7389700f1b43
          gopkg.in/gorethink/gorethink.v4 => github.com/rethinkdb/rethinkdb-go v4.0.0+incompatible
          gopkg.in/ini.v1 => github.com/go-ini/ini v1.42.0
          gopkg.in/src-d/go-billy.v4 => github.com/src-d/go-billy v4.2.0+incompatible
          gopkg.in/src-d/go-git-fixtures.v3 => github.com/src-d/go-git-fixtures v3.4.0+incompatible
          gopkg.in/yaml.v2 => github.com/go-yaml/yaml v2.1.0+incompatible
          k8s.io/api => github.com/kubernetes/api v0.0.0-20190416052506-9eb4726e83e4
          k8s.io/apimachinery => github.com/kubernetes/apimachinery v0.0.0-20190416092415-3370b4aef5d6
          k8s.io/client-go => github.com/kubernetes/client-go v11.0.0+incompatible
          k8s.io/klog => github.com/simonpasquier/klog-gokit v0.1.0
          k8s.io/kube-openapi => github.com/kubernetes/kube-openapi v0.0.0-20190401085232-94e1e7b7574c
          k8s.io/utils => github.com/kubernetes/utils v0.0.0-20190308190857-21c4ce38f2a7
          sigs.k8s.io/yaml => github.com/kubernetes-sigs/yaml v1.1.0
          go.uber.org/atomic => github.com/uber-go/atomic v1.3.2
      )

    還有方法是通過設定Module GOPROXY代理。大概意思就是當構建或執行你的應用時,Go 會通過 GOPROXY 獲取依賴。
    這個我沒測試,有興趣自行查閱。

  • exec: “gcc”: executable file not found in %PATH%
    這個問題是我們環境沒有gcc,這個玩意兒需要下載一個軟體MinGW
    此地址提供的壓縮包檔案。解壓可以使用,此網站也提供下載器安裝方式。這網站下載賊慢
    解壓之後設定環境變數,當前解壓完路徑是: C:\MinGW\mingw64 在環境變數新增此目錄。
    cmd 測試 gcc -v 有資訊即ok。

沒有問題 執行 go run build.go build
完成後,就可以得到bin檔案,位置在 /bin/windows-amd64/ , 裡面有grafana-server.exe 程式。

在測試前端時候,用的那個windwos程式可以下崗了,把build之後的bin程式+md5檔案一起復制到這目錄裡。如果你不放心提前先備份一份。

之後按照測試前端那樣,開啟服務,訪問3000,檢視自己漢化後端的成果吧。

生成docker映象

在windows可以直接載入public,bin生成之後替換原bin程式.

linux是類似,build出來的bin,需要在linux上build.

我們這裡主要是想利用docker.

還沒完,我們剛才只是測試一下自己漢化的後端是否可以。如果測試完都可以之後,我們還是要把它build成映象,利用docker來執行服務。
如果你不想用docker,就考慮在build為linux程式。

生成docker映象可以分為兩種,一種是你所在linux/amd64中生成的映象,另一種是通用的映象。

第一種:

linux系統上省事一點
go run build.go setup

go run build.go build

第二種通用映象:
make build-docker-full 或者 docker build -t grafana/grafana:dev .

這裡我沒有成功build出來鏡象,我在linux上嘗試了幾次,兩種方法build出來的鏡象啟動提示 run.sh 許可權存在問題,如果我+x run.sh之後,提示一些其他錯誤.

那鏡象我是通過commit來完成製作的.通過漢化的檔案cp到容器中在commit成一個鏡象.

如果想用我的鏡象,請點選這裡.

到此終於結束啦。

本作品採用《CC 協議》,轉載必須註明作者和本文連結
aLong

相關文章