add route / pod table directives to svc page

This patch replaces single-line descriptions, for listing routes and
pods related to the current service, with route and pod table
directives. It adds warning tooltips to the pod table directive to rows
displaying pods with no endpoints.

This patch further adds an optional field to pod and route directives
for setting a custom 'Name' column header value.

Author: juanvallejo

app/scripts/controllers/service.js

@@ -14,6 +14,7 @@ angular.module('openshiftConsole')
                                              $filter) {
     $scope.projectName = $routeParams.project;
     $scope.service = null;
+    $scope.services = null;
     $scope.alerts = {};
     $scope.renderOptions = $scope.renderOptions || {};
     $scope.renderOptions.hideFilterWidget = true;
@@ -60,6 +61,50 @@ angular.module('openshiftConsole')
           }
         );
 
+        watches.push(DataService.watch("services", context, function(services) {
+          $scope.services = services.by("metadata.name");
+        }));
+
+        watches.push(DataService.watch("pods", context, function(pods) {
+          var service = $scope.service;
+          if (!service) {
+            DataService
+              .get("services", $routeParams.service, context)
+              .then(function(service) {
+                getPodsForService(service, pods);
+              });
+              return;
+          }
+          getPodsForService(service, pods);
+        }));
+
+        // receive pods for the current service scope only when the service object is available
+        function getPodsForService(service, pods) {
+          $scope.podsForService = [];
+          var ls = new LabelSelector(service.spec.selector);
+          angular.forEach(pods.by("metadata.name"), function(pod) {
+            if (ls.matches(pod)) {
+              $scope.podsForService.push(pod);
+            }
+          });
+        }
+
+        watches.push(DataService.watch("endpoints", context, function(endpoints) {
+          $scope.podsWithEndpoints = {};
+          angular.forEach(endpoints.by("metadata.name"), function(endpoint) {
+            if (endpoint.metadata.name === $routeParams.service) {
+              endpoint.subsets.forEach(function(subset) {
+                subset.addresses.forEach(function(address) {
+                  if (address.targetRef !== undefined &&
+                    address.targetRef.kind === "Pod") {
+                    $scope.podsWithEndpoints[address.targetRef.name] = true;
+                  }
+                });
+              });
+            }
+          });
+        }));
+
         watches.push(DataService.watch("routes", context, function(routes) {
           $scope.routesForService = [];
           angular.forEach(routes.by("metadata.name"), function(route) {

app/scripts/directives/resources.js

@@ -163,9 +163,27 @@ angular.module('openshiftConsole')
       restrict: 'E',
       scope: {
         pods: '=',
+        // Optional active pods map to display whether or not pods have endpoints
+        activePods: '=?',
         // Optional empty message to display when there are no pods.
-        emptyMessage: '=?'
+        emptyMessage: '=?',
+        // Alternative header text to display in the 'Name' column.
+        customNameHeader: '=?'
       },
       templateUrl: 'views/directives/pods-table.html'
     };
+  })
+  .directive('routesTable', function() {
+    return {
+      restrict: 'E',
+      scope: {
+        routes: '=',
+        services: '=',
+        // Optional empty message to display when there are no pods.
+        emptyMessage: '=?',
+        // Alternative header text to display in the 'Name' column.
+        customNameHeader: '=?'
+      },
+      templateUrl: 'views/directives/routes-table.html'
+    };
   });

app/views/browse/service.html

@@ -74,18 +74,19 @@ <h1>
                         <span ng-repeat="externalIP in service.spec.externalIPs"
                           >{{externalIP}}<span ng-if="!$last">, </span></span>
                       </dd>
-                      <dt>Routes:</dt>
-                      <dd>
+                      <dt ng-if="!routesForService.length">Routes:</dt>
+                      <dd ng-if="!routesForService.length">
                         <span ng-if="!routesForService.length">
                           <a ng-href="project/{{project.metadata.name}}/create-route?service={{service.metadata.name}}"  ng-if="'routes' | canI : 'create'">Create route</a>
                         </span>
-                        <span ng-repeat="route in routesForService">
-                            <span ng-if="route | isWebRoute"><a ng-href="{{route | routeWebURL}}">{{route | routeLabel}}</a></span>
-                            <span ng-if="!(route | isWebRoute)">{{route | routeLabel}}</span>
-                            <span ng-show="!$last">, </span>
-                        </span>
                       </dd>
                     </dl>
+                    <div ng-if="routesForService.length" class="table-responsive small service-table">
+                      <routes-table routes="routesForService" services="services" custom-name-header="routesForService[0].kind"></routes-table>
+                    </div>
+                    <div ng-if="podsForService.length" class="table-responsive small service-table">
+                      <pods-table pods="podsForService" active-pods="podsWithEndpoints" custom-name-header="podsForService[0].kind"></pods-table>
+                    </div>
                     <div ng-if="service.spec.ports.length" class="table-responsive">
                       <table class="table table-bordered small service-table">
                         <thead>
@@ -112,12 +113,6 @@ <h1>
                         </tbody>
                       </table>
                     </div>
-                    <div ng-if="podsForService.length" class="table-responsive">
-                      <pods-table pods="podsForService"></pods-table>
-                        <!--<span ng-repeat="pod in podsForService"-->
-                            <!--&gt;{{pod.metadata.name}} ({{podsReceivingTraffic[pod.metadata.name]}})<span ng-if="!$last">, </span>-->
-                        <!--</span>-->
-                    </div>
                     <annotations annotations="service.metadata.annotations"></annotations>
                   </div>
                 </uib-tab>

app/views/directives/pods-table.html

@@ -1,7 +1,7 @@
 <table class="table table-bordered table-hover table-mobile">
   <thead>
     <tr>
-      <th>Name</th>
+      <th>{{customNameHeader || 'Name'}}</th>
       <th>Status</th>
       <th>Containers Ready</th>
       <th>Container Restarts</th>
@@ -15,6 +15,10 @@
     <tr>
       <td data-title="Name">
         <a href="{{pod | navigateResourceURL}}">{{pod.metadata.name}}</a>
+        <span ng-if="!activePods[pod.metadata.name]" data-toggle="popover" data-trigger="hover" data-content="This pod has no endpoints and is not accepting traffic." style="cursor: help; padding-left: 5px;">
+          <span class="pficon pficon-warning-triangle-o" aria-hidden="true" data-toggle="tooltip" style="cursor: help;"></span>
+          <span class="sr-only">{{pod.status.phase}}</span>
+        </span>
         <span ng-if="pod | isTroubledPod">
           <pod-warnings pod="pod"></pod-warnings>
         </span>

app/views/directives/routes-table.html

@@ -1,15 +1,15 @@
 <table class="table table-bordered table-hover table-mobile">
 <thead>
   <tr>
-    <th>Name</th>
+    <th>{{customNameHeader || 'Name'}}</th>
     <th>Hostname</th>
     <th>Routes To</th>
     <th>Target Port</th>
     <th>TLS Termination</th>
   </tr>
 </thead>
 <tbody ng-if="(routes | hashSize) == 0">
-  <tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
+  <tr><td colspan="5"><em>{{emptyMessage || 'No routes to show'}}</em></td></tr>
 </tbody>
 <tbody ng-repeat="route in routes | orderObjectsByDate : true">
   <tr>

dist/scripts/scripts.js

@@ -5979,7 +5979,7 @@ d.unwatchAll(i);
 });
 }));
 } ]), angular.module("openshiftConsole").controller("ServiceController", [ "$scope", "$routeParams", "DataService", "ProjectsService", "$filter", function(a, b, c, d, e) {
-a.projectName = b.project, a.service = null, a.alerts = {}, a.renderOptions = a.renderOptions || {}, a.renderOptions.hideFilterWidget = !0, a.breadcrumbs = [ {
+a.projectName = b.project, a.service = null, a.services = null, a.alerts = {}, a.renderOptions = a.renderOptions || {}, a.renderOptions.hideFilterWidget = !0, a.breadcrumbs = [ {
 title:"Services",
 link:"project/" + b.project + "/browse/services"
 }, {
@@ -5992,6 +5992,13 @@ message:"This service has been deleted."
 });
 };
 d.get(b.project).then(_.spread(function(d, h) {
+function i(b, c) {
+a.podsForService = [];
+var d = new LabelSelector(b.spec.selector);
+angular.forEach(c.by("metadata.name"), function(b) {
+d.matches(b) && a.podsForService.push(b);
+});
+}
 a.project = d, a.projectContext = h, c.get("services", b.service, h).then(function(a) {
 g(a), f.push(c.watchObject("services", b.service, h, g));
 }, function(b) {
@@ -6000,7 +6007,22 @@ type:"error",
 message:"The service details could not be loaded.",
 details:"Reason: " + e("getErrorDetails")(b)
 };
-}), f.push(c.watch("routes", h, function(c) {
+}), f.push(c.watch("services", h, function(b) {
+a.services = b.by("metadata.name");
+})), f.push(c.watch("pods", h, function(d) {
+var e = a.service;
+return e ? void i(e, d) :void c.get("services", b.service, h).then(function(a) {
+i(a, d);
+});
+})), f.push(c.watch("endpoints", h, function(c) {
+a.podsWithEndpoints = {}, angular.forEach(c.by("metadata.name"), function(c) {
+c.metadata.name === b.service && c.subsets.forEach(function(b) {
+b.addresses.forEach(function(b) {
+void 0 !== b.targetRef && "Pod" === b.targetRef.kind && (a.podsWithEndpoints[b.targetRef.name] = !0);
+});
+});
+});
+})), f.push(c.watch("routes", h, function(c) {
 a.routesForService = [], angular.forEach(c.by("metadata.name"), function(c) {
 "Service" === c.spec.to.kind && c.spec.to.name === b.service && a.routesForService.push(c);
 }), Logger.log("routes (subscribe)", a.routesByService);
@@ -9439,10 +9461,23 @@ return {
 restrict:"E",
 scope:{
 pods:"=",
-emptyMessage:"=?"
+activePods:"=?",
+emptyMessage:"=?",
+customNameHeader:"=?"
 },
 templateUrl:"views/directives/pods-table.html"
 };
+}).directive("routesTable", function() {
+return {
+restrict:"E",
+scope:{
+routes:"=",
+services:"=",
+emptyMessage:"=?",
+customNameHeader:"=?"
+},
+templateUrl:"views/directives/routes-table.html"
+};
 }), angular.module("openshiftConsole").directive("topologyDeployment", function() {
 return {
 restrict:"E",