diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
| -rw-r--r-- | usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 52 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts | 96 |
2 files changed, 68 insertions, 80 deletions
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html index 4f865ff3..787d76b6 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -17,7 +17,7 @@ <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"> <!-- nsList --> <div class="list" *ngIf="tab === 'NS'"> - <div style="width:100%;height: 30%;margin-bottom: 1%"> + <div class="listUploadContainer"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> <p class="ant-upload-drag-icon"> @@ -26,43 +26,39 @@ <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p> <p class="ant-upload-hint"></p> </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" - style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" class="upload"> {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> </div> <div class="listlin"></div> <div class="listfile"> - <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> - <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div> - <div style="height:80%;overflow: auto"> - <div class="listfilebgc" *ngFor="let itemns of nsRightList"> - <div> - <i class="anticon anticon-link"></i> - </div> - <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div> - <div class="color" *ngIf="itemns.status"> - <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress> - </div> - <div class="color" *ngIf="!itemns.status"> - <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> - <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> - </div> - <div *ngIf="!itemns.status"> - <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i> - <i class="anticon anticon-exclamation-circle" *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i> - </div> + <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div> + <div class="listfilebgc" *ngIf="nsfile"> + <i class="anticon anticon-link icon"></i> + <div class="color" [ngClass]="{'progress':nsfile.status}">{{nsfile.name}}</div> + <div class="color" *ngIf="nsfile.status"> + <nz-progress [nzPercent]="nsfile.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!nsfile.status"> + <span *ngIf="nsfile.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="nsfile.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!nsfile.status"> + <i class="anticon anticon-check-circle" *ngIf="nsfile.success == 0" class="success"></i> + <i class="anticon anticon-exclamation-circle" *ngIf="nsfile.success == 1" class="fail"></i> </div> </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> + <nz-spin [nzSpinning]="isSpinning" class="listContainer"> <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> + <tr class="theadColor"> <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th> <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> @@ -108,7 +104,7 @@ </div> <!-- VNFList --> <div class="list" *ngIf="tab === 'VNF'"> - <div style="width:100%;height: 30%;margin-bottom: 1%"> + <div class="listUploadContainer"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> <p class="ant-upload-drag-icon"> @@ -147,7 +143,7 @@ </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> + <nz-spin [nzSpinning]="isSpinning" class="listContainer"> <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" @@ -190,7 +186,7 @@ </div> <!-- PNFList --> <div class="list" *ngIf="tab === 'PNF'"> - <div style="width:100%;height: 30%;margin-bottom: 1%"> + <div class="listUploadContainer"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> <p class="ant-upload-drag-icon"> @@ -229,7 +225,7 @@ </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> + <nz-spin [nzSpinning]="isSpinning" class="listContainer"> <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" diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index 33385e32..71da39f5 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -34,11 +34,11 @@ export class OnboardVnfVmComponent implements OnInit { // delete Modal confirmModal: NzModalRef; - nsdInfoId = ''; + nsdInfoId: string; vnfPkgId = ''; pnfdInfoId = ''; tabTitle = "NS"; - nsuploading = false; + nsuploading:boolean = false; vnfuploading = false; pnfloading = false; fileList: UploadFile[] = []; @@ -54,10 +54,6 @@ export class OnboardVnfVmComponent implements OnInit { 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 - //ns: 'https://jsonplaceholder.typicode.com/posts/', - //vnf: 'https://jsonplaceholder.typicode.com/posts/', - //pnf: 'https://jsonplaceholder.typicode.com/posts/', }; constructor( private myhttp: onboardService, @@ -78,22 +74,22 @@ export class OnboardVnfVmComponent implements OnInit { vnftableData: any; pnftableData: any; nssdcData: any; - nsvfcData: any; vnfsdcData: any; - vnfvfcData: any; - nspageIndex = 1; - nspageSize = 10; + nspageIndex: number = 1; + nspageSize: number = 10; vnfpageIndex = 1; vnfpageSize = 10; pnfpageIndex = 1; pnfpageSize = 10; + total; nsloading = false; sortName = null; sortValue = null; tabs = ['NS', 'VNF', 'PNF']; - isSpinning = false; + isSpinning: boolean = false; + isNone: string = 'block'; //2019.08.14 add notificationAttributes = { @@ -118,7 +114,6 @@ export class OnboardVnfVmComponent implements OnInit { } // Handling tab switching request data handleTabChange(tab) { - this.tabTitle = tab; switch (tab) { case 'NS': this.nstableData = []; @@ -156,9 +151,8 @@ export class OnboardVnfVmComponent implements OnInit { // ns beforeUpload beforeUploadNS = (file: UploadFile): boolean => { - this.fileListNS.push(file); + this.fileListNS.splice(0,1,file); this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line - // this.myhttp.getCreatensData("creatensDataNS") //local .subscribe((data) => { this.nsdInfoId = data["id"]; }, (err) => { @@ -210,27 +204,30 @@ export class OnboardVnfVmComponent implements OnInit { //Drag and drop and click the upload button onClick(tab) { + this.isNone = 'none'; switch (tab) { case 'NS': - // 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': - // 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': - // 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; + nsfile: { + name: string, + uid: string, + progress: number, + status: boolean, + success: number + }; vnfRightList = []; vnfNum = 0; pnfRightList = []; @@ -242,31 +239,25 @@ export class OnboardVnfVmComponent implements OnInit { switch (tab) { case "NS": this.fileListNS.forEach((file: any) => { - formData.append('file', file); + formData.set('file', file); }); this.nsuploading = true; - let lastNs = this.fileListNS[this.fileListNS.length - 1]; - let nsfile = { - name: lastNs.name, - uid: lastNs.uid, + this.nsfile = { + name: this.fileListNS[0].name, + uid: this.fileListNS[0].uid, progress: 0, status: true, success: 0 }; - this.nsNum += 1; - this.nsRightList.push(nsfile); - let requeryNs = (nsfile) => { + let requeryNS = (nsfile) => { + nsfile.progress += 3; setTimeout(() => { - nsfile.progress += 2; if (nsfile.progress < 100) { - requeryNs(nsfile) - } else { - nsfile.progress = 100; - nsfile.status = false; + requeryNS(nsfile) } }, 100) }; - requeryNs(nsfile); + requeryNS(this.nsfile); break case "VNF": this.fileListVNF.forEach((file: any) => { @@ -340,9 +331,9 @@ export class OnboardVnfVmComponent implements OnInit { .subscribe( (event: {}) => { if (tab == "NS") { - this.nsRightList[this.nsNum - 1].progress = 100; - this.nsRightList[this.nsNum - 1].status = false; - this.nsRightList[this.nsNum - 1].success = 0; + this.nsfile.progress = 100; + this.nsfile.status = false; + this.isNone = 'block'; } if (tab == "VNF") { this.vnfRightList[this.vnfNum - 1].progress = 100; @@ -359,9 +350,9 @@ export class OnboardVnfVmComponent implements OnInit { }, err => { if (tab == "NS") { - this.nsRightList[this.nsNum - 1].progress = 100; - this.nsRightList[this.nsNum - 1].status = false; - this.nsRightList[this.nsNum - 1].success = 1; + this.nsfile.progress = 100; + this.nsfile.status = false; + this.nsfile.success = 1; } if (tab == "VNF") { this.vnfRightList[this.vnfNum - 1].progress = 100; @@ -401,22 +392,21 @@ export class OnboardVnfVmComponent implements OnInit { //ns vfc lists this.myhttp.getOnboardTableData() .subscribe((data) => { - this.nsvfcData = data; - this.nstableData = this.nsvfcData; + this.nstableData = data; //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.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.nstableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); this.nstableData = this.nstableData.concat(sameData); }, (err) => { - console.log(err); + console.error(err); this.isSpinning = false; }) }, (err) => { - console.log(err); + console.error(err); this.isSpinning = false; }) @@ -428,22 +418,23 @@ export class OnboardVnfVmComponent implements OnInit { //vnf vfc lists this.myhttp.getOnboardTableVnfData() .subscribe((data) => { - this.vnfvfcData = data; - this.vnftableData = this.vnfvfcData; + this.vnftableData = data; //vnf sdc lists this.myhttp.getSDC_VNFTableData() .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.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.vnftableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) }); this.vnftableData = this.vnftableData.concat(sameData); }, (err) => { - console.log(err); + console.error(err); + this.isSpinning = false; }) }, (err) => { - console.log(err); + console.error(err); + this.isSpinning = false; }) } @@ -455,7 +446,8 @@ export class OnboardVnfVmComponent implements OnInit { this.pnftableData = data; this.isSpinning = false; //loading hide }, (err) => { - console.log(err); + console.error(err); + this.isSpinning = false; }) } |