diff options
Diffstat (limited to 'usecaseui-portal')
5 files changed, 191 insertions, 141 deletions
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index 1c36d881..14d81aef 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -32,6 +32,9 @@ export class MyhttpService { // 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?", @@ -69,6 +72,9 @@ export class MyhttpService { 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=", @@ -207,6 +213,18 @@ export class MyhttpService { // 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){ diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css index 63426fd9..1f9d051a 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.css +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css @@ -96,6 +96,14 @@ hr { 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; @@ -104,34 +112,14 @@ hr { .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; diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index c18d294a..cfb81703 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -37,7 +37,7 @@ </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()"> @@ -93,11 +93,11 @@ [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> @@ -114,33 +114,48 @@ <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"> diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index 8f83cc9d..3d9962d2 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -99,6 +99,14 @@ hr { 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; @@ -107,6 +115,11 @@ hr { color: #147dc2; } } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } } tr.childtr { td { @@ -118,31 +131,6 @@ hr { } } -.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; diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 9ea28d4b..aecc6f2c 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -68,7 +68,7 @@ export class ServicesListComponent implements OnInit { // Create modal box 2 (dialog box) create ------------------------------- isVisible = false; - showModal(): void { + createModal(): void { this.isVisible = true; this.getAlltemplates(); } @@ -103,13 +103,12 @@ export class ServicesListComponent implements OnInit { } - // 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"){ @@ -135,34 +134,35 @@ export class ServicesListComponent implements OnInit { 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(); } @@ -198,68 +198,27 @@ export class ServicesListComponent implements OnInit { 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 @@ -461,8 +420,6 @@ export class ServicesListComponent implements OnInit { },1000) } }) - - }) } @@ -485,7 +442,91 @@ export class ServicesListComponent implements OnInit { }) 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 = { |