Package management interface development

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

6 files changed, 196 insertions, 125 deletions

diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
index cfd32f7c..9620a977 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -131,7 +131,7 @@ export class CcvpnNetworkComponent implements OnInit {
 
     imgmap = {
         '1': './assets/images/cloud-county1.png',
-        '2': './assets/images/cloud-city1.png',
+        '2': './assets/images/tp.png',
         '3': './assets/images/cloud-out.png',
     };
     tpoption = {
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.');
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 55551402..7f2f132f 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
@@ -130,7 +130,7 @@
                 <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th>
                 <th nzWidth="5%"></th>
                 <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}} </th>
-                <th nzWidth="20%"> {{"i18nTextDefine_Description" | translate}} </th>
+                <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}} </th>
                 <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}} </th>
                 <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}} </th>
                 <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}} </th>
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index b7499724..d45a2357 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -308,33 +308,34 @@ hr {
 }
 /*2019.01.14*/
 .e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
-    color: #3671AB;
+    //color: #3671AB;
     width:120px;
     height: 34px;
     line-height: 34px;
     margin-bottom: 0!important;
     text-align: center;
-    background:linear-gradient(131deg,rgba(147,196,255,1) 0%,rgba(120,241,226,1) 100%);
+    background:rgba(158, 158, 158, 0.38);
+    //background:linear-gradient(131deg,rgba(147,196,255,1) 0%,rgba(120,241,226,1) 100%);
     border-radius:4px
 }
-.nsColor{
-    background:linear-gradient(135deg,rgba(253,187,127,1) 0%,rgba(250,215,153,1) 100%);
-    border-radius:4px;
-    color: #A16C39;
-}
-.ccvpnColor{
-    background:linear-gradient(135deg,rgba(198,222,251,1) 0%,rgba(217,215,252,1) 100%);
-    border-radius:4px;
-    color: #7C74BB;
-}
-.sotnColor{
-    background:rgba(201,243,239,1);
-    border-radius:4px;
-    color: #30B0A0;
-}
-.voLTEColor{
-    background:rgba(201,243,239,1);
-}
+//.nsColor{
+//    background:linear-gradient(135deg,rgba(253,187,127,1) 0%,rgba(250,215,153,1) 100%);
+//    border-radius:4px;
+//    color: #A16C39;
+//}
+//.ccvpnColor{
+//    background:linear-gradient(135deg,rgba(198,222,251,1) 0%,rgba(217,215,252,1) 100%);
+//    border-radius:4px;
+//    color: #7C74BB;
+//}
+//.sotnColor{
+//    background:rgba(201,243,239,1);
+//    border-radius:4px;
+//    color: #30B0A0;
+//}
+//.voLTEColor{
+//    background:rgba(201,243,239,1);
+//}
 .vnfColor,.siteColor,.SDWANColor{
     color:rgba(60,79,140,0.5);
     width:120px;