grafana的前端二次开发初体验

开发环境搭建

安装grafana

• brew install grafana

安装node 和 go

• brew install go

进入到"/Users/*用户名/go"目录下，然后依次新建文件夹： src/github.com/grafana
然后在grafana目录下执行

• git clone https://gitee.com/mirrors/grafana.git

安装依赖文件

• yarn install

启动项目

• yarn start

代理到浏览器，初始账号密码是 admin/admin

• go env -w GOPROXY=https://goproxy.cn
• make run

修改前端（react）

登录弹窗

Welcome to Grafana（欢迎使用Grafana），public/app/core/components/Branding/Branding.tsx

Email or username（用户名），public/app/core/components/Login/LoginForm.tsx

Password（密码），同上

‘Logging in…’ : ‘Log in’（登录中…：登录），同上

底部跳转链接

documentation，support…，public/app/core/components/Footer/Footer.tsx

General/Home

Welcome to Grafana（欢迎使用Grafana），public/app/plugins/panel/welcome/Welcome.tsx

Need help?、Documentation、Tutorials、Community（需要帮助？、文档、教程、社区），同上

快速引导

Basic，The steps below will guide you to quickly finish setting up your Grafana installation.（基础，下面的步骤将指导您快速完成对Grafana安装的设置。），public/app/plugins/panel/gettingstarted/steps.ts

Grafana fundamentals（Grafana 基本配置），同上

Set up and understand Grafana if you have no prior experience. This tutorial guides you through the entire process and covers the “Data source” and “Dashboards” steps to the right.（如果您没有经验，本教程将指导您完成整个过程，涵盖右边的“数据源”和“仪表板”步骤。），同上

Add your first data source（创建你的第一个数据来源），同上

Create your first dashboard（创建你的第一个仪表盘），同上

Learn how in the docs（通过文档学习如何使用），public/app/plugins/panel/gettingstarted/components/DocsCard.tsx

Remove this panel（移除此面板），public/app/plugins/panel/gettingstarted/GettingStarted.tsx

Panel样式

.panel-container {border-radius: 6px;}（修改panel圆角弧度），public/sass/pages/_dashboard.scss

数据库操作

查找数据库文件所在地址

• find / -name “grafana.db”

打开数据库

• sqlite3
  /System/Volumes/Data/Users/chenting/go/src/github.com/grafana/grafana/data/grafana.db

查看表

• .tables

查看表里的内容

• select * from user;

关闭

• .exit

如果你忘记了密码，使用以下语句将重置密码为admin

• update user set password =
  ‘59acf18b94d7eb0694c61e60ce44c110c7a683ac6a8f09580d626f90f4a242000746579358d77dd9e570e83fa24faa88a8a6’,
  salt = ‘F3FAxVm33R’ where login = ‘admin’;

如果你不小心关掉了首页的快速引导，使用以下语句将恢复引导卡片

• update user set help_flags1 = 0, salt = ‘F3FAxVm33R’ where login =
  ‘admin’;

修改后端（go）

待学习

打包部署

待学习

参考链接

mac 搭建 grafana 的二次开发环境
Grafana忘记密码，重置密码