Grafana 插件开发从零到一

阅前高能提醒：这篇文章总的来说并不是在教你怎么开发，而是告诉你怎么去学习开发一个 Grafana 的插件，说是从零到一，MAX_VALUE 其实是 100，望珍重。

引子

前一阵子突然接到了一个新任务：开发一个 Grafana 的 Datasource——差不多是这个表情。

作为一个新时代的好码畜，上一次配置 Grafana 面板的时候，含着热泪抱着大佬的大腿，在几乎完全是大佬输入的情况下完成了面板——我连面板都不会配你竟然让我开发？What，我没听错吧。

在此之前，我们为服务添加监控除了已经注入到满足条件的数据库后使用已有数据源配置，还有的就是 mock 请求映射到数据源，但是这样有太多不可变操作，如果我们能自己写个 datasource 岂不是美滋滋，一把梭。

开车

当然，我相信我艰苦卓绝的学习能力，比如这篇文章屁都没讲我已经水了 300 字了。

我们先了解到了相似的产品 azure-monitor-datasource，证明了我们方向的可行性，为了明白整个 datasource 应该是怎么运作的，以及配置界面大概长什么样，于是我特地注册了一个 Azure 账号并且配置了一波，幸运的是，大家只要看我的截图就行了：

但是相比其他 datasource 或者 plugin 的代码，Azure 的显得相当体积庞大，因此我接触了大概一周的时间之后最终放弃了从 Azure 的角度出发去修改成一个我需要的 Datasource，因为代码实在忒复杂了……而且更主要的是，我对于 Azure 的 API 并不熟悉，就更增加了阅读成本。

所以很快的，我换了一个思路，当然，在换思路前，先熟悉一下项目结构：

用 karma 进行测试，使用 TypeScript 和 Grunt，Template 语法为 AngularJS 1.x，同时需要一个 grafana-sdk-mocks。

大概是这样，除了测试的部分，之后都会做一一的说明——总之我们看了这些上个时代的道具，掐指一算，这车大概是开不起来了，只能换换单车。

此外，还有一个问题：

Grunt 能不能换成别的？TypeScript 能不能换成 JavaScript？AngularJS 能不能换成更高版本的 Angular 或者使用其他框架？

前两个的答案是可以，不过作为非配置工程师，懒得折腾这么多，照抄配置一把梭，至于 AngularJS 1.x，涉及到了整个 Grafana 的 View 层问题，在某个论坛看到关于能不能升级的提议，大致是：「你们能不能升级到 Angular 4 啊？」「我们还在升级 Angular 2 的路上」——总之，路漫漫其修远兮，一句话就是，我们现在还得用 AngularJS 来搞定 Template。

单车

截至目前，我们已经知道「我们要使用哪些技术」、「完成品大概会有哪些配置可供选择」两个问题了，下一个问题就是：到底如何开发呢？

为了方便阅读，这回换了两个简单的项目：