summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/view-models')
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts24
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html62
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less141
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