ryantxu / ajax-panel Goto Github PK
View Code? Open in Web Editor NEWAjax Panel Plugin for Grafana
License: MIT License
Ajax Panel Plugin for Grafana
License: MIT License
Hi, very useful plugin.
I am trying to figure out what is the use of datasource option for authentication.
Can you provide any usage examples?
Thanks,
After upgrading Grafana to version 6.7.1, this panel no longer works, the following error is logged in the browser's console:
module.js:16 Uncaught (in promise) TypeError: e.headers is not a function
at t.process (module.js:16)
at eval (module.js:16)
Grafana version: 6.7.1
Browser: Chrome 80.0.3987.162 (Official Build) (64-bit)
Versions:
dismiss@mss-grafana01:~/tmp$ sudo grafana-cli -v
Grafana cli version 5.2.1
dismiss@mss-grafana01:~/tmp$ sudo grafana-cli plugins ls
installed plugins:
grafana-clock-panel @ 0.1.0
grafana-piechart-panel @ 1.3.3
grafana-worldmap-panel @ 0.0.13
ryantxu-ajax-panel @ 0.0.5
What i get with curl on same host:
dismiss@mss-grafana01:~/tmp$ curl -vs http://172.21.27.50/GetImage.cgi?CH=0 --output ./img05.jpeg
* Trying 172.21.27.50...
* TCP_NODELAY set
* Connected to 172.21.27.50 (172.21.27.50) port 80 (#0)
> GET /GetImage.cgi?CH=0 HTTP/1.1
> Host: 172.21.27.50
> User-Agent: curl/7.58.0
> Accept: */*
>
* HTTP 1.0, assume close after body
< HTTP/1.0 200 Ok
< Server: httpd
< Date: Thu, 26 Jul 2018 07:22:53 GMT
< Cache-Control: no-cache
< Pragma: no-cache
< Expires: 0
< Connection: close
< Content-Type: image/jpeg
<
{ [1277 bytes data]
* Closing connection 0
In Grafana (used Image Sending "Accept" header example):
Tried Blob/Array buffer response but still got blank screen.
And if i switch to Display tab and select Preformatted text i got more details on error:
<h1>Error</h1><pre>{
"err": {
"data": null,
"status": -1,
"config": {
"method": "GET",
"transformRequest": [
null
],
"transformResponse": [
null
],
"jsonpCallbackParam": "callback",
"responseType": "arraybuffer",
"url": "http://172.21.27.50/GetImage.cgi?CH=0",
"params": {},
"headers": {
"Accept": "image/jpeg"
},
"cache": false,
"withCredentials": false,
"retry": 0
},
"statusText": "",
"xhrStatus": "error"
},
"cancelled": true
}</pre>
What I'm doing wrong?
Again - thanks for this plugin.
I wanted to know if you had any examples on how to perform some error handling using the Ajax template. Whenever I hit a bad entry, the api sometimes returns a 404.
``
Sorry about the incomplete subject. Should be Error Handling the response object
e.g.
{ "data": null, "status": 404, "config": { "method": "GET", "transformRequest": [ null ], "transformResponse": [ null ], "jsonpCallbackParam": "callback", "responseType": "json", "url": "api/datasources/proxy/90/clients/win2012r2-674fb.dev.workspace.cloud.td.com", "params": { }, "headers": { "Accept": "application/json", "X-Grafana-Org-Id": 4 }, "cache": false, "withCredentials": false, "retry": 0 }, "statusText": "Not Found", "xhrStatus": "complete" }
Grafana Labs can’t guarantee the integrity of this unsigned plugin Is it possible for the plugin to be signed?
Hi,
thanks for the nice plugin!
I have a small issue with including iframes:
It happens that the panel is vertically scrollable, even when the content fits the panel size (also in the "Image in IFrame" example). This hinders scrolling of the whole dashboard, if the panel has focus.
The plugin sets "scrollable" constantly to true. Would it be possible to make this setting an option in the configuration page to avoid this behaviour?
(Grafana 6.0.1)
Hi,
I am using the AJAX panel to draw custom graphs with plotly.js and it works great.
I’m trying to pass through a dashboard variable to the endpoint as a URL query. It works great if I set it manually in the ‘Parameters (via javascript)’ box but when I try to set it to the variable from the dashboard in the $MyVar format it errors with ‘$MyVar is not defined’.
image
image.png
731×350 13.2 KB
image
Am I doing something wrong or does the AJAX panel not have the access to pass through dashboard level configured variables? I’m pretty sure some of the global variables work here.
Im running Grafana v5.3.4 (69630b9) and AJAX plugin version 0.0.5
Thanks to ryantxu for the awesome plugin!
Thanks
Brett
As a User i want to add the Dashboard Variables inside the Angular Template.
I Want to define a Variable for a Dashboard to use it as Template and will create a Panel which then uses this variable for the Rest Call and Angular Template to show the user the Variable in a special way
Installed with
grafana-cli plugins install ryantxu-ajax-panel
data\plugins\ryantxu-ajax-panel contains the contents of the main git folder.
by copying contents of folder dist to the main plugin dir I managed to get the plugin to run
My grafana version is 6.7.0
My ajax plugin is the latest.
I am trying to use the plugin and i am getting the error in dev tools console after call a post request, the request is sent normally and the response is get normally to.
This is making the ajax plugin to not render the message that is sent on response but after i click in grafana refresh button the previous message is rendered.
I installed the plugin in my plugins folder, and i see it in the plugin list.
But i don't see it when i create a new panel....
If a query is configured, you can't send that data to the configured HTTP endpoint. This feature request asks for the possibility to do just that. The endpoint can then, for example, return a custom visualization without having to do any querying of its own and can be implemented stateless, making it a nice target for say an AWS serverless function. It would easily expand Grafana's visualization abilities without having to implement an entirely new panel.
Hey Team,
I am going to work on code based on this project and split the request and the display into a data source and a panel. The Goal is to have a data source with the ability to have multiple URLs that you can call. This should allow you to make more dynamic UI experiences with sourced data from more than one location. Also, it will allow you to use generic data sources and make custom panels without having to make a new plugin each time.
I'm reaching out to see if you wanted to update this project and make a new one or make two totally new ones, or I can just make new ones and not bother you.
Let me know
Thanks
How can I load the content of this website into the ajax panel ?
I can't get it to work. Any help much appreciated.
Thanks
Roland
We updated Grafana to 5.1 recently and had problems using a simple text query. I have no clue why it's not working. I tried to clean my browser caches, etc. but with no luck. We did a revert to Grafana 5.0.4 and it worked again.
Did you have the chance to have a look at Grafana 5.1?
Thanks. And also thank you for the plugin. 👍
I am getting the current username like this:
ctrl.$scope.$$childTail.$root.$$childTail.$$prevSibling.$$prevSibling.$$prevSibling.ctrl.searchSrv.backendSrv.contextSrv.user.login
This would return admin
since I'm logged in as admin.
Is there any simpler way?
Hi,
I have certain specific datasources and I need to load some metrics from these datasources to Grafana. So I created simple app, which creates HTML snippet with desired content, which is then loaded to Grafana by this plugin. I also add inline styles to my template. My app creates HTML snippet similar to
<div style="color: #d8d9da; height: 100%;">
<div style="display: flex; align-items: center; height: 100%;font-size: 2.5rem;color:#299c46">
<div style="flex-grow: 1; text-align: center;">
<div style="font-weight: 500; margin: 4px;">0</div>
<div style="font-weight: 500;"></div>
</div>
</div>
</div>
But result in Grafana after rendering is
<div>
<div>
<div>
<div>0</div>
<div></div>
</div>
</div>
</div>
I believe the reason for this is Angular SCE feature, which is used when rendering content as HTML. It would be nice if inline styles remain in HTML, because snippet mentioned above is useless without colors (green - ok, red - failure).
Hi,
is it possible to add functionality that will pick some value from JSON response and display it like a "single stat panel" does?
Hi team,
The Ajax panel doesn't reload on Timepicker change. Like for example if the user selects the Last 1 hour and then selects last 24 hours, the data/panel does reload with respect to the time change in the Grafana panel in the 7.0 version.
Is there a workaround solution for this?
Regards,
Rama.
Is it possible to consume the API result to display the info in another panel, for example? I'm retrieving system status from my external source and I would like to display with a table or gauge panel.
This is my api response (JSON Tree)
5:Object
ProbeGuid:"0262384a8dc149fdd45f24b1857bb2a5"
ErrorLevel:"NoError"
LastCheck:"2021-02-24T12:31:39"
CheckPointID:122
ErrorDescription:"OK"
Uptime:100
ErrorCode:0
thank you
The panel does not receive load event, when suddenly is displayed, but not scrolled into view - say panel on page bottom of a large dashboard, and the user presses End
key or PgDn
. I figured it has to do with grafana
's isInView
parameter, which only fires when the panel is scrolled into view or it is half in-view, but not fully. It might be a grafana
-side fix, but since @ryantxu did the lazy loading part there, I figured I'd post it here.
Here the AJAX panel is on the top left. When the user navigates to the view, it does not load, after a few up and down scroll events, it does.
I have a dashboard variable which I refer to in the 'Headers' field:
{Authorization: "api-key $apiKey"}
But Chrome Inspector shows it passing the variable as a string, instead of parsing the value of the variable. Chrome outputs:
authorization | api-key $apiKey
I expect it to parse the variable, i.e:
authorization | api-key the-value-of-my-variable
I can see the variable exists and has the correct value (as you have handily shown a list of variables in the panel edit page).
Variables are correctly parsed for the URL. So looks as if it is specific to parsing the header.
Would be good if there was a preview of the header too.
Grafana version: 6.7.2
AJAX Panel version: 0.0.6 (latest)
the plugin is working nice on a chrome browser on pc, but i'm getting this error in Philips smart TV
is there some configuration to do ?
we are using Grafana Open Source v7.2.2 (ad9d408ac2)
ajax-panel Version 0.0.7-dev
in log, some errors:
t=2020-10-26T16:45:00-0300 lvl=eror msg="Data proxy error" logger=data-proxy-log userId=2 orgId=1 uname=codam path=/api/datasources/proxy/1 remote_addr=192.168.1.158 referer="http://192.168.1.11:3000/d/WmvPAFtGz/gtr-olho-vivo-mes?orgId=1&kiosk=tv&orgld=1&refresh=5m" error="http: proxy error: context canceled" t=2020-10-26T16:45:00-0300 lvl=info msg="Request Completed" logger=context userId=2 orgId=1 uname=codam method=GET path=/api/datasources/proxy/1 status=502 remote_addr=192.168.1.158 time_ms=626 size=0 referer="http://192.168.1.11:3000/d/WmvPAFtGz/gtr-olho-vivo-mes?orgId=1&kiosk=tv&orgld=1&refresh=5m"
I'm trying to do a Github query search. If I use the URL directly then I can type something like:
https://api.github.com/search/issues?q=state:open
but if I want to use the parameters via Javascript options with something like:
{
q: "state:open"
}
then the :
will be URL escaped making the URL:
https://api.github.com/search/issues?q=state%3Aopen
which does not work.
package main
import (
“fmt”
“net/http”
“github.com/gorilla/mux”
)
func showRecord(w http.ResponseWriter, r *http.Request) {
out :=“Hello World”
w.Header().Set(“Content-Type”, “text/plain”)
fmt.Fprintf(w,out)
}
func handleRequests() {
router :=mux.NewRouter()
router.HandleFunc("/dashboard/show",showRecord).Methods(“GET”)
http.ListenAndServe(":8080", router)
}
func main() {
handleRequests()
}
In ryantx-ajax-panel I am able to get the output using iframe. But when using GET method in the panel getting the below error
Request Error
{“data”:{“message”:“Unexpected error”}}
Please guide how to get the output using GET method instead of iframe.
Thanks,
Debasish
Hello everybody, Can I use the result of a query in the URL in the URL ?
for instance:
http://xxx.xxx.xxx.xxx/TEXT.png
TEXT came from a query to a Database
I have an AJAX Panel reading from an API, configured to get the results as JSON and display using angular templates.
Everything works when I'm editing the panel, but after I close and reopen the dashboard the panel is empty. It remains empty even when I refresh the dashboard.
If I edit the panel again, and change anything on the Request tab, nothing happens and the panel remains empty.
If I change anything on the display tab the panel is shown correctly, but only for a single refresh. After I close the dashboard same problem happens again.
Using plugin 0.0.5 and Grafana 5.4.0. Panel JSON below:
{
"gridPos": {
"h": 6,
"w": 7,
"x": 0,
"y": 0
},
"header_js": "{}",
"id": 2,
"links": [],
"method": "GET",
"mode": "template",
"params_js": "",
"responseType": "json",
"showTime": false,
"showTimeFormat": "LTS",
"showTimePrefix": null,
"showTimeValue": "request",
"skipSameURL": false,
"template": "<h4>Repository</h4>\n<p>{{ response.snapshots[0].repository }}</p>\n\n<h4>Snapshot</h4>\n<p>{{ response.snapshots[0].snapshot }}</p>\n\n<h4>Progress</h4>\n<p><progress value=\"{{ response.snapshots[0].stats.processed.size_in_bytes }}\" \n max=\"{{ response.snapshots[0].stats.total.size_in_bytes }}\"\n style=\"width: 400px;\"\n ></progress> </p>\n",
"templateResponse": true,
"title": "Snapshot Progress",
"type": "ryantxu-ajax-panel",
"url": "http://XXXXXXXXX",
"withCredentials": false
}
I am trying to use the Ajax component to call out to an API but am having issues with getting the header right for Bearer Token Auth. It should return a number but all I get is the full url as below.
Settings:
Source: HTTP
URL: https://myservice.com/service/core/v2/Users?count=true
Method: GET
Response: JSON
Credentials: Off
Only Changes: On
Parameters: None (left blank)
Headers:
“Authorization”: “Bearer xxxxxxxxxxx”
Display Mode: Direct HTML
This is the output ->
{“err”:{“data”:null,“status”:-1,“config”:{“method”:“GET”,“transformRequest”:[null],“transformResponse”:[null],“jsonpCallbackParam”:“callback”,“responseType”:“json”,“url”:“https://myservice.com/service/core/v2/Users?count=true",“params”:{},“headers”:{“Authorization”:"Bearer xxxxxxxxxx”,“Accept”:“application/json, text/plain, /”},“cache”:false,“withCredentials”:false,“retry”:0},“statusText”:"",“xhrStatus”:“error”},“cancelled”:true}
After updating Grafana to latest version 6.3.5 the Iframe panel always load with right scroll bar and the content is not shown completely.
When editing or resizing the panel the complete content is shown and scroll bar is not shown. The issue is persisting on Google Chrome, IE and Edge.
Love the Ajax panel hope you can fix the issue..
A support request
example:
aggregate results, and show the final result in an angular template.
Hello,
my "Text" panel loads an URL that either returns text or an empty response (empty string).
Today, I updated to the current version of Grafana and this plugin and in case I get an empty string as response, the panel shows [object Object]
via the "Direkt HTML" mode.
Then I switched to "Angular Template" and saw that the response
variable is an object with {"data":"","status":200, ...}
.
I changed the template to use response.data
and it looked fine (empty panel), but now those panels who should contain text are empty too. It turned out that the response
variable for those panels contain the text returned by the URL and therefore there is no response.data
.
Conclusion:
Empty response: response
contains object
Non-empty response: response
contains the text
It would be nice if it would have consistent behavior.
Using an iframe to display Images works great because of the { __now:Date.now(), }
which makes the browser not use the cache of the image. But I can't seem to figure out how to change the value of the $__interval | 20s
. Is there a way to do it?
Hi there,
Question - are you able to iterate (loop) through the response object using the angular template? Current our data looks like
[
{ "test": 1 },
{ "test": 2 }
]
and I want to display it using a template like:
How can we perform this function?
Hi
I am having an issue getting my API call out to work and the error icon just seems to show a down arrow if you hover of it. Is this by design?
I submitted the error in the Community that I am trying to address, it is with the Bearer Token in the header, I am guessing that is where my issue is
https://community.grafana.com/t/ajax-plugin-bearer-token/16045
Thanks
Stu
Hi,
I am wonder how to post a json data to backend. I only find parameters to post. Can I post json data?
Hello,
are there any plans to implement proper releases / versions on Github ? Appears there is only 0.0.6 on Github.com and Grafana lists 0.0.7-dev and it seems like there is a pretty decent velocity of commits between them...
Thanks !
Hi,
is it possible to change the request url on every interval, so you can rotate cameras without rotate the entire dashboard?
Or it is possible to add an counter via javascript so we can manipulate the response on server side?
best regards and a happy new year!
Is there a way to add CORS support to the GET requests? Other than using a proxy. I am using a node.js proxy to enrich the GET request with the CORS headers and this works. But I was wondering if there is an official way to do this.
Hey,
it would be nice if we had more control over the text that is displayed. Things like font size, color and position would be enough for the start I guess. I want mine to look the same as the Singlestat panel.
When updating the plugin using the grafana-cli utility, everything broke, and Grafana shows `HTTP Error (404) Not Found" whenever I load a dashboard that has an Ajax panel on it.
Request URL: http://grafana.mycompany/public/plugins/ryantxu-ajax-panel/module.html?v=1524046009100
Request Method: GET
Status Code: 404 Not Found
Remote Address: 10.0.99.99:80
Referrer Policy: no-referrer-when-downgrade
It makes me wonder if I need to update Grafana, but idk...
Grafana v5.0.0-beta5 (commit: c21d9de)
Hi, I've used the panel to return the HTML below but the styling of the table doesn't render in the panel. Does the panel support this type of styling?
0 |
ON |
Hi there,
All I want to do is display a local .html file in my grafana dashboard.
If I copy the html files content into the Text-Panel manually and set it on display mode HTML it works fine. But the html will be generated automatically every day. So i want to automate that process.
I tried every for me conceivable way to do it, but I can't get it working...
The file is stored in /usr/share/grafana/public/img/test.html
As the file can not be attatched as html, I saved it as a txt file.
test.txt
Any idea on how to get the file displayed?
Thanks a lot!!
Have a great one!
Great plugin!
However, is it possible somehow to pass the Grafana panel width in the request args the same fashion that height is supported?
I tried using { height:ctrl.height, width:ctrl.width }
in the Parameters (via javascript)
section, but width in query string is empty.
e.g:
"GET /panels/chart/6?height=355&width= HTTP/1.1" 200
I am trying to return a plot in an iframe
so this is really important in this case.
I'll appreciate any workaround / nasty hack / guidance just to get this working.
Thanks
David
I installed the plugin in our Grafana 5.2.1 installation but after a restart of Grafana the panel is not shown in the list of panels.
Is this plugin being maintained?
I have an extremely simple example where I want an external image to refresh (similar to the Webcam example)
I'm using Grafana 7.0.1, and the plugin no longer seems to work, there are many different console errors.
I'm not sure if Issue #60 is the cause of the underlying issue, but I am also getting that error.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.