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 1 commit
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
Prev Previous commit
Next Next commit
frontend: ingress template optimization
  • Loading branch information
@wilhelmguo
wilhelmguo committed Mar 22, 2019
commit ff0883f2d71e8a67ea6351e60a291d4204f21f2e
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;
}
}

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