changed second-y axis setting, now on per alias leven instead of graphite target expression level

src/app/controllers/graphiteTarget.js

@@ -230,16 +230,6 @@ function (angular, _, config, graphiteFuncs, Parser) {
       $scope.targetChanged();
     };
 
-    $scope.setYAxis = function() {
-      if ($scope.target.yaxis) {
-        delete $scope.target.yaxis;
-      } else {
-        $scope.target.yaxis = 2;
-      }
-
-      $scope.get_data();
-    };
-
     $scope.duplicate = function() {
       var clone = angular.copy($scope.target);
       $scope.panel.targets.push(clone);

src/app/panels/graphite/editor.html

@@ -32,12 +32,6 @@
                   Duplicate
                 </a>
               </li>
-              <li role="menuitem">
-                <a  tabindex="1"
-                    ng-click="setYAxis()">
-                  Right Y-axis
-                </a>
-              </li>
             </ul>
           </li>
           <li>

src/app/panels/graphite/legend.html

@@ -6,7 +6,7 @@
         ng-style="{color: series.color}"
         bs-popover="'colorPopup.html'"
         data-unique="1"
-        data-placement="bottomLeft">
+        data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
     </i>
     <span class='small histogram-legend-item'>
       <a ng-click="toggleSeries(series)">
@@ -16,17 +16,22 @@
 </span>
 
 <script type="text/ng-template" id="colorPopup.html">
-  <div style="width: 150px;">
-    <div>
-      <a class="close pull-right" ng-click="dismiss();" href="">×</a>
-      <div class="clearfix"></div>
+  <div class="histogram-legend-popover">
+    <div class="histogram-legend-popover-header">
+      <a class="small" ng-click="toggleYAxis(series)">
+        Toggle Y-axis (y&sup2;)
+      </a>
+
+      <a class="close" ng-click="dismiss();" href="">×</a>
     </div>
 
-    <i ng-repeat="color in colors"
-      class="pointer"
-      ng-class="{'icon-circle-blank': color === series.color,'icon-circle': color !== series.color}"
-      ng-style="{color:color}"
-      ng-click="changeSeriesColor(series, color);dismiss();">
-    </i>
-</div>
+    <div class="editor-row">
+      <i ng-repeat="color in colors"
+        class="pointer"
+        ng-class="{'icon-circle-blank': color === series.color,'icon-circle': color !== series.color}"
+        ng-style="{color:color}"
+        ng-click="changeSeriesColor(series, color);dismiss();">
+      </i>
+    </div>
+  </div>
 </script>

src/app/panels/graphite/module.js

@@ -202,7 +202,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       targets: [],
 
-      aliasColors: {}
+      aliasColors: {},
+      aliasYAxis: {}
     };
 
     _.defaults($scope.panel,_d);
@@ -352,14 +353,15 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           }
         });
 
-        var target = graphiteSrv.match($scope.panel.targets, targetData.target);
         var alias = targetData.target;
         var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
+        var yaxis = $scope.panel.aliasYAxis[alias] || 1;
+
         var seriesInfo = {
           alias: alias,
           color:  color,
           enable: true,
-          yaxis: target.yaxis || 1
+          yaxis: yaxis
         };
 
         $scope.legend.push(seriesInfo);
@@ -367,7 +369,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         data.push({
           info: seriesInfo,
           time_series: time_series,
-          yaxis: target.yaxis || 1
         });
 
       });
@@ -470,6 +471,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.$emit('toggleLegend', info.alias);
     };
 
+    $scope.toggleYAxis = function(info) {
+      info.yaxis = info.yaxis === 2 ? 1 : 2;
+      $scope.panel.aliasYAxis[info.alias] = info.yaxis;
+      $scope.$emit('render');
+    };
+
   });
 
   module.directive('histogramChart', function(filterSrv, $rootScope) {
@@ -639,18 +646,17 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
           for (var i = 0; i < data.length; i++) {
             var _d = data[i].time_series.getFlotPairs(required_times);
+            data[i].yaxis = data[i].info.yaxis;
             data[i].data = _d;
-          }
-
-          var hasSecondY = _.findWhere(data, { yaxis: 2});
 
-          if (hasSecondY) {
-            options.yaxes.push({
-              position: 'right',
-              show: scope.panel['y-axis'],
-              min: scope.panel.grid.min,
-              max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
-            });
+            if (options.yaxes.length === 1 && data[i].yaxis === 2) {
+              options.yaxes.push({
+                position: 'right',
+                show: scope.panel['y-axis'],
+                min: scope.panel.grid.min,
+                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
+              });
+            }
           }
 
           plot = $.plot(elem, data, options);

src/vendor/bootstrap/less/grafana.less

@@ -146,6 +146,25 @@
   text-align: left;
 }
 
+.grafana-legend-container .popover-content {
+  padding: 0;
+}
+
+.histogram-legend-popover {
+  width: 150px;
+
+  .histogram-legend-popover-header {
+    background: #41474c;
+    text-align: center;
+    border-bottom: 1px solid #353a3e;
+    padding: 3px 5px;
+    white-space: nowrap;
+  }
+  .editor-row {
+    padding: 5px;
+  }
+}
+
 .panel-full-edit-tabs {
   margin-top: 10px;
   min-height: 250px;