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';
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: NZ_I18N, useValue: en_US },
MyhttpService,
+ onboardService,
networkHttpservice
],
declarations: [
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}
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';
--- /dev/null
+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;
+ }
+}
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>
+
+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',
})
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;
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);
+ })
}
-
}
Code Review / usecase-ui.git / commitdiff