cloudspout / cloudspout-button-panel

Grafana panel to integrate with any kind of HTTP/REST API

Button Panel

It provides a simple Grafana 7.x panel that shows only one button - to integrate with any kind of HTTP/REST API:

• Support GET and POST HTTP verb
  • Adds no new javascript dependencies
  • Uses standard browser APIs and respects CORS
  • Optional text payload for POST requests via syntax-highlighiting editor
• Support for custom header parameter or query parameter
• Variable support via $variableName in
  • URL
  • Header/Query parameter name & value
  • POST body payload
  • Button label
• Support for HTTP Basic Auth
• Custom label text & Grafana template design
  • Customize icon & button colors

Usage

Configuration

Basic Auth

⚠️ Please note: ⚠️

Due to the Grafana API & security restrictions in modern browsers the following must be considered before using Basic Auth:

• Neither username nor password are stored encryted in Grafana. The password is there to everyone with access to the dashboard in Grafana!
• The server at the URL must provide proper resposne to the CORS pre-flight request. That is:
  • Provide a proper response to the OPTIONS request performed by the browser before the actual GET/POST requiest is issued
  • Provide a Access-Control-Allow-Credentials: true header
  • Provide a proper Access-Control-Allow-Origin header. No wildcards are allowed if credentials are used!

These limitations are inherent and canot be fixed or addressed by the plugin!

Use Basic Auth only if these limitations are acceptable!

Install

CLI

Via the Grafana CLI:

$ grafana-cli --pluginUrl https://github.com/cloudspout/cloudspout-button-panel/releases/download/7.0.23/cloudspout-button-panel.zip \
  plugins install cloudspout-button-panel

Docker

Use Grafana's environment variable to add this plugin to your installation:

$ docker run -p 3000:3000 -it \
  -e "GF_INSTALL_PLUGINS=https://github.com/cloudspout/cloudspout-button-panel/releases/download/7.0.23/cloudspout-button-panel.zip;cloudspout-button-panel" \
  grafana/grafana:7.3.1

Contributors ✨

Thanks goes to these wonderful people (emoji key):

raúl 🤔 💻

Jorge Villada 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

Icons made by Pixel perfect from www.flaticon.com.

ButtonPayloadEditor highly influenced from gapitio/gapit-htmlgraphics-panel.

cloudspout-button-panel's Issues

Signed Grafana release behind latest release

The latest available release in the Grafana plugin overview is 7.0.23.
There are some critical bug fixes and improvements in 7.0.25, which can currently not be used

New release for Grafana 8.2.3?

This is not working for the Grafana above v8.x.x
Do you have any plan to update this plugin?

Add possibility to send REST call via Grafana server (like datasources can)

Thanks for your work to create that plugin. Really helpful.

As far as i can see, the REST calls are only direct HTTP queries from browser to target server.
But sometimes the target server might not be reachable from browser, but only from Grafana server.

Unfortunately this is the case for my scenario (grafana server is dual homed).
However queries to the datasources can already be "proxied" via Grafana server (at least InfluxDB).

I would find such a option for your plugin very useful and appreciate such a feature.
I think this could be useful for others too.

Using:
cloudspout-button-panel 7.0.23
Grafana v7.3.4

Any variable that contains / ( slash) used in the URL is not encoded in final request

hello ,

when a variable that contains / ( slash) is used in the URL , it's not encoded

And so the final URL is not good

ENV
- Grafana version 7.3.4
- cloudspout-button-panel version 7.0.23

to reproduce just use a variable that contain / in the URL

can you please help resolving that ...

Thanks

Failed to fetch network ressource - grafana 8.5.0 & button panel v 7.0.23

I've tried to implement a simple button with a GET request to a http-endpoint in NODERD (local network) and I alway get an error message fron the button panel (Failed to fetch network ressource), that the network ressource cannot be fetched. But this is wrong - in NODERED the request will received correctly. The http endpoint in NODERED simply reply a "http-200" (nothing else). Grafana runs in a container. A fundamental network problem can be excluded, due to the fact, that my other data sources cann be reached without any problems (e.g. a INFLUX DB in an neighbor container and plugin sources in internet)

Post response

hello ,

how can we manage data response ( json ) of Post request

Thanks

ButtonPanel.tsx:171 Request error: TypeError: Failed to fetch

I'm quite new to the grafana env.
I've just set up a button to do a GET to an host inside my local network but when i press it in the console i receive

ButtonPanel.tsx:171 Request error: TypeError: Failed to fetch

In this case the request is done to
http://192.168.188.99/status

which is fully accessible via browser

Option to not execute a REST query

Would it be an idea to have an option to not send any REST query, so that it only does a mysql query.
A possible Use Case would be to press a button that only updates a mysql table entry. A process that monitors changes of this mysql table could trigger further actions.

Implementation of such an option may be possible to simply leave the URL of REST Integration empty:
If the url is not defined, it simply does not invoke any REST query.

Currently, when leaving the url empty, the button shows a rotating icon as if something is running but most likely is not.

Thanks in advance and kind regards.

Multiple buttons

Hi,

Thank you for this plugin.

Would it be hard to implement multiple buttons support in the same panel ?

Their ordering could be left-to-right or top-to-bottom and ideally they'd all have the same width/height in the same panel. Obviously, separate HTTP requests per button.

This would help getting rid of the panel title bar.
Thank you !

cloudspout-button-panel not save parameter

Hi. I installed cloudspout-button-panel plugin on grafana version7.3.6 in docker. After restart grafana. I put this panel on dashboard and input parameters like "deviceid" value is "1234" then press apply button. The system does not show this parameter when i edit this panel. Anyone please advice me how to fix.

Thank in advance.
Tony

CORS Issue - Request credentials mode always set to 'include'

We use this plugin to call pipeline triggers on our GitLab instance, these use simple requests, with an api token as a query parameter. Since updating Grafana to latest version we had to also update this button plugin (we couldn't see/edit any of the
Rest Integration settings of the panel).

After updating the plugin we get CORS errors when using our buttons:

Access to fetch at 'https://our-gitlab-server.com/api/v4/projects/###/trigger/pipeline?ref=master&token=######&variables' from origin 'https://our-cluster-domain.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

We checked the code and saw that it is defaulting to setting credentials: true, even when not using any form of auth. I am not versed in typescript to make the necessary changes and am not familiar enough with CORS policies and such but I thought this might be a cause to our problem?

cloudspout-button-panel/src/ButtonPanel.tsx

Lines 105 to 113 in f5777a1

	let fetchOpts: RequestInit = {
	method: options.method, // *GET, POST, PUT, DELETE, etc.
	mode: 'cors', // no-cors, *cors, same-origin
	credentials: 'include', // include, *same-origin, omit
	cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
	headers: requestHeaders,
	redirect: 'follow', // manual, *follow, error
	//referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
	};

Parametrisation of openhab2 switch item curl

Please how to parametrize in Grafana plugin CloudSpout Button Panel
according following openhab2 rest api statement:
curl --header 'Content-Type: text/plain' --request POST --data 'ON' 'http://openhabIP:8080/rest/items/BasicSwitch4' or curl -X POST --header "Content-Type: text/plain" --header "Accept: application/json" -d "OFF" "http://openhabIP:8080/rest/items/BasicSwitch4".

Version numbers:
Grafana 8.2.5, CloudSpout LLC Button Panel, Raspbian buster,

Running on RPi4 4GB

Thanks.

Button POST doesn't work with no params

I am not sure why but it seems I cannot trigger the POST button.
The ajax call is never triggered and an error is logged inside the console

Any hints ?

Edit: And when I try to add dummy parameters to make it work even so, they won't save properly.

Don't know what to do at this point

thanks !

Add posibility to sent PUT-requests with body, like POST

Many of method are used via PUT, e.x. https://docs.gitlab.com/ee/api/merge_requests.html#merge-a-merge-request

Error when installing the plugin

Grafana, for some reason, fails to install the plugin using the zip url.

To reproduce:

$> docker run -it --entrypoint sh grafana/grafana:7.0.3
/usr/share/grafana # grafana-cli --pluginUrl https://github.com/cloudspout/cloudspout-button-panel/releases/download/1.0.3/cloudspout-button-panel.zip plugins install cloudspout-button-panel
installing cloudspout-button-panel @
from: https://github.com/cloudspout/cloudspout-button-panel/releases/download/1.0.3/cloudspout-button-panel.zip
into: /var/lib/grafana/plugins

Error: ✗ failed to extract plugin archive: failed to extract file: failed to open file: open /var/lib/grafana/plugins/cloudspout-button-panel/img/logo.svg: no such file or directory

I fixed the issue by creating a new zip under linux and publishing it somewhere else:
zip -r cloudspout-button-panel.zip cloudspout-button-panel

I found out that if I do the same operation on a mac, I have the same error as above. Only zip created under linux seems to work.

Center Button vertically

Howdy.

This image pretty much shows my issue.
How to center the buttons vertically so i don't always accidentally press Grafana dropdown menu?
And shouldn't that by default be?

Could not Fetch

Hi,

I tried to make a post request using this button from Grafana cloud v8.4.3.
The post request is used to write point info to the Influxdb cloud, using its API.
To make sure that the problem is not from the Influxdb side, I have written a similar code that runs in Python and works alright.

url = "https://us-east-1-1.aws.cloud2.influxdata.com/api/v2/write?org='ORG’&bucket='BUCKET’&precision=ns" 
custom_header = {"Authorization":"Token ‘#token_value’",
                 "Content-Type": "text/plain; charset=utf-8"  }
data = "    #Arbitrary_DATA"
r = requests.post(url,data,headers=custom_header)

I have also contacted the Grafana support team to make sure that the "Failed to fetch" error is not because of their API. However, they suggested contacting the button panel team and seeking a solution.

The POST request works well for httpbin.org/post, but not for Influxdb requests.
I would appreciate your suggestions in this regard.

Ability to select the button orientation

provide options to choose if the button is centered, right or left

'Custom' variant option resets to 'Primary'

When I use 'Custom' variant, save my dashboard and reload the page, the variant option resets to 'Primary'.
Because Grafana doesn't save undefined values into json configs, it uses the defaultValue which is 'primary'.

What is the point of using undefined value instead of 'custom' str?

cloudspout-button-panel/src/module.ts

Line 107 in 743a01b

value: undefined,

Before calling REST API directly add a confirmation box before it [OK or Cancel]

We are calling REST API on button click. And we need to add confirmation box before it, which contains OK and Cancel button. When OK is clicked Call the REST API and on Cancel just cancel the request.

Use Case: Need to add confirmation Box when button is clicked instead of directly calling REST API.

Could you consider this as a feature request ?

Support Basic Auth (was: No chance to Connect to Node-Red on my Raspberry)

Hi,

use grafana-button-panel Version 7.03.
No GET-Action is possible.
The Node-Red Setup is already done.
curl -u node_red_xxxxx:pw_node_red_xxxxx -i -s localhost:1880/btn01 - works fine
curl node_red_xxxxx:pw_node_red_xxxxx@localhost:1880/btn01?wert=44 - works fine
http://node_red_xxxxx:[email protected]:1880/btn01 - works fine from a remote Browser

cloudspout-button-panel does literally nothing...
use grafana 7.1.0
basic auth for Node-Red Access is required.

Any Idea to get running the Button?
Or: What is the clean path to uninstall the button-panel?

Kind regards
runout

DELETE enhancement

hello,

The DELETE ( we have just GET/POST) can be added ?

Thanks

Pop Up enhancement

hello ,

it's possible to have a pop up to confirm the command ?

Thanks

Not able to skip tls check when dealing with https rest

Hello
Is there a way to skip tls check , in order to be able to deal with https rest witch is using an auto signed certificate
With https i'am getting net::ERR_CERT_AUTHORITY_INVALID
NB : tls check disabled is already implemented in other plugins
Thanks

Missing Panel Options in Grafana 7.3.1 / Panel Version 7.0.4

We cannot see the Panel Options in Grafana 7.3.1., Panel Version 7.0.4.
Only the Default Panel Options which are the same for all Panels are shown.

How can we fix this?

Button doesn't have any HTTP settings to configure

Hello

My Grafana version: 7.2
It seems all the HTTP settings are not there to configure ?
Here is a screenshot of the cloudspot button panel settings in my installation:

Did I miss anything ?
thanks !

"Cannot read property 'forEach' of undefined" after pressing the button

Expected Behavior

The same behaviour as on the gif in Readme. No errors in the console, sending the request and showing a check mark instead of the loading animation.

Current Behavior

JS throws an error "Cannot read property 'forEach' of undefined" after pressing the button with the same config as in the Readme file. The query is not sent and the button gets stuck with 'loading' animation

Environment

grafana:7.3.2
cloudspout-button-panel:7.0.7
chrome 86.0.4240.198 (mac)

Choice of icons & color

Hi

Me again.

Would it be possible to add a way for the user to choose the icon that shows on the left of the button ?
Maybe using fontawesome could be enough, but it'd be nice to have the choice of custom icon as well.

Also, a customisation of the colors of the button would be nice.

Thank you again !

Plugin not working at all | Grafana

Installed using readme
7.0.2 does not appear under visualisers at all.
7.0.3 and 7.0.4 does, however either of them, when selecting button panel triggers Grafana error;
An unexpected error happened
Details
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Mixed Content for prevents the browser to load the button configuration

The Grafana fails to load the panel configuration because the browsers want as a "Mixed Content" and prevent loading the configuration panel. This is because the default value in the URL is set to "http://api.example.com".
It appears that this issue presents the Grafana to load the configuration panel and display it to the user to configure the panel.
Screenshot of Chrome to show the issue is here:

Get "Panel plugin not found: cloudspout-button-panel" error when use unpack zip file way

I download the .zip file and unpack it into grafana plugins directory(*/grafana/data/plugins).
But get "Panel plugin not found: cloudspout-button-panel" error.
Here my code in Dockerfile

RUN wget -O cloudspout-button-panel.zip 'http://***/cloudspout-button-panel.zip'
RUN unzip cloudspout-button-panel.zip -d ./data/plugins
RUN rm -rf cloudspout-button-panel.zip

Grafana version is 6.3.6

Integrating variables and ad hoc filters

Hi! First thank you, this is a great plugin. I'm using grafana for some admin tasks and this is very useful.

For my needs I forked and modified your code.

In the editor I allow to add other kind of parameters: "variable parameters" that will be resolved before the request. Also I allow to use the variable notation in the label of the button. "This is the label for $variable"

In the panel I'm resolving the variables configured in the editor: first I look for ad hoc filters (I use them in elasticsearch) then for regular variables like text box variables.

The use case form me is the ability to invoke an endpoint with current dashboard filters and variables.

What do you think? would you be interested in a pull request?

Sign plugin

Grafana 7 comes with a signing feature for plugins.
There is no process for community plugins yet:
https://grafana.com/docs/grafana/latest/developers/plugins/sign-a-plugin/#:~:text=Signing%20a%20plugin%20allows%20Grafana,including%20Enterprise%20plugins%2C%20are%20signed.

Button panel resetting text upon clicking edit

When I click to edit a button panel, the set text will revert to the default text. I am fairly sure this has to do with the fact that my button text is completely whitespace since I just want a left / right arrow for the button icon

steps to reproduce:

• Make a button panel
• Edit button panel
• clear Button Panel -> Text
• Apply
• Either edit again, or leave the dashboard and come back, and the labels for the buttons will be back to their defaults

this was using plugin version 7.0.23 on grafana v8.1.5

Wrong 'Authorization' header for the 'Basic' authentication scheme

Add 'Basic ' in

cloudspout-button-panel/src/ButtonPanel.tsx

Line 52 in 743a01b

requestHeaders.set('Authorization', btoa(options.username + ':' + options.password));

Solution:

requestHeaders.set('Authorization', 'Basic ' + btoa(options.username + ':' + options.password));

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization

Add Data Field for JSON

Please add a Data field for JSON data. Without it, POST does not work with most APIs because you can't add that data as headers.

Rest integration now showing

Hello, i installed multiple times the button to do post request, but today i installed it, and there is no option for the rest integration, the button shows in the dashboard, but i dont have any options to edit it, i cant even change the text. is there a new update or im missing something?
Thanks !

button panel 7.0.7 packaging for grafana direct installation seems to be incomplete

Hi guys,
i have tried to install this plugin packaged here (https://github.com/cloudspout/cloudspout-button-panel/releases/download/7.0.7/cloudspout-button-panel.zip) through normal grafana process installation, that is :

• extract your zip under the path : /var/lib/grafana/plugins and assigning grafana:grafana user:group owners
• restarted grafana

But going to grafana plugin page i see the message "Error loading plugin. check the server startup logs for more information. if this plugin was loaded from git, make sure it was compiled".

So is there no a zip file already prepared for the grafana installation ?

I have also tried to change current cors status for my firefox (versione 82.0 64bit) (https://www.google.com/search?client=firefox-b-d&q=firefox+enable+cors) but without success.

OS version : Redhat 7.7

From grafana log i see only this without any errors...

[root@node001 grafana]# grep -i button grafana.log
t=2020-10-27T06:42:53-0300 lvl=info msg="Registering plugin" logger=plugins name="Button Panel"
[root@node001 grafana]#

Thanks for any feedback.
Regards

Return of statusCode 200 to the botton panel does not change symbol to check mark

thanks for nice plugin

Not sure if I'm doing it right, but when I have received the GET request from Grafana button Plugin in node-red, I return StatusCode 200. But the Button Panel symbol changes to warning triangle and not the check mark as show in Code section of the plugin.
Is it wrong to send StatusCode 200 or is there any documentation on how to do this properly ?

Feature request: Proxy support

Hi, thank you for cool project!

Is it possible to add support for http/socks5 proxies?

In my case it will be usefull to bypass IP whitelist for remote API without need to use VPN or export http_proxy on server with Grafana

Add to the Grafana.net plugin repo

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

Use button for navigation

So far the button supports HTTP GET and POST, which is great - many thanks!

It would be even better to use it as a navigation button, where it navigates the browser to a specific URL (or dashboard-id).

Why? Because this button looks nicer than the integrated link buttons.

The easiest way might be just a link-field.

Grafana v8.3.x: "NetworkError when attempting to fetch resource."

• Environment
  • Grafana OSS v8.3.0 and v8.3.6
  • Button Panel v7.0.23
  • OS: Ubuntu 20.04
• Observed behaviour
  • With any URL, any type of request GET/POST
  • With/without a reverse proxy
  • Error message viewable upon clicking the button: NetworkError when attempting to fetch resource.
• How to reproduce:
  • Install Grafana OSS and Button Panel of the versions mentioned
  • Create a new dashboard
  • Create a new panel of the button plugin
  • Replace the URL with any valid URL e.g. Requestbin with GET/POST
  • Click on the button
  • View the error message in the hover text
  • View the Grafana log

Send POST request to current host IP but another port

I'd like to be able to push data to a node-red that's installed on the same machine but listens to another port.

Currently, I use a variable containing the IP address/host and use that in the REST URL, but I was wondering if it was possible to either

• auto populate a variable containing the current host
• add an option to send to the current host and only change the scheme (http/https), port and path.

Thank you!

Button not working when added after install

I used the command to install

$ grafana-cli --pluginUrl https://github.com/cloudspout/cloudspout-button-panel/releases/download/7.0.2/cloudspout-button-panel.zip \
  plugins install cloudspout-button-panel

But when i try to use the plugin i have this error:

What's going on?

isAuth seems to be true even if not set in the panel editor

When I try to execute a REST call to my home assistant server I get the following error from the preflight request:

Credentials flag is true, but Access-Control-Allow-Credentials is not "true".

I have configured my home assistant server with the correct cors_allowed_origins I am using the following headers:

Authorization: Bearer (my home assistant token)

Authentication switch is turned off and the request is a POST request with a valid json which works fine if I try it with another HTTP client.

Typo in Button Panel section

Minor issue: In the Button Panel section, with the 'custom' variant, we see 'Fackground Color'.
I assume this must be corrected to 'Foreground Color'.

Kind regards, - Dirk

No Options Present in Grafana 7.2.0

Hi,
First: Thanks for developing this plugin. It would be perfect for my needs.
However, after I installed version 7.0.4 of the plugin for grafana 7.2.0 I noticed that the "Options" dialog is missing after selecting "Button Panel" as visualization. (Also see the screenshot below).
Without this, configuration is impossible.
Can you please have a look at this behaviour?

Thanks in advance!

Button style (how to remove the 'check' logo)

Hi, @derjust Thanks for the contributions!
I am using your button now. But I don't expect to see the "check" logo after successful request, do you know where to edit the related codes?

Download Button should be able to download the file

Hi,

We have one urgent request, we are trying to download the file using API, we are seeing the response data as encoded content.
We need to download the file on click.
we are using flask API from flask.send_file