Make route services pie chart responsive

Fix problems on mobile and with long names

Author: spadgett

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,16 +21,23 @@ angular.module('openshiftConsole')
           },
           legend: {
             show: true,
-            position: 'right'
+            position: mobile ? 'bottom' : 'right'
           },
           pie: {
             label: {
               show: false
             }
           },
           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;
             });
           }

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>

dist/scripts/scripts.js

@@ -12389,30 +12389,41 @@ 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:{
 pattern:[ $.pfPaletteColors.blue, $.pfPaletteColors.orange, $.pfPaletteColors.green, $.pfPaletteColors.red ]
 },
 legend:{
 show:!0,
-position:"right"
+position:e ? "bottom" :"right"
 },
 pie:{
 label:{
 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());

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" +