From 9b2ceb347a3371819fcad6bbe2268203afecaf4e Mon Sep 17 00:00:00 2001 From: "Stone, Avi (as206k)" Date: Thu, 12 Apr 2018 16:36:39 +0300 Subject: DCAE-D fe initial commit DCAE-D fe initial commit Change-Id: Ica8ccb7c7ef769c969664d1e168d205eb9fc67f2 Issue-ID: SDC-1218 Signed-off-by: Stone, Avi (as206k) --- public/src/app/general/general.component.html | 83 ++++++ public/src/app/general/general.component.scss | 38 +++ public/src/app/general/general.component.spec.ts | 55 ++++ public/src/app/general/general.component.ts | 323 +++++++++++++++++++++++ 4 files changed, 499 insertions(+) create mode 100644 public/src/app/general/general.component.html create mode 100644 public/src/app/general/general.component.scss create mode 100644 public/src/app/general/general.component.spec.ts create mode 100644 public/src/app/general/general.component.ts (limited to 'public/src/app/general') diff --git a/public/src/app/general/general.component.html b/public/src/app/general/general.component.html new file mode 100644 index 0000000..dcea57a --- /dev/null +++ b/public/src/app/general/general.component.html @@ -0,0 +1,83 @@ +
+
+ +
+
+
+ Select existing VFCMT +
+ + +
+ +
+
+ Select version +
+ +
+
+ +
+
Name
+ +
+ +
+
Description
+ +
+ +
+
+ Template + +
+ +
+ +
+
+ Flow type + +
+ +
+ +
+
+ Attached to + +
+ +
+
+ +
+
Flow diagram
+
+ + +
+
+
diff --git a/public/src/app/general/general.component.scss b/public/src/app/general/general.component.scss new file mode 100644 index 0000000..d76e1ae --- /dev/null +++ b/public/src/app/general/general.component.scss @@ -0,0 +1,38 @@ +.left, +.right { + width: 50%; +} + +.ng-select.ng-single .ng-control { + border-radius: 0; + height: 30px; + min-height: 30px; +} + +.toast-container .toast { + width: 400px !important; + box-shadow: none; + border-radius: 0; +} +.toast-container .toast:hover { + box-shadow: none; +} + +.field { + margin: 1em; + .field-label { + padding-bottom: 0.5em; + } + .required::before { + content: '*'; + color: red; + padding-right: 5px; + } + .field-text { + flex: 1; + width: 100%; + min-width: 250px; + padding: 5px 0 5px 5px; + margin: 0; + } +} diff --git a/public/src/app/general/general.component.spec.ts b/public/src/app/general/general.component.spec.ts new file mode 100644 index 0000000..fb761db --- /dev/null +++ b/public/src/app/general/general.component.spec.ts @@ -0,0 +1,55 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { GeneralComponent, groupingData } from './general.component'; +import { sortBy } from 'lodash'; + +const data = [ + { + name: 'avi', + version: '2.0' + }, + { + name: 'stone', + version: '0.9' + }, + { + name: 'avi', + version: '2.1' + }, + { + name: 'vosk', + version: '0.1' + }, + { + name: 'liav', + version: '0.5' + } +]; +const sortedMatchVfcmtList = ['avi', 'liav', 'stone', 'vosk']; +const sortedVersionInGroup = [ + { + name: 'avi', + version: '2.1' + }, + { + name: 'avi', + version: '2.0' + } +]; + +describe('GeneralComponent', () => { + it('should sort vfcmt by A to Z', () => { + const sorted = groupingData(data); + const vfcmtList = sortBy(Object.keys(sorted), name => name); + expect(vfcmtList).toEqual(sortedMatchVfcmtList); + }); + + it('should group vfcmt by name', () => { + const sorted = groupingData(data); + expect(Object.keys(sorted)).toEqual(['avi', 'stone', 'vosk', 'liav']); + }); + + it('should version array be sorted in group', () => { + const sorted = groupingData(data); + expect(Object.values(sorted)[0]).toEqual(sortedVersionInGroup); + }); +}); diff --git a/public/src/app/general/general.component.ts b/public/src/app/general/general.component.ts new file mode 100644 index 0000000..422d834 --- /dev/null +++ b/public/src/app/general/general.component.ts @@ -0,0 +1,323 @@ +import { + Component, + OnInit, + ViewChild, + ViewEncapsulation, + Output, + EventEmitter +} from '@angular/core'; +import { RestApiService } from '../api/rest-api.service'; +import { ActivatedRoute } from '@angular/router'; +import { Store } from '../store/store'; +import { NgForm } from '@angular/forms'; +import { forkJoin } from 'rxjs/observable/forkJoin'; +import { + pipe, + groupBy, + map, + sort, + descend, + ascend, + prop, + find, + propEq, + findIndex +} from 'ramda'; +import { sortBy, forEach } from 'lodash'; +import { ToastrService } from 'ngx-toastr'; + +export const groupingData = pipe( + groupBy(prop('name')), + map(sort(descend(prop('version')))) +); + +@Component({ + selector: 'app-general', + encapsulation: ViewEncapsulation.None, + templateUrl: './general.component.html', + styleUrls: ['./general.component.scss'] +}) +export class GeneralComponent implements OnInit { + newVfcmt = { + name: null, + description: null, + template: null, + flowType: null, + vfni: null, + isCloneVFCMT: false, + isUpdateFlowType: false + }; + isLatestVersion = true; + vfniList = []; + templates = []; + serviceUUID: string; + vfcmts = new Array(); + versions = new Array(); + result = new Array(); + flowTypes = new Array(); + selectedVfcmt; + selectedVersion = null; + importCompleted = false; + disableName = false; + disableDescription = false; + disableFlowType = false; + disableVnfiList = false; + @Output() updateCdumpEv = new EventEmitter(); + @ViewChild('generalForm') generalForm; + // list = [ + // { source: 'node1dsvsdsvd', target: 'node2' }, + // { source: 'node3', target: 'node4' }, + // { source: 'node5', target: 'nodedsvsds6' }, + // { source: 'node7', target: 'node8' } + // ]; + list = []; + + constructor( + private restApi: RestApiService, + public store: Store, + private toastr: ToastrService, + private route: ActivatedRoute + ) { + console.log('route mcid: ', this.route.snapshot.params.mcid); + if ( + this.route.snapshot.params.mcid === 'import' || + this.route.snapshot.params.mcid === 'new' + ) { + this.store.generalflow = this.route.snapshot.params.mcid; + } else { + this.store.generalflow = 'edit'; + this.store.mcUuid = this.route.snapshot.params.mcid; + } + this.serviceUUID = this.route.snapshot.params.uuid; + } + + onChangeTemplate(template) { + console.log('flow template', template); + } + onChangeVfni(vfni) { + console.log('vfni', vfni); + } + vfcmtChange(vfcmtName) { + vfcmtName !== undefined + ? (this.versions = this.result[vfcmtName]) + : ((this.versions = []), this.restForm()); + this.store.isEditMode = true; + this.selectedVersion = null; + } + versionChange(version) { + const versionIndex = findIndex(propEq('version', version))(this.versions); + this.isLatestVersion = versionIndex === 0 ? true : false; + const selectedVfcmtByVersion = find( + propEq('version', version), + this.result[this.selectedVfcmt] + ); + this.newVfcmt.template = selectedVfcmtByVersion.uuid; + this.restApi.getVfcmtReferenceData(selectedVfcmtByVersion.uuid).subscribe( + success => { + this.store.loader = false; + console.log('vfcmt ref data:', success); + this.store.isEditMode = false; + this.getServiceRef(success); + }, + error => { + this.notifyError(error); + }, + () => { + this.store.loader = false; + } + ); + } + private notifyError(error: any) { + this.store.loader = false; + console.log(error.notes); + this.store.ErrorContent = Object.values(error.requestError); + this.store.displayErrorDialog = true; + } + + ngOnInit() { + if (this.store.generalflow === 'edit') { + this.store.loader = true; + this.restApi + .getCompositionMonitoringComponent(this.store.mcUuid) + .subscribe( + response => { + this.newVfcmt = response.vfcmt; + this.flowTypes.push(this.newVfcmt.flowType); + this.newVfcmt.vfni = this.store.vfiName; + this.vfniList.push({ resourceInstanceName: this.newVfcmt.vfni }); + // this.store.cdump = response.cdump; + this.updateCdumpEv.next(response.cdump); + this.store.isEditMode = true; + this.store.loader = false; + }, + error => { + this.notifyError(error); + } + ); + } else if (this.store.generalflow === 'import') { + this.store.loader = true; + this.store.isEditMode = true; + this.restApi + .getVfcmtsForMigration({ + contextType: this.route.snapshot.params.contextType, + uuid: this.route.snapshot.params.uuid, + version: this.route.snapshot.params.version + }) + .subscribe( + success => { + this.store.loader = false; + this.result = groupingData(success); + this.vfcmts = sortBy(Object.keys(this.result), name => name); + }, + error => { + this.notifyError(error); + }, + () => { + this.store.loader = false; + } + ); + } else if (this.route.snapshot.params.mcid === 'new') { + // get template data for ddl + const template$ = this.restApi.getTemplateResources(); + // get service vfi list for ddl '08ff91f1-9b57-4918-998b-4d2c98832815' + const vfniList$ = this.restApi.getServiceInstances(this.serviceUUID); + this.store.loader = true; + forkJoin(template$, vfniList$).subscribe( + success => { + console.log('all', success); + this.templates = success[0]; + this.vfniList = success[1].resources; + }, + error => { + this.notifyError(error); + }, + () => { + this.store.loader = false; + } + ); + } + } + + private restForm() { + this.newVfcmt = { + name: null, + description: null, + template: null, + flowType: null, + vfni: null, + isCloneVFCMT: false, + isUpdateFlowType: false + }; + const controls = this.generalForm.controls; + forEach(controls, control => { + control.markAsUntouched(); + }); + } + + private getServiceRef(data) { + if (data.flowType !== undefined) { + if (data.serviceUuid === this.serviceUUID) { + this.newVfcmt.name = data.name; + this.newVfcmt.description = data.description; + this.disableName = true; + this.disableDescription = true; + this.setFlowType(data); // true + this.setVfni(data); + this.newVfcmt.isCloneVFCMT = false; + } else { + this.isCloneVfcmtToast(); + this.setFlowType(data); // true + this.setVfni(data); + this.newVfcmt.isCloneVFCMT = true; + } + } else { + if (data.serviceUuid === this.serviceUUID && this.isLatestVersion) { + this.newVfcmt.name = data.name; + this.newVfcmt.description = data.description; + this.disableName = true; + this.disableDescription = true; + this.newVfcmt.isCloneVFCMT = false; + this.setFlowType(data); // true + this.setVfni(data); + } else { + this.isCloneVfcmtToast(); + this.setFlowType(data); // true + this.setVfni(data); + this.newVfcmt.isCloneVFCMT = true; + } + } + } + + private isCloneVfcmtToast() { + this.toastr.warning( + `

The monitoring configuration is copied.

+
+ The selected VFCMT is assigned to a different +
+
+ service or has a newer version. +
+ `, + '', + { + enableHtml: true, + // disableTimeOut: true + timeOut: 10000 + } + ); + } + + private setVfni(data: any) { + if (data.serviceUuid !== this.serviceUUID) { + this.getVfniList(); + this.disableVnfiList = false; + } else { + this.disableVnfiList = true; + this.vfniList.push({ resourceInstanceName: data.vfiName }); + this.newVfcmt.vfni = data.vfiName; + } + } + + private setFlowType(data: any) { + if (data.flowType === undefined) { + this.newVfcmt.isUpdateFlowType = true; + this.disableFlowType = false; + this.getFlowTypeList(); + } else { + this.newVfcmt.isUpdateFlowType = false; + this.disableFlowType = true; + this.flowTypes.push(data.flowType); + this.newVfcmt.flowType = data.flowType; + } + } + + private getFlowTypeList() { + this.restApi.getFlowType().subscribe( + success => { + console.log('flow types', success.flowTypes); + this.flowTypes = success.flowTypes; + }, + error => { + this.notifyError(error); + }, + () => { + this.store.loader = false; + } + ); + } + private getVfniList() { + this.restApi.getServiceInstances(this.serviceUUID).subscribe( + success => { + console.log('vfni List', success); + this.vfniList = success.resources; + }, + error => { + this.notifyError(error); + return null; + }, + () => { + this.store.loader = false; + } + ); + } +} -- cgit 1.2.3-korg