From 47f84a78ce57a122cabbcdba417a6b6acc3eb54c Mon Sep 17 00:00:00 2001 From: zhangab Date: Thu, 8 Nov 2018 18:03:53 +0800 Subject: Fix ns/vnf list display function Change-Id: I38d2e2c493311c83a8c2da18367f1b7447a14dab Issue-ID: USECASEUI-159 Signed-off-by: zhangab --- .../onboard-vnf-vm/onboard-vnf-vm.component.css | 1 + .../onboard-vnf-vm/onboard-vnf-vm.component.html | 373 ++++++++++----------- .../onboard-vnf-vm/onboard-vnf-vm.component.less | 32 ++ .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 173 +++++++--- 4 files changed, 332 insertions(+), 247 deletions(-) (limited to 'usecaseui-portal/src/app/services/onboard-vnf-vm') diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css index a1cc6455..f6a13fd0 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -57,3 +57,4 @@ hr { .list nz-table tbody td i.anticon:hover { color: #147dc2; } + 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 c552ba73..82d0fc51 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 @@ -34,202 +34,181 @@ --> - - -
-

Onboard {{tabTitle}}

- -

- -

-

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 - - Version - Onboarding State - Operational State - Usage State - Operation button - - - - - {{item.nsdId}} - {{item.uuid}} - - {{item.nsdName}} - {{item.name}} - - - {{item.nsdVersion}} - {{ item.version }} - - {{item.nsdOnboardingState}} - - - {{item.nsdOperationalState}} - {{item.nsdUsageState}} - - - - - - - - - - -
- -
-

Onboard {{tabTitle}}

- -

- -

-

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 - Version - Onboarding State - usageState - Operational State - Operation button - - - - - - - {{item.id}} - {{item.uuid}} - {{item.vnfProductName}} - {{item.name}} - {{item.vnfdVersion}} - {{item.version}} - {{item.onboardingState}} - {{item.usageState}} - {{item.operationalState}} - - - - - - - - - - - -
- -
-

Onboard {{tabTitle}}

- -

- -

-

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 - Version - Onboarding State - usageState - Operation button - - - - - - - {{item.id}} - {{item.pnfdName}} - {{item.pnfdVersion}} - {{item.pnfdOnboardingState}} - {{item.pnfdUsageState}} - - - - - - - - - - - -
- + + +
+

Onboard {{tabTitle}}

+ +

+ +

+

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 + + Version + Onboarding State + Operational State + Usage State + Operation button + + + + + {{item.nsdId}} + {{item.uuid}} + + {{item.nsdName}} + {{item.name}} + + + {{item.nsdVersion}} + {{ item.version }} + + {{item.nsdOnboardingState}} + + + {{item.nsdOperationalState}} + {{item.nsdUsageState}} + + + + + + + + + + + + +
+ +
+

Onboard {{tabTitle}}

+ +

+ +

+

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 + Version + Onboarding State + usageState + Operational State + Operation button + + + + + + + {{item.id}} + {{item.uuid}} + {{item.vnfProductName}} + {{item.name}} + {{item.vnfdVersion}} + {{item.version}} + {{item.onboardingState}} + {{item.usageState}} + {{item.operationalState}} + + + + + + + + + + + + +
+ +
+

Onboard {{tabTitle}}

+ +

+ +

+

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 + Version + Onboarding State + usageState + Operation button + + + + + + + {{item.id}} + {{item.pnfdName}} + {{item.pnfdVersion}} + {{item.pnfdOnboardingState}} + {{item.pnfdUsageState}} + + + + + + + + + + + + +
+ diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index ab118737..099383a2 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -9,6 +9,38 @@ hr { background-color: #dce1e7; margin-bottom: 20px; } +.switch_btn { + position: absolute; + right: 6%; + top: 18px; + border: 1px solid #3fa8eb; + width: 8%; + border-radius: 10px; + margin-bottom: 18px; + span { + display: block; + float: left; + text-align: center; + width: 50%; + color: #3fa8eb; + font-weight: 700; + cursor: pointer; + } + span:first-child { + border-radius: 10px 0 0 10px; + } + span:last-child { + border-radius: 0 10px 10px 0; + } + span.left_b { + border-left: 1px solid #3fa8eb; + } + span.active { + color: #fff; + background: #3fa8eb; + } +} + .list { background-color: #fff; border-radius: 5px; 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 650f2162..794df742 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 @@ -3,7 +3,7 @@ import { Component, OnInit, HostBinding } from '@angular/core'; // import { MyhttpService } from '../../myhttp.service'; import { onboardService } from '../../onboard.service'; import { slideToRight } from '../../animates'; -import { NzMessageService, UploadFile } from 'ng-zorro-antd'; +import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; import { filter } from 'rxjs/operators'; import { Title } from '@angular/platform-browser'; @@ -24,6 +24,8 @@ export class OnboardVnfVmComponent implements OnInit { vnf: 'https://jsonplaceholder.typicode.com/posts/', pnf: 'https://jsonplaceholder.typicode.com/posts/', }; + // delete Modal + confirmModal: NzModalRef; nsdInfoId = ''; vnfPkgId =''; pnfdInfoId = ''; @@ -32,7 +34,7 @@ export class OnboardVnfVmComponent implements OnInit { fileListNS: UploadFile[] = []; fileListVNF: UploadFile[] = []; fileListPNF: UploadFile[] = []; - constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title) { } + constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService) { } //default 默认调用ns数据 ngOnInit() { @@ -53,7 +55,7 @@ export class OnboardVnfVmComponent implements OnInit { tabs = ['NS', 'VNF', 'PNF']; isVisible = false; - isOkLoading = false; + isOkLoading = false; showModal(): void { this.isVisible = true; } @@ -66,6 +68,7 @@ export class OnboardVnfVmComponent implements OnInit { handleTabChange(tab,nsdInfoId,url) { this.tabTitle = tab; console.log(tab); + console.log(nsdInfoId); console.log(this.url); switch (tab) { case 'NS': @@ -113,7 +116,7 @@ export class OnboardVnfVmComponent implements OnInit { } //vnf beforeUpload - beforeUploadVNF = (file: UploadFile,tab): boolean => { + beforeUploadVNF = (file: UploadFile): boolean => { this.fileListVNF.push(file); console.log('beforeUpload'); // this.myhttp.getCreatensData("createVnfData",requestBody)//线上 @@ -129,7 +132,7 @@ export class OnboardVnfVmComponent implements OnInit { } // //pnf eforeUpload - beforeUploadPNF = (file: UploadFile,tab): boolean => { + beforeUploadPNF = (file: UploadFile): boolean => { this.fileListPNF.push(file); console.log('beforeUpload'); // this.myhttp.getCreatensData("createPnfData",requestBody) //线上 @@ -143,27 +146,25 @@ export class OnboardVnfVmComponent implements OnInit { }) return false; } - - //拖拽后点击上传按钮 onClick (tab) { switch (tab) { case 'NS': console.log(this.nsdInfoId); // this.handleUpload('http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content'); - this.handleUpload(this.url.ns,tab); + this.handleUpload(this.url.ns, tab); this.getTableData(); break case 'VNF': console.log(this.vnfPkgId); // this.handleUpload('http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content'); - this.handleUpload(this.url.vnf,tab); + this.handleUpload(this.url.vnf, tab); this.getTableVnfData() break case 'PNF': console.log(this.pnfdInfoId); // this.handleUpload('http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content'); - this.handleUpload(this.url.pnf,tab); + this.handleUpload(this.url.pnf, tab); this.getTablePnfData(); break } @@ -174,26 +175,26 @@ export class OnboardVnfVmComponent implements OnInit { console.log('startUpload') const formData = new FormData(); // tslint:disable-next-line:no-any - switch (tab) { - case 'NS': - this.fileListNS.forEach((file: any) => { - formData.append('files[]', file); - }); - break - case 'VNF': - this.fileListVNF.forEach((file: any) => { - formData.append('files[]', file); - }); - break - case 'PNF': - this.fileListPNF.forEach((file: any) => { - formData.append('files[]', file); - }); - break + switch(tab) { + case "NS": + this.fileListNS.forEach((file: any) => { + formData.append('files[]', file); + }); + break + case "VNF": + this.fileListVNF.forEach((file: any) => { + formData.append('files[]', file); + }); + break + case "PNF": + this.fileListPNF.forEach((file: any) => { + formData.append('files[]', file); + }); + break } this.uploading = true; // You can use any AJAX library you like - const req = new HttpRequest('POST', url, formData, { + const req = new HttpRequest('PUT', url, formData, { reportProgress: true, withCredentials: true }); @@ -242,7 +243,8 @@ export class OnboardVnfVmComponent implements OnInit { .subscribe((data) => { console.log('NSlist-sdc-->',data) this.sdcData = data.body; - this.tableData = this.vfcData.concat(this.sdcData) + this.tableData = this.MergeArray(this.vfcData, this.sdcData) + // this.tableData = this.vfcData.concat(this.sdcData) }, (err) => { console.log(err); }) @@ -254,13 +256,13 @@ export class OnboardVnfVmComponent implements OnInit { let paramsObj = { pageIndex: this.pageIndex, pageSize: this.pageSize, - nameSort: this.sortValue + // nameSort: this.sortValue } this.myhttp.getOnboardTableVnfData(paramsObj) .subscribe((data) => { console.log("vnfList-->", data); - // this.total = data["body"].length; //body length + // this.total = data["body"]; //body length // console.log( this.total) this.vfcData = data.body; // this.tableData = data.body; @@ -272,9 +274,10 @@ export class OnboardVnfVmComponent implements OnInit { // sdc this.myhttp.getSDC_VNFTableData() .subscribe((data) => { - console.log('vnfList-sdc-->',data) + console.log('vnfList-sdc-->', data) this.sdcData = data; - this.tableData = this.vfcData.concat(this.sdcData) + // this.tableData = this.vfcData.concat(this.sdcData) + this.tableData = this.MergeArray(this.vfcData, this.sdcData) }, (err) => { console.log(err); }) @@ -286,9 +289,9 @@ export class OnboardVnfVmComponent implements OnInit { let paramsObj = { pageIndex: this.pageIndex, pageSize: this.pageSize, - nameSort: this.sortValue + // nameSort: this.sortValue } - + this.myhttp.getOnboardTablePnfData(paramsObj) .subscribe((data) => { console.log("pnfList-->", data); @@ -299,16 +302,13 @@ export class OnboardVnfVmComponent implements OnInit { }) } - - sort(sort: { key: string, value: string }): void { - console.log(sort); - this.sortName = sort.key; - this.sortValue = sort.value; - this.getTableData(); - } + // sort(sort: { key: string, value: string }): void { + // console.log(sort); + // this.sortName = sort.key; + // this.sortValue = sort.value; + // this.getTableData(); + // } -//----------------------------------------------------------------------------------- - //选择条数 // searchNsData(reset: boolean = false) { // console.log('dddd',reset) @@ -320,16 +320,17 @@ export class OnboardVnfVmComponent implements OnInit { // ns onboard updataNsService(id) { console.log(id); + let requestBody = { "csarId": id } this.myhttp.getNsonboard(requestBody) .subscribe((data) => { console.log('onboard ns sdc', data); + this.getTableData(); }, (err) => { console.log(err); }) - } // searchVnfData(reset: boolean = false) { @@ -342,10 +343,11 @@ export class OnboardVnfVmComponent implements OnInit { console.log(id) let requestBody = { "csarId": id - } + } this.myhttp.getVnfonboard(requestBody) .subscribe((data) => { console.log('onboard vnf sdc', data); + this.getTableVnfData(); }, (err) => { console.log(err); }) @@ -364,6 +366,46 @@ export class OnboardVnfVmComponent implements OnInit { //-------------------------------------------------------------------------------- /* delete 删除按钮 */ + // ns + showConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deleteNsService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } + + //vnf + showVnfConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deleteVnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } + //vnf + showPnfConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deletePnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } //delete nsItem deleteNsService(index,pkgid) { console.log(pkgid) @@ -376,8 +418,8 @@ export class OnboardVnfVmComponent implements OnInit { }) console.log(index) this.tableData.splice(index, 1) - console.log(this.tableData.length) - // this.getTableData() + console.log('数组长度',this.tableData.length) + this.getTableData() } //delete vnfItem @@ -412,9 +454,7 @@ export class OnboardVnfVmComponent implements OnInit { this.getTablePnfData() } - -//-------------------------------------------------------------------------------------- - //download 下载 + //下载download // downloadNsService(id) { // console.log('download') // console.log(id) @@ -436,5 +476,38 @@ export class OnboardVnfVmComponent implements OnInit { // }) // } + // downloadPnfService(id) { + // console.log('downloadPnf') + // console.log(id) + // this.myhttp.downloadNsData(id) + // .subscribe((data) => { + // console.log(44, data); + // }, (err) => { + // console.log(err); + // }) + // } + //合并并去重 + MergeArray(arr1, arr2) { + var _arr = new Array(); + for (var i = 0; i < arr1.length; i++) { + if (arr1[i] != "") { + _arr.push(arr1[i]); + } + } + for (var i = 0; i < arr2.length; i++) { + var flag = true; + for (var j = 0; j < arr1.length; j++) { + // 根据vfc列表arr1的id和sdc列表arr2的uuid去重 + if (arr2[i].uuid == arr1[j].id) { + flag = false; + break; + } + } + if (flag && arr2[i] != "") { + _arr.push(arr2[i]); + } + } + return _arr; + } } -- cgit 1.2.3-korg