2018-08-22:grafana封装panel-全局排名

基于之前做的text-panel的全局排名，因为后期用的地方越来越多，一旦需求修改那么要跟着修改很多的大盘，这样很不方便，现在需要将全局排名的text-panel，做成一个组件，这样就不用一个一个修改大盘了。

平均响应text-panel.png

---

grafana的工程目前不甚熟悉，先记录下关于开发我知道的，要做哪些事情：

• 将grafana工程解压到本地，略过~

• 解压完成后，在D:\g\src\github.com\grafana\grafana目录下，运行cmd，执行npm run watch
  

  npm run watch.png

注意node、 npm的版本，如果跑不起来，修改node版本，切换node，用nvm

node npm版本.png

• 编译100%完成后，执行D:\g\src\github.com\grafana\grafana\bin目录下的grafana-server.exe
  执行exe.png

grafana测试 怎么在pc上看效果？

• 输入localhost:3000，网页正常打开，登陆测试密码1——2.
  这样grafana的环境就算跑起来了，初步完成，接下来是开发组件与调试。
  环境跑起来 localhost：3000.png

开发组件在哪里写html、js

组件存放的位置：
D:\g\src\github.com\grafana\grafana\public\app\plugins\panel

注意新加组件命名风格保持一致。

以该组件为例.png 目录结构.png panel json配置.png js 主要方法.png

加入写的组建，引入：
D:\g\src\github.com\grafana\grafana\public\app\features\plugins\built_in_plugins.ts

引入模块文件.png 引入模块.png

注意：我不知道是不是这样的，我写玩代码之后，直接刷新页面，页面没效果。然后我重新run watch之后，有了效果。

就是编完代码之后，每次要重新npm run watch，重新运行grafana-service.exe，否则页面刷新看不到效果。

我今天发现，其实npm run watch是一直在运行的，但是就是没效果，只用将grafana-service.exe重启一下刷页面即可。