fix(graph): fixed issue with graph legend when in table mode and series on righ-y axis, also fixed so that you can see what series are on right-y axis when legend is in table mode, fixes #4551, fixes #1145

CHANGELOG.md

@@ -10,6 +10,7 @@
 * **Table Panel**: Fixed issue with table panel sort, fixes [#4532](https://github.com/grafana/grafana/issues/4532)
 * **Page Load Crash**: A Datasource with null jsonData would make Grafana fail to load page, fixes [#4536](https://github.com/grafana/grafana/issues/4536)
 * **Metrics tab**: Fix for missing datasource name in datasource selector, fixes [#4540](https://github.com/grafana/grafana/issues/4540)
+* **Graph**: Fix legend in table mode with series on right-y axis, fixes [#4551](https://github.com/grafana/grafana/issues/4551), [#1145](https://github.com/grafana/grafana/issues/1145)
 
 # 3.0.0-beta1 (2016-03-31)
 

public/app/plugins/panel/graph/legend.js

@@ -157,7 +157,7 @@ function (angular, _, $) {
             }
 
             var html = '<div class="graph-legend-series';
-            if (series.yaxis === 2) { html += ' pull-right'; }
+            if (series.yaxis === 2) { html += ' graph-legend-series--right-y'; }
             if (ctrl.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
             html += '" data-series-index="' + i + '">';
             html += '<div class="graph-legend-icon">';

public/sass/base/_font_awesome.scss

@@ -66,12 +66,6 @@
   border: solid 0.08em #eeeeee;
   border-radius: .1em;
 }
-.pull-right {
-  float: right;
-}
-.pull-left {
-  float: left;
-}
 .fa.pull-left {
   margin-right: .3em;
 }

public/sass/components/_panel_graph.scss

@@ -74,6 +74,10 @@
   float: left;
   white-space: nowrap;
   padding-left: 10px;
+
+  &--right-y {
+    float: right;
+  }
 }
 
 .graph-legend-value {
@@ -83,14 +87,22 @@
 .graph-legend-table {
   overflow-y: scroll;
 
-  .graph-legend-series { display: table-row;
+  .graph-legend-series {
+    display: table-row;
     float: none;
     padding-left: 0;
-    &.pull-right {
+    &--right-y {
       float: none;
+
+      .graph-legend-alias:after {
+        content: '(right-y)';
+        padding: 0 5px;
+        color: $text-color-weak;
+      }
     }
   }
 
+
   td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value {
     float: none;
     display: table-cell;