grafana / grafana-starter-datasource

A starter for Grafana data source plugins

⚠️ Deprecated!

This repository is deprecated.
A more up-to-date version of examples is available here: https://github.com/grafana/grafana-plugin-examples

---

Grafana Data Source Plugin Template

This template is a starting point for building Grafana Data Source Plugins

What is Grafana Data Source Plugin?

Grafana supports a wide range of data sources, including Prometheus, MySQL, and even Datadog. There’s a good chance you can already visualize metrics from the systems you have set up. In some cases, though, you already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Grafana Data Source Plugins enables integrating such solutions with Grafana.

Getting started

1. Install dependencies

   yarn install

2. Build plugin in development mode or run in watch mode

   yarn dev

   or

   yarn watch

3. Build plugin in production mode

   yarn build

Learn more

• Build a data source plugin tutorial
• Grafana documentation
• Grafana Tutorials - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
• Grafana UI Library - UI components to help you build interfaces using Grafana Design System

grafana-starter-datasource's Issues

Replace use of `LegacyForm` in UI components

I have been working through the excellent Build a Datasource Plugin tutorial. One thing that I have found confusing is the use of the LegacyForm in the react components used in the tutorial. I am seeing these used in two places:

• QueryEditor
• ConfigEditor

I have wanted to extend my forms to be more complex but I have been unable to find any documentation for how the LegacyForms are supposed to be used. I have found excellent documentation about the next generation of the UI components. I am assuming that an update to something more like what we see used in the VariableQueryEditor of the Add support for variables tutorial would be the right thing to do here. I think I could replicate much of what is found in this QueryEditor.

Is there any context that I am missing around the use of the LegacyForms here? Would a PR with updates be welcome?

Thanks for the tutorials and the project generator, they have both been super helpful. :)

Demonstrate usage of variables

Please demonstrate the idiomatic way of using template variables. Existing datasources (including the "reactified" builtins) use templateSrv, which doesn't appear to be in @grafana/ui (yet?).

Thank you!

Error: [$injector:unpr] Unknown provider

Hi,

I'm running Grafana 7.4.2 locally.

I've built a data source plugin using grafana-starter-datasource. I pointed Grafana to its dist folder.

Grafana's defaults.ini:

# Directory where grafana will automatically scan and look for plugins
plugins = C:\src\grafana-starter-datasource\dist

When I run yarn watch, everything works fine.

However, when I run yarn build (in order to build a plugin to install to remote Grafana server), my data source stops working:

FooBar Datasource plugin failed
Error: [$injector:unpr] Unknown provider: tProvider <- t http://errors.angularjs.org/1.6.9/$injector/unpr?p0=tProvider%20%3C-%20t

This seems to be because of minification.

Unminified (208 KB), result of yarn watch - works:

Minified (39 KB), result of yarn build - doesn't work:

I noticed this happening only recently.

My dependencies (package.json):

{
  "name": "simple-datasource",
  "version": "1.0.0",
  "description": "Grafana Data Source Plugin Template",
  "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"
  },
  "author": "Grafana Labs",
  "license": "Apache-2.0",
  "devDependencies": {
    "@grafana/data": "7.4.2",
    "@grafana/runtime": "7.4.2",
    "@grafana/toolkit": "7.4.2",
    "@grafana/ui": "7.4.2",
    "@testing-library/jest-dom": "5.4.0",
    "@testing-library/react": "^10.0.2",
    "@types/lodash": "latest",
  },
  "dependencies": {
    "grafana": "^1.0.1"
  }
  "engines": {
    "node": ">=14"
  }
}

Can't run template: LegacyForms is undefined

I've checked out master (9670d12), built it with yarn and yarn dev, and scp'ed it over to the grafana v6.7.3 plugins directory. Navigating to the plugin options or trying to add a datasource using the plugin results in the following error in the console:

Failed to import plugin module Error: "_grafana_ui__WEBPACK_IMPORTED_MODULE_2__.LegacyForms is undefined
  Evaluating http://dlt-monitoring-grafana-1.datto.lan/public/plugins/myorgid-simple-datasource/module.js
  Loading plugins/myorgid-simple-datasource/module"

yarn install fails

gyp ERR! stack Error: 'make' failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/xxx/yyy/plugin/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:365:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Linux 5.4.0-66-generic
gyp ERR! command "/home/xxx/.nvm/versions/node/v16.0.0/bin/node" "/home/xxx/zzz/plugin/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/xxx/yyyy/plugin/node_modules/node-sass
gyp ERR! node -v v16.0.0
gyp ERR! node-gyp -v v3.8

See error message above