From 8455cd58da3765c0191c2b8fab4f3297cd3eecc9 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Tue, 20 Aug 2019 12:28:37 +0800 Subject: fix: fix bugs of table spinner and delete usless codes Change-Id: I0f67d70e427f66992c15522955ee174fd499d9b5 Issue-ID: USECASEUI-306 Signed-off-by: cyuamber --- .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 823 ++++++++------------- .../services-list/services-list.component.ts | 86 +-- 2 files changed, 363 insertions(+), 546 deletions(-) (limited to 'usecaseui-portal/src') diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index f65a9560..dd2e7dd7 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -14,7 +14,7 @@ limitations under the License. */ import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; -import {Component, OnInit, HostBinding, TemplateRef} from '@angular/core'; +import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; import { NzNotificationService } from 'ng-zorro-antd'; // import { MyhttpService } from '../../myhttp.service'; import { onboardService } from '../../onboard.service'; @@ -29,15 +29,15 @@ import * as $ from 'jquery'; selector: 'app-onboard-vnf-vm', templateUrl: './onboard-vnf-vm.component.html', styleUrls: ['./onboard-vnf-vm.component.less'], - animations: [ slideToRight ] + animations: [slideToRight] }) export class OnboardVnfVmComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; - + // delete Modal - confirmModal: NzModalRef; + confirmModal: NzModalRef; nsdInfoId = ''; - vnfPkgId =''; + vnfPkgId = ''; pnfdInfoId = ''; tabTitle = "NS"; nsuploading = false; @@ -53,7 +53,7 @@ export class OnboardVnfVmComponent implements OnInit { //url url = { // line up - ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', + ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content', pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content' // line local @@ -62,13 +62,13 @@ export class OnboardVnfVmComponent implements OnInit { //pnf: 'https://jsonplaceholder.typicode.com/posts/', }; constructor( - private myhttp: onboardService, - private http: HttpClient, - private msg: NzMessageService, - private titleService: Title, - private modal: NzModalService, - private modalService: NzModalService, - private notification: NzNotificationService + private myhttp: onboardService, + private http: HttpClient, + private msg: NzMessageService, + private titleService: Title, + private modal: NzModalService, + private modalService: NzModalService, + private notification: NzNotificationService ) { } //default Call ns data by default ngOnInit() { @@ -76,14 +76,14 @@ export class OnboardVnfVmComponent implements OnInit { } //Tabular data - nstableData:any; - vnftableData:any; - pnftableData:any; - nssdcData:any; - nsvfcData:any; - - vnfsdcData:any; - vnfvfcData:any; + nstableData: any; + vnftableData: any; + pnftableData: any; + nssdcData: any; + nsvfcData: any; + + vnfsdcData: any; + vnfvfcData: any; nspageIndex = 1; nspageSize = 10; vnfpageIndex = 1; @@ -97,279 +97,241 @@ export class OnboardVnfVmComponent implements OnInit { tabs = ['NS', 'VNF', 'PNF']; isSpinning = false; - //2019.08.14 add - notificationAttributes = { - "title":this.tabs[0], - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"OnboardingState", - "status":"InProgress", - "id":null - }; - notificationModelShow(template: TemplateRef<{}>): void { - console.log(this.notificationAttributes,"notificationModelShow show"); - this.notification.template(template); - } - notificationSuccess(notificationModel){ - this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png"; - this.notificationAttributes.status = "Success"; - this.notificationModelShow(notificationModel); - } - notificationFailed(notificationModel){ - this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png"; - this.notificationAttributes.status = "Failed"; - this.notificationModelShow(notificationModel); - } + //2019.08.14 add + notificationAttributes = { + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": null + }; + notificationModelShow(template: TemplateRef<{}>): void { + this.notification.template(template); + } + notificationSuccess(notificationModel) { + this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png"; + this.notificationAttributes.status = "Success"; + this.notificationModelShow(notificationModel); + } + notificationFailed(notificationModel) { + this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png"; + this.notificationAttributes.status = "Failed"; + this.notificationModelShow(notificationModel); + } // Handling tab switching request data handleTabChange(tab) { this.tabTitle = tab; - console.log(tab); - console.log('nsdInfoId--->'+ this.nsdInfoId); - console.log('vnfPkgId--->'+ this.vnfPkgId); - console.log('pnfdInfoId--->'+ this.pnfdInfoId); - console.log(this.url); switch (tab) { case 'NS': - this.nstableData = []; - this.getTableData(); - this.fileList = []; //Empty uploaded files when switching + this.nstableData = []; + this.getTableData(); + this.fileList = []; //Empty uploaded files when switching break case 'VNF': - this.vnftableData = []; - this.getTableVnfData() - this.fileList = []; + this.vnftableData = []; + this.getTableVnfData() + this.fileList = []; break case 'PNF': - this.pnftableData = []; - this.getTablePnfData() - this.fileList = []; + this.pnftableData = []; + this.getTablePnfData() + this.fileList = []; break } } //before put create--Drag and drop files to the page before uploading - requestBody = { - "userDefinedData": { - "additionalProp1": "", - "additionalProp2": "", - "additionalProp3": "" - } - } + requestBody = { + "userDefinedData": { + "additionalProp1": "", + "additionalProp2": "", + "additionalProp3": "" + } + } //NS/VNF List add file beforeUpload = (file: UploadFile): boolean => { this.fileList.push(file); - console.log('fileList' + this.fileList) return false; } - // ns beforeUpload + // ns beforeUpload beforeUploadNS = (file: UploadFile): boolean => { this.fileListNS.push(file); - console.log('beforeUpload'); - console.log(this.fileListNS.length); - console.log('fileListNS' + JSON.stringify(this.fileListNS)); - this.myhttp.getCreatensData("createNetworkServiceData",this.requestBody)//on-line + this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line // this.myhttp.getCreatensData("creatensDataNS") //local - .subscribe((data) => { - console.log("Data returned after dragging a file NS-->", data); - this.nsdInfoId = data["id"]; - console.log("Data returned after dragging a file id-->",this.nsdInfoId); - }, (err) => { - console.log(err); - }) + .subscribe((data) => { + this.nsdInfoId = data["id"]; + }, (err) => { + console.log(err); + }) return false; } //vnf beforeUpload beforeUploadVNF = (file: UploadFile): boolean => { this.fileListVNF.push(file); - console.log('beforeUpload'); - console.log('fileListVNF--->' + this.fileListVNF); - console.log('fileListVNF--->' + JSON.stringify(this.fileListVNF)); - this.myhttp.getCreatensData("createVnfData",this.requestBody)//on-line + this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line // this.myhttp.getCreatensData("creatensDataVNF") //local - .subscribe((data) => { - console.log("Data returned after dragging a file VNF-->", data); - this.vnfPkgId = data["id"]; - console.log("Data returned after dragging a file id-->",this.vnfPkgId); - }, (err) => { - console.log(err); - }) + .subscribe((data) => { + this.vnfPkgId = data["id"]; + }, (err) => { + console.log(err); + }) return false; } // //pnf eforeUpload beforeUploadPNF = (file: UploadFile): boolean => { this.fileListPNF.push(file); - console.log('beforeUpload'); - console.log('fileListPNF--->' + JSON.stringify(this.fileListPNF)); - this.myhttp.getCreatensData("createPnfData",this.requestBody) //on-line + this.myhttp.getCreatensData("createPnfData", this.requestBody) //on-line // this.myhttp.getCreatensData("creatensDataPNF") //local - .subscribe((data) => { - console.log("Data returned after dragging a file PNF-->", data); - this.pnfdInfoId = data["id"]; - console.log("Data returned after dragging a file id-->",this.pnfdInfoId); - }, (err) => { - console.log(err); - }) + .subscribe((data) => { + this.pnfdInfoId = data["id"]; + }, (err) => { + console.log(err); + }) return false; } //Get list list id - onClickId(id,tab){ + onClickId(id, tab) { switch (tab) { case 'NS': - this.nsdInfoId = id; - console.log(this.nsdInfoId); - break + this.nsdInfoId = id; + break case 'VNF': - this.vnfPkgId = id; - console.log(this.vnfPkgId); - break + this.vnfPkgId = id; + break case 'PNF': - this.pnfdInfoId = id; - console.log(this.pnfdInfoId); - break + this.pnfdInfoId = id; + break } } - + //Drag and drop and click the upload button - onClick (tab) { + onClick(tab) { switch (tab) { case 'NS': - console.log(this.nsdInfoId); - console.log(this.url.ns.replace("*_*",this.nsdInfoId)); - // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab); - this.handleUpload(this.url.ns.replace("*_*",this.nsdInfoId), tab); + // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab); + this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab); this.getTableData(); break case 'VNF': - console.log(this.vnfPkgId); - // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab); - this.handleUpload(this.url.vnf.replace("*_*",this.vnfPkgId), tab); + // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab); + this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab); this.getTableVnfData() break case 'PNF': - console.log(this.pnfdInfoId); - // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab); - this.handleUpload(this.url.pnf.replace("*_*",this.pnfdInfoId), tab); - this.getTablePnfData(); + // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab); + this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab); + this.getTablePnfData(); break } } - nsRightList = []; - nsNum=0; - vnfRightList = []; - vnfNum=0; - pnfRightList = []; - pnfNum=0; + nsRightList = []; + nsNum = 0; + vnfRightList = []; + vnfNum = 0; + pnfRightList = []; + pnfNum = 0; //put Upload Upload - handleUpload(url,tab): void { - console.log('startUpload') + handleUpload(url, tab): void { const formData = new FormData(); // tslint:disable-next-line:no-any - switch(tab) { - case "NS": + switch (tab) { + case "NS": this.fileListNS.forEach((file: any) => { formData.append('file', file); }); this.nsuploading = true; - let lastNs = this.fileListNS[this.fileListNS.length-1]; - let nsfile={ - name:lastNs.name, - uid:lastNs.uid, - progress:0, - status:true, - success:0 - }; - this.nsNum+=1; - this.nsRightList.push(nsfile); - let requeryNs = (nsfile) => { - setTimeout(() => { - nsfile.progress+=2; - if (nsfile.progress < 100) { - requeryNs(nsfile) - } else { - nsfile.progress = 100; - nsfile.status = false; - } - }, 100) - }; - requeryNs(nsfile); - break - case "VNF": + let lastNs = this.fileListNS[this.fileListNS.length - 1]; + let nsfile = { + name: lastNs.name, + uid: lastNs.uid, + progress: 0, + status: true, + success: 0 + }; + this.nsNum += 1; + this.nsRightList.push(nsfile); + let requeryNs = (nsfile) => { + setTimeout(() => { + nsfile.progress += 2; + if (nsfile.progress < 100) { + requeryNs(nsfile) + } else { + nsfile.progress = 100; + nsfile.status = false; + } + }, 100) + }; + requeryNs(nsfile); + break + case "VNF": this.fileListVNF.forEach((file: any) => { formData.append('file', file); }); this.vnfuploading = true; - let lastVnf = this.fileListVNF[this.fileListVNF.length-1]; - let vnffile={ - name:lastVnf.name, - uid:lastVnf.uid, - progress:0, - status:true, - success:0 - }; - this.vnfNum+=1; - this.vnfRightList.push(vnffile); - let requeryVnf = (vnffile) => { - setTimeout(() => { - vnffile.progress+=2; - if (vnffile.progress < 100) { - requeryVnf(vnffile) - } else { - vnffile.progress = 100; - vnffile.status = false; - } - }, 100) - }; - requeryVnf(vnffile); - break - case "PNF": + let lastVnf = this.fileListVNF[this.fileListVNF.length - 1]; + let vnffile = { + name: lastVnf.name, + uid: lastVnf.uid, + progress: 0, + status: true, + success: 0 + }; + this.vnfNum += 1; + this.vnfRightList.push(vnffile); + let requeryVnf = (vnffile) => { + setTimeout(() => { + vnffile.progress += 2; + if (vnffile.progress < 100) { + requeryVnf(vnffile) + } else { + vnffile.progress = 100; + vnffile.status = false; + } + }, 100) + }; + requeryVnf(vnffile); + break + case "PNF": this.fileListPNF.forEach((file: any) => { formData.append('file', file); }); this.pnfloading = true; - let lastPnf = this.fileListPNF[this.fileListPNF.length-1]; - let pnffile={ - name:lastPnf.name, - uid:lastPnf.uid, - progress:0, - status:true, - success:0 - }; - this.pnfNum+=1; - this.pnfRightList.push(pnffile); - let requeryPnf = (pnffile) => { - setTimeout(() => { - pnffile.progress+=2; - if (pnffile.progress < 100) { - requeryPnf(pnffile) - } else { - pnffile.progress = 100; - pnffile.status = false; - } - }, 100) - }; - requeryPnf(pnffile); - break + let lastPnf = this.fileListPNF[this.fileListPNF.length - 1]; + let pnffile = { + name: lastPnf.name, + uid: lastPnf.uid, + progress: 0, + status: true, + success: 0 + }; + this.pnfNum += 1; + this.pnfRightList.push(pnffile); + let requeryPnf = (pnffile) => { + setTimeout(() => { + pnffile.progress += 2; + if (pnffile.progress < 100) { + requeryPnf(pnffile) + } else { + pnffile.progress = 100; + pnffile.status = false; + } + }, 100) + }; + requeryPnf(pnffile); + break } - - // this.nsuploading = true; - // You can use any AJAX library you like - // const req = new HttpRequest('POST', url, formData, { - // reportProgress: true, - // withCredentials: true - // }); // line PUT const req = new HttpRequest('PUT', url, formData, { reportProgress: true, withCredentials: true }); - console.log('req--->'+ JSON.stringify(req)); - console.log('formData--->'+ JSON.stringify(formData)); //Upload pre-empty array this.fileList = []; this.fileListNS = []; @@ -379,111 +341,87 @@ export class OnboardVnfVmComponent implements OnInit { .pipe(filter(e => e instanceof HttpResponse)) .subscribe( (event: {}) => { - if(tab =="NS"){ - console.log(this.nsRightList[this.nsNum-1],"this.nsRightList") - this.nsRightList[this.nsNum-1].progress = 100; - this.nsRightList[this.nsNum-1].status = false; - this.nsRightList[this.nsNum-1].success=0; - } - if(tab =="VNF"){ - console.log(this.vnfRightList[this.vnfNum-1],"this.vnfRightList") - this.vnfRightList[this.vnfNum-1].progress = 100; - this.vnfRightList[this.vnfNum-1].status = false; - this.vnfRightList[this.vnfNum-1].success=0; - } - if(tab =="PNF"){ - console.log(this.pnfRightList[this.pnfNum-1],"this.pnfRightList") - this.pnfRightList[this.pnfNum-1].progress = 100; - this.pnfRightList[this.pnfNum-1].status = false; - this.pnfRightList[this.pnfNum-1].success=0; - } - this.changeUploadingSta(tab) - console.log('upload successfully') + if (tab == "NS") { + this.nsRightList[this.nsNum - 1].progress = 100; + this.nsRightList[this.nsNum - 1].status = false; + this.nsRightList[this.nsNum - 1].success = 0; + } + if (tab == "VNF") { + this.vnfRightList[this.vnfNum - 1].progress = 100; + this.vnfRightList[this.vnfNum - 1].status = false; + this.vnfRightList[this.vnfNum - 1].success = 0; + } + if (tab == "PNF") { + this.pnfRightList[this.pnfNum - 1].progress = 100; + this.pnfRightList[this.pnfNum - 1].status = false; + this.pnfRightList[this.pnfNum - 1].success = 0; + } + this.changeUploadingSta(tab); this.msg.success('upload successfully.'); }, err => { - if(tab =="NS"){ - console.log(this.nsRightList[this.nsNum-1]) - this.nsRightList[this.nsNum-1].progress = 100; - this.nsRightList[this.nsNum-1].status = false; - this.nsRightList[this.nsNum-1].success=1; - } - if(tab =="VNF"){ - console.log(this.vnfRightList[this.vnfNum-1],"this.vnfRightList") - this.vnfRightList[this.vnfNum-1].progress = 100; - this.vnfRightList[this.vnfNum-1].status = false; - this.vnfRightList[this.vnfNum-1].success=1; - } - if(tab =="PNF"){ - console.log(this.pnfRightList[this.pnfNum-1],"this.pnfRightList") - this.pnfRightList[this.pnfNum-1].progress = 100; - this.pnfRightList[this.pnfNum-1].status = false; - this.pnfRightList[this.pnfNum-1].success=1; - } - this.changeUploadingSta(tab) - console.log('upload failed') + if (tab == "NS") { + this.nsRightList[this.nsNum - 1].progress = 100; + this.nsRightList[this.nsNum - 1].status = false; + this.nsRightList[this.nsNum - 1].success = 1; + } + if (tab == "VNF") { + this.vnfRightList[this.vnfNum - 1].progress = 100; + this.vnfRightList[this.vnfNum - 1].status = false; + this.vnfRightList[this.vnfNum - 1].success = 1; + } + if (tab == "PNF") { + this.pnfRightList[this.pnfNum - 1].progress = 100; + this.pnfRightList[this.pnfNum - 1].status = false; + this.pnfRightList[this.pnfNum - 1].success = 1; + } + this.changeUploadingSta(tab); this.msg.error('upload failed.'); } ); } - -// Control the status of uploading -changeUploadingSta(tab) { - switch(tab) { - case "NS": - this.nsuploading = false; - break - case "VNF": - this.vnfuploading = false; - break - case "PNF": - this.pnfloading = false; + + // Control the status of uploading + changeUploadingSta(tab) { + switch (tab) { + case "NS": + this.nsuploading = false; + break + case "VNF": + this.vnfuploading = false; + break + case "PNF": + this.pnfloading = false; + } } -} -//---------------------------------------------------------------------------------------------- + //---------------------------------------------------------------------------------------------- // Get the NS list getTableData() { this.isSpinning = true; //ns vfc lists this.myhttp.getOnboardTableData() - .subscribe((data) => { - console.log("NSlist-vfc-->",data); - console.log("NSlist-length-vfc-->",data.length); - this.nsvfcData = data; - this.nstableData = this.nsvfcData; - - - //ns sdc list - this.myhttp.getSDC_NSTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - console.log('NSlist-sdc-->',data); - console.log("NSlist-length-vfc-->",data.length); - this.nssdcData = data; - - this.nsvfcData.map((nsvfc)=>{ nsvfc.sameid = this.nssdcData.find((nssdc)=>{ return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc;}); - console.log(this.nsvfcData); - let sameData = this.nssdcData.filter((nssdc)=>{ return !this.nsvfcData.find((nsvfc)=>{ return nsvfc.id == nssdc.uuid})}); - this.nstableData = this.nstableData.concat(sameData); - - - // if (this.nsvfcData.length != 0 && this.nssdcData.length != 0){ - // this.nstableData = this.MergeArray(this.nsvfcData, this.nssdcData) //Array deduplication - // }else if(this.nsvfcData.length === 0 && this.nssdcData.length != 0){ - // this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat - // }else if(this.nsvfcData.length != 0 && this.nssdcData.length === 0){ - // this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat - // } + .subscribe((data) => { + this.nsvfcData = data; + this.nstableData = this.nsvfcData; + //ns sdc list + this.myhttp.getSDC_NSTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + this.nssdcData = data; + this.nsvfcData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); + let sameData = this.nssdcData.filter((nssdc) => { return !this.nsvfcData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); + this.nstableData = this.nstableData.concat(sameData); + }, (err) => { + console.log(err); + this.isSpinning = false; + }) }, (err) => { - console.log(err); + console.log(err); + this.isSpinning = false; }) - }, (err) => { - console.log(err); - }) - } // Get the vnf list @@ -492,34 +430,19 @@ changeUploadingSta(tab) { //vnf vfc lists this.myhttp.getOnboardTableVnfData() .subscribe((data) => { - console.log("vnfList--vnf>", data); - console.log("vnfList--vnf>", data.length); this.vnfvfcData = data; this.vnftableData = this.vnfvfcData; //vnf sdc lists this.myhttp.getSDC_VNFTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - console.log('vnfList-sdc-->', data) - console.log('vnfList-sdc-->', data.length) - this.vnfsdcData = data; - - this.vnfvfcData.map((vnfvfc)=>{ vnfvfc.sameid = this.vnfsdcData.find((nssdc)=>{ return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc;}); - console.log(this.nsvfcData); - let sameData = this.vnfsdcData.filter((vnfsdc)=>{ return !this.vnfvfcData.find((vnfvfc)=>{ return vnfvfc.id == vnfsdc.uuid})}); - this.vnftableData = this.vnftableData.concat(sameData); - - // if (this.vnfvfcData.length != 0 && this.vnfsdcData.length != 0){ - // this.vnftableData = this.MergeArray(this.vnfvfcData, this.vnfsdcData) //Array deduplication - // }else if(this.vnfvfcData.length === 0 && this.vnfsdcData.length != 0){ - // this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat - // }else if(this.vnfvfcData.length != 0 && this.vnfsdcData.length === 0){ - // this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat - // console.log(this.vnftableData); - // } - }, (err) => { - console.log(err); - }) + .subscribe((data) => { + this.isSpinning = false; //loading hide + this.vnfsdcData = data; + this.vnfvfcData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; }); + let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnfvfcData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) }); + this.vnftableData = this.vnftableData.concat(sameData); + }, (err) => { + console.log(err); + }) }, (err) => { console.log(err); @@ -527,12 +450,10 @@ changeUploadingSta(tab) { } // Get pnf list - getTablePnfData() { - this.isSpinning = true; + getTablePnfData() { + this.isSpinning = true; this.myhttp.getOnboardTablePnfData() .subscribe((data) => { - console.log("pnfList-->", data); - console.log("pnfList-->", data.length); this.pnftableData = data; this.isSpinning = false; //loading hide }, (err) => { @@ -540,31 +461,7 @@ changeUploadingSta(tab) { }) } - //Merge and de-emphasize - // MergeArray(arr1, arr2) { - // var _arr = new Array(); - // for (var i = 0; i < arr1.length; i++) { - // if (arr1[i] != "") { - // _arr.push(arr1[i]); - // } - // } - // for (var i = 0; i < arr2.length; i++) { - // var flag = true; - // for (var j = 0; j < arr1.length; j++) { - // // According to the id of the vfc list arr1 and the uuid of the sdc list arr2 - // if (arr2[i].uuid == arr1[j].id) { - // flag = false; - // break; - // } - // } - // if (flag && arr2[i] != "") { - // _arr.push(arr2[i]); - // } - // } - // return _arr; - // } - -//----------------------------------------------------------------------------------- + //----------------------------------------------------------------------------------- /* onboard */ //Successful frame success(tab): void { @@ -572,17 +469,14 @@ changeUploadingSta(tab) { nzTitle: 'This is an success message', nzContent: 'Package Onboard Completed.' }); - switch(tab) { + switch (tab) { case "NS": - console.log("NS成功弹框") - this.getTableData(); + this.getTableData(); break - case "VNF": - console.log("VNF成功弹框") + case "VNF": this.getTableVnfData(); break } - // window.setTimeout(() => modal.destroy(), 5000); } //Failure frame @@ -594,38 +488,35 @@ changeUploadingSta(tab) { } //onboard status - onboardData ={ - status:"onboard", + onboardData = { + status: "onboard", progress: 0, } currentIndex = 0; // ns onboard Upload button - updataNsService(id,index,notificationModel) { + updataNsService(id, index, notificationModel) { this.currentIndex = index; this.onboardData.status = "onboarding"; //Disabled this.onboardData.progress = 0; - console.log("NS-onboard-id-->" + id); let requestBody = { - "csarId": id + "csarId": id }; this.notificationAttributes = { - "title":this.tabs[0], - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"OnboardingState", - "status":"InProgress", - "id":id + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": id }; this.notificationModelShow(notificationModel); this.myhttp.getNsonboard(requestBody) .subscribe((data) => { - console.log('onboard ns sdc-->', data); - if(data.status == "failed"){ - console.log("Package Onboard Failed") + if (data.status == "failed") { this.onboardData.status = "Failed"; this.notificationFailed(notificationModel); this.error(); return false - }else if(data.status == "success"){ + } else if (data.status == "success") { this.success("NS"); this.onboardData.status = "onboarded"; this.notificationSuccess(notificationModel); @@ -636,129 +527,111 @@ changeUploadingSta(tab) { } // vnf onboard Upload button - updataVnfService(id,index,notificationModel) { + updataVnfService(id, index, notificationModel) { this.currentIndex = index; this.onboardData.status = "onboarding"; //Disabled button this.onboardData.progress = 0; - console.log("VNF-onboard-id-->" + id) + let requestBody = { "csarId": id }; this.notificationAttributes = { - "title":this.tabs[1], - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"OnboardingState", - "status":"InProgress", - "id":id + "title": this.tabs[1], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": id }; this.notificationModelShow(notificationModel); this.myhttp.getVnfonboard(requestBody) .subscribe((data) => { - console.log('onboard vnf sdc-->', data); - this.jobId = data.jobId; - console.log('onboard vnf sdc jobId-->'+ data.jobId); - this.queryProgress(this.jobId,0,notificationModel); //vnf Need to query progress interface + this.jobId = data.jobId; + this.queryProgress(this.jobId, 0, notificationModel); //vnf Need to query progress interface }, (err) => { console.log(err); }) } - // pnf onboard //Temporarily no upload function - // updataPnfService(id) { - // console.log('pnf',id); - // } - //Progress Progress inquiry - queryProgress(jobId,responseId,notificationModel){ - let mypromise = new Promise((res)=>{ - this.myhttp.getProgress(jobId,responseId) - .subscribe((data)=>{ - console.log("progressData-->"); - console.log(data); - if(data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null){ - console.log("progress == undefined"); - this.onboardData.status = "onboarding"; - setTimeout(()=>{ - this.queryProgress(this.jobId,0,notificationModel); - },10000) - return false - } - if(data.responseDescriptor.progress > 100){ - console.log("progress-->",data.responseDescriptor.progress) - console.log("Package Onboard Failed") - this.onboardData.status = "Failed"; - this.notificationFailed(notificationModel); - this.error(); - return false - } - if(data.responseDescriptor.progress < 100){ - this.onboardData.status = "onboarding"; - console.log("progress < 100") - setTimeout(()=>{ - this.queryProgress(this.jobId,0,notificationModel); - },5000) - }else if(data.responseDescriptor.progress == 100){ - res(data); - console.log("progress == 100"); - console.log(data); - this.success("VNF"); - this.onboardData.status = "onboarded"; - this.notificationSuccess(notificationModel); - } + queryProgress(jobId, responseId, notificationModel) { + let mypromise = new Promise((res) => { + this.myhttp.getProgress(jobId, responseId) + .subscribe((data) => { + if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) { + this.onboardData.status = "onboarding"; + setTimeout(() => { + this.queryProgress(this.jobId, 0, notificationModel); + }, 10000) return false - }) + } + if (data.responseDescriptor.progress > 100) { + this.onboardData.status = "Failed"; + this.notificationFailed(notificationModel); + this.error(); + return false + } + if (data.responseDescriptor.progress < 100) { + this.onboardData.status = "onboarding"; + setTimeout(() => { + this.queryProgress(this.jobId, 0, notificationModel); + }, 5000) + } else if (data.responseDescriptor.progress == 100) { + res(data); + this.success("VNF"); + this.onboardData.status = "onboarded"; + this.notificationSuccess(notificationModel); + } + return false + }) }) return mypromise; } //-------------------------------------------------------------------------------- /* delete button */ - showConfirm(index,pkgid,tab,notificationModel): void { + showConfirm(index, pkgid, tab, notificationModel): void { this.notificationAttributes = { - "title":this.tabs[0], - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"OnboardingState", - "status":"InProgress", - "id":pkgid + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": pkgid }; this.confirmModal = this.modal.confirm({ nzTitle: 'Do you Want to delete these items?', nzContent: 'Do you Want to delete these items?', - nzOkText : 'Yes', + nzOkText: 'Yes', nzCancelText: 'No', nzOnOk: () => new Promise((resolve, reject) => { switch (tab) { case 'NS': - this.notificationAttributes.title = this.tabs[0]; - this.notificationModelShow(notificationModel); - this.deleteNsService(index,pkgid,notificationModel); - setTimeout(Math.random() > 0.5 ? resolve : reject,2000); - break - case 'VNF': - this.notificationAttributes.title = this.tabs[1]; - this.notificationModelShow(notificationModel); - this.deleteVnfService(index,pkgid,notificationModel); - setTimeout(Math.random() > 0.5 ? resolve : reject,2000); - break - case 'PNF': - this.notificationAttributes.title = this.tabs[2]; - this.notificationModelShow(notificationModel); - this.deletePnfService(index,pkgid,notificationModel); - setTimeout(Math.random() > 0.5 ? resolve : reject,2000); - break + this.notificationAttributes.title = this.tabs[0]; + this.notificationModelShow(notificationModel); + this.deleteNsService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + case 'VNF': + this.notificationAttributes.title = this.tabs[1]; + this.notificationModelShow(notificationModel); + this.deleteVnfService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + case 'PNF': + this.notificationAttributes.title = this.tabs[2]; + this.notificationModelShow(notificationModel); + this.deletePnfService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break } }).catch(() => console.log('Oops errors!')) }); } //delete nsItem - deleteNsService(index,pkgid,notificationModel) { - console.log(pkgid) - console.log("deleteService!"); + deleteNsService(index, pkgid, notificationModel) { this.myhttp.deleteNsIdData(pkgid) .subscribe((data) => { - console.log("nsdel--->", data); this.notificationSuccess(notificationModel); //refresh list after successful deletion this.getTableData(); @@ -766,15 +639,12 @@ changeUploadingSta(tab) { console.log(err); this.notificationFailed(notificationModel); }) - } + } //delete vnfItem - deleteVnfService(index,pkgid,notificationModel) { - console.log(pkgid) - console.log("deleteVnfService!"); + deleteVnfService(index, pkgid, notificationModel) { this.myhttp.deleteVnfIdData(pkgid) .subscribe((data) => { - console.log('vnfdel--->', data); this.notificationSuccess(notificationModel); //refresh list after successful deletion this.getTableVnfData() @@ -785,12 +655,9 @@ changeUploadingSta(tab) { } //delete PnfItem - deletePnfService(index,pkgid,notificationModel) { - console.log(pkgid) - console.log("deletePnfService!"); + deletePnfService(index, pkgid, notificationModel) { this.myhttp.deletePnfIdData(pkgid) .subscribe((data) => { - console.log('pnfdel--->', data); //refresh list after successful deletion this.notificationSuccess(notificationModel); this.getTablePnfData() @@ -800,38 +667,4 @@ changeUploadingSta(tab) { }) } -//------------------------------------------------------------------------------------ - //download - // downloadNsService(id) { - // console.log('download') - // console.log(id) - // this.myhttp.downloadNsData(id) - // .subscribe((data) => { - // console.log(44, data); - // }, (err) => { - // console.log(err); - // }) - // } - - // downloadVnfService() { - // console.log('downloadVnf') - // this.myhttp.downloadVnfData() - // .subscribe((data) => { - // console.log('downloadVnf pack', data); - // }, (err) => { - // console.log(err); - // }) - // } - - // downloadPnfService(id) { - // console.log('downloadPnf') - // console.log(id) - // this.myhttp.downloadNsData(id) - // .subscribe((data) => { - // console.log(44, data); - // }, (err) => { - // console.log(err); - // }) - // } - } 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 702d9525..3c22b7d8 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 @@ -13,11 +13,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {Component, OnInit, HostBinding, TemplateRef} from '@angular/core'; -import {MyhttpService} from '../../myhttp.service'; -import {slideToRight} from '../../animates'; -import {NzModalService} from 'ng-zorro-antd'; -import {NzNotificationService} from 'ng-zorro-antd'; +import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; +import { MyhttpService } from '../../myhttp.service'; +import { slideToRight } from '../../animates'; +import { NzModalService } from 'ng-zorro-antd'; +import { NzNotificationService } from 'ng-zorro-antd'; @Component({ selector: 'app-services-list', @@ -40,15 +40,15 @@ export class ServicesListComponent implements OnInit { orchestratorList = []; customerList = []; customerList2 = []; - customerSelected = {name: null, id: null}; - customerSelected2 = {name: null, id: null}; + customerSelected = { name: null, id: null }; + customerSelected2 = { name: null, id: null }; serviceTypeList = []; serviceTypeList2 = []; - serviceTypeSelected = {name: ''}; - serviceTypeSelected2 = {name: ''}; + serviceTypeSelected = { name: '' }; + serviceTypeSelected2 = { name: '' }; serviceTypeSelectedName = ""; templateTypeSelected = "CCVPN"; - orchestratorSelected = {name: null, id: null}; + orchestratorSelected = { name: null, id: null }; listSortMasters = JSON.parse(sessionStorage.getItem('listSortMasters')); language = sessionStorage.getItem("DefaultLang"); iconMore = false; @@ -94,19 +94,18 @@ export class ServicesListComponent implements OnInit { //Get all the customers getallCustomers() { - console.log(this.listSortMasters); console.log(this.language, "this.language"); this.myhttp.getAllCustomers() .subscribe((data) => { this.customerList = data.map((item) => { - return {name: item["subscriber-name"], id: item["global-customer-id"]} + return { name: item["subscriber-name"], id: item["global-customer-id"] } }); if (this.customerList.length == 0) { console.log("customerList.length == 0", this.customerList); return false; } this.customerList2 = data.map((item) => { - return {name: item["subscriber-name"], id: item["global-customer-id"]} + return { name: item["subscriber-name"], id: item["global-customer-id"] } }); if (this.customerList2.length == 0) { return false; @@ -120,7 +119,7 @@ export class ServicesListComponent implements OnInit { this.myhttp.getAllOrchestrators() .subscribe((data) => { this.orchestratorList = data.map((item) => { - return {name: item["name"], id: item["name"]} + return { name: item["name"], id: item["name"] } }); if (this.orchestratorList.length == 0) { console.log("orchestratorList.length == 0", this.orchestratorList); @@ -135,7 +134,7 @@ export class ServicesListComponent implements OnInit { this.myhttp.getServiceTypes(this.customerSelected) .subscribe((data) => { this.serviceTypeList = data.map((item) => { - return {name: item["service-type"]} + return { name: item["service-type"] } }); if (this.serviceTypeList.length == 0) { @@ -166,7 +165,7 @@ export class ServicesListComponent implements OnInit { this.myhttp.getServiceTypes(customerSelected2) .subscribe((data) => { this.serviceTypeList2 = data.map((item) => { - return {name: item["service-type"]} + return { name: item["service-type"] } }); if (this.serviceTypeList2.length == 0) { console.log("serviceTypeList.length == 0", this.serviceTypeList2); @@ -189,21 +188,15 @@ export class ServicesListComponent implements OnInit { this.getServiceType(this.customerSelected2); } - // - choseTemplateType() { this.getallOrchestrators(); this.getAlltemplates(); } - // templates = []; - template1 = {name: null}; - // template2 = {name: null}; - // template3 = {name: null}; - // template4 = {name: null}; + template1 = { name: null }; - getAlltemplates() { // + getAlltemplates() { this.myhttp.getAllServiceTemplates(this.templateTypeSelected) .subscribe((data) => { this.templates = data; @@ -212,19 +205,15 @@ export class ServicesListComponent implements OnInit { return typeof d.packageInfo.csarName == "string"; }).map((item) => { let cName = item.packageInfo.csarName.split("/").reverse()[0]; - return {name: cName, id: item.csarId, packageInfo: item.packageInfo} + return { name: cName, id: item.csarId, packageInfo: item.packageInfo } }); } - console.log(this.templates); this.template1 = this.templates[0]; - }, (err) => { - + console.log(err); }) } - - // createshow = false; createshow2 = false; listDisplay = false; @@ -259,7 +248,6 @@ export class ServicesListComponent implements OnInit { this.loadingAnimateShow = false; } - temParametersTips = false; ccvpn_temParametersContent: any; e2e_ns_temParametersContent: any; @@ -301,10 +289,10 @@ export class ServicesListComponent implements OnInit { pageIndex = 1; pageSize = 10; total = 100; - loading = true; - + loading = false; getTableData() { + this.loading = true; // Query parameter: customer serviceType Current page number, number of pages per page let paramsObj = { customerId: this.customerSelected.id, @@ -314,8 +302,6 @@ export class ServicesListComponent implements OnInit { } this.myhttp.getServicesTableData(paramsObj) .subscribe((data) => { - this.loading = false; - console.log(data); this.total = data.body.total; this.tableData = data.body.tableList.map((item) => { if (typeof item == "string") { @@ -440,7 +426,6 @@ export class ServicesListComponent implements OnInit { } return item; }) - console.log(this.tableData) this.tableData.map((item, index) => { if (item.serviceDomain == 'E2E Service') { if (item.operationResult == 2001) { @@ -470,9 +455,10 @@ export class ServicesListComponent implements OnInit { } } }) - console.log(this.serviceMunber) + this.loading = false; }, (err) => { console.log(err); + this.loading = false; }) } @@ -530,7 +516,6 @@ export class ServicesListComponent implements OnInit { scaleNotification(template: TemplateRef<{}>): void { this.notification.template(template); - // this.notification.template(template,{ nzDuration: 0 }); } scaleSuccessNotification(template: TemplateRef<{}>): void { @@ -563,7 +548,7 @@ export class ServicesListComponent implements OnInit { } addActionsHealing() { - this.healActions.push({value: ""}) + this.healActions.push({ value: "" }) } minusActionsHealing(index) { @@ -571,7 +556,7 @@ export class ServicesListComponent implements OnInit { } addNsAdditional() { - this.nsAdditional.push({key: "", value: ""}) + this.nsAdditional.push({ key: "", value: "" }) } minusNsAdditional(index) { @@ -606,8 +591,7 @@ export class ServicesListComponent implements OnInit { this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"]; this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"]; - let requestBody = this.thisService["serviceDomain"] == "Network Service" ? {healNsData: this.nsParams} : {healVnfData: this.vnfParams}; - console.log(requestBody); + let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams }; this.healNsVnfService(this.thisService, requestBody, templatehealSuccessFaild); this.healNotification(templatehealstarting); } @@ -746,7 +730,7 @@ export class ServicesListComponent implements OnInit { })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; } }; - let queryParams = {serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001"}; + let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; return this.queryProgress(queryParams, updata); }).then((data) => { console.log(data); @@ -814,7 +798,7 @@ export class ServicesListComponent implements OnInit { })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; } } - let queryParams = {serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001"}; + let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; return this.queryProgress(queryParams, updata); }).then((data) => { console.log(data); @@ -1129,7 +1113,7 @@ export class ServicesListComponent implements OnInit { service.status = "In Progress"; service.tips = ""; service.statusClass = "1002"; - service["childServiceInstances"].push({"service-instance-id": service["service-instance-id"]}); + service["childServiceInstances"].push({ "service-instance-id": service["service-instance-id"] }); let deletePros = service["childServiceInstances"].map((item) => { let params = { globalSubscriberId: this.customerSelected.id, @@ -1307,14 +1291,14 @@ export class ServicesListComponent implements OnInit { this.myhttp.getProgress(obj) .subscribe((data) => { if (data.status == "FAILED") { - callback({progress: 255, status: "Failed"}); + callback({ progress: 255, status: "Failed" }); return false; } if (data.operationStatus == null || data.operationStatus.progress == undefined) { // console.log(data); errorNums--; if (errorNums == 0) { - callback({progress: 255, status: "time over"}); + callback({ progress: 255, status: "time over" }); return false; } setTimeout(() => { @@ -1323,7 +1307,7 @@ export class ServicesListComponent implements OnInit { return false; } if (data.operationStatus.progress > 100) { - callback({progress: 255, status: "time over"}); + callback({ progress: 255, status: "time over" }); return false; } if (data.operationStatus.progress < 100) { @@ -1378,14 +1362,14 @@ export class ServicesListComponent implements OnInit { this.myhttp.getNsProgress(jobid, id, operationType) .subscribe((data) => { if (data.status == "FAILED") { - callback({progress: 255, status: "Failed"}); + callback({ progress: 255, status: "Failed" }); return false; } if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) { // console.log(data); errorNums--; if (errorNums == 0) { - callback({progress: 255, status: "time over"}); + callback({ progress: 255, status: "time over" }); return false; } setTimeout(() => { @@ -1394,7 +1378,7 @@ export class ServicesListComponent implements OnInit { return false; } if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") { - callback({progress: 255, status: data.responseDescriptor.statusDescription}); + callback({ progress: 255, status: data.responseDescriptor.statusDescription }); return false; } if (data.responseDescriptor.progress < 100) { -- cgit 1.2.3-korg