diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
7 files changed, 69 insertions, 13 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html index ee090245f0..e1638fb00f 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -49,6 +49,9 @@ <span *ngIf="input.description" class="property-description-icon sprite-new show-desc" tooltip="{{input.description}}" tooltipDelay="0"></span> + <div class="delete-button-container"> + <span *ngIf="showDelete" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span> + </div> </div> <!-- From Instance --> <div class="table-cell col3"> @@ -124,9 +127,6 @@ [testId]="'input-' + input.name" [constraints] = "getConstraints(input)"> </dynamic-element> - <div class="delete-button-container"> - <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span> - </div> </div> </div> </div> diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less index 74520b6314..ae6d58e72e 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less @@ -182,7 +182,8 @@ // Column: Property Name &.col1 { flex: 1 0 130px; - max-width: 250px; + max-width: 300px; + display: flex; justify-content: space-between; diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts index 3fa7ab4a80..5ca119c075 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -43,14 +43,14 @@ export class InputsTableComponent { @Input() readonly: boolean; @Input() isLoading: boolean; @Input() componentType: string; - + @Input() showDelete:boolean; @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>(); @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>(); @Input() fePropertiesMap: InstanceFePropertiesMap; @ViewChildren('metadataViewChildren') public metadataViewChildren: QueryList<DynamicElementComponent>; - + sortBy: String; reverse: boolean; selectedInputToDelete: InputFEModel; @@ -107,15 +107,15 @@ export class InputsTableComponent { var mapKeyError = input.metadataMapKeyError; if(input.metadataMapKeyError){ dynamicElementComponent.cmpRef.instance.control.setErrors({mapKeyError}); - } + } }; onMetadataValueChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => { input.updateMetadataValue(metadataEntry, event.value); this.inputChanged.emit(input); }; - - + + createNewMetadataEntry = (input: InputFEModel): void => { let metadataEntry = new MetadataEntry("", ""); input.addMetadataEntry(metadataEntry); @@ -126,7 +126,7 @@ export class InputsTableComponent { input.deleteMetadataEntry(metadataEntry); this.inputChanged.emit(input); } - + onDeleteInput = () => { this.deleteInput.emit(this.selectedInputToDelete); this.modalService.closeCurrentModal(); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index 6856ae8358..6b3e92adfd 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -44,6 +44,7 @@ <inputs-table class="properties-table" [fePropertiesMap]="instanceFePropertiesMap" [readonly]="isReadonly" + [showDelete]="!isReadOnly && isSelf()" [inputs]="inputs | searchFilter:'name':searchQuery" [instanceNamesMap]="componentInstanceNamesMap" [isLoading]="loadingInputs" @@ -80,8 +81,10 @@ </div> </div> <div class="right-column"> - <div *ngIf="!isReadonly" class="add-btn" + <div *ngIf="!isReadonly && !isInputsTabSelected" class="add-btn" (click)="addProperty()" [ngClass]="{'disabled': !isSelf()}">Add Property</div> + <div *ngIf="!isReadonly && isInputsTabSelected" class="add-btn" + (click)="addInput()" [ngClass]="{'disabled': !isSelf()}">Add Input</div> <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border"> <tab tabTitle="Composition"> <div class="hierarchy-nav-container"> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index e4a8749386..74e2680b80 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -1052,6 +1052,41 @@ export class PropertiesAssignmentComponent { modal.instance.open(); } + /*** addInput ***/ + addInput = () => { + let modalTitle = 'Add Input'; + let modal = this.ModalService.createCustomModal(new ModalModel( + 'sm', + modalTitle, + null, + [ + new ButtonModel('Save', 'blue', () => { + modal.instance.dynamicContent.instance.isLoading = true; + const newInput: InputBEModel = modal.instance.dynamicContent.instance.propertyModel; + this.topologyTemplateService.createServiceInput(this.component.uniqueId, newInput) + .subscribe((response) => { + modal.instance.dynamicContent.instance.isLoading = false; + const newInputProp: InputFEModel = this.inputsUtils.convertInputBEToInputFE(response); + this.inputs.push(newInputProp); + modal.instance.close(); + }, (error) => { + modal.instance.dynamicContent.instance.isLoading = false; + this.Notification.error({ + message: 'Failed to add input:' + error, + title: 'Failure' + }); + }); + }, () => !modal.instance.dynamicContent.instance.checkFormValidForSubmit()), + new ButtonModel('Cancel', 'outline grey', () => { + modal.instance.close(); + }), + ], + null + )); + this.ModalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {}); + modal.instance.open(); + } + /*** SEARCH RELATED FUNCTIONS ***/ searchPropertiesInstances = (filterData:FilterPropertiesAssignmentData) => { let instanceBePropertiesMap:InstanceBePropertiesMap; diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts index 408a00e7b4..948c9032bf 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts @@ -19,12 +19,13 @@ */ import { Injectable } from '@angular/core'; -import { InputFEModel} from "app/models"; +import { InputBEModel, InputFEModel } from "app/models"; +import { DataTypeService } from "app/ng2/services/data-type.service"; @Injectable() export class InputsUtils { - constructor() {} + constructor(private dataTypeService:DataTypeService) {} public initDefaultValueObject = (input: InputFEModel): void => { input.resetDefaultValueObjValidation(); @@ -37,4 +38,10 @@ export class InputsUtils { this.initDefaultValueObject(input); } + public convertInputBEToInputFE = (input: InputBEModel): InputFEModel => { + const newFEInput: InputFEModel = new InputFEModel(input); //Convert input to FE + this.initDefaultValueObject(newFEInput); + return newFEInput; + } + } diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts index 14bf84599c..492acdc1d6 100644 --- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts @@ -227,6 +227,16 @@ export class TopologyTemplateService { }); } + createServiceInput(componentId: string, inputModel: InputBEModel): Observable<InputBEModel> { + const serverObject = {}; + serverObject[inputModel.name] = inputModel; + return this.http.post<InputBEModel>(this.baseUrl + 'services/' + componentId + '/create/input', serverObject) + .map((res) => { + const input: InputBEModel = new InputBEModel(res); + return input; + }); + } + getDependencies(componentType: string, componentId: string): Observable<IDependenciesServerResponse[]> { return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies'); } |