[SCRIPT] Grafana-Dashboards in VIS

dna909

Moin,

hier mal ein kleines Script, um Snapshots von Grafana in VIS einzubinden.

Vielleicht ist es ja für den einen oder anderen nützlich, oder dient zumindest als Vorlage/Anregung….

! ````
////////////////////////////////////////////////////////////////////////////////
////*** GrafanaStats VIS *** //////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////V0.1 initial
////V0.2 Delete Snapshot hinzugefügt
////////////////////////////////////////////////////////////////////////////////
! ////////////////////////////////////////////////////////////////////////////////
////////////// CONFIG //////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
! const apiKey = "API-KEY GRAFANA";
const grafanaIP = "192.168.0.46";
const grafanaPort = "3000";
const protocol = "http";
const user = "GRAFANA-USER";
const pass = "GRAFANA-PASSWORT";
! ////////////////////////////////////////////////////////////////////////////////
! let request = require("request");
let deleteUrl = "";
const path = "javascript.0.Grafana.";
const dashboardUrl = path+"DashboardURL"; //Datenpunkt der die Snapshot-URL enthält
const dashboardName = path+"DashboardName"; //Datenpunkt um den Dashboardnamen zu übergeben
const grafanaUrl = protocol + "://" + grafanaIP + ":" + grafanaPort;
const dashData = grafanaUrl+"/api/dashboards/db/";
const dashGet = grafanaUrl+"/api/snapshots";
const apiKeyStr = "Bearer " + apiKey;
////////////////////////////////////////////////////////////////////////////////
! createAllStates();
! on({id: (dashboardName) , change: "ne"}, function (obj) {
! if (deleteUrl !== "") {
deleteSnapshot();
}

dashName=getState(dashboardName).val;
getDashJSON();
setTimeout(getDashSnapshot,1000);

});

! function deleteSnapshot(){
console.log("Deleting old Snapshot");
request(
{ method: 'GET',
url: deleteUrl,
headers: {
'Content-Type': 'application/json'
}
},
function (error, response, body)
{
jsonArray=JSON.parse(body);
console.log("Fehlercode: " + error);
console.log(JSON.stringify(jsonArray.message));
}
);
}
! function getDashJSON(){
! request(
{ method: 'GET',
url: dashData+dashName,
headers: {
Authorization: apiKeyStr
}
},
function (error, response, body)
{
jsonArray=JSON.parse(body);
jsonPost='{"dashboard":' + JSON.stringify(jsonArray.dashboard) + ', "expires": 0}';
}
);
}
! function getDashSnapshot(){

request(
{ method: 'POST',
  url: dashGet,
  body: jsonPost,
  headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
	    'Authorization': apiKeyStr
	}
},  
function (error, response, body) 
{
 jsonArray=JSON.parse(body);
 snapshotUrl=JSON.stringify(jsonArray.url);
 snapshotUrl=snapshotUrl.replace("localhost",grafanaIP);
 snapshotUrl=snapshotUrl.replace("\"", "");
 snapshotUrl=snapshotUrl.replace("\"", "");
 console.log("Die URL lautet: " + snapshotUrl);
 setState(dashboardUrl, snapshotUrl);
 deleteUrl=JSON.stringify(jsonArray.deleteUrl);
 deleteUrl=deleteUrl.replace("localhost",grafanaIP);
 deleteUrl=deleteUrl.replace(protocol +"://", protocol + "://" + user + ":" + pass + "@");
 deleteUrl=deleteUrl.replace("\"", "");
 deleteUrl=deleteUrl.replace("\"", "");
 console.log("Die URL zum löschen lautet: " + deleteUrl);
}

);

}

! function createAllStates(){
createState(dashboardUrl, "", {
name: 'Dashboard',
desc: 'Dashboard',
type: 'string',
role: 'value',
unit: ''
});
! createState(dashboardName, "", {
name: 'Dashboard_Name',
desc: 'Dashboard Name',
type: 'string',
role: 'value',
unit: ''
});
}
! ````

2269_grafana.pdf

Gruß

dna909

pix

Hallo dna909,

danke für die Arbeit.

Ich hab mich mal in Grafana eingearbeitet und es läuft mit influxdb. Die Charts sehen wunderbar aus. Dein Skript erzeugt aber diesen Fehler:

`2017-11-27 19:27:02.158  - [32minfo[39m: javascript.2 Start javascript script.js.Test.Test_Grafana_dna909
2017-11-27 19:27:02.162  - [31merror[39m: javascript.2 script.js.Test.Test_Grafana_dna909 compile failed: SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode[/code]`
Idee?

Gruß

Pix

Homoran

Hallo Pix

~~@pix:~~

Ich hab mich mal in Grafana eingearbeitet und es läuft mit influxdb. `
deshalb hatte ich damals ganz zu Beginn mit influxDB begonnen (da gibt es noch mehr Gründe für).

Ich bin nämlich auch der Meinung, dass
~~@pix:~~

Die Charts sehen wunderbar aus `

Leider habe ich damals es nicht geschafft grafana auf dem Pi2 oder Cubieboard3 zu installieren

Wie bitte hast du es gemacht.

Gruß

Rainer

dna909

~~@pix:~~

Hallo dna909,

danke für die Arbeit.

Ich hab mich mal in Grafana eingearbeitet und es läuft mit influxdb. Die Charts sehen wunderbar aus. Dein Skript erzeugt aber diesen Fehler:

`2017-11-27 19:27:02.158  - [32minfo[39m: javascript.2 Start javascript script.js.Test.Test_Grafana_dna909
2017-11-27 19:27:02.162  - [31merror[39m: javascript.2 script.js.Test.Test_Grafana_dna909 compile failed: SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode[/code]`
Idee?

Gruß

PixHallo pix,

die Fehlermeldung kannte ich bis heute noch nicht. Könnte aber möglicherweise an Deiner Nodejs-Version liegen. Bei mir läuft es ohne Probleme. Ich habe die Node 6.11.4.

Gruß

dna909
``` `

dna909

~~@Homoran:~~

Hallo Pix

~~@pix:~~

Ich hab mich mal in Grafana eingearbeitet und es läuft mit influxdb. `
deshalb hatte ich damals ganz zu Beginn mit influxDB begonnen (da gibt es noch mehr Gründe für).

Ich bin nämlich auch der Meinung, dass
~~@pix:~~

Die Charts sehen wunderbar aus `

Leider habe ich damals es nicht geschafft grafana auf dem Pi2 oder Cubieboard3 zu installieren

Wie bitte hast du es gemacht.

Gruß

Rainer ` Hallo Rainer,

für meinen odroid u2 mit ubuntu 14.04 hat die Version von hier funktioniert:

https://bintray.com/fg2it/deb/grafana-o … rry/v4.0.1

Möglicherweise gehts ja damit auch bei dir.

Gruß

dna909

pix

~~@Homoran:~~

Hallo Pix

~~@pix:~~

Ich hab mich mal in Grafana eingearbeitet und es läuft mit influxdb. `
deshalb hatte ich damals ganz zu Beginn mit influxDB begonnen (da gibt es noch mehr Gründe für).

Ich bin nämlich auch der Meinung, dass
~~@pix:~~

Die Charts sehen wunderbar aus `

Leider habe ich damals es nicht geschafft grafana auf dem Pi2 oder Cubieboard3 zu installieren

Wie bitte hast du es gemacht.

Gruß

Rainer `
Hallo Rainer,

ich habe Grafana mit brew auf einem Mac (derzeit OS 10.12.6 Sierra) installiert. Die Dokumentation ist eigentlich sehr gut. Aber nur in Englisch. Schließlich gibt es noch viele Youtube-Videos.

Etwas holperig war die Einrichtung eines Admins ohne WebUI. Da muss man im Terminal mit dem nano-Editor eine Config-Datei bearbeiten (so wie später auch für dieses Projekt hier).

Ich habe auch nicht soviel auf die ganze Struktur gegeben. Es gibt einen Admin und eine Organization und gut ist. Das wird mir zuviel sonst.

Wenn die Datenpunkte in InfluxDB geloggt sind, tauchen sie nach dem korrekten Einrichten der Datenquelle (mit Adresse, Name der influx-DB, User, Pass) auch auf und können angezeigt werden.

Bin jetzt kein Experte, aber wo hakt es denn?

Pix

pix

~~@dna909:~~

~~@pix:~~

Hallo dna909,

danke für die Arbeit.

Ich hab mich mal in Grafana eingearbeitet und es läuft mit influxdb. Die Charts sehen wunderbar aus. Dein Skript erzeugt aber diesen Fehler:

`2017-11-27 19:27:02.158  - [32minfo[39m: javascript.2 Start javascript script.js.Test.Test_Grafana_dna909
2017-11-27 19:27:02.162  - [31merror[39m: javascript.2 script.js.Test.Test_Grafana_dna909 compile failed: SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode[/code]`
Idee?

Gruß

PixHallo pix,

die Fehlermeldung kannte ich bis heute noch nicht. Könnte aber möglicherweise an Deiner Nodejs-Version liegen. Bei mir läuft es ohne Probleme. Ich habe die Node 6.11.4.

Gruß

dna909

Hallo dna909,

[https://github.com/JeffreyWay/laravel-mix/issues/264](https://github.com/JeffreyWay/laravel-mix/issues/264). Mit nodejs 4.8.4 komme ich wohl nicht mehr sehr lange weiter. Ich sollte mal auf 6.x gehen. Allerdings ist das Upgrade am Mac zwar schnell gemacht, aber nicht so trivial wieder entfernt, wenn etwas schiefgeht oder andere Effekte auftreten. Mal sehen...

Gruß

Pix
``` `  `

dna909

~~@pix:~~

~~@dna909:~~

~~@pix:~~

Hallo dna909,

danke für die Arbeit.

Ich hab mich mal in Grafana eingearbeitet und es läuft mit influxdb. Die Charts sehen wunderbar aus. Dein Skript erzeugt aber diesen Fehler:

`2017-11-27 19:27:02.158  - [32minfo[39m: javascript.2 Start javascript script.js.Test.Test_Grafana_dna909
2017-11-27 19:27:02.162  - [31merror[39m: javascript.2 script.js.Test.Test_Grafana_dna909 compile failed: SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode[/code]`
Idee?

Gruß

PixHallo pix,

die Fehlermeldung kannte ich bis heute noch nicht. Könnte aber möglicherweise an Deiner Nodejs-Version liegen. Bei mir läuft es ohne Probleme. Ich habe die Node 6.11.4.

Gruß

dna909

Hallo dna909,

[https://github.com/JeffreyWay/laravel-mix/issues/264](https://github.com/JeffreyWay/laravel-mix/issues/264). Mit nodejs 4.8.4 komme ich wohl nicht mehr sehr lange weiter. Ich sollte mal auf 6.x gehen. Allerdings ist das Upgrade am Mac zwar schnell gemacht, aber nicht so trivial wieder entfernt, wenn etwas schiefgeht oder andere Effekte auftreten. Mal sehen...

Gruß

Pix

Vielleicht hilft es auch erstmal const und let gegen var auszutauschen. Dann müsste das theoretisch auch funktionieren.

Gruß

dna909
``` `  `  `

pix

Gute Idee,

const nutze ich auch in anderen Skripten.

let könnte das Problem sein.

Werde berichten.

Pix

pix

Hallo dna909,

ich habe das Skript etwas für mich angepasst. Jetzt klappt alles!

Tatasächlich startet es erstmal fehlerlos, wenn man let gegen var austauscht (2x).

Ich habe ausserdem ein wenig verschönert (Leerzeilen, Tabs, Kommentare)

Hier meine Version:

! /* GrafanaStats VIS ! V0.1 initial V0.2 Delete Snapshot hinzugefügt ! von dna909 28.11.2017 code angepasst ! http://forum.iobroker.net/viewtopic.php?f=21&t=9249 */ ! // CONFIG const apiKey = "XXXXXXXXXXXX"; const grafanaIP = "192.168.XXX.XXX"; const grafanaPort = "3000"; const protocol = "http"; const user = "XXXX"; const pass = "XXXX"; ! // ab hier nix mehr ändern var request = require("request"); var deleteUrl = ""; const path = "javascript." + instance + ".Grafana."; const dashboardUrl = path + "DashboardURL"; // Datenpunkt der die Snapshot-URL enthält const dashboardName = path + "DashboardName"; // Datenpunkt um den Dashboardnamen zu übergeben const grafanaUrl = protocol + "://" + grafanaIP + ":" + grafanaPort; const dashData = grafanaUrl + "/api/dashboards/db/"; const dashGet = grafanaUrl + "/api/snapshots"; const apiKeyStr = "Bearer " + apiKey; ! createAllStates(); ! on({ id: (dashboardName), change: "ne" }, function(obj) { if (deleteUrl !== "") { deleteSnapshot(); } dashName = getState(dashboardName).val; getDashJSON(); setTimeout(getDashSnapshot, 1000); }); ! function deleteSnapshot() { log("Deleting old Snapshot"); request({ method: 'GET', url: deleteUrl, headers: { 'Content-Type': 'application/json' } }, function(error, response, body) { jsonArray = JSON.parse(body); log("Fehlercode: " + error); log(JSON.stringify(jsonArray.message)); } ); } ! function getDashJSON() { request({ method: 'GET', url: dashData + dashName, headers: { Authorization: apiKeyStr } }, function(error, response, body) { jsonArray = JSON.parse(body); jsonPost = '{"dashboard":' + JSON.stringify(jsonArray.dashboard) + ', "expires": 0}'; } ); } ! function getDashSnapshot() { request({ method: 'POST', url: dashGet, body: jsonPost, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': apiKeyStr } }, function(error, response, body) { jsonArray = JSON.parse(body); snapshotUrl = JSON.stringify(jsonArray.url); snapshotUrl = snapshotUrl.replace("localhost", grafanaIP); snapshotUrl = snapshotUrl.replace("\"", ""); snapshotUrl = snapshotUrl.replace("\"", ""); log("Die URL lautet: " + snapshotUrl); setState(dashboardUrl, snapshotUrl); deleteUrl = JSON.stringify(jsonArray.deleteUrl); deleteUrl = deleteUrl.replace("localhost", grafanaIP); deleteUrl = deleteUrl.replace(protocol + "://", protocol + "://" + user + ":" + pass + "@"); deleteUrl = deleteUrl.replace("\"", ""); deleteUrl = deleteUrl.replace("\"", ""); log("Die URL zum löschen lautet: " + deleteUrl); } ); } ! function createAllStates() { createState(dashboardUrl, "", { name: 'Dashboard', desc: 'Dashboard', type: 'string', role: 'value', unit: '' }); createState(dashboardName, "", { name: 'Dashboard_Name', desc: 'Dashboard Name', type: 'string', role: 'value', unit: '' }); } !
Die Objekte werden korrekt angelegt.

Wenn ich nun den Namen des Dashboards ("ioBroker") in das Objekt DashboardName schreibe, dann wird mit meinen LoginDaten auf dem Grafana Server ein Snapshot erstellt und der Sharing-URL in den Datenpunkt DashboardURL geschrieben. Damit ist er für ein iframe-Widget in VIS erreichbar. Super!

Ein Fallstrick ist der Name des Dahboards. Es sollte noch der schwere Fehler abgefangen werden, wenn der Name des Dashboards falsch ist. Dann stürzt nämlich die ganze JS-Instanz ab.

Frage:

Wie bekomme ich die Titelzeile aus dem Snapshot (siehe Screenshot).

Ich meine nicht den Workaround über die Änderung des Viewports, sondern eine Einstellung in Grafana.
261_bildschirmfoto_2017-11-28_um_12.34.08.png

Vielen Dank für die tolle Arbeit, dna909.

Gruß

Pix

dna909

Hi pix,

das mit dem Fehler abfangen mach ich noch.

Das mit dem Ausblenden der oberen Zeile habe ich auch noch nicht geschafft. Werde mich aber nochmal damit auseinandersetzen. Schön das das Script nun bei dir läuft [emoji3]

Gruß

dna909

dna909

Hallo pix,

` > Frage:

Wie bekomme ich die Titelzeile aus dem Snapshot (siehe Screenshot).

Ich meine nicht den Workaround über die Änderung des Viewports, sondern eine Einstellung in Grafana. `

Ist leider nicht möglich, siehe https://github.com/grafana/grafana/issues/7299

Gruß

dna909

pix

Hallo,

dann muss ich es doch über diesen Weg probieren:

http://forum.iobroker.net/viewtopic.php … 762#p38762

(gezeigten iFrame Ausschnitt bestimmen)

Ausprobiert:
261_bildschirmfoto_2017-11-29_um_12.08.34.png

! HTML-Widget: ````
! <iframe src="{javascript.2.Grafana.DashboardURL}" id="my-iframe" scrolling="no"></iframe>
!

Dieses Widget:

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"\n<iframe src=""{javascript.2.Grafana.DashboardURL}"" id=""my-iframe"" scrolling=""no""></iframe>\n\n\n\n"},"style":{"left":"89px","top":"1306px","z-index":"25","width":"916px","height":"270px"},"widgetSet":"basic"}]


Gruß

Pix

Community Forum

NEWS

[SCRIPT] Grafana-Dashboards in VIS

Support us

414

32.4k

81.4k

1.3m