Невозможно настроить жирафа с графитом

Я пытаюсь настроить жирафа с графитом (0.9.10). Graphite успешно работает на порте 8080, и я могу запустить giraffe на порту 9000. Я попытался настроить dashboards.js в giraffe, чтобы он указывал на тестовую метрику в графите (foo.bar.bz), но я не вижу никакой диаграммы в Жираф по этой метрике (только в графите). Скорее всего, я неправильно настроил dashboards.js - любые предложения по устранению / устранению неисправностей будут приняты с благодарностью.

Обновление: попытка JSONP неверно сконфигурирована - ошибка, которую я вижу в консоли браузера, выглядит следующим образом (не совпадает с текущей версией dashboards.js, установленной на сервере):

 http://localhost:9000/graphite/render?from=-10minutes&&target=foo.bar.bz&ma…&format=json&jsonp=jQuery1830533570789033547_1387578768576&_=1387578768732 

dashboards.js

var graphite_url = "0.0.0.0:8080"; 

var dashboards =
[
  { "name": "foo.bar.bz",  // give your dashboard a name (required!)
    "refresh": 5000,  // each dashboard has its own refresh interval (in ms)
    // add an (optional) dashboard description. description can be written in markdown / html.
    "description": "foo.bar.bz test" ,
    "metrics":  // metrics is an array of charts on the dashboard
    [
      {
        "alias": "foo.bar.bz",  // display name for this metric
        "target": "foo.bar.bz",  // enter your graphite barebone target expression here
        "description": "New test",  // enter your metric description here
        "summary": "sum",  // available options: [sum|min|max|avg|last|<function>]
        "summary_formatter": d3.format(",f") // customize your summary format function. see d3 formatting docs for more options
      },
      {
        "alias": "signup breakdown",
        "targets": ["sumSeries(enter.your.graphite.metrics.here)",  // targets array is also supported
                    "sumSeries(enter.another.graphite.metrics)"],   // see below for more advanced usage
        "description": "signup breakdown based on site location",
        "renderer": "area",  // use any rickshaw-supported renderer
        "unstack": true  // other parameters like unstack, interpolation, stroke, min, height are also available (see rickshaw documentation for more info)
      },
      {
        "alias": "Registration breakdown",
        "target": "sumSeries(enter.your.graphite.metrics.here)",
        // target can use a javascript function. This allows using dynamic parameters (e.g. period). See a few functions
        // at the bottom of this file.
        "target": function() { return 'summarize(events.registration.success,"' + entire_period() + 'min)' },
        "renderer": "bar",
        "description": "Registrations based on channel",
        "hover_formatter": d3.format("03.6g"),  // customize your hover format
        "null_as": 0  // null values are normally ignored, but you can convert null to a specific value (usually zero)
      },
    ]
  },
  { "name": "Visuals",
    "refresh": 10000,
    // you can use any rickshaw supported color scheme.
    // Enter palette name as string, or an array of colors
    // (see var scheme at the bottom).
    // Schemes can be configured globally (see below), per-dashboard, or per-metric
    "scheme": "classic9",   // this is a dashboard-specific color palette
    "description": "#Visual settings <img class='pull-right' src='img/giraffe.png' />",
    "metrics":
    [
      {
        "alias": "network",
        "target": "aliasByNode(derivative(servers.system.eth*),4)",
        "events": "*",  // instead of annotator, if you use the graphite events feature
                        // you can retrieve events matching specific tag(s) -- space separated
                        // or use * for all tags. Note you cannot use both annotator and events.
        "description": "main system cpu usage on production (cardinal interpolation, line renderer, colspan=3)",
        "interpolation": "linear",
        "colspan": 3,
      },
      {
        "alias": "cpu utilization",
        "target": "aliasByNode(derivative(servers.system.cpu.*),4)",  // target can use any graphite-supported wildcards
        "annotator": 'events.deployment',  // a simple annotator will track a graphite event and mark it as 'deployment'.
                                           // enter your graphite target as a string
        "description": "cpu utilization on production (using linear interpolation). Summary displays the average across all series",
        "interpolation": "linear",  // you can use different rickshaw interpolation values
        "stroke_width": 1,  // change stroke width
        "summary": "avg",
      },
      {
        "alias": "proc mem prod",
        "targets": ["aliasByNode(derivative(servers.system.cpu.user),4)",  // targets array can include strings,
                                                                           // functions or dictionaries
                   {target: 'alias(derivative(servers.system.cpu.system,"system utilization")',
                    alias: 'system utilization',                           // if you use a graphite alias, specify it here
                    color: '#f00'}],                                       // you can also specify a target color this way
                                                                           // (note that these values are ignored on the demo)
        // annotator can also be a dictionary of target and description.
        // However, only one annotator is supported per-metric.
        "annotator": {'target' : 'events.deployment',
                      'description' : 'deploy'},
        "description": "main process memory usage on production (different colour scheme and interpolation)",
        "interpolation": "step-before",
        "scheme": "munin",  // this is a metric-specific color palette
      },
      {
        "alias": "sys mem prod",
        "target": "aliasByNode(derivative(servers.system.cpu.*),4)",
        "events": "*",  // instead of annotator, if you use the graphite events feature
                        // you can retrieve events matching specific tag(s) -- space separated
                        // or use * for all tags. Note you cannot use both annotator and events.
        "description": "main system memory usage on production (cardinal interpolation, line renderer)",
        "interpolation": "cardinal",
        "renderer": "line",
        "max": 150,  // you can specify max value for the y-axis
        "min": 20,   // and also min
      },
    ]
  },
  { "name": "Setup",
    "refresh": 10000,
    "scheme": "colorwheel",
    "graphite_url": "demo",  // you can override the default graphite_url with a dashboard-specific url
    "description": "#Setup and configuration <img class='pull-right' src='img/giraffe.png' />"
                +"\n"
                +"\n##Installation"
                +"\n"
                +"\nTo install giraffe, simply [download](https://github.com/kenhub/giraffe/archive/master.zip) the code and run it from your browser."
                +"\nYou can put it on any type of web server, and also open the `index.html` file from your local drive."
                +"\n"
                +"\n##Authentication"
                +"\n"
                +"\nGiraffe uses JSONP to retrieve the data from your graphite server. It should work out of the box, unless you"
                +"\nhave setup authentication. Basic authentication seems to work in Firefox (it will prompt you), "
                +"\nbut with Chrome you might need to authenticate to your graphite server first, and then access Giraffe."
                +"\n"
                +"\n##Configuration"
                +"\n"
                +"\nThe main configuration for all dashboards is found in `dashboards.js`. The file is reasonably self-explanatory, "
                +"\nso please take a look."
                +"\n"
                +"\nIf you need to change the page layout, CSS, or add/remove a time period, you can also edit `index.html` and `css/main.css` file."
                +"\n"
                ,
    "metrics":
    [
      {
        "alias": "production HTTP req",
        "target": "aliasByNode(derivative(servers.gluteus-medius.Http.http_response_rates.*),4)",
        "renderer": "bar",
        "interpolation": "cardinal",
        "summary": "last",
      },
    ]
  },
];

var scheme = [
              '#423d4f',
              '#4a6860',
              '#848f39',
              '#a2b73c',
              '#ddcb53',
              '#c5a32f',
              '#7d5836',
              '#963b20',
              '#7c2626',
              ].reverse();

function relative_period() { return (typeof period == 'undefined') ? 1 : parseInt(period / 7) + 1; }
function entire_period() { return (typeof period == 'undefined') ? 1 : period; }
function at_least_a_day() { return entire_period() >= 1440 ? entire_period() : 1440; }

Обновить:

Сначала я использовал giraffe-web и использовал nginx для прокси-запросов к службе узла. Поскольку я временно прекратил использовать giraffe-web, я прокомментировал часть прокси из файла по умолчанию nginx (соответствующий раздел скопирован ниже). Я использую это как отдельный сервер на порту 86 - если это проблема, я могу изменить свой файл conf nginx. На данный момент веб-интерфейс жирафа не может получить тестовую метрику, которую я пытаюсь получить из графита (я могу просмотреть эту диаграмму метрики в графите). Я изменил dashboards.js на IP-адрес, на котором работает служба. Я могу попробовать изменить имя хоста сервера, если больше ничего не работает. Благодарю.

серверный { ## внешний интерфейс жирафа для прослушивания графита 86; слушать [::]:86; ## ipv6only=on; имя_сервера жираф; root /opt/graphite/webapp/giraffe-master/; index index.html index.htm; ## ведение журнала на сервер access_log /var/log/nginx/giraffe/access.log; error_log /var/log/nginx/giraffe/error.log;

    location / {
            #proxy_redirect off;
            #proxy_set_header X-Real-IP $remote_addr;
            #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_set_header X-Forwarded-Proto $scheme;
            #proxy_set_header Host $http_host;
            #proxy_set_header X-Nginx-Proxy true;
            #proxy_set_header Connection "";
            #proxy_http_version 1.1;
            #proxy_set_header Host $host;  ##removed the $http_host option
            #proxy_pass http://giraffe;
    }

}

2 ответа

Я создатель жирафа. Надеюсь, я смогу помочь.

Первое, что я заметил, это то, что вы настроили graphite_url указать на 0.0.0.0:8080, Это должно быть неверно. Поскольку Giraffe основан на javascript, он запускается на клиенте, поэтому вместо этого адрес должен быть внешним IP / FQDN вашего графитового сервера.

Кроме того, если вы хотите запустить Giraffe на том же сервере, что и ваш графит, самый простой способ сделать это - поместить файлы жирафа в ту же структуру папок, что и графит, и убедиться, что ваш веб-сервер указывает на него.

Например, на нашей установке я поместил файлы жирафа в /opt/graphite/webapp/giraffe а затем в нашем конфиге nginx установите корень документа как root /opt/graphite/webapp (если вы используете Apache, вы можете сделать то же самое, используя DocumentRoot Я верю).

Тогда вы сможете получить доступ к графиту и жирафу на одном и том же адресе / порте, и это также устранит любые междоменные проблемы для вас. Тогда вам не нужно запускать его на разных портах.

Ура Йоав

Я использую веб-сервер apache2, я добавил псевдоним для своего жирафа в /etc/apache2/httpd.conf.

Alias /giraffe/   /home/vagrant/giraffe/

Перезапустите ваш веб-сервер apache, он будет доступен как:

IP / жираф / index.html.

http://graphite_url.com/giraffe/index.html

замените графитовый URL своим IP-адресом или полным доменным именем

Во-вторых, вы уверены, что ваш углеродный демон запущен?

Reg URL,

var graphite_url = "http://10.0.1.11"; 
Другие вопросы по тегам