grafana about graphite-api HOT 21 CLOSED

I use it successfully so definitely, yes. Grafana shows "HTTP error" when there is no data on the graph (so on a newly created graph with no data) but as soon as you add a graphite target you're fine.

Grafana has a "Graphite test" graph on the default dashboard that uses randomWalk() to draw graphs. If you can see these graphs it means grafana can talk to graphite-api just fine.

from graphite-api.

thank you, I can see from cyanite dumps that grafana sends request to graphite API but but the result are not displayed in grafana

DEBUG [2014-04-06 19:29:29,639] New I/O worker #14 - org.spootnik.cyanite.http - got request: {:remote-addr 46.21.xx.xx, :params {:query collectd.46_21_xx_xx.interface-eth0.if_octets.}, :headers {user-agent python-requests/2.2.1 CPython/2.6.6 Linux/2.6.32-431.5.1.el6.x86_64, accept */, accept-encoding gzip, deflate, compress, host 46.21.xx.xx:8080}, :server-port 8080, :content-length nil, :keep-alive? true, :content-type nil, :character-encoding nil, :action :paths, :uri /paths, :server-name ip-46-21-xx-xx.yyy.com, :query-string query=collectd.46_21_xx_xx.interface-eth0.if_octets.%2A, :body nil, :scheme :http, :request-method :get}

DEBUG [2014-04-06 19:29:29,759] New I/O worker #11 - org.spootnik.cyanite.http - got request: {:remote-addr 46.21.xx.xx, :params {:path collectd.46_21_xx_xx.interface-eth0.if_octets.tx, :from 1396787369, :to 1396808969}, :headers {user-agent python-requests/2.2.1 CPython/2.6.6 Linux/2.6.32-431.5.1.el6.x86_64, accept /, accept-encoding gzip, deflate, compress, host 46.21.xx.xx:8080}, :server-port 8080, :content-length nil, :keep-alive? true, :content-type nil, :character-encoding nil, :action :metrics, :uri /metrics, :server-name ip-46-21-xx-xx.yyy.com, :query-string path=collectd.46_21_xx_xx.interface-eth0.if_octets.tx&from=1396787369&to=1396808969, :body nil, :scheme :http, :request-method :get}

DEBUG [2014-04-06 19:29:29,759] New I/O worker #11 - org.spootnik.cyanite.http - fetching paths: collectd.46_21_xx_xx.interface-eth0.if_octets.tx

DEBUG [2014-04-06 19:29:29,761] New I/O worker #11 - org.spootnik.cyanite.store - fetching paths from store: (collectd.46_21_xx_xx.interface-eth0.if_octets.tx) 10 60480 1396787369 1396808969 2161

which grafana version do you use plz ?

from graphite-api.

Solved by choosing graphite PNG in display style, thank you.

from graphite-api.

Is your Grafana installation in the same box as your graphite-api installation?

from graphite-api.

it is not supposed to be but when I was debugging I've putted an instance of it in the same box, that did not bring the graphs, when I choosed png instead of float I had the graphs, both from the instance at the same box and remote one.
I don't use elasticsearch (don't know what it is well yet) but I think the issues was because I don't store metrics locally for grafana so it can't render it, but with png the render stuff happen at the server level. grafana adds the styling and dashboard.

from graphite-api.

It's fine to have graphite-api and grafana on the same box :)

If PNG works but not grafana flot rendering this is probably a CORS issue. See the allowed_origins config section:

http://graphite-api.readthedocs.org/en/latest/configuration.html#extra-sections

(PNG works because it's just image embedding)

If you have grafana on localhost:8888 and graphite-api on localhost:8000 you need this in your graphite-api config:

allowed_origins:
  - localhost:8888

Grafana doesn't need elasticsearch to display graphs. If rendering fails the developer tools should show some indications about what's wrong.

from graphite-api.

indeed CORS was the issue, float works pretty well now, thank you :)

from graphite-api.

Great :) Closing the issue then.

from graphite-api.

Hi,

I'm facing with the same issue. I succeed to see the randomWalk(random walk) test graph too by chosing "graphite png" in display style, the graphit flot option doesn't work for me too. But I'm still having the "failed to issue metric query" warning, and I when I try to add a new query I can't see my graphite query tree, while I can see it from my default graphite ui. I have this error in my grafana console each time I click on "select metric" :

03:21:34.787 GET http://my_graphite_server:8000/render [HTTP/1.1 200 OK 604ms]
03:21:37.824 Empty string passed to getElementById(). app.c7840ed8.js:4
03:43:57.875 GET http://my_graphite_server:8000/metrics/find/.

So as mentioned on this post should I install and deploy graphite-api to get grafana work?

I'm using nginx as web server, is it good to use unicorn with it for deploying graphite-api?

It's two weeks now I can't get my grafana ui been working.

Thanks a lot for you help.

Regards.

from graphite-api.

@papiveron what do you currently use? Graphite-web or graphite-api?

If you're using graphite-web, you can either setup CORS headers yourself in your nginx config (a bit tedious) or replace graphite-web with graphite-api.

Have a look at the deployment guide for available options: http://graphite-api.readthedocs.org/en/latest/deployment.html

from graphite-api.

I'm using graphite-web. So if you think I can set CORS myself in nginx to get it work, I'll prefere to keep using graphite-web and make things work this way. Graphite-web by the way help me check things.

The please what should I add in my nginx config to solve the issue?

Thanks.

from graphite-api.

Hi @brutasse
I have added the metrics and render location to my grafana nginx configuration, but it's still not working.
Still having "Empty string passed to getElementById()" in the browser console.

When you say replace graphite-web by graphite-api you mean replace in grafana config.js or in graphite configuration?

Please help me set up my grafana dashboard guys. Is there any myster there?

Thanks a lot

from graphite-api.

@papiveron: First things first... have you set up graphite-api correctly and have you verified that you can query for metrics using simple curl commands? In the following examples I'm running my graphite-api process is listening on port 8000.

$ curl -XGET 'localhost:8000/metrics/find?query=*'
[{"text": "STAGING", "expandable": 1, "leaf": 0, "id": "STAGING", "allowChildren": 1}]

$ curl -XGET 'localhost:8000/metrics/find?query=STAGING.*'
[{"text": "stuff", "expandable": 1, "leaf": 0, "id": "STAGING.stuff", "allowChildren": 1}]

$ curl -XGET 'localhost:8000/metrics/find?query=STAGING.stuff.*'
[{"text": "diceroll", "expandable": 0, "leaf": 1, "id": "STAGING.stuff.diceroll", "allowChildren": 0}]

If this works fine, then you'll have to modify the Grafana configuration file (config.js) to point to your graphite-api endpoint:

    datasources: {
      graphite: {
        type: 'graphite',
        url: "http://my-graphite.fullname.com:8000",
      },

Finally, to solve the CORS headers issue, you'll have to modify the graphite-api.yaml configuration file specify the allowed_origins:

allowed_origins:
  - 192.168.1.1

Now, this is assuming that you're running Grafana + graphite-api. If you are trying to get Grafana + graphite-web to work, I'd suggest looking at issues in the graphite-web Github project. For example: https://github.com/graphite-project/graphite-web/issues?q=cors

from graphite-api.

Hi @feangulo!

I'm not using graphite-api yet but graphite-web actually. And I'm asking since a while if I should use graphite-api. Is yes, then I will deploy it.

My problem is what and where should I do.

However are using graphite-api with unicorn?

Thank you.

from graphite-api.

The curl request is working for me, and I can have my graphite metric tree. My config.js file is set fine.

But the problem still remain in the grafana ui. I don't know if it's a CORS problem, if graphite-api is absolutely needed.

from graphite-api.

Guys, I still don't understanding what's going on. with curl I can get all my metrics tree, but the browser still give me a metrics query failed error. May be I should copy and paste all my configurations here.
graphite nginx conf :

server {
listen     443;
ssl on;
ssl_certificate /etc/pki/tls/certs/dev.mydomain.net.crt;
ssl_certificate_key /etc/pki/tls/certs/dev.mydomain.net.key;

server_name  graphite.mydomain.net;

#charset koi8-r;
rewrite_log off;
access_log  /srv/www/graphite/access.log  main;
error_log   /srv/www/graphite/error.log debug;

# Proxy to Uchiwa on localhost:3000
#
location / {
    proxy_pass http://graphite:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;

    if ($http_origin ~*  "^http://metro.mydomain.net:80$"){
    set $cors "true";
    }       
    if ($request_method = 'OPTIONS') {
    set $cors "${cors}options";  
    }

    if ($request_method = 'GET') {
    set $cors "${cors}get";  
    }

    if ($request_method = 'POST') {
    set $cors "${cors}post";
    }

    if ($cors = 'true') {
    add_header  "Access-Control-Allow-Origin" "$http_origin";
    add_header  "Access-Control-Allow-Credentials" "true";
    add_header  "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
    add_header  "Access-Control-Allow-Headers" "Authorization, origin, accept";
    }

    if ($cors = "trueoptions") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;

    return 204;
    }

    if ($cors = "truepost") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

    if ($cors = "trueget") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }


  }
}

grafana nginx conf :

server {
#listen     443;
listen     80;
#ssl on;
#ssl_certificate /etc/pki/tls/certs/dev.mydomain.net.crt;
#ssl_certificate_key /etc/pki/tls/certs/dev.mydomain.net.key;

server_name  metro.mydomain.net;
root   /var/www/html/grafana;
index index.html
client_max_body_size 30M;

#charset koi8-r;
rewrite_log off;
access_log  /var/www/html/grafana.access.log  main;
error_log   /var/www/html/grafana.error.log debug;
}

grafana config.js :

   // Graphite & Elasticsearch example setup
   datasources: {
  graphite: {
    default: true,
    type: 'graphite',
    url:  "http://graphite.mydomain.net:8000",
    render_method: 'GET',
  },
 /* elasticsearch: {
    type: 'elasticsearch',
    url: "http://my.elastic.server.com:9200",
    index: 'grafana-dash',
    grafanaDB: true,
  }*/
},

curl => working fine :

[root@dev nginx]# curl -XGET 'http://graphite.mydomain.net:8000/metrics/find?query=*'
[{"leaf": 0, "context": {}, "text": "ben", "expandable": 1, "id": "ben", "allowChildren": 1}, {"leaf": 0, "context": {}, "text": "ben_africanwshub_com", "expandable": 1, "id": "ben_africanwshub_com", "allowChildren": 1}, {"leaf": 0, "context": {}, "text": "carbon", "expandable": 1, "id": "carbon", "allowChildren": 1}, {"leaf": 0, "context": {}, "text": "dev_mydomain_net", "expandable": 1, "id": "dev_mydomain_net", "allowChildren": 1}, {"leaf": 0, "context": {}, "text": "system", "expandable": 1, "id": "system", "allowChildren": 1}, {"leaf": 0, "context": {}, "text": "web", "expandable": 1, "id": "web", "allowChildren": 1}, {"leaf": 0, "context": {}, "text": "web_mydomain_com", "expandable": 1, "id": "web_mydomain_com", "allowChildren": 1}][root@dev nginx]#

graphite default ui => worknig fine :

GET http://graphite.mydomain.net:8000/render/ [HTTP/1.1 200 OK 106ms]
02:07:59.269 GET http://graphite.mydomain.net:8000/metrics/find/ [HTTP/1.1 200 OK 36ms]
02:07:59.271 GET http://graphite.mydomain.net:8000/content/js/ext/resources/images/default/tree/loading.gif [HTTP/1.1 200 OK 102ms]
02:07:59.452 GET http://graphite.mydomain.net:8000/content/js/ext/resources/images/default/tree/elbow-minus.gif [HTTP/1.1 200 OK 30ms]
02:07:59.453 GET http://graphite.mydomain.net:8000/content/js/ext/resources/images/default/tree/folder-open.gif [HTTP/1.1 200 OK 58ms]
02:07:59.453 GET http://graphite.mydomain.net:8000/content/js/ext/resources/images/default/tree/elbow-line.gif [HTTP/1.1 200 OK 29ms]
02:08:04.900 GET http://graphite.mydomain.net:8000/metrics/find/ [HTTP/1.1 200 OK 42ms]

grafana => an extract of my web browser console log :

02:06:05.701 GET http://grafana.org/assets/img/logo_transparent_200x75.png [HTTP/1.1 304 Not Modified 20ms]
02:06:05.701 GET http://graphite.mydomain.net:8000/render [HTTP/1.1 200 OK 177ms]
02:06:11.521 Empty string passed to getElementById(). app.c7840ed8.js:4
02:06:12.715 Error in parsing value for 'background'. Declaration dropped. metro.mydomain.net
02:06:12.715 Expected color but found 'left'. Error in parsing value for 'background'. Declaration dropped. metro.mydomain.net
02:06:12.833 Empty string passed to getElementById(). app.c7840ed8.js:4
02:06:13.001 GET http://graphite.mydomain.net:8000/metrics/find/ [HTTP/1.1 200 OK 26ms]

Please help me????

Thanks.

Regards

from graphite-api.

In your grafana config you're pointing to port 8000, whereas nginx is set up for CORS on port 443 according to your configuration. Can you try again with the proper url in grafana's config.js?

from graphite-api.

Hi @brutasse,

I have change config and still have the same errors.

Do you see something wrong in my graphite CORS configuration?

Thanks.

Regards,
Eugène NG

from graphite-api.

What's the content of the Origin header when grafana tries to make a request to Graphite in your web browser? If it's http://metro.mydomain.net, the clause $http_origin ~* "^http://metro.mydomain.net:80$" doesn't match.

With your current config, if you do curl -v -H "Origin: http://metro.mydomain.net:80" "https://graphite.mydomain.net/metrics/find?query=*" you should see the Access-Control-Allow-* headers in return. If that works, look at your browser's network debugger to find out what Origin header is being sent and try to match it.

from graphite-api.

Hi,

I didn't update the post. I succeeded to set up my grafana ui with graphite-web. The problem was that it's not possible to use cross domain with js and my browser (client) is not on the same machine as my grafana/graphite.
What I did is to put the grafana url itself in datasources of config.js, and redirect it locally to my local graphite domain. This is my nginx and grafana/graphite configuration :

graphite nginx conf :

server {
listen     443;
ssl on;
ssl_certificate /etc/pki/tls/certs/dev.mydomain.net.crt; 
ssl_certificate_key /etc/pki/tls/certs/dev.mydomain.net.key;

server_name  graphite.mydomain.net;

#charset koi8-r;
rewrite_log off;
access_log  /srv/www/graphite/access.log  main;
error_log   /srv/www/graphite/error.log debug;

#
location / {
proxy_pass http://graphite:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;

if ($http_origin ~*  "^https://metro.mydomain.net:443$"){
set $cors "true";
}       
if ($request_method = 'OPTIONS') {
set $cors "${cors}options";  
}

if ($request_method = 'GET') {
set $cors "${cors}get";  
}

if ($request_method = 'POST') {
set $cors "${cors}post";
}

if ($cors = 'true') {
add_header  "Access-Control-Allow-Origin" "$http_origin";
add_header  "Access-Control-Allow-Credentials" "true";
add_header  "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
add_header  "Access-Control-Allow-Headers" "Authorization, origin, accept";
}

if ($cors = "trueoptions") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X Requested-With,If-Modified-Since,Cache-Control,Content-Type';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;

return 204;
}

if ($cors = "truepost") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

if ($cors = "trueget") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
   }
}

grafana nginx conf :

server {
listen     443;
ssl on;
ssl_certificate /etc/pki/tls/certs/dev.mydomain.net.crt;
ssl_certificate_key /etc/pki/tls/certs/dev.mydomain.net.key;

server_name  metro.mydomain.net;
root   /var/www/html/grafana;
index index.html
client_max_body_size 30M;

#charset koi8-r;
rewrite_log off;
access_log  /var/www/html/grafana.access.log  main;
error_log   /var/www/html/grafana.error.log debug;

location /render {
    proxy_pass http://graphite:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}
location /metric {
    proxy_pass http://graphite:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

grafana config.js :

 // Graphite & Elasticsearch example setup
 datasources: {
 graphite: {
 default: true,
 type: 'graphite',
 url:  "https://metro.mydomain.net",
 render_method: 'GET',
},
/* elasticsearch: {
type: 'elasticsearch',
url: "http://my.elastic.server.com:9200",
index: 'grafana-dash',
grafanaDB: true,
  }*/
 },

Note that here, I could have graphite can be replace in my URLs by localhost and it will still work.

Now I can create and save my graphs/

Hope this will help other people facing with grafana set up.

Regards,

from graphite-api.

FWIW I have a setup that bundles everything on a single nginx vhost (elasticsearch, grafana and graphite-api). Here's how it's done:

upstream grafana_es {
        server es.internal:9200 fail_timeout=0;
}

upstream graphite {
        server graphite.internal:8888 fail_timeout=0;
}

server {
        listen 443 ssl;
        server_name graph.internal;
        root /srv/www/grafana;
        ssl_certificate /path/to/crt;
        ssl_certificate_key /path/to/key;
        keepalive_timeout 70;

        location / {
                rewrite ^/$ /index.html;
                try_files $uri @graphite;
        }

        location @graphite {
                proxy_pass http://graphite;
        }

        location ~ ^/grafana-dash {
                proxy_pass http://grafana_es;
        }
}

Then in grafana config you can do url: window.location.protocol + '//' + window.location.hostname for graphite and elasticsearch.

from graphite-api.