Support Capability Properties

This change includes following changes
1. Get capability properties from global types- BE
2. Show capability properties in cap/req screen
3. Support Capability Properties in assingment, operation and consumption screens

Change-Id: Ieb4fa5705007c8bed3d82eb4fe4604572aa202d7
Issue-ID: SDC-2294
Signed-off-by: Mojahidul Islam <mojahidul.islam@amdocs.com>

4 files changed, 169 insertions, 59 deletions

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
index 20e99b0d39..737002303b 100644
--- 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
@@ -16,7 +16,17 @@
 
 
 import {ICompositionViewModelScope} from "../../composition-view-model";
-import {Service, PropertiesGroup, InputsGroup, ServiceInstanceObject, InterfaceModel, InputBEModel} from 'app/models';
+import {
+    Service,
+    PropertiesGroup,
+    InputsGroup,
+    ServiceInstanceObject,
+    InterfaceModel,
+    InputBEModel,
+    CapabilitiesGroup,
+    Capability,
+    ComponentInstance
+} from 'app/models';
 import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
 import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
 
@@ -27,6 +37,8 @@ interface IServiceConsumptionViewModelScope extends ICompositionViewModelScope {
     componentInstancesInputs: InputsGroup;
     componentInstancesInterfaces: Map<string, Array<InterfaceModel>>;
     componentInputs: Array<InputBEModel>;
+    componentCapabilities: Array<Capability>;
+    instancesCapabilitiesMap: Map<string, Array<Capability>>;
 }
 
 
@@ -49,10 +61,20 @@ export class ServiceConsumptionViewModel {
             this.$scope.componentInstancesInputs = genericResponse.componentInstancesInputs;
             this.$scope.componentInstancesInterfaces = genericResponse.componentInstancesInterfaces;
             this.$scope.componentInputs = genericResponse.inputs;
+            this.buildInstancesCapabilitiesMap(genericResponse.componentInstances);
             this.updateInstanceAttributes();
         });
     }
 
+    buildInstancesCapabilitiesMap = (componentInstances: Array<ComponentInstance>): void => {
+        this.$scope.instancesCapabilitiesMap = new Map();
+        let flattenCapabilities = [];
+        _.forEach(componentInstances, componentInstance => {
+            flattenCapabilities = CapabilitiesGroup.getFlattenedCapabilities(componentInstance.capabilities);
+            this.$scope.instancesCapabilitiesMap[componentInstance.uniqueId] = _.filter(flattenCapabilities, cap => cap.properties && cap.ownerId === componentInstance.uniqueId);
+        });
+    }
+
     private updateInstanceAttributes = ():void => {
         if (this.$scope.isComponentInstanceSelected() && this.$scope.componentInstancesProperties) {
             this.$scope.instancesMappedList = this.$scope.service.componentInstances.map(coInstance => new ServiceInstanceObject({
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
index 835ded33f6..8404a7f653 100644
--- 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
@@ -14,6 +14,7 @@
                         [selected-service-instance-id]="currentComponent.selectedInstance.uniqueId"
                         [instances-mapped-list]="instancesMappedList"
                         [parent-service-inputs]="componentInputs"
+                        [instances-capabilities-map]="instancesCapabilitiesMap"
                         [readonly]="isViewMode() || !isDesigner()">
                 </ng2-service-consumption>
             </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html
index 14bc49e28b..8e1822193b 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html
@@ -96,8 +96,8 @@
                         <div class="flex-container data-row" data-ng-class="{'editable-row': req.isCreatedManually}"
                              data-ng-click="req.isCreatedManually && onEditRequirement(req)">
                             <div class="table-col-general flex-item text ellipsis-text" tooltips
-                                 tooltip-content="{{req.name}}">
-                                <span data-tests-id="{{req.name}}">{{req.name}}</span>
+                                 tooltip-content="{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}">
+                                <span data-tests-id="{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}">{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}</span>
                             </div>
                             <div class="table-col-general flex-item text ellipsis-text" tooltips
                                  tooltip-content="{{req.capability}}">
@@ -148,17 +148,22 @@
                     <div data-ng-if="filteredCapabilitiesList.length === 0" class="no-row-text"
                          data-tests-id="no-rows-in-table">
                         There are no capabilities to display
-
                     </div>
-                    <div data-ng-repeat="capability in filteredCapabilitiesList | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse  track by $index"
+                    <div data-ng-repeat-start="capability in filteredCapabilitiesList | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse  track by $index"
                          class="flex-container data-row"
                          data-ng-class="{'selected': capability.selected, 'editable-row': capability.isCreatedManually}"
                          data-ng-click="capability.isCreatedManually && onEditCapability(capability)"
                          data-tests-id="capabilities-table-row">
 
                         <div class="table-col-general flex-item text ellipsis-text" tooltips
-                             tooltip-content="{{capability.name}}">
-                            <span data-tests-id="{{capability.name}}">{{capability.name}}</span>
+                             tooltip-content="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}">
+                            <span class="sprite-new arrow-up-small hand"
+                                  data-ng-class="{'hideme': !capability.properties.length, 'opened': capability.selected}"
+                                  data-ng-click="capability.selected = !capability.selected; $event.stopPropagation();"></span>
+                            <span data-tests-id="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}"
+                                  class="name-col" data-ng-class="{'opened': capability.selected}">
+                                {{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}
+                            </span>
                         </div>
                         <div class="table-col-general flex-item text ellipsis-text" tooltips
                              tooltip-content="{{capability.type}}">
@@ -188,6 +193,51 @@
                                       data-ng-click="onDeleteCap($event, capability)"></svg-icon>
                         </div>
                     </div>
+                    <div data-ng-repeat-end data-ng-if="capability.selected" class="item-opened properties-section">
+                        <p class="properties-title">Properties</p>
+                        <div class="table-container-flex properties-table">
+                            <div class="table" data-ng-class="{'view-mode': true}">
+                                <div class="head flex-container">
+                                    <div class="table-header head-row hand flex-item"
+                                         data-ng-repeat="header in capabilityPropertiesTableHeadersList track by $index"
+                                         data-ng-click="sort(header.property, propertiesSortTableDefined)">
+                                        {{header.title}}
+                                        <span data-ng-if="propertiesSortTableDefined.sortByField === header.property"
+                                              class="table-header-sort-arrow"
+                                              data-ng-class="{'down': propertiesSortTableDefined.reverse, 'up':!propertiesSortTableDefined.reverse}"> </span>
+                                    </div>
+                                </div>
+
+                                <div class="body">
+                                    <div data-ng-repeat="property in capability.properties | orderBy:propertiesSortTableDefined.sortByField:propertiesSortTableDefined.reverse track by $index"
+                                         data-tests-id="propertyRow"
+                                         class="flex-container data-row">
+                                        <div class="table-col-general flex-item text"
+                                             data-tests-id="{{property.name}}"
+                                             tooltips tooltip-content="{{property.name}}">
+                                            {{property.name}}
+                                        </div>
+                                        <div class="table-col-general flex-item text"
+                                             data-tests-id="{{property.type}}"
+                                             tooltips tooltip-content="{{property.type}}">
+                                            {{property.type}}
+                                        </div>
+                                        <div class="table-col-general flex-item text"
+                                             data-tests-id="{{property.schema.property.type}}"
+                                             tooltips tooltip-content="{{property.schema.property.type}}">
+                                            {{property.schema.property.type}}
+                                        </div>
+                                        <div class="table-col-general flex-item text"
+                                             tooltips tooltip-content="{{property.description}}"
+                                             data-tests-id="{{property.description}}">
+                                            {{property.description}}
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
                 </perfect-scrollbar>
             </div>
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less
index fa6623f089..928f6719c6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less
@@ -319,63 +319,100 @@
       }
     }
   }
-  .table-container-flex .table .head .head-row {
-    text-align: left;
-    &.description {
-      flex: 2;
-    }
-    &.other {
-      flex: 0.25;
-      text-align: center;
-    }
-    &.occurrences {
-      flex: 0.75;
-    }
-  }
-  .data-row {
-    .ellipsis-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    &:not(.editable-row) {
-      background: @tlv_color_t;
-      cursor: default;
-      color: @main_color_n;
-    }
-    &.editable-row {
-      cursor: pointer;
-      .table-col-general:hover {
-        color: @main_color_b;
+  .table-container-flex .table {
+    .head .head-row {
+      text-align: left;
+      &.description {
+        flex: 2;
       }
-    }
-    .description-col {
-      flex: 2;
-    }
-    .occurrences-col {
-      flex: 0.75;
-    }
-    .other-col {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex: 0.25;
-      .trash-icon {
-        visibility: hidden;
+      &.other {
+        flex: 0.25;
+        text-align: center;
+      }
+      &.occurrences {
+        flex: 0.75;
       }
     }
-    &:hover {
-      .trash-icon {
-        visibility: visible;
+    .body .data-row {
+      border-bottom: none;
+      border-top: @main_color_o solid 1px;
+      .ellipsis-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &:not(.editable-row) {
+        background-color: @tlv_color_t;
+        cursor: default;
+        color: @main_color_n;
+      }
+      &.editable-row {
+        cursor: pointer;
+        .table-col-general:hover {
+          color: @main_color_b;
+        }
+      }
+      &.selected {
+        background-color: @tlv_color_v;
+        .name-col {
+          color: @main_color_a;
+        }
+        .sprite-new.arrow-up-small {
+          background-position: -858px -137px;
+          margin-bottom: 2px;
+        }
       }
+      .description-col {
+        flex: 2;
+      }
+      .occurrences-col {
+        flex: 0.75;
+      }
+      .other-col {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex: 0.25;
+        .trash-icon {
+          visibility: hidden;
+        }
+      }
+      &:hover {
+        .trash-icon {
+          visibility: visible;
+        }
+      }
+      .multiline-ellipsis {
+        line-height: 1.5em;
+        padding: 1px 0 1px 0;
+        /deep/ .ellipsis-directive-more-less {
+          float: none;
+          margin-left: 5px;
+          color: @main_color_a;
+        }
+      }
+    }
+  }
+
+  .item-opened.properties-section {
+    border: 4px solid @tlv_color_v !important;
+    max-height: 263px;
+    overflow: auto;
+    .properties-title {
+      .s_10;
+      margin-top: 10px;
     }
-    .multiline-ellipsis {
-      line-height: 1.5em;
-      padding: 1px 0 1px 0;
-      /deep/ .ellipsis-directive-more-less {
-        float: none;
-        margin-left: 5px;
-        color: @main_color_a;
+    .properties-table {
+      &.table-container-flex {
+        margin-top: 18px;
+      }
+      .table {
+        .head {
+          border-bottom: 1px solid @main_color_o;
+        }
+        .head, .table-col-general {
+          background-color: @main_color_p;
+        }
       }
     }
   }
-}
+}
\ No newline at end of file