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

* support regex with k8s ingress

* remove text for rewrite to /

* added tooltip
pull/6782/head
Richard Wei 2022-04-20 16:45:20 +12:00 committed by GitHub
parent e20c34e12a
commit 9de0704775
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 166 additions and 75 deletions

View File

@ -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': '/' },
traefik: { 'traefik.ingress.kubernetes.io/rewrite-target': '/' },
});
export const KubernetesNginxRewriteTargetAnnotations = {
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';

View File

@ -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) {
_.extend(res.Annotations, KubernetesIngressClassRewriteTargetAnnotations[formValues.IngressClass.Type]);
}
res.Annotations[KubernetesIngressClassAnnotation] = formValues.IngressClass.Name;
res.Annotations[PortainerIngressClassTypes] = 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) {
fv.RewriteTarget = true;
} else if (key !== KubernetesIngressClassAnnotation) {
if (key !== PortainerIngressClassTypes) {
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) => {

View File

@ -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;
}

View File

@ -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">
<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">
<div class="col-sm-12 small text-muted" 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" 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>
@ -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 }}"
/>

View File

@ -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);
}

View File

@ -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">
<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">
<div class="col-sm-12 small text-muted" 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)">

View File

@ -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();