kenhub / giraffe Goto Github PK

Right now all graphs are live and dynamic. but sometimes we do want to select an absolutely range of time to display static graphs for investigation. Is this possible?

Hi, first of all - great job!
Consider the following scenario:

1. Default period is 1440.
2. Open Giraffe in browser points me to "DashA" at 1440 (1day).
3. I change to period to 10 minutes.
4. Switch to "DashB" - what happens is that first, "DashB" is loaded with default period and after it loads changes to the previous period which was 10 minutes.
   Now for each target, instead of giving the target string, I have a JS function that summarizes depending on the the period, what I noticed is that when switching dashboards, that function isn't invoked.
   I tried without a function and the same behavior happens.
   You can see this with Firebug or Chrome developer tools that upon dashboard change there are 2 consecutive requests.
   First request with &target=-1440
   Second request with &target=-10 (or whatever you were in).

The only workaround I found for now is to change the default period to something smaller, that makes the first request much smaller and more responsive.

Thanks,
Idan.

Hi,

I have a graph which shows a percentage between 0% and 100%, but most of the time hovers around the same value (say, 80%). When it's fairly static the graph will scale the Y-axis down, which doesn't look very nice - e.g. http://i.imgur.com/qRAc2Oe.png

I can see there's a 'min' and 'max' option for graphs but this doesn't appear to be working the way I want it to. The above graph uses the following settings:

      {
        "alias": "Cache Hit Rate (%)",
        "target": [ { "target": "alias(stats.gauges.cache.hitpct,'Cache Hit Rate Pct')", "alias": "Cache Hit Rate Pct", "color": "#518183" } ],
        "description": "",
        "renderer": "line",
        "summary": "last",
        "summary_formatter": d3.format(".2f"),
        "interpolation": "basis",
        "colspan": 1,
        "null_as": 0,
        "min": 0,
        "max": 100
      }

I can see there's a way to set a fixed range with Rickshaw, but I'm not sure how this would be implemented in Giraffe?

http://stackoverflow.com/questions/18323943/how-to-set-y-axis-to-fixed-range-in-rickshaw

Thanks

Hi I have the following configuration code, for some reason it does not work as expected.

//Warning Notifications
var cpu_warn = "constantLine(80)" ;
var memory_warn = "constantLine(1024)";
var throughput_warn = "constantLine(1000)"

{
"alias": "CPU Usage", // display name for this metric
"target": [cpu,"stats.gauges.server1.cpu", cpu_warn],
"description": "CPU usage as a function of time",
"summary": "last",
"summary_formatter": d3.format(",f")
},

However when i tried in graphite it worked without a problem.

1. Regarding Dark CSS version of Giraffe, Do we have it available? I tried cloning the version of syepes #36., rendering was improper.
2. In case I would want to parse the URL, where must i write the parsing script, currently i am writing it in config.js which is logically incorrect, Where would the controller be?

Thanks

it would be nice to allow summarize(foo.bar,'1min') per single target w/o drawing the values between the datapoints as zero
my config (part):

      {
        "alias": "foo",
        "targets":
                   {target: 'alias(123,"123")',
                    alias: '123',
                    color: '#859900'},
                   {target: 'alias(summarize(456,"10min"),"456")',
                    alias: '456',
                    color: '#268BD2'},
                   ],
        "renderer": "area",
        "unstack": true,
        "events": "*",
        "description": "777",
        "interpolation": "linear",
        "summary": "sum",
        "colspan": 3,
      },

screenshot of the graph (blue=summarized):

here is an example from the rickshaw docs

Hi Kenhub Team,

Is there a way to use multiple target for a graph ?

For example :

    "metrics":
        [
            {
                "alias": "HTTP Responses",
                "target" : [
                    'alias(http.www_example_org_HTTP.http_2xx,"HTTP+2xx")',
                    'alias(http.www_example_org_HTTP.http_3xx,"HTTP+3xx")',
                    'alias(http.www_example_org_HTTP.http_4xx,"HTTP+4xx")',
                    'alias(http.www_example_org_HTTP.http_5xx,"HTTP+5xx")'
                ],
                "renderer" : "area",
                "unstack" : false,
                "interpolation": "cardinal",
                "summary": "avg"
            }
        ]

The hover tooltip is not working correctly on "sys mem prod" graph of the "Visuals" demo dashboard at http://kenhub.github.io/giraffe/#dashboard=Visuals&timeFrame=1d. The hover only shows values for Moscow when moving the cursor over the lines, and gives some ghost-values for Shanghai when moving the cursor near the top edge of the graph.

This is apparently due to an missing "unstack": true, line from the dashboard configuration.

Overall, it seems strange that any configuration can lead to this kind of behaviour for the cursor hover.

I used the excellent giraffe-collectd generator to autocreate a dashboards.js file based on all of the collectd hosts that I have in graphite.

The problem is that I've got thousands of hosts in graphite, so the dropdown where it says "Dashboards" is longer than the vertical resolution. Upstream bootstrap doesn't give a crap.

So the solution is simply adding this to bootstrap.js under .dropdown-menu

   max-height: 500px;
   overflow-y: auto;
   overflow-x: hidden;

You could hack this into the index.html via a style attribute as well on the dropdown-menu div, or you could move to using something like select2, which would give you a nice find as you type search of all of the menus. Obviously I can do this quite easily on my own "version" of giraffe, but I'd like to see changes incorporated upstream if possible. What do you think?

It would be nice to extend Giraffe's functionality by support for Rickshaw's rangeslider.

Desired features:

• move the time window back and forth within a graph
• change the zoom, either continuously or in steps

If there is some work already done, please advice. Thank you, .zp.

Hi, is it possible to have dynamic dashboards where we can pass arguments and dashboard is updated on fly.

// Example//
http://10.0.1.5/giraffe/index.html#dashboard=demo&timeFrame=1h&server=server1

Now server1 has an associative mapping where metrics of interest are server1.cpu0, server1.mem, server1.throughput ;

Current version of Giraffe has a nice config file where we have to hardcode the metrics, I wonder if we have a workaround to generate dashboards on fly without using utility like sed.

Do you mind taking a moment to explain how to use custom colors

In the example or template you have
var scheme = [
'#423d4f',
'#4a6860',
'#848f39',
'#a2b73c',
'#ddcb53',
'#c5a32f',
'#7d5836',
'#963b20',
'#7c2626',
].reverse();

do we just set it as "color" : "color.reverse()", how does this work?

Starting with the default dashboards.js I have configured the following metric:

"metrics": 
    [
      {
              "alias": "cpu",
              "target": "system.cpu-*.cpu-user",
              "description": "CPU usage",
              "colspan": 3,
              "renderer": "bar",
      },
    ]

This plots a stacked bar graph as expected, however if I comment out renderer or set it to anything other than bar I get a blank graph!?

What have I missed?

Hi,

I'm just getting started with Giraffee. Is there a simple way to make a dashboard that shows all metrics? I think it would help show which ones I have and how I can refine the dashboards from there.

Thanks!

-Teran

Is it possible to include non-Graphite-based charts on a dashboard? For instance, visualizations from Google Analytics or Keen.IO. I'm thinking that leaving the chart target blank and providing a function to description could do the trick, in a hackish sort of way.

If this isn't already possible, but is desirable, I'll see about a pull request. Otherwise, I'll just hack it in myself. :)

Hello all,

Fistly the Giraffe rocks! it definitely saved us lots of time to reinvent the wheels while doing our very customised data visualisation.

The question is simple, do you have any best practice on adding other types of d3 visualisations to web page? I almost started hack into the giraffe.js file and insert my code to generate something like pie charts, gauges instead of the x,y based bar charts.

Regards

James

This is more of a placeholder bug for me not to forget. I can implement this and it should be straightforward enough to do.

I have a graph where I am doing an aliasbynode rendering where I do not know ahead of time the nodes or node name. When I set the color scheme to something like colorwheel (I've tried several other rickshaw options as well) I do indeed get a metric for each node however, the contrast is so low I cannot easily distinguish between nodes. I actually cannot determine how these colors are being chosen as I spplied a custom list where each color was highly contrasted and it just seemed to pick the first and lighten it slightly for each additional node. Is there a way to take a target like the following and specify a list of colors and the order in which they should be displayed?

aliasByNode(cumulative(stats.application.Nodes.*.msg_posted),3)

How would one go about displaying the graphs in a timezone other than GMT? Bonus points for using the browser's timezone so the graphs make sense for each client.

Hello,
I'm setting up an internal dashboard with giraffe.
One metric is the open session count per server. We want one diagram. My config is the following:
{
"alias": "Offene Sessions Gesamt",
"targets": ["alias(unspecified.noris.mvnode1.redgiant.redgiant.CountSessions,'mvnode1')",
"alias(unspecified.noris.mvnode2.redgiant.redgiant.CountSessions,'mvnode2')",
"alias(unspecified.noris.web1.redgiant.redgiant.CountSessions,'web1')"],
"description": "Offene Sessions Gesamt",
"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)
"summary": "last",
"scheme": "munin",
},
The problem is the summary last, as the summary is wrong. Probably it doesn't sum up the different targets as the graph visually does.

Hi,

When i use timeshift function with metrics for 3 weeks ore more its does not display graph properly as example below;
timeShift(vip.HTTPS.10_5_202_1,'3w')

However, when i used for 2 weeks it render graph well as below;
timeShift(vip.HTTPS.10_5_202_1,'2w').

Any clue?

Thanks

In Track Every Release, the Etsy crew mentions how they graph deployments as infinite lines against other metrics using graphite's built-in drawAsInfinite() function:

However, drawAsInfinite() doesn't do anything when using the JSON output format. I don't see an obvious analogue in the D3.js or Rickshaw documentation.

Is there any way to use this valuable technique in Giraffe/Rickshaw/D3? If not, can it be added?

Hello,

Currently, if I do not specify the "min" and "max" values - the graph seems to scale correctly on the positive values of Y. But it does not scale on the negative values of Y.

Anyway to achieve this?

Thanks!
Vinay

When setting the width as 500px in the metrics its not being obeyed, <svg width="375" ...
Am I doing this wrong?

dashboard.js snippet

  "metrics": 
    [
      {
        "alias":"Carbon Statistics",
        "targets": ["sumSeries(carbon.agents.localhost_localdomain-a.cpuUsage)",
                    "sumSeries(carbon.agents.localhost_localdomain-a.memUsage)"],
        "renderer":"line",
        "interpolation":"cardinal",
    "unstack":"true",
       "height":"500", 
 **--->"width":"500"<---**
        }
    ]

......
<div class="span4" id="graph-0">
      <h2>Carbon Statistics <span class="pull-right graph-summary"><span></span></span></h2>
      <div class="chart rickshaw_graph">
**->  <svg width="357" height="500"> <--**
              <path class="path" ....

Hello,

How can one draw a threshold line in giraffe?

Best regards,

Marko

the time stamp is always sitting on the top when hover mouse over a data point. when the value of the data is close to the highest value, the target title will overlap the time stamp. I was trying to add padding as an option in metrics but seems does not work. Any workarounds of this issue?

H​ello,

I am trying to build some dashboards that contain lots of data points and when I try to graph a period larger than 1d, it practically kills Firefox as Giraffe is always retrieving all the data points from Graphite independently of the selected period.

Does Giraffe have any kind of summary feature, that tells Graphite to summarize the data before sending it back to Giraffe and as a consequence drastically reducing the memory footprint of Firefox.

Something like this would be nice:

  // Using Graphites summarize or other functions
  "summarize": {'10min' : 'None',
                '1h' : 'None'
                '3h' : '5min'
                '1d' : '1h',
                '1w' : '1h',
                '2w' : '2h',
                '7w' : '1d'
               }

Best regards and thanks for any help in advance,
Sebastian

I want to remove the GMT text which is followed by date and time in graph. Please let me know how can I remove that text. @gingerlime

Current layout is neat but it does not allow to stack up lot of graphs to the screen.

Desired features:

• minimal borders around the layout
• possibility to change height of each row of graphs
• definition of layout should be part of dashboard.js file (?)

Did anybody think about such layout/design already? Thank you, .zp.

the timezone setting in graphite is "Aisa/Chongqing", but in Giraffe, the timezone is always earlier than setting in graphite, is there anyway setting up the timezone in Giraffe ?

Hi,

I'm experiencing terrible performance across all latest browsers when trying to display per-second graphs at intervals of 3 hours or more.

For example, I have a graph that records the number of requests per second. Over 24 hours that's 86400 data points. Using the '1d' interval takes a very long time to load (if it even does), and the tooltip performance in such a case is dire. Even on the 3h interval, the hover tooltips are practically unusable.

My dashboard configuration from dashboard.js:

var dashboards =
[
  { "name": "ACME International", 
    "refresh": 5000,  
    "description": "",
    "metrics": 
    [
      {
        "alias": "Request Rate", 
        "target": [ { "target": "alias(stats.requests,'requests per second')", "alias": "requests per second", "color": "#518183" },
                    { "target": "alias(movingAverage(stats.requests,60),'requests per minute (avg)')", "alias": "requests per minute (avg)", "color": "#ffae35" } ],
        "description": "Requests per minute is a moving average of the last 60s", 
        "summary": "last", 
        "summary_formatter": d3.format(",f"), 
        "renderer": "line",
        "colspan": 3,
        "unstack": true,
//        "null_as": 0
      },
      {
        "alias": "HTTP 503 Errors",
        "target": [ { "target": "alias(stats.error503,'503 errors per second')", "alias": "503 errors per second", "color": "#518183" } ],
        "description": "A 503 error is generated when a backend server is not available to service a request",
        "summary": "last",
        "summary_formatter": d3.format(",f"),
        "colspan": 3,
        "renderer": "line",
        "null_as": 0
      }
    ]
  },
];

Am I trying to show too much data at once here?

I'm trying to get some diamond metrics plotted in giraffe. These metrics appear to have a lot of null values in them. According according to the readme these points should be ignored.

When using the following metric settings, no visible lines or datapoints are plotted on the graph. However, when hovering over the graph, There are tooltips on hover where points should be.

{
  alias: "Free disk space",
  targets: [
    "diamond.servers.hostname.diskspace.*{1,2}.byte_free",
  ],
  description: "Amount of diskspace free on hosts",
  summary_formatter: d3.format(",f"),
  unstack: true,
  renderer: "line",
  max: 1 * 1024 * 1024 * 1024 * 1024
}

When using a "null_as" option, a line is visible. As expected, the line is a series of points between 0 and the expected result.

{
  alias: "Free disk space",
  targets: [
    "diamond.servers.hostname.diskspace.*{1,2}.byte_free",
  ],
  description: "Amount of diskspace free on hosts",
  summary_formatter: d3.format(",f"),
  unstack: true,
  renderer: "line",
  max: 1 * 1024 * 1024 * 1024 * 1024,
  null_as: 0
}

Is the behaviour without the null_as option expected? If null points are being ignored, I would expect a line to be plotted between all non-null values. That does not seem to be the case.

Below is the complete response from graphite:

jQuery18308809974906211494_1383751472212([{"target": "diamond.servers.hostname.diskspace._data1.byte_free", "datapoints": [[null, 1383747960], [null, 1383748020], [318351450112.0, 1383748080], [null, 1383748140], [null, 1383748200], [null, 1383748260], [null, 1383748320], [318303240192.0, 1383748380], [null, 1383748440], [null, 1383748500], [null, 1383748560], [null, 1383748620], [318245060608.0, 1383748680], [null, 1383748740], [null, 1383748800], [null, 1383748860], [null, 1383748920], [318179962880.0, 1383748980], [null, 1383749040], [null, 1383749100], [null, 1383749160], [null, 1383749220], [318132523008.0, 1383749280], [null, 1383749340], [null, 1383749400], [null, 1383749460], [null, 1383749520], [318102335488.0, 1383749580], [null, 1383749640], [null, 1383749700], [null, 1383749760], [null, 1383749820], [318054187008.0, 1383749880], [null, 1383749940], [null, 1383750000], [null, 1383750060], [null, 1383750120], [318010208256.0, 1383750180], [null, 1383750240], [null, 1383750300], [null, 1383750360], [null, 1383750420], [317977153536.0, 1383750480], [null, 1383750540], [null, 1383750600], [null, 1383750660], [null, 1383750720], [317938487296.0, 1383750780], [null, 1383750840], [null, 1383750900], [null, 1383750960], [null, 1383751020], [317871906816.0, 1383751080], [null, 1383751140], [null, 1383751200], [null, 1383751260], [null, 1383751320], [317789999104.0, 1383751380], [null, 1383751440], [null, 1383751500]]}, {"target": "diamond.servers.hostname.diskspace._data2.byte_free", "datapoints": [[null, 1383747960], [null, 1383748020], [362749841408.0, 1383748080], [null, 1383748140], [null, 1383748200], [null, 1383748260], [null, 1383748320], [362747482112.0, 1383748380], [null, 1383748440], [null, 1383748500], [null, 1383748560], [null, 1383748620], [362744270848.0, 1383748680], [null, 1383748740], [null, 1383748800], [null, 1383748860], [null, 1383748920], [362450034688.0, 1383748980], [null, 1383749040], [null, 1383749100], [null, 1383749160], [null, 1383749220], [362403024896.0, 1383749280], [null, 1383749340], [null, 1383749400], [null, 1383749460], [null, 1383749520], [362401976320.0, 1383749580], [null, 1383749640], [null, 1383749700], [null, 1383749760], [null, 1383749820], [362400206848.0, 1383749880], [null, 1383749940], [null, 1383750000], [null, 1383750060], [null, 1383750120], [362398633984.0, 1383750180], [null, 1383750240], [null, 1383750300], [null, 1383750360], [null, 1383750420], [362397585408.0, 1383750480], [null, 1383750540], [null, 1383750600], [null, 1383750660], [null, 1383750720], [362164109312.0, 1383750780], [null, 1383750840], [null, 1383750900], [null, 1383750960], [null, 1383751020], [362162769920.0, 1383751080], [null, 1383751140], [null, 1383751200], [null, 1383751260], [null, 1383751320], [362158379008.0, 1383751380], [null, 1383751440], [null, 1383751500]]}])

Is there a way to configure the graph so that there is always at least 1 Y value is displayed at the max of the graph?

FYI - https://github.com/jedi4ever/giraffe-web.js

I see the Annotation support and was trying to apply it to my situation. The things I would like to annotate are actually Graphite Events (the stuff stored in the database side, not as whisper files)

If I understand the current implementation correctly, you take a metric and use it as data to annotate?

I'm curious about supporting the use of events as well. I tried the following with no success:

"annotator": "alias(events('*'),'Events')",

Anyway, just a thought. Thanks again.

Not really and issue but a flag on how graphite behaviour may impact multi renderer to ignore configured renderer for a target and use the default 'line'.

Graphite accepts aliases for some functions e.g. sumSeries() is the same as sum(), however when requesting JSON from graphite it normalises the function definition inline with its documentation within the response. EXAMPLE: JSON target within response for sum(some.metric.value) will be sumSeries(some.metric.value)

The above breaks giraffe multi renderer support as it evaluates based on exact match between its defined target and what graphite returns.

The legends are always hidden on start, and it would be nice to be able to have a setting in dashboard.js to show them on start, per-dashboard..

Hi,

Where can I find the version number?
Also, Can this be auto updated on new releases?

Google Chrome is having troubles to scroll the page and feels very laggy.
Safari / Firefox does not have this problem at all.

I checked d3.js examples with Chrome too and it does not seem to be the cause of this slowdown either (http://code.shutterstock.com/rickshaw/examples/formatter.html).

Any idea what may be causing the issue?

Let's have a definition:

"metrics":
[
{
"alias": "Files used",
"target": ["alias(avg(servers.stagingsrv0[123].system.open_files.used),'Average of stagingsrv0[123]')",
"aliasByNode(servers.stagingsrv0[123].system.open_files.used,1)"],
"description": "Open files used",
"renderer": "line",
"interpolation": "linear",
"colspan": 3,
},
]

How to draw the line of AVERAGE in different style (e.g. dashed) than others?

Thank you, .zp.

Hi,
recently we started to track our barcode-pools (with about 2 million barcodes each) with graphite and gauges in statsd. While we want to know our exact(!) remaining barcodes, its not possible in giraffe because of the function "_formatBase1024KMGTP" which kills the exact value in favor of those KMGTP suffixes.
I did a dirty hack by commenting out all of the functions contents and adding a "return y;" to get the values.

It is somehow possible to add a config option into the dashboard.js to do this job the clean way?

Hi,

I have a rails app which provides system inventory. Each server has a page. I'd like to embed graphite graphs onto the page. How easy/hard would it be to use giraffe for this?

Hello,
it's again me wih a very weird problem.
We fill graphite with data from ganglia via a ruby script. until yesterday, the path to the data examined via giraffe was the following:
unspecified.noris.mvnode1.jvm.gc.CMSOldGen.Usage_used
Now it became
mvnode1.jvm.gc.CMSOldGen.Usage_used
(the beginning was dropped).
Besides this, nothing changed. In Graphite itself, the graph generated by the data looks exactly the same, but in giraffe, the renderer type line is ignored and area is being used.
In this example configuration, the first metric uses an area graph, the second a line graph:

{
            "alias": "mvnode1",
            "target": "mvnode1.jvm.gc.CMSOldGen.Usage_used",
            "renderer": "line",
            "unstack": true,
            "description": "CMSOldGen of mvnode1",
        },
        {
            "alias": "mvnode1.2",
            "target": "unspecified.noris.mvnode1.jvm.gc.CMSOldGen.Usage_used",
            "renderer": "line",
            "unstack": true,
            "description": "CMSOldGen of mvnode1.2",
        },

Via a console.log in createGraph in giraffe.js i verified that metrics.renderer is always line, so I can't see why it's being ignored in the one case while it's not in the other. Do you have any idea how to debug this issue?

Hello,

I am wondering if Giraffe will provide function in near futuer that can do 'pretty print' on dashboards. If it will, that will be perfect. Thanks.

Regards

James

Hello,

I am trying to set a specific color for each metric using the “color” attribute but this seems not to work.

This should render (green, aqua, yellow, orange, red)

      {
        "alias": "Active",
        "targets": [{target: 'legendValue(aliasByNode(stats.counts.Events.Active.Normal,5),"avg","max","si")', color: '#00FF00'},
                    {target: 'legendValue(aliasByNode(stats.counts.Events.Active.Warning,5),"avg","max","si")', color: '#00FFFF'},
                    {target: 'legendValue(aliasByNode(stats.counts.Events.Active.Minor,5),"avg","max","si")', color: '#FF6600'},
                    {target: 'legendValue(aliasByNode(stats.counts.Events.Active.Major,5),"avg","max","si")', color: '#FFFF00'},
                    {target: 'legendValue(aliasByNode(stats.counts.Events.Active.Critical,5),"avg","max","si")', color: '#FF0000'},
                   ],
        "description": "Severity breakdown",
        "unstack": false,
        "renderer": "bar",
        "summary": "sum",
        "colspan": 3,
      }

As you can see in the image not all the colors are being rendered correctly:

Hi team,
Is there any way to change the Y axis and X axis values to outside of the graph. Because it's conflicting with the real time graphs.

The 10m/1h/3h/1d etc time selectors are OK, but it would be good to have something on the GUI to get to the previous/next time period - at the moment there is no way on the GUI to get a 1h wide view of anything except the current hour.