Modify the display of the list

Change-Id: Idd8fd9f4bc4f6c972690e3a8c99200afb1c259e0
Issue-ID: USECASEUI-159
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

2 files changed, 51 insertions, 111 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 44b4adec..6a605bfa 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
@@ -13,26 +13,6 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-
-<!-- <button nz-button nzType="primary" (click)="showModal()">
-    <i class="anticon anticon-plus-circle-o"></i><span> Create </span>
-</button>
-<nz-modal [(nzVisible)]="isVisible" nzTitle="Modal Title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
-    [nzOkLoading]="isOkLoading">
-    <p>
-        <input nz-input placeholder="请输入key" [(ngModel)]="value1">
-    </p>
-    <p>
-        <input nz-input placeholder="请输入value" [(ngModel)]="value2">
-    </p>
-</nz-modal> -->
-
-<!-- <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab">
-        Content of Tab Pane {{ tab }}
-    </nz-tab>
-</nz-tabset> -->
-
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
         <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, id, url)">
             <!-- nsList -->
@@ -52,16 +32,14 @@
                 <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
                     [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
                     [nzLoading]="loading" nzSize="middle">
-                    <!-- (nzPageIndexChange)="searchNsData()" (nzPageSizeChange)="searchNsData(true)"-->
                     <thead (nzSortChange)="sort($event)" nzSingleSort>
                         <tr>
-                            <th nzWidth="5%">NO</th>
+                            <th nzWidth="15%">NO</th>
                             <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                            <!-- <th nzWidth="20%">Type</th> -->
-                            <th nzWidth="10%">Version</th>
+                            <th nzWidth="15%">Version</th>
                             <th nzWidth="15%">Onboarding State</th>
-                            <th nzWidth="20%">Operational State</th>
-                            <th nzWidth="20%">Usage State</th>
+                            <th nzWidth="15%">Operational State</th>
+                            <th nzWidth="10%">Usage State</th>
                             <th nzWidth="15%">Operation button</th>
                         </tr>
                     </thead>
@@ -71,26 +49,19 @@
                             <td *ngIf="item.uuid">{{item.uuid}}</td>
             
                             <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+                            <td *ngIf="item.nsdName===''">无</td>
                             <td *ngIf="item.name">{{item.name}}</td>
-            
-                            <!-- <td>{{item.onboardingFailureDetails.type}}</td> -->
                             <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
                             <td *ngIf="item.version">{{ item.version }}</td>
                             <td>
-                                    <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
+                                <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
                                 <span *ngIf="item.uuid" data_id="i">{{status}}</span>
-                                <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> -->
                             </td>
                             <td>{{item.nsdOperationalState}}</td> 
                             <td>{{item.nsdUsageState}}</td>
                             <td>
-                                <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
                                 <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
-                                <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> -->
                                 <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
-                                <!-- (click)="deleteNsService(i,item.id)" -->
-                                <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> -->
-                                <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> -->
                             </td>
                         </tr>
                     </tbody>
@@ -113,22 +84,19 @@
                 <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
                     [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
                     [nzLoading]="loading" nzSize="middle">
-                    <!-- (nzPageIndexChange)="searchVnfData()" (nzPageSizeChange)="searchVnfData(true)"-->
                     <thead (nzSortChange)="sort($event)" nzSingleSort>
                         <tr>
-                            <th nzWidth="5%">NO</th>
-                            <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th>
-                            <th nzWidth="10%">Version</th>
-                            <th nzWidth="20%">Onboarding State</th>
-                            <th nzWidth="15%">usageState</th>
-                            <th nzWidth="20%">Operational State</th>
-                            <th nzWidth="20%">Operation button</th>
+                            <th nzWidth="15%">NO</th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                            <th nzWidth="15%">Version</th>
+                            <th nzWidth="15%">Onboarding State</th>
+                            <th nzWidth="15%">Operational State</th>
+                            <th nzWidth="10%">Usage State</th>
+                            <th nzWidth="15%">Operation button</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
                         <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <!-- <td>{{i+1}}</td> -->
                             <td *ngIf="item.id">{{item.id}}</td>
                             <td *ngIf="item.uuid">{{item.uuid}}</td>
                             <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
@@ -138,20 +106,11 @@
                             <td>{{item.onboardingState}}</td>
                             <td>{{item.usageState}}</td>
                             <td>{{item.operationalState}}</td>
-                            <!-- <td>
-                                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span>
-                                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                                        </td> -->
                             <td>
-                                <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
                                 <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
-                                <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> -->
                                 <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" id="{{ item.id}}" *ngIf="item.id"></i>
-                                <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> -->
                             </td>
                         </tr>
-                        <!-- </ng-template> -->
                     </tbody>
                 </nz-table>
             </div>
@@ -172,39 +131,27 @@
                 <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
                     [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
                     [nzLoading]="loading" nzSize="middle">
-                    <!-- (nzPageIndexChange)="searchPnfData()"  (nzPageSizeChange)="searchPnfData(true)"-->
                     <thead (nzSortChange)="sort($event)" nzSingleSort>
                         <tr>
-                            <th nzWidth="5%">NO</th>
+                            <th nzWidth="15%">NO</th>
                             <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
                             <th nzWidth="15%">Version</th>
-                            <th nzWidth="20%">Onboarding State</th>
-                            <th nzWidth="20%">usageState</th>
-                            <th nzWidth="25%">Operation button</th>
+                            <th nzWidth="15%">Onboarding State</th>
+                            <th nzWidth="10%">Usage State</th>
+                            <th nzWidth="15%">Operation button</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
                         <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <!-- <td>{{i+1}}</td> -->
                             <td>{{item.id}}</td>
                             <td>{{item.pnfdName}}</td>
                             <td>{{item.pnfdVersion}}</td>
                             <td>{{item.pnfdOnboardingState}}</td>
                             <td>{{item.pnfdUsageState}}</td>
-                            <!-- <td>
-                                <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                    'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                                <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                            </td> -->
                             <td>
-                                <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                                <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> -->
-                                <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> -->
                                 <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i>
                             </td>
                         </tr>
-                        <!-- </ng-template> -->
                     </tbody>
                 </nz-table>
             </div>
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 27d1c17c..5e5495e2 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
@@ -15,15 +15,7 @@ import { Title } from '@angular/platform-browser';
 })
 export class OnboardVnfVmComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
-  //url
-  url = {
-    // ns: 'http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content',
-    // vnf: 'http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content',
-    // pnf: 'http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content'
-    ns: 'https://jsonplaceholder.typicode.com/posts/',
-    vnf: 'https://jsonplaceholder.typicode.com/posts/',
-    pnf: 'https://jsonplaceholder.typicode.com/posts/',
-  };
+  
   // delete Modal
   confirmModal: NzModalRef; 
   nsdInfoId = '';
@@ -38,6 +30,18 @@ export class OnboardVnfVmComponent implements OnInit {
   fileListPNF: UploadFile[] = [];
   // onboard initial value
   status = "Onboard Available";
+
+  //url
+  url = {
+    // line up
+    ns: 'http://172.30.3.100:30280/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',
+    vnf: 'http://172.30.3.100:30280/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
+    pnf: 'http://172.30.3.100:30280/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
+    // 本地
+    // ns: 'https://jsonplaceholder.typicode.com/posts/',
+    // vnf: 'https://jsonplaceholder.typicode.com/posts/',
+    // pnf: 'https://jsonplaceholder.typicode.com/posts/',
+  };
   constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { }
 
   //default 默认调用ns数据
@@ -75,26 +79,20 @@ export class OnboardVnfVmComponent implements OnInit {
     console.log(this.url);
     switch (tab) {
       case 'NS':
-        // this.pageIndex = 1;
-        // this.pageSize = 10;
           this.getTableData();
         break
       case 'VNF':
-        // this.pageIndex = 1;
-        // this.pageSize = 10;
           this.getTableVnfData()
         break
       case 'PNF':
-        // this.pageIndex = 1;
-        // this.pageSize = 10;
           this.getTablePnfData()
         break
     }
   }
 
 
-  //before put create--Drag and drop files to the page before uploading
-      requestBody = {
+  //before put 创建--上传之前将文件拖拽到页面时
+    requestBody = {
            "userDefinedData": {
                 "additionalProp1": "string",
                 "additionalProp2": "string",
@@ -106,12 +104,12 @@ export class OnboardVnfVmComponent implements OnInit {
   beforeUploadNS = (file: UploadFile): boolean => {
     this.fileListNS.push(file);
     console.log('beforeUpload');
-      this.myhttp.getCreatensData("createNetworkServiceData",this.requestBody)//on-line
-      // this.myhttp.getCreatensData("creatensDataNS")  //local
+      // this.myhttp.getCreatensData("createNetworkServiceData",requestBody)//线上
+      this.myhttp.getCreatensData("creatensDataNS",this.requestBody)  //本地
         .subscribe((data) => {
-          console.log("Data returned after dragging a file NS-->", data);
+          console.log("拖拽文件后返回的数据NS-->", data);
           this.nsdInfoId = data["id"];
-          console.log("Data returned after dragging a fileid-->",this.nsdInfoId);
+          console.log("拖拽文件后返回的数据的id-->",this.nsdInfoId);
         }, (err) => {
           console.log(err);
         })
@@ -122,12 +120,12 @@ export class OnboardVnfVmComponent implements OnInit {
   beforeUploadVNF = (file: UploadFile): boolean => {
     this.fileListVNF.push(file);
     console.log('beforeUpload');
-      this.myhttp.getCreatensData("createVnfData",this.requestBody)//on-line
-      // this.myhttp.getCreatensData("creatensDataVNF") //local
+      // this.myhttp.getCreatensData("createVnfData",requestBody)//线上
+      this.myhttp.getCreatensData("creatensDataVNF",this.requestBody) //本地
         .subscribe((data) => {
-          console.log("Data returned after dragging a fileVNF-->", data);
+          console.log("拖拽文件后返回的数据VNF-->", data);
           this.vnfPkgId = data["id"];
-          console.log("Data returned after dragging a file id-->",this.vnfPkgId);
+          console.log("拖拽文件后返回的数据的id-->",this.vnfPkgId);
         }, (err) => {
           console.log(err);
         })
@@ -138,12 +136,12 @@ export class OnboardVnfVmComponent implements OnInit {
   beforeUploadPNF = (file: UploadFile): boolean => {
     this.fileListPNF.push(file);
     console.log('beforeUpload');
-      this.myhttp.getCreatensData("createPnfData",this.requestBody)  //on-line
-      // this.myhttp.getCreatensData("creatensDataPNF")  //local
+      // this.myhttp.getCreatensData("createPnfData",requestBody)  //线上
+      this.myhttp.getCreatensData("creatensDataPNF",this.requestBody)  //本地
         .subscribe((data) => {
-          console.log("Data returned after dragging a file PNF-->", data);
+          console.log("拖拽文件后返回的数据PNF-->", data);
           this.pnfdInfoId = data["id"];
-          console.log("Data returned after dragging a file id-->",this.pnfdInfoId);
+          console.log("拖拽文件后返回的数据的id-->",this.pnfdInfoId);
         }, (err) => {
           console.log(err);
         })
@@ -201,7 +199,12 @@ export class OnboardVnfVmComponent implements OnInit {
 
     // this.nsuploading = true;
     // You can use any AJAX library you like
-    const req = new HttpRequest('POST', url, formData, {
+    // const req = new HttpRequest('POST', url, formData, {
+    //   reportProgress: true,
+    //   withCredentials: true
+    // });
+    // line PUT
+    const req = new HttpRequest('PUT', url, formData, {
       reportProgress: true,
       withCredentials: true
     });
@@ -243,9 +246,6 @@ changeUploadingSta(tab) {
     this.myhttp.getOnboardTableData()
     .subscribe((data) => {
       console.log(data)
-      // this.total = data["body"].length; //body length
-      console.log( this.total)
-      // this.sdData = data.body.tableList;
       this.vfcData = data;
       console.log(typeof this.vfcData)
       console.log("NSlist-vfc-->",data)
@@ -258,7 +258,6 @@ changeUploadingSta(tab) {
       console.log('NSlist-sdc-->',data)
       this.sdcData = data;
       this.tableData = this.MergeArray(this.vfcData, this.sdcData)
-      // this.tableData = this.vfcData.concat(this.sdcData)
     }, (err) => {
      console.log(err);
     })
@@ -266,12 +265,9 @@ changeUploadingSta(tab) {
 
   // 获取vnf列表
   getTableVnfData() {
-
     this.myhttp.getOnboardTableVnfData()
       .subscribe((data) => {
         console.log("vnfList-->", data);
-        // this.total = data["body"]; //body length
-        // console.log( this.total)
         this.vfcData = data;
         console.log("vnfList-vfc-->",data)
       }, (err) => {
@@ -283,7 +279,6 @@ changeUploadingSta(tab) {
       .subscribe((data) => {
         console.log('vnfList-sdc-->', data)
         this.sdcData = data;
-        // this.tableData = this.vfcData.concat(this.sdcData)
         this.tableData = this.MergeArray(this.vfcData, this.sdcData)
       }, (err) => {
         console.log(err);
@@ -292,7 +287,6 @@ changeUploadingSta(tab) {
 
   // 获取pnf列表
   getTablePnfData() {
-    
     this.myhttp.getOnboardTablePnfData()
       .subscribe((data) => {
         console.log("pnfList-->", data);
@@ -302,6 +296,7 @@ changeUploadingSta(tab) {
         console.log(err);
       })
   }
+
   /* onboard  上传按钮 */
   // ns onboard
  
@@ -320,7 +315,6 @@ changeUploadingSta(tab) {
       nzContent: 'Package Onboard Failed!'
     });
   }
-
   updataNsService(id) {
     console.log(id);
     let requestBody = {
@@ -361,7 +355,6 @@ changeUploadingSta(tab) {
     })
   }
 
-
   // pnf onboard ?
   updataPnfService(id) {
     console.log('pnf',id);