Show router canonical hostname on route page

If the route has a custom hostname and the router has a canonical
hostname configured, show a message on the route page about setting up
the DNS CNAME record.

Author: spadgett

app/scripts/filters/resources.js

@@ -1145,6 +1145,11 @@ angular.module('openshiftConsole')
       return nameFormatMap[resourceType] || resourceType;
     };
   })
+  .filter('routeHasCustomHost', function(annotationFilter) {
+    return function(route) {
+      return annotationFilter(route, "openshift.io/host.generated") !== "true";
+    };
+  })
   .filter('routeTargetPortMapping', function(RoutesService) {
     var portDisplayValue = function(servicePort, containerPort, protocol) {
       servicePort = servicePort || "<unknown>";

app/scripts/services/routes.js

@@ -92,9 +92,7 @@ angular.module("openshiftConsole")
       });
     };
 
-    var isCustomHost = function(route) {
-      return $filter('annotation')(route, "openshift.io/host.generated") !== "true";
-    };
+    var isCustomHost = $filter('routeHasCustomHost');
 
     // Gets a score for the route to decide which to show on the overview.
     var scoreRoute = function(route) {

app/styles/_core.less

@@ -200,6 +200,11 @@ mark {
   }
 }
 
+.route-status .h3 {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
 .deployment-config-summary {
   .gutter-bottom();
 }

app/views/browse/route.html

@@ -52,35 +52,43 @@ <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>
-                    </div>
-                  </dd>
+                    <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="(route | routeHasCustomHost) && ingress.routerCanonicalHostname" class="help-block">
+                    The DNS admin should set up a CNAME from the route's hostname, {{route.spec.host}},
+                    to the router's canonical hostname, {{ingress.routerCanonicalHostname}}.
+                  </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>

dist/scripts/scripts.js

@@ -3360,9 +3360,7 @@ type:"Admitted",
 status:"True"
 });
 });
-}, h = function(b) {
-return "true" !== a("annotation")(b, "openshift.io/host.generated");
-}, i = function(a) {
+}, h = a("routeHasCustomHost"), i = function(a) {
 var b = 0;
 g(a) && (b += 11);
 var c = _.get(a, "spec.alternateBackends");
@@ -14377,7 +14375,11 @@ resourcequotas:"resource quotas",
 };
 return b ? c[a] || a :d[a] || a;
 };
-}).filter("routeTargetPortMapping", [ "RoutesService", function(a) {
+}).filter("routeHasCustomHost", [ "annotationFilter", function(a) {
+return function(b) {
+return "true" !== a(b, "openshift.io/host.generated");
+};
+} ]).filter("routeTargetPortMapping", [ "RoutesService", function(a) {
 var b = function(a, b, c) {
 a = a || "<unknown>", b = b || "<unknown>";
 var d = "Service Port " + a + " → Container Port " + b;

dist/scripts/templates.js

@@ -3635,35 +3635,41 @@ 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" +
-    "</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" +
-    "</dd>\n" +
+    "<div ng-if=\"(route | routeHasCustomHost) && ingress.routerCanonicalHostname\" class=\"help-block\">\n" +
+    "The DNS admin should set up a CNAME from the route's hostname, {{route.spec.host}}, to the router's canonical hostname, {{ingress.routerCanonicalHostname}}.\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" +

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}