Grafana汉化笔记

前言

本文主要记录Grafana汉化思路及实施过程。
若发现文章中描述错误，欢迎在Github中指正。
Grafana中文版本，基于官方源码进行汉化。汉化内容主要为前端UI界面文本，不涉及后端内容。

相关建议欢迎留言：
Github: https://github.com/WangHL0927/grafana-chinese
Email: w958660278@163.com
钉钉群: 32637212
网站：https://wanghualong.cn
![IMG_0675.jpeg](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9qcGVnLzIyNTY0NS8xNTk2MTc3NDg5NzcxLWM5YmMxNjM1LTNjZjMtNDg3Yi04NGMzLTlmMjcyYTRlZjRjOS5qcGVn?x-oss-process=image/format,png#align=left&display=inline&height=387&margin=[object Object]&name=IMG_0675.jpeg&originHeight=387&originWidth=300&size=44417&status=done&style=none&width=300)

前排警告
Grafana官方release版本均为前端build后的压缩代码，直接对压缩后的文件编辑汉化虽然能用，但是不利于版本升级维护，且工作量巨大。
建议按照标准的前端开发流程，直接汉化官方的前端源码，重新发布，同时可以使用Git跟随官方版本进行更新升级。

一、开发环境

1.1 跟随grafana-chinese

此部分为跟随 grafana-chinese 项目流程开发，如有流程优化建议，欢迎在GitHub或邮箱留言。

此部分

1.1.1 获取git仓库

拉取仓库

git clone https://github.com/WangHL0927/grafana-chinese
cd grafana-chinese

1.2 从官方源码创建

此部分为 grafana-chinese项目构建流程，若选择跟随 grafana-chinese 项目可略过这部分内容。

不太建议直接Fork Grafana官方仓库，因为官方仓库分支很多且杂乱，建议只获取自己需要的分支即可。
以下内容介绍完整实施流程，也欢迎直接fork仓库 https://github.com/WangHL0927/grafana.git 参与源码贡献。

1.2.1 创建自己的grafana仓库

以Github为例，建立空仓库。
![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjI1NjQ1LzE1NzA3MDI3NjE1NTAtODQwNGZlNjQtMGViZi00MWIyLTg1OTctNDc0YmE3YTI5MDdlLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=777&margin=[object Object]&name=image.png&originHeight=1554&originWidth=2044&size=314066&status=done&style=none&width=1022)

1.2.2 拉取仓库到本地

使用SourceTree（或其它Git工具）clone仓库到本地。

![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjI1NjQ1LzE1NzA3MDMwNzQ2MTEtMjAzMjA1ZjctNjFmZC00YWIwLWE0Y2ItYWVkZWE3MzVhYzVhLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=330&margin=[object Object]&name=image.png&originHeight=660&originWidth=968&size=339411&status=done&style=none&width=484)

![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjI1NjQ1LzE1NzA3MDQwMTA1ODMtM2M3NDc1N2MtMzA1Ny00M2VkLTlhZjYtYTc1ODcyZWY5M2M0LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=220&margin=[object Object]&name=image.png&originHeight=440&originWidth=1034&size=426221&status=done&style=none&width=517)

1.2.3 设置官方仓库源

命名为upstream

![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjI1NjQ1LzE1NzA3MDQwOTI5MjQtYzgyN2M3MDItNDkxMi00ZjAwLTk1NjgtYjk0ZTk0OTE1NmQ1LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=410&margin=[object Object]&name=image.png&originHeight=820&originWidth=2432&size=1152151&status=done&style=none&width=1216)

1.2.4 Fetch官方仓库内容

点击拉取（fetch），勾选获取并储存所有标签。使用标签可快速找到已发行分支。

1.2.5 检出官方分支

展开标签栏，向下找到已发行版本标签v6.4.2

点击v6.4.2标签可快速定位到标签位置

在标签提交位置检出新分支，命名为v6.4.2
同时创建汉化工作分支，命名为v6.4.2-cn

推送原版分支、汉化分支到私有Grafana仓库（orgin)

源码准备完成

1.2.6 安装环境依赖

使用webstorm打开本地项目，确认为cn分支。
打开终端，运行yarn install 安装依赖包。
请使用yarn安装，不要使用npm！不要使用npm！不要使用npm！
使用npm install会出问题，亲测！
若未安装 yarn 可使用brew快速安装brew install yarn

整个安装过程时间较长，需耐心等待。

安装中。。。

安装完成！

测试一下，运行yarn start
编译无误！

**

1.3 安装环境依赖

#### 1.3.1 运行安装脚本

需提前预装 Git、yarn。

cd grafana-chinese
./tool.sh

# 输入 5 回车运行

![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjI1NjQ1LzE1NzEzMjMyODU3NjctNWI3MDIyZmItZWE2Yi00MGU4LWFiMTMtZWZhMmQ0NzdkM2NkLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=317&name=image.png&originHeight=634&originWidth=1184&size=76445&status=done&width=592)

![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjI1NjQ1LzE1NzExNTkxNDcxNDMtMTMzY2Y4OTMtOTJiNC00MDBmLWEyYTQtY2RjNjAyZDA3NWM4LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=277&name=image.png&originHeight=554&originWidth=1300&size=94553&status=done&width=650)

1.3.1 测试grafana仓库

使用webstorm打开当前目录的grafana文件夹，使用终端运行yarn start

编译无误！

1.4 搭建Grafana-dev-server

回到grafana-chinese项目，运行工具脚本tool.sh

cd grafana-chinese
./tool.sh
# 输入 5 回车运行

输出：

------------------------------
Tool Script
------------------------------
1. Start dev-server.
2. Stop/Remove dev-server.
3. Release to DockerHub with dev tag.
4. Release to DockerHub with latest tag.
5. Init dev project.
------------------------------
Input number and press ENTER:

输入1 回车，创建并启动dev-server容器（需安装Docker）
输入2 回车，停止并移除dev-server容器（需安装Docker）

启动无误后访问测试： http://localhost:3000

二、汉化Grafana

2.1 前排预警

2.1.1 前端内存溢出

参考文章：https://wanghualong.cn/archives/77/

仅对webpack-dev-server 进行扩充即可，建议6000+。

2.1.2 webpack-dev-server 热更新缓慢

测试机型：MBP-2018 i7 16G
启动命令：yarn start:hot start:ignoreTheme

基本处于瘫痪状态，每次commad+s 与重新编译无异，原因未知。

临时解决方案: 放弃热更新，使用yarn start启动，仅监控编译错误，手动刷新浏览器查看效果。

2.1.3 Server-error

原因未知。按照字面建议，使用脚本重新创建dev-server即可解决。

2.2 汉化界面

运行tool.sh 工具启动测试服务器。

------------------------------
Tool Script
------------------------------
1. Start dev-server.
2. Stop/Remove dev-server.
3. Release to DockerHub with dev tag.
4. Release to DockerHub with latest tag.
5. Init dev project.
------------------------------
Input number and press ENTER:
1
------------------------------
Start grafana-dev-server...
run container grafana-dev-server
5a8bc85c2e8e225da180b2ea4d2a08a73a5a8ebea821c9135fc02508a2fdcb63
grafana-dev-server runing at http://localhost:3000

webstorm打开grafana项目，终端运行yarn start

以登陆页面为例，编辑public/app/core/components/Login/LoginForm.tsx 文件，保存触发重新编译。

浏览器刷新查看效果（http://localhost:3000/login）

三、发行汉化

3.1 Build

停止dev-server及yarn start
grafana项目下运行yarn build

3.2 发布至Docker Hub

cd grafana-chinese
./tool.sh
# 输入 3 回车运行
# 需提前登陆docker账户

3.3 资源替换

直接将grafana/public文件夹替换线上生产版本。
Linux路径：/usr/share/grafana/public
Windows路径：/public

注意事项：

备份！备份！备份！
注意版本号一致，不可混用
建议整个文件夹替换，不要骚操作。

原文链接：https://blog.csdn.net/w958660278/article/details/81161294