merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

6 files changed, 260 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info-model.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info-model.ts
new file mode 100644
index 000000000..4c5bf6747
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info-model.ts
@@ -0,0 +1,26 @@
+import {ModelInformationItem} from "../../../shared/components/model-information/model-information.component";
+
+export class ComponentInfoModel {
+  type: ComponentInfoType;
+  modelInfoItems: ModelInformationItem[];
+  additionalInfoItems: ModelInformationItem[];
+  title: string;
+
+
+  constructor(type: ComponentInfoType, modelInfoItems: ModelInformationItem[], additionalInfoItems: ModelInformationItem[], isInstance:boolean=true) {
+    this.type = type;
+    this.modelInfoItems = modelInfoItems;
+    this.additionalInfoItems = additionalInfoItems;
+    this.title=this.type+(isInstance ? " Instance" : "");
+  }
+}
+
+
+export enum ComponentInfoType {
+  SERVICE = "Service",
+  VNF = "VNF",
+  NETWORK = "Network",
+  VFMODULE = "VFModule",
+  VNFGROUP = "Group",
+  VNFMEMBER = "VNF"
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.html
new file mode 100644
index 000000000..8f08de076
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.html
@@ -0,0 +1,20 @@
+<div *ngIf="componentInfoModel">
+  <div class="component-info-wrapper"  [attr.data-tests-id]="'component-info-wrapper'">
+    <div class="component-info-section" [attr.data-tests-id]="'component-info-section'">
+      <div class="title" [attr.data-tests-id]="'component-info-section-title'">{{componentInfoModel?.title}} INFO</div>
+      <div class="component-info-list"  [attr.data-tests-id]="'component-info-section-list'">
+        <model-information [modelInformationItems]="componentInfoModel?.modelInfoItems" [itemClass]="'componentInfoItem'"></model-information>
+      </div>
+    </div>
+  </div>
+  <!-- commented out till we will have a data to show in additional info
+  <div class="component-info-wrapper" [attr.data-tests-id]="'additional-info-wrapper'">-->
+    <!--<div class="component-info-section" [attr.data-tests-id]="'additional-info-section'">-->
+      <!--<div class="title" [attr.data-tests-id]="'additional-info-section-title'">ADDITIONAL INFO</div>-->
+      <!--<div class="component-info-list" [attr.data-tests-id]="'additional-info-section-title'">-->
+        <!--<model-information [modelInformationItems]="componentInfoModel.additionalInfoItems" [itemClass]="'componentInfoItem'"></model-information>-->
+      <!--</div>-->
+    <!--</div>-->
+  <!--</div>
+  -->
+</div>
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.scss
new file mode 100644
index 000000000..2d7735678
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.scss
@@ -0,0 +1,40 @@
+.component-info-wrapper {
+
+  &:first-child {
+    border-bottom: 1px solid #D2D2D2;
+  }
+  .component-info-section {
+    margin: 15px 25px 0 25px;
+
+    .title {
+      font-family: OpenSans-SemiBold;
+      font-size: 14px;
+      color: #191919;
+      text-transform: uppercase;
+      margin-bottom: 15px;
+    }
+  }
+
+}
+
+:host ::ng-deep .componentInfoItem {
+  border-top: 1px solid #D2D2D2;
+  padding-top: 10px;
+  margin-bottom: 10px;
+
+  label {
+    font-family: OpenSans-Regular;
+    font-size: 12px;
+    color: #5A5A5A;
+    text-transform: capitalize;
+  }
+
+  .model-item-value {
+    font-family:  OpenSans-SemiBold;
+    font-size: 14px;
+    color: #191919;
+    line-height: 16px;
+  }
+}
+
+
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.ts
new file mode 100644
index 000000000..c69ab52e1
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.component.ts
@@ -0,0 +1,40 @@
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {ComponentInfoService} from "./component-info.service";
+import {ComponentInfoModel, ComponentInfoType} from "./component-info-model";
+import {ActivatedRoute} from "@angular/router";
+
+
+@Component({
+  selector: 'component-info',
+  templateUrl: './component-info.component.html',
+  styleUrls: ['./component-info.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ComponentInfoComponent implements OnInit {
+  componentInfoModel: ComponentInfoModel = null;
+
+  constructor(private _componentInfoService:ComponentInfoService, private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    ComponentInfoService.triggerComponentInfoChange.subscribe((input : ComponentInfoModel) => {
+        if(input.type === ComponentInfoType.SERVICE){
+          this.getServiceInformation();
+        }else {
+          this.componentInfoModel = input;
+        }
+      });
+
+    this.getServiceInformation();
+  }
+
+
+
+  getServiceInformation() : void {
+    this.route
+      .queryParams
+      .subscribe(params => {
+        let serviceModelId = params['serviceModelId'];
+        this.componentInfoModel = this._componentInfoService.getInfoForService(serviceModelId);
+      });
+  }
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.service.spec.ts
new file mode 100644
index 000000000..8b0da409b
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.service.spec.ts
@@ -0,0 +1,93 @@
+import {ComponentInfoService} from './component-info.service';
+import {getTestBed, TestBed} from '@angular/core/testing';
+import {MockNgRedux, NgReduxTestingModule} from '@angular-redux/store/testing';
+import {NgRedux} from '@angular-redux/store';
+import {AaiService} from '../../../shared/services/aaiService/aai.service';
+import {HttpClient, HttpHandler} from '@angular/common/http';
+import {FeatureFlagsService} from '../../../shared/services/featureFlag/feature-flags.service';
+import {ModelInformationItem} from "../../../shared/components/model-information/model-information.component";
+import {ComponentInfoModel, ComponentInfoType} from "./component-info-model";
+
+class MockAppStore<T> {
+  getState() {
+    return {
+      global: {
+      },
+      service : {
+        serviceHierarchy : {
+          '1a80c596-27e5-4ca9-b5bb-e03a7fd4c0fd' : {
+            service:{
+              serviceRole: 'Testing',
+              serviceType: 'pnf',
+              uuid: '1a80c596-27e5-4ca9-b5bb-e03a7fd4c0fd',
+              version: '1.0',
+              customizationUuid: ''
+            }
+          }
+        },
+        serviceInstance : {
+          '1a80c596-27e5-4ca9-b5bb-e03a7fd4c0fd' : {
+            globalSubscriberId: 'e433710f-9217-458d-a79d-1c7aff376d89',
+            subscriptionServiceType:'TYLER SILVIA',
+            instanceId: '2f7130e8-27d6-4c01-8988-60ca67e8dae4'
+          }
+        },
+        subscribers: [
+          {
+            'id': 'CAR_2020_ER',
+            'name': 'CAR_2020_ER',
+            'isPermitted': true
+          },  
+          {
+            'id': 'e433710f-9217-458d-a79d-1c7aff376d89',
+            'name': 'SILVIA ROBBINS',
+            'isPermitted': true
+          }
+        ]
+      }
+    }
+  }
+}
+
+beforeAll(done => (async () => {
+  TestBed.configureTestingModule({
+    imports: [NgReduxTestingModule],
+    providers: [
+      AaiService,
+      HttpClient,
+      HttpHandler,
+      FeatureFlagsService,
+      ComponentInfoService,
+      {provide: NgRedux, useClass: MockAppStore},
+      MockNgRedux]
+  });
+  await TestBed.compileComponents();
+  let injector = getTestBed();
+  service = injector.get(ComponentInfoService);
+  })().then(done).catch(done.fail));
+
+let service: ComponentInfoService;
+describe('Service Info Data', () => {
+
+  test('ComponentInfoService should be defined', () => {
+    expect(service).toBeDefined();
+  });
+
+  test('Info for service should be correct', () => {
+    let actualServiceInfo = service.getInfoForService('1a80c596-27e5-4ca9-b5bb-e03a7fd4c0fd');
+    let expectedServiceInfo = [
+      ModelInformationItem.createInstance('Type', 'pnf'),
+      ModelInformationItem.createInstance('Model Version', '1.0'),
+      ModelInformationItem.createInstance('Model Customization ID', ''),
+      ModelInformationItem.createInstance('Instance ID', '2f7130e8-27d6-4c01-8988-60ca67e8dae4'),
+      ModelInformationItem.createInstance('Subscriber Name', 'SILVIA ROBBINS'),
+      ModelInformationItem.createInstance('Service Type', 'TYLER SILVIA'),
+      ModelInformationItem.createInstance('Service Role', 'Testing'),
+    ];
+    expect(actualServiceInfo).toEqual(new ComponentInfoModel(ComponentInfoType.SERVICE, expectedServiceInfo, []));
+
+
+  });
+
+});
+
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.service.ts
new file mode 100644
index 000000000..9318b3aa7
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/component-info/component-info.service.ts
@@ -0,0 +1,41 @@
+import {Injectable} from "@angular/core";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../shared/store/reducers";
+import {AaiService} from "../../../shared/services/aaiService/aai.service";
+import {Subject} from "rxjs";
+import {ComponentInfoModel, ComponentInfoType} from "./component-info-model";
+import {ModelInformationItem} from "../../../shared/components/model-information/model-information.component";
+import * as _ from 'lodash';
+@Injectable()
+export class ComponentInfoService {
+  static triggerComponentInfoChange: Subject<ComponentInfoModel> = new Subject<ComponentInfoModel>();
+  constructor( private _store: NgRedux<AppState>, private _aaiService : AaiService){ }
+
+  getInfoForService(serviceModelId):ComponentInfoModel {
+    if(_.isNil(this._store.getState().service.serviceHierarchy[serviceModelId])) return null;
+
+    let serviceHierarchy = this._store.getState().service.serviceHierarchy[serviceModelId].service;
+    const serviceInstance = this._store.getState().service.serviceInstance[serviceModelId];
+    const modelInfoItems: ModelInformationItem[] = [
+     ModelInformationItem.createInstance("Subscriber Name",this._aaiService.extractSubscriberNameBySubscriberId(serviceInstance.globalSubscriberId)),
+     ModelInformationItem.createInstance("Service Type",serviceInstance.subscriptionServiceType),
+     ModelInformationItem.createInstance("Service Role",serviceHierarchy.serviceRole),
+    ];
+    serviceHierarchy.type = serviceHierarchy.serviceType;
+    return this.addGeneralInfoItems(modelInfoItems, ComponentInfoType.SERVICE, serviceHierarchy, serviceInstance );
+  }
+
+
+  addGeneralInfoItems(modelInfoSpecificItems: ModelInformationItem[], type: ComponentInfoType, model, instance) {
+    let modelInfoItems: ModelInformationItem[] = [
+      ModelInformationItem.createInstance("Type", (model && model.type) ? model.type : ((instance && instance.modelInfo) ? instance.modelInfo.modelType : null)),
+      ModelInformationItem.createInstance("Model Version", model ? model.version : null),
+      ModelInformationItem.createInstance("Model Customization ID", model ? model.customizationUuid : null),
+      ModelInformationItem.createInstance("Instance ID", instance ? instance.instanceId : null),
+      ModelInformationItem.createInstance("In Maintenance", instance? instance.inMaint : null),
+    ];
+    modelInfoItems = modelInfoItems.concat(modelInfoSpecificItems);
+    const modelInfoItemsWithoutEmpty = _.filter(modelInfoItems, function(item){ return !item.values.every(_.isNil)});
+    return new ComponentInfoModel(type, modelInfoItemsWithoutEmpty, []);
+  }
+}