From 50e0793bbb629f777a18c21e82495d7fa16b2e23 Mon Sep 17 00:00:00 2001
From: Samuel Padgett <spadgett@redhat.com>
Date: Mon, 20 Feb 2017 13:36:38 -0500
Subject: [PATCH] Make route services pie chart responsive

Fix problems on mobile and with long names
---
 app/scripts/directives/routeServicePie.js | 19 ++++++++--
 app/views/browse/route.html               |  4 +-
 dist/scripts/scripts.js                   | 45 ++++++++++++++---------
 dist/scripts/templates.js                 |  4 +-
 4 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/app/scripts/directives/routeServicePie.js b/app/scripts/directives/routeServicePie.js
index 65acc5f58a..c8e1307964 100644
--- a/app/scripts/directives/routeServicePie.js
+++ b/app/scripts/directives/routeServicePie.js
@@ -10,6 +10,7 @@ angular.module('openshiftConsole')
       template: '<div ng-show="totalWeight" ng-attr-id="{{chartId}}"></div>',
       link: function($scope) {
         var chart, config;
+        var mobile = window.matchMedia("(max-width: 400px)").matches;
 
         $scope.chartId = _.uniqueId('route-service-chart-');
 
@@ -20,7 +21,7 @@ angular.module('openshiftConsole')
           },
           legend: {
             show: true,
-            position: 'right'
+            position: mobile ? 'bottom' : 'right'
           },
           pie: {
             label: {
@@ -28,8 +29,15 @@ angular.module('openshiftConsole')
             }
           },
           size: {
-            height: 115,
-            width: 260
+            height: mobile ? 150 : 115
+          },
+          tooltip: {
+            format: {
+              name: function(name, ratio, id) {
+                // Show the full name on hover, even if name is truncated for the legend.
+                return id;
+              }
+            }
           },
           data: {
             type: "pie",
@@ -69,14 +77,17 @@ angular.module('openshiftConsole')
 
         function updateChart() {
           var data = {
-            columns: []
+            columns: [],
+            names: {}
           };
 
           if ($scope.route) {
             data.columns.push(getData($scope.route.spec.to));
+            data.names[$scope.route.spec.to.name] = _.trunc($scope.route.spec.to.name, { length: 30 });
             $scope.totalWeight = $scope.route.spec.to.weight;
             _.each($scope.route.spec.alternateBackends, function(routeTarget) {
               data.columns.push(getData(routeTarget));
+              data.names[routeTarget.name] = _.trunc(routeTarget.name, { length: 30 });
               $scope.totalWeight += routeTarget.weight;
             });
           }
diff --git a/app/views/browse/route.html b/app/views/browse/route.html
index 2050cabf83..c8af95701d 100644
--- a/app/views/browse/route.html
+++ b/app/views/browse/route.html
@@ -124,10 +124,10 @@ <h4>Traffic</h4>
                       This route splits traffic across multiple services.
                     </div>
                   </div>
-                  <div class="col-sm-5 col-sm-push-7 mar-bottom-lg">
+                  <div class="col-sm-12 col-md-5 col-md-push-7 mar-bottom-lg">
                     <route-service-pie route="route"></route-service-pie>
                   </div>
-                  <div class="col-sm-7 col-sm-pull-5">
+                  <div class="cold-sm-12 col-md-7 col-md-pull-5">
                     <table class="table table-bordered">
                       <thead>
                         <tr>
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
index 5f7e480026..c260a5277e 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -12389,13 +12389,18 @@ template:'<div ng-show="totalWeight" ng-attr-id="{{chartId}}"></div>',
 link:function(a) {
 function b() {
 var b = {
-columns:[]
-};
-a.route && (b.columns.push(f(a.route.spec.to)), a.totalWeight = a.route.spec.to.weight, _.each(a.route.spec.alternateBackends, function(c) {
-b.columns.push(f(c)), a.totalWeight += c.weight;
-})), a.totalWeight && (c ? (h(b), c.load(b)) :(d.data.columns = b.columns, c = c3.generate(d)), e = b);
-}
-var c, d;
+columns:[],
+names:{}
+};
+a.route && (b.columns.push(g(a.route.spec.to)), b.names[a.route.spec.to.name] = _.trunc(a.route.spec.to.name, {
+length:30
+}), a.totalWeight = a.route.spec.to.weight, _.each(a.route.spec.alternateBackends, function(c) {
+b.columns.push(g(c)), b.names[c.name] = _.trunc(c.name, {
+length:30
+}), a.totalWeight += c.weight;
+})), a.totalWeight && (c ? (i(b), c.load(b)) :(d.data.columns = b.columns, c = c3.generate(d)), f = b);
+}
+var c, d, e = window.matchMedia("(max-width: 400px)").matches;
 a.chartId = _.uniqueId("route-service-chart-"), d = {
 bindto:"#" + a.chartId,
 color:{
@@ -12403,7 +12408,7 @@ pattern:[ $.pfPaletteColors.blue, $.pfPaletteColors.orange, $.pfPaletteColors.gr
 },
 legend:{
 show:!0,
-position:"right"
+position:e ? "bottom" :"right"
 },
 pie:{
 label:{
@@ -12411,8 +12416,14 @@ show:!1
 }
 },
 size:{
-height:115,
-width:260
+height:e ? 150 :115
+},
+tooltip:{
+format:{
+name:function(a, b, c) {
+return c;
+}
+}
 },
 data:{
 type:"pie",
@@ -12422,21 +12433,21 @@ enabled:!1
 }
 }
 };
-var e, f = function(a) {
+var f, g = function(a) {
 return [ a.name, a.weight ];
-}, g = function(a) {
-return _.head(a);
 }, h = function(a) {
+return _.head(a);
+}, i = function(a) {
 var b = {};
 _.each(a.columns, function(a) {
-var c = g(a);
+var c = h(a);
 b[c] = !0;
 });
-var c = _.get(e, "columns", []);
+var c = _.get(f, "columns", []);
 a.unload = _.chain(c).reject(function(a) {
-var c = g(a);
+var c = h(a);
 return _.has(b, [ c ]);
-}).map(g).value();
+}).map(h).value();
 };
 a.$watch("route", b), a.$on("destroy", function() {
 c && (c = c.destroy());
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index 4e3e8a979b..e55dae10ff 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -3708,10 +3708,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "This route splits traffic across multiple services.\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div class=\"col-sm-5 col-sm-push-7 mar-bottom-lg\">\n" +
+    "<div class=\"col-sm-12 col-md-5 col-md-push-7 mar-bottom-lg\">\n" +
     "<route-service-pie route=\"route\"></route-service-pie>\n" +
     "</div>\n" +
-    "<div class=\"col-sm-7 col-sm-pull-5\">\n" +
+    "<div class=\"cold-sm-12 col-md-7 col-md-pull-5\">\n" +
     "<table class=\"table table-bordered\">\n" +
     "<thead>\n" +
     "<tr>\n" +