diff options
author | Stone, Avi (as206k) <as206k@att.com> | 2018-04-12 16:36:39 +0300 |
---|---|---|
committer | Stone, Avi (as206k) <as206k@att.com> | 2018-04-12 16:36:39 +0300 |
commit | 9b2ceb347a3371819fcad6bbe2268203afecaf4e (patch) | |
tree | fbb5ea2c147d71dfeeec0882b215423e7b7206b4 /public/src/app/main | |
parent | 72dc8e3298d3e4315cdd9717b778671cb0b625bc (diff) |
DCAE-D fe initial commit
DCAE-D fe initial commit
Change-Id: Ica8ccb7c7ef769c969664d1e168d205eb9fc67f2
Issue-ID: SDC-1218
Signed-off-by: Stone, Avi (as206k) <as206k@att.com>
Diffstat (limited to 'public/src/app/main')
-rw-r--r-- | public/src/app/main/main.component.html | 62 | ||||
-rw-r--r-- | public/src/app/main/main.component.scss | 33 | ||||
-rw-r--r-- | public/src/app/main/main.component.ts | 228 |
3 files changed, 323 insertions, 0 deletions
diff --git a/public/src/app/main/main.component.html b/public/src/app/main/main.component.html new file mode 100644 index 0000000..d54b27b --- /dev/null +++ b/public/src/app/main/main.component.html @@ -0,0 +1,62 @@ +<div class="container"> + + <div style="padding: .25em; display: flex; + justify-content: space-between; + align-items: flex-end;"> + <div> + <a (click)="goBack()" data-tests-id="btn-back-home" style="display: flex; cursor: pointer;text-decoration: none; color: #009fdb;"> + <mat-icon fontSet="fontawesome" fontIcon="fa-angle-left" style="height: 17px; width: 12px; font-size: 17px;"></mat-icon> + <span style="display: flex; align-items: center;">Back to Monitoring</span> + </a> + <div style="margin:10px 0;" data-tests-id="new-monitorying-titie"> + <span style="font-size: 2em;" *ngIf='store.generalflow === "new"'> + New + </span> + <span style="font-size: 2em;" *ngIf='store.generalflow === "import"'> + Import + </span> + <span style="font-size: 2em;"> + Monitoring Configuration + </span> + </div> + </div> + + <div> + <div *ngIf='store.generalflow === "new" || store.generalflow === "edit"'> + <button *ngIf="!this.store.isEditMode" mat-raised-button color="primary" [disabled]="this.generalComponent.generalForm.invalid" + data-tests-id="createMonitoring" (click)="createMC(this.generalComponent.generalForm.value)">Create</button> + + <div *ngIf="this.store.isEditMode" style="display: flex;"> + <button mat-icon-button (click)="saveCDUMP()" [disabled]="!store.cdumpIsDirty"> + <span style="width: 100%; + height: 100%; + padding-right: 20px; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'save' | feather:22"></span> + </button> + <button mat-raised-button color="primary" (click)="saveAndCreateBlueprint()">Submit</button> + </div> + </div> + <div *ngIf='store.generalflow === "import"'> + <button mat-raised-button color="primary" (click)="importMC(this.generalComponent.newVfcmt)" [disabled]="this.generalComponent.generalForm.invalid" + data-tests-id="importMonitoring">Import</button> + </div> + </div> + </div> + + <div style="position: relative; flex:1;"> + + <p-tabView (onChange)="handleChange($event)" data-tests-id="tabs"> + <p-tabPanel header="General"> + <div> + <app-general (updateCdumpEv)="updateCdump($event)"></app-general> + </div> + </p-tabPanel> + <p-tabPanel *ngFor="let item of nodes" [header]="item.name"> + <app-rule-frame [tabName]="item.name"></app-rule-frame> + </p-tabPanel> + </p-tabView> + + </div> +</div> diff --git a/public/src/app/main/main.component.scss b/public/src/app/main/main.component.scss new file mode 100644 index 0000000..402a56a --- /dev/null +++ b/public/src/app/main/main.component.scss @@ -0,0 +1,33 @@ +.container { + display: flex; + flex-direction: column; + // height: 100%; + margin: 1em; +} + +// overhide +.ui-tabview .ui-tabview-panel { + border: 1px solid #d9d9d9; + padding: 0; + margin-left: 0.2em; + height: calc(100vh - 150px); + overflow: auto; +} + +.ui-tabview .ui-tabview-nav li { + margin: 0; +} + +.ui-tabview .ui-tabview-nav li.ui-tabview-selected { + color: #009fdb; + border-top: 4px solid #009fdb; + border-bottom: none; +} + +.ui-tabview-title { + font-size: 14px; +} + +.ui-tabview .ui-tabview-nav li.ui-tabview-selected .ui-tabview-title { + color: #009fdb; +} diff --git a/public/src/app/main/main.component.ts b/public/src/app/main/main.component.ts new file mode 100644 index 0000000..fdbb077 --- /dev/null +++ b/public/src/app/main/main.component.ts @@ -0,0 +1,228 @@ +import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Location } from '@angular/common'; +import { RestApiService } from '../api/rest-api.service'; +import { Store } from '../store/store'; +import { RuleFrameComponent } from '../rule-frame/rule-frame.component'; +import { GeneralComponent } from '../general/general.component'; +import { ToastrService } from 'ngx-toastr'; +import { forkJoin } from 'rxjs/observable/forkJoin'; + +@Component({ + selector: 'app-main', + encapsulation: ViewEncapsulation.None, + templateUrl: './main.component.html', + styleUrls: ['./main.component.scss'] +}) +export class MainComponent { + cdump; + nodes = []; + @ViewChild(GeneralComponent) generalComponent: GeneralComponent; + // @ViewChildren(RuleFrameComponent) ruleFrameRef: QueryList<RuleFrameComponent>; + + constructor( + private route: ActivatedRoute, + private restApi: RestApiService, + private toastr: ToastrService, + public store: Store, + private location: Location + ) { + this.route.snapshot.params.mcid === 'import' + ? (this.store.generalflow = 'import') + : (this.store.generalflow = 'new'); + } + + goBack() { + this.location.back(); + } + + createMC(params) { + console.log('newVfcmt: %o', params); + this.store.loader = true; + this.restApi + .createNewVFCMT({ + name: params.name, + description: params.description, + templateUuid: params.template, + vfiName: params.serviceAttached, + serviceUuid: this.route.snapshot.params.uuid, + contextType: this.route.snapshot.params.contextType, + flowType: 'default' + }) + .subscribe( + success => { + console.log(success); + this.store.mcUuid = success.vfcmt.uuid; + console.log(this.cleanProperty(success)); + this.store.cdump = success.cdump; + this.nodes = this.store.cdump.nodes; + this.store.setTabsProperties(this.nodes); + this.setDataFromMapToRuleEngine(success.cdump); + this.store.loader = false; + this.store.isEditMode = true; + }, + error => { + this.store.loader = false; + console.log(error.notes); + this.store.ErrorContent = Object.values(error.requestError); + this.store.displayErrorDialog = true; + } + ); + } + + updateCdump(cdump) { + this.store.cdump = cdump; + this.nodes = this.store.cdump.nodes; + this.store.setTabsProperties(this.nodes); + this.setDataFromMapToRuleEngine(cdump); + } + + importMC(params) { + console.log('importVfcmt: %o', params); + this.generalComponent.importCompleted = true; + this.store.loader = true; + this.restApi + .importVFCMT({ + name: params.name, + description: params.description, + templateUuid: params.template, + vfiName: params.vfni, + serviceUuid: this.route.snapshot.params.uuid, + contextType: this.route.snapshot.params.contextType, + flowType: params.flowType, + cloneVFCMT: params.isCloneVFCMT, + updateFlowType: params.isUpdateFlowType + }) + .subscribe( + success => { + console.log(success); + this.location.path(); + // this.location.go(); + this.store.mcUuid = success.vfcmt.uuid; + console.log(this.cleanProperty(success)); + this.store.cdump = success.cdump; + this.nodes = this.store.cdump.nodes; + this.store.setTabsProperties(this.nodes); + this.setDataFromMapToRuleEngine(success.cdump); + this.store.generalflow = 'edit'; + this.store.loader = false; + this.store.isEditMode = true; + }, + error => { + this.store.loader = false; + console.log(error.notes); + this.store.ErrorContent = Object.values(error.requestError); + this.store.displayErrorDialog = true; + } + ); + } + + setDataFromMapToRuleEngine(cdump) { + this.store.tabParmasForRule = cdump.nodes + .filter(x => x.name.includes('map')) + .map(y => { + return { + name: y.name, + nid: y.nid + }; + }); + } + + cleanProperty(response) { + return response.cdump.nodes.map(node => { + const t = node.properties.filter(item => + item.hasOwnProperty('assignment') + ); + node.properties = t; + return node; + }); + } + + saveCDUMP() { + debugger; + this.store.loader = true; + this.restApi + .saveMonitoringComponent({ + contextType: this.store.sdcParmas.contextType, + serviceUuid: this.store.sdcParmas.uuid, + vfiName: this.generalComponent.newVfcmt.vfni, + vfcmtUuid: this.store.mcUuid, + flowType: this.generalComponent.newVfcmt.flowType, + cdump: this.store.cdump + }) + .subscribe( + success => { + this.store.loader = false; + this.store.mcUuid = success.uuid; + this.toastr.success('', 'Save succeeded'); + }, + error => { + this.store.loader = false; + console.log(error.notes); + this.store.ErrorContent = Object.values(error.requestError); + this.store.displayErrorDialog = true; + }, + () => {} + ); + } + + saveAndCreateBlueprint() { + debugger; + this.store.loader = true; + if (this.store.cdumpIsDirty) { + this.restApi + .saveMonitoringComponent({ + contextType: this.store.sdcParmas.contextType, + serviceUuid: this.store.sdcParmas.uuid, + vfiName: this.generalComponent.newVfcmt.vfni, + vfcmtUuid: this.store.mcUuid, + cdump: this.store.cdump + }) + .subscribe( + success => { + this.store.loader = false; + this.store.mcUuid = success.uuid; + this.submitBlueprint(); + }, + error => { + this.store.loader = false; + console.log(error.notes); + this.store.ErrorContent = Object.values(error.requestError); + this.store.displayErrorDialog = true; + }, + () => {} + ); + } else { + this.submitBlueprint(); + } + } + + submitBlueprint() { + this.store.loader = true; + this.restApi + .submitMonitoringComponent({ + contextType: this.store.sdcParmas.contextType, + serviceUuid: this.store.sdcParmas.uuid, + vfiName: this.generalComponent.newVfcmt.vfni, + vfcmtUuid: this.store.mcUuid, + flowType: this.store.cdump.flowType + }) + .subscribe( + success => { + this.store.loader = false; + this.toastr.success('', 'Save succeeded'); + }, + error => { + this.store.loader = false; + console.log(error.notes); + this.store.ErrorContent = Object.values(error.requestError); + this.store.displayErrorDialog = true; + }, + () => {} + ); + } + + handleChange(e) { + this.store.setTabIndex(e.index - 1); + } +} |