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);
+  }
+}