null point options is working, moved to global panel style instead of alias specific option

src/app/panels/graphite/legend.html

@@ -4,46 +4,31 @@
       class="histogram-legend">
     <i  class='icon-minus pointer'
         ng-style="{color: series.color}"
-        bs-popover="'colorPopup.html'"
+        ng-click="toggleSeries(series)">
-        data-unique="1"
-        data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
     </i>
     <span class='small histogram-legend-item'>
-      <a ng-click="toggleSeries(series)">
+      <a bs-popover="'colorPopup.html'" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
         {{series.alias}}
       </a>
     </span>
 </span>
 
- <!-- <a class="small" ng-click="toggleYAxis(series)">
-  2:nd Y-axis (y&sup2;) <input type="checkbox"></input>
-</a> -->
-
-<!--     <div class="editor-row">
-      Fill style <select class="input-mini" ng-model="panel.aliasFillStyle[series.alias]" ng-options="f for f in ['no', 'all', 'null']" ng-change="get_data()"></select>
-    </div>
- -->
-
 <script type="text/ng-template" id="colorPopup.html">
   <div class="histogram-legend-popover">
     <a class="close" ng-click="dismiss();" href="">×</a>
 
-    <div class="editor-row small" style="margin-left: 5px; padding-bottom: 0;">
+    <div class="editor-row small" style="padding-bottom: 0;">
       <label>Axis:</label>
       <button ng-click="toggleYAxis(series)"
               class="btn btn-mini"
               ng-class="{'btn-success': series.yaxis === 1 }">
-              Left
+        Left
       </button>
       <button ng-click="toggleYAxis(series)"
               class="btn btn-mini"
               ng-class="{'btn-success': series.yaxis === 2 }">
-              Right
+        Right
       </button>
-      <label>Null points:</label>
-      <button ng-click="panel.aliasFillStyle[series.alias] = 'no'; get_data();" class="btn btn btn-mini">Connect</button>
-      <button ng-click="panel.aliasFillStyle[series.alias] = 'null';get_data();" class="btn btn-success btn-mini">Null</button>
-      <button ng-click="panel.aliasFillStyle[series.alias] = 'all';get_data();" class="btn btn btn-mini">Zero</button>
     </div>
 
     <div class="editor-row">

src/app/panels/graphite/module.js

@@ -209,6 +209,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
        */
       zerofill      : true,
 
+      nullPointMode : 'connected',
+
       tooltip       : {
         value_type: 'cumulative',
         query_as_alias: true
@@ -218,7 +220,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       aliasColors: {},
       aliasYAxis: {},
-      aliasFillStyle: {}
     };
 
     _.defaults($scope.panel,_d);
@@ -348,7 +349,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           interval: $scope.interval,
           start_date: $scope.range && $scope.range.from,
           end_date: $scope.range && $scope.range.to,
-          fill_style: $scope.panel.aliasFillStyle[alias] || 'no',
         };
 
         var time_series = new timeSeries.ZeroFilled(tsOpts);
@@ -363,7 +363,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           alias: alias,
           color:  color,
           enable: true,
-          yaxis: yaxis
+          yaxis: yaxis,
         };
 
         $scope.legend.push(seriesInfo);
@@ -656,7 +656,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           }
 
           for (var i = 0; i < data.length; i++) {
-            var _d = data[i].time_series.getFlotPairs(required_times);
+            var _d = data[i].time_series.getFlotPairs(required_times, scope.panel.nullPointMode);
             data[i].yaxis = data[i].info.yaxis;
             data[i].data = _d;
 

src/app/panels/graphite/styleEditor.html

@@ -30,9 +30,17 @@
       <select class="input-mini" ng-model="panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="render()"></select>
     </div>
     <div class="editor-option">
-      <label class="small">Y Format <tip>Y-axis formatting</tip></label>
+      <label class="small">Left Y Format <tip>Y-axis formatting</tip></label>
       <select class="input-small" ng-model="panel.y_format" ng-options="f for f in ['none','short','bytes']" ng-change="render()"></select>
     </div>
+    <div class="editor-option">
+      <label class="small">Right Y Format <tip>Y-axis formatting</tip></label>
+      <select class="input-small" ng-model="panel.y2_format" ng-options="f for f in ['none','short','bytes']" ng-change="render()"></select>
+    </div>
+    <div class="editor-option">
+      <label class="small">Null point mode <tip>Define how null values should be drawn</tip></label>
+      <select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="render()"></select>
+    </div>
   </div>
   <div class="section">
     <h5>Multiple Series</h5>

src/app/panels/graphite/timeSeries.js

@@ -30,15 +30,12 @@ function (_, Interval) {
    *                                end_date will ensure that the series streches to resemble the entire
    *                                expected result
    * @opt   {date}     end_date    (optional) The end point for the time series, see start_date
-   * @opt   {string}   fill_style  Either "minimal", or "all" describing the strategy used to zero-fill
-   *                                the series.
    */
   ts.ZeroFilled = function (opts) {
     opts = _.defaults(opts, {
       interval: '10m',
       start_date: null,
       end_date: null,
-      fill_style: 'minimal'
     });
 
     // the expected differenece between readings.
@@ -92,16 +89,16 @@ function (_, Interval) {
    * @param  {array} required_times  An array of timestamps that must be in the resulting pairs
    * @return {array}
    */
-  ts.ZeroFilled.prototype.getFlotPairs = function (required_times) {
+  ts.ZeroFilled.prototype.getFlotPairs = function (required_times, fillStyle) {
     var times = this.getOrderedTimes(required_times),
       strategy,
       pairs;
 
-    if(this.opts.fill_style === 'all') {
+    if(fillStyle === 'null as zero') {
       strategy = this._getAllFlotPairs;
-    } else if(this.opts.fill_style === 'null') {
+    } else if(fillStyle === 'null') {
       strategy = this._getNullFlotPairs;
-    } else if(this.opts.fill_style === 'no') {
+    } else if(fillStyle === 'connected') {
       strategy = this._getNoZeroFlotPairs;
     } else {
       strategy = this._getMinFlotPairs;

src/vendor/bootstrap/less/grafana.less

@@ -157,7 +157,6 @@
   width: 200px;
   label {
     display: inline-block;
-    width: 70px;
   }
   .btn {
     padding: 1px 3px;
@@ -165,6 +164,7 @@
     line-height: initial;
   }
   .close {
+    margin-right: 5px;
     color: white;
     opacity: 0.7;
     text-shadow: none;