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,15 @@ 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
           },
           data: {
             type: "pie",
@@ -69,14 +69,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>