Merge branch 'master' into mavimo-feature/influxdb-filters

CHANGELOG.md

@@ -3,10 +3,12 @@ vNext
 - Allow special characters in serie names (influxdb datasource), PR #390 - thx  @majst01
 - Refactoring of filterSrv (Issue #428), thx @Tetha
 - New config for playlist feature. Set playlist_timespan to set default playlist interval (Issue #445) - thx @rmca
+- New graphite function definition added isNonNull (PR #461), - thx @tmonk42
 - New InfluxDB function difference add to function dropdown (PR #455)
 - Added parameter to keepLastValue graphite function definition (default 100), Closes #459
 - improved asset (css/js) build pipeline, added revision to css and js. Will remove issues related
   to the browser cache when upgrading grafana and improve load performance (Fixes #418)
+- Partial support for url encoded metrics when using Graphite datasource (PR #327) - thx @axe-felix
 
 # Fixes
 - Filter option loading when having muliple nested filters now works better.
@@ -14,6 +16,8 @@ vNext
   After an option is changed and a nested template param is also reloaded, if the current value
   exists after the options are reloaded the current selected value is kept (Closes #447, Closes #412)
 - Legend Current value did not display when value was zero, Fixes #460
+- Fix to series toggling bug that caused annotations to be hidden when toggling (hiding) series. Fixes #328
+- Fix for graphite function selection menu that some times draws outside screen. It now displays upward (Fixes #293)
 
 # 1.5.4 (2014-05-13)
 ### New features and improvements

src/app/directives/addGraphiteFunc.js

@@ -18,7 +18,7 @@ function (angular, app, _, $, gfunc) {
 
       var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
                               ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown"' +
-                              ' data-placement="bottom"><i class="icon-plus"></i></a>';
+                              ' data-placement="top"><i class="icon-plus"></i></a>';
 
       return {
         link: function($scope, elem) {

src/app/directives/bootstrap-tagsinput.js

@@ -87,13 +87,12 @@ function (angular, $) {
     .module('kibana.directives')
     .directive('gfDropdown', function ($parse, $compile, $timeout) {
 
-      function buildTemplate(items, ul) {
-        if (!ul) {
-          ul = [
-            '<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">',
-            '</ul>'
-          ];
-        }
+      function buildTemplate(items, placement) {
+        var upclass = placement === 'top' ? 'dropup' : '';
+        var ul = [
+          '<ul class="dropdown-menu ' + upclass + '" role="menu" aria-labelledby="drop1">',
+          '</ul>'
+        ];
 
         angular.forEach(items, function (item, index) {
           if (item.divider) {
@@ -122,10 +121,12 @@ function (angular, $) {
         link: function postLink(scope, iElement, iAttrs) {
           var getter = $parse(iAttrs.gfDropdown), items = getter(scope);
           $timeout(function () {
-            var dropdown = angular.element(buildTemplate(items).join(''));
+            var placement = iElement.data('placement');
+            var dropdown = angular.element(buildTemplate(items, placement).join(''));
             dropdown.insertAfter(iElement);
             $compile(iElement.next('ul.dropdown-menu'))(scope);
           });
+
           iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
         }
       };

src/app/directives/grafanaGraph.js

@@ -15,7 +15,7 @@ function (angular, $, kbn, moment, _) {
       restrict: 'A',
       template: '<div> </div>',
       link: function(scope, elem) {
-        var data, plot;
+        var data, plot, annotations;
         var hiddenData = {};
 
         scope.$on('refresh',function() {
@@ -35,8 +35,9 @@ function (angular, $, kbn, moment, _) {
         });
 
         // Receive render events
-        scope.$on('render',function(event, d) {
-          data = d || data;
+        scope.$on('render',function(event, renderData) {
+          data = renderData || data;
+          annotations = data.annotations;
           render_panel();
         });
 
@@ -206,13 +207,13 @@ function (angular, $, kbn, moment, _) {
         }
 
         function addAnnotations(options) {
-          if(!data.annotations || data.annotations.length === 0) {
+          if(!annotations || annotations.length === 0) {
             return;
           }
 
           var types = {};
 
-          _.each(data.annotations, function(event) {
+          _.each(annotations, function(event) {
             if (!types[event.annotation.name]) {
               types[event.annotation.name] = {
                 level: _.keys(types).length + 1,
@@ -235,7 +236,7 @@ function (angular, $, kbn, moment, _) {
 
           options.events = {
             levels: _.keys(types).length + 1,
-            data: data.annotations,
+            data: annotations,
             types: types
           };
         }
@@ -313,7 +314,7 @@ function (angular, $, kbn, moment, _) {
             if (seriesInfo.alias) {
               group = '<small style="font-size:0.9em;">' +
                 '<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' +
-                (seriesInfo.alias || seriesInfo.query)+
+                (decodeURIComponent(seriesInfo.alias)) +
               '</small><br>';
             } else {
               group = kbn.query_color_dot(item.series.color, 15) + ' ';

src/app/filters/all.js

@@ -114,4 +114,10 @@ define(['angular', 'jquery', 'underscore', 'moment'], function (angular, $, _, m
     };
   });
 
+  module.filter('urlDecode', function() {
+    return function(input) {
+      return decodeURIComponent(input);
+    };
+  });
+
 });

src/app/panels/filtering/module.html

@@ -17,7 +17,7 @@
             </a>
               <ul class="dropdown-menu">
                 <li ng-repeat="option in filter.options">
-                  <a ng-click="filterOptionSelected(filter, option)">{{option.text}}</a>
+                  <a ng-click="filterOptionSelected(filter, option)">{{option.text | urlDecode}}</a>
                 </li>
               </ul>
           </li>

src/app/panels/graphite/legend.html

@@ -9,7 +9,7 @@
     </i>
     <span class='small histogram-legend-item'>
       <a ng-click="toggleSeries(series, $event)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
-        {{series.alias}}
+        {{series.alias | urlDecode}}
       </a>
       <span ng-if="panel.legend.values">
         <span ng-show="panel.legend.current">

src/app/services/graphite/gfunc.js

@@ -69,6 +69,11 @@ function (_) {
     category: categories.Combine,
   });
 
+  addFuncDef({
+    name: 'isNonNull',
+    category: categories.Combine,
+  });
+
   addFuncDef({
     name: 'rangeOfSeries',
     category: categories.Combine

src/app/services/graphite/graphiteDatasource.js

@@ -118,7 +118,7 @@ function (angular, _, $, config, kbn, moment) {
     GraphiteDatasource.prototype.metricFindQuery = function(filterSrv, query) {
       var interpolated;
       try {
-        interpolated = filterSrv.applyTemplateToTarget(query);
+        interpolated = encodeURIComponent(filterSrv.applyTemplateToTarget(query));
       }
       catch(err) {
         return $q.reject(err);

src/app/services/graphite/lexer.js

@@ -124,6 +124,7 @@ define([
       i === 45 ||           // -
       i === 42 ||           // *
       i === 58 ||           // :
+      i === 37 ||           // %
       i >= 97 && i <= 122;  // a-z
   }
 

src/css/less/grafana.less

@@ -271,7 +271,7 @@
 }
 
 .grafana-target-segment {
-  padding: 5px 7px;
+  padding: 8px 7px;
   display: inline-block;
   font-weight: normal;
   border-right: 1px solid @grafanaTargetSegmentBorder;
@@ -337,10 +337,11 @@ input[type=text].grafana-function-param-input {
   }
 
   a {
-    padding: 5px 7px;
+    padding: 8px 7px;
     position: relative;
-    top: 5px;
+    top: 8px;
     color: @grafanaTargetColor;
+    font-size: 16px;
 
     .grafana-target-hidden & {
       color: @grafanaTargetColorHide;
@@ -353,7 +354,7 @@ input[type=text].grafana-function-param-input {
 }
 
 input[type=text].grafana-target-text-input {
-  padding: 5px 7px;
+  padding: 8px 7px;
   border: none;
   margin: 0px;
   background: transparent;
@@ -367,8 +368,7 @@ input[type=text].grafana-target-segment-input {
   border-right: 1px solid @grafanaTargetSegmentBorder;
   margin: 0px;
   border-radius: 0;
-  height: 22px;
-  line-height: 22px;
+  padding: 8px 4px;
 }
 
 select.grafana-target-segment-input {
@@ -376,8 +376,8 @@ select.grafana-target-segment-input {
   border-right: 1px solid @grafanaTargetSegmentBorder;
   margin: 0px;
   border-radius: 0;
-  height: 30px;
-  line-height: 30px;
+  height: 36px;
+  padding: 8px 5px;
 }
 
 .grafana-target .dropdown {