feat(gateway): Add Virtual-Host support

Closes gravitee-io/issues#1594

src/management/api/apis.controller.ts

@@ -228,6 +228,10 @@ export class ApisController {
         return '#d73a49';
     }
   }
+
+  getEntrypoints(api) {
+    return _.uniq(_.map(api.virtual_hosts, 'path')).join(' - ');
+  }
 }
 
 export default ApisController;

src/management/api/apis.html

@@ -37,7 +37,7 @@
               <tr md-row>
                 <th md-column width="1%" md-order-by="name" ng-click="$ctrl.loadMore(query.order, false)"><span>Name</span></th>
                 <th md-column width="1%"></th>
-                <th md-column md-order-by="context_path" ng-click="$ctrl.loadMore(query.order, false)">Context path</th>
+                <th md-column md-order-by="virtual_hosts" ng-click="$ctrl.loadMore(query.order, false)">Context paths</th>
                 <th md-column width="1%">Tags</th>
                 <th md-column width="1%" ng-if="$ctrl.isQualityDisplayed">Quality</th>
                 <th md-column width="1%">Owner</th>
@@ -79,7 +79,9 @@
                     {{$ctrl.getWorkflowStateLabel(api)}}
                   </span>
                 </td>
-                <td md-cell>{{api.context_path}}</td>
+                <td md-cell style="padding: 5px !important;">
+                  {{$ctrl.getEntrypoints(api)}}
+                </td>
                 <td md-cell nowrap>{{api.tags.join(', ')}}</td>
                 <td md-cell nowrap ng-if="$ctrl.isQualityDisplayed">
                   <span class="gravitee-qm-score-small" ng-class="$ctrl.getQualityMetricCssClass($ctrl.qualityScores[api.id])">

src/management/api/portal/general/dialog/apiExport.dialog.html

@@ -23,7 +23,8 @@ <h4>Export API definition as :</h4>
         <div layout="column" layout-align="space-between center">
           <md-select ng-model="data.exportVersion" placeholder="Export as">
             <md-option value="default" selected>Current version ({{ graviteeVersion }})</md-option>
-            <md-option value="1.20">1.20.x version</md-option>
+            <md-option value="1.25">1.25.x to 1.28.x version</md-option>
+            <md-option value="1.20">1.20.x to 1.24.x version</md-option>
             <md-option value="1.15">1.15.x to 1.16.x version</md-option>
           </md-select>
         </div>

src/management/api/proxy/apiProxy.controller.ts

@@ -36,6 +36,7 @@ class ApiProxyController {
   private apiPublic: boolean;
   private headers: string[];
   private discovery: any;
+  private virtualHostModeEnabled: boolean;
 
   constructor(
     private ApiService: ApiService,
@@ -76,6 +77,8 @@ class ApiProxyController {
 
     this.api.labels = this.api.labels || [];
 
+    this.virtualHostModeEnabled = this.api.proxy.virtual_hosts.length > 1 || this.api.proxy.virtual_hosts[0].host !== undefined;
+
     this.$scope.lbs = [
       {
         name: 'Round-Robin',
@@ -258,7 +261,6 @@ class ApiProxyController {
   }
 
   deleteGroup(groupname) {
-    var _that = this;
     let that = this;
     this.$mdDialog.show({
       controller: 'DialogConfirmController',
@@ -272,7 +274,7 @@ class ApiProxyController {
       }
     }).then(function (response) {
       if (response) {
-          _(_that.api.proxy.groups).forEach(function (group, index, object) {
+          _(that.api.proxy.groups).forEach(function (group, index, object) {
             if (group.name !== undefined && group.name === groupname) {
               object.splice(index, 1);
               that.update(that.api);
@@ -299,6 +301,53 @@ class ApiProxyController {
   isTagDisabled(tag: any): boolean {
     return !_.includes(this.userTags, tag.id);
   }
+
+  switchVirtualHostMode() {
+    if (this.virtualHostModeEnabled) {
+      let that = this;
+      this.$mdDialog.show({
+        controller: 'DialogConfirmController',
+        controllerAs: 'ctrl',
+        template: require('../../../components/dialog/confirmWarning.dialog.html'),
+        clickOutsideToClose: true,
+        locals: {
+          title: 'Switch to context-path mode',
+          msg: 'By moving back to context-path you will loose all virtual-hosts. Are you sure to continue?',
+          confirmButton: 'Switch'
+        }
+      }).then(function (response) {
+        if (response) {
+          // Keep only the first virtual_host and remove the host
+          that.api.proxy.virtual_hosts.splice(1);
+          that.api.proxy.virtual_hosts[0].host = undefined;
+
+          that.virtualHostModeEnabled = !that.virtualHostModeEnabled;
+
+          that.update(that.api);
+        }
+      });
+    } else if (this.formApi.$dirty) {
+      this.virtualHostModeEnabled = !this.virtualHostModeEnabled;
+      this.update(this.api);
+    } else {
+      this.virtualHostModeEnabled = !this.virtualHostModeEnabled;
+    }
+  }
+
+  addVirtualHost() {
+    if (this.api.proxy.virtual_hosts === undefined) {
+      this.api.proxy.virtual_hosts = [];
+    }
+
+    this.api.proxy.virtual_hosts.push({host: undefined, path: undefined});
+  }
+
+  removeVirtualHost(idx) {
+    if (this.api.proxy.virtual_hosts !== undefined) {
+      this.api.proxy.virtual_hosts.splice(idx, 1);
+      this.formApi.$setDirty();
+    }
+  }
 }
 
 export default ApiProxyController;

src/management/api/proxy/apis.proxy.route.html

@@ -28,7 +28,7 @@
                 <strong>General</strong>
             </div>
             <ul class="aui-nav">
-                <li class="iterable-item" ui-sref-active="aui-nav-selected" ui-sref='management.apis.detail.proxy.general'><a class="execute">Details</a></li>
+                <li class="iterable-item" ui-sref-active="aui-nav-selected" ui-sref='management.apis.detail.proxy.entrypoints'><a class="execute">Entrypoints</a></li>
                 <li class="iterable-item" ui-sref-active="aui-nav-selected" ui-sref='management.apis.detail.proxy.cors'><a class="execute">CORS</a></li>
                 <li class="iterable-item" ui-sref-active="aui-nav-selected" ui-sref='management.apis.detail.proxy.deployments'><a class="execute">Deployments</a></li>
               <li class="iterable-item"

src/management/api/proxy/apis.proxy.route.ts

@@ -25,9 +25,9 @@ function apisProxyRouterConfig($stateProvider) {
     .state('management.apis.detail.proxy', {
       template: require("./apis.proxy.route.html")
     })
-    .state('management.apis.detail.proxy.general', {
+    .state('management.apis.detail.proxy.entrypoints', {
       url: '/proxy',
-      template: require('./general/apiProxyGeneral.html'),
+      template: require('./general/apiProxyEntrypoints.html'),
       controller: 'ApiProxyController',
       controllerAs: 'apiProxyCtrl',
       resolve: {

src/management/api/proxy/general/apiProxyEntrypoints.html

@@ -0,0 +1,109 @@
+<!--
+
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<form name="apiProxyCtrl.formApi" ng-submit="apiProxyCtrl.update(apiProxyCtrl.api)" novalidate>
+<div class="gv-forms" layout="column">
+  <div class="gv-forms-header">
+    <h1>Entrypoints</h1>
+    <a permission permission-only="'api-definition-u'" ng-click="apiProxyCtrl.switchVirtualHostMode()" ng-if="!apiProxyCtrl.virtualHostModeEnabled">Switch to virtual-hosts mode</a>
+    <a permission permission-only="'api-definition-u'" ng-click="apiProxyCtrl.switchVirtualHostMode()" ng-if="apiProxyCtrl.virtualHostModeEnabled">Switch to context-path mode</a>
+  </div>
+
+  <div class="gv-form">
+    <h2>General</h2>
+    <div class="gv-form-content">
+
+    <div layout-gt-sm="row" ng-if="!apiProxyCtrl.virtualHostModeEnabled">
+      <md-input-container class="md-block" flex-gt-sm permission permission-only="'api-gateway_definition-u'">
+        <label>Gateway context-path</label>
+        <input ng-model="apiProxyCtrl.api.proxy.virtual_hosts[0].path" type="text" name="contextPath"
+               ng-pattern="/^\/[\/.a-zA-Z0-9-_]+$/" minlength="3"
+               required>
+        <div class="hint" ng-if="apiProxyCtrl.formApi.contextPath.$valid || apiProxyCtrl.formApi.contextPath.$pristine">
+          Path where API is exposed, must start with a '/' and must contain any letter, capitalize letter, number, dash or underscore.
+        </div>
+        <div ng-messages="apiProxyCtrl.formApi.contextPath.$error">
+          <div ng-message="required">Context path is required.</div>
+          <div ng-message="minlength">Context path has to be more than 3 characters long.</div>
+          <div ng-message="pattern">Context path is not valid (must start with a '/' and must contain any letter, capitalize letter, number, dash or underscore)</div>
+        </div>
+      </md-input-container>
+      <md-input-container class="md-block" flex-gt-sm permission permission-except="'api-gateway_definition-u'">
+        <label>Gateway context path</label>
+        <input ng-model="apiProxyCtrl.api.proxy.virtual_hosts[0].path" type="text"
+               ng-pattern="/^\/[\/.a-zA-Z0-9-_]+$/" disabled
+               required>
+      </md-input-container>
+    </div>
+
+    <div layout-gt-sm="row" ng-if="apiProxyCtrl.virtualHostModeEnabled">
+      <div layout="column" layout-sm="column" flex>
+        <h5 style="color: grey;">
+          <span>Virtual Hosts</span>
+          <ng-md-icon icon="add_circle_outline" style="fill: #b1bdc5;" aria-label="Add virtual-host" ng-click="apiProxyCtrl.addVirtualHost()">Add virtual-host</ng-md-icon>
+        </h5>
+        <div class="ipsum" style="color: grey; margin-bottom: 30px">Use sharding tags to control where the API must be deployed.</div>
+
+        <div layout="row" layout-sm="column" layout-align="center center" ng-repeat="vHost in apiProxyCtrl.api.proxy.virtual_hosts">
+          <ng-md-icon icon="remove_circle_outline" style="fill: #b1bdc5;" aria-label="Delete virtual-host" ng-click="apiProxyCtrl.removeVirtualHost($index)"></ng-md-icon>
+
+          <div flex="5" hide-xs hide-sm>
+            <!-- Spacer //-->
+          </div>
+
+          <md-input-container class="md-block" flex-gt-sm>
+            <input aria-label="Listening Host" name="vhost{{$index}}-host" ng-model="vHost.host" type="text" placeholder="Listening host">
+            <div class="hint" ng-if="vHost.host === undefined || vHost.host === '' || apiProxyCtrl.formApi['vhost'+$index+'-host'].$dirty">
+              Host which must be set into the HTTP request to access this entrypoint.
+            </div>
+          </md-input-container>
+
+          <div flex="5" hide-xs hide-sm>
+            <!-- Spacer //-->
+          </div>
+
+          <md-input-container class="md-block" flex-gt-sm>
+            <input aria-label="Listening Path" ng-model="vHost.path"
+                   name="vhost{{$index}}-path"
+                   type="text" placeholder="Listening path"
+                   ng-pattern="/^\/[\/.a-zA-Z0-9-_]*$/"
+                   required>
+            <div class="hint" ng-if="vHost.path === undefined || vHost.path === '' || apiProxyCtrl.formApi['vhost'+$index+'-path'].$dirty">
+              Path where API is exposed, must start with a '/' and must contain any letter, capitalize letter, number, dash or underscore.
+            </div>
+            <div ng-messages="apiProxyCtrl.formApi['vhost'+$index+'-path'].$error">
+              <div ng-message="required">Listening path is required.</div>
+              <div ng-message="pattern">Listening path is not valid (must start with a '/' and must contain any letter, capitalize letter, number, dash or underscore)</div>
+            </div>
+          </md-input-container>
+        </div>
+      </div>
+    </div>
+
+      <div class="md-actions gravitee-api-save-button" layout="row">
+        <md-button permission permission-only="'api-definition-u'" class="md-raised md-primary" type="submit" ng-disabled="apiProxyCtrl.formApi.$invalid || apiProxyCtrl.formApi.$pristine">
+          Save
+        </md-button>
+        <md-button permission permission-only="'api-definition-u'" class="md-raised" type="button" ng-click="apiProxyCtrl.reset()" ng-disabled="apiProxyCtrl.formApi.$pristine">
+          Reset
+        </md-button>
+      </div>
+    </div>
+  </div>
+
+</div>
+</form>

src/portal/api/header/api-header.component.ts

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import _ = require('lodash');
 import ApiService from "../../../services/api.service";
 import TicketService from "../../../services/ticket.service";
 
 const ApiHeaderComponent: ng.IComponentOptions = {
   bindings: {
     api: '<',
     apiRatingSummary: '<',
-    apiPortalHeaders: '<',
-    entrypoints: '<'
+    apiPortalHeaders: '<'
   },
   template: require('./api-header.html'),
   controller: function (
@@ -45,8 +45,6 @@ const ApiHeaderComponent: ng.IComponentOptions = {
     });
 
     this.$onInit = () => {
-      this.resolvedEntrypoints = ApiService.getTagEntrypoints(this.api, this.entrypoints);
-
       $timeout(function () {
 
         const apiNavbar = document.getElementById("api-navbar");
@@ -69,6 +67,10 @@ const ApiHeaderComponent: ng.IComponentOptions = {
         };
       }, 0);
     };
+
+    this.uniqueEntrypoints = () => {
+      return _.uniq(_.map(this.api.entrypoints, 'target'));
+    };
   }
 };
 

src/portal/api/header/api-header.html

@@ -45,8 +45,8 @@
       <li ng-repeat="header in $ctrl.apiPortalHeaders" ng-if="header.value">
         {{ header.name | translate }}:
         <span ng-if="header.name === 'api.endpoint'">
-          <span ng-if="$ctrl.resolvedEntrypoints.length === 1">{{::$ctrl.resolvedEntrypoints[0].value}}{{::header.value}}</span>
-          <div ng-if="$ctrl.resolvedEntrypoints.length > 1" ng-repeat="entrypoint in ::$ctrl.resolvedEntrypoints">- {{::entrypoint.value}}{{::header.value}}</div>
+          <span ng-if="$ctrl.api.entrypoints.length === 1">{{::$ctrl.api.entrypoints[0].target}}</span>
+          <div ng-if="$ctrl.api.entrypoints.length > 1" ng-repeat="entrypoint in $ctrl.uniqueEntrypoints()">- {{::entrypoint}}</div>
         </span>
         <span ng-if="header.name !== 'api.endpoint'">{{::header.value}}</span>
       </li>