From e83217f0f442f6ad2c376a384b7dcd2232b254bd Mon Sep 17 00:00:00 2001 From: cyuamber Date: Wed, 20 Nov 2019 18:02:21 +0800 Subject: feat: change the main menu to face the nsmf requirement Change-Id: I1c835e2798d91a929fb8aac54ff30229a0b85ee5 Issue-ID: USECASEUI-352 Signed-off-by: cyuamber --- .../onboard-vnf-vm/onboard-vnf-vm.component.css | 67 ++++ .../onboard-vnf-vm/onboard-vnf-vm.component.html | 123 +++++++ .../onboard-vnf-vm/onboard-vnf-vm.component.less | 138 ++++++++ .../onboard-vnf-vm.component.spec.ts | 36 +++ .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 360 +++++++++++++++++++++ 5 files changed, 724 insertions(+) create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts (limited to 'usecaseui-portal/src/app/views/onboard-vnf-vm') diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css new file mode 100644 index 00000000..4e80750c --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -0,0 +1,67 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; +} +.list nz-table tbody td span.onboarding { + font-size: 12px; + color: #147dc2; +} +.list nz-table tbody td span.onboarded { + font-size: 14px; + color: #147dc2; +} +.list nz-table tbody td span.updating { + font-size: 12px; + color: blue; +} +.list nz-table tbody td span.deleting { + font-size: 12px; + color: red; +} +.list nz-table tbody td span.invalid { + font-size: 14px; + color: purple; +} +.list nz-table tbody td i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; +} +.list nz-table tbody td i.anticon:hover { + color: #147dc2; +} +.list nz-table tbody td .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.list nz-table tbody td .fileIcon{ + display: none; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html new file mode 100644 index 00000000..c48d68f9 --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -0,0 +1,123 @@ + + + + + + +
+ +
+
+ +

+ +

+

{{"i18nTextDefine_Click_CSAR_File" | translate}}

+

+ + +
+
+
+
{{"i18nTextDefine_Uploaded_files" | translate}}
+
{{"i18nTextDefine_Nofileuploading" | translate}}
+
+ +
{{file.name}}
+
+ +
+
+ {{"i18nTextDefine_File_upload_completed" | translate}} + {{"i18nTextDefine_File_upload_failed" | translate}} +
+
+ + +
+
+
+
+ + +
+ + + + {{"i18nTextDefine_NO" | translate}} + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_Version" | translate}} + {{"i18nTextDefine_OnboardingState" | translate}} + {{"i18nTextDefine_OperationalState" | translate}} + {{"i18nTextDefine_UsageState" | translate}} + {{"i18nTextDefine_Operationbutton" | translate}} + + + + + {{i+1}} + {{item.nsdName || item.name }} + {{item.nsdVersion || item.version}} + {{item.nsdOnboardingState ? item.nsdOnboardingState : status}} + {{item.nsdOperationalState}} + {{item.nsdUsageState}} + + + + + + + + + {{i+1}} + {{item.vnfProductName || item.name }} + {{item.vnfdVersion || item.version}} + {{item.onboardingState}} + {{item.operationalState}} + {{item.usageState}} + + + + + + + + + {{i+1}} + {{item.pnfdName}} + {{item.pnfdVersion}} + {{item.pnfdOnboardingState}} + {{item.pnfdUsageState}} + + + + + + + +
+ \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less new file mode 100644 index 00000000..f877e1ca --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -0,0 +1,138 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +th{ + background-color: rgba(241,243,244,.9) !important; +} +.list { + padding: 20px; + .listUploadContainer{ + display: flex; + align-items: flex-start; + width: 100%; + height: 30%; + margin-bottom: 1%; + .listupload { + position: relative; + width: 22%; + margin-left: 13%; + .upload{ + position: absolute; + left: 50%; + bottom: -48px; + transform: translateX(-50%); + color: #FFFFFF; + font-size: 13px; + background-color: #3E9BFF; + font-family: ArialMT; + } + } + .listlin { + width: 1%; + margin-left: 10%; + height: 177px; + margin-bottom: 30px; + border-right: 2px solid #EEEEEE; + } + .listfile { + width: 43%; + height: 100%; + margin-left: 10%; + .listFileTitle{ + height: 15%; + padding-bottom: 15px; + color: rgba(66,84,143,1); + font-family: ArialMT; + } + .nouploadfile{ + height: 80%; + width: 100%; + text-align: center; + font-size: 22px; + margin: 5% 0 10px; + } + .listfilebgc { + display: flex; + justify-content: space-around; + align-items: center; + width:100%; + height: 80%; + padding: 5px; + background-color: #fff; + border-radius: 2px; + color: #42548F; + .icon{ + width: 15px; + } + :nth-child(3){ + width: 50%; + } + :nth-child(4){ + width: 5%; + height:100%; + .success{ + color:#7BC7F3!important; + } + .fail{ + color:#fb5c5c!important; + } + } + .color { + color:rgba(66,84,143,1); + span{ + color:rgba(66,84,143,0.7); + } + .progress{ + color:rgba(66,84,143,0.7); + } + } + } + + } + + } + .listContainer{ + height: 69%; + .mask { + top: 0; + left: 0; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.1; + background: black; + z-index: 1049; + } + } + nz-table { + tbody { + td { + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } + } + } + } +} diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts new file mode 100644 index 00000000..51980b8a --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts @@ -0,0 +1,36 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; +import { HttpClientModule } from '@angular/common/http'; +import { NzMessageService, NzModalService } from 'ng-zorro-antd'; + +import { OnboardVnfVmComponent } from './onboard-vnf-vm.component'; +import { onboardService } from '../../core/services/onboard.service'; + +describe('OnboardVnfVmComponent', () => { + let component: OnboardVnfVmComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + schemas: [ + CUSTOM_ELEMENTS_SCHEMA, + NO_ERRORS_SCHEMA + ], + imports: [TranslateModule, HttpClientModule], + declarations: [OnboardVnfVmComponent], + providers: [onboardService, NzMessageService, NzModalService] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OnboardVnfVmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts new file mode 100644 index 00000000..682f48cf --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -0,0 +1,360 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; +import { Component, OnInit, HostBinding, TemplateRef, ViewChild } from '@angular/core'; +import { onboardService } from '../../core/services/onboard.service'; +import { slideToRight } from '../../shared/utils/animates'; +import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; +import { filter } from 'rxjs/operators'; + +@Component({ + selector: 'app-onboard-vnf-vm', + templateUrl: './onboard-vnf-vm.component.html', + styleUrls: ['./onboard-vnf-vm.component.less'], + animations: [slideToRight] +}) +export class OnboardVnfVmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + @ViewChild('notification') notification: any; + + // upload + tabs: string[] = ['NS', 'VNF', 'PNF']; + currentTab: string = 'NS' + fileList: UploadFile[] = []; + uploading: boolean = false; + infoId: string; + display: string = 'block'; + + // table + isSpinning: boolean = false; + nsTableData: any[]; + vnfTableData: any[]; + pnfTableData: any[]; + status: string = "Onboard Available"; + pageIndex: number = 1; + pageSize: number = 10; + + // update or delete + isUpdate: boolean = false; + jobId: string; + + //url + url = { + ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', + vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content', + pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content' + }; + + file: { + name: string, + uid: string, + progress: number, + status: boolean, + success: number + }; + + constructor( + private myhttp: onboardService, + private http: HttpClient, + private msg: NzMessageService, + private modalService: NzModalService + ) { } + + //default Call ns data by default + ngOnInit() { + this.getTableData(); + } + + // Handling tab switching request data + handleTabChange(tab: string): void { + this.currentTab = tab; + this.fileList = []; + this.display = 'block'; + delete this.file; + switch (tab) { + case 'NS': + this.getTableData(); + break + case 'VNF': + this.getTableVnfData() + break + case 'PNF': + this.getTablePnfData() + break + } + } + + //before put create--Drag and drop files to the page before uploading + requestBody = { + "userDefinedData": { + "additionalProp1": "", + "additionalProp2": "", + "additionalProp3": "" + } + } + + beforeUpload = (file: UploadFile): boolean => { + this.fileList.splice(0, 1, file); + let API: string; + if (this.currentTab === 'NS') { + API = 'createNetworkServiceData'; + } else if (this.currentTab === 'VNF') { + API = 'createVnfData'; + } else { + API = 'createPnfData'; + } + this.myhttp.getCreatensData(API, this.requestBody)//on-line + .subscribe((data) => { + this.infoId = data["id"]; + }, (err) => { + console.log(err); + }) + return false; + } + + // Drag and drop and click the upload button + onClick(): void { + this.display = 'none'; + let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : 'pnf') + this.handleUpload(this.url[tab].replace("*_*", this.infoId)); + } + + handleUpload(url: string): void { + const formData = new FormData(); + // tslint:disable-next-line:no-any + this.fileList.forEach((file: any) => { + formData.set('file', file); + }); + this.uploading = true; + this.file = { + name: this.fileList[0].name, + uid: this.fileList[0].uid, + progress: 0, + status: true, + success: 0 + }; + let requery = (file) => { + file.progress += 3; + setTimeout(() => { + if (file.progress < 100) { + requery(file) + } + }, 100) + }; + requery(this.file); + const req = new HttpRequest('PUT', url, formData, { + reportProgress: true, + withCredentials: true + }); + //Upload pre-empty array + this.fileList = []; + this.http.request(req) + .pipe(filter(e => e instanceof HttpResponse)) + .subscribe( + (event: {}) => { + this.file.progress = 100; + this.file.status = false; + this.uploading = false; + this.msg.success('upload successfully.'); + this.currentTab === 'NS' ? this.getTableData() : (this.currentTab === 'VNF' ? this.getTableVnfData() : this.getTablePnfData()); + }, + err => { + this.file.progress = 100; + this.file.status = false; + this.file.success = 1; + this.uploading = false; + this.msg.error('upload failed.'); + } + ); + } + + // Get the NS list + getTableData(): void { + this.isSpinning = true; + //ns vfc lists + this.myhttp.getOnboardTableData() + .subscribe((data) => { + this.nsTableData = data; + //ns sdc list + this.myhttp.getSDC_NSTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + let nsData = data; + // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); + let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); + this.nsTableData = this.nsTableData.concat(sameData); + }, (err) => { + console.error(err); + this.isSpinning = false; + }) + }, (err) => { + console.error(err); + this.isSpinning = false; + }) + } + + // Get the vnf list + getTableVnfData(): void { + this.isSpinning = true; + //vnf vfc lists + this.myhttp.getOnboardTableVnfData() + .subscribe((data) => { + this.vnfTableData = data; + //vnf sdc lists + this.myhttp.getSDC_VNFTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + let vnfData = data; + // this.VNFTableData.map((vnfvfc) => { vnfvfc.sameid = this.vnfData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; }); + let sameData = vnfData.filter((vnfsdc) => { return !this.vnfTableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) }); + this.vnfTableData = this.vnfTableData.concat(sameData); + }, (err) => { + console.error(err); + this.isSpinning = false; + }) + }, (err) => { + console.error(err); + this.isSpinning = false; + }) + } + + // Get pnf list + getTablePnfData() { + this.isSpinning = true; + this.myhttp.getOnboardTablePnfData() + .subscribe((data) => { + this.pnfTableData = data; + this.isSpinning = false; //loading hide + }, (err) => { + console.error(err); + this.isSpinning = false; + }) + } + + // confirm + showConfirm(requestBody: object, id: string): void { + let API = this.currentTab === 'NS' ? 'getNsonboard' : 'getVnfonboard'; + this.modalService.confirm({ + nzTitle: '

Are you sure you want to do this?

', + nzOnOk: () => { + this.myhttp[API](requestBody) + .subscribe((data) => { + if (data.status == "success") { + if (this.currentTab === 'NS') { + this.isUpdate = false; + this.notification.notificationSuccess(this.currentTab, "OnboardingState", id); + this.getTableData(); + } else { + this.jobId = data.jobId; + this.queryProgress(this.jobId, id); + this.getTableVnfData(); + } + } else { + this.isUpdate = false; + this.notification.notificationFailed(this.currentTab, "OnboardingState", id); + return false + } + }, (err) => { + console.log(err); + }) + } + }) + } + + + // ns onboard Upload button + updataService(id: string) { + this.isUpdate = true; + let requestBody = { "csarId": id }; + this.showConfirm(requestBody, id) + } + + //Progress Progress inquiry + queryProgress(jobId: string, id: string): any { + let mypromise = new Promise((res) => { + this.myhttp.getProgress(jobId, 0) + .subscribe((data) => { + if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) { + this.isUpdate = true; + setTimeout(() => { + this.queryProgress(this.jobId, id); + }, 10000) + return false + } + if (data.responseDescriptor.progress > 100) { + this.isUpdate = false; + this.notification.notificationFailed(this.currentTab, 'OnboardingState', id); + } else if (data.responseDescriptor.progress < 100) { + this.isUpdate = true; + setTimeout(() => { + this.queryProgress(this.jobId, id); + }, 5000) + } else { + res(data); + this.isUpdate = false; + this.notification.notificationSuccess(this.currentTab, 'OnboardingState', id); + } + return false + }) + }) + return mypromise; + } + + /* delete button */ + showDeleteConfirm(pkgid: string): void { + this.modalService.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'Do you Want to delete these items?', + nzOkText: 'Yes', + nzCancelText: 'No', + nzOnOk: () => new Promise((resolve) => { + this.deleteService(pkgid, resolve); + }).catch(() => console.log('Oops errors!')) + }); + } + + //delete nsItem + deleteService(pkgid, resolve) { + let API: string; + if (this.currentTab === 'NS') { + API = 'deleteNsIdData'; + } else if (this.currentTab === 'VNF') { + API = 'deleteVnfIdData'; + } else { + API = 'deletePnfIdData'; + } + this.myhttp[API](pkgid) + .subscribe((data) => { + this.notification.notificationSuccess(this.currentTab, 'OnboardingState', pkgid); + resolve() + //refresh list after successful deletion + switch (this.currentTab) { + case 'NS': + this.getTableData(); + break + case 'VNF': + this.getTableVnfData(); + break + case 'PNF': + this.getTablePnfData(); + break + } + }, (err) => { + console.log(err); + this.notification.notificationFailed(this.currentTab, 'OnboardingState', pkgid); + }) + } +} -- cgit 1.2.3-korg