diff options
9 files changed, 198 insertions, 155 deletions
diff --git a/docs/index.rst b/docs/index.rst index c976acc1..dc28cfbd 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -3,7 +3,7 @@ Usecase-UI --------------------------------- -This document is aimed to give the users some brief introductions on Usecase-UI from different aspects. The users could find useful information, e.g. the architecuture, the APIs and the installation steps, etc. as well as the release notes of Usecase-UI in this document. +This document is aimed to give the users some brief introductions on Usecase-UI from different aspects. The users could find useful information, e.g. the architecture, the APIs and the installation steps, etc. as well as the release notes of Usecase-UI in this document. .. toctree:: diff --git a/docs/platform/administration.rst b/docs/platform/administration.rst index d4a6852c..988bbae4 100644 --- a/docs/platform/administration.rst +++ b/docs/platform/administration.rst @@ -4,7 +4,7 @@ Administration -------------- -It is not hard to manage Usecase-UI becasue it's been dockerized and split into two dockers. One is for UI and the other for Server. +It is not hard to manage Usecase-UI because it's been dockerized and split into two dockers. One is for UI and the other for Server. Processes / Dockers ^^^^^^^^^^^^^^^^^^^ diff --git a/docs/platform/configuration.rst b/docs/platform/configuration.rst index a9e275ce..ca332d83 100644 --- a/docs/platform/configuration.rst +++ b/docs/platform/configuration.rst @@ -4,4 +4,4 @@ Configuration ------------- -No machanism for customized configurtions is provided in the Amsterdam release. Such functionalities will be provided in the future if necessary. +No mechanism for customized configurations is provided in the Amsterdam release. Such functionalities will be provided in the future if necessary. diff --git a/docs/platform/log-and-diagnostic-info.rst b/docs/platform/log-and-diagnostic-info.rst index bc813e69..d545a2a4 100644 --- a/docs/platform/log-and-diagnostic-info.rst +++ b/docs/platform/log-and-diagnostic-info.rst @@ -4,7 +4,7 @@ Logging & Diagnostic Information --------------------------------- -In the Amsterdam release, the logs are kept inside the docekr containers, which means that you can get the log information only when the docker is still running. +In the Amsterdam release, the logs are kept inside the docker containers, which means that you can get the log information only when the docker is still running. Where to Access Information ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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 |