Skip to content

Ingress template optimization #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilhelmguo merged 3 commits into from
Mar 22, 2019
Merged

Ingress template optimization #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d317ce
frontend: readiness add initialDelaySeconds
wilhelmguo Mar 22, 2019
ff0883f
frontend: ingress template optimization
wilhelmguo Mar 22, 2019
1fba02e
Merge branch 'master' into feature/template_optimization
Mar 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions ...src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,15 @@ <h3 class="header-title" id="创建模版">{{'DAEMONSET.CREATE_TMP' | translate}
<label class="clr-col-md-3 form-group-label-override">{{'TEMPLATE.FAIL_NUM' | translate}}</label>
<input type="number" required name="container.readinessProbe.failureThreshold{{i}}"
[(ngModel)]="container.readinessProbe.failureThreshold">
<label class="clr-col-md-3 form-group-label-override">{{'TEMPLATE.CHECK_DELAY' | translate}}
<a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
<clr-icon shape="info-circle" size="24"></clr-icon>
<span class="tooltip-content">{{'TEMPLATE.CHECK_DELAY_MESSAGE' | translate}}</span>
</a>
</label>
<input type="number" required name="container.readinessProbe.initialDelaySeconds{{i}}"
[(ngModel)]="container.readinessProbe.initialDelaySeconds"
[placeholder]="'PLACEHOLDER.SECOND' | translate">
</div>

<div class="form-group form-group-padding">
Expand Down
1 change: 1 addition & 0 deletions ...d/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ export class CreateEditDaemonSetTplComponent extends ContainerTpl implements OnI
probe.httpGet = new HTTPGetAction();
probe.timeoutSeconds = 1;
probe.periodSeconds = 10;
probe.initialDelaySeconds = 30;
probe.failureThreshold = 10;
}
this.kubeResource.spec.template.spec.containers[i].readinessProbe = probe;
Expand Down
9 changes: 9 additions & 0 deletions .../app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,15 @@ <h3 class="header-title" id="创建模版">
<label class="clr-col-md-3 form-group-label-override">{{'TEMPLATE.FAIL_NUM' | translate}}</label>
<input type="number" required name="container.readinessProbe.failureThreshold{{i}}"
[(ngModel)]="container.readinessProbe.failureThreshold">
<label class="clr-col-md-3 form-group-label-override">{{'TEMPLATE.CHECK_DELAY' | translate}}
<a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
<clr-icon shape="info-circle" size="24"></clr-icon>
<span class="tooltip-content">{{'TEMPLATE.CHECK_DELAY_MESSAGE' | translate}}</span>
</a>
</label>
<input type="number" required name="container.readinessProbe.initialDelaySeconds{{i}}"
[(ngModel)]="container.readinessProbe.initialDelaySeconds"
[placeholder]="'PLACEHOLDER.SECOND' | translate">
</div>

<div class="form-group form-group-padding">
Expand Down
1 change: 1 addition & 0 deletions ...rc/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ export class CreateEditDeploymentTplComponent extends ContainerTpl implements On
probe.httpGet = new HTTPGetAction();
probe.timeoutSeconds = 1;
probe.periodSeconds = 10;
probe.initialDelaySeconds = 30;
probe.failureThreshold = 10;
}
this.kubeResource.spec.template.spec.containers[i].readinessProbe = probe;
Expand Down
60 changes: 46 additions & 14 deletions ...ntend/src/app/portal/ingress/create-edit-ingresstpl/create-edit-ingresstpl.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,15 @@ <h3 class="header-title">创建 Ingress 模版</h3>
</div>
</wayne-collapse>
<wayne-collapse>
<label class="label-level1">服务配置</label>
<label class="label-level1">服务配置
<button (click)="onAddRule($event)" style="margin-left: 10px;" class="wayne-button primary">
<clr-icon shape="add"></clr-icon>
添加域名规则</button></label>
<div *ngFor="let rule of kubeResource.spec.rules; let i = index">
<label class="label-level2" style="margin-top: 10px">域名规则
<button class="btn btn-sm btn-link" (click)="onDeleteRule(i)" href="javascript:void(0)">
<clr-icon shape="trash"></clr-icon>删除</button>
</label>
<div class="form-group form-group-padding" >
<label class="clr-col-md-4 form-group-label-override required">域名</label>
<label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
Expand All @@ -26,42 +33,67 @@ <h3 class="header-title">创建 Ingress 模版</h3>
[(ngModel)]="kubeResource.spec.rules[i].host">
</label>
</div>
<div *ngFor="let rule of kubeResource.spec.rules; let i = index">
<div>
<div *ngFor="let path of kubeResource.spec.rules[i].http.paths; let j = index">
<div class="form-group form-group-padding" >
<label class="clr-col-md-3 form-group-label-override required">负载均衡名称</label>
<wayne-select style="margin-top: 6px;" inputable name="svc_name" [(ngModel)]="kubeResource.spec.rules[i].http.paths[j].backend.serviceName"
<wayne-select style="margin-top: 6px;" inputable name="svc_name_{{i}}_{{j}}"
[(ngModel)]="kubeResource.spec.rules[i].http.paths[j].backend.serviceName"
searchable
[placeholder]="'PLACEHOLDER.CHOOSE' | translate">
<wayne-option *ngFor="let svc of svcs" [value]="svc.name">{{svc.name}}</wayne-option>
</wayne-select>

<label class="clr-col-md-2 form-group-label-override required">端口</label>
<input type="number" class="clr-col-md-1" [ngModelOptions]="{standalone: true}" [(ngModel)]="kubeResource.spec.rules[i].http.paths[j].backend.servicePort">
<input type="number" class="clr-col-md-1"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="kubeResource.spec.rules[i].http.paths[j].backend.servicePort">
<label class="clr-col-md-2 form-group-label-override required">路由</label>
<input type="text" class="clr-col-md-2" [ngModelOptions]="{standalone: true}" [(ngModel)]="kubeResource.spec.rules[i].http.paths[j].path">
<a href="javascript:void(0)" *ngIf="kubeResource.spec.rules[i].http.paths.length > 1"><clr-icon (click)="onDeletePath(i, j)" shape="trash" title="删除路由" class="is-solid clr-icon"></clr-icon></a>
<a href="javascript:void(0)" *ngIf="j === kubeResource.spec.rules[i].http.paths.length - 1"><clr-icon (click)="onAddPath(i)" shape="plus-circle" title="添加路由" class="is-solid clr-icon"></clr-icon></a>
<input type="text" class="clr-col-md-2"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="kubeResource.spec.rules[i].http.paths[j].path">
<a href="javascript:void(0)" *ngIf="kubeResource.spec.rules[i].http.paths.length > 1">
<clr-icon (click)="onDeletePath(i, j)" shape="trash" title="删除路由" class="is-solid clr-icon"></clr-icon></a>
<a href="javascript:void(0)" *ngIf="j === kubeResource.spec.rules[i].http.paths.length - 1">
<clr-icon (click)="onAddPath(i)" shape="plus-circle" title="添加路由" class="is-solid clr-icon"></clr-icon></a>
</div>
</div>
</div>
</div>
</wayne-collapse>
<wayne-collapse>
<label class="label-level1">TLS 配置</label>
<button class="btn btn-sm btn-link" (click)="onAddTLS()" href="javascript:void(0)" *ngIf="kubeResource.spec.tls.length === 0"><clr-icon shape="add"></clr-icon>添加</button>
<label class="label-level1">TLS 配置
<button (click)="onAddTLS($event)" style="margin-left: 10px;" class="wayne-button primary">
<clr-icon shape="add"></clr-icon>
添加 TLS</button>
</label>
<div *ngFor="let tls of kubeResource.spec.tls; let i = index">
<label class="label-level2" style="margin-top: 10px">TLS
<button class="btn btn-sm btn-link" (click)="onDeleteTLS(i)" href="javascript:void(0)">
<clr-icon shape="trash"></clr-icon>删除</button>
</label>
<div class="form-group form-group-padding" >
<label class="clr-col-md-2 form-group-label-override">主机</label>
<input class="clr-col-md-3" type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="kubeResource.spec.tls[i].hosts[0]">
<label class="clr-col-md-2 form-group-label-override">加密字典名称</label>
<wayne-select style="margin-top: 6px;" inputable name="secret_name" [(ngModel)]="kubeResource.spec.tls[i].secretName"
<wayne-select style="margin-top: 6px;" inputable
name="secret_name_{{i}}_{{j}}"
[(ngModel)]="kubeResource.spec.tls[i].secretName"
searchable
[placeholder]="'PLACEHOLDER.CHOOSE' | translate">
<wayne-option *ngFor="let secret of secrets" [value]="secret.name">{{secret.name}}</wayne-option>
</wayne-select>
<a href="javascript:void(0)" *ngIf="kubeResource.spec.tls.length > 0"><clr-icon (click)="onDeleteTLS(i)" shape="trash" title="删除 TLS" class="is-solid clr-icon"></clr-icon></a>
<a href="javascript:void(0)" *ngIf=" i === kubeResource.spec.tls.length - 1"><clr-icon (click)="onAddTLS()" shape="plus-circle" title="添加 TLS" class="is-solid clr-icon"></clr-icon></a>
</div>
<div *ngFor="let host of kubeResource.spec.tls[i].hosts; let j = index; trackBy:trackByFn"
class="form-group form-group-padding" >
<label class="clr-col-md-2 form-group-label-override">主机</label>
<input class="clr-col-md-3" type="text"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="kubeResource.spec.tls[i].hosts[j]">
<a href="javascript:void(0)">
<clr-icon (click)="onDeleteHost(i,j)" shape="trash" title="删除 Host" class="is-solid clr-icon">
</clr-icon></a>
<a href="javascript:void(0)">
<clr-icon (click)="onAddHost(i)" shape="plus-circle" title="添加 Host" class="is-solid clr-icon"></clr-icon>
</a>
</div>
</div>
</wayne-collapse>
Expand Down
38 changes: 36 additions & 2 deletions ...rontend/src/app/portal/ingress/create-edit-ingresstpl/create-edit-ingresstpl.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { ServiceService } from '../../../../../lib/shared/client/v1/service.serv
import { Service } from '../../../../../lib/shared/model/service';
import { SecretService } from '../../../shared/client/v1/secret.service';
import { Secret } from '../../../shared/model/v1/secret';
import { IngressBackend, IngressPath, IngressRule } from '../../../shared/model/v1/kubernetes/ingress';


@Component({
Expand Down Expand Up @@ -160,19 +161,52 @@ export class CreateEditIngressTplComponent extends CreateEditResourceTemplate im
}

onAddPath(idx: number) {
this.kubeResource.spec.rules[idx].http.paths.push({backend: {serviceName: '', servicePort: 80}, path: '/'});
this.kubeResource.spec.rules[idx].http.paths.push(this.defaultIngressPath());
}

defaultIngressPath() {
const ingressPath = new IngressPath();
ingressPath.path = '/';
ingressPath.backend = new IngressBackend();
ingressPath.backend.servicePort = 80;
return ingressPath;
}

onDeletePath(i: number, j: number) {
this.kubeResource.spec.rules[i].http.paths.splice(j, 1);
}

onAddTLS() {
onAddTLS(event: Event) {
event.stopPropagation();
this.kubeResource.spec.tls.push({hosts: [''], secretName: ''});
}

onDeleteTLS(i: number) {
this.kubeResource.spec.tls.splice(i, 1);
}

onDeleteHost(i: number, j: number) {
this.kubeResource.spec.tls[i].hosts.splice(j, 1);
}

onAddHost(i: number) {
this.kubeResource.spec.tls[i].hosts.push('');
}

onAddRule(event: Event) {
event.stopPropagation();
const cngressRule = IngressRule.emptyObject();
cngressRule.http.paths = [];
cngressRule.http.paths.push(this.defaultIngressPath());
this.kubeResource.spec.rules.push(cngressRule);
}

onDeleteRule(i: number) {
this.kubeResource.spec.rules.splice(i, 1);
}

trackByFn(index, item) {
return index;
}
}

10 changes: 10 additions & 0 deletions ...p/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,16 @@ <h3 class="header-title" id="创建模版">
<label class="clr-col-md-3 form-group-label-override">{{'TEMPLATE.FAIL_NUM' | translate}}</label>
<input type="number" required name="container.readinessProbe.failureThreshold{{i}}"
[(ngModel)]="container.readinessProbe.failureThreshold">
<label class="clr-col-md-3 form-group-label-override">{{'TEMPLATE.CHECK_DELAY' | translate}}
<a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
<clr-icon shape="info-circle" size="24"></clr-icon>
<span class="tooltip-content">{{'TEMPLATE.CHECK_DELAY_MESSAGE' | translate}}</span>
</a>
</label>
<input type="number" required name="container.readinessProbe.initialDelaySeconds{{i}}"
[(ngModel)]="container.readinessProbe.initialDelaySeconds"
[placeholder]="'PLACEHOLDER.SECOND' | translate">

</div>

<div class="form-group form-group-padding">
Expand Down
1 change: 1 addition & 0 deletions ...app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,7 @@ export class CreateEditStatefulsettplComponent extends ContainerTpl implements O
probe.httpGet = new HTTPGetAction();
probe.timeoutSeconds = 1;
probe.periodSeconds = 10;
probe.initialDelaySeconds = 30;
probe.failureThreshold = 10;
}
this.kubeResource.spec.template.spec.containers[i].readinessProbe = probe;
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/app/shared/model/v1/kubernetes/ingress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,13 @@ export class IntOrString {
}
export class IngressBackend {
serviceName: string;
servicePort: IntOrString;
servicePort: number;


static emptyObject(): IngressBackend {
const result = new IngressBackend();
result.serviceName = '';
result.servicePort = IntOrString.emptyObject();
result.servicePort = 0;
return result;
}
constructor(init?: IngressBackend) {
Expand Down