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 --- .../fcaps/monitor-5g/monitor-5g.component.html | 3 + .../fcaps/monitor-5g/monitor-5g.component.less | 0 .../fcaps/monitor-5g/monitor-5g.component.spec.ts | 25 ++ .../views/fcaps/monitor-5g/monitor-5g.component.ts | 15 + .../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 +++++++++++++++++++++ .../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 --------------------- .../slicing-management.component.html | 3 + .../slicing-management.component.less | 0 .../slicing-management.component.spec.ts | 25 ++ .../slicing-management.component.ts | 15 + 18 files changed, 810 insertions(+), 724 deletions(-) create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts 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 delete mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css delete mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html delete mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less delete mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts delete mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts (limited to 'usecaseui-portal/src/app/views') diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html new file mode 100644 index 00000000..951eb5e7 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html @@ -0,0 +1,3 @@ +

+ monitor-5g works! +

diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts new file mode 100644 index 00000000..14203595 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Monitor5gComponent } from './monitor-5g.component'; + +describe('Monitor5gComponent', () => { + let component: Monitor5gComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ Monitor5gComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Monitor5gComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts new file mode 100644 index 00000000..128f1ba4 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-monitor-5g', + templateUrl: './monitor-5g.component.html', + styleUrls: ['./monitor-5g.component.less'] +}) +export class Monitor5gComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} 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); + }) + } +} diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css deleted file mode 100644 index 4e80750c..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ /dev/null @@ -1,67 +0,0 @@ -/* - 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/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html deleted file mode 100644 index c48d68f9..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - -
- -
-
- -

- -

-

{{"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/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less deleted file mode 100644 index f877e1ca..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ /dev/null @@ -1,138 +0,0 @@ -/* - 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/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts deleted file mode 100644 index 07c8b959..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -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/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts deleted file mode 100644 index 3d312c5c..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ /dev/null @@ -1,360 +0,0 @@ -/* - 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); - }) - } -} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html new file mode 100644 index 00000000..91062607 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html @@ -0,0 +1,3 @@ +

+ slicing-management works! +

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts new file mode 100644 index 00000000..25fbf515 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingManagementComponent } from './slicing-management.component'; + +describe('SlicingManagementComponent', () => { + let component: SlicingManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts new file mode 100644 index 00000000..ae2133de --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slicing-management', + templateUrl: './slicing-management.component.html', + styleUrls: ['./slicing-management.component.less'] +}) +export class SlicingManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} -- cgit 1.2.3-korg