diff options
Diffstat (limited to 'usecaseui-portal/src/app/services/onboard-vnf-vm')
3 files changed, 173 insertions, 103 deletions
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 1a76a726..31307abf 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 @@ -18,7 +18,7 @@ <!-- nsList --> <div class="list" *ngIf="tab === 'NS'"> <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> - <div style="width:100%;"> + <div style="width:100%;height: 30%;margin-bottom: 1%"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> <p class="ant-upload-drag-icon"> @@ -34,46 +34,29 @@ </div> <div class="listlin"></div> <div class="listfile"> - <div> - <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of nsRightList"> <div> - <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + <i class="anticon anticon-link"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div class="color"> - <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + <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>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> </div> </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning"> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> <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" @@ -145,6 +128,7 @@ <!-- VNFList --> <div class="list" *ngIf="tab === 'VNF'"> <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div style="width:100%;height: 30%;margin-bottom: 1%"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> <p class="ant-upload-drag-icon"> @@ -160,45 +144,29 @@ </div> <div class="listlin"></div> <div class="listfile"> - <div> - <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of vnfRightList"> <div> - <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + <i class="anticon anticon-link"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div class="color"> - <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + <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>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning"> + </div> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> <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" @@ -257,6 +225,7 @@ <!-- PNFList --> <div class="list" *ngIf="tab === 'PNF'"> <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div style="width:100%;height: 30%;margin-bottom: 1%"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> <p class="ant-upload-drag-icon"> @@ -272,45 +241,29 @@ </div> <div class="listlin"></div> <div class="listfile"> - <div> - <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of pnfRightList"> <div> - <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + <i class="anticon anticon-link"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div class="color"> - <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + <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>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning"> + </div> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> <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/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index b973e575..593597dc 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 @@ -77,6 +77,7 @@ hr { } .listfile { width: 43%; + height: 100%; vertical-align: top; display: inline-block; margin-left: 10%; @@ -96,6 +97,7 @@ hr { } :first-child { width: 6%; + margin-left: 5px; } :nth-child(2){ width:20%; @@ -108,8 +110,14 @@ hr { padding-left: 4%; } .color { - color:rgba(66,84,143,0.5); + color:rgba(66,84,143,1); + span{ + color:rgba(66,84,143,0.7); + } } + .progress{ + color:rgba(66,84,143,0.7); + } } } nz-table { 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 a10996de..ac880f4a 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 @@ -22,6 +22,7 @@ import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zor import { filter } from 'rxjs/operators'; import { Title } from '@angular/platform-browser'; import * as $ from 'jquery'; +import { NzNotificationService } from 'ng-zorro-antd'; @Component({ @@ -136,8 +137,8 @@ export class OnboardVnfVmComponent implements OnInit { // ns beforeUpload beforeUploadNS = (file: UploadFile): boolean => { this.fileListNS.push(file); - console.log('beforeUpload'); - console.log('fileListNS' + this.fileListNS); + console.log('beforeUpload'); + console.log(this.fileListNS.length); console.log('fileListNS' + JSON.stringify(this.fileListNS)); this.myhttp.getCreatensData("createNetworkServiceData",this.requestBody)//on-line // this.myhttp.getCreatensData("creatensDataNS") //local @@ -229,6 +230,12 @@ export class OnboardVnfVmComponent implements OnInit { } } + nsRightList = []; + nsNum=0; + vnfRightList = []; + vnfNum=0; + pnfRightList = []; + pnfNum=0; //put Upload Upload handleUpload(url,tab): void { console.log('startUpload') @@ -240,18 +247,84 @@ export class OnboardVnfVmComponent implements OnInit { formData.append('file', file); }); this.nsuploading = true; + let lastNs = this.fileListNS[this.fileListNS.length-1]; + let nsfile={ + name:lastNs.name, + uid:lastNs.uid, + progress:0, + status:true, + success:0 + }; + this.nsNum+=1; + this.nsRightList.push(nsfile); + let requeryNs = (nsfile) => { + setTimeout(() => { + nsfile.progress+=2; + if (nsfile.progress < 100) { + requeryNs(nsfile) + } else { + nsfile.progress = 100; + nsfile.status = false; + } + }, 100) + }; + requeryNs(nsfile); break case "VNF": this.fileListVNF.forEach((file: any) => { formData.append('file', file); }); this.vnfuploading = true; + let lastVnf = this.fileListVNF[this.fileListVNF.length-1]; + let vnffile={ + name:lastVnf.name, + uid:lastVnf.uid, + progress:0, + status:true, + success:0 + }; + this.vnfNum+=1; + this.vnfRightList.push(vnffile); + let requeryVnf = (vnffile) => { + setTimeout(() => { + vnffile.progress+=2; + if (vnffile.progress < 100) { + requeryVnf(vnffile) + } else { + vnffile.progress = 100; + vnffile.status = false; + } + }, 100) + }; + requeryVnf(vnffile); break case "PNF": this.fileListPNF.forEach((file: any) => { formData.append('file', file); }); this.pnfloading = true; + let lastPnf = this.fileListPNF[this.fileListPNF.length-1]; + let pnffile={ + name:lastPnf.name, + uid:lastPnf.uid, + progress:0, + status:true, + success:0 + }; + this.pnfNum+=1; + this.pnfRightList.push(pnffile); + let requeryPnf = (pnffile) => { + setTimeout(() => { + pnffile.progress+=2; + if (pnffile.progress < 100) { + requeryPnf(pnffile) + } else { + pnffile.progress = 100; + pnffile.status = false; + } + }, 100) + }; + requeryPnf(pnffile); break } @@ -277,11 +350,47 @@ export class OnboardVnfVmComponent implements OnInit { .pipe(filter(e => e instanceof HttpResponse)) .subscribe( (event: {}) => { + if(tab =="NS"){ + console.log(this.nsRightList[this.nsNum-1],"this.nsRightList") + this.nsRightList[this.nsNum-1].progress = 100; + this.nsRightList[this.nsNum-1].status = false; + this.nsRightList[this.nsNum-1].success=0; + } + if(tab =="VNF"){ + console.log(this.vnfRightList[this.vnfNum-1],"this.vnfRightList") + this.vnfRightList[this.vnfNum-1].progress = 100; + this.vnfRightList[this.vnfNum-1].status = false; + this.vnfRightList[this.vnfNum-1].success=0; + } + if(tab =="PNF"){ + console.log(this.pnfRightList[this.pnfNum-1],"this.pnfRightList") + this.pnfRightList[this.pnfNum-1].progress = 100; + this.pnfRightList[this.pnfNum-1].status = false; + this.pnfRightList[this.pnfNum-1].success=0; + } this.changeUploadingSta(tab) console.log('upload successfully') this.msg.success('upload successfully.'); }, err => { + if(tab =="NS"){ + console.log(this.nsRightList[this.nsNum-1]) + this.nsRightList[this.nsNum-1].progress = 100; + this.nsRightList[this.nsNum-1].status = false; + this.nsRightList[this.nsNum-1].success=1; + } + if(tab =="VNF"){ + console.log(this.vnfRightList[this.vnfNum-1],"this.vnfRightList") + this.vnfRightList[this.vnfNum-1].progress = 100; + this.vnfRightList[this.vnfNum-1].status = false; + this.vnfRightList[this.vnfNum-1].success=1; + } + if(tab =="PNF"){ + console.log(this.pnfRightList[this.pnfNum-1],"this.pnfRightList") + this.pnfRightList[this.pnfNum-1].progress = 100; + this.pnfRightList[this.pnfNum-1].status = false; + this.pnfRightList[this.pnfNum-1].success=1; + } this.changeUploadingSta(tab) console.log('upload failed') this.msg.error('upload failed.'); |