diff options
Diffstat (limited to 'catalog-ui/src/app/view-models')
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 |