From 542e080f0a7777860355223d714aab985e6cb014 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 4 Apr 2016 13:13:25 -0400
Subject: [PATCH] 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                             |  1 +
 public/app/plugins/panel/graph/legend.js |  2 +-
 public/sass/base/_font_awesome.scss      |  6 ------
 public/sass/components/_panel_graph.scss | 16 ++++++++++++++--
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc75b3fa734..4e92dd13f52 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js
index 22bbb756b59..4cad3c16844 100644
--- a/public/app/plugins/panel/graph/legend.js
+++ b/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">';
diff --git a/public/sass/base/_font_awesome.scss b/public/sass/base/_font_awesome.scss
index 438185f3198..51d9bac987d 100644
--- a/public/sass/base/_font_awesome.scss
+++ b/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;
 }
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index ccecbc6c9a7..9837f33a543 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/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;