summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/services/onboard-vnf-vm
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-05-16 16:53:08 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-05-16 16:53:12 +0800
commitc800bda2f88d2ac9f37b2185e49faf8a113968a9 (patch)
tree8dbef7cd61e5962907a5805d31aaf1642c3c0493 /usecaseui-portal/src/app/services/onboard-vnf-vm
parent9e3abb4d0cddf201c244eff86802d0bd88dd4173 (diff)
Package management interface development
Change-Id: Ic77ca7d4c7fca3b165adce0ea4036e4054ef755e Issue-ID: USECASEUI-211 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/services/onboard-vnf-vm')
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html153
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less10
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts113
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.');