macbook上grafana8插件开发入门

Posted 2023-03-26

参考技术A 1.首先需要在macbook上安装grafana

brew install grafana

2.启动grafana

brew services start grafana

启动后我们需要看插件的目录在哪里。

ps aux|grep grafana

进程信息如下

 /usr/local/opt/grafana/bin/grafana-server --config /usr/local/etc/grafana/grafana.ini --homepath /usr/local/opt/grafana/share/grafana --packaging=brew cfg:default.paths.logs=/usr/local/var/log/grafana cfg:default.paths.data=/usr/local/var/lib/grafana cfg:default.paths.plugins=/usr/local/var/lib/grafana/plugins

可以看到插件目录在/usr/local/var/lib/grafana/plugins 下面,grafana的配置文件是/usr/local/etc/grafana/grafana.ini

我们进入插件目录去开发我们的第一个插件/usr/local/var/lib/grafana/plugins

我们先安装必要的开发工具

brew install npm

npm install -g npx yarn

npx @grafana/toolkit plugin:create my-plugin

选择pannel插件

pluginId要填好，必须是唯一的 这里我们填 my-plugin-123

创建好插件后 

cd my-plugin

可以对生成好的插件脚手架进行修改，脚手架是基于reactJs开发的

yarn install // 安装依赖

yarn dev //注意这一步很重要，这一步会修复lint错误，不执行yarn build 会报错

yarn build 

由于grafana7之后都要求插件进行签名，对不签名的的插件正常情况下是不会加载的，因此我们需要改一下配置文件，

针对我们这个未签名的插件做特殊处理。

vim /usr/local/etc/grafana/grafana.ini

把下面allow_loading_unsigned_plugins配置项的注视去掉并配上

allow_loading_unsigned_plugins = "my-plugin-123"

my-plugin-123是我们创建插件时候输入的插件ID

接着，我们把服务grafana的服务重启就可以看到我们创建的插件了

brew services restart grafana

输入：http://127.0.0.1:3000/admin/plugins?filterBy=all&filterByType=all&q=my

Grafana，使用外部库开发插件

【中文标题】Grafana，使用外部库开发插件

【英文标题】：Grafana, develop plugin using an external library

【发布时间】：2018-07-08 02:37:02

【问题描述】：

大家好。 我正在尝试为 Grafana 开发一个简单的插件。 我已经成功地导入了外部库，现在我对“使用它”感到震惊。

这是我在 domap_ctrl.js 中导入插件的方式：

System.register(['app/plugins/sdk', 'lodash','./datamaps'], function (_export, _context) 
  var PanelCtrl, _, _createClass, panelDefaults, DoMapCtrl, Datamap;

然后我想触发数据映射：

_createClass(DoMapCtrl, [
            
              key: 'updateDoMap',
              value: function updateDoMap() 
                console.log("update: ",this.panel.foo);
                if(document.getElementById('container'))
                    new Datamap(
                      element: document.getElementById("basic")
                    );
                
                this.nextTickPromise = this.$timeout(this.updateDoMap.bind(this), 1000);
              
            ,
            
          key: 'onRender',
          value: function onRender() 
            console.log("onRender",)
          
        
        ]);

但在将面板添加到仪表板时出现此错误：

TypeError: Datamap is not a constructor
    at DoMapCtrl.updateDoMap (domap_ctrl.js:92)
    at angular.js:20440
    at i (angular.js:6362)
    at angular.js:6642
(anonymous) @ angular.js:14700
(anonymous) @ angular.js:11142
(anonymous) @ angular.js:20443
i @ angular.js:6362
(anonymous) @ angular.js:6642
setTimeout (async)
c.defer @ angular.js:6640
o @ angular.js:20438
updateDoMap @ domap_ctrl.js:96
DoMapCtrl @ domap_ctrl.js:82
s @ angular.js:5040
d.instance @ angular.js:11000
f @ angular.js:9852
s @ angular.js:9174
(anonymous) @ angular.js:9039
v @ module.js:14
y @ module.js:38
(anonymous) @ module.js:44
Promise resolved (async)
link @ module.js:43
(anonymous) @ angular.js:1385
Ae @ angular.js:10545
f @ angular.js:9934
s @ angular.js:9174
f @ angular.js:9928
s @ angular.js:9174
(anonymous) @ angular.js:9039
(anonymous) @ angular.js:9430
r @ angular.js:9217
h @ angular.js:9984
(anonymous) @ angular.js:31499
r @ angular.js:18123
$digest @ angular.js:18261
$apply @ angular.js:18531
(anonymous) @ angular.js:27346
dispatch @ jquery.js:5206
g.handle @ jquery.js:5014
12:41:12.796 angular.js:14700 TypeError: Datamap is not a constructor
    at DoMapCtrl.updateDoMap (domap_ctrl.js:92)
    at angular.js:20440
    at i (angular.js:6362)
    at angular.js:6642 "Possibly unhandled rejection: "

我该如何解决？提前感谢您的帮助。

【问题讨论】：

为什么不在源文件中使用打字稿等使用import * as Datamap from './datamaps'？

【参考方案1】：

即使不建议直接在 dist 文件夹中编辑 Grafana 插件（或不从 Typescript 转译）...

要导入您的库，您还需要修改提供依赖项注入的 setters 函数：

return 
    setters: [
    function (_lodash) 
        // example for Lodash library
        _ = _lodash.default;
    , function (_moment) 
        // example for Moment.js library
        moment = _moment.default;
    , function (datamap) 
        // your library
        Datamap = datamap;
    ],
    ...