feat(ingress): support-regex-with-k8s-ingress EE-2644 (#6748)

* support regex with k8s ingress

* remove text for rewrite to /

* added tooltip

app/kubernetes/ingress/constants.js

@@ -2,12 +2,25 @@ export const KubernetesIngressClassAnnotation = 'kubernetes.io/ingress.class';
 
 // keys must match KubernetesIngressClassTypes values to map them quickly using the ingress type
 // KubernetesIngressClassRewriteTargetAnnotations[KubernetesIngressClassTypes.NGINX] for example
-export const KubernetesIngressClassRewriteTargetAnnotations = Object.freeze({
+
-  nginx: { 'nginx.ingress.kubernetes.io/rewrite-target': '/' },
+export const KubernetesNginxRewriteTargetAnnotations = {
-  traefik: { 'traefik.ingress.kubernetes.io/rewrite-target': '/' },
+  Key: 'nginx.ingress.kubernetes.io/rewrite-target',
-});
+  Value: '/$1',
+};
+
+export const KubernetesTraefikRewriteTargetAnnotations = {
+  Key: 'traefik.ingress.kubernetes.io/rewrite-target',
+  Value: '/$1',
+};
+
+export const KubernetesNginxUseregexAnnotations = {
+  Key: 'nginx.ingress.kubernetes.io/use-regex',
+  Value: 'true',
+};
 
 export const KubernetesIngressClassTypes = Object.freeze({
   NGINX: 'nginx',
   TRAEFIK: 'traefik',
 });
+
+export const PortainerIngressClassTypes = 'ingress.portainer.io/ingress-type';

app/kubernetes/ingress/converter.js

@@ -10,7 +10,7 @@ import {
 import { KubernetesApplicationPublishingTypes } from '../models/application/models';
 import { KubernetesIngress, KubernetesIngressRule } from './models';
 import { KubernetesIngressCreatePayload, KubernetesIngressRuleCreatePayload, KubernetesIngressRulePathCreatePayload } from './payloads';
-import { KubernetesIngressClassAnnotation, KubernetesIngressClassRewriteTargetAnnotations } from './constants';
+import { KubernetesIngressClassAnnotation, PortainerIngressClassTypes } from './constants';
 
 export class KubernetesIngressConverter {
   static apiToModel(data) {
@@ -151,10 +151,7 @@ export class KubernetesIngressConverter {
     res.Namespace = formValues.Namespace;
     const pairs = _.map(formValues.Annotations, (a) => [a.Key, a.Value]);
     res.Annotations = _.fromPairs(pairs);
-    if (formValues.RewriteTarget) {
+    res.Annotations[PortainerIngressClassTypes] = formValues.IngressClass.Name;
-      _.extend(res.Annotations, KubernetesIngressClassRewriteTargetAnnotations[formValues.IngressClass.Type]);
-    }
-    res.Annotations[KubernetesIngressClassAnnotation] = formValues.IngressClass.Name;
     res.IngressClassName = formValues.IngressClass.Name;
     res.Hosts = formValues.Hosts;
     res.Paths = formValues.Paths;
@@ -180,11 +177,8 @@ export class KubernetesIngressConverter {
           hfv.IsNew = false;
           return hfv;
         });
-        const [[rewriteKey]] = _.toPairs(KubernetesIngressClassRewriteTargetAnnotations[ic.Type]);
         const annotations = _.map(_.toPairs(ingress.Annotations), ([key, value]) => {
-          if (key === rewriteKey) {
+          if (key !== PortainerIngressClassTypes) {
-            fv.RewriteTarget = true;
-          } else if (key !== KubernetesIngressClassAnnotation) {
             const annotation = new KubernetesResourcePoolIngressClassAnnotationFormValue();
             annotation.Key = key;
             annotation.Value = value;
@@ -204,6 +198,7 @@ export class KubernetesIngressConverter {
     const res = new KubernetesIngressCreatePayload();
     res.metadata.name = data.Name;
     res.metadata.namespace = data.Namespace;
+    res.metadata.annotations = data.Annotations;
     res.spec.ingressClassName = data.IngressClassName;
     if (data.Paths && data.Paths.length) {
       _.forEach(data.Paths, (p) => {

app/kubernetes/models/resource-pool/formValues.js

@@ -1,3 +1,5 @@
+import { KubernetesNginxRewriteTargetAnnotations, KubernetesNginxUseregexAnnotations, KubernetesTraefikRewriteTargetAnnotations } from 'Kubernetes/ingress/constants';
+
 export function KubernetesResourcePoolFormValues(defaults) {
   this.Name = '';
   this.MemoryLimit = defaults.MemoryLimit;
@@ -41,3 +43,15 @@ export function KubernetesResourcePoolIngressClassHostFormValue() {
     IsNew: true,
   };
 }
+
+export function KubernetesResourcePoolNginxRewriteAnnotationFormValue() {
+  return KubernetesNginxRewriteTargetAnnotations;
+}
+
+export function KubernetesResourcePoolNginxUseregexAnnotationFormValue() {
+  return KubernetesNginxUseregexAnnotations;
+}
+
+export function KubernetesResourcePoolTraefikRewriteAnnotationFormValue() {
+  return KubernetesTraefikRewriteTargetAnnotations;
+}

app/kubernetes/views/resource-pools/create/createResourcePool.html

@@ -277,42 +277,16 @@
                     </div>
                   </div>
                 </div>
-                <div class="form-group" ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX">
-                  <div class="col-sm-12">
-                    <label class="control-label text-left">
-                      Redirect published routes to / in application
-                      <portainer-tooltip
-                        position="bottom"
-                        message="Enables the redirection of any route published via ingress to the root path of the application, e.g. /path remaps to /"
-                      >
-                      </portainer-tooltip>
-                    </label>
-                    <label class="switch" style="margin-left: 20px">
-                      <input type="checkbox" ng-model="ic.RewriteTarget" /><i data-cy="namespaceCreate-redirectRoutesToggle{{ ic.IngressClass.Name }}"></i>
-                    </label>
-                  </div>
-                </div>
               </div>
               <div ng-repeat-end class="form-group" ng-if="ic.Selected" style="margin-bottom: 20px">
-                <div class="col-sm-12">
+                <div class="col-sm-12 small text-muted" style="margin-top: 5px">
-                  <p>
-                    <a class="small interactive" ng-if="!ic.AdvancedConfig" ng-click="ic.AdvancedConfig = true" data-cy="namespaceCreate-advancedConfig{{ ic.IngressClass.Name }}">
-                      <i class="fa fa-plus space-right" aria-hidden="true"></i> Advanced configuration
-                    </a>
-                    <a class="small interactive" ng-if="ic.AdvancedConfig" ng-click="ic.AdvancedConfig = false" data-cy="namespaceCreate-hideConfig{{ ic.IngressClass.Name }}">
-                      <i class="fa fa-minus space-right" aria-hidden="true"></i> Hide configuration
-                    </a>
-                  </p>
-                </div>
-
-                <div class="col-sm-12 small text-muted" ng-if="ic.AdvancedConfig" style="margin-top: 5px">
                   <p>
                     <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
                     You can specify a list of annotations that will be associated to the ingress.
                   </p>
                 </div>
 
-                <div class="col-sm-12" ng-if="ic.AdvancedConfig">
+                <div class="col-sm-12">
                   <label class="control-label text-left">Annotations</label>
                   <span
                     class="label label-default interactive"
@@ -322,9 +296,42 @@
                   >
                     <i class="fa fa-plus-circle" aria-hidden="true"></i> add annotation
                   </span>
+                  <portainer-tooltip
+                    position="bottom"
+                    message="Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type."
+                  >
+                  </portainer-tooltip>
+                  <span
+                    class="label label-default interactive"
+                    style="margin-left: 10px"
+                    ng-click="$ctrl.addRewriteAnnotation(ic)"
+                    data-cy="namespaceCreate-addAnnotation{{ ic.IngressClass.Name }}"
+                  >
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add rewrite annotation
+                  </span>
+                  <portainer-tooltip
+                    ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
+                    position="bottom"
+                    message="When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to."
+                  >
+                  </portainer-tooltip>
+                  <span
+                    class="label label-default interactive"
+                    ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
+                    style="margin-left: 10px"
+                    ng-click="$ctrl.addUseregexAnnotation(ic)"
+                    data-cy="namespaceCreate-addAnnotation{{ ic.IngressClass.Name }}"
+                  >
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add regular expression annotation
+                  </span>
+                  <portainer-tooltip
+                    ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
+                    position="bottom"
+                    message="Enable use of regular expressions in ingress paths (set in the ingress details of an application). Use this along with rewrite-target to specify the regex capturing group to be replaced, e.g. path regex of ^/foo/(,*) and rewrite-target of /bar/$1 rewrites example.com/foo/account to example.com/bar/account."
+                  >
+                  </portainer-tooltip>
                 </div>
-
+                <div class="col-sm-12 form-inline" style="margin-top: 10px">
-                <div class="col-sm-12 form-inline" style="margin-top: 10px" ng-if="ic.AdvancedConfig">
                   <div ng-repeat="annotation in ic.Annotations track by $index" style="margin-top: 2px">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">Key</span>
@@ -332,7 +339,11 @@
                         type="text"
                         class="form-control"
                         ng-model="annotation.Key"
-                        placeholder="nginx.ingress.kubernetes.io/rewrite-target"
+                        placeholder="{{
+                          ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX
+                            ? 'e.g. nginx.ingress.kubernetes.io/enable-rewrite-log'
+                            : 'e.g. traefik.ingress.kubernetes.io/router.priority'
+                        }}"
                         required
                         data-cy="namespaceCreate-annotationKey{{ ic.IngressClass.Name }}"
                       />
@@ -343,7 +354,7 @@
                         type="text"
                         class="form-control"
                         ng-model="annotation.Value"
-                        placeholder="/$1"
+                        placeholder="{{ ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX ? 'e.g. true or false' : 'e.g. 42' }}"
                         required
                         data-cy="namespaceCreate-annotationValue{{ ic.IngressClass.Name }}"
                       />

app/kubernetes/views/resource-pools/create/createResourcePoolController.js

@@ -6,6 +6,9 @@ import {
   KubernetesResourcePoolFormValues,
   KubernetesResourcePoolIngressClassAnnotationFormValue,
   KubernetesResourcePoolIngressClassHostFormValue,
+  KubernetesResourcePoolNginxRewriteAnnotationFormValue,
+  KubernetesResourcePoolNginxUseregexAnnotationFormValue,
+  KubernetesResourcePoolTraefikRewriteAnnotationFormValue,
 } from 'Kubernetes/models/resource-pool/formValues';
 import { KubernetesIngressConverter } from 'Kubernetes/ingress/converter';
 import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHelper';
@@ -96,6 +99,20 @@ class KubernetesCreateResourcePoolController {
     ingressClass.Annotations.push(new KubernetesResourcePoolIngressClassAnnotationFormValue());
   }
 
+  addRewriteAnnotation(ingressClass) {
+    if (ingressClass.IngressClass.Type === this.IngressClassTypes.NGINX) {
+      ingressClass.Annotations.push(new KubernetesResourcePoolNginxRewriteAnnotationFormValue());
+    }
+
+    if (ingressClass.IngressClass.Type === this.IngressClassTypes.TRAEFIK) {
+      ingressClass.Annotations.push(new KubernetesResourcePoolTraefikRewriteAnnotationFormValue());
+    }
+  }
+
+  addUseregexAnnotation(ingressClass) {
+    ingressClass.Annotations.push(new KubernetesResourcePoolNginxUseregexAnnotationFormValue());
+  }
+
   removeAnnotation(ingressClass, index) {
     ingressClass.Annotations.splice(index, 1);
   }

app/kubernetes/views/resource-pools/edit/resourcePool.html

@@ -237,56 +237,80 @@
                         </div>
                       </div>
                     </div>
-
-                    <div class="form-group" ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX">
-                      <div class="col-sm-12">
-                        <label class="control-label text-left">
-                          Redirect published routes to / in application
-                          <portainer-tooltip
-                            position="bottom"
-                            message="Enables the redirection of any route published via ingress to the root path of the application, e.g. /path remaps to /"
-                          >
-                          </portainer-tooltip>
-                        </label>
-                        <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ic.RewriteTarget" /><i></i> </label>
-                      </div>
-                    </div>
                   </div>
                   <div ng-repeat-end class="form-group" ng-if="ic.Selected" style="margin-bottom: 20px">
-                    <div class="col-sm-12">
+                    <div class="col-sm-12 small text-muted" style="margin-top: 5px">
-                      <p>
-                        <a class="small interactive" ng-if="!ic.AdvancedConfig" ng-click="ic.AdvancedConfig = true">
-                          <i class="fa fa-plus space-right" aria-hidden="true"></i> Advanced configuration
-                        </a>
-                        <a class="small interactive" ng-if="ic.AdvancedConfig" ng-click="ic.AdvancedConfig = false">
-                          <i class="fa fa-minus space-right" aria-hidden="true"></i> Hide configuration
-                        </a>
-                      </p>
-                    </div>
-
-                    <div class="col-sm-12 small text-muted" ng-if="ic.AdvancedConfig" style="margin-top: 5px">
                       <p>
                         <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
                         You can specify a list of annotations that will be associated to the ingress.
                       </p>
                     </div>
 
-                    <div class="col-sm-12" ng-if="ic.AdvancedConfig">
+                    <div class="col-sm-12">
                       <label class="control-label text-left">Annotations</label>
                       <span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addAnnotation(ic)">
                         <i class="fa fa-plus-circle" aria-hidden="true"></i> add annotation
                       </span>
+                      <portainer-tooltip
+                        position="bottom"
+                        message="Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type."
+                      >
+                      </portainer-tooltip>
+                      <span
+                        class="label label-default interactive"
+                        ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
+                        style="margin-left: 10px"
+                        ng-click="ctrl.addRewriteAnnotation(ic)"
+                      >
+                        <i class="fa fa-plus-circle" aria-hidden="true"></i> add rewrite annotation
+                      </span>
+                      <portainer-tooltip
+                        ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
+                        position="bottom"
+                        message="When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to."
+                      >
+                      </portainer-tooltip>
+                      <span
+                        class="label label-default interactive"
+                        ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
+                        style="margin-left: 10px"
+                        ng-click="ctrl.addUseregexAnnotation(ic)"
+                      >
+                        <i class="fa fa-plus-circle" aria-hidden="true"></i> add regular expression annotation
+                      </span>
+                      <portainer-tooltip
+                        ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
+                        position="bottom"
+                        message="Enable use of regular expressions in ingress paths (set in the ingress details of an application). Use this along with rewrite-target to specify the regex capturing group to be replaced, e.g. path regex of ^/foo/(,*) and rewrite-target of /bar/$1 rewrites example.com/foo/account to example.com/bar/account."
+                      >
+                      </portainer-tooltip>
                     </div>
 
-                    <div class="col-sm-12 form-inline" style="margin-top: 10px" ng-if="ic.AdvancedConfig">
+                    <div class="col-sm-12 form-inline" style="margin-top: 10px">
                       <div ng-repeat="annotation in ic.Annotations track by $index" style="margin-top: 2px">
                         <div class="input-group col-sm-5 input-group-sm">
                           <span class="input-group-addon">Key</span>
-                          <input type="text" class="form-control" ng-model="annotation.Key" placeholder="nginx.ingress.kubernetes.io/rewrite-target" required />
+                          <input
+                            type="text"
+                            class="form-control"
+                            ng-model="annotation.Key"
+                            placeholder="{{
+                              ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX
+                                ? 'e.g. nginx.ingress.kubernetes.io/enable-rewrite-log'
+                                : 'e.g. traefik.ingress.kubernetes.io/router.priority'
+                            }}"
+                            required
+                          />
                         </div>
                         <div class="input-group col-sm-5 input-group-sm">
                           <span class="input-group-addon">Value</span>
-                          <input type="text" class="form-control" ng-model="annotation.Value" placeholder="/$1" required />
+                          <input
+                            type="text"
+                            class="form-control"
+                            ng-model="annotation.Value"
+                            placeholder="{{ ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX ? 'e.g. true or false' : 'e.g. 42' }}"
+                            required
+                          />
                         </div>
                         <div class="col-sm-1 input-group input-group-sm">
                           <button class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeAnnotation(ic, $index)">

app/kubernetes/views/resource-pools/edit/resourcePoolController.js

@@ -9,6 +9,9 @@ import {
   KubernetesResourcePoolFormValues,
   KubernetesResourcePoolIngressClassAnnotationFormValue,
   KubernetesResourcePoolIngressClassHostFormValue,
+  KubernetesResourcePoolNginxRewriteAnnotationFormValue,
+  KubernetesResourcePoolNginxUseregexAnnotationFormValue,
+  KubernetesResourcePoolTraefikRewriteAnnotationFormValue,
 } from 'Kubernetes/models/resource-pool/formValues';
 import { KubernetesIngressConverter } from 'Kubernetes/ingress/converter';
 import { KubernetesFormValidationReferences } from 'Kubernetes/models/application/formValues';
@@ -78,6 +81,20 @@ class KubernetesResourcePoolController {
     ingressClass.Annotations.push(new KubernetesResourcePoolIngressClassAnnotationFormValue());
   }
 
+  addRewriteAnnotation(ingressClass) {
+    if (ingressClass.IngressClass.Type === this.IngressClassTypes.NGINX) {
+      ingressClass.Annotations.push(new KubernetesResourcePoolNginxRewriteAnnotationFormValue());
+    }
+
+    if (ingressClass.IngressClass.Type === this.IngressClassTypes.TRAEFIK) {
+      ingressClass.Annotations.push(new KubernetesResourcePoolTraefikRewriteAnnotationFormValue());
+    }
+  }
+
+  addUseregexAnnotation(ingressClass) {
+    ingressClass.Annotations.push(new KubernetesResourcePoolNginxUseregexAnnotationFormValue());
+  }
+
   removeAnnotation(ingressClass, index) {
     ingressClass.Annotations.splice(index, 1);
     this.onChangeIngressHostname();