Skip to content

frontend: service tpl #23

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 1 commit into from
Mar 15, 2019
Merged

frontend: service tpl #23

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
frontend: service tpl
  • Loading branch information
@BennieMeng
BennieMeng committed Mar 14, 2019
commit 32e62148e9a1d587579b6e1ef368db994b37458f
234 changes: 118 additions & 116 deletions portal/service/create-edit-servicetpl/create-edit-servicetpl.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,136 +1,138 @@
<div class="clr-row" style="padding-left: 5%">
<div class="clr-row" style="padding-left: 20px;margin-bottom: 20px;">
<div class="clr-row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
<h3 class="header-title">创建负载均衡模版</h3>
</div>
<form #ngForm="ngForm" style="padding-right: 30px;width: 100%">
<section class="form-block wrap">
<label class="label-level1">发布信息</label>
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">发布说明</label>
<textarea name="description"
[(ngModel)]="serviceTpl.description"
required
rows="3"
style="width: 700px;">
</textarea>
</div>
</section>
<section class="form-block wrap">
<div style="float: left;width: 60%">
<label class="label-level1">服务配置</label>
<wayne-box style="display: block;padding: 15px;">
<section class="form-block wrap">
<label class="label-level1">发布信息</label>
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">类型</label>
<label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
<div class="select">
<select name="serviceType" required [(ngModel)]="kubeService.spec.type">
<option value="ClusterIP" selected>ClusterIP</option>
<option value="LoadBalancer">LoadBalancer</option>
<option value="NodePort">NodePort</option>
<option value="ExternalName">ExternalName</option>
</select>
</div>
</label>
<!-- <clr-checkbox
style="margin-left: 20px;padding-top: 5px"
name="headless"
[(ngModel)]="headless">
Headless
</clr-checkbox> -->
<clr-checkbox-wrapper style="margin-left: 20px;padding-top: 5px">
<input type="checkbox" clrCheckbox name="headless" value="Headless" [(ngModel)]="headless" />
<label>Headless</label>
</clr-checkbox-wrapper>
<label class="clr-col-md-3 form-group-label-override required">发布说明</label>
<textarea name="description"
[(ngModel)]="serviceTpl.description"
required
rows="3"
style="width: 700px;">
</textarea>
</div>
<div *ngIf="kubeService.spec.type != 'ExternalName'">
<label class="label-level2">端口
<button (click)="onAddPort()" class="btn btn-sm btn-link">
<clr-icon shape="add"></clr-icon>
添加端口
</button>
</label>
<div *ngFor="let port of kubeService.spec.ports; let i = index">
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">端口</label>

<input type="number" style="width: 180px"
name="port.targetPort-{{i}}"
[(ngModel)]="port.targetPort"
required
placeholder="目标端口">
<input type="number" style="width: 180px"
name="port.port-{{i}}"
[(ngModel)]="port.port"
required
placeholder="端口">
</section>
<section class="form-block wrap" style="overflow: hidden;">
<div style="float: left;width: 60%">
<label class="label-level1">服务配置</label>
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">类型</label>
<label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
<div class="select">
<select name="port.protocol-{{i}}"
[(ngModel)]="port.protocol">
<option value="TCP" selected>TCP</option>
<option value="UDP">UDP</option>
<select name="serviceType" required [(ngModel)]="kubeService.spec.type">
<option value="ClusterIP" selected>ClusterIP</option>
<option value="LoadBalancer">LoadBalancer</option>
<option value="NodePort">NodePort</option>
<option value="ExternalName">ExternalName</option>
</select>
</div>
<a href="javascript:void(0)">
<clr-icon (click)="onDeletePort(i)"
shape="trash" title="删除端口" class="is-solid clr-icon"></clr-icon>
</a>
<a href="javascript:void(0)">
<clr-icon (click)="onAddPort()"
shape="plus-circle" title="添加端口" class="is-solid clr-icon"></clr-icon>
</a>
</label>
<!-- <clr-checkbox
style="margin-left: 20px;padding-top: 5px"
name="headless"
[(ngModel)]="headless">
Headless
</clr-checkbox> -->
<clr-checkbox-wrapper style="margin-left: 20px;padding-top: 5px">
<input type="checkbox" clrCheckbox name="headless" value="Headless" [(ngModel)]="headless" />
<label>Headless</label>
</clr-checkbox-wrapper>
</div>
<div *ngIf="kubeService.spec.type != 'ExternalName'">
<label class="label-level2">端口
<button (click)="onAddPort()" class="btn btn-sm btn-link">
<clr-icon shape="add"></clr-icon>
添加端口
</button>
</label>
<div *ngFor="let port of kubeService.spec.ports; let i = index">
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">端口</label>

<input type="number" style="width: 180px"
name="port.targetPort-{{i}}"
[(ngModel)]="port.targetPort"
required
placeholder="目标端口">
<input type="number" style="width: 180px"
name="port.port-{{i}}"
[(ngModel)]="port.port"
required
placeholder="端口">
<div class="select">
<select name="port.protocol-{{i}}"
[(ngModel)]="port.protocol">
<option value="TCP" selected>TCP</option>
<option value="UDP">UDP</option>
</select>
</div>
<a href="javascript:void(0)">
<clr-icon (click)="onDeletePort(i)"
shape="trash" title="删除端口" class="is-solid clr-icon"></clr-icon>
</a>
<a href="javascript:void(0)">
<clr-icon (click)="onAddPort()"
shape="plus-circle" title="添加端口" class="is-solid clr-icon"></clr-icon>
</a>
</div>
</div>
</div>
</div>
<div *ngIf="kubeService.spec.type != 'ExternalName'">
<label class="label-level2">选择器
<button (click)="onAddSelector()" class="btn btn-sm btn-link">
<clr-icon shape="add"></clr-icon>
添加选择器
</button>
</label>
<div *ngFor="let selector of labelSelector; let i = index">
<div *ngIf="kubeService.spec.type != 'ExternalName'">
<label class="label-level2">选择器
<button (click)="onAddSelector()" class="btn btn-sm btn-link">
<clr-icon shape="add"></clr-icon>
添加选择器
</button>
</label>
<div *ngFor="let selector of labelSelector; let i = index">
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">选择器</label>
<input type="text" style="width: 217px"
name="selector.key-{{i}}"
[(ngModel)]="selector.key"
required
placeholder="selector名称">
<wayne-select inputable name="selector.value-{{i}}" [(ngModel)]="selector.value"
searchable
[placeholder]="'PLACEHOLDER.CHOOSE' | translate">
<wayne-option *ngFor="let deploy of deploys" [value]="deploy.name">{{deploy.name}}</wayne-option>
</wayne-select>
<a href="javascript:void(0)">
<clr-icon (click)="onDeleteSelector(i)"
shape="trash" title="删除选择器" class="is-solid clr-icon"></clr-icon>
</a>
<a href="javascript:void(0)">
<clr-icon (click)="onAddSelector()"
shape="plus-circle" title="添加选择器" class="is-solid clr-icon"></clr-icon>
</a>
</div>
</div>
</div>
<div *ngIf="kubeService.spec.type === 'ExternalName'">
<label class="label-level2">外部域名</label>
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">选择器</label>
<label class="clr-col-md-3 form-group-label-override required">域名</label>
<input type="text" style="width: 217px"
name="selector.key-{{i}}"
[(ngModel)]="selector.key"
required
placeholder="selector名称">
<wayne-select inputable name="selector.value-{{i}}" [(ngModel)]="selector.value"
searchable
[placeholder]="'PLACEHOLDER.CHOOSE' | translate">
<wayne-option *ngFor="let deploy of deploys" [value]="deploy.name">{{deploy.name}}</wayne-option>
</wayne-select>
<a href="javascript:void(0)">
<clr-icon (click)="onDeleteSelector(i)"
shape="trash" title="删除选择器" class="is-solid clr-icon"></clr-icon>
</a>
<a href="javascript:void(0)">
<clr-icon (click)="onAddSelector()"
shape="plus-circle" title="添加选择器" class="is-solid clr-icon"></clr-icon>
</a>
name="externalName"
[(ngModel)]="kubeService.spec.externalName"
required>
</div>
</div>
</div>
<div *ngIf="kubeService.spec.type === 'ExternalName'">
<label class="label-level2">外部域名</label>
<div class="form-group form-group-padding">
<label class="clr-col-md-3 form-group-label-override required">域名</label>
<input type="text" style="width: 217px"
name="externalName"
[(ngModel)]="kubeService.spec.externalName"
required>
</div>
<div style="float: left;width: 40%;margin-top: 5px">
<span><h4>服务类型说明</h4>
ClusterIP: 以集群为服务生成的集群内唯一的IP为基础，集群内部可以通过此IP来访问服务。<br>
NodePort: 设置类型为NodePort时，集群外部可以通过 NodePort方式来访问服务。<br>
LoadBalancer: 表示服务将通过外部负载均衡器暴露（如果云提供商支持它）<br>
ExternalName: 将集群或者项目外部服务映射到集群或项目内。<br>
Headless: 集群不为服务生成IP，集群内部通过服务的后端 Endpoint IP 直接访问服务。此类型适合后端异构的服务，比如需要区分主从的服务。</span>
</div>
</div>
<div style="float: left;width: 40%;margin-top: 5px">
<span><h4>服务类型说明</h4>
ClusterIP: 以集群为服务生成的集群内唯一的IP为基础，集群内部可以通过此IP来访问服务。<br>
NodePort: 设置类型为NodePort时，集群外部可以通过 NodePort方式来访问服务。<br>
LoadBalancer: 表示服务将通过外部负载均衡器暴露（如果云提供商支持它）<br>
ExternalName: 将集群或者项目外部服务映射到集群或项目内。<br>
Headless: 集群不为服务生成IP，集群内部通过服务的后端 Endpoint IP 直接访问服务。此类型适合后端异构的服务，比如需要区分主从的服务。</span>
</div>
</section>
</section>
</wayne-box>
</form>
</div>
<div class="clr-wizard-footer-buttons tpl-bottom">
Expand Down