grafana / grafana-plugin-examples

Grafana plugin examples

This repository contains example plugins to showcase different use cases.

App plugins

Example	Description
app-basic	Shows how to build a basic app plugin that uses custom routing
app-with-dashboards	Shows how to include pre-built dashboards in an app plugin
app-with-backend	Shows how to build an app plugin with its own backend
app-with-extensions	Shows how to build an app plugin that extends the Grafana core UI
app-with-extension-point	Shows how to add an extension point in the plugin UI that can be extended by other plugins
app-with-scenes	Shows how to build a basic app with @grafana/scenes
app-with-service-account	Shows how an app can request a service account to query the Grafana API.
app-with-rbac	Shows how to use role-based access control (RBAC) in an app plugin

Panel plugins

Example	Description
panel-frame-select	Shows how to update panel options with values from a data query response.
panel-basic	Shows how to build a panel plugin that uses the time series graph from @grafana/ui to read and update the dashboard time range.
panel-datalinks	Shows how to build a panel plugin that uses the datalinks functionality of Grafana.

Data source plugins

Example	Description
datasource-http	Shows how to query data from HTTP-based APIs. The HTTP call happens on the frontend.
datasource-http-backend	Shows how to query data from HTTP-based APIs, where the HTTP calls happens on the backend. Supports alerting.
datasource-streaming-websocket	Shows how to create an event-based data source plugin using RxJS and WebSockets.
datasource-streaming-backend-websocket	Shows how to create an event-based data source plugin using backend streams.
datasource-basic	Shows how to build a basic data source plugin.

Note

The plugin examples in this repository use NPM to manage frontend dependencies. Whilst you are welcome to copy these examples and use Yarn or PNPM instead, we offer no support for them.

Integration tests

Some of the examples in this repository contain integration tests that make use of @grafana/plugin-e2e package. These tests can be run individually by navigating to the example plugin and running one of the following commands:

• npm run e2e - run Playwright e2e tests

Testing against latest versions of Grafana

The GitHub workflow .github/workflows/integration-tests.yml finds all plugin examples identified by the existence of src/plugin.json. For every example plugin build scripts will be run to confirm the plugins can be built against intended and canary NPM packages. Any example plugin that has a cypress directory defined will run the following:

1. Build the plugin with the provided version of Grafana packages and test against the provided version of Grafana
   • asserting the plugin works with its expected versions
2. Build the plugin with the provided version of Grafana packages and test against the latest version of Grafana
   • asserting the plugin can run with the packages provided by the latest Grafana core
3. Upgrade all Grafana NPM packages to the latest version and test against latest version of Grafana
   • asserting the plugin can still build with the latest Grafana NPM packages

Using the examples as the base for your plugins

All of the examples use grafana/create-plugin instead of @grafana/toolkit.

You can read more about customizing and extending the base configuration in our documentation.

API Compatibility

If your plugin uses TypeScript, then you can use @grafana/levitate to test if the Grafana APIs your plugin is using are compatible with a certain version of Grafana.

For example, to see a compatibility report of your plugin code and the latest release of the grafana APIs, use:

npx @grafana/levitate@latest is-compatible --path src/module.ts --target @grafana/data,@grafana/ui,@grafana/runtime

You may also specify a target version:

npx @grafana/levitate@latest is-compatible --path src/module.ts --target @grafana/[email protected],@grafana/[email protected],@grafana/[email protected]

The following GitHub workflow example can be used in your project to keep an eye on the compatibility of your plugin and the grafana API.

If you host your project in GitHub and want to use GitHub Actions, then you could create a new file in your project in .github/workflows/levitate.yml and add the following content:

name: Compatibility check
on: [push]

jobs:
  compatibilitycheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Build plugin
        run: npm run build
      - name: Compatibility check
        uses: grafana/plugin-actions/is-compatible@v1
        with:
          module: './src/module.ts'
          comment-pr: 'yes'
          fail-if-incompatible: 'no'

This runs a compatibility check for the latest release of Grafana plugins API in your project every time a new push or pull request is open. If it finds an error you will see a message indicating you have an incompatibility.

Sometimes incompatibilities are minor. For example, a type changed but this doesn't affect your plugin. We recommend that you upgrade your Grafana dependencies if this is the case so you always use the latest API.

grafana-plugin-examples's Issues

Docs: Improve documentation for the examples

This is an Epic issue where we track progress of which examples has proper documentation. @leventebalogh has written a really good documentation for the basic app example, so please use that as reference when adding documentation to an example.

#125 (comment)

Add query data error handling to datasource-http example

After merging grafana/grafana-plugin-sdk-go#544 we should include query data error handling in datasource examples. Similar to #108

An example of a core plugin that needs to improve it's error handling to work properly with 207 responses:

• https://github.com/grafana/grafana/blob/main/public/app/features/plugins/sql/datasource/SqlDatasource.ts#L167
• Currently the "save & test" will be "green" / "ok" even if the database responds with an error grafana/grafana#48975

docs: improve visibility of plugin examples

WIP

Potential areas where we could highlight this more:

• Office hours
• Slack channel descriptions / pinned topics
• https://community.grafana.com/c/plugin-development/30
• https://grafana.github.io/plugin-tools/
• https://grafana.github.io/plugin-tools/docs/creating-a-plugin
• https://grafana.github.io/plugin-tools/docs/advanced-configuration
• https://github.com/grafana/plugin-tools (readme)
• Move higher up in https://grafana.com/docs/grafana/latest/developers/plugins/

Modify examples README.md to use the following format `^# Grafana (Panel|Data Source|Data Source Backend) Plugin Template`

The README.md file should follow this format

^# Grafana (Panel|Data Source|Data Source Backend) Plugin Template

the plugin validator relies on this format to identify readme files that were not modified with plugin submissions.

Show query editor help as example of best practice

/docs/grafana/latest/developers/plugins/add-query-editor-help/

docs: move run instructions to main repo readme

Avoids duplicate content, ensures can be discovered, individual examples can reference this section as required

Examples: setup infrastructure for running tests in examples

Description

We need to setup a shared infrastructure that will run the integration tests for each example against latest and next release of Grafana.

Below is a suggestion on how to run the examples.

For each example:

• Start Grafana in a docker container and pre-install the plugin we want to test.
• Provide a test dashboard/configuration via provisioning.
• Run integration tests written for the example against the Grafana instance running in docker.

Things to consider

Each examples integration tests should:

• Build with the provided version of Grafana packages and test against provided version of Grafana
  (to assert the plugin works with its expected versions)
• Build with the provided version of Grafana packages and test against latest version of Grafana
  (to check if we can run with latest packages provided by Grafana core)
• Build with the latest version of Grafana packages and test against latest version of Grafana
  (to check if we can update the Grafana packages in the plugin example)

Tasks

• Scaffold infrastructure for integration testing (#44)
• Integration tests for basic panel that verifies that the features that being used from Grafana plugin API is working as expected. (#55)
• Integration tests for basic datasource that verifies that the features that being used from Grafana plugin API is working as expected. (#45)

Reopening websocket connection

How can the websocket plugin handle when a websocket is closed and reopened...without reloading the grafana panel?
Simply calling query() again doesn't seem to continue populating the chart. I feel like I need to reload the DataSource instance.
I'd like it to work similar to when you change the time range option at the top.

Example: how to support template variabels in panels

When building a panel you should use the replaceVariables function instead of using the templateSrv directly. The main reason for this is to get proper support for template variabels when repeating the panel based on a template variable.

We should add an example show casing this along side of documentation highlighting what additional scenarios the panel will support by using this function.

For more information see the following PR and issue.

grafana/grafana-iot-twinmaker-app#188

Examples: datasource with support for annotations

Description

Create a plugin that contains a datasource with backend that returns static data regardless of the query parameters. This should be an example of how to create datasource that supports annotations.

It can use the: https://github.com/grafana/plugins-examples/issues/1 as a base but enhance it with support for annotations.

Tasks

• A annotations query editor.
  • Showcase how to use the grafana-ui form components.
• A datasource with backend
  • Showcase how to support annotations.
• Integration tests that verifies that the features that being used from Grafana plugin API is working as expected.

Examples: make them up-to-date with the latest scaffolding version

• grafana/plugin-tools#10
• grafana/plugin-tools#12 for updating a previously scaffolded plugin to the latest version
• Update plugin examples
  • Update app-basic (PR)
  • Update datasource-basic (PR)
  • Update datasource-http (PR)
  • Update datasource-streaming-websocket (PR)
  • Update panel-basic (PR)
  • Update panel-flot (PR)
  • Update panel-frame-select (PR)
  • Update panel-plotly (PR)
  • Update panel-scatterplot (PR)
  • Update panel-visx (PR)

Links leading to old `@grafana/toolkit` way

There are some links for example:

https://github.com/grafana/grafana-plugin-examples/tree/main/examples/datasource-basic#learn-more

which currently points to old @grafana/toolkit way https://grafana.com/tutorials/build-a-data-source-plugin/

instead of new way

https://github.com/grafana/plugin-tools

streaming-websocket unclear

As a beginner, I do not make it work.

streaming-websocket-plugin is set as a "panel" in the plugin.json, it should be "datasource" ?

Even I put "datasource" in plugin.json and it is added as datasource in the datasource manager of grafana. Once on creates a new panel, grafana cannot choose it in the data sources combobox.

What did I miss ?

Example app plugin for `PluginPage` + `topnav`

I've recently updated to latest 9.4 toolkit
https://grafana.com/docs/grafana/latest/developers/plugins/migration-guide/#from-version-93x-to-94x

But I'm really struggling to work out how to wire up the PluginPage to work with topnav. Suggest updating/adding an example in this repo to align with the latest docs

In the short term are there any other open source projects that have already implemented the new PluginPage pattern that could be used as a reference?

Thanks!

datasource-streaming-websocket failed to generate `provisioning` folder

datasource-streaming-websocket seems not working.
I tried panel-basic, datasource-http which both work to me.

Here is my step based on the readme.

1. Start the WebSocket server

   cd websocket-server
   yarn install
   yarn dev

2. Build the data source plugin

   cd streaming-plugin
   yarn install
   yarn dev

3. Start Docker

   docker-compose up

However, after all three terminals running, it shows "No results found" in the dashboard page:

Any idea? Thanks!

Problem Running examples/datasource-basic

Hi,

first of all, this is a very cool projekt. I've tried the basic examples for a datasource plugin, but it seems the code is not working.

My findings:

Current pipeline seems to not compile the ts-files into the dist directory (grafana Webseite answers plugin with 404 - module.js not found)

Maybe there are some changes to the BuildPipeline

If somebody can give me a hint according the pipeline i can try to fix it.

(PS : it does not work with npm an yarn)

Thx for your great work

Andreas

Examples: panel that visualize time series data

Description

Create a plugin that contains a panel with custom configuration. This should be an example of how to create a basic panel without any advance functionality.

Tasks

• Panel plugin
  • Showcase how add custom configuration for panel.
  • Showcase how use custom configuration in panel.
  • Showcase how to use grafana-ui time series visualization.
  • Showcase how to update time range for dashboard programmatically from panel.
  • Showvase how to read time range from dashboard.

Build: run plugin examples tests every hour

To catch issues introduced in Grafana that might affect plugins we should run the plugin examples tests every hour.

WebSockets: Test datasource with ping/pong

I think it looks good, but ping/pong can be used as datasource test.

EPIC: update samples for Grafana 10

With the upcoming release of Grafana 10, we should ensure that our samples are up to date and ready for plugin developers to consume.

Tasks:

• Assess current examples to identify any significant changes required and update this task list accordingly
• Branch at v9 as per @mckn 's suggestion (Marcus please add details here)
  • Update readme to make this easy to discover
  • Clean up redundant branches
  • Confirm no examples should be deprecated rather than updated
• Ensure all are using latest go sdk including updating dependabot configuration to automatically do this with future releases
• Update dependencies
• Update actions in ci.yml files
• Add an example of using a UI extension in an App Plugin to the docs (https://github.com/grafana/grafana-plugin-examples/tree/main/examples/app-with-extension-point)
• ...

Use grafana/ui components in examples rather than referring to gf class names

Use grafana/ui components in examples rather than referring to gf class names. Below an example that are using gf-classes and should be able to use forms components:

grafana-plugin-examples/examples/datasource-http-backend/src/components/ConfigEditor.tsx

Lines 14 to 22 in a57c63c

	<div className="gf-form-group">
	<div className="gf-form">
	<DataSourceHttpSettings
	defaultUrl="http://127.0.0.1:10000/metrics"
	dataSourceConfig={options}
	onChange={this.props.onOptionsChange}
	/>
	</div>
	</div>

Show example of anonymous usage reporting

https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/add-anonymous-usage-reporting

Basic App Plugin: add integration tests

Add integration tests that verify that the features that being used from Grafana plugin API are working as expected.

Examples: App plugin that only bundles other plugins

There are app plugins that only function as a bundle of other plugins, dashboards etc. If we still want to support this long term it would be a good idea to show case how that could be done.

datasource-http-backend: improve error handling

datasource-http-backend is using the same example error handling code as the datasource-basic.

Since the http backend example actually connects to an external service to fetch data, it would be nice to add proper error handling rather than an example one.

For example:

• 502 when remote service is unreachable
• 504 when the remote service times out
• ...

App: add an example with dashboards

What we would like to achieve?

We would like to have a separate example that shows how to ship and register dashboards using an app plugin.
We have decided with @jackw that we would create a separate example for this rather than including it into the Basic App example, basically to keep the examples more "single purpose" and easier to reason about.

Examples: Add example for how to implement web socket (backend + frontend) support in your plugin.

The current example for the datasource-streaming-websocket is implemented as a frontend only datasource plugin with an external backend. I don't think it is a useful example which is also highlighted in the following issue (#2).

There are also a couple of drawbacks with this approach when it comes to security since credentials to the external backend will be available in the browser.

What would have been better is to write an example where we show case how to push data from the backend part of the plugin to the frontend part. This example would be applicable for everyone trying to write a datasource plugin to any event based source.

Add query data error handling to backend examples

After merging grafana/grafana-plugin-sdk-go#544 we should include query data error handling in backend examples

Oauth example

Hello,

I like an working example to understand how to add Add a OAuth 2.0 proxy route to your plugin

I forked and started an example here: https://github.com/skiarn/grafana-plugin-examples/tree/example/oauth/examples/datasource-http-oauth

Main changes see plugin.json:
"routes": [ { "path": "api", "url": "{{ .JsonData.defaultUrl }}/v1", "headers": [ { "name": "Authorization", "content": "Bearer {{ .SecureJsonData.apiKey }}" } ] }, { "path": "api", "url": "{{ .JsonData.defaultUrl }}/v1", "tokenAuth": { "url": "{{ .JsonData.defaultUrl }}/token", "params": { "grant_type": "password", "username": "{{ .SecureJsonData.basicAuthUser }}", "password": "{{ .SecureJsonData.basicAuthPassword }}" } } } ]

How to make a working example? All I get is a 401 from remote server, how do I verify grafana managed to make an access_token exchange?

Remove screenshots from e2e2 and docker requirement

Our e2e tests currently use screenshots to check the panels inside a grafana instance.

Currently the e2e tests run inside a cypress docker instance. This is to prevent inconsistencies between OSs image rendering for screenshot testing.

We should remove these screenshots tests replacing them with checks for specific dom elements inside the panel and remove this cypress docker requirement.

CC @leventebalogh @jackw

Chore: Migrate examples to use NPM

Yarn 1 is deprecated and nearing end of life. Most bugs that are present in the current yarn 1 version were "fixed" in yarn 2+.

We could move to yarn berry but without enabling PnP I'm not sure it will bring us any benefits over NPM and as this repo contains multiple NPM projects (rather than a monorepo) it will mean each example gets a copy of yarn berry which we need to maintain. PNPM could be an alternative but it would likely require more time setting various hoist patterns than moving to NPM.

NPM however is available with Node and the migration should be relatively painless (npm install --legacy-peer-deps).

Unable to add icon to side nav menu item while developing app plugin

I'm creating an app plugin following the example app-basic at https://github.com/grafana/grafana-plugin-examples/tree/main/examples/app-basic

I have used "icon": "cog" in the includes section in plugin.json for a menu item but the icon did not show up. Here is my plugin.json

{
"$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
"type": "app",
"name": "Another Navigation",
"id": "side-nav-app",
"info": {
"keywords": ["basic", "app", "example"],
"description": "A basic side nav app plugin",
"author": {
"name": "Your name"
},
"logos": {
"small": "img/logo.svg",
"large": "img/logo.svg"
},
"screenshots": [],
"version": "%VERSION%",
"updated": "%TODAY%"
},
"includes": [
{
"type": "page",
"icon": "cog",
"name": "Reports",
"path": "d/1B03Q_F4k/reportee-coverage-details?orgId=1",
"role": "Admin",
"addToNav": true,
"defaultNav": false
}
],
"dependencies": {
"grafanaDependency": ">=9.2.1",
"plugins": []
}
}

Here the configuration item has an icon which is what I'm trying to achieve.

My grafana version is 9.2.0. I have tried in the latest version too and it remains the same.

Switch to secureJsonFields for `app-with-backend` example (reference)

Introduced in grafana/grafana#55313

Goal of this task is to switch to using secureJsonFields in https://github.com/grafana/grafana-plugin-examples/tree/main/examples/app-with-backend

You can reference to the PR linked for an example of what to change.

Example: how to implement template variable support in data source

The available method on the datasource plugin class is marked as deprecated. Without any examples or documentation on alternative approaches. We should provide some examples covering the different ways of adding a template variable support to data sources.

This is how you add the variable support to the data source:
https://github.com/grafana/grafana/blob/main/public/app/plugins/datasource/grafana-testdata-datasource/datasource.ts#L37

This is an example of how you implement the standard variable support:
https://github.com/grafana/grafana/blob/main/public/app/plugins/datasource/grafana-testdata-datasource/variables.ts

StandardVariableSupport = Extend this class in a data source plugin to use the standard query editor for Query variables
CustomVariableSupport = Extend this class in a data source plugin to use a customized query editor for Query variables
DataSourceVariableSupport = Extend this class in a data source plugin to use the query editor in the data source plugin for Query variables

Examples: Create an App that showcases how to use AppPluginPage

We should introduce an example that highlights how to use the new AppPluginPage component.

How to configure plugin to get alerting rules from datasource

We are developing our data sources and have a problem loading alerting rules from the data source.
If you click on alerting -> alerting rules request from our data source implementation goes to api/prometheus/grafana/api/v1/rules, but if you choose prometheus or loki as data source, it sends the requests to the
api/prometheus/{datasource_id}/api/v1/rules.

In our datasource implementation, we can't load any rule, but from prometheus, it can be loaded.

I have tried to use an example, but it works the same.

Can you help or advise on correctly implementing or enabling handlers for alerting rules from grafana to backend datasource?

Not able to build the plugins on Windows

What happened?

I am trying to build and test app template plugins (app-with-datasource) but I am not able to do that.
I am able to build the backend, but the UI I am not able to.

[app-with-backend][master] > yarn build
yarn run v1.22.19
warning ..\..\..\..\..\..\package.json: No license field
$ webpack -c ./.config/webpack/webpack.config.ts --env production
assets by path *.md 195 bytes
  asset README.md 143 bytes [compared for emit] [from: README.md] [copied]
  asset CHANGELOG.md 52 bytes [compared for emit] [from: ../CHANGELOG.md] [copied]
asset LICENSE 11.1 KiB [compared for emit] [from: ../LICENSE] [copied]
asset img/logo.svg 1.55 KiB [compared for emit] [from: img/logo.svg] [copied]
asset plugin.json 1.05 KiB [emitted] [from: plugin.json] [copied]
webpack 5.88.2 compiled successfully in 12708 ms
Done in 19.27s.

I don't see the ts/x files getting compiled and exported as module.js

Environment (with versions)?

Platform: Windows 10
Node: 18.16.0
Go: 1.19.5 windows/amd64

Add support for node 18

Due to some example's dependencies when you run yarn it fails due to an incompatible engine

App plugin first hover doesn't show dropdown menu

On first hover the options don't show (gif attached):

What happened:
Only highlight no options

What you expected to happen:
Highlight and display of the dropdown menu even on the first try

How to reproduce it (as minimally and precisely as possible):
clone the grafana plugin repo
Run the app-with-dashboards example (I used yarn but had the same issue when trying with npm).
After selecting one of the dashboards hover over the app icon for the first time -> no options
Move away and back on -> options shown

Environment:

• Grafana version: 9.3.6 - same issue on 9.2.5
• OS Grafana is installed on: Windows 10
• User OS & Browser: Mozilla Firefox, Chrome & MS Edge all have the same issue

Features we need to cover in more examples

I add these notes here for future work on more examples:

• How to handle nested plugins
• How to setup provisioning of apps/datasource
• How to convert data into dataframes so it can be visualized
• How to publish app events
• How to migrate configuration/data between versions
• Include predefined dashboards

app plugin as middleware or auth

I am planning to create such plugin, but I want a lookup and thought from an expert.

Plugin should be capable of handling authentication - (maybe create a boilerplate to handle any custom authentication)
Plugin should be able to act as a middleware - for example to handle authorization.

This will require small change in grafana I know but what do you guys think of this?

Update readme to explain the examples use create tool

app-basic: Plugin missing module.js when attempting to bundle plugins

The webpack config in app-basic is nice as it does string substitution, but I suspect a lot of people will be trying to build an app so they can bundle plugins and unfortunately the webpack config doesn't build subfolders correctly and you get this when trying to load:

 Plugin missing module.js

The error is quite correct, there is no module.js in the subfolder, and grocking the dist folder it looks like my plugin wasn't even included in the app.

I'm definitely no webpack expert so I had to revert the scripts back to grafana-toolkit to get it to work:

"scripts": {
"build": "grafana-toolkit plugin:build",
"test": "grafana-toolkit plugin:test",
"dev": "grafana-toolkit plugin:dev",
"watch": "grafana-toolkit plugin:dev --watch",
"sign": "grafana-toolkit plugin:sign",
"start": "yarn watch",
"wbuild": "webpack -c ./webpack/webpack.prod.conf.js",
"wdev": "webpack -w -c ./webpack/webpack.dev.conf.js",
"wtest": "jest --watch --onlyChanged",
"test:ci": "jest --maxWorkers 4",
"typecheck": "tsc --noEmit",
"lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
"lint:fix": "yarn lint --fix"
},

Thanks,
Paul

Create plugin example to showcase CollectMetrics feature

Create a backend plugin example to showcase how to use CollectMetrics feature to define plugin-specific metrics that can be collected from Grafana via /metrics/plugins/plugin_id.

Use the default registry provided by the Prometheus go instrumentation library to collect metrics.

Examples: app with several pages

Related pull request(s): #26

Description

Create a plugin that contains an app with several pages. This should be an example of how to create a basic app without any advance functionality.

Tasks

• Root page with routing (Done in #26)
  • Showcase how create page with tabs.
  • Showcase how create page without tabs.
  • Showcase how create full width page.
  • Showcase how to navigate between pages.
• Configuration page. (Done in #26)
  • Showcase how to manage secrets e.g. API keys etc.
  • Showcase how to use the form components.
• #53 (Done in #92)

Examples: how to implement annotations support in data source plugin

Based on a question in the community channel we should add an example that show case how to add annotations support in a data source plugin.

Add unit tests to GH Actions

Caveat: only two examples have unit tests. Running tests with no tests would result on an error.

Examples: datasource with backend

Description

Create a plugin that contains a datasource with backend that returns static data regardless of the query parameters. This should be an example of how to create a basic datasource without to advance functionality.

Tasks

• A configuration editor.
  • Showcase how to use the grafana-ui form components.
  • Showcase how to configure credentials/secret information.
  • Showcase how to configure regular settings.
• A query editor.
  • Showcase how to query support data used in the editor.
  • Showcase how to use the grafana-ui form components.
  • Showcase how to support template variables.
• A datasource with backend
  • Showcase how to support template variables/macros.
  • Showcase how to query data.
• Integration tests that verifies that the features that being used from Grafana plugin API is working as expected.

Remove usage of `LegacyForms` from examples

Many examples use LegacyForms to construct the query editor and configuration UI. We should instead use the grafana/ui forms available https://developers.grafana.com/ui/canary/index.html?path=/docs/forms-form--basic

Tasks

Beta Give feedback

1. update datasource-http
2. update datasource-basic
3. udpate datasource-streaming-websocket

Examples: Add example for how to do a simple http-datasource (with backend)

The current example for the http-datasource is implemented as a frontend only datasource plugin. This is something we support but I'm not sure we should provide this as an example. Writing a datasource plugin like this has a couple of drawbacks:

1. You won't be able to support alerting since those queries needs to be executed in the backend.
2. If you need to send requests to an API that requires some kind of credentials they will be available in the browser.
3. You won't be able to support expression queries since those are executed in the backend.

With that said I think we should add another example as a datasource plugin with a backend. Maybe update the readme for the current http-datasource example where we highlight when it is applicable to use a frontend-only datasource and what drawbacks it has.