diff options
Diffstat (limited to 'usecaseui-portal/src')
5 files changed, 194 insertions, 151 deletions
diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts index 3334bfc3..6ab1e282 100644 --- a/usecaseui-portal/src/app/onboard.service.ts +++ b/usecaseui-portal/src/app/onboard.service.ts @@ -73,7 +73,7 @@ export class onboardService { // Delete Vnf vfc package deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=", // Delete Pnf package - deletePnfPack: this.baseUrl + "deletePnfPackage?pnfPkgId=", + deletePnfPack: this.baseUrl + "deletePnfPackage?pnfdInfoId=", //进度接口 progress: this.baseUrl + "jobs/" + "_jobId" + "?responseId=" @@ -159,7 +159,7 @@ export class onboardService { //Local test // return this.http.get<any>(this.url.deletePnfPack); //online test - return this.http.delete<any>(this.url["deletePnfpack"] + paramsObj); + return this.http.delete<any>(this.url.deletePnfPack + paramsObj); } //---------------------------------Function-end------------------------------------------- diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css index f6a13fd0..e5044935 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -57,4 +57,8 @@ hr { .list nz-table tbody td i.anticon:hover { color: #147dc2; } - +.list nz-table tbody td .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html index f0648ac1..b6c92e7a 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -30,53 +30,54 @@ {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td *ngIf="item.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - - <td *ngIf="item.nsdName">{{item.nsdName}}</td> - <td *ngIf="item.nsdName === null">无</td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.name===null">无</td> - <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> - <td *ngIf="item.nsdVersion === null">无</td> - <td *ngIf="item.version">{{ item.version }}</td> - <td> - <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> - <span *ngIf="item.nsdOnboardingState === null">无</span> - <span *ngIf="item.uuid">{{status}}</span> - - <!-- <span *ngIf="item.uuid" [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', - 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> - <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> - </td> - <td>{{item.nsdOperationalState}}</td> - <td>{{item.nsdUsageState}}</td> - <td> - <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> - <button class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></button> - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex' + [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td *ngIf="item.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + + <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.nsdName === null">无</td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.name===null">无</td> + <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> + <td *ngIf="item.nsdVersion === null">无</td> + <td *ngIf="item.version">{{ item.version }}</td> + <td> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState === null">无</span> + <span *ngIf="item.uuid">{{status}}</span> + + <!-- <span *ngIf="item.uuid" [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', + 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> + <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> + </td> + <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdUsageState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> <!-- <div style="margin-top:8px;"> Loading state： <nz-switch [(ngModel)]="isSpinning"></nz-switch> @@ -98,8 +99,8 @@ {{ vnfuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle"> <thead (nzSortChange)="sort($event)" nzSingleSort> @@ -127,8 +128,9 @@ <td>{{item.usageState}}</td> <td>{{item.operationalState}}</td> <td> - <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> </td> </tr> </tbody> diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index 3d2d4a72..f5534619 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -76,6 +76,11 @@ hr { color: #147dc2; } } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } } } } 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 bf2b6572..c6d45988 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 @@ -6,6 +6,8 @@ import { slideToRight } from '../../animates'; import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; import { filter } from 'rxjs/operators'; import { Title } from '@angular/platform-browser'; +import * as $ from 'jquery'; + @Component({ selector: 'app-onboard-vnf-vm', @@ -30,11 +32,11 @@ export class OnboardVnfVmComponent implements OnInit { fileListPNF: UploadFile[] = []; // onboard initial value status = "Onboard Available"; - jobid = ''; + jobId = ''; //url url = { // line up - ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content', + ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content', vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content', pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content' // 本地 @@ -154,7 +156,7 @@ export class OnboardVnfVmComponent implements OnInit { beforeUploadPNF = (file: UploadFile): boolean => { this.fileListPNF.push(file); console.log('beforeUpload'); - console.log('fileListPNF--->' + this.fileListPNF); + console.log('fileListPNF--->' + JSON.stringify(this.fileListPNF)); this.myhttp.getCreatensData("createPnfData",this.requestBody) //on-line // this.myhttp.getCreatensData("creatensDataPNF") //local .subscribe((data) => { @@ -271,28 +273,28 @@ changeUploadingSta(tab) { console.log("NSlist-length-vfc-->",data.length); this.nsvfcData = data; //loading - this.nstableData = this.nsvfcData - }, (err) => { + this.nstableData = this.nsvfcData; + + //sdc list + this.myhttp.getSDC_NSTableData() + .subscribe((data) => { + console.log('NSlist-sdc-->',data); + console.log("NSlist-length-vfc-->",data.length); + this.nssdcData = data; + 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 + } + }, (err) => { console.log(err); - }) - // sdc - this.myhttp.getSDC_NSTableData() - .subscribe((data) => { - console.log('NSlist-sdc-->',data); - console.log("NSlist-length-vfc-->",data.length); - this.nssdcData = data; - 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 - } - this.isSpinning = false; + }) + }, (err) => { - console.log(err); - }) - + console.log(err); + }) } @@ -304,26 +306,26 @@ changeUploadingSta(tab) { console.log("vnfList--vnf>", data); console.log("vnfList--vnf>", data.length); this.vnfvfcData = data; - this.vnftableData = this.vnfvfcData - }, (err) => { - console.log(err); - }) + this.vnftableData = this.vnfvfcData; + + // sdc + this.myhttp.getSDC_VNFTableData() + .subscribe((data) => { + console.log('vnfList-sdc-->', data) + console.log('vnfList-sdc-->', data.length) + this.vnfsdcData = data; + 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); + }) - // sdc - this.myhttp.getSDC_VNFTableData() - .subscribe((data) => { - console.log('vnfList-sdc-->', data) - console.log('vnfList-sdc-->', data.length) - this.vnfsdcData = data; - 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) - } - this.isSpinning = false; }, (err) => { console.log(err); }) @@ -370,11 +372,21 @@ changeUploadingSta(tab) { //----------------------------------------------------------------------------------- /* onboard */ //成功弹框 - success(): void { + success(tab): void { const modal = this.modalService.success({ nzTitle: 'This is an success message', nzContent: 'Package Onboard Completed.' }); + switch(tab) { + case "NS": + console.log("NS成功弹框") + this.getTableData(); + break + case "VNF": + console.log("VNF成功弹框") + this.getTableVnfData(); + break + } window.setTimeout(() => modal.destroy(), 2000); } @@ -386,94 +398,114 @@ changeUploadingSta(tab) { }); } + //onboard status + onboardData ={ + status:"onboard", + progress: 0, + } + currentIndex = 0; + // ns onboard 上传按钮 - updataNsService(id) { - console.log(id); + updataNsService(id,index) { + this.currentIndex = index; + console.log("NS-onboard-id-->" + id); let requestBody = { "csarId": id } + this.myhttp.getNsonboard(requestBody) .subscribe((data) => { + this.onboardData.status = "onboarding"; + this.onboardData.progress = 0; + console.log('onboard ns sdc-->', data); - this.jobid = data.jobid; - this.queryProgress(this.jobid,0); + this.jobId = data.jobId; + console.log('onboard ns sdc jobId-->'+ data.jobId); + this.queryProgress("NS",this.jobId,0); }, (err) => { console.log(err); }) } // vnf onboard 上传按钮 - updataVnfService(id) { - // this.status = "Onboarding"; - console.log(id) + updataVnfService(id,index) { + this.currentIndex = index; + console.log("NS-onboard-id-->" + id) let requestBody = { "csarId": id } - this.myhttp.getVnfonboard(requestBody) - .subscribe((data) => { - console.log('onboard vnf sdc-->', data); - this.jobid = data.jobid; - this.queryProgress(this.jobid,0); - }, (err) => { - console.log(err); - }) + this.myhttp.getVnfonboard(requestBody) + .subscribe((data) => { + this.onboardData.status = "onboarding"; + this.onboardData.progress = 0; + + console.log('onboard vnf sdc-->', data); + this.jobId = data.jobId; + console.log('onboard vnf sdc jobId-->'+ data.jobId); + this.queryProgress("VNF",this.jobId,0); + }, (err) => { + console.log(err); + }) } - // pnf onboard + // pnf onboard //暂时没有上传功能 // updataPnfService(id) { // console.log('pnf',id); // } - queryProgress(jobid,responseId){ - let mypromise = new Promise((res,rej)=>{ - this.myhttp.getProgress(jobid,responseId) + + //Progress 进度查询 + queryProgress(tab,jobId,responseId){ + let mypromise = new Promise((res)=>{ + this.myhttp.getProgress(jobId,responseId) .subscribe((data)=>{ console.log("progressData-->"); console.log(data); - if(data.responseDescriptor == null || data.responseDescriptor.progress==undefined){ + + if(data.status == "failed" || data.responseDescriptor.progress > 100){ + console.log("progress-->",data.responseDescriptor.progress) + console.log("Package Onboard Failed") + this.onboardData.status = "Failed"; this.error(); - }; + return false + } + + 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(tab,this.jobId,0); + },10000) + return false + } + if(data.responseDescriptor.progress < 100){ - this.error(); + this.onboardData.status = "onboarding"; + console.log("progress < 100") + setTimeout(()=>{ + this.queryProgress(tab,this.jobId,0); + },5000) }else if(data.responseDescriptor.progress == 100){ res(data); + console.log("progress == 100"); console.log(data); - this.success(); - } + switch(tab) { + case "NS": + this.success("NS"); + this.onboardData.status = "onboarded"; + break + case "VNF": + this.success("VNF"); + this.onboardData.status = "onboarded"; + break + } + } + return false + }) }) return mypromise; } - - // queryProgress(jobid,callback){ - // let mypromise = new Promise((res,rej)=>{ - // let requery = (responseId)=>{ - - // this.myhttp.getProgress(jobid,responseId) - // .subscribe((data)=>{ - // if(data.responseDescriptor.progress==undefined){ - // console.log(data); - // setTimeout(()=>{ - // requery(data.responseDescriptor.responseId); - // },5000) - // return false; - // } - // if(data.responseDescriptor.progress < 100){ - // callback(data); - // setTimeout(()=>{ - // requery(data.responseDescriptor.responseId); - // },5000) - // }else { - // res(data); - // } - // }) - // } - // requery(0); - // }) - // return mypromise; - // } - - //-------------------------------------------------------------------------------- /* delete 删除按钮 */ // ns |