// ns_createService2: this.baseUrl + "/createNsService2.json",
// inputNamesTransform: this.baseUrl + "/configuration_files/inputNamesTranslate.json?",
// deleteService: this.baseUrl + "/deleteService.json?",
+ // ns_deleteService: this.baseUrl + "/deleteNsService.json?",
+ // ns_stopService: this.baseUrl + "/stopNsService.json?",
+ // ns_healService: this.baseUrl + "/healNsService.json?",
// progress:this.baseUrl + "/progress.json?",
// nsProgress:this.baseUrl + "nsProgress.json?",
ns_createService2: this.baseUrl + "/uui-lcm/instantiateNetworkServiceInstance",
inputNamesTransform: "./assets/json/configuration_files/inputNamesTranslate.json?",
deleteService: this.baseUrl + "/uui-lcm/services/",
+ ns_deleteService: this.baseUrl + "/uui-lcm/deleteNetworkServiceInstance?ns_instance_id=",
+ ns_stopService: this.baseUrl + "/uui-lcm/terminateNetworkServiceInstance?ns_instance_id=",
+ ns_healService: this.baseUrl + "/uui-lcm/healNetworkServiceInstance?ns_instance_id=",
progress:this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
nsProgress:this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/"+ "*_*" + "?responseId=",
// return this.http.get<any>(this.url.deleteService); //Local simulation
return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
}
+ nsDeleteInstance(id){
+ // return this.http.get<any>(this.url.ns_deleteService); //Local simulation
+ return this.http.delete<any>(this.url.ns_deleteService + id);
+ }
+ stopNsService(id,requestBody){ //You need to terminate before deleting
+ // return this.http.get<any>(this.url.ns_stopService); //Local simulation
+ return this.http.post<any>(this.url.ns_stopService + id,requestBody);
+ }
+ healNsService(id,requestBody){
+ // return this.http.get<any>(this.url.ns_healService); //Local simulation
+ return this.http.post<any>(this.url.ns_healService + id,requestBody);
+ }
// Query progress interface
getProgress(obj){
font-size: 12px;
color: green;
}
+.list nz-table tbody td span.stopping {
+ font-size: 12px;
+ color: purple;
+}
+.list nz-table tbody td span.healing {
+ font-size: 12px;
+ color: orangered;
+}
.list nz-table tbody td i.anticon {
cursor: pointer;
font-size: 18px;
.list nz-table tbody td i.anticon:hover {
color: #147dc2;
}
-.list nz-table tbody tr.childtr td {
- font-size: 12px;
- color: #147dc2;
-}
-.list nz-table.table2 tr td {
- padding: 10px 8px;
-}
-.list nz-table.table2 tr td span.action {
- color: #3fa8eb;
- cursor: pointer;
- padding: 5px;
-}
-.list nz-table.table2 tr td span.cannotclick {
+.list nz-table tbody td .cannotclick {
pointer-events: none;
color: #aaa;
opacity: 0.6;
}
-.list nz-table.table2 tr td span.deleting {
- color: red;
- font-size: 12px;
- display: block;
- height: 12px;
-}
-.list nz-table.table2 tr td span.creating {
- color: #3fa8eb;
+.list nz-table tbody tr.childtr td {
font-size: 12px;
- display: block;
- height: 12px;
+ color: #147dc2;
}
.detailComponent {
position: absolute;
</ul>
</nz-dropdown>
- <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+ <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
<nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<span style="display:inline-block;width:70px;">Service: </span>
<nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()">
[nzScroll]="{ y: '58vh' }"
(nzPageIndexChange)="searchData()"
(nzPageSizeChange)="searchData(true)">
- <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <thead>
<tr>
<th nzWidth="5%">NO</th>
<th nzWidth="5%"></th>
- <th nzWidth="20%" nzShowSort nzSortKey="name">Service Instance Id</th>
+ <th nzWidth="20%">Service Instance Id</th>
<th nzWidth="20%">Name</th>
<th nzWidth="15%">Type</th>
<th nzWidth="20%">Status</th>
<td>{{data.serviceDomain}}</td>
<td>
<span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
- 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status || "Active"}}</span>
- <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress>
- <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> -->
+ 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
+ 'stopping':data.status=='Stopping','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
+ <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Stopping' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress>
</td>
<td>
<i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i>
<!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
- <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i>
<i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i>
<i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
- <i class="anticon anticon-delete" (click)="deleteService(data)"></i>
- <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
- (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
- <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
- (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> -->
+ <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" class="anticon anticon-delete" (click)="deleteModel(data)"></i>
</td>
</tr>
<tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
<td></td>
<td></td>
- <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
- <td>{{data["service-instance-name"] || data.nsName}}</td>
- <td colspan="3">{{item.serviceDomain}}</td>
+ <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
+ <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
+ <td>{{item.serviceDomain}}</td>
+ <td>
+ <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Active"}}</span>
+ <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
+ </td>
+ <td>
+ <i *ngIf="item.serviceDomain=='vnf'" [ngClass]="{'cannotclick':item.status=='Healing'}" class="anticon anticon-reload" (click)="restartService(item)"></i>
+ </td>
</tr>
</ng-template>
</tbody>
</nz-table>
+ <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk()">
+ <h3><i class="anticon anticon-question-circle" style="color:red;"></i>Are you sure delete this instance?</h3>
+ Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] }}</b>
+ <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+ <span style="display:inline-block;width:50%;">terminationType:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="terminationType" >
+ <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
+ <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
+ </nz-select>
+ <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>
+ <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input [(ngModel)]="gracefulTerminationTimeout">
+ </div>
+ </nz-modal>
</div>
<div class="detailComponent" *ngIf="detailshow">
font-size: 12px;
color: green;
}
+ span.stopping {
+ font-size: 12px;
+ color: purple;
+ }
+ span.healing {
+ font-size: 12px;
+ color: orangered;
+ }
i.anticon {
cursor: pointer;
font-size: 18px;
color: #147dc2;
}
}
+ .cannotclick {
+ pointer-events: none;
+ color: #aaa;
+ opacity: 0.6;
+ }
}
tr.childtr {
td {
}
}
-.list nz-table.table2 tr td {
- padding: 10px 8px;
-}
-.list nz-table.table2 tr td span.action {
- color: #3fa8eb;
- cursor: pointer;
- padding: 5px;
-}
-.list nz-table.table2 tr td span.cannotclick {
- pointer-events: none;
- color: #aaa;
- opacity: 0.6;
-}
-.list nz-table.table2 tr td span.deleting {
- color: red;
- font-size: 12px;
- display: block;
- height: 12px;
-}
-.list nz-table.table2 tr td span.creating {
- color: #3fa8eb;
- font-size: 12px;
- display: block;
- height: 12px;
-}
.detailComponent {
position: absolute;
// Create modal box 2 (dialog box) create -------------------------------
isVisible = false;
- showModal(): void {
+ createModal(): void {
this.isVisible = true;
this.getAlltemplates();
}
}
-
//
createshow = false;
createshow2 = false;
createData:Object={};
handleOk(): void {
- console.log('Button ok clicked!');
+ // console.log('Button ok clicked!');
this.isVisible = false;
if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){
pageSize = 10;
total = 100;
loading = false;
- sortName = null;
- sortValue = null;
+
getTableData(){
// params: customer serviceType pageIndex，pageSize，sortName
let paramsObj = {
customer:this.customerSelected.id,
serviceType:this.serviceTypeSelected.name,
pageIndex:this.pageIndex,
- pageSize:this.pageSize,
- serviceIdSort:this.sortValue
+ pageSize:this.pageSize
}
this.myhttp.getServicesTableData(paramsObj)
.subscribe((data)=>{
console.log(data);
this.total = data.body.total;
- this.tableData = data.body.tableList;
+ this.tableData = data.body.tableList.map((item)=>{
+ if(item["serviceDomain"]=="Network Service"){
+ item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{
+ vnf["serviceDomain"] = "vnf";
+ return vnf;
+ });
+ }
+ return item;
+ })
},(err)=>{
console.log(err);
})
}
- sort(sort: { key: string, value: string }): void {
- console.log(sort);
- this.sortName = sort.key;
- this.sortValue = sort.value;
- this.getTableData();
- }
+
searchData(reset:boolean = false){
- console.log(reset)
+ // console.log(reset)
this.getTableData();
}
this.detailData = service;
console.log(service);
}
- // deleteService(){
- // console.log("deleteService!");
- // }
-
- //
- deleteService(service){
- this.modalService.confirm({
- nzTitle : 'Are you sure delete this instance?',
- nzContent : `Instance ID: <b class="deleteModelContent"> ${service["service-instance-id"]}</b>`,
- nzOkText : 'Yes',
- nzOkType : 'danger',
- nzOnOk : () => {
- console.log(service);
- let allprogress = {}; //
- let querypros = []; //
- service.rate = 0;
- service.status = "Deleting";
-
- service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]})
-
- let deletePros = service["childServiceInstances"].map((item)=>{
- let params = {
- globalSubscriberId:this.customerSelected.id,
- serviceType:this.serviceTypeSelected,
- serviceInstanceId:item["service-instance-id"]
- }
- return new Promise((res,rej)=>{
- this.myhttp.deleteInstance(params)
- .subscribe((data)=>{
- let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId}
- let updata = (prodata)=>{
- allprogress[prodata.operationId] = prodata.progress;
- let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
- service["rate"]=average;
- }
- querypros.push(this.queryProgress(obj,updata));
- res();
- })
- })
- })
- console.log(deletePros)
- Promise.all(deletePros).then(()=>{
- Promise.all(querypros).then((data)=>{
- console.log(data);
- service.rate = 100;
- service.status = "completed";
- let hasUndone = this.tableData.some((item)=>{
- return item.rate < 100;
- })
- if(!hasUndone){
- setTimeout(()=>{
- this.getTableData();
- },1000)
- }
- })
- })
+ thisService = {};
+ deleteModelVisible = false;
+ terminationType = "graceful";
+ gracefulTerminationTimeout = 120;
+ // delete Model show
+ deleteModel(service){
+ this.thisService = service;
+ this.deleteModelVisible = true;
+ }
+ deleteOk(){
+ this.deleteModelVisible = false;
+ if(this.thisService["serviceDomain"] == "Network Service"){
+ this.deleteNsService(this.thisService);
+ }else{
+ this.deleteService(this.thisService);
+ }
+ }
- },
- nzCancelText: 'No',
- nzOnCancel : () => console.log('Cancel')
- });
+ deleteCancel(){
+ this.deleteModelVisible = false;
}
//ccvpn sotn createservice
},1000)
}
})
-
-
})
}
})
return mypromise;
}
-
+
+ deleteService(service){
+ let allprogress = {}; //
+ let querypros = []; //
+ service.rate = 0;
+ service.status = "Deleting";
+
+ service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]});
+ let deletePros = service["childServiceInstances"].map((item)=>{
+ let params = {
+ globalSubscriberId:this.customerSelected.id,
+ serviceType:this.serviceTypeSelected,
+ serviceInstanceId:item["service-instance-id"]
+ }
+ return new Promise((res,rej)=>{
+ this.myhttp.deleteInstance(params)
+ .subscribe((data)=>{
+ let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId}
+ let updata = (prodata)=>{
+ allprogress[prodata.operationId] = prodata.progress;
+ let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
+ service["rate"]=average;
+ }
+ querypros.push(this.queryProgress(obj,updata));
+ res();
+ })
+ })
+ })
+ // console.log(deletePros)
+ Promise.all(deletePros).then(()=>{
+ Promise.all(querypros).then((data)=>{
+ console.log(data);
+ service.rate = 100;
+ service.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
+ })
+ })
+ }
+ deleteNsService(service){
+ service.rate = 0;
+ service.status = "Deleting";
+ let id = service.nsInstanceId;
+ let requestBody = {
+ terminationType : this.terminationType,
+ gracefulTerminationTimeout : this.gracefulTerminationTimeout
+ }
+ this.stopNsService(id,requestBody).then((jobid)=>{
+ let updata = (prodata)=>{
+ service.rate = prodata.responseDescriptor.progress;
+ }
+ return this.queryNsProgress(jobid,updata);
+ }).then(()=>{
+ this.myhttp.nsDeleteInstance(id)
+ .subscribe((data)=>{
+ console.log(data);
+ service.rate = 100;
+ service.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
+ })
+ })
+ }
+
+ stopNsService(id,obj){
+ let mypromise = new Promise((res,rej)=>{
+ this.myhttp.stopNsService(id,obj)
+ .subscribe((data)=>{
+ res(data.jobId);
+ })
+ })
+ return mypromise;
+ }
queryProgress(obj,callback){
let mypromise = new Promise((res,rej)=>{
// let data = {
Code Review / usecase-ui.git / commitdiff