Skip to content

Commit dd575bd

Browse files
spadgettspadgett
committed
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.
1 parent 9989eef commit dd575bd

File tree

7 files changed

+159
-71
lines changed

7 files changed

+159
-71
lines changed

Diff for: ‎app/scripts/controllers/route.js

+42-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@
77
* Controller of the openshiftConsole
88
*/
99
angular.module('openshiftConsole')
10-
.controller('RouteController', function ($scope, $routeParams, AlertMessageService, DataService, ProjectsService, $filter) {
10+
.controller('RouteController',
11+
function($scope,
12+
$filter,
13+
$routeParams,
14+
AlertMessageService,
15+
DataService,
16+
ProjectsService,
17+
RoutesService) {
1118
$scope.projectName = $routeParams.project;
1219
$scope.route = null;
1320
$scope.alerts = {};
@@ -31,9 +38,11 @@ angular.module('openshiftConsole')
3138

3239
var watches = [];
3340

41+
var isCustomHost;
3442
var routeResolved = function(route, action) {
3543
$scope.loaded = true;
3644
$scope.route = route;
45+
isCustomHost = RoutesService.isCustomHost(route);
3746
if (action === "DELETED") {
3847
$scope.alerts["deleted"] = {
3948
type: "warning",
@@ -42,6 +51,38 @@ angular.module('openshiftConsole')
4251
}
4352
};
4453

54+
// Use an alert key that has the route UID, route host, and router
55+
// hostname. This will handle cases where the route is admitted by
56+
// multiple routers and we have more than one alert.
57+
var routerHostnameAlertKey = function(ingress) {
58+
var uid = _.get($scope, 'route.metadata.uid');
59+
return 'router-host-' + uid + '-' + ingress.host + '-' + ingress.routerCanonicalHostname;
60+
};
61+
62+
// Show the alert for admitted routes that have a custom host if
63+
// routerCanonicalHostname is set.
64+
$scope.showRouterHostnameAlert = function(ingress, admittedCondition) {
65+
if (!isCustomHost) {
66+
return false;
67+
}
68+
69+
if (!ingress || !ingress.host || !ingress.routerCanonicalHostname) {
70+
return false;
71+
}
72+
73+
if (!admittedCondition || admittedCondition.status !== 'True') {
74+
return false;
75+
}
76+
77+
var alertKey = routerHostnameAlertKey(ingress);
78+
return !AlertMessageService.isAlertPermanentlyHidden(alertKey, $scope.projectName);
79+
};
80+
81+
$scope.hideRouterHostnameAlert = function(ingress) {
82+
var alertKey = routerHostnameAlertKey(ingress);
83+
AlertMessageService.permanentlyHideAlert(alertKey, $scope.projectName);
84+
};
85+
4586
ProjectsService
4687
.get($routeParams.project)
4788
.then(_.spread(function(project, context) {

Diff for: ‎app/scripts/services/routes.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,9 @@ angular.module("openshiftConsole")
9292
});
9393
};
9494

95+
var annotation = $filter('annotation');
9596
var isCustomHost = function(route) {
96-
return $filter('annotation')(route, "openshift.io/host.generated") !== "true";
97+
return annotation(route, "openshift.io/host.generated") !== "true";
9798
};
9899

99100
// Gets a score for the route to decide which to show on the overview.
@@ -164,6 +165,7 @@ angular.module("openshiftConsole")
164165
getServicePortForRoute: getServicePortForRoute,
165166
getPreferredDisplayRoute: getPreferredDisplayRoute,
166167
groupByService: groupByService,
167-
getSubdomain: getSubdomain
168+
getSubdomain: getSubdomain,
169+
isCustomHost: isCustomHost
168170
};
169171
});

Diff for: ‎app/styles/_core.less

+5
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,11 @@ mark {
200200
}
201201
}
202202

203+
.route-status .h3 {
204+
margin-top: 0;
205+
margin-bottom: 5px;
206+
}
207+
203208
.deployment-config-summary {
204209
.gutter-bottom();
205210
}

Diff for: ‎app/views/browse/route.html

+40-26
Original file line numberDiff line numberDiff line change
@@ -52,35 +52,49 @@ <h1 class="contains-actions">
5252
<div class="row" ng-if="route">
5353
<div class="col-sm-12">
5454
<div class="resource-details">
55-
<dl class="dl-horizontal left">
56-
<dt>Hostname<span ng-if="route.status.ingress.length > 1">s</span>:</dt>
57-
<dd>
58-
<span ng-if="!route.status.ingress">
59-
{{route | routeLabel : null : true}}
60-
<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;">
61-
<status-icon status="'Pending'"></status-icon>
62-
<span class="sr-only">Pending</span>
63-
</span>
55+
<div ng-if="!route.status.ingress" class="route-status">
56+
<span class="h3">
57+
{{route | routeLabel : null : true}}
58+
</span>
59+
<div class="meta">
60+
<status-icon status="'Pending'"></status-icon>
61+
The route is not accepting traffic yet because it has not been admitted by a router.
62+
</div>
63+
</div>
64+
<div ng-repeat="ingress in route.status.ingress" ng-init="admittedCondition = (ingress | routeIngressCondition : 'Admitted')" class="route-status">
65+
<div class="h3">
66+
<span ng-if="(route | isWebRoute)">
67+
<a ng-href="{{route | routeWebURL : ingress.host}}" target="_blank">{{route | routeLabel : ingress.host : true}}</a>
6468
</span>
65-
<div ng-repeat="ingress in route.status.ingress">
66-
<span ng-if="(route | isWebRoute)">
67-
<a ng-href="{{route | routeWebURL : ingress.host}}" target="_blank">{{route | routeLabel : ingress.host : true}}</a>
68-
</span>
69-
<span ng-if="!(route | isWebRoute)">
70-
{{route | routeLabel : ingress.host}}
71-
</span>
72-
&ndash;
73-
<span ng-init="admittedCondition = (ingress | routeIngressCondition : 'Admitted')">
74-
<span ng-if="!admittedCondition">admission status unknown for router '{{ingress.routerName}}'</span>
75-
<span ng-if="admittedCondition.status === 'True'">
76-
exposed on router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
77-
</span>
78-
<span ng-if="admittedCondition.status === 'False'">
79-
rejected by router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
80-
</span>
69+
<span ng-if="!(route | isWebRoute)">
70+
{{route | routeLabel : ingress.host}}
71+
</span>
72+
</div>
73+
<div class="meta">
74+
<span ng-if="!admittedCondition">Admission status unknown for router '{{ingress.routerName}}'</span>
75+
<span ng-if="admittedCondition.status === 'True'">
76+
<status-icon status="'Succeeded'"></status-icon>
77+
Exposed on router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
78+
</span>
79+
<span ng-if="admittedCondition.status === 'False'">
80+
<status-icon status="'Error'"></status-icon>
81+
Rejected by router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
82+
</span>
83+
</div>
84+
<div ng-if="showRouterHostnameAlert(ingress, admittedCondition)" class="mar-top-lg">
85+
<div class="alert alert-info">
86+
<span class="pficon pficon-info" aria-hidden="true"></span>
87+
<span class="mar-right-sm">
88+
The DNS admin should set up a CNAME from the route's hostname, {{ingress.host}},
89+
to the router's canonical hostname, {{ingress.routerCanonicalHostname}}.
8190
</span>
91+
<a href="" ng-click="hideRouterHostnameAlert(ingress)" role="button" class="nowrap">Don't Show Me Again</a>
8292
</div>
83-
</dd>
93+
</div>
94+
</div>
95+
96+
<h4 class="mar-top-xl">Details</h4>
97+
<dl class="dl-horizontal left">
8498
<dt ng-if-start="route.spec.wildcardPolicy && route.spec.wildcardPolicy !== 'None' && route.spec.wildcardPolicy !== 'Subdomain'">Wildcard Policy:</dt>
8599
<dd ng-if-end>{{route.spec.wildcardPolicy}}</dd>
86100
<dt>Path:</dt>

Diff for: ‎dist/scripts/scripts.js

+40-27
Original file line numberDiff line numberDiff line change
@@ -3360,19 +3360,19 @@ type:"Admitted",
33603360
status:"True"
33613361
});
33623362
});
3363-
}, h = function(b) {
3364-
return "true" !== a("annotation")(b, "openshift.io/host.generated");
3365-
}, i = function(a) {
3363+
}, h = a("annotation"), i = function(a) {
3364+
return "true" !== h(a, "openshift.io/host.generated");
3365+
}, j = function(a) {
33663366
var b = 0;
33673367
g(a) && (b += 11);
33683368
var c = _.get(a, "spec.alternateBackends");
3369-
return _.isEmpty(c) || (b += 5), h(a) && (b += 3), a.spec.tls && (b += 1), b;
3370-
}, j = function(a, b) {
3371-
var c = i(a), d = i(b);
3369+
return _.isEmpty(c) || (b += 5), i(a) && (b += 3), a.spec.tls && (b += 1), b;
3370+
}, k = function(a, b) {
3371+
var c = j(a), d = j(b);
33723372
return d > c ? b :a;
3373-
}, k = function(a) {
3374-
return _.groupBy(a, "spec.to.name");
33753373
}, l = function(a) {
3374+
return _.groupBy(a, "spec.to.name");
3375+
}, m = function(a) {
33763376
var b = _.get(a, "spec.host", "");
33773377
return b.replace(/^[a-z0-9]([-a-z0-9]*[a-z0-9])\./, "");
33783378
};
@@ -3382,9 +3382,10 @@ var c = [];
33823382
return a ? ("Service" === a.spec.to.kind && d(a, b, c), e(a, c), f(a, c), c) :c;
33833383
},
33843384
getServicePortForRoute:c,
3385-
getPreferredDisplayRoute:j,
3386-
groupByService:k,
3387-
getSubdomain:l
3385+
getPreferredDisplayRoute:k,
3386+
groupByService:l,
3387+
getSubdomain:m,
3388+
isCustomHost:i
33883389
};
33893390
} ]), angular.module("openshiftConsole").factory("ChartsService", [ "Logger", function(a) {
33903391
return {
@@ -6888,34 +6889,46 @@ b.routes = a.select(b.unfilteredRoutes), e();
68886889
d.unwatchAll(h);
68896890
});
68906891
}));
6891-
} ]), angular.module("openshiftConsole").controller("RouteController", [ "$scope", "$routeParams", "AlertMessageService", "DataService", "ProjectsService", "$filter", function(a, b, c, d, e, f) {
6892-
a.projectName = b.project, a.route = null, a.alerts = {}, a.renderOptions = a.renderOptions || {}, a.renderOptions.hideFilterWidget = !0, a.breadcrumbs = [ {
6892+
} ]), angular.module("openshiftConsole").controller("RouteController", [ "$scope", "$filter", "$routeParams", "AlertMessageService", "DataService", "ProjectsService", "RoutesService", function(a, b, c, d, e, f, g) {
6893+
a.projectName = c.project, a.route = null, a.alerts = {}, a.renderOptions = a.renderOptions || {}, a.renderOptions.hideFilterWidget = !0, a.breadcrumbs = [ {
68936894
title:"Routes",
6894-
link:"project/" + b.project + "/browse/routes"
6895+
link:"project/" + c.project + "/browse/routes"
68956896
}, {
6896-
title:b.route
6897-
} ], c.getAlerts().forEach(function(b) {
6897+
title:c.route
6898+
} ], d.getAlerts().forEach(function(b) {
68986899
a.alerts[b.name] = b.data;
6899-
}), c.clearAlerts();
6900-
var g = [], h = function(b, c) {
6901-
a.loaded = !0, a.route = b, "DELETED" === c && (a.alerts.deleted = {
6900+
}), d.clearAlerts();
6901+
var h, i = [], j = function(b, c) {
6902+
a.loaded = !0, a.route = b, h = g.isCustomHost(b), "DELETED" === c && (a.alerts.deleted = {
69026903
type:"warning",
69036904
message:"This route has been deleted."
69046905
});
6905-
};
6906-
e.get(b.project).then(_.spread(function(c, e) {
6907-
a.project = c, d.get("routes", b.route, e).then(function(a) {
6908-
h(a), g.push(d.watchObject("routes", b.route, e, h));
6909-
}, function(b) {
6906+
}, k = function(b) {
6907+
var c = _.get(a, "route.metadata.uid");
6908+
return "router-host-" + c + "-" + b.host + "-" + b.routerCanonicalHostname;
6909+
};
6910+
a.showRouterHostnameAlert = function(b, c) {
6911+
if (!h) return !1;
6912+
if (!b || !b.host || !b.routerCanonicalHostname) return !1;
6913+
if (!c || "True" !== c.status) return !1;
6914+
var e = k(b);
6915+
return !d.isAlertPermanentlyHidden(e, a.projectName);
6916+
}, a.hideRouterHostnameAlert = function(b) {
6917+
var c = k(b);
6918+
d.permanentlyHideAlert(c, a.projectName);
6919+
}, f.get(c.project).then(_.spread(function(d, f) {
6920+
a.project = d, e.get("routes", c.route, f).then(function(a) {
6921+
j(a), i.push(e.watchObject("routes", c.route, f, j));
6922+
}, function(c) {
69106923
a.loaded = !0, a.alerts.load = {
69116924
type:"error",
69126925
message:"The route details could not be loaded.",
6913-
details:"Reason: " + f("getErrorDetails")(b)
6926+
details:"Reason: " + b("getErrorDetails")(c)
69146927
};
6915-
}), g.push(d.watch("services", e, function(b) {
6928+
}), i.push(e.watch("services", f, function(b) {
69166929
a.services = b.by("metadata.name");
69176930
})), a.$on("$destroy", function() {
6918-
d.unwatchAll(g);
6931+
e.unwatchAll(i);
69196932
});
69206933
}));
69216934
} ]), angular.module("openshiftConsole").controller("StorageController", [ "$routeParams", "$scope", "AlertMessageService", "DataService", "ProjectsService", "$filter", "LabelFilter", "Logger", function(a, b, c, d, e, f, g, h) {

Diff for: ‎dist/scripts/templates.js

+27-15
Original file line numberDiff line numberDiff line change
@@ -3635,35 +3635,47 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
36353635
"<div class=\"row\" ng-if=\"route\">\n" +
36363636
"<div class=\"col-sm-12\">\n" +
36373637
"<div class=\"resource-details\">\n" +
3638-
"<dl class=\"dl-horizontal left\">\n" +
3639-
"<dt>Hostname<span ng-if=\"route.status.ingress.length > 1\">s</span>:</dt>\n" +
3640-
"<dd>\n" +
3641-
"<span ng-if=\"!route.status.ingress\">\n" +
3638+
"<div ng-if=\"!route.status.ingress\" class=\"route-status\">\n" +
3639+
"<span class=\"h3\">\n" +
36423640
"{{route | routeLabel : null : true}}\n" +
3643-
"<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" +
3644-
"<status-icon status=\"'Pending'\"></status-icon>\n" +
3645-
"<span class=\"sr-only\">Pending</span>\n" +
3646-
"</span>\n" +
36473641
"</span>\n" +
3648-
"<div ng-repeat=\"ingress in route.status.ingress\">\n" +
3642+
"<div class=\"meta\">\n" +
3643+
"<status-icon status=\"'Pending'\"></status-icon>\n" +
3644+
"The route is not accepting traffic yet because it has not been admitted by a router.\n" +
3645+
"</div>\n" +
3646+
"</div>\n" +
3647+
"<div ng-repeat=\"ingress in route.status.ingress\" ng-init=\"admittedCondition = (ingress | routeIngressCondition : 'Admitted')\" class=\"route-status\">\n" +
3648+
"<div class=\"h3\">\n" +
36493649
"<span ng-if=\"(route | isWebRoute)\">\n" +
36503650
"<a ng-href=\"{{route | routeWebURL : ingress.host}}\" target=\"_blank\">{{route | routeLabel : ingress.host : true}}</a>\n" +
36513651
"</span>\n" +
36523652
"<span ng-if=\"!(route | isWebRoute)\">\n" +
36533653
"{{route | routeLabel : ingress.host}}\n" +
36543654
"</span>\n" +
3655-
"&ndash;\n" +
3656-
"<span ng-init=\"admittedCondition = (ingress | routeIngressCondition : 'Admitted')\">\n" +
3657-
"<span ng-if=\"!admittedCondition\">admission status unknown for router '{{ingress.routerName}}'</span>\n" +
3655+
"</div>\n" +
3656+
"<div class=\"meta\">\n" +
3657+
"<span ng-if=\"!admittedCondition\">Admission status unknown for router '{{ingress.routerName}}'</span>\n" +
36583658
"<span ng-if=\"admittedCondition.status === 'True'\">\n" +
3659-
"exposed on router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
3659+
"<status-icon status=\"'Succeeded'\"></status-icon>\n" +
3660+
"Exposed on router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
36603661
"</span>\n" +
36613662
"<span ng-if=\"admittedCondition.status === 'False'\">\n" +
3662-
"rejected by router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
3663+
"<status-icon status=\"'Error'\"></status-icon>\n" +
3664+
"Rejected by router '{{ingress.routerName}}' <span am-time-ago=\"admittedCondition.lastTransitionTime\"></span>\n" +
36633665
"</span>\n" +
3666+
"</div>\n" +
3667+
"<div ng-if=\"showRouterHostnameAlert(ingress, admittedCondition)\" class=\"mar-top-lg\">\n" +
3668+
"<div class=\"alert alert-info\">\n" +
3669+
"<span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
3670+
"<span class=\"mar-right-sm\">\n" +
3671+
"The DNS admin should set up a CNAME from the route's hostname, {{ingress.host}}, to the router's canonical hostname, {{ingress.routerCanonicalHostname}}.\n" +
36643672
"</span>\n" +
3673+
"<a href=\"\" ng-click=\"hideRouterHostnameAlert(ingress)\" role=\"button\" class=\"nowrap\">Don't Show Me Again</a>\n" +
36653674
"</div>\n" +
3666-
"</dd>\n" +
3675+
"</div>\n" +
3676+
"</div>\n" +
3677+
"<h4 class=\"mar-top-xl\">Details</h4>\n" +
3678+
"<dl class=\"dl-horizontal left\">\n" +
36673679
"<dt ng-if-start=\"route.spec.wildcardPolicy && route.spec.wildcardPolicy !== 'None' && route.spec.wildcardPolicy !== 'Subdomain'\">Wildcard Policy:</dt>\n" +
36683680
"<dd ng-if-end>{{route.spec.wildcardPolicy}}</dd>\n" +
36693681
"<dt>Path:</dt>\n" +

Diff for: ‎dist/styles/main.css

+1
Original file line numberDiff line numberDiff line change
@@ -3790,6 +3790,7 @@ mark{padding:0;background-color:rgba(252,248,160,.5)}
37903790
.build-config-summary .h3,.deployment-config-summary .h3{margin-bottom:0}
37913791
.build-config-summary .last-status,.deployment-config-summary .last-status{margin-right:5px}
37923792
.build-config-summary .last-timestamp,.deployment-config-summary .last-timestamp{margin-left:25px}
3793+
.route-status .h3{margin-top:0;margin-bottom:5px}
37933794
.deployment-config-summary{padding-bottom:20px}
37943795
.deployment-config-summary.gutter-bottom-2x{padding-bottom:40px}
37953796
.registry-image-pull{margin-bottom:20px}

0 commit comments

Comments
 (0)