Package management interface development

Change-Id: Ic77ca7d4c7fca3b165adce0ea4036e4054ef755e
Issue-ID: USECASEUI-211
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

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.');