update NS/VNF package management function

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

6 files changed, 442 insertions, 60 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 7f77bd81..561da478 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -46,6 +46,7 @@ import { PieComponent } from './components/charts/pie/pie.component';
 import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@angular/common';
 // 自定义服务
 import { MyhttpService } from './myhttp.service';
+import { onboardService } from './onboard.service';
 import { networkHttpservice } from './networkHttpservice.service';
 import { PerformanceDetailsComponent } from './components/performance-details/performance-details.component';
 
@@ -54,6 +55,7 @@ import { PerformanceDetailsComponent } from './components/performance-details/pe
     { provide: LocationStrategy, useClass: HashLocationStrategy },
     { provide: NZ_I18N, useValue: en_US },
     MyhttpService,
+    onboardService,
     networkHttpservice 
   ],
   declarations: [
diff --git a/usecaseui-portal/src/app/dataInterface.ts b/usecaseui-portal/src/app/dataInterface.ts
index fe42594e..954d6804 100644
--- a/usecaseui-portal/src/app/dataInterface.ts
+++ b/usecaseui-portal/src/app/dataInterface.ts
@@ -31,8 +31,23 @@ interface servicesTableData {
     tableList:string[]
 }
 
+interface creatensData {
+    total:number,
+    tableList:string[]
+}
+
 interface onboardTableData {
     total:number,
     tableList:string[]
 }
-export {homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData}
+
+interface onboardDataVNF {
+    total:number,
+    tableList:string[]
+}
+
+interface onboardDataPNF {
+    total:number,
+    tableList:string[]
+}
+export {homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF}
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
index 958bc741..00e6bc42 100644
--- a/usecaseui-portal/src/app/myhttp.service.ts
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import { homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData} from './dataInterface';
+import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF } from './dataInterface';
 
 
 
diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts
new file mode 100644
index 00000000..1cf1e359
--- /dev/null
+++ b/usecaseui-portal/src/app/onboard.service.ts
@@ -0,0 +1,173 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { onboardTableData, onboardDataVNF, onboardDataPNF } from './dataInterface';
+
+@Injectable()
+export class onboardService {
+
+  constructor(private http: HttpClient) { }
+    
+//   baseUrl = "./assets/json";
+//   url = {
+   
+//     // 数据列表
+//     onboardTableData: this.baseUrl + "/onboardTableData.json",
+//     onboardDataVNF: this.baseUrl + "/onboardDataVNF.json",
+//     onboardDataPNF: this.baseUrl + "/onboardDataPNF.json",
+
+//     //创建nspackages
+//     creatensData: this.baseUrl + "/creatensData.json",
+    
+//     deleteService: this.baseUrl + "/deleteService.json?",
+
+//     // Delete ns package
+//     deleteNspack: this.baseUrl + "/deleteNspack.json",
+//     // download ns package
+//     downloadNsData: this.baseUrl + "/downloadData.json",
+//   }
+
+  // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1';
+ 
+  baseUrl = '/api/usecaseui/server/v1';
+  url={
+    // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0",
+    // homeLineData:this.baseUrl + "/...........",
+    // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx",
+    // servicesTableData:this.baseUrl + "/xxxxxxxx.json",
+    // onboardTableData:this.baseUrl + "/xxxxxxx.json",
+    
+    // 数据列表
+    onboardTableData: this.baseUrl + "/uui-lcm/ns-packages",
+    onboardDataVNF: this.baseUrl + "/uui-lcm/vnf-packages",
+    onboardDataPNF: this.baseUrl + "/uui-lcm/pnf-packages",
+
+    //创建nspackages
+    // creatensData: this.baseUrl + "/creatensData.json",
+    
+    // deleteService: this.baseUrl + "/deleteService.json?",
+
+    // Delete ns package
+    deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage",
+    // download ns package
+    downloadNsData: this.baseUrl + "/downloadData.json/uui-lcm/downLoadNsPackage",
+  }
+
+//   创建ns数据
+//   getCreatensData(paramsObj):Observable<HttpResponse<creatensData>>{
+//     let params = new HttpParams({fromObject:paramsObj});
+//     return this.http.get<creatensData>(this.url.creatensData,{observe:'response',params});
+//     // return this.http.post<any>(this.url.createService,requestBody);
+//   }
+
+//   getCreatensData() {
+//     return this.http.get(this.url.creatensData);
+//   }
+  // onboard NS Data
+  getOnboardTableData(paramsObj): Observable<HttpResponse<onboardTableData>> {
+    // let params = new HttpParams({ fromObject: paramsObj });
+    // return this.http.get<onboardTableData>(this.url.onboardTableData, { observe: 'response', params });
+    return this.http.get<any>(this.url["onboardTableData"]);
+  }
+  // Ns Id 
+  getNsIdData(paramsObj): Observable<HttpResponse<onboardDataVNF>> {
+    // let params = new HttpParams({ fromObject: paramsObj });
+    // return this.http.get<onboardDataVNF>(this.url.onboardDataVNF, { observe: 'response', params });
+    return this.http.post<any>(this.url["onboardDataVNF"],{});
+  }
+
+  // Delete ns package
+  deleteNsIdData(paramsObj): Observable<HttpResponse<any>> {
+    let params = new HttpParams({ fromObject: paramsObj });
+    // return this.http.get<any>(this.url.deleteNspack, { observe: 'response', params });
+    return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
+  }
+  // download  
+  downloadNsData(paramsObj): Observable<HttpResponse<any>> {
+    console.log(66,paramsObj)
+    let params = new HttpParams({ fromObject: paramsObj });
+    return this.http.get<any>(this.url.downloadNsData, { observe: 'response', params });
+  }
+  // onboard VNF Data
+  getOnboardTableVnfData(paramsObj): Observable<HttpResponse<onboardDataVNF>> {
+    // let params = new HttpParams({ fromObject: paramsObj });
+    return this.http.post<any>(this.url.onboardDataVNF, paramsObj);
+  }
+
+  // onboard PNF Data
+  getOnboardTablePnfData(paramsObj): Observable<HttpResponse<onboardDataPNF>> {
+    let params = new HttpParams({ fromObject: paramsObj });
+    return this.http.post<any>(this.url.onboardDataPNF, paramsObj);
+  }
+  testObservable() {
+    let myObservable = new Observable((observer) => {
+      observer.next(1);
+      observer.next((n) => {
+        console.log(3 + n);
+      })
+      setTimeout(() => {
+        observer.next(66666)
+      }, 100)
+      observer.next(() => {
+        setTimeout((n) => {
+          console.log("9999---" + n);
+        }, 10)
+      })
+      // observer.error(2);
+      // observer.complete();
+    });
+
+    myObservable.subscribe((e) => {
+      if (typeof e == "function") {
+        e(5)
+      }
+      console.log(e);
+    }, (err) => {
+      console.log(err);
+    }, () => {
+      console.log(555);
+    })
+  }
+
+  //---------------------------------------------------------------------------------
+
+  // // 服务详情数据 
+  // getInstanceDetails(id){
+  //   let url = this.baseUrl + "/detailsData.json?id=" + id;
+  //   return this.http.get<instanceDetail>(url);
+  // }
+
+  // 删除接口
+//   deleteInstance(obj) {
+//     let httpOptions = {
+//       headers: new HttpHeaders({
+//         'Content-Type': 'application/json',
+//         'Accept': 'application/json',
+//         'Authorization': 'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA=='
+//       }),
+//       body: {
+//         'globalSubscriberId': obj.globalSubscriberId,
+//         'serviceType': obj.serviceType
+//       }
+//     };
+//     return this.http.get<any>(this.url.deleteService);  //本地模拟
+//     // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
+//   }
+
+  // 时间格式化 毫秒转正常值
+  dateformater(vmstime) {
+    if (!vmstime) {
+      return ''
+    }
+    let mstime = Number((vmstime + '').slice(0, 13));
+    let time = new Date(mstime);
+    let year = time.getFullYear();
+    let month = time.getMonth() + 1;
+    let day = time.getDate();
+    let hours = time.getHours();
+    let minutes = time.getMinutes();
+    let seconds = time.getSeconds();
+    let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+    return formattime;
+  }
+}
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);
+    })
   }
-
 }