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