@@ -107,7 +107,7 @@ To access the dashboard time settings, click the **Dashboard settings** (gear) i
## Panel time overrides and timeshift
In [Query options]({{<relref"queries.md#query-options">}}), you can override the relative time range for individual panels, causing them to be different than what is selected in the dashboard time picker in the upper right. This allows you to show metrics from different time periods or days at the same time.
In [Query options]({{<relref"../panels/queries.md#query-options">}}), you can override the relative time range for individual panels, causing them to be different than what is selected in the dashboard time picker in the upper right. This allows you to show metrics from different time periods or days at the same time.
@@ -11,7 +11,7 @@ Grafana added support for plugins in version 3.0 and this enabled the Grafana co
However, one limitation with these plugins are that they execute on the client-side (in the browser) which makes it hard to support certain use cases/features, e.g. enable Grafana Alerting for data sources. Grafana v7.0 adds official support for backend plugins which removes this limitation. At the same time it gives plugin developers the possibility to extend Grafana in new and interesting ways, with code running in the backend (server side).
We use the term *backend plugin* to denote that a plugin has a backend component. Still, normally a backend plugin requires frontend components as well. This is for example true for backend data source plugins which normally need configuration and query editor components implemented for the frontend.
We use the term _backend plugin_ to denote that a plugin has a backend component. Still, normally a backend plugin requires frontend components as well. This is for example true for backend data source plugins which normally need configuration and query editor components implemented for the frontend.
Data source plugins can be extended with a backend component. In the future we plan to support additional types and possibly new kinds of plugins, such as [notifiers for Grafana Alerting]({{<relref"../../../alerting/notifications.md">}}) and custom authentication to name a few.
...
...
@@ -28,6 +28,7 @@ The following examples gives you an idea of why you'd consider implementing a ba
## Grafana’s backend plugin system
The Grafana backend plugin system is based on the [go-plugin library by HashiCorp](https://github.com/hashicorp/go-plugin). The Grafana server launches each backend plugin as a subprocess and communicates with it over [gRPC](https://grpc.io/). This approach has a number of benefits:
- Plugins can’t crash your grafana process: a panic in a plugin doesn’t panic the server.
- Plugins are easy to develop: just write a Go application and run `go build` (or use any other language which supports gRPC).
- Plugins can be relatively secure: The plugin only has access to the interfaces and arguments that are given to it, not to the entire memory space of the process.
...
...
@@ -41,7 +42,7 @@ Grafana's backend plugin system exposes a couple of different capabilities, or b
### Query data
The query data capability allows a backend plugin to handle data source queries that are submitted from a [dashboard]({{<relref"../../../features/dashboard/dashboards.md">}}), [Explore]({{<relref"../../../features/explore/index.md">}}) or [Grafana Alerting]({{<relref"../../../alerting">}}). The response contains [data frames]({{<relref"data-frames.md">}}), which are used to visualize metrics, logs, and traces. The query data capability is required to implement for a backend data source plugin.
The query data capability allows a backend plugin to handle data source queries that are submitted from a [dashboard]({{<relref"../../../features/dashboard/dashboards.md">}}), [Explore]({{<relref"../../../features/explore/index.md">}}) or [Grafana Alerting]({{<relref"../../../alerting">}}). The response contains [data frames]({{<relref"../data-frames.md">}}), which are used to visualize metrics, logs, and traces. The query data capability is required to implement for a backend data source plugin.
### Resources
...
...
@@ -59,7 +60,7 @@ Examples of use cases for implementing resources:
### Health checks
The health checks capability allows a backend plugin to return the status of the plugin. For data source backend plugins the health check will automatically be called when you do *Save & Test* in the UI when editing a data source. A plugin's health check endpoint is exposed in the Grafana HTTP API and allows external systems to continuously poll the plugin's health to make sure it's running and working as expected.
The health checks capability allows a backend plugin to return the status of the plugin. For data source backend plugins the health check will automatically be called when you do _Save & Test_ in the UI when editing a data source. A plugin's health check endpoint is exposed in the Grafana HTTP API and allows external systems to continuously poll the plugin's health to make sure it's running and working as expected.
@@ -15,7 +15,7 @@ Grafana already has a strong community of contributors and plugin developers. By
## Short version
1.[Set up Grafana](https://github.com/grafana/grafana/blob/master/contribute/developer-guide.md)
2. Clone an example plugin into ```/var/lib/grafana/plugins``` or `data/plugins` (relative to grafana git repo if you're running development version from source dir)
2. Clone an example plugin into `/var/lib/grafana/plugins` or `data/plugins` (relative to grafana git repo if you're running development version from source dir)
3. Use one of our example plugins as a starting point
Example plugins
...
...
@@ -36,7 +36,7 @@ Since everything turns into JavaScript, it's up to you to choose which language
## Buildscript
You can use any build system that supports systemjs. All the built content should end up in a folder named ```dist``` and be committed to the repository. By committing the dist folder, the person who installs your plugin does not have to run any build script. All of our example plugins have a build script configured.
You can use any build system that supports systemjs. All the built content should end up in a folder named `dist` and be committed to the repository. By committing the dist folder, the person who installs your plugin does not have to run any build script. All of our example plugins have a build script configured.
## Keep your plugin up to date
...
...
@@ -63,34 +63,30 @@ The SDK contains three different plugin classes: PanelCtrl, MetricsPanelCtrl and
Example:
```javascript
import{ClockCtrl}from'./clock_ctrl';
import{ClockCtrl}from'./clock_ctrl';
export{
ClockCtrlasPanelCtrl
};
export{ClockCtrlasPanelCtrl};
```
The module class is also where css for the dark and light themes is imported:
There are three ways that you can start developing a Grafana plugin.
1. Set up a Grafana development environment. [(described here)](https://github.com/grafana/grafana/blob/master/contribute/developer-guide.md) and place your plugin in the ```data/plugins``` folder.
1. Set up a Grafana development environment. [(described here)](https://github.com/grafana/grafana/blob/master/contribute/developer-guide.md) and place your plugin in the `data/plugins` folder.
2. Install Grafana and place your plugin in the plugins directory which is set in your [config file](/installation/configuration). By default this is `/var/lib/grafana/plugins` on Linux systems.
3. Place your plugin directory anywhere you like and specify it grafana.ini.
...
...
@@ -116,11 +112,11 @@ If a panel receives data and hooks into the `data-received` event then it should
We have three different examples that you can fork/download to get started developing your Grafana plugin.
-[simple-json-datasource](https://github.com/grafana/simple-json-datasource)(small data source plugin for querying json data from backends)
<selectclass="input-small gf-form-input"ng-model="ctrl.panel.mySelectProperty"ng-options="t for t in ['option1', 'option2', 'option3']"ng-change="ctrl.onSelectChange()"></select>
<select
class="input-small gf-form-input"
ng-model="ctrl.panel.mySelectProperty"
ng-options="t for t in ['option1', 'option2', 'option3']"
<inputtype="text"class="input-small gf-form-input width-10"ng-model="ctrl.panel.myProperty"ng-change="ctrl.onFieldChange()"placeholder="suggestion for user"ng-model-onblur/>
<input
type="text"
class="input-small gf-form-input width-10"
ng-model="ctrl.panel.myProperty"
ng-change="ctrl.onFieldChange()"
placeholder="suggestion for user"
ng-model-onblur
/>
</div>
</div>
</div>
...
...
@@ -157,6 +169,7 @@ We recommend that you use a linter for your JavaScript. For ES6, the standard li
})
}
```
4. Use native _Promise_ object:
```js
...
...
@@ -176,4 +189,5 @@ We recommend that you use a linter for your JavaScript. For ES6, the standard li
}
}
```
5. If using Lodash, then be consistent and prefer that to the native ES6 array functions.
