diff options
Diffstat (limited to 'usecaseui-portal')
9 files changed, 201 insertions, 96 deletions
diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts index 9d2d1280..fffa5801 100644 --- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts +++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts @@ -78,11 +78,15 @@ export class SlicingTaskServices { }
// Get slicing business list
- getSlicingBusinessList (paramsObj) {
- const url = this.url.slicingBusinessList
- .replace("{pageNo}", paramsObj.pageNo)
+ getSlicingBusinessList (paramsObj,isSelect: boolean) {
+ let url = this.url.slicingBusinessList .replace("{pageNo}", paramsObj.pageNo)
.replace("{pageSize}", paramsObj.pageSize);
- return this.http.get<any>(url);
+ if(isSelect){
+ url = this.url.slicingBusinesQueryOfStatus.replace("{businessStatus}", paramsObj.businessStatus).replace("{pageNo}", paramsObj.pageNo)
+ .replace("{pageSize}", paramsObj.pageSize);
+ }
+ let params = new HttpParams({ fromObject: paramsObj });
+ return this.http.get<any>(url,{params});
}
changeActivateSlicingService(paramsObj, activate: boolean){
let url = this.url.activateSlicingService.replace("{serviceId}", paramsObj.serviceId);
@@ -91,6 +95,15 @@ export class SlicingTaskServices { }
return this.http.put<any>(url,paramsObj);
}
+ terminateSlicingService(paramsObj){
+ const url = this.url.terminateSlicingService.replace('{serviceId}', paramsObj.serviceId);
+ return this.http.delete<any>(url);
+ }
+ getSlicingBusinessProgress(paramsObj) {
+ let params = new HttpParams({ fromObject: paramsObj });
+ let url = this.url.queryOperationProgress.replace("{serviceId}", paramsObj.serviceId);
+ return this.http.get<any>(url,{params});
+ }
}
diff --git a/usecaseui-portal/src/app/mock/json/getSlicingBusinessProgress.json b/usecaseui-portal/src/app/mock/json/getSlicingBusinessProgress.json new file mode 100644 index 00000000..b14111fe --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/getSlicingBusinessProgress.json @@ -0,0 +1,10 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing service operation progress." + }, + "result_body": { + "operation_type": "activate", + "operation_progress": 99 + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/slicing_business_activate.json b/usecaseui-portal/src/app/mock/json/slicing_business_activate.json new file mode 100644 index 00000000..988577bf --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/slicing_business_activate.json @@ -0,0 +1,9 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing service has been activated." + }, + "result_body": { + "operation_id": "123456" + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/slicing_business_list.json b/usecaseui-portal/src/app/mock/json/slicing_business_list.json index 45fa0260..8291efbf 100644 --- a/usecaseui-portal/src/app/mock/json/slicing_business_list.json +++ b/usecaseui-portal/src/app/mock/json/slicing_business_list.json @@ -7,51 +7,6 @@ "record_number": 2, "slicing_business_list": [ { - "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9269", - "service_instance_name": "slicing-01-eMBB", - "service_type": "eMMB", - "service_snssai": "1-010101", - "orchestration_status": "activated", - "last_operation_type": "activate", - "last_operation_progress": 10 - }, - { - "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9261", - "service_instance_name": "slicing-01-eMBB", - "service_type": "eMMB", - "service_snssai": "1-010101", - "orchestration_status": "activated", - "last_operation_type": "activate", - "last_operation_progress": 20 - }, - { - "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9262", - "service_instance_name": "slicing-01-eMBB", - "service_type": "eMMB", - "service_snssai": "1-010101", - "orchestration_status": "activated", - "last_operation_type": "activate", - "last_operation_progress": 30 - }, - { - "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9263", - "service_instance_name": "slicing-01-eMBB", - "service_type": "eMMB", - "service_snssai": "1-010101", - "orchestration_status": "activated", - "last_operation_type": "activate", - "last_operation_progress": 50 - }, - { - "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9264", - "service_instance_name": "slicing-01-eMBB", - "service_type": "eMMB", - "service_snssai": "1-010101", - "orchestration_status": "activated", - "last_operation_type": "activate", - "last_operation_progress": 70 - }, - { "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9265", "service_instance_name": "slicing-01-eMBB", "service_type": "eMMB", @@ -79,15 +34,6 @@ "last_operation_progress": 100 }, { - "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9268", - "service_instance_name": "slicing-01-eMBB", - "service_type": "eMMB", - "service_snssai": "1-010101", - "orchestration_status": "activated", - "last_operation_type": "activate", - "last_operation_progress": 100 - }, - { "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9270", "service_instance_name": "slicing-01-eMBB", "service_type": "eMMB", diff --git a/usecaseui-portal/src/app/mock/json/slicing_business_list_activated.json b/usecaseui-portal/src/app/mock/json/slicing_business_list_activated.json new file mode 100644 index 00000000..bc3172af --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/slicing_business_list_activated.json @@ -0,0 +1,38 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing service instances query based on status result ." + }, + "result_body": { + "record_number": 2, + "slicing_business_list": [ + { + "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9260", + "service_instance_name": "slicing-01-eMBB", + "service_type": "eMMB", + "service_snssai": "1-010101", + "orchestration_status": "activated", + "last_operation_type": "activate", + "last_operation_progress": 10 + }, + { + "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9272", + "service_instance_name": "slicing-01-eMBB", + "service_type": "eMMB", + "service_snssai": "1-010101", + "orchestration_status": "activated", + "last_operation_type": "activate", + "last_operation_progress": 70 + }, + { + "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9273", + "service_instance_name": "slicing-01-eMBB", + "service_type": "eMMB", + "service_snssai": "1-010101", + "orchestration_status": "activated", + "last_operation_type": "activate", + "last_operation_progress": 100 + } + ] + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js index dbc9fec3..5bc81fbd 100644 --- a/usecaseui-portal/src/app/mock/routes.js +++ b/usecaseui-portal/src/app/mock/routes.js @@ -100,6 +100,11 @@ module.exports = "/uui-slicing/nsmf/resource/nssi/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context", ///////<-------------slicing_business--------->///// "/uui-slicing/nsmf/resource/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list", + "/uui-slicing/nsmf/resource/:businessStatus/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list_activated", + "/PUT/uui-slicing/nsmf/resource/:serviceId/activate": "/slicing_business_activate", + "/PUT/uui-slicing/nsmf/resource/:serviceId/deactivate": "/slicing_business_activate", + "/DELETE/uui-slicing/nsmf/resource/:serviceId": "/slicing_business_activate", + "/uui-slicing/nsmf/resource/:serviceId/progress":"/getSlicingBusinessProgress", ///////<-------------general interface--------->///// "/api/*": "/$1", "/*/*": "/$1_$2", diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html index fde155a5..07bdc07e 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html @@ -28,8 +28,8 @@ <th>Service_type</th> <th>S-NSSAI</th> <th>Orchestration_status</th> - <th>Aciton</th> - <th>Detail</th> + <th width="130px">Aciton</th> + <th width="100px">Detail</th> </tr> </thead> <tbody> @@ -42,14 +42,14 @@ <td> <span class="marginLeft10"> - {{ data.last_operation_progress!==100?data.last_operation_type+' '+data.last_operation_progress+'%':data.orchestration_status }} + {{ data.last_operation_progress !== 100?data.last_operation_type+' '+data.last_operation_progress+'%':data.orchestration_status }} </span> <nz-progress *ngIf="data.last_operation_progress !== 100" [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active"></nz-progress> </td> <td> - <nz-switch [ngModel]="switchStatusAll[i]==='activated'?true:false" + <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false" [nzDisabled]="data.last_operation_progress !== 100" (ngModelChange)="switchChange(data,i)" ></nz-switch> @@ -57,6 +57,7 @@ nz-icon nzType="poweroff" nzTheme="outline" + class="anticon anticon-poweroff" (click)="terminate(data)" ></i> </td> @@ -65,7 +66,7 @@ <!--class="anticon anticon-bars"--> <!--(click)="showdetail(data)">--> <!--</i>--> - <i (click)="showdetail(data)" [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">Detail</i> + <a (click)="showdetail(data)" [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">detail</a> </td> </tr> </ng-template> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less index b95d55e0..e13747ee 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less @@ -10,7 +10,8 @@ nz-select { i.anticon { cursor: pointer; font-size: 18px; - padding: 2px; + padding: 2px 15px; + vertical-align: inherit!important; &:hover{ color: #147dc2; } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts index 0397de9c..884a3be4 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts @@ -20,77 +20,159 @@ export class SlicingBusinessTableComponent implements OnInit { this.getBusinessList() } - selectedValue = null; - switchStatusAll: any[] = []; + selectedValue:string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; pageSize: number = 10; total: number = 100; loading = false; + isSelect: boolean = false; statusOptions: any[] = BUSINESS_STATUS; + progressingTimer :any; getBusinessList (): void{ this.loading = true; + this.isSelect = false; let paramsObj = { pageNo: this.pageIndex, pageSize: this.pageSize }; - this.myhttp.getSlicingBusinessList(paramsObj).subscribe (res => { + if(this.selectedValue !== BUSINESS_STATUS[0]){ + paramsObj["businessStatus"] = this.selectedValue; + this.isSelect = true; + } + this.myhttp.getSlicingBusinessList(paramsObj,this.isSelect).subscribe (res => { const { result_header: { result_code }, result_body: { slicing_business_list } } = res; if (+result_code === 200) { - this.listOfData = slicing_business_list; this.total = slicing_business_list.length; - this.switchStatusAll = slicing_business_list.map((item)=>{ - return item.orchestration_status - }); this.loading = false; + this.listOfData = slicing_business_list.map((item)=>{ + if(item.last_operation_progress < 100){ + let updata = (prodata) => { + item.last_operation_progress = prodata.operation_progress || item.last_operation_progress; + }; + let obj = { + serviceId: item.service_instance_id + }; + this.queryProgress(obj, updata).then((res) => { + item.last_operation_progress = 100; + item.orchestration_status = item.last_operation_type === 'activate'?'activated':item.last_operation_type === 'deactivated'?'deactivated':'terminated'; + }) + } + return item + }); } }) } + getListOfProcessingStatus(){ + this.pageIndex = 1; + this.pageSize = 10; + this.getBusinessList(); + } searchData(reset: boolean = false) { this.getBusinessList(); } - switchChange(data,i){ - console.log(data,i,"----- switchChange"); + switchChange(slicing,i){ this.modalService.confirm({ - nzTitle: '<i>Do you Want to'+(data.orchestration_status === 'activated'?'deactivated':'activated')+ 'slicing business?</i>', - nzContent: '<b>service_instance_id:'+data.service_instance_id+'</b>', + nzTitle: '<i>Do you Want to'+(slicing.orchestration_status === 'activated'?'deactivated':'activated')+ 'slicing business?</i>', + nzContent: '<b>service_instance_id:'+slicing.service_instance_id+'</b>', nzOnOk: () => { let paramsObj = { - serviceId:data.service_instance_id + serviceId:slicing.service_instance_id }; - if(data.orchestration_status === 'activated'){ - this.myhttp.changeActivateSlicingService(paramsObj,false).subscribe (res => { - const { result_header: { result_code }, result_body: { operation_id } } = res; - if (+result_code === 200) { - this.switchStatusAll[i] = 'deactivated'; - console.log(operation_id,"operation_id") - } - }) + if(slicing.orchestration_status === 'activated'){ + this.changeActivate(paramsObj,false,slicing,"deactivate","deactivated") }else { - this.myhttp.changeActivateSlicingService(paramsObj,true).subscribe (res => { - const { result_header: { result_code, result_message }} = res; - if (+result_code === 200) { - this.switchStatusAll[i] = 'activated'; - console.log(result_message,"result_message") - } - }) + this.changeActivate(paramsObj,true,slicing,"activate","activated"); } }, nzCancelText: 'No', nzOnCancel: () => { - this.switchStatusAll[i] = data.orchestration_status + let singleSlicing = Object.assign({},this.listOfData[i]); + this.listOfData[i] = singleSlicing; + this.listOfData = [...this.listOfData]; } }); } - terminate(data){ - + changeActivate(paramsObj,isActivate,slicing,activateValue,finished){ + this.myhttp.changeActivateSlicingService(paramsObj,isActivate).subscribe (res => { + const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + if (+result_code === 200) { + slicing.last_operation_progress = 0; + slicing.orchestration_status = activateValue; + console.log(operation_id,"operation_id"); + let obj = { + serviceId: slicing.service_instance_id + } + let updata = (prodata) => { + slicing.last_operation_progress = prodata.progress; + slicing.orchestration_status = prodata.operation_type; + this.queryProgress(obj, updata).then(() => { + slicing.last_operation_progress = 100; + slicing.orchestration_status = finished; + }) + } + }else { + console.error(result_message) + } + }) + } + terminate(slicing){ + this.modalService.confirm({ + nzTitle: 'Do you Want to Terminate slicing business?', + nzContent: '<b>service_instance_id: </b>'+slicing.service_instance_id, + nzOnOk: () => { + let paramsObj = { + serviceId:slicing.service_instance_id + }; + this.myhttp.terminateSlicingService(paramsObj).subscribe (res => { + const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + if (+result_code === 200) { + slicing.last_operation_progress = 0; + slicing.orchestration_status = 'deactivate'; + console.log(operation_id,"operation_id"); + let obj = { + serviceId: slicing.service_instance_id + }; + let updata = (prodata) => { + slicing.last_operation_progress = prodata.progress; + slicing.orchestration_status = prodata.operation_type; + this.queryProgress(obj, updata).then(() => { + slicing.last_operation_progress = 100; + slicing.orchestration_status = "terminated"; + }) + } + }else { + console.error(result_message) + } + }) + }, + nzCancelText: 'No', + nzOnCancel: () => { + console.info('Cancel termination') + } + }); } showdetail(data){ } - getListOfProcessingStatus(){ - + queryProgress(obj, callback) { + return new Promise( res => { + let requery = () => { + this.myhttp.getSlicingBusinessProgress(obj) + .subscribe((data) => { + if (data.result_body.operation_progress < 100) { + callback(data.result_body); + this.progressingTimer = setTimeout(()=>{ + requery(); + },5000); + } else { + res(data.result_body); + } + }) + }; + requery(); + }) } } |