From a640d5529778c5f055b2d65e3e914a326dbf1180 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 09:27:49 +0200 Subject: [PATCH] Added informatio & help blocks to graphite metric editor --- src/app/partials/graphite/editor.html | 108 ++++++++++++++++++++++---- src/app/partials/influxdb/editor.html | 16 ++-- src/css/less/grafana.less | 19 +++++ 3 files changed, 120 insertions(+), 23 deletions(-) diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index 82241ec1923..46e7d081884 100755 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -1,4 +1,4 @@ -
+
Duplicate - -
  • - - Toggle request options - -
  • @@ -80,24 +73,109 @@
    • -
    +
    + +
      +
    • + +
    • - cacheTimeout Graphite parameter to overwride memcache default timeout (unit is seconds) + cacheTimeout
    • + class="input-mini grafana-target-segment-input" + ng-model="panel.cacheTimeout" + bs-tooltip="'Graphite parameter to overwride memcache default timeout (unit is seconds)'" + data-placement="right" + spellcheck='false' + placeholder="60">
    -
    +
    +
    +
    + +
    + +
    +
    + +
    +
    Shorter legend names
    +
      +
    • alias() function to specify a custom series name
      • +
    • aliasByNode(2) to alias by a specific part of your metric path
      • +
    • aliasByNode(2, -1) you can add multiple segment paths, and use negative index
      • +
    • groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by
      • +
    +
    + +
    +
    Series as parameter
    +
      +
    • Some graphite functions allow you to have many series arguments
      • +
    • Use #[A-Z] to use a graphite query as parameter to a function
      • +
    • + Examples: +
        +
      • asPercent(#A, #B)
        • +
      • prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query
        • +
      • prod.srv-01.counters.count - sumSeries(#A) : sum count and series A
        • +
      • divideSeries(#A, #B)
        • +
      +
      • +
    • If a query is added only to be used as a parameter, hide it from the graph with the eye icon
      • +
    +
    + +
    +
    Stacking
    +
      +
    • You find the stacking option under Display Styles tab
      • +
    • When stacking is enabled make sure null point mode is set to 'null as zero'
      • +
    +
    + +
    +
    Templating
    +
      +
    • You can use a template variable in place of metric names
      • +
    • You can use a template variable in place of function parameters
      • +
    • You enable the templating feature in Dashboard settings / Feature toggles
      • +
    +
    + +
    diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html index 70da2fbf282..4fd13645d3d 100644 --- a/src/app/partials/influxdb/editor.html +++ b/src/app/partials/influxdb/editor.html @@ -181,8 +181,8 @@
      -
    • - +
    • +
    • group by time @@ -227,8 +227,8 @@
      -
      - Alias patterns: +
      +
      Alias patterns
      • $s = series name
      • $g = group by
        • @@ -236,8 +236,8 @@
      -
      - Stacking and fill: +
      +
      Stacking and fill
      • When stacking is enabled it important that points align
      • If there are missing points for one series it can cause gaps or missing bars
        • @@ -247,8 +247,8 @@
      -
      - Group by time: +
      +
      Group by time
      • Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana
      • Leave the group by time field empty for each query and it will be calculated based on time range and pixel width of the graph
        • diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 022319a1042..7c17e6967db 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -485,3 +485,22 @@ select.grafana-target-segment-input { color: @variable; } +.grafana-info-box:before { + content: "\f05a"; + font-family:'FontAwesome'; + position: absolute; + top: -8px; + left: -8px; + font-size: 20px; + color: @blue; +} + +.grafana-info-box { + position: relative; + padding: 5px 15px; + background-color: @grafanaTargetBackground; + border: 1px solid @grafanaTargetBorder; + h5 { + margin-top: 5px; + } +}