update NS/VNF package management function

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

2 files changed, 250 insertions, 58 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 d5286a3a..9ada2aef 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
@@ -14,48 +14,85 @@
     limitations under the License.
 -->
 <h3 class="title"> Onboard VNF </h3>
-<hr>
-<div class="list">
-    <nz-table #nzTable [nzData]="tableData" 
-        nzShowSizeChanger
-        [nzFrontPagination]="false" 
-        [nzShowQuickJumper]="true" 
-        [nzPageSizeOptions]="[5,10,15,20]" 
-        [nzTotal]= 'total'
-        [(nzPageSize)]="pageSize" 
-        [(nzPageIndex)]='pageIndex'
-        [nzLoading]="loading"
-        nzSize="middle"
-        (nzPageIndexChange)="searchData()"
-        (nzPageSizeChange)="searchData(true)">
-        <thead (nzSortChange)="sort($event)" nzSingleSort>
-            <tr>
-            <th nzWidth="5%">NO</th>
-            <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
-            <th nzWidth="20%">Type</th>
-            <th nzWidth="15%">Version</th>
-            <th nzWidth="20%">Status</th>
-            <th nzWidth="15%">Action</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.name}}</td>
-                <td>{{item.type}}</td>
-                <td>{{item.version}}</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-delete" (click)="deleteService()"></i>
-                </td>
-            </tr>
-            <!-- </ng-template> -->
-        </tbody>
-    </nz-table>
-</div>
\ No newline at end of file
+<nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+    <p class="ant-upload-drag-icon">
+      <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+    </p>
+    <p class="ant-upload-text">Click or drag file to this area to upload</p>
+    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+</nz-upload>
+<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0"
+    style="margin-top: 16px">
+    {{ uploading ? 'Uploading' : 'Start Upload' }}
+</button>
+<!-- <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)">
+                <div class="list">
+                        <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)="searchData()"
+                            (nzPageSizeChange)="searchData(true)">
+                            <thead (nzSortChange)="sort($event)" nzSingleSort>
+                                <tr>
+                                <th nzWidth="5%">NO</th>
+                                <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+                                <th nzWidth="20%">Type</th>
+                                <th nzWidth="20%">Version</th>
+                                <th nzWidth="15%">Onboarding State</th>
+                                <th nzWidth="20%">Operational State</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.name}}</td>
+                                    <td>{{item.type}}</td>
+                                    <td>{{item.version}}</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.uuid"></i>
+                                        <i class="anticon anticon-download" (click)="downloadService(item.id)"></i>
+                                        <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                                    </td>
+                                </tr>
+                                <!-- </ng-template> -->
+                            </tbody>
+                        </nz-table>
+                    </div>
+        </nz-tab>
+    </nz-tabset>
+
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 c42b3ce3..77befe17 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
@@ -1,6 +1,10 @@
+import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { MyhttpService } from '../../myhttp.service';
+// import { MyhttpService } from '../../myhttp.service';
+import { onboardService } from '../../onboard.service';
 import { slideToRight } from '../../animates';
+import { NzMessageService, UploadFile } from 'ng-zorro-antd';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -10,37 +14,169 @@ import { slideToRight } from '../../animates';
 })
 export class OnboardVnfVmComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
-  constructor(private myhttp: MyhttpService) { }
+
+  uploading = false;
+  fileList: UploadFile[] = [];
+  constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService) { }
 
   ngOnInit() {
     this.getTableData();
   }
 
+  beforeUpload = (file: UploadFile): boolean => {
+    this.fileList.push(file);
+    console.log('beforeUpload')
+    // this.myhttp.getCreatensData()
+    //   .subscribe((data) => {
+    //     console.log(33, data);
+    //   }, (err) => {
+    //     console.log(err);
+    //   })
+
+    return false;
+  }
 
+  handleUpload(): void {
+    console.log('startUpload')
+    const formData = new FormData();
+    // tslint:disable-next-line:no-any
+    this.fileList.forEach((file: any) => {
+      formData.append('files[]', file);
+    });
+    this.uploading = true;
+    // You can use any AJAX library you like
+    const req = new HttpRequest('POST', 'https://jsonplaceholder.typicode.com/posts/', formData, {
+      reportProgress: true,
+      withCredentials: true
+    });
+    this.http
+      .request(req)
+      .pipe(filter(e => e instanceof HttpResponse))
+      .subscribe(
+        (event: {}) => {
+          this.uploading = false;
+          this.getTableData();
+          console.log('upload successfully')
+          this.msg.success('upload successfully.');
+        },
+        err => {
+          this.uploading = false;
+          console.log('upload failed')
+          this.msg.error('upload failed.');
+        }
+      );
+  }
   //表格数据
   tableData = [];
+  sdData = [];
+  vfcData = [];
   pageIndex = 1;
   pageSize = 10;
   total = 100;
   loading = false;
   sortName = null;
   sortValue = null;
-  getTableData(){
+  tabs = ['NS', 'VNF', 'PNF'];
+  
+  isVisible = false;
+  isOkLoading = false;
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleCancel(): void {
+    this.isVisible = false;
+  }
+  // getCreatensData() {
+
+  // }
+  // 获取NS列表
+  getTableData() {
     // 查询参数: 当前页码，每页条数，排序方式
     let paramsObj = {
-      pageIndex:this.pageIndex,
-      pageSize:this.pageSize,
-      nameSort:this.sortValue
+      pageIndex: this.pageIndex,
+      pageSize: this.pageSize,
+      nameSort: this.sortValue
     }
+
     this.myhttp.getOnboardTableData(paramsObj)
-      .subscribe((data)=>{
-        console.log(data);
+      .subscribe((data) => {
+        console.log(99, data);
+        this.total = data.body.total;
+        this.sdData = data.body.tableList;
+        console.log(this.sdData);
+      }, (err) => {
+        console.log(err);
+      })
+
+    this.myhttp.getOnboardTablePnfData(paramsObj)
+      .subscribe((data) => {
+        console.log(222, data);
+        this.total = data.body.total;
+        this.vfcData = data.body.tableList;
+        console.log(this.vfcData);
+        this.tableData = this.vfcData.concat(this.sdData)
+        console.log(99, this.tableData)
+      }, (err) => {
+        console.log(err);
+      })
+  }
+
+  // 获取VNF列表
+  getTableVnfData() {
+    // 查询参数: 当前页码，每页条数，排序方式
+    let paramsObj = {
+      pageIndex: this.pageIndex,
+      pageSize: this.pageSize,
+      nameSort: this.sortValue
+    }
+
+    this.myhttp.getOnboardTableVnfData(paramsObj)
+      .subscribe((data) => {
+        console.log(222, data);
         this.total = data.body.total;
         this.tableData = data.body.tableList;
-      },(err)=>{
+      }, (err) => {
         console.log(err);
       })
   }
+
+  // 获取VNF列表
+  getTablePnfData() {
+    // 查询参数: 当前页码，每页条数，排序方式
+    let paramsObj = {
+      pageIndex: this.pageIndex,
+      pageSize: this.pageSize,
+      nameSort: this.sortValue
+    }
+
+    this.myhttp.getOnboardTablePnfData(paramsObj)
+      .subscribe((data) => {
+        console.log(222, data);
+        this.total = data.body.total;
+        this.tableData = data.body.tableList;
+      }, (err) => {
+        console.log(err);
+      })
+  }
+  // 处理tab切换
+  handleTabChange(tab) {
+    console.log(tab)
+    switch (tab) {
+      case 'NS':
+        // this.tableData = []
+        
+        this.getTableData()
+        break
+      case 'VNF':
+        this.getTableVnfData()
+        break
+      case 'PNF':
+        this.getTablePnfData()
+        break
+    }
+  }
+
   sort(sort: { key: string, value: string }): void {
     console.log(sort);
     this.sortName = sort.key;
@@ -51,11 +187,30 @@ export class OnboardVnfVmComponent implements OnInit {
     console.log(reset)
     this.getTableData();
   }
-  updataService(){
-    console.log("updataService!");
+  // onboard
+  updataService(id) {
+    console.log(id);
   }
-  deleteService(){
+  //delete
+  deleteService(index,pkgid) {
+    console.log(pkgid)
     console.log("deleteService!");
+    this.myhttp.deleteNsIdData(pkgid)
+      .subscribe((data) => {
+        console.log(44, data);
+      }, (err) => {
+        console.log(err);
+      })
+    this.tableData.splice(index, 1)
+  }
+  downloadService(id) {
+    console.log('download')
+    console.log(id)
+    this.myhttp.downloadNsData(id)
+    .subscribe((data) => {
+      console.log(44, data);
+    }, (err) => {
+      console.log(err);
+    })
   }
-
 }