openshift · openshift-bot · Jan 31, 2017 · Jan 30, 2017
diff --git a/app/scripts/controllers/route.js b/app/scripts/controllers/route.js
@@ -7,7 +7,14 @@
  * Controller of the openshiftConsole
  */
 angular.module('openshiftConsole')
-  .controller('RouteController', function ($scope, $routeParams, AlertMessageService, DataService, ProjectsService, $filter) {
+  .controller('RouteController',
+              function($scope,
+                       $filter,
+                       $routeParams,
+                       AlertMessageService,
+                       DataService,
+                       ProjectsService,
+                       RoutesService) {
     $scope.projectName = $routeParams.project;
     $scope.route = null;
     $scope.alerts = {};
@@ -31,9 +38,11 @@ angular.module('openshiftConsole')
 
     var watches = [];
 
+    var isCustomHost;
     var routeResolved = function(route, action) {
       $scope.loaded = true;
       $scope.route = route;
+      isCustomHost = RoutesService.isCustomHost(route);
       if (action === "DELETED") {
         $scope.alerts["deleted"] = {
           type: "warning",
@@ -42,6 +51,38 @@ angular.module('openshiftConsole')
       }
     };
 
+    // Use an alert key that has the route UID, route host, and router
+    // hostname. This will handle cases where the route is admitted by
+    // multiple routers and we have more than one alert.
+    var routerHostnameAlertKey = function(ingress) {
+      var uid = _.get($scope, 'route.metadata.uid');
+      return 'router-host-' + uid + '-' + ingress.host + '-' + ingress.routerCanonicalHostname;
+    };
+
+    // Show the alert for admitted routes that have a custom host if
+    // routerCanonicalHostname is set.
+    $scope.showRouterHostnameAlert = function(ingress, admittedCondition) {
+      if (!isCustomHost) {
+        return false;
+      }
+
+      if (!ingress || !ingress.host || !ingress.routerCanonicalHostname) {
+        return false;
+      }
+
+      if (!admittedCondition || admittedCondition.status !== 'True') {
+        return false;
+      }
+
+      var alertKey = routerHostnameAlertKey(ingress);
+      return !AlertMessageService.isAlertPermanentlyHidden(alertKey, $scope.projectName);
+    };
+
+    $scope.hideRouterHostnameAlert = function(ingress) {
+      var alertKey = routerHostnameAlertKey(ingress);
+      AlertMessageService.permanentlyHideAlert(alertKey, $scope.projectName);
+    };
+
     ProjectsService
       .get($routeParams.project)
       .then(_.spread(function(project, context) {

diff --git a/app/scripts/services/routes.js b/app/scripts/services/routes.js
@@ -92,8 +92,9 @@ angular.module("openshiftConsole")
       });
     };
 
+    var annotation = $filter('annotation');
     var isCustomHost = function(route) {
-      return $filter('annotation')(route, "openshift.io/host.generated") !== "true";
+      return annotation(route, "openshift.io/host.generated") !== "true";
     };
 
     // Gets a score for the route to decide which to show on the overview.
@@ -164,6 +165,7 @@ angular.module("openshiftConsole")
       getServicePortForRoute: getServicePortForRoute,
       getPreferredDisplayRoute: getPreferredDisplayRoute,
       groupByService: groupByService,
-      getSubdomain: getSubdomain
+      getSubdomain: getSubdomain,
+      isCustomHost: isCustomHost
     };
   });
diff --git a/app/styles/_core.less b/app/styles/_core.less
@@ -200,6 +200,11 @@ mark {
   }
 }
 
+.route-status .h3 {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
 .deployment-config-summary {
   .gutter-bottom();
 }

diff --git a/app/views/browse/route.html b/app/views/browse/route.html
@@ -52,35 +52,49 @@ <h1 class="contains-actions">
           <div class="row" ng-if="route">
             <div class="col-sm-12">
               <div class="resource-details">
-                <dl class="dl-horizontal left">
-                  <dt>Hostname<span ng-if="route.status.ingress.length > 1">s</span>:</dt>
-                  <dd>
-                    <span ng-if="!route.status.ingress">
-                      {{route | routeLabel : null : true}}
-                      <span data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
-                        <status-icon status="'Pending'"></status-icon>
-                        <span class="sr-only">Pending</span>
-                      </span>
+                <div ng-if="!route.status.ingress" class="route-status">
+                  <span class="h3">
+                    {{route | routeLabel : null : true}}
+                  </span>
+                  <div class="meta">
+                    <status-icon status="'Pending'"></status-icon>
+                    The route is not accepting traffic yet because it has not been admitted by a router.
+                  </div>
+                </div>
+                <div ng-repeat="ingress in route.status.ingress" ng-init="admittedCondition = (ingress | routeIngressCondition : 'Admitted')" class="route-status">
+                  <div class="h3">
+                    <span ng-if="(route | isWebRoute)">
+                      <a ng-href="{{route | routeWebURL : ingress.host}}" target="_blank">{{route | routeLabel : ingress.host : true}}</a>
                     </span>
-                    <div ng-repeat="ingress in route.status.ingress">
-                      <span ng-if="(route | isWebRoute)">
-                        <a ng-href="{{route | routeWebURL : ingress.host}}" target="_blank">{{route | routeLabel : ingress.host : true}}</a>
-                      </span>
-                      <span ng-if="!(route | isWebRoute)">
-                        {{route | routeLabel : ingress.host}}
-                      </span>
-                      &ndash;
-                      <span ng-init="admittedCondition = (ingress | routeIngressCondition : 'Admitted')">
-                        <span ng-if="!admittedCondition">admission status unknown for router '{{ingress.routerName}}'</span>
-                        <span ng-if="admittedCondition.status === 'True'">
-                          exposed on router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
-                        </span>
-                        <span ng-if="admittedCondition.status === 'False'">
-                          rejected by router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
-                        </span>
+                    <span ng-if="!(route | isWebRoute)">
+                      {{route | routeLabel : ingress.host}}
+                    </span>
+                  </div>
+                  <div class="meta">
+                    <span ng-if="!admittedCondition">Admission status unknown for router '{{ingress.routerName}}'</span>
+                    <span ng-if="admittedCondition.status === 'True'">
+                      <status-icon status="'Succeeded'"></status-icon>
+                      Exposed on router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
+                    </span>
+                    <span ng-if="admittedCondition.status === 'False'">
+                      <status-icon status="'Error'"></status-icon>
+                      Rejected by router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
+                    </span>
+                  </div>
+                  <div ng-if="showRouterHostnameAlert(ingress, admittedCondition)" class="mar-top-lg">
+                    <div class="alert alert-info">
+                      <span class="pficon pficon-info" aria-hidden="true"></span>
+                      <span class="mar-right-sm">
+                        The DNS admin should set up a CNAME from the route's hostname, {{ingress.host}},
+                        to the router's canonical hostname, {{ingress.routerCanonicalHostname}}.
                       </span>
+                      <a href="" ng-click="hideRouterHostnameAlert(ingress)" role="button" class="nowrap">Don't Show Me Again</a>
                     </div>
-                  </dd>
+                  </div>
+                </div>
+
+                <h4 class="mar-top-xl">Details</h4>
+                <dl class="dl-horizontal left">
                   <dt ng-if-start="route.spec.wildcardPolicy && route.spec.wildcardPolicy !== 'None' && route.spec.wildcardPolicy !== 'Subdomain'">Wildcard Policy:</dt>
                   <dd ng-if-end>{{route.spec.wildcardPolicy}}</dd>
                   <dt>Path:</dt>

diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
@@ -3360,19 +3360,19 @@ type:"Admitted",
 status:"True"
 });
 });
-}, h = function(b) {
-return "true" !== a("annotation")(b, "openshift.io/host.generated");
-}, i = function(a) {
+}, h = a("annotation"), i = function(a) {
+return "true" !== h(a, "openshift.io/host.generated");
+}, j = function(a) {
 var b = 0;
 g(a) && (b += 11);
 var c = _.get(a, "spec.alternateBackends");
-return _.isEmpty(c) || (b += 5), h(a) && (b += 3), a.spec.tls && (b += 1), b;
-}, j = function(a, b) {
-var c = i(a), d = i(b);
+return _.isEmpty(c) || (b += 5), i(a) && (b += 3), a.spec.tls && (b += 1), b;
+}, k = function(a, b) {
+var c = j(a), d = j(b);
 return d > c ? b :a;
-}, k = function(a) {
-return _.groupBy(a, "spec.to.name");
 }, l = function(a) {
+return _.groupBy(a, "spec.to.name");
+}, m = function(a) {
 var b = _.get(a, "spec.host", "");
 return b.replace(/^[a-z0-9]([-a-z0-9]*[a-z0-9])\./, "");
 };
@@ -3382,9 +3382,10 @@ var c = [];
 return a ? ("Service" === a.spec.to.kind && d(a, b, c), e(a, c), f(a, c), c) :c;
 },
 getServicePortForRoute:c,
-getPreferredDisplayRoute:j,
-groupByService:k,
-getSubdomain:l
+getPreferredDisplayRoute:k,
+groupByService:l,
+getSubdomain:m,
+isCustomHost:i
 };
 } ]), angular.module("openshiftConsole").factory("ChartsService", [ "Logger", function(a) {
 return {
@@ -6888,34 +6889,46 @@ b.routes = a.select(b.unfilteredRoutes), e();
 d.unwatchAll(h);
 });
 }));
-} ]), angular.module("openshiftConsole").controller("RouteController", [ "$scope", "$routeParams", "AlertMessageService", "DataService", "ProjectsService", "$filter", function(a, b, c, d, e, f) {
-a.projectName = b.project, a.route = null, a.alerts = {}, a.renderOptions = a.renderOptions || {}, a.renderOptions.hideFilterWidget = !0, a.breadcrumbs = [ {
+} ]), angular.module("openshiftConsole").controller("RouteController", [ "$scope", "$filter", "$routeParams", "AlertMessageService", "DataService", "ProjectsService", "RoutesService", function(a, b, c, d, e, f, g) {
+a.projectName = c.project, a.route = null, a.alerts = {}, a.renderOptions = a.renderOptions || {}, a.renderOptions.hideFilterWidget = !0, a.breadcrumbs = [ {
 title:"Routes",
-link:"project/" + b.project + "/browse/routes"
+link:"project/" + c.project + "/browse/routes"
 }, {
-title:b.route
-} ], c.getAlerts().forEach(function(b) {
+title:c.route
+} ], d.getAlerts().forEach(function(b) {
 a.alerts[b.name] = b.data;
-}), c.clearAlerts();
-var g = [], h = function(b, c) {
-a.loaded = !0, a.route = b, "DELETED" === c && (a.alerts.deleted = {
+}), d.clearAlerts();
+var h, i = [], j = function(b, c) {
+a.loaded = !0, a.route = b, h = g.isCustomHost(b), "DELETED" === c && (a.alerts.deleted = {
 type:"warning",
 message:"This route has been deleted."
 });
-};
-e.get(b.project).then(_.spread(function(c, e) {
-a.project = c, d.get("routes", b.route, e).then(function(a) {
-h(a), g.push(d.watchObject("routes", b.route, e, h));
-}, function(b) {
+}, k = function(b) {
+var c = _.get(a, "route.metadata.uid");
+return "router-host-" + c + "-" + b.host + "-" + b.routerCanonicalHostname;
+};
+a.showRouterHostnameAlert = function(b, c) {
+if (!h) return !1;
+if (!b || !b.host || !b.routerCanonicalHostname) return !1;
+if (!c || "True" !== c.status) return !1;
+var e = k(b);
+return !d.isAlertPermanentlyHidden(e, a.projectName);
+}, a.hideRouterHostnameAlert = function(b) {
+var c = k(b);
+d.permanentlyHideAlert(c, a.projectName);
+}, f.get(c.project).then(_.spread(function(d, f) {
+a.project = d, e.get("routes", c.route, f).then(function(a) {
+j(a), i.push(e.watchObject("routes", c.route, f, j));
+}, function(c) {
 a.loaded = !0, a.alerts.load = {
 type:"error",
 message:"The route details could not be loaded.",
-details:"Reason: " + f("getErrorDetails")(b)
+details:"Reason: " + b("getErrorDetails")(c)
 };
-}), g.push(d.watch("services", e, function(b) {
+}), i.push(e.watch("services", f, function(b) {
 a.services = b.by("metadata.name");
 })), a.$on("$destroy", function() {
-d.unwatchAll(g);
+e.unwatchAll(i);
 });
 }));
 } ]), angular.module("openshiftConsole").controller("StorageController", [ "$routeParams", "$scope", "AlertMessageService", "DataService", "ProjectsService", "$filter", "LabelFilter", "Logger", function(a, b, c, d, e, f, g, h) {

diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
@@ -3635,35 +3635,47 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"row\" ng-if=\"route\">\n" +
     "<div class=\"col-sm-12\">\n" +
     "<div class=\"resource-details\">\n" +
-    "<dl class=\"dl-horizontal left\">\n" +
-    "<dt>Hostname<span ng-if=\"route.status.ingress.length > 1\">s</span>:</dt>\n" +
-    "<dd>\n" +
-    "<span ng-if=\"!route.status.ingress\">\n" +
+    "<div ng-if=\"!route.status.ingress\" class=\"route-status\">\n" +
+    "<span class=\"h3\">\n" +
     "{{route | routeLabel : null : true}}\n" +
-    "<span data-toggle=\"popover\" data-trigger=\"hover\" data-content=\"The route is not accepting traffic yet because it has not been admitted by a router.\" style=\"cursor: help; padding-left: 5px\">\n" +
-    "<status-icon status=\"'Pending'\"></status-icon>\n" +
-    "<span class=\"sr-only\">Pending</span>\n" +
-    "</span>\n" +
     "</span>\n" +
-    "<div ng-repeat=\"ingress in route.status.ingress\">\n" +
+    "<div class=\"meta\">\n" +
+    "<status-icon status=\"'Pending'\"></status-icon>\n" +
+    "The route is not accepting traffic yet because it has not been admitted by a router.\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<div ng-repeat=\"ingress in route.status.ingress\" ng-init=\"admittedCondition = (ingress | routeIngressCondition : 'Admitted')\" class=\"route-status\">\n" +
+    "<div class=\"h3\">\n" +
     "<span ng-if=\"(route | isWebRoute)\">\n" +
     "<a ng-href=\"{{route | routeWebURL : ingress.host}}\" target=\"_blank\">{{route | routeLabel : ingress.host : true}}</a>\n" +
     "</span>\n" +
     "<span ng-if=\"!(route | isWebRoute)\">\n" +
     "{{route | routeLabel : ingress.host}}\n" +
     "</span>\n" +
-    "&ndash;\n" +
-    "<span ng-init=\"admittedCondition = (ingress | routeIngressCondition : 'Admitted')\">\n" +
-    "<span ng-if=\"!admittedCondition\">admission status unknown for router '{{ingress.routerName}}'</span>\n" +
+    "</div>\n" +
+    "<div class=\"meta\">\n" +
+    "<span ng-if=\"!admittedCondition\">Admission status unknown for router '{{ingress.routerName}}'</span>\n" +
     "<span ng-if=\"admittedCondition.status === 'True'\">\n" +
-    "exposed on router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
+    "<status-icon status=\"'Succeeded'\"></status-icon>\n" +
+    "Exposed on router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
     "</span>\n" +
     "<span ng-if=\"admittedCondition.status === 'False'\">\n" +
-    "rejected by router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
+    "<status-icon status=\"'Error'\"></status-icon>\n" +
+    "Rejected by router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
     "</span>\n" +
+    "</div>\n" +
+    "<div ng-if=\"showRouterHostnameAlert(ingress, admittedCondition)\" class=\"mar-top-lg\">\n" +
+    "<div class=\"alert alert-info\">\n" +
+    "<span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
+    "<span class=\"mar-right-sm\">\n" +
+    "The DNS admin should set up a CNAME from the route's hostname, {{ingress.host}}, to the router's canonical hostname, {{ingress.routerCanonicalHostname}}.\n" +
     "</span>\n" +
+    "<a href=\"\" ng-click=\"hideRouterHostnameAlert(ingress)\" role=\"button\" class=\"nowrap\">Don't Show Me Again</a>\n" +
     "</div>\n" +
-    "</dd>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<h4 class=\"mar-top-xl\">Details</h4>\n" +
+    "<dl class=\"dl-horizontal left\">\n" +
     "<dt ng-if-start=\"route.spec.wildcardPolicy && route.spec.wildcardPolicy !== 'None' && route.spec.wildcardPolicy !== 'Subdomain'\">Wildcard Policy:</dt>\n" +
     "<dd ng-if-end>{{route.spec.wildcardPolicy}}</dd>\n" +
     "<dt>Path:</dt>\n" +

diff --git a/dist/styles/main.css b/dist/styles/main.css
@@ -3790,6 +3790,7 @@ mark{padding:0;background-color:rgba(252,248,160,.5)}
 .build-config-summary .h3,.deployment-config-summary .h3{margin-bottom:0}
 .build-config-summary .last-status,.deployment-config-summary .last-status{margin-right:5px}
 .build-config-summary .last-timestamp,.deployment-config-summary .last-timestamp{margin-left:25px}
+.route-status .h3{margin-top:0;margin-bottom:5px}
 .deployment-config-summary{padding-bottom:20px}
 .deployment-config-summary.gutter-bottom-2x{padding-bottom:40px}
 .registry-image-pull{margin-bottom:20px}