Service Consumption FE

Service consumption feature
frontend implementation

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

4 files changed, 114 insertions, 2 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
index 5559e534b9..c2d6007edc 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
@@ -116,6 +116,14 @@
                     <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
                 </button>
                 <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+                        data-ui-sref="workspace.composition.consumption"
+                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Operation Consumption"
+                        data-tests-id="service-consumption-tab"
+                        data-ng-if="(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new import-icon"></div>
+                </button>
+                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
                         data-ui-sref="workspace.composition.dependencies"
                         tooltips tooltip-class="tooltip-custom tab-tooltip " tooltip-content="Service Dependencies"
                         data-tests-id="service-dependency-tab"
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
index b9bb66cde7..f37a492572 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
@@ -216,6 +216,9 @@
 
     .i-sdc-designer-sidebar-tab-icon {
         margin-top: 5px ;
+        &.import-icon {
+            transform: rotate(270deg);
+        }
         //  opacity: .4;
     }
 
@@ -828,7 +831,7 @@
         .g_1;
         line-height: 18px;
     }
-    
+
     .service-path-buttons {
        margin-top: 12px;
        position: absolute;
@@ -886,7 +889,7 @@
                     border-radius: 2px;
                     border:solid 1px #fff;
                 }
-            } 
+            }
         }
 
         .zoom-icons {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts
new file mode 100644
index 0000000000..20e99b0d39
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts
@@ -0,0 +1,79 @@
+/*!
+* 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 {ICompositionViewModelScope} from "../../composition-view-model";
+import {Service, PropertiesGroup, InputsGroup, ServiceInstanceObject, InterfaceModel, InputBEModel} from 'app/models';
+import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+
+interface IServiceConsumptionViewModelScope extends ICompositionViewModelScope {
+    service: Service;
+    instancesMappedList: Array<ServiceInstanceObject>;
+    componentInstancesProperties: PropertiesGroup;
+    componentInstancesInputs: InputsGroup;
+    componentInstancesInterfaces: Map<string, Array<InterfaceModel>>;
+    componentInputs: Array<InputBEModel>;
+}
+
+
+export class ServiceConsumptionViewModel {
+
+    static '$inject' = [
+        '$scope',
+        'ServiceServiceNg2'
+    ];
+
+    constructor(private $scope:IServiceConsumptionViewModelScope, private ServiceServiceNg2:ServiceServiceNg2) {
+        this.$scope.service = <Service>this.$scope.currentComponent;
+        this.initInstances();
+        this.initScope();
+    }
+
+    private initInstances = ():void => {
+        this.ServiceServiceNg2.getServiceConsumptionData(this.$scope.service).subscribe((genericResponse:ComponentGenericResponse) => {
+            this.$scope.componentInstancesProperties = genericResponse.componentInstancesProperties;
+            this.$scope.componentInstancesInputs = genericResponse.componentInstancesInputs;
+            this.$scope.componentInstancesInterfaces = genericResponse.componentInstancesInterfaces;
+            this.$scope.componentInputs = genericResponse.inputs;
+            this.updateInstanceAttributes();
+        });
+    }
+
+    private updateInstanceAttributes = ():void => {
+        if (this.$scope.isComponentInstanceSelected() && this.$scope.componentInstancesProperties) {
+            this.$scope.instancesMappedList = this.$scope.service.componentInstances.map(coInstance => new ServiceInstanceObject({
+                id: coInstance.uniqueId,
+                name: coInstance.name,
+                properties: this.$scope.componentInstancesProperties[coInstance.uniqueId] || [],
+                inputs: this.$scope.componentInstancesInputs[coInstance.uniqueId] || [],
+                interfaces: this.$scope.componentInstancesInterfaces[coInstance.uniqueId] || []
+            }));
+        }
+    }
+
+    private initScope = ():void => {
+        this.$scope.$watch('currentComponent.selectedInstance', ():void => {
+            this.updateInstanceAttributes();
+        });
+
+        this.$scope.registerCreateInstanceEvent(() => {
+            this.initInstances();
+        });
+
+        this.$scope.$on('$destroy', this.$scope.unregisterCreateInstanceEvent);
+    }
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html
new file mode 100644
index 0000000000..835ded33f6
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html
@@ -0,0 +1,22 @@
+<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content service-consumption">
+    <div class="w-sdc-designer-sidebar-section">
+        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content"
+                         class="w-sdc-designer-sidebar-section-title">
+            <span class="w-sdc-designer-sidebar-section-title-text" tooltips tooltip-content="Operation Consumption">Operation Consumption</span>
+            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
+        </expand-collapse>
+
+        <div class="w-sdc-designer-sidebar-section-content">
+            <div class="i-sdc-designer-sidebar-section-content-item">
+                <ng2-service-consumption
+                        [parent-service]="service"
+                        [selected-service]="selectedComponent"
+                        [selected-service-instance-id]="currentComponent.selectedInstance.uniqueId"
+                        [instances-mapped-list]="instancesMappedList"
+                        [parent-service-inputs]="componentInputs"
+                        [readonly]="isViewMode() || !isDesigner()">
+                </ng2-service-consumption>
+            </div>
+        </div>
+    </div>
+</perfect-scrollbar>
\ No newline at end of file