From 6c9a710b24ff6162ac20be857833f17649da7264 Mon Sep 17 00:00:00 2001 From: zhangab Date: Thu, 1 Nov 2018 10:32:28 +0800 Subject: update NS/VNF package management function Change-Id: Ieb16fff9995e00d8f46b10e59c0b65daa0ef8855 Issue-ID: USECASEUI-156 Signed-off-by: zhangab --- usecaseui-portal/src/app/app.module.ts | 2 + usecaseui-portal/src/app/dataInterface.ts | 17 +- usecaseui-portal/src/app/myhttp.service.ts | 2 +- usecaseui-portal/src/app/onboard.service.ts | 173 ++++++++++++++++++++ .../onboard-vnf-vm/onboard-vnf-vm.component.html | 127 ++++++++++----- .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 181 +++++++++++++++++++-- 6 files changed, 442 insertions(+), 60 deletions(-) create mode 100644 usecaseui-portal/src/app/onboard.service.ts (limited to 'usecaseui-portal') 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>{ +// let params = new HttpParams({fromObject:paramsObj}); +// return this.http.get(this.url.creatensData,{observe:'response',params}); +// // return this.http.post(this.url.createService,requestBody); +// } + +// getCreatensData() { +// return this.http.get(this.url.creatensData); +// } + // onboard NS Data + getOnboardTableData(paramsObj): Observable> { + // let params = new HttpParams({ fromObject: paramsObj }); + // return this.http.get(this.url.onboardTableData, { observe: 'response', params }); + return this.http.get(this.url["onboardTableData"]); + } + // Ns Id + getNsIdData(paramsObj): Observable> { + // let params = new HttpParams({ fromObject: paramsObj }); + // return this.http.get(this.url.onboardDataVNF, { observe: 'response', params }); + return this.http.post(this.url["onboardDataVNF"],{}); + } + + // Delete ns package + deleteNsIdData(paramsObj): Observable> { + let params = new HttpParams({ fromObject: paramsObj }); + // return this.http.get(this.url.deleteNspack, { observe: 'response', params }); + return this.http.delete(this.url["deleteNspack"], { observe: 'response', params }); + } + // download + downloadNsData(paramsObj): Observable> { + console.log(66,paramsObj) + let params = new HttpParams({ fromObject: paramsObj }); + return this.http.get(this.url.downloadNsData, { observe: 'response', params }); + } + // onboard VNF Data + getOnboardTableVnfData(paramsObj): Observable> { + // let params = new HttpParams({ fromObject: paramsObj }); + return this.http.post(this.url.onboardDataVNF, paramsObj); + } + + // onboard PNF Data + getOnboardTablePnfData(paramsObj): Observable> { + let params = new HttpParams({ fromObject: paramsObj }); + return this.http.post(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(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(this.url.deleteService); //本地模拟 +// // return this.http.delete(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. -->

Onboard VNF

-
-
- - - - NO - Name - Type - Version - Status - Action - - - - - - {{i+1}} - {{item.name}} - {{item.type}} - {{item.version}} - - {{item.status}} - - - - - - - - - - -
\ No newline at end of file + +

+ +

+

Click or drag file to this area to upload

+

Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files

+ + + + + + + + +
+ + + + NO + Name + Type + Version + Onboarding State + Operational State + + + + + + + {{item.id}} + {{item.name}} + {{item.type}} + {{item.version}} + + {{item.status}} + + + + + + + + + + + + +
+ + + 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); + }) } - } -- cgit 1.2.3-korg