grafana / grafana-starter-app

Template for grafana app plugins

⚠️ Deprecated!

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

---

Grafana App Plugin Template

This template is a starting point for building Grafana App Plugins in Grafana 7.0+

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 app 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-app's Issues

App or plugin sample to send data from Grafana to arduino

Hello can you help In a sample code for that purpose?

Thank you in advance

Unable to add react pages to the side navigation bar

Hi,

I built the sample react app plugin and used as an external plugin. When I am using this, I can only see the old angular page in the side navigation bar and not the 2 react pages. How can I add these react pages to plugin.json so that it will work from the side navigation bar?

grafana-toolkit "command not found" when using "yarn dev"

To get "yarn dev" to work, I added grafana-toolkit (currently under alpha) to the package dependencies with

yarn add @grafana/toolkit

After that I was able to successfully compile the typescript code with the commands specified in package.json

Enabling application

HI,

I have a problem with activating this plugin. I can build, the plugin but after I navigate to custom routes I get the error message "Application Not Enabled".

I can't figure out how to enable the plugin. (I can't see the enable button in the list of all plugins)

Can someone help me with it?
Thanks.

Missing singlestat2 plugin with Grafana v6.6.0

Tested with Grafana 6.6.0-ubuntu

Steps to reproduce:

• Enable 'Simple App' on plugins page
• Go to the 'stats' dashboard

Looks like 'singlestat2' has been renamed to 'singlestat' some time ago:
grafana/grafana#20651

Live editing the dashboard to use 'singlestat' instead seems to be fixing the issue.

How to build grafana-simple-apps

Hello.

I tried build grafana-app-plugin but a problem has arisen..

I don't know reason. Judging from the code, I think it's right.

I use this commands
yarn install
yarn dev

[tsl] ERROR in C:\Source\simple-app-plugin\src\module.ts(9,3)
TS2322: Type 'typeof ExamplePage2' is not assignable to type 'ComponentClass<PluginConfigPageProps<GrafanaPlugin<PluginMeta<KeyValue>>>, any>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'PluginConfigPageProps<GrafanaPlugin<PluginMeta<KeyValue>>>' is not assignable to type 'Props'.
Types of property 'plugin' are incompatible.
Type 'GrafanaPlugin<PluginMeta<KeyValue>>' is missing the following properties from type 'AppPlugin': init, setRootPage, setComponentsFromLegacyExports

I would appreciate your help.

Angular example page fails to load with Grafana v6.6.0

Tested with the Grafana docker tags 6.6.0 and 6.5.0

Problem: When clicking on the 'Angular Page' link on the left rail (/plugins/yourorg-simple-app/page/angular-page), the page fails to load in Grafana v6.6.0.

Steps to reproduce:

• Enable 'Simple App' on plugins page
• Click the 'Angular Page' link from the 'Simple App' menu on the left rail

The page seems to work with Grafana v6.5.0.

Any help would be much appeciated. Thanks. I am trying to develop a Grafana app-type plugin with Angular.

Tutorial link not found

https://grafana.com/tutorials/build-a-app-plugin
the link above isn't working

it also isn't in https://grafana.com/tutorials/

how to change route

hey i am trying to change route but cant able to change the route it still shows a/yourorg-simple-app/ like this

Failed to find exported plugin component for app-page-yourorg-simple-app-root-page-react

When deploying this plugin to a local grafana (master) version, the main entry page

http://localhost:3000/plugins/yourorg-simple-app/page/root-page-react

is unable to render but displays in the javascript console:

Plugin component error: "Failed to find exported plugin component for app-page-yourorg-simple-app-root-page-react" (plugin_component.ts:265)

Save app configuration

Hi
I'm trying to make a plugin app for Grafana.
I'd like to have some configuration options.
I already created a configuration component with all the form field I need, but now one question remains. How can I save the configuration specified by the user ?

Any ideas, or suggestions on how I can achieve that ?

Unable to display react page content when accessing it

I modified the code to set the root page to the react "ExampleRootPage" instead of the legacy AngularExamplePageCtrl.

To do so, I added the page entry to includes array:

"includes": [
    {
      "type": "page",
      "name": "React Page",
      "component": "ExampleRootPage",
      "role": "Viewer",
      "addToNav": true,
      "defaultNav": true
    },
...

and in module.ts:

export {
  ExampleConfigCtrl as ConfigCtrl,
  // AngularExamplePageCtrl,
  ExampleRootPage // Must match `pages.component` in plugin.json
};

export const plugin = new AppPlugin<ExampleAppSettings>()
  .setRootPage(ExampleRootPage)

We can see the page in the left panel after enabling the plugin, however, when we try to display the content of the page, we have the following error in console:

in ChangeTracker.ts:6
Plugin component error Error: [$injector:unpr] Unknown provider: propsProvider <- props
http://errors.angularjs.org/1.6.9/$injector/unpr?p0=propsProvider%20%3C-%20props
    at angular.js:116
    at angular.js:4887
    at Object.s [as get] (angular.js:5047)
    at angular.js:4892
    at s (angular.js:5047)
    at u (angular.js:5072)
    at Object.invoke (angular.js:5098)
    at M.instance (angular.js:11076)
    at it (angular.js:9926)
    at angular.js:9248

Do you know why ? And do you have a workaround to develop simple react pages ?

Note: config pages are working correctly.

Navigation: `appUrl` should be used instead of stripping the leading slash

See: https://github.com/grafana/simple-app-plugin/blob/master/src/ExampleRootPage.tsx#L15

const pathWithoutLeadingSlash = path.replace(/^\//, '');