Add support for wildcard subdomains

app/scripts/constants.js

@@ -52,6 +52,10 @@ window.OPENSHIFT_CONSTANTS = {
   // true indicates that deployment metrics should be disabled on the web console overview
   DISABLE_OVERVIEW_METRICS: false,
 
+  // true indicates that none of the routers support wildcard subdomains and
+  // removes the option from the route creation form.
+  DISABLE_WILDCARD_ROUTES: true,
+
   // This blacklist hides certain kinds from the "Other Resources" page because they are unpersisted, disallowed for most end users, or not supported by openshift but exist in kubernetes
   AVAILABLE_KINDS_BLACKLIST: [
       // These are k8s kinds that are not supported in the current release of OpenShift

app/scripts/controllers/edit/route.js

@@ -15,7 +15,8 @@ angular.module('openshiftConsole')
                                                AlertMessageService,
                                                DataService,
                                                Navigate,
-                                               ProjectsService) {
+                                               ProjectsService,
+                                               RoutesService) {
     $scope.alerts = {};
     $scope.renderOptions = {
       hideFilterWidget: true
@@ -51,9 +52,16 @@ angular.module('openshiftConsole')
         DataService.get("routes", $scope.routeName, context).then(
           function(original) {
             route = angular.copy(original);
+            var host = _.get(route, 'spec.host');
+            var isWildcard = _.get(route, 'spec.wildcardPolicy') === 'Subdomain';
+            if (isWildcard) {
+              // Display the route as a wildcard.
+              host = '*.' + RoutesService.getSubdomain(route);
+            }
             $scope.routing = {
               service: _.get(route, 'spec.to.name'),
-              host: _.get(route, 'spec.host'),
+              host: host,
+              wildcardPolicy: _.get(route, 'spec.wildcardPolicy'),
               path: _.get(route, 'spec.path'),
               targetPort: _.get(route, 'spec.port.targetPort'),
               tls: angular.copy(_.get(route, 'spec.tls'))

app/scripts/directives/oscRouting.js

@@ -29,7 +29,7 @@ angular.module("openshiftConsole")
    * routingDisabled:
    *   An expression that will disable the form (default: false)
    */
-  .directive("oscRouting", function() {
+  .directive("oscRouting", function(Constants) {
     return {
       require: '^form',
       restrict: 'E',
@@ -50,6 +50,17 @@ angular.module("openshiftConsole")
       link: function(scope, element, attrs, formCtl) {
         scope.form = formCtl;
 
+        scope.disableWildcards = Constants.DISABLE_WILDCARD_ROUTES;
+
+        // Use different patterns for validating hostnames if wildcard subdomains are supported.
+        if (scope.disableWildcards) {
+          // See k8s.io/kubernetes/pkg/util/validation/validation.go
+          scope.hostnamePattern = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/;
+        } else {
+          // Allow values like "*.example.com" in addition to the normal hostname regex.
+          scope.hostnamePattern = /^(\*(\.[a-z0-9]([-a-z0-9]*[a-z0-9]))+|[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*)$/;
+        }
+
         var updatePortOptions = function(service) {
           if (!service) {
             return;

app/scripts/filters/resources.js

@@ -333,10 +333,8 @@ angular.module('openshiftConsole')
   })
   .filter('isWebRoute', function(routeHostFilter) {
     return function(route){
-       //TODO: implement when we can tell if routes are http(s) or not web related which will drive
-       // links in view
-       // For now, only return false if the host is not defined.
-       return !!routeHostFilter(route);
+       return !!routeHostFilter(route) &&
+              _.get(route, 'spec.wildcardPolicy') !== 'Subdomain';
     };
   })
   .filter('routeWebURL', function(routeHostFilter){
@@ -349,15 +347,21 @@ angular.module('openshiftConsole')
         return url;
     };
   })
-  .filter('routeLabel', function(routeHostFilter, routeWebURLFilter, isWebRouteFilter) {
+  .filter('routeLabel', function(RoutesService, routeHostFilter, routeWebURLFilter, isWebRouteFilter) {
     return function(route, host) {
       if (isWebRouteFilter(route)) {
         return routeWebURLFilter(route, host);
       }
+
       var label = (host || routeHostFilter(route));
       if (!label) {
         return '<unknown host>';
       }
+
+      if (_.get(route, 'spec.wildcardPolicy') === 'Subdomain') {
+        label = '*.' + RoutesService.getSubdomain(route);
+      }
+
       if (route.spec.path) {
         label += route.spec.path;
       }

app/scripts/services/applicationGenerator.js

@@ -126,12 +126,19 @@ angular.module("openshiftConsole")
           to: {
             kind: "Service",
             name: serviceName
-          }
+          },
+          wildcardPolicy: 'None'
         }
       };
 
-      if (input.routing.host) {
-        route.spec.host = input.routing.host;
+      var host = input.routing.host;
+      if (host) {
+        if (host.startsWith('*.')) {
+          route.spec.wildcardPolicy = 'Subdomain';
+          route.spec.host = 'wildcard' + host.substring(1);
+        } else {
+          route.spec.host = host;
+        }
       }
 
       if (input.routing.path) {

app/scripts/services/routes.js

@@ -63,6 +63,7 @@ angular.module("openshiftConsole")
     };
 
     var addIngressWarnings = function(route, warnings) {
+      var wildcardPolicy = _.get(route, 'spec.wildcardPolicy');
       angular.forEach(route.status.ingress, function(ingress) {
         var condition = _.find(ingress.conditions, { type: "Admitted", status: "False" });
         if (condition) {
@@ -72,6 +73,11 @@ angular.module("openshiftConsole")
           }
           warnings.push(message);
         }
+
+        // This message only displays with old router images that are not aware of `wildcardPolicy`.
+        if (!condition && wildcardPolicy === 'Subdomain' && ingress.wildcardPolicy !== wildcardPolicy) {
+          warnings.push('Router "' + ingress.routerName + '" does not support wildcard subdomains. Your route will only be available at host ' + ingress.host + '.');
+        }
       });
     };
 
@@ -123,6 +129,12 @@ angular.module("openshiftConsole")
       return _.groupBy(routes, 'spec.to.name');
     };
 
+    // For host "foo.example.com" return "example.com"
+    var getSubdomain = function(route) {
+      var hostname = _.get(route, 'spec.host', '');
+      return hostname.replace(/^[a-z0-9]([-a-z0-9]*[a-z0-9])\./, '');
+    };
+
     return {
       // Gets warnings about a route.
       //
@@ -151,6 +163,7 @@ angular.module("openshiftConsole")
 
       getServicePortForRoute: getServicePortForRoute,
       getPreferredDisplayRoute: getPreferredDisplayRoute,
-      groupByService: groupByService
+      groupByService: groupByService,
+      getSubdomain: getSubdomain
     };
   });

app/styles/_core.less

@@ -449,12 +449,6 @@ label.checkbox {
   right: -3px;
 }
 
-.create-route-icon,
-.create-storage-icon {
-  padding-top: 0;
-  text-align: right;
-}
-
 .about,
 .command-line {
   .about-icon {

app/styles/_forms.less

@@ -1,4 +1,8 @@
 .copy-to-clipboard input.form-control:read-only {
   background-color: white;
   color: @text-color;
-}
+}
+
+.input-group-addon.wildcard-prefix {
+  padding-left: 10px;
+}

app/styles/_overview.less

@@ -246,13 +246,20 @@
         margin-left: 2px;
         margin-right: 6px;
       }
+      .non-web-route {
+        // Add extra margin to account for the missing external link icon.
+        margin-left: 25px;
+      }
       @media (min-width: @screen-sm-min) {
         // At wider screen widths, always 0 margin.
         margin: 0;
         .fa-external-link {
           margin-left: 0;
           margin-right: 5px;
         }
+        .non-web-route {
+          margin-left: 0;
+        }
       }
     }
     .app-name {

app/views/browse/route.html

@@ -43,7 +43,7 @@ <h1>
                 </ul>
               </div>
             </h1>
-            <labels labels="route.metadata.labels" clickable="true" kind="routes" project-name="{{route.metadata.namespace}}" limit="3"></labels> 
+            <labels labels="route.metadata.labels" clickable="true" kind="routes" project-name="{{route.metadata.namespace}}" limit="3"></labels>
           </div>
         </div>
       </div><!-- /middle-header-->
@@ -59,16 +59,16 @@ <h1>
                       {{route | routeLabel}}
                       <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'" disable-animation></status-icon>
-                        <span class="sr-only">Pending</span>                        
+                        <span class="sr-only">Pending</span>
                       </span>
-                    </span>  
+                    </span>
                     <div ng-repeat="ingress in route.status.ingress">
                       <span ng-if="(route | isWebRoute)">
                         <a href="{{route | routeWebURL : ingress.host}}" target="_blank">{{route | routeLabel : ingress.host}}</a>
                       </span>
                       <span ng-if="!(route | isWebRoute)">
                         {{route | routeLabel : ingress.host}}
-                      </span>                    
+                      </span>
                       &ndash;
                       <span ng-init="admittedCondition = (ingress | routeIngressCondition : 'Admitted')">
                         <span ng-if="!admittedCondition">admission status unknown for router '{{ingress.routerName}}'</span>
@@ -77,16 +77,18 @@ <h1>
                         </span>
                         <span ng-if="admittedCondition.status === 'False'">
                           rejected by router '{{ingress.routerName}}' <relative-timestamp timestamp="admittedCondition.lastTransitionTime"></relative-timestamp>
-                        </span>                        
+                        </span>
                       </span>
                     </div>
                   </dd>
+                  <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>
                   <dd>
                     <span ng-if="route.spec.path">{{route.spec.path}}</span>
                     <span ng-if="!route.spec.path"><em>none</em></span>
                   </dd>
-                  <dt>{{route.spec.to.kind || "Routes to"}}:</dt>
+                  <dt>{{route.spec.to.kind || "Routes To"}}:</dt>
                   <dd>
                     <a ng-href="{{route.spec.to.name | navigateResourceURL : route.spec.to.kind : route.metadata.namespace}}">{{route.spec.to.name}}</a>
                   </dd>
@@ -143,7 +145,7 @@ <h4>Traffic</h4>
                 <div style="margin-bottom: 10px;">
                   <h4>TLS Settings</h4>
                   <dl class="dl-horizontal left" ng-if="route.spec.tls">
-                    <dt>Termination type:</dt>
+                    <dt>Termination Type:</dt>
                     <dd>{{route.spec.tls.termination}}</dd>
                     <dt ng-if-start="route.spec.tls.termination === 'edge'">Insecure Traffic:</dt>
                     <dd ng-if-end>{{route.spec.tls.insecureEdgeTerminationPolicy || 'None'}}</dd>

app/views/directives/osc-routing.html

@@ -42,7 +42,7 @@
           type="text"
           name="host"
           ng-model="route.host"
-          ng-pattern="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/"
+          ng-pattern="hostnamePattern"
           ng-maxlength="253"
           ng-readonly="hostReadOnly"
           placeholder="www.example.com"
@@ -52,15 +52,23 @@
           aria-describedby="route-host-help">
       <div>
         <span id="route-host-help" class="help-block">
-          Public hostname for the route.
-          <span ng-if="!hostReadOnly">If not specified, a hostname is generated.</span>
-          The hostname can't be changed after the route is created.
+          <p>
+            Public hostname for the route.
+            <span ng-if="!hostReadOnly">
+              If not specified, a hostname is generated.
+            </span>
+            <span ng-if="!disableWildcards">
+              You can use <var>*.example.com</var> with routers that support wildcard subdomains.
+            </span>
+          </p>
+          <p>The hostname can't be changed after the route is created.</p>
         </span>
       </div>
       <div class="has-error" ng-show="routeForm.host.$error.pattern && routeForm.host.$touched && !routingDisabled">
         <span class="help-block">
           Hostname must consist of lower-case letters, numbers, periods, and
           hyphens. It must start and end with a letter or number.
+          <span ng-if="!disableWildcards">Wildcard subdomains may start with <var>*.</var></span>
         </span>
       </div>
     </div>
@@ -152,9 +160,10 @@ <h3>Alternate Services</h3>
 
     <div class="checkbox">
       <label>
-        <input type="checkbox" ng-model="secureRoute" id="secure-route">Secure route
+        <input type="checkbox" ng-model="secureRoute" aria-describedby="secure-route-help">
+        Secure route
       </label>
-      <div class="help-block">
+      <div class="help-block" id="secure-route-help">
         Routes can be secured using several TLS termination types for serving certificates.
       </div>
     </div>

app/views/edit/route.html

@@ -9,35 +9,31 @@
       <div class="middle-container">
         <div class="middle-content">
           <div class="container surface-shaded">
-            <div class="col-md-12">
+            <div class="col-md-10 col-md-offset-1">
               <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
               <alerts alerts="alerts"></alerts>
-              <div class="row">
-                <div class="col-md-10 col-md-offset-1 gutter-top">
-                  <h1>Edit Route {{routeName}}</h1>
-                  <div ng-if="loading">
-                    Loading...
-                  </div>
-                  <form name="form">
-                    <fieldset ng-disabled="disableInputs" ng-if="!loading">
-                      <osc-routing
-                          model="routing"
-                          services="services"
-                          show-name-input="false"
-                          host-read-only="true">
-                      </osc-routing>
-                      <div class="button-group gutter-top gutter-bottom">
-                        <button type="submit"
-                            class="btn btn-primary btn-lg"
-                            ng-click="updateRoute()"
-                            ng-disabled="form.$invalid || disableInputs"
-                            value="">Save</button>
-                        <a class="btn btn-default btn-lg" ng-href="{{routeURL}}">Cancel</a>
-                      </div>
-                    </fieldset>
-                  </form>
-                </div>
+              <h1>Edit Route {{routeName}}</h1>
+              <div ng-if="loading">
+                Loading...
               </div>
+              <form name="form">
+                <fieldset ng-disabled="disableInputs" ng-if="!loading">
+                  <osc-routing
+                      model="routing"
+                      services="services"
+                      show-name-input="false"
+                      host-read-only="true">
+                  </osc-routing>
+                  <div class="button-group gutter-top gutter-bottom">
+                    <button type="submit"
+                        class="btn btn-primary btn-lg"
+                        ng-click="updateRoute()"
+                        ng-disabled="form.$invalid || disableInputs"
+                        value="">Save</button>
+                    <a class="btn btn-default btn-lg" ng-href="{{routeURL}}">Cancel</a>
+                  </div>
+                </fieldset>
+              </form>
             </div>
           </div>
         </div><!-- /middle-content -->

app/views/overview/_service-group.html

@@ -21,7 +21,7 @@ <h3 class="route-title truncate">
       </span>
       <a ng-if="displayRoute | isWebRoute" target="_blank"
          ng-href="{{displayRoute | routeWebURL}}">{{displayRoute | routeLabel}}</a>
-      <span ng-if="displayRoute && !(displayRoute | isWebRoute)">{{displayRoute | routeLabel}}</span>
+      <span ng-if="displayRoute && !(displayRoute | isWebRoute)" class="non-web-route">{{displayRoute | routeLabel}}</span>
       <span ng-if="routeWarningsByService[service.metadata.name] && routesByService[service.metadata.name].length === 1">
         <route-warnings warnings="routeWarningsByService[service.metadata.name]"></route-warnings>
       </span>