diff options
Diffstat (limited to 'usecaseui-portal/src/app/services')
6 files changed, 520 insertions, 258 deletions
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 105f399f..09281d4b 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 @@ -29,45 +29,61 @@ style="margin-top: 16px"> {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-table #nzTable [nzData]="tableData" 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> + <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.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" data_id="i">{{status}}</span> - </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> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - </td> - </tr> - </tbody> - </nz-table> + <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.nsdName === null || item.nsdName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.name===null || item.name=== ''"> </td> + <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> + <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td *ngIf="item.version === null || item.version === ''"> </td> + <td> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''"> </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> + </div> --> + </div> <!-- VNFList --> <div class="list" *ngIf="tab === 'VNF'"> @@ -77,46 +93,51 @@ <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> <p class="ant-upload-text">Click or drag file to this area to upload</p> - <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> + <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" style="margin-top: 16px"> {{ vnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-table #nzTable [nzData]="tableData" 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> - <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.vnfProductName">{{item.vnfProductName}}</td> - <td *ngIf="item.vnfProductName === null">无</td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> - <td *ngIf="item.vnfdVersion === null">无</td> - <td *ngIf="item.version">{{item.version}}</td> - <td>{{item.onboardingState}}</td> - <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> + <nz-spin [nzSpinning]="isSpinning"> + <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> + <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.vnfProductName">{{item.vnfProductName}}</td> + <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> + <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td>{{item.onboardingState}}</td> + <td>{{item.usageState}}</td> + <td>{{item.operationalState}}</td> + <td> + <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> - </nz-table> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + </div> <!-- PNFList --> <div class="list" *ngIf="tab === 'PNF'"> @@ -126,38 +147,42 @@ <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> <p class="ant-upload-text">Click or drag file to this area to upload</p> - <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> + <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" style="margin-top: 16px"> {{ pnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex' - [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="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td>{{item.id}}</td> - <td>{{item.pnfdName}}</td> - <td>{{item.pnfdVersion}}</td> - <td>{{item.pnfdOnboardingState}}</td> - <td>{{item.pnfdUsageState}}</td> - <td> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> - </td> - </tr> - </tbody> - </nz-table> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex' + [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="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{item.id}}</td> + <td>{{item.pnfdName}}</td> + <td>{{item.pnfdVersion}}</td> + <td>{{item.pnfdOnboardingState}}</td> + <td>{{item.pnfdUsageState}}</td> + <td> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + </div> </nz-tab> </nz-tabset> 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 099383a2..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,7 +76,22 @@ hr { color: #147dc2; } } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } } } } +} +.mask { + top: 0; + left: 0; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.1; + background: black; + z-index: 1049; }
\ No newline at end of file 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 4e57fc64..c60ac041 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 = ''; //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' // 本地 @@ -50,9 +52,14 @@ export class OnboardVnfVmComponent implements OnInit { } //表格数据 - tableData:any; - sdcData:any; - vfcData:any; + nstableData:any; + vnftableData:any; + pnftableData:any; + nssdcData:any; + nsvfcData:any; + + vnfsdcData:any; + vnfvfcData:any; nspageIndex = 1; nspageSize = 10; vnfpageIndex = 1; @@ -64,7 +71,7 @@ export class OnboardVnfVmComponent implements OnInit { sortName = null; sortValue = null; tabs = ['NS', 'VNF', 'PNF']; - + isSpinning = false; isVisible = false; isOkLoading = false; showModal(): void { @@ -85,12 +92,15 @@ export class OnboardVnfVmComponent implements OnInit { console.log(this.url); switch (tab) { case 'NS': + this.nstableData = []; this.getTableData(); break case 'VNF': + this.vnftableData = []; this.getTableVnfData() break case 'PNF': + this.pnftableData = []; this.getTablePnfData() break } @@ -146,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) => { @@ -190,19 +200,19 @@ export class OnboardVnfVmComponent implements OnInit { switch(tab) { case "NS": this.fileListNS.forEach((file: any) => { - formData.append('files[]', file); + formData.append('file', file); }); this.nsuploading = true; break case "VNF": this.fileListVNF.forEach((file: any) => { - formData.append('files[]', file); + formData.append('file', file); }); this.vnfuploading = true; break case "PNF": this.fileListPNF.forEach((file: any) => { - formData.append('files[]', file); + formData.append('file', file); }); this.pnfloading = true; break @@ -255,128 +265,241 @@ changeUploadingSta(tab) { // 获取NS列表 getTableData() { - //vfc + this.isSpinning = true; + //ns vfc lists this.myhttp.getOnboardTableData() .subscribe((data) => { - console.log(data) - this.vfcData = data; - console.log(typeof this.vfcData) - console.log("NSlist-vfc-->",data) - }, (err) => { + 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; + 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) - this.sdcData = data; - this.tableData = this.MergeArray(this.vfcData, this.sdcData) + }) + }, (err) => { - console.log(err); - }) + console.log(err); + }) + } // 获取vnf列表 getTableVnfData() { + this.isSpinning = true; + //vnf vfc lists this.myhttp.getOnboardTableVnfData() .subscribe((data) => { - console.log("vnfList-->", data); - this.vfcData = data; - console.log("vnfList-vfc-->",data) - }, (err) => { - console.log(err); - }) + 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; + 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) - this.sdcData = data; - this.tableData = this.MergeArray(this.vfcData, this.sdcData) }, (err) => { console.log(err); }) } // 获取pnf列表 - getTablePnfData() { + getTablePnfData() { + this.isSpinning = true; this.myhttp.getOnboardTablePnfData() .subscribe((data) => { console.log("pnfList-->", data); - this.total = data["body"]; - this.tableData = data; + console.log("pnfList-->", data.length); + this.pnftableData = data; + this.isSpinning = false; //loading hide }, (err) => { console.log(err); }) } - /* onboard 上传按钮 */ - // ns onboard - - success(): void { + //合并并去重 + 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++) { + // 根据vfc列表arr1的id和sdc列表arr2的uuid去重 + if (arr2[i].uuid == arr1[j].id) { + flag = false; + break; + } + } + if (flag && arr2[i] != "") { + _arr.push(arr2[i]); + } + } + return _arr; + } + +//----------------------------------------------------------------------------------- + /* onboard */ + //成功弹框 + success(tab): void { const modal = this.modalService.success({ nzTitle: 'This is an success message', nzContent: 'Package Onboard Completed.' }); - - window.setTimeout(() => modal.destroy(), 2000); + switch(tab) { + case "NS": + console.log("NS成功弹框") + this.getTableData(); + break + case "VNF": + console.log("VNF成功弹框") + this.getTableVnfData(); + break + } + // window.setTimeout(() => modal.destroy(), 5000); } + //失败弹框 error(): void { this.modalService.error({ nzTitle: 'This is an error message', nzContent: 'Package Onboard Failed!' }); } - updataNsService(id) { - console.log(id); + + //onboard status + onboardData ={ + status:"onboard", + progress: 0, + } + currentIndex = 0; + + // ns onboard 上传按钮 + updataNsService(id,index) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; + this.onboardData.progress = 0; + console.log("NS-onboard-id-->" + id); let requestBody = { "csarId": id } this.myhttp.getNsonboard(requestBody) .subscribe((data) => { - console.log('onboard ns sdc', data); - if(data["status"] == 200) { - this.success(); - - } else { + console.log('onboard ns sdc-->', data); + if(data.status == "failed"){ + console.log("Package Onboard Failed") + this.onboardData.status = "Failed"; this.error(); + return false + }else if(data.status == "success"){ + this.success("NS"); + this.onboardData.status = "onboarded"; } - this.getTableData(); }, (err) => { console.log(err); }) } - // vnf onboard - updataVnfService(id) { - this.status = "Onboarding"; - console.log(id) + // vnf onboard 上传按钮 + updataVnfService(id,index) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; //按钮置灰 + this.onboardData.progress = 0; + + console.log("VNF-onboard-id-->" + id) let requestBody = { "csarId": id } - this.myhttp.getVnfonboard(requestBody) - .subscribe((data) => { - console.log('onboard vnf sdc', data); - if(data["status"] == "200"){ - this.success(); - }else { - this.error(); - } - }, (err) => { - console.log(err); - }) + 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); //vnf需要查询进度接口 + }, (err) => { + console.log(err); + }) } - // pnf onboard ? - updataPnfService(id) { - console.log('pnf',id); - } + // pnf onboard //暂时没有上传功能 + // updataPnfService(id) { + // console.log('pnf',id); + // } + //Progress 进度查询 + queryProgress(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 == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null){ + console.log("progress == undefined"); + this.onboardData.status = "onboarding"; + setTimeout(()=>{ + this.queryProgress(this.jobId,0); + },10000) + return false + } + if(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.progress < 100){ + this.onboardData.status = "onboarding"; + console.log("progress < 100") + setTimeout(()=>{ + this.queryProgress(this.jobId,0); + },5000) + }else if(data.responseDescriptor.progress == 100){ + res(data); + console.log("progress == 100"); + console.log(data); + this.success("VNF"); + this.onboardData.status = "onboarded"; + } + return false + }) + }) + return mypromise; + } //-------------------------------------------------------------------------------- /* delete 删除按钮 */ - // ns showConfirm(index,pkgid,tab): void { this.confirmModal = this.modal.confirm({ nzTitle: 'Do you Want to delete these items?', @@ -387,22 +510,21 @@ changeUploadingSta(tab) { switch (tab) { case 'NS': this.deleteNsService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break case 'VNF': this.deleteVnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break case 'PNF': this.deletePnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break } }).catch(() => console.log('Oops errors!')) }); } - /* delete 删除按钮 */ //delete nsItem deleteNsService(index,pkgid) { console.log(pkgid) @@ -410,13 +532,11 @@ changeUploadingSta(tab) { this.myhttp.deleteNsIdData(pkgid) .subscribe((data) => { console.log("nsdel--->", data); + //refresh list after successful deletion + this.getTableData(); }, (err) => { console.log(err); }) - console.log(index) - this.tableData.splice(index, 1) - console.log('tableData.length NS--->',this.tableData.length) - this.getTableData() } //delete vnfItem @@ -426,13 +546,11 @@ changeUploadingSta(tab) { this.myhttp.deleteVnfIdData(pkgid) .subscribe((data) => { console.log('vnfdel--->', data); + //refresh list after successful deletion + this.getTableVnfData() }, (err) => { console.log(err); }) - console.log(index) - this.tableData.splice(index, 1) - console.log('tableData.length VNF--->'+ this.tableData.length) - this.getTableVnfData() } //delete PnfItem @@ -442,15 +560,14 @@ changeUploadingSta(tab) { this.myhttp.deletePnfIdData(pkgid) .subscribe((data) => { console.log('pnfdel--->', data); + //refresh list after successful deletion + this.getTablePnfData() }, (err) => { console.log(err); }) - console.log(index) - this.tableData.splice(index, 1) - console.log('tableData.length PNF--->'+this.tableData.length) - this.getTablePnfData() } +//------------------------------------------------------------------------------------ //下载download // downloadNsService(id) { // console.log('download') @@ -484,27 +601,4 @@ changeUploadingSta(tab) { // }) // } - //合并并去重 - 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++) { - // 根据vfc列表arr1的id和sdc列表arr2的uuid去重 - if (arr2[i].uuid == arr1[j].id) { - flag = false; - break; - } - } - if (flag && arr2[i] != "") { - _arr.push(arr2[i]); - } - } - return _arr; - } } diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index fa875c0f..e652ff68 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -116,16 +116,17 @@ <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating', 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> - <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> + <nz-progress *ngIf="data.status == 'processing' || data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> </td> <td> - <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}" + <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}" *ngIf="data.serviceDomain=='E2E Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i> <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> --> - <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" - *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> - <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i> - <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'||data.status=='Scaling'}" class="anticon anticon-delete" (click)="deleteModel(data)"></i> + <!-- <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" + *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> --> + <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}" + *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i> + <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'||data.status=='Scaling'}" class="anticon anticon-delete" (click)="deleteModel(data)"></i> </td> </tr> <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> 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 4e0770a3..24bb45c8 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 @@ -137,7 +137,7 @@ export class ServicesListComponent implements OnInit { } handleCancel(): void { - console.log('Button cancel clicked!'); + // console.log('Button cancel clicked!'); this.isVisible = false; } @@ -168,6 +168,7 @@ export class ServicesListComponent implements OnInit { if(typeof item["childServiceInstances"] == "string"){ item["childServiceInstances"] = JSON.parse(item["childServiceInstances"]); } + item["childServiceInstances"] = item["childServiceInstances"].map((child)=>{ if(typeof child == "string"){ return JSON.parse(child); @@ -175,11 +176,63 @@ export class ServicesListComponent implements OnInit { return child; } }) + if(item["serviceDomain"]=="Network Service"){ - item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{ - vnf["serviceDomain"] = "vnf"; - return vnf; - }); + if(item["vnfInfo"]){ + item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{ + vnf["serviceDomain"] = "vnf"; + return vnf; + }); + }else if(item["relationship-list"] && item["relationship-list"]["relationship"]){ + item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate)=>{ + return relate["related-to"]=="generic-vnf"; + }).map((vnf)=>{ + let vnfInfo = {vnfNsInstanceId:"",vnfInstanceId:"",vnfInstanceName:"",serviceDomain:"vnf"}; + vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"]; + vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid)=>{ return vnfid["relationship-key"]=="generic-vnf.vnf-id"})["relationship-value"]; + vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname)=>{ return vnfname["property-key"]=="generic-vnf.vnf-name"})["property-value"]; + return vnfInfo; + }) + } + } + + if(item["serviceStatus"]=="finished"){ + item["status"] = "Active"; + }else if(item["serviceStatus"]=="error"){ + item["status"] = "error"; + }else if(item["serviceStatus"]=="processing"){ + item["status"] = "processing"; + item["rate"] = 0; + if(item["serviceDomain"]=="Network Service"){ + let updata = (prodata)=>{ + item["rate"] = prodata.progress || item["rate"]; + // >100 err + if(item["rate"] > 100){ + item["status"]=prodata.status; + } + } + let id = item["nsInstanceId"] || item["service-instance-id"]; + let jobid = item["jobId"] || item["operationId"]; + this.queryNsProgress(jobid,id,updata).then(()=>{ + item["rate"] = 100; + item["status"] = "completed"; + }) + }else{ + let updata = (prodata)=>{ + item["rate"] = prodata.progress || item["rate"]; + if(item["rate"] > 100){ + item["status"]=prodata.status; + } + } + let obj = { + serviceId:item["service-instance-id"], + operationId:item["operationId"] + } + this.queryProgress(obj,updata).then(()=>{ + item["rate"] = 100; + item["status"] = "completed"; + }) + } } return item; }) @@ -385,7 +438,10 @@ export class ServicesListComponent implements OnInit { } this.tableData = [newData,...this.tableData]; let updata = (prodata)=>{ - newData.rate = Math.floor(prodata.progress/3); + newData.rate = Math.floor(prodata.progress/3); + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; return this.queryProgress(queryParams,updata); @@ -407,6 +463,9 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) newData.rate = Math.floor(average/3) + stageNum; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; querypros.push(this.queryProgress(queryParams,updata)) @@ -438,6 +497,9 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average =((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) newData.rate = Math.floor(average/3) + stageNum; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; querypros.push(this.queryProgress(queryParams,updata)) @@ -479,7 +541,7 @@ export class ServicesListComponent implements OnInit { console.log(data); newData = { // 'service-instance-id':data["serviceId"], - 'service-instance-name':obj.name, + 'service-instance-name':obj.service.name, serviceDomain:this.templateTypeSelected, childServiceInstances:[], status:"Creating", @@ -489,6 +551,9 @@ export class ServicesListComponent implements OnInit { this.tableData = [newData,...this.tableData]; let updata = (prodata)=>{ newData.rate = prodata.progress; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; return this.queryProgress(queryParams,updata); @@ -520,10 +585,6 @@ export class ServicesListComponent implements OnInit { this.myhttp.nsCreateInstance(obj.step1) .subscribe((data)=>{ // console.log(data); - if(data.status == "FAILED"){ - console.log("create ns service failed :" + JSON.stringify(data)); - return false; - } newData = { // 'service-instance-id':data.nsInstanceId, 'service-instance-name':obj.step1.nsName, @@ -533,6 +594,11 @@ export class ServicesListComponent implements OnInit { rate:0, } this.tableData = [newData,...this.tableData]; + if(data.status == "FAILED"){ + console.log("create ns service failed :" + JSON.stringify(data)); + newData.status = "failed"; + return false; + } let createParams = "?ns_instance_id=" + data.nsInstanceId + "&customerId="+this.customerSelected.id + "&serviceType="+this.serviceTypeSelected.name + @@ -540,12 +606,18 @@ export class ServicesListComponent implements OnInit { "&parentServiceInstanceId="; // step2 this.createNsService(createParams,obj.step2).then((jobid)=>{ - + if(jobid == "failed"){ + newData.status = "failed"; + return false; + } let updata = (prodata)=>{ - newData.rate = prodata.responseDescriptor.progress; + newData.rate = prodata.progress; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } - return this.queryNsProgress(jobid,updata); + return this.queryNsProgress(jobid,newData["service-instance-id"],updata); }).then((data)=>{ console.log(data); newData.rate = 100; @@ -581,6 +653,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("instantiate ns service failed :" + JSON.stringify(data)); + res("failed"); return false; } res(data.jobId); @@ -597,6 +670,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("scale E2e service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } let obj = { @@ -605,10 +679,13 @@ export class ServicesListComponent implements OnInit { } let updata = (prodata)=>{ service.rate = prodata.progress; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } this.queryProgress(obj,updata).then(()=>{ service.rate = 100; - service.status = "Active"; + service.status = "completed"; }) }) } @@ -617,20 +694,25 @@ export class ServicesListComponent implements OnInit { console.log(service); service.rate = 0; service.status = "Healing"; - this.myhttp.healNsService(service.nsInstanceId,requestBody) + let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"]; + this.myhttp.healNsService(id,requestBody) .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("heal nsvnf service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } let jobid = data.jobId; let updata = (prodata)=>{ - service.rate = prodata.responseDescriptor.progress; + service.rate = prodata.progress; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } - this.queryNsProgress(jobid,updata).then((data1)=>{ + this.queryNsProgress(jobid,null,updata).then((data1)=>{ console.log(data1); service.rate = 100; - service.status = "Active"; + service.status = "completed"; }); }) } @@ -653,6 +735,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("delete service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId} @@ -660,6 +743,9 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); service["rate"]=average; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } querypros.push(this.queryProgress(obj,updata)); res(); @@ -686,26 +772,34 @@ export class ServicesListComponent implements OnInit { deleteNsService(service){ service.rate = 0; service.status = "Deleting"; - let id = service.nsInstanceId; + let id = service.nsInstanceId || service["service-instance-id"]; let requestBody = { terminationType : this.terminationType, gracefulTerminationTimeout : this.gracefulTerminationTimeout } this.stopNsService(id,requestBody).then((jobid)=>{ + if(jobid == "failed"){ + service.status = "failed"; + return false; + } let updata = (prodata)=>{ - service.rate = prodata.responseDescriptor.progress; + service.rate = prodata.progress; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } - return this.queryNsProgress(jobid,updata); + return this.queryNsProgress(jobid,null,updata); }).then(()=>{ this.myhttp.nsDeleteInstance(id) .subscribe((data)=>{ // console.log(data); + service.rate = 100; + service.status = "completed"; if(data.status == "FAILED"){ console.log("delete ns service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } - service.rate = 100; - service.status = "completed"; let hasUndone = this.tableData.some((item)=>{ return item.rate < 100; }) @@ -724,6 +818,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("stop ns service failed :" + JSON.stringify(data)); + res("failed"); return false; } res(data.jobId); @@ -746,14 +841,28 @@ export class ServicesListComponent implements OnInit { // "finishedAt": "" // } // } + let errorNums = 180; let requery = ()=>{ this.myhttp.getProgress(obj) .subscribe((data)=>{ - if(data.operationStatus.progress==undefined){ - console.log(data); + if(data.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"}); + return false; + } setTimeout(()=>{ requery(); - },5000) + },10000) + return false; + } + if(data.operationStatus.progress > 100){ + callback({progress:255,status:"time over"}); return false; } if(data.operationStatus.progress < 100){ @@ -781,7 +890,7 @@ export class ServicesListComponent implements OnInit { }) return mypromise; } - queryNsProgress(jobid,callback){ + queryNsProgress(jobid,id,callback){ let mypromise = new Promise((res,rej)=>{ // let data = { // "jobId": "string", @@ -802,20 +911,34 @@ export class ServicesListComponent implements OnInit { // ] // } // } - let requery = (responseId)=>{ - this.myhttp.getNsProgress(jobid,responseId) + let errorNums = 180; + let requery = ()=>{ + this.myhttp.getNsProgress(jobid,id) .subscribe((data)=>{ - if(data.responseDescriptor.progress==undefined){ - console.log(data); + if(data.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"}); + return false; + } setTimeout(()=>{ - requery(data.responseDescriptor.responseId); - },5000) + requery(); + },10000) + return false; + } + if(data.responseDescriptor.progress > 100){ + callback({progress:255,status:"time over"}); return false; } if(data.responseDescriptor.progress < 100){ - callback(data); + callback(data.responseDescriptor); setTimeout(()=>{ - requery(data.responseDescriptor.responseId); + requery(); },5000) }else { res(data); @@ -825,15 +948,15 @@ export class ServicesListComponent implements OnInit { // console.log(data.responseDescriptor.progress) // data.responseDescriptor.progress++; // if(data.responseDescriptor.progress<100){ - // callback(data); - // requery(data.responseDescriptor.responseId) + // callback(data.responseDescriptor); + // requery() // }else{ // callback(data); // res(data) // } // },100) } - requery(0); + requery(); }) return mypromise; } |