Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://grafana.com/developers/plugin-tools/how-to-guides/app-plugins/add-backend-component below:

Add a backend component to an app plugin

A backend component for an app plugin allows you to extend the app plugin for additional functionality such as custom authentication methods and integration with other services.

The following are typical use cases for backend components in app plugins:

• Use custom authentication methods that aren't supported in Grafana
• Use authorization checks that aren't supported in Grafana
• Run workloads on the server side
• Connect to non-HTTP services that normally can't be connected to from a browser

Install the following prerequisites before adding a backend component:

• Go (Version)
• Mage
• LTS version of Node.js
• Docker

The Grafana create-plugin tool is a CLI application that simplifies Grafana plugin development, so that you can focus on code. The tool scaffolds a starter plugin, all the required configuration, and a development environment using Docker Compose for you.

1. In a new directory, create a plugin from a template using the create-plugin tool. When prompted for the kind of plugin, select app and answer yes to "Do you want a backend part of your plugin?":

   npx @grafana/create-plugin@latest
   

2. Go to the directory of your newly created plugin:

3. Install the dependencies:

4. Build the plugin frontend:

5. In a new terminal window, build the plugin backend:

6. Start Grafana:

7. Open Grafana, by default http://localhost:3000, and then go to Administration > Plugins. Make sure that your app plugin is there.

You can also verify that Grafana has discovered the plugin by checking the logs:

INFO[01-01|12:00:00] Plugin registered       logger=plugin.loader pluginID=<your-plugin>

The folders and files used to build the backend for the app are:

The plugin.json file is required for all plugins. When building a backend plugin, pay attention especially to these properties:

To learn more about adding authentication to your app plugin (for example, to call a custom backend or third-party API) and handling secrets, refer to Add authentication for app plugins.

Settings are part of the AppInstanceSettings struct. They are passed to the app plugin constructor as the second argument. For example:

src/app.go

func NewApp(ctx context.Context, settings backend.AppInstanceSettings) (instancemgmt.Instance, error) {
  jsonData := settings.JSONData 
  secureJsonData := settings.DecryptedSecureJSONData 
}

You can also get the settings from a request Context:

src/resources.go

func (a *App) handleMyRequest(w http.ResponseWriter, req *http.Request) {
  pluginConfig := backend.PluginConfigFromContext(req.Context())
  jsonData := pluginConfig.AppInstanceSettings.JSONData 
}

Here's how to add a ServeMux or CallResource endpoint to your app plugin.

Your scaffolded app plugin already has a default CallResource that uses ServeMux. It looks like this:

app.go

type App struct {
	backend.CallResourceHandler
}


func NewApp(_ context.Context, _ backend.AppInstanceSettings) (instancemgmt.Instance, error) {
	var app App

	
	
	
	mux := http.NewServeMux()
	app.registerRoutes(mux)
  
	app.CallResourceHandler = httpadapter.New(mux)

	return &app, nil
}

Now you can add custom endpoints to your app plugin.

The scaffolded code already contains a resources.go file with the registerRoutes function.

resources.go

func (a *App) registerRoutes(mux *http.ServeMux) {
	mux.HandleFunc("/myCustomEndpoint", a.handleMyCustomEndpoint)
}

func (a *App) handleMyCustomEndpoint(w http.ResponseWriter, r *http.Request) {
  
  
  w.Write([]byte("my custom response"))
  w.WriteHeader(http.StatusOK)
}

You can also add custom endpoints to your app plugin by adding a CallResource handler to your backend component directly. You must implement the logic to handle multiple requests.

app.go

func (a *App) CallResource(ctx context.Context, req *backend.CallResourceRequest, sender backend.CallResourceResponseSender) error {
	switch req.Path {
	case "myCustomEndpoint":
		sender.Send(&backend.CallResourceResponse{
			Status: http.StatusOK,
			Body:   []byte("my custom response"),
		})
	default:
		return sender.Send(&backend.CallResourceResponse{
			Status: http.StatusNotFound,
		})
	}
	return nil
}

You can also see the data sources documentation on resource handler which you can also apply to your app plugin.

To call your custom endpoint from frontend code, you can use the fetch function from getBackendSrv. For example:

import { getBackendSrv } from '@grafana/runtime';
import { lastValueFrom } from 'rxjs';

function getMyCustomEndpoint() {
  const response = await getBackendSrv().fetch({
    
    url: '/api/plugins/${PLUGIN_ID}/myCustomEndpoint',
  });
  return await lastValueFrom(response);
}

Ensure that Grafana has been started in development mode. If you are running Grafana from source, add the following line to your conf/custom.ini file:

note

If you don't have a conf/custom.ini file already, create it before proceeding.

You can then start Grafana in development mode by running make run & make run-frontend in the Grafana repository root.

If you are running Grafana from a binary or inside a Docker container, you can start it in development mode by setting the environment variable GF_DEFAULT_APP_MODE to development.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4