From 6f900cc45d7dd7f97430812b86b5c1d1693c8ae3 Mon Sep 17 00:00:00 2001
From: Ittay Stern <ittay.stern@att.com>
Date: Wed, 29 Aug 2018 17:01:32 +0300
Subject: merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>
---
 .../vlanTagging/form-async/form-async.component.ts | 102 +++++++++++++++++++++
 .../form-async/form-async.service.spec.ts          |  31 +++++++
 .../vlanTagging/form-async/form-async.service.ts   |  12 +++
 .../vlanTagging/form-async/form-async.style.scss   |  15 +++
 .../form-async/form-async.template.html            |  67 ++++++++++++++
 .../network-selector/network-selector.component.ts |   4 +-
 .../app/vlanTagging/vlan-tagging.component.html    |   2 +-
 .../src/app/vlanTagging/vlan-tagging.component.ts  |  31 ++++---
 .../src/app/vlanTagging/vlan-tagging.module.ts     |  14 +--
 .../src/app/vlanTagging/vlan-tagging.routing.ts    |  19 ++++
 10 files changed, 270 insertions(+), 27 deletions(-)
 create mode 100644 vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts
 create mode 100644 vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.spec.ts
 create mode 100644 vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.ts
 create mode 100644 vid-webpack-master/src/app/vlanTagging/form-async/form-async.style.scss
 create mode 100644 vid-webpack-master/src/app/vlanTagging/form-async/form-async.template.html
 create mode 100644 vid-webpack-master/src/app/vlanTagging/vlan-tagging.routing.ts

(limited to 'vid-webpack-master/src/app/vlanTagging')

diff --git a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts
new file mode 100644
index 000000000..623a4f42f
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts
@@ -0,0 +1,102 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {NgRedux, select} from '@angular-redux/store';
+import {Observable} from "rxjs";
+import {AppState} from "../../shared/store/reducers";
+import {
+  loadAicZones,
+  loadCategoryParameters,
+  loadLcpTenant,
+  loadProductFamiliesAction
+} from '../../shared/services/aaiService/aai.actions';
+import {LcpRegionsAndTenants} from "../../shared/models/lcpRegionsAndTenants";
+import {NgForm} from "@angular/forms";
+import {SelectOption} from "../../shared/models/selectOption";
+import {VNFModel} from "../../shared/models/vnfModel";
+import {Tenant} from "../../shared/models/tenant";
+import {FormAsyncService} from "./form-async.service";
+import {AaiService} from "../../shared/services/aaiService/aai.service";
+
+@Component({
+  selector: "formasync",
+  templateUrl: "form-async.template.html",
+  styleUrls: ["form-async.style.scss"],
+
+})
+
+export class Formasync implements OnInit {
+
+  constructor(private store: NgRedux<AppState>, private _formAsyncService: FormAsyncService) { }
+
+  @ViewChild('form') form: NgForm;
+  @Input()
+  set params(params: any) {
+    if (params) {
+      this.paramsInfo = params;
+    }
+  }
+  @Input()
+  set model(model: VNFModel) {
+    if (model) {
+      this.isEcompGeneratedNaming = model.isEcompGeneratedNaming;
+    }
+  };
+
+  @select(['service', 'productFamilies'])
+  readonly productFamilies: Observable<any>;
+
+  @select(['service', 'lcpRegionsAndTenants'])
+  readonly lcpRegionsAndTenants: Observable<any>;
+
+  @select(['service', 'lcpRegionsAndTenants', 'lcpRegionList'])
+  readonly lcpRegions: Observable<any>;
+
+  @select(['service', 'aicZones'])
+  readonly aicZones: Observable<any>;
+
+  @select(['service', 'categoryParameters', 'platformList'])
+  readonly platformList: Observable<any>;
+
+  @select(['service', 'categoryParameters', 'lineOfBusinessList'])
+  readonly lineOfBusinessList: Observable<any>;
+
+  rollbackOnFailure = [
+    new SelectOption({id: 'true', name: 'Rollback'}),
+    new SelectOption({id: 'false', name: 'Don\'t Rollback'})
+  ];
+  tenants: Tenant[] = [];
+
+  serviceInstance: any = {
+    cloudOwner: null,
+    rollback:'true'
+  };
+
+  isEcompGeneratedNaming: boolean = true;
+  paramsInfo : any;
+
+  onLcpSelect(newValue: string) {
+    let value: LcpRegionsAndTenants = undefined;
+    this.lcpRegionsAndTenants.subscribe(data => value = data);
+    this.tenants = value.lcpRegionsTenantsMap[newValue];
+    this.serviceInstance.tenantId = undefined;
+  }
+
+
+
+  onTenantSelect(newValue: string) {
+    this.serviceInstance.cloudOwner = this._formAsyncService.onTenantSelect(this.tenants, newValue);
+  }
+
+  ngOnInit() {
+    this.store.dispatch(loadProductFamiliesAction());
+    this.store.dispatch(loadLcpTenant(this.paramsInfo['globalCustomerId'], this.paramsInfo['serviceType']));
+    this.store.dispatch(loadAicZones());
+    this.store.dispatch(loadCategoryParameters());
+  }
+
+  public formatCloudOwnerTrailer(cloudOwner: string):string {
+    return AaiService.formatCloudOwnerTrailer(cloudOwner);
+  }
+}
+
+
+
diff --git a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.spec.ts b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.spec.ts
new file mode 100644
index 000000000..0f7d4444b
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.spec.ts
@@ -0,0 +1,31 @@
+import {async, getTestBed, TestBed} from '@angular/core/testing';
+import {FormAsyncService} from "./form-async.service";
+
+describe('FormAsyncService', () => {
+
+  let injector;
+  let service: FormAsyncService;
+
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      providers: [FormAsyncService]
+    });
+    await TestBed.compileComponents();
+
+    injector = getTestBed();
+    service = injector.get(FormAsyncService);
+
+  })().then(done).catch(done.fail));
+
+  test('should add cloudOwner according to new tenant value', () => {
+    const tenants = [{'id': '1', 'name': 'firstTenant', 'isPermitted': true, cloudOwner: 'irma-aic'},
+      {'id': '2', 'name': 'secondTenant', 'isPermitted': true, cloudOwner: 'irma-aic2'}];
+    let cloudOwner: string;
+    cloudOwner = service.onTenantSelect(tenants,'1');
+    expect(cloudOwner).toEqual('irma-aic');
+
+    cloudOwner = service.onTenantSelect(tenants, '2');
+    expect(cloudOwner).toEqual('irma-aic2');
+  })
+
+});
diff --git a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.ts b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.ts
new file mode 100644
index 000000000..f5a33fe4d
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.service.ts
@@ -0,0 +1,12 @@
+import {Injectable} from '@angular/core';
+import {Tenant} from "../../shared/models/tenant";
+
+@Injectable()
+export class FormAsyncService {
+  constructor(){}
+
+  public onTenantSelect(tenants: Tenant[], newValue: string) {
+    let tenantTemp: Tenant[] = tenants.filter(tenant => tenant.id == newValue);
+    return tenantTemp[0] && tenantTemp[0].cloudOwner;
+  }
+}
diff --git a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.style.scss b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.style.scss
new file mode 100644
index 000000000..e6c89bcae
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.style.scss
@@ -0,0 +1,15 @@
+.form-wrapper{
+  width:640px;
+  padding-left: 50px;
+  padding-top: 50px;
+  .details-item{
+    padding-bottom: 30px;
+  }
+  .details-item {
+    select {
+      font-family: OpenSans-Italic;
+      font-size: 14px;
+      color: #959595 !important;
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.template.html b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.template.html
new file mode 100644
index 000000000..ba35a42e9
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.template.html
@@ -0,0 +1,67 @@
+<div class="content">
+  <form #form="ngForm" name="networkNodeForm" class="form-wrapper">
+    <div  class="details-item">
+      <label class="placeholder">Instance name*</label>
+      <input [attr.data-tests-id]="'instanceName'" id="instance-name" [(ngModel)]="serviceInstance.instanceName" name="instance-name"
+        class="form-control input-text" placeholder="Type Instance Name" type="text" required>
+    </div>
+
+    <div class="details-item">
+      <label>Product family</label>
+      <select class="form-control input-text" [(ngModel)]="serviceInstance.productFamily" data-tests-id="productFamily" id="product-family-select"
+        name="product-family-select">
+        <option class="placeholder" [value]="undefined" disabled>Select Product Family</option>
+        <option *ngFor="let productFamily of productFamilies | async" [value]="productFamily.id" [disabled]="!productFamily.isPermitted">{{productFamily.name}}</option>
+      </select>
+    </div>
+
+    <div class="details-item">
+      <label>LCP region:*</label>
+      <select (change)="onLcpSelect($event.target.value)" class="form-control input-text" [(ngModel)]="serviceInstance.lcpRegion"
+        name="lcpRegion" id="lcpRegion-select" data-tests-id="lcpRegion" required>
+        <option class="placeholder1" [value]="undefined" disabled>Select LCP Region</option>
+        <option *ngFor="let lcpRegion of lcpRegions | async" [value]="lcpRegion.id" [disabled]="!lcpRegion.isPermitted" class="lcpRegionOption">{{lcpRegion.id}}{{formatCloudOwnerTrailer(lcpRegion.cloudOwner)}}</option>
+      </select>
+    </div>
+    <div class="details-item">
+      <label>Tenant:*</label>
+      <select (change)="onTenantSelect($event.target.value)" class="form-control input-text" [(ngModel)]="serviceInstance.tenantId" name="tenant" id="tenant-select" data-tests-id="tenant"
+        required>
+        <option class="placeholder1" [value]="undefined" disabled>Select Tenant</option>
+        <option *ngFor="let tenant of tenants" [value]="tenant.id" [disabled]="!tenant.isPermitted">{{tenant.name}}</option>
+      </select>
+    </div>
+
+    <div class="details-item">
+      <label>AIC Zone:</label>
+      <select class="form-control input-text" name="aicZone" id="aicZone-select" data-tests-id="aic_zone" [(ngModel)]="serviceInstance.aicZone">
+        <option class="placeholder1" [value]="undefined" disabled>Select AIC Zone</option>
+        <option class="aicZoneOption" *ngFor="let aicZone of aicZones | async" [value]="aicZone.id">{{aicZone.name}}</option>
+      </select>
+    </div>
+    <div class="details-item">
+      <label>Platform:</label>
+      <select data-tests-id="platform" class="form-control input-text" name="platform" id="platform" [(ngModel)]="serviceInstance.platformName">
+        <option class="placeholder1" [value]="undefined" disabled>Select Platform</option>
+        <option *ngFor="let platform of platformList | async" [value]="platform.id">{{platform.name}}</option>
+      </select>
+    </div>
+
+    <div class="details-item">
+      <label>Line Of Business:*</label>
+      <select data-tests-id="lineOfBusiness" class="form-control input-text" [(ngModel)]="serviceInstance.lineOfBusiness"
+        name="owningEntity" id="owningEntity" required>
+        <option class="placeholder1" [value]="undefined" disabled>Select Line Of Business</option>
+        <option *ngFor="let lineOfBusiness of lineOfBusinessList | async" [value]="lineOfBusiness.id">{{lineOfBusiness.name}}</option>
+      </select>
+    </div>
+    <div class="details-item">
+      <label>Rollback On Failure:</label>
+      <select data-tests-id="suppressRollback" class="form-control input-text" name="rollbackOnFailure" id="rollbackOnFailure" [(ngModel)]="serviceInstance.rollback">
+        <option *ngFor="let option of rollbackOnFailure" [value]="option.id">{{option.name}}</option>
+      </select>
+    </div>
+  </form>
+
+</div>
+
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
index 46a176984..d3df9268d 100644
--- 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
@@ -1,8 +1,8 @@
 import {Component, Input, OnInit, ViewChild} from "@angular/core";
 import {NgRedux, select} from "@angular-redux/store";
-import {AppState} from "../../store/reducers";
+import {AppState} from "../../shared/store/reducers";
 import {ModelInformationItem} from "../../shared/components/model-information/model-information.component";
-import {Observable} from "rxjs/Observable";
+import {Observable} from "rxjs";
 import {NgForm} from "@angular/forms";
 import * as _ from 'lodash';
 
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html
index f474f4bd1..5443a25f0 100644
--- a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html
@@ -9,7 +9,7 @@
   <span (serviceInstamce)="onServiceInstanceChange($event)"></span>
   <div class="content-wrapper">
     <div class="left-side">
-      <formasync [hidden]="currentStep === wizardSteps.two" [model]="model" class="form"></formasync>
+      <formasync [hidden]="currentStep === wizardSteps.two" [params]="params"  [model]="model" class="form"></formasync>
       <app-network-selector [hidden]="currentStep === wizardSteps.one" class="form-wrapper" [groups]="groups"></app-network-selector>
     </div>
 
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
index f3f63e1e9..87f117202 100644
--- a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
@@ -1,19 +1,17 @@
-import {formasync} from './../components/form-async/form-async.component';
+import {Formasync} from './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 {AppState} from "../shared/store/reducers";
 import {ActivatedRoute} from "@angular/router";
-import {
-  loadServiceAccordingToUuid, loadAaiNetworkAccordingToNetworkCF,
-  loadUserId
-} from "../services/aaiService/aai.actions";
+import {loadServiceAccordingToUuid, loadAaiNetworkAccordingToNetworkCF, loadUserId} from "../shared/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";
+import {Observable} from "rxjs";
+import {RootEpics} from "../shared/store/epics";
+import * as _ from "lodash";
 
 enum WizardSteps {
   one,
@@ -33,12 +31,15 @@ const buttonTextCancel = "Cancel";
 
 export class VlanTaggingComponent implements OnInit {
   constructor(private store: NgRedux<AppState>,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              rootEpics: RootEpics) {
     this.nextButtonText = buttonTextNext;
     this.cancelButtonText = buttonTextCancel;
     this.currentStep = WizardSteps.one;
+    rootEpics.createEpics();
   }
 
+  subscriberId: string;
   subscriberName: string;
   serviceKey: string;
   serviceType: string;
@@ -47,11 +48,11 @@ export class VlanTaggingComponent implements OnInit {
   serviceModelId: string;
   modelInfoItems: Array<ModelInformationItem>;
   groups: Array<Array<ModelInformationItem>>;
+  params : any;
   currentStep: WizardSteps;
   nextButtonText: string;
   cancelButtonText: string;
   wizardSteps = WizardSteps;
-  cloudOwner: string;
   cloudRegionId: string;
   serviceInstanceId : string;
   model: VNFModel;
@@ -72,8 +73,8 @@ export class VlanTaggingComponent implements OnInit {
 
   @ViewChild(NetworkSelectorComponent)
   public networkSelectorComponent: NetworkSelectorComponent;
-  @ViewChild(formasync)
-  public formAsync: formasync;
+  @ViewChild(Formasync)
+  public formAsync: Formasync;
 
 
   deploySubInterface() {
@@ -101,15 +102,15 @@ export class VlanTaggingComponent implements OnInit {
     this.store.dispatch(loadUserId());
     this.userIdObs.subscribe(res => this.userId = res);
     this.route.queryParams.subscribe(params => {
+      this.params = params;
       this.serviceModelId = params["serviceModelId"];
-      this.subscriberName = params["subscriberName"];
+      this.subscriberId = params["globalCustomerId"];
       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;
@@ -143,7 +144,7 @@ export class VlanTaggingComponent implements OnInit {
         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)
+            loadAaiNetworkAccordingToNetworkCF(networkName["values"][0], this.formAsync.serviceInstance.cloudOwner, this.formAsync.serviceInstance.lcpRegion)
           );
         });
         this.currentStep = WizardSteps.two;
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts
index 3227542c6..c3848998e 100644
--- a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts
@@ -1,5 +1,4 @@
-
-import { formasync } from './../components/form-async/form-async.component';
+import { Formasync } from './form-async/form-async.component';
 import {NgModule,} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { VlanTaggingComponent } from './vlan-tagging.component';
@@ -9,11 +8,9 @@ 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';
-
-
+import {FormAsyncService} from "./form-async/form-async.service";
 
 @NgModule({
-
 imports: [
     CommonModule,
     NgReduxModule,
@@ -23,11 +20,10 @@ imports: [
     SharedModule.forRoot()
 
   ],
-  providers: [  ],
-  declarations: [VlanTaggingComponent,formasync,NetworkSelectorComponent],
+  providers: [ FormAsyncService ],
+  declarations: [VlanTaggingComponent, Formasync, NetworkSelectorComponent],
   entryComponents: [],
-  exports: [formasync]
-
+  exports: [Formasync]
 })
 
 export class VlanTaggingModule { }
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.routing.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.routing.ts
new file mode 100644
index 000000000..d89c9beec
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.routing.ts
@@ -0,0 +1,19 @@
+import {Route} from "@angular/router";
+import {FlagsResolve} from "../shared/resolvers/flag/flag.resolver";
+import {VlanTaggingComponent} from "./vlan-tagging.component";
+
+export const VlanTaggingRoutes: Route[] = [
+  {
+    path: 'vlan',
+    children: [
+      {
+        path: '',
+        component: VlanTaggingComponent,
+        resolve: {
+          flags: FlagsResolve
+        },
+      }
+    ]
+  }
+];
+
-- 
cgit 1.2.3-korg