New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

7 files changed, 528 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html
new file mode 100644
index 000000000..fbb16949a
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html
@@ -0,0 +1,14 @@
+<div class="form-wrapper">
+  <form #form="ngForm">
+    <div class="network" *ngFor="let group of groups">
+      <label class="placeholder" [attr.data-tests-id]="'groupLabel'">{{getValueOfLabelInGroup(group,'Group Name')}}</label>
+      <select [(ngModel)]="groupSelection[getValueOfLabelInGroup(group,'Group Name')]" class="form-control input-text"
+              [attr.data-tests-id]="'groupTestId'"
+              id="{{getGroupName(group)}}" name="{{getGroupName(group)}}" required>
+        <option class="placeholder" [value]="undefined" disabled>Select Network</option>
+        <option *ngFor="let singleGroup of getNetworksByNetworkFunctionRole(group) | async"
+        [ngValue]="singleGroup">{{singleGroup["instance-group"]["instance-group-name"]}}</option>
+      </select>
+    </div>
+  </form>
+</div>
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss
new file mode 100644
index 000000000..aa45b34f3
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss
@@ -0,0 +1,17 @@
+.form-wrapper{
+  width:640px;
+  padding-left: 50px;
+  padding-top: 50px;
+  .network{
+    padding-bottom: 30px;
+  }
+  .network {
+    select {
+      font-family: OpenSans-Italic;
+      font-size: 14px;
+      color: #959595 !important;
+    }
+  }
+}
+
+
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
new file mode 100644
index 000000000..46a176984
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
@@ -0,0 +1,66 @@
+import {Component, Input, OnInit, ViewChild} from "@angular/core";
+import {NgRedux, select} from "@angular-redux/store";
+import {AppState} from "../../store/reducers";
+import {ModelInformationItem} from "../../shared/components/model-information/model-information.component";
+import {Observable} from "rxjs/Observable";
+import {NgForm} from "@angular/forms";
+import * as _ from 'lodash';
+
+@Component({
+  selector: "app-network-selector",
+  templateUrl: "./network-selector.component.html",
+  styleUrls: ["./network-selector.component.scss"]
+})
+export class NetworkSelectorComponent implements OnInit {
+  private localStore: NgRedux<AppState>;
+  networkSelection: any;
+  groupSelection :any;
+  @Input() groups: Array<string>;
+  @Input() cloudOwner : string;
+  @Input() cloudRegionId : string;
+  @select(['service', 'networkFunctions'])
+  readonly networkFunctions: Observable<any>;
+
+  @ViewChild('form') form: NgForm;
+
+  constructor(store: NgRedux<AppState>) {
+    this.localStore = store;
+    this.groupSelection = {};
+    console.log(store);
+  }
+
+  getValueOfLabelInGroup(group: any, label: string){
+    let item = _.find(group, {"label": label});
+    if (item) {
+      return item["values"][0];
+    }
+  }
+
+  getNetworksByNetworkFunctionRole(group: any): Observable<string[]> {
+    let filteredItem = this.getValueOfLabelInGroup(group,"Network Collection Function");
+    return this.networkFunctions.map(data => {
+      return (data && data[filteredItem]) || [];
+    });
+  }
+
+  getGroupName(group: ModelInformationItem[]) {
+    return this.getValueOfLabelInGroup(group,"Group Name");
+  }
+
+  /**
+   * [ncf=>aaiResonse]
+   * groups => groupsModel
+   */
+
+  ngOnInit() {
+    let store = this.localStore;
+    this.networkSelection = {};
+
+  }
+}
+
+
+//
+/*
+Info inside redux = {ncfNetworkMap }
+*/
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html
new file mode 100644
index 000000000..f474f4bd1
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html
@@ -0,0 +1,27 @@
+<div class="vlan-wrapper-config">
+  <div class="head">
+    <div class="title">Collection Resource Consumer VNF</div>
+    <div class="btn-wrapper">
+      <button class="cancel-btn grey" data-tests-id="cancelButton" (click)="cancel()">{{cancelButtonText}}</button>
+      <button class="next-btn blue" data-tests-id="nextButton" [disabled]="isNextButtonDisabled()" (click)="nextStep()">{{nextButtonText}}</button>
+    </div>
+  </div>
+  <span (serviceInstamce)="onServiceInstanceChange($event)"></span>
+  <div class="content-wrapper">
+    <div class="left-side">
+      <formasync [hidden]="currentStep === wizardSteps.two" [model]="model" class="form"></formasync>
+      <app-network-selector [hidden]="currentStep === wizardSteps.one" class="form-wrapper" [groups]="groups"></app-network-selector>
+    </div>
+
+    <div style="padding-left: 30px;padding-right: 30px" class="sidebar-right">
+      <div class="headline">META DATA</div>
+      <div class="seperator"></div>
+      <model-information [modelInformationItems]="modelInfoItems"></model-information>
+      <div class="headline">Collection Resource Consumer VNF</div>
+      <div *ngFor="let group of groups">
+        <div class="seperator"></div>
+        <model-information [modelInformationItems]="group"></model-information>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss
new file mode 100644
index 000000000..af4a7e212
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss
@@ -0,0 +1,168 @@
+$popupHeaderHeight: 59px;
+
+.vlan-wrapper-config * {
+  font-family: OpenSans-Regular, sans-serif;
+}
+
+.body-content-jsp {
+  margin-top: 35px;
+  margin-left: 201px;
+  margin-right: 0px;
+  background-color: white;
+}
+
+:host {
+  height: 100%;
+}
+.form-wrapper{
+  min-width: 75%;
+  overflow: auto;
+}
+button {
+  border-radius: 2px;
+  font-size: 14px;
+  line-height: 28px;
+  height: 30px;
+  &.blue {
+    border: #0091c8 1px solid;
+    background-color: #009fdb;
+    color: white;
+    &:hover {
+      background-color: #1ec2ff;
+      border-color: #0091c8;
+    }
+    &:active {
+      background-color: #0091c7;
+      border-color: #006186;
+    }
+    &[disabled] {
+      background-color: rgba(5, 104, 174, 0.3);
+      border-color: rgba(4, 113, 168, 0.3);
+    }
+  }
+  &.grey {
+    color: #009FDB;
+    background-color: #ffffff;
+    border: 1px solid #009FDB;
+    &:hover {
+      background-color: #f8f8f8;
+      border-color: #009fdb;
+    }
+    &:active {
+      background-color: #d8d8d8;
+      border-color: #5a5a5a;
+    }
+    &[disabled] {
+      background-color: #f8f8f8;
+      border-color: #d8d8d8;
+      color: #cdcdcd;
+    }
+  }
+  &.white {
+    border: #009fdb 1px solid;
+    background-color: white;
+    color: #009fdb;
+  }
+}
+
+.vlan-wrapper-config {
+  /*todo: remove. this a temporary fix for the sub-interface popup not showing as a page beside the sidebar. currently showing it in full screen.*/
+  /*it is necessary inside the iframe (and not just in the angularjs - old app) angular app because in Firefox the iframe content isn't effected by the iframe size */
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  /********************/
+  .head {
+    line-height: $popupHeaderHeight;
+    height: $popupHeaderHeight;
+    display: flex;
+    background-color: #F8F8F8;
+    border-bottom: 1px solid #D8D8D8;
+    .title {
+      font-size: 18px;
+      margin-left: 56px;
+      color: #5A5A5A;
+    }
+    .btn-wrapper {
+      flex: 1;
+      text-align: right;
+      margin-right: 15px;
+      button {
+        width: 120px;
+        &.delete-btn {
+          margin-left: 13px;
+        }
+      }
+    }
+  }
+  .content-wrapper {
+    display: flex;
+    .form {
+      overflow-y: auto;
+    }
+    height: calc(100% - #{$popupHeaderHeight});
+    .form {
+      margin-top: 48px;
+
+    }
+    .content {
+      .form-wrapper {
+
+        margin: 0 auto;
+      }
+    }
+
+  }
+
+  span.error {
+    color: #cf2a2a;
+  }
+  .content-wrapper .content .form-wrapper .instance-field {
+    .ng-invalid-pattern {
+      border-color: #cf2a2a;
+      color: #cf2a2a;
+    }
+    margin-bottom: 25px;
+    label {
+      color: #191919;
+      font-size: 13px;
+    }
+    input,
+    select {
+      border-color: #D2D2D2;
+    }
+    &.lcpRegionText,
+    &.productFamily {
+      display: none;
+    }
+  }
+
+}
+
+.sidebar-right {
+  min-width: 25%;
+  background-color: #F8F8F8;
+  overflow-y: auto;
+  .headline {
+    font-family: OpenSans-Semibold;
+    font-size: 12px;
+     color: #009FDB;
+     padding-bottom: 6px;
+     padding-top: 20px
+  }
+  .seperator{
+    background: #D2D2D2;
+    height: 1px;
+    margin-bottom: 10px;
+  }
+}
+
+.left-side{
+  min-width: 75%;
+  overflow:auto;
+
+}
+
+.sidebar-right service-metadata .metadata-content {
+  padding-bottom: 20px;
+}
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
new file mode 100644
index 000000000..f3f63e1e9
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
@@ -0,0 +1,203 @@
+import {formasync} from './../components/form-async/form-async.component';
+import {Component, OnInit, ViewChild} from "@angular/core";
+import {NetworkSelectorComponent} from "./network-selector/network-selector.component";
+import {NgRedux, select} from "@angular-redux/store";
+import {AppState} from "../store/reducers";
+import {ActivatedRoute} from "@angular/router";
+import {
+  loadServiceAccordingToUuid, loadAaiNetworkAccordingToNetworkCF,
+  loadUserId
+} from "../services/aaiService/aai.actions";
+import {createRequest} from "../factories/mso.factory";
+import {Observable} from "rxjs/Observable";
+import {VNFModel} from "../shared/models/vnfModel";
+import {VfcInstanceGroupProperties} from "../shared/models/vfcInstanceGroupProperties";
+import * as _ from "lodash";
+import {ModelInformationItem} from "../shared/components/model-information/model-information.component";
+
+enum WizardSteps {
+  one,
+  two
+}
+
+const buttonTextNext = "Next";
+const buttonTextBack = "Back";
+const buttonTextConfirm = "Confirm";
+const buttonTextCancel = "Cancel";
+
+@Component({
+  selector: "vlan-tagging",
+  templateUrl: "./vlan-tagging.component.html",
+  styleUrls: ["./vlan-tagging.component.scss"]
+})
+
+export class VlanTaggingComponent implements OnInit {
+  constructor(private store: NgRedux<AppState>,
+              private route: ActivatedRoute) {
+    this.nextButtonText = buttonTextNext;
+    this.cancelButtonText = buttonTextCancel;
+    this.currentStep = WizardSteps.one;
+  }
+
+  subscriberName: string;
+  serviceKey: string;
+  serviceType: string;
+  vnfKey: string;
+  serviceInstanceName: string;
+  serviceModelId: string;
+  modelInfoItems: Array<ModelInformationItem>;
+  groups: Array<Array<ModelInformationItem>>;
+  currentStep: WizardSteps;
+  nextButtonText: string;
+  cancelButtonText: string;
+  wizardSteps = WizardSteps;
+  cloudOwner: string;
+  cloudRegionId: string;
+  serviceInstanceId : string;
+  model: VNFModel;
+  userId: string;
+  modelCustomizationId : string;
+  onServiceInstanceChange(event) {
+    console.log(event);
+  }
+
+  private serviceHirarchy: any;
+
+  @select(['service', 'serviceHierarchy'])
+  readonly serviceHierarchyObserable: Observable<any>;
+
+  @select(['service', 'userId'])
+  readonly userIdObs: Observable<any>;
+
+
+  @ViewChild(NetworkSelectorComponent)
+  public networkSelectorComponent: NetworkSelectorComponent;
+  @ViewChild(formasync)
+  public formAsync: formasync;
+
+
+  deploySubInterface() {
+
+    const requestDetails = createRequest(
+      this.userId,
+      this.formAsync.serviceInstance,
+      this.serviceHirarchy[this.serviceModelId],
+      this.serviceKey,
+      this.networkSelectorComponent.groupSelection,
+      this.vnfKey,
+      this.modelCustomizationId
+    );
+
+    // this.msoService.createVnf(requestDetails, this.serviceKey).subscribe();
+
+    window.parent.postMessage({
+      eventId: 'submitIframe',
+      data: requestDetails
+    }, "*");
+  }
+
+  ngOnInit() {
+    this.cloudRegionId = "";
+    this.store.dispatch(loadUserId());
+    this.userIdObs.subscribe(res => this.userId = res);
+    this.route.queryParams.subscribe(params => {
+      this.serviceModelId = params["serviceModelId"];
+      this.subscriberName = params["subscriberName"];
+      this.serviceType = params["serviceType"];
+      this.serviceKey = params["serviceInstanceID"];
+      this.vnfKey = params["modelCustomizationName"];
+      this.serviceInstanceId = params["serviceInstanceID"];
+      this.serviceInstanceName = params["serviceInstanceName"];
+      this.modelCustomizationId = params["modelCustomizationId"];
+      this.cloudOwner = params["globalCustomerId"];
+      this.store.dispatch(loadServiceAccordingToUuid(this.serviceModelId));
+      this.serviceHierarchyObserable.subscribe(data => {
+        this.serviceHirarchy = data;
+        if (data && data[this.serviceModelId]) {
+          this.model = new VNFModel(data[this.serviceModelId].vnfs[this.vnfKey]);
+          this.updateModelInfo(this.model);
+        }
+      });
+    });
+  }
+
+  private updateModelInfo(vnfModel: VNFModel) {
+    this.modelInfoItems = [
+      new ModelInformationItem("Service Instance Name", "serviceInstanceName", [this.serviceInstanceName], "", true),
+      new ModelInformationItem("Model Invariant UUID", "modelInvariantUUID", [vnfModel.invariantUuid], "", true),
+      new ModelInformationItem("Model Version", "modelVersion", [vnfModel.version], "", true),
+      new ModelInformationItem("Model UUID", "modelUuid", [vnfModel.uuid], "", true),
+      new ModelInformationItem("Model Customization UUID", "modelCustomizationUuid", [vnfModel.customizationUuid], "", true),
+    ];
+
+    this.groups = [];
+    _.forOwn(vnfModel.vfcInstanceGroups, (vfcInstanceGroup, key) => {
+      const properties: VfcInstanceGroupProperties = vfcInstanceGroup.vfcInstanceGroupProperties;
+      this.groups.push(this.createGroupsInformation(vfcInstanceGroup.name, properties));
+    });
+  }
+
+  nextStep() {
+    switch (this.currentStep) {
+      case WizardSteps.one:
+        this.groups.map(group => {
+          let networkName = _.find(group, (groupElements: ModelInformationItem) => groupElements.testsId === "networkCollectionFunction");
+          this.store.dispatch(
+            loadAaiNetworkAccordingToNetworkCF(networkName["values"][0], this.cloudOwner, this.formAsync.serviceInstance.lcpRegion)
+          );
+        });
+        this.currentStep = WizardSteps.two;
+        this.updateNavigationButtonText(this.currentStep);
+        break;
+      case WizardSteps.two:
+        this.deploySubInterface();
+        break;
+    }
+  }
+
+  cancel() {
+    switch (this.currentStep) {
+      case WizardSteps.one:
+        window.parent.postMessage({
+          eventId: 'closeIframe'
+        }, "*");
+        break;
+      case WizardSteps.two:
+        this.currentStep = WizardSteps.one;
+        this.updateNavigationButtonText(this.currentStep);
+        break;
+    }
+  }
+
+  updateNavigationButtonText(step: WizardSteps) {
+    switch (step) {
+      case WizardSteps.one:
+        this.nextButtonText = buttonTextNext;
+        this.cancelButtonText = buttonTextCancel;
+        break;
+      case WizardSteps.two:
+        this.nextButtonText = buttonTextConfirm;
+        this.cancelButtonText = buttonTextBack;
+        break;
+    }
+  }
+
+  isNextButtonDisabled() {
+    switch (this.currentStep) {
+      case WizardSteps.one:
+        return !this.formAsync.form.valid;
+      case WizardSteps.two:
+        return !this.networkSelectorComponent.form.valid;
+    }
+  }
+
+  createGroupsInformation(name: string, properties: VfcInstanceGroupProperties): Array<ModelInformationItem> {
+    let modelInfoItems = [];
+    modelInfoItems.push(new ModelInformationItem("Group Name", "groupName", [name], "", true));
+    modelInfoItems.push(new ModelInformationItem("Network Collection Function", "networkCollectionFunction", [properties.networkCollectionFunction], "", true));
+    modelInfoItems.push(new ModelInformationItem("VFC Instance Group Function", "instanceGroupFunction", [properties.vfcInstanceGroupFunction], "", true));
+    modelInfoItems.push(new ModelInformationItem("Parent Port Role", "parentPortRole", [properties.vfcParentPortRole], "", true));
+    modelInfoItems.push(new ModelInformationItem("Sub Interface Role", "subInterfaceRole", [properties.subinterfaceRole], "", true));
+    return modelInfoItems;
+  }
+}
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts
new file mode 100644
index 000000000..3227542c6
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts
@@ -0,0 +1,33 @@
+
+import { formasync } from './../components/form-async/form-async.component';
+import {NgModule,} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { VlanTaggingComponent } from './vlan-tagging.component';
+import {CommonModule} from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgReduxModule } from '@angular-redux/store';
+import { SharedModule } from '../shared/shared.module';
+import { NetworkSelectorComponent } from './network-selector/network-selector.component';
+import { TooltipModule } from 'ngx-tooltip';
+
+
+
+@NgModule({
+
+imports: [
+    CommonModule,
+    NgReduxModule,
+    FormsModule,
+    BrowserModule,
+    TooltipModule,
+    SharedModule.forRoot()
+
+  ],
+  providers: [  ],
+  declarations: [VlanTaggingComponent,formasync,NetworkSelectorComponent],
+  entryComponents: [],
+  exports: [formasync]
+
+})
+
+export class VlanTaggingModule { }