Service Consumption FE

Service consumption feature
frontend implementation

Change-Id: I68e1b507b1d4379b271fe97428ff8ae86dc11b4c
Issue-ID: SDC-1990
Signed-off-by: ojasdubey <ojas.dubey@amdocs.com>

6 files changed, 366 insertions, 4 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index d4e7b02930..3f87b070e8 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -12,8 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  -->
- 
- 
+
+
 <div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
     [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly':  property.isDisabled ||property.isDeclared}"
     [class.with-top-border]="property.isChildOfListOrMap"
@@ -24,7 +24,9 @@
             <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
             <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
         </div>
-        <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
+        <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">
+            <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
+        </div> <!-- simple children of complex type within map or list -->
         <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
             <!--<input [value]="property.mapKey" [placeholder]="property.name" (input)="mapKeyChanged.emit($event.target.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':property.mapKeyError}" required/>-->
             <dynamic-element #mapKeyInput
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
index 91baaf1bc1..cb8c9a694b 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
@@ -24,7 +24,7 @@ import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multil
         DynamicPropertyComponent,
         PropertiesTableComponent
     ],
-    exports: [PropertiesTableComponent],
+    exports: [PropertiesTableComponent, DynamicPropertyComponent],
     providers: [FilterChildPropertiesPipe, PropertiesService]
 })
 export class PropertyTableModule {
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.html b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.html
new file mode 100644
index 0000000000..9c52afbb6b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.html
@@ -0,0 +1,26 @@
+<div class='service-consumption'>
+    <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
+    <div class="no-operations-text" data-tests-id="no-operations" *ngIf="!isLoading && !interfacesList.length">{{'CONSUMPTION_NO_OPERATIONS_TO_SHOW' | translate}}</div>
+
+    <div class="interface-operations-group"
+         *ngFor="let interface of interfacesList; let interfaceIndex = index"
+         (click)="expandCollapseInterfaceGroup(interface)">
+        <div class="interface-title first-level hand" [attr.data-tests-id]="interface.displayName" [ngClass]="{'expanded': interface.isExpanded}">
+            <span class="sprite-new expand-collapse-plus-icon expand-collapse-icon"></span>
+            <div class="title-text" tooltips tooltip="{{interface.displayName}}">{{interface.displayName}}</div>
+        </div>
+        <div class="i-sdc-designer-sidebar-section-content-item operations-group" *ngIf="interface.isExpanded">
+            <div class="operation-data"
+             [ngClass]="{'hand': !readonly}"
+             *ngFor="let serviceOperation of interface.operationsList; let opIndex = index"
+             (click)="onSelectOperation($event, interface, opIndex)">
+                <div class="operation-name"
+                     [attr.data-tests-id]="interface.displayName + '.' + serviceOperation.operation.name"
+                     [ngClass]="{'readonly': readonly}"
+                     tooltips tooltip="{{serviceOperation.operation.name}}">
+                    {{serviceOperation.operation.name}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
new file mode 100644
index 0000000000..5830c06972
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
@@ -0,0 +1,67 @@
+@import './../../../../../assets/styles/variables.less';
+@import './../../../../../assets/styles/variables-old.less';
+@import './../../../../../assets/styles/mixins_old.less';
+@import './../../../../../assets/styles/sprite.less';
+
+.service-consumption {
+  min-height: 100px;
+  .no-operations-text {
+    text-align: center;
+    padding: 30px;
+    opacity: 0.7;
+    font-size: 14px;
+  }
+  .interface-operations-group {
+    &:first-of-type {
+      margin-top: 1px;
+    }
+    .interface-title {
+      display: flex;
+      .title-text {
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 90%;
+        padding-left: 4px;
+      }
+      &.expanded {
+        background-color: @tlv_color_v;
+        border-left: 4px solid @main_color_a;
+        box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
+        margin-bottom: 2px;
+        padding-left: 4px !important;
+        .expand-collapse-icon {
+          .expand-collapse-minus-icon;
+        }
+      }
+      .expand-collapse-icon {
+        margin: 0 6px;
+        display: inline-block;
+        margin-top: 4px;
+      }
+    }
+    .operation-data {
+      border-bottom: 1px solid #c8cdd1;
+      padding: 5px 10px 5px 18px;
+      min-height: 61px;
+      display: flex;
+      align-items: center;
+    }
+
+    .operation-name {
+      .s_1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 220px;
+      display: inline-block;
+      &:not(.readonly):hover {
+        .a_7;
+      }
+      &.readonly {
+        opacity: 0.5;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
new file mode 100644
index 0000000000..b0f6dfb649
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
@@ -0,0 +1,228 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import {Component, Input, ComponentRef} from '@angular/core';
+import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
+import {ComponentInstanceServiceNg2} from 'app/ng2/services/component-instance-services/component-instance.service';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {ModalService} from 'app/ng2/services/modal.service';
+import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import {
+    ModalModel,
+    ButtonModel,
+    OperationModel,
+    Service,
+    ServiceInstanceObject,
+    PropertyFEModel,
+    PropertyBEModel,
+    InputBEModel,
+    InterfaceModel
+} from 'app/models';
+import {ServiceConsumptionCreatorComponent} from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
+
+
+export class ConsumptionInput extends PropertyFEModel{
+    inputId: string;
+    type: string;
+    source: string;
+    value: any;
+
+    constructor(input?: any) {
+        super(input);
+        if (input) {
+            this.inputId = input.inputId;
+            this.type = input.type;
+            this.source = input.source;
+            this.value = input.value || "";
+        }
+    }
+}
+
+export class ConsumptionInputDetails extends ConsumptionInput {
+    name: string;
+    expanded: boolean;
+    assignValueLabel: string;
+    associatedProps: Array<string>;
+    associatedInterfaces: Array<any>;
+    origVal: string;
+    isValid: boolean;
+
+    constructor(input: any) {
+        super(input);
+        if (input) {
+            this.name = input.name;
+            this.expanded = input.expanded;
+            this.assignValueLabel = input.assignValueLabel;
+            this.associatedProps = input.associatedProps;
+            this.associatedInterfaces = input.associatedInterfaces;
+            this.origVal = input.value || "";
+            this.isValid = input.isValid;
+        }
+    }
+
+    public updateValidity(isValid: boolean) {
+        this.isValid = isValid;
+    }
+}
+
+export class ServiceOperation {
+    operation: OperationModel;
+    consumptionInputs: Array<ConsumptionInputDetails>;
+
+    constructor(input?: any) {
+        if (input) {
+            this.operation = new OperationModel(input.operation || {});
+            this.consumptionInputs = input.consumptionInputs || [];
+        }
+    }
+}
+
+export class InterfaceWithServiceOperation {
+    interfaceId: string;
+    displayName: string;
+    operationsList: Array<ServiceOperation>;
+    isExpanded: boolean;
+
+    constructor(input?: InterfaceModel) {
+        if (input) {
+            this.interfaceId = input.uniqueId;
+            this.displayName = input.displayType();
+            this.operationsList = _.map(input.operations, operation => new ServiceOperation({operation: operation}));
+            this.isExpanded = true;
+        }
+    }
+}
+
+
+
+@Component({
+    selector: 'service-consumption',
+    templateUrl: './service-consumption.component.html',
+    styleUrls: ['service-consumption.component.less'],
+    providers: [ModalService]
+})
+
+export class ServiceConsumptionComponent {
+
+    modalInstance: ComponentRef<ModalComponent>;
+    isLoading: boolean = false;
+    interfacesList: Array<InterfaceWithServiceOperation>;
+    operationsGroup: Array<ServiceOperation>;
+    @Input() parentServiceInputs: Array<InputBEModel> = [];
+    @Input() parentService: Service;
+    @Input() selectedService: Service;
+    @Input() selectedServiceInstanceId: string;
+    @Input() instancesMappedList: Array<ServiceInstanceObject>;
+    @Input() readonly: boolean;
+
+    selectedInstanceSiblings: Array<ServiceInstanceObject>;
+    selectedInstancePropertiesList: Array<PropertyBEModel> = [];
+
+    constructor(private ModalServiceNg2: ModalService, private serviceServiceNg2: ServiceServiceNg2, private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2:ComponentInstanceServiceNg2) {}
+
+    ngOnInit() {
+        this.updateSelectedInstancePropertiesAndSiblings();
+    }
+
+    ngOnChanges(changes) {
+        if(changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
+            this.selectedServiceInstanceId = changes.selectedServiceInstanceId.currentValue;
+            if(changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
+                this.selectedService = changes.selectedService.currentValue;
+            }
+            this.updateSelectedInstancePropertiesAndSiblings();
+        }
+        if(changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
+            this.updateSelectedInstancePropertiesAndSiblings();
+        }
+    }
+
+    updateSelectedInstancePropertiesAndSiblings() {
+        this.interfacesList = [];
+        let selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, coInstance => coInstance.id === this.selectedServiceInstanceId);
+        if (selectedInstanceMetadata) {
+            _.forEach(selectedInstanceMetadata.interfaces, (interfaceData:InterfaceModel) => {
+                this.interfacesList.push(new InterfaceWithServiceOperation(interfaceData));
+            });
+        }
+        this.interfacesList.sort((interf1:InterfaceWithServiceOperation, interf2:InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
+
+        this.selectedInstancePropertiesList = selectedInstanceMetadata && selectedInstanceMetadata.properties;
+        this.selectedInstanceSiblings = _.filter(this.instancesMappedList, coInstance => coInstance.id !== this.selectedServiceInstanceId);
+    }
+
+    expandCollapseInterfaceGroup(currInterface) {
+        currInterface.isExpanded = !currInterface.isExpanded;
+    }
+
+    onSelectOperation(event, currInterface:InterfaceWithServiceOperation, opIndex: number) {
+        event.stopPropagation();
+        if(!this.readonly) {
+            this.operationsGroup = currInterface.operationsList;
+            let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
+            let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
+            let modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
+            this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+            this.ModalServiceNg2.addDynamicContentToModal(
+                this.modalInstance,
+                ServiceConsumptionCreatorComponent,
+                {
+                    interfaceId: currInterface.interfaceId,
+                    serviceOperationIndex: opIndex,
+                    serviceOperations: this.operationsGroup,
+                    parentService: this.parentService,
+                    selectedService: this.selectedService,
+                    parentServiceInputs: this.parentServiceInputs,
+                    selectedServiceProperties: this.selectedInstancePropertiesList,
+                    selectedServiceInstanceId: this.selectedServiceInstanceId,
+                    selectedInstanceSiblings: this.selectedInstanceSiblings
+                }
+            );
+            this.modalInstance.instance.open();
+        }
+    }
+
+    createOrUpdateOperationInput  = ():void => {
+        this.isLoading = true;
+        let consumptionInputsList:Array<{[id: string]: Array<ConsumptionInput>}> = _.map(this.operationsGroup, (serviceOp) => {
+            let consumptionInputsArr: Array<any> = [];
+            if(serviceOp.consumptionInputs) {
+                consumptionInputsArr = _.map(serviceOp.consumptionInputs, (input: ConsumptionInputDetails) => {
+                    return {
+                        inputId: input.inputId,
+                        type: input.isSimpleType ? input.type : 'json',
+                        source: input.source,
+                        value: input.value
+                    };
+                });
+            }
+            return {
+                [serviceOp.operation.uniqueId]: consumptionInputsArr
+            };
+        });
+        this.serviceServiceNg2.createOrUpdateServiceConsumptionInputs(this.parentService,this.selectedServiceInstanceId, consumptionInputsList).subscribe(() => {
+            this.isLoading = false;
+        }, err=> {
+            this.isLoading = false;
+        });
+        this.ModalServiceNg2.closeCurrentModal();
+    };
+
+    getDisabled = ():boolean =>  {
+        return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
+    };
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
new file mode 100644
index 0000000000..8593bef3eb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import { NgModule } from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ServiceConsumptionComponent} from "./service-consumption.component";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+
+@NgModule({
+    declarations: [
+        ServiceConsumptionComponent
+    ],
+    imports: [
+        CommonModule,
+        UiElementsModule,
+        TranslateModule
+    ],
+    exports: [],
+    entryComponents: [
+        ServiceConsumptionComponent
+    ],
+    providers: []
+})
+export class ServiceConsumptionModule {
+}
\ No newline at end of file