diff options
Diffstat (limited to 'usecaseui-portal/src/app')
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); + }) } - } |