We can develop plug-ins for any database that communicate with the database over HTTP.

Project directory structure

├─ SRC ├─ CSS ├─ img │ ├─ server logomodule│ ├ ─ ─ annotationsQueryCtrl. Js │ ├ ─ ─ configCtrl. Js │ ├ ─ ─ a datasource. Js │ ├ ─ ─ queryCtrl. Js │ └ ─ ─ queryOptionsCtrl. Js ├ ─ ─module.js ├─ Page │ ├─ ├─ config.html │ ├─ queryOptions.html │ ├─ ├.html │ ├─ queryOptions.html │ ├─ ├.html │ ├─ ├.html │ ├─ queryOption.html │ ├── Gruntfile.js ├─ Readme.md ├─ package.jsonCopy the code

The metadata files are plugin.json and readme. md. Gruntfile.js is the metadata file of grunt. The main source of the datasource plugin is in the SRC file. The CSS folder contains style files, and the IMG folder contains image files. That leaves the module folder, page folder, module.js file, and plugin.json file.

The plugin. Json file

In the plugin.json file, there are two specific Settings for the datasource, one of which must be true

"metrics": true.// Whether metrics are supported in panel
"annotations": false.// Annotations queries are supported in Dashboard
Copy the code

Plugin. json stores plugin metadata. Grafana scans the plugin directory to find the plugin.json file and automatically registers the plug-in. The contents of the file are extracted and encapsulated into objects for use. Example plugin.json file:

{
  "name": "Proxy server"."id": "grafana-server-datasource"."type": "datasource"."metrics": true."annotations": true."info": {
    "description": "Proxy server as data source"."author": {
      "name": "liuchunhui"."url": "https://grafana.com"
    },
    "logos": {
      "small": "img/server-logo.png"."large": "img/server-logo.png"
    },
    "links": [{"name": "Github"."url": ""},
      {"name": "MIT License"."url": ""}]."version": "1.0.0"."updated": "2018-04-23"
  },

  "dependencies": {
    "grafanaVersion": "3.x.x"."plugins": []}}Copy the code

module.js

The module.js file is very important as it is the starting point for plug-in loading. To interact with the rest of Grafana, the plug-in file needs to export the following five modules:

Datasource  // Required
QueryCtrl  // Required
ConfigCtrl  // Required
QueryOptionsCtrl  // 
AnnotationsQueryCtrl  //
Copy the code

So in Module, it’s responsible for exporting these five modules. Examples of code for the module.js file:

import GenericAnnotationsQueryCtrl from './module/annotationsQueryCtrl';
import GenericConfigCtrl from './module/configCtrl';
import GenericDatasource from './module/datasource';
import GenericQueryCtrl from './module/queryCtrl';
import GenericQueryOptionsCtrl from './module/queryOptionsCtrl';

export {
    GenericAnnotationsQueryCtrl as AnnotationsQueryCtrl,
    GenericConfigCtrl as ConfigCtrl,
    GenericDatasource as Datasource,
    GenericQueryCtrl as QueryCtrl,
    GenericQueryOptionsCtrl as QueryOptionsCtrl
};
Copy the code

The module folder

│ ├ ─ ─ annotationsQueryCtrl. Js │ ├ ─ ─ configCtrl. Js │ ├ ─ ─ a datasource. Js │ ├ ─ ─ queryCtrl. Js │ └ ─ ─ queryOptionsCtrl. JsCopy the code

These five files correspond to the five modules exported by module.js that will be converted into five Angular controllers.

Page folder

│ │ ├ ─ ─ annotationsQuery. HTML ├ ─ ─ config. The HTML │ ├ ─ ─ query. The HTML │ └ ─ ─ queryOptions. HTMLCopy the code

These four files correspond to annotationsQueryCtrl, configCtrl, queryCtrl, queryOptionsCtrl page templates that need to be bound to the Module folder. The datasource module does not need page templates.

The next article details the development of the Datasource plug-in for Grafana in practice TWO