diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment')
4 files changed, 63 insertions, 52 deletions
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 fa3270ec77..0b50357a5c 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 @@ -5,6 +5,7 @@ <tab tabTitle="Properties"> <properties-table class="properties-table" [fePropertiesMap]="instanceFePropertiesMap" + [feInstanceNamesMap]="componentInstanceNamesMap" [searchTerm]="searchQuery" [selectedPropertyId]="selectedFlatProperty.path" [propertyNameSearchText]="searchPropertyName" @@ -22,6 +23,7 @@ <inputs-table class="properties-table" [readonly]="isReadonly" [inputs]="inputs | searchFilter:'name':searchQuery" + [instanceNamesMap]="componentInstanceNamesMap" [isLoading]="loadingInputs" (deleteInput)="deleteInput($event)" (inputValueChanged)="inputValueChanged($event)"></inputs-table> @@ -29,10 +31,10 @@ </tabs> <div class="header"> <div class="search-filter-container" [class.without-filter]="isInpusTabSelected"> + <span *ngIf="displayClearSearch && !isInpusTabSelected" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span> <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" /> <span class="sprite search-icon"></span> <filter-properties-assignment *ngIf="!isInpusTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment> - <span *ngIf="displayClearSearch && !isInpusTabSelected" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span> </div> <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly" (click)="declareProperties()">Declare</button> </div> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less index 8df479ffa6..15244e5fa5 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less @@ -98,17 +98,13 @@ } } - .advance-search{ - - } + .clear-filter{ cursor: pointer; - color: @main_color_c; - font-family: @font-omnes-medium-italic; + color:#009fdb; text-decoration: underline; - position: relative; - top: 4px; - right: 16px; + padding-right:10px; + font-size:12px; } .declare-button{ @@ -170,8 +166,7 @@ } .hierarchy-nav-container { - flex:1; - overflow: auto; + display:flex; flex-direction: column; height: 100%; } @@ -187,6 +182,8 @@ } .hierarchy-nav { + flex:1; + overflow:auto; display: grid; margin-top: 1em; margin-left: 1em; 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 e66ed59ad7..3efe866479 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 @@ -22,7 +22,8 @@ import {EventListenerService} from "app/services/event-listener-service" export class PropertiesAssignmentComponent { title = "Properties & Inputs"; - component:ComponentData; + component: ComponentData; + componentInstanceNamesMap: Map<string, string> = new Map<string, string>();//instanceUniqueId, name propertiesNavigationData = []; instancesNavigationData = []; @@ -80,7 +81,7 @@ export class PropertiesAssignmentComponent { .getComponentInputs(this.component) .subscribe(response => { _.forEach(response.inputs, (input: InputBEModel) => { - this.inputs.push(new InputFEModel(input)); + this.inputs.push(new InputFEModel(input)); //only push items that were declared via SDC }); this.loadingInputs = false; @@ -92,6 +93,7 @@ export class PropertiesAssignmentComponent { _.forEach(this.instances, (instance) => { this.instancesNavigationData.push(instance); + this.componentInstanceNamesMap[instance.uniqueId] = instance.name; }); this.loadingInstances = false; if (this.instancesNavigationData[0] == undefined) { @@ -129,12 +131,12 @@ export class PropertiesAssignmentComponent { this.selectedInstanceType = resourceInstance.originType; this.loadingProperties = true; - if(resourceInstance.originType === ResourceType.VF) { + if(this.isInput(resourceInstance.originType)) { this.componentInstanceServiceNg2 .getComponentInstanceInputs(this.component, resourceInstance) .subscribe(response => { instanceBePropertiesMap[resourceInstance.uniqueId] = response; - this.processInstancePropertiesResponse(instanceBePropertiesMap); + this.processInstancePropertiesResponse(instanceBePropertiesMap, true); this.loadingProperties = false; }); @@ -143,7 +145,7 @@ export class PropertiesAssignmentComponent { .getComponentInstanceProperties(this.component, resourceInstance.uniqueId) .subscribe(response => { instanceBePropertiesMap[resourceInstance.uniqueId] = response; - this.processInstancePropertiesResponse(instanceBePropertiesMap); + this.processInstancePropertiesResponse(instanceBePropertiesMap, false); this.loadingProperties = false; }); } @@ -159,8 +161,8 @@ export class PropertiesAssignmentComponent { /** * Entry point handling response from server */ - processInstancePropertiesResponse = (instanceBePropertiesMap:InstanceBePropertiesMap) => { - this.instanceFePropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(instanceBePropertiesMap, this.inputs); //create flattened children, disable declared props, and init values + processInstancePropertiesResponse = (instanceBePropertiesMap: InstanceBePropertiesMap, originTypeIsVF: boolean) => { + this.instanceFePropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(instanceBePropertiesMap, originTypeIsVF, this.inputs); //create flattened children, disable declared props, and init values this.checkedPropertiesCount = 0; }; @@ -171,7 +173,7 @@ export class PropertiesAssignmentComponent { // Copying the actual value from the object ref into the value if it's from a complex type event.value = event.getJSONValue(); - if (this.selectedInstanceData.originType === ResourceType.VF) { + if (this.isInput(this.selectedInstanceData.originType)) { console.log("I want to update input value on the resource instance"); let inputToUpdate = new PropertyBEModel(event); this.componentInstanceServiceNg2 @@ -279,7 +281,7 @@ export class PropertiesAssignmentComponent { }); let inputsToCreate: InstancePropertiesAPIMap; - if (this.selectedInstanceType !== ResourceType.VF) { + if (!this.isInput(this.selectedInstanceType)) { inputsToCreate = new InstancePropertiesAPIMap(null, selectedProperties); } else { inputsToCreate = new InstancePropertiesAPIMap(selectedProperties, null); @@ -301,12 +303,12 @@ export class PropertiesAssignmentComponent { updatePropertyValueAfterDeclare = (input: InputFEModel) => { if (this.instanceFePropertiesMap[input.instanceUniqueId]) { let propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[input.instanceUniqueId], (feProperty: PropertyFEModel) => { - return feProperty.name == input.relatedProperty.name; + return feProperty.name == input.relatedPropertyName; }); - - propertyForUpdatindVal.setAsDeclared(input.relatedProperty.nestedPath); //set prop as declared before assigning value - this.propertiesService.disableRelatedProperties(propertyForUpdatindVal, input.relatedProperty.nestedPath); - this.propertiesUtils.resetPropertyValue(propertyForUpdatindVal, input.relatedProperty.value, input.relatedProperty.nestedPath); + let inputPath = (input.inputPath && input.inputPath != propertyForUpdatindVal.name) ? input.inputPath : undefined; + propertyForUpdatindVal.setAsDeclared(inputPath); //set prop as declared before assigning value + this.propertiesService.disableRelatedProperties(propertyForUpdatindVal, inputPath); + this.propertiesUtils.resetPropertyValue(propertyForUpdatindVal, input.relatedPropertyValue, inputPath); } } @@ -357,7 +359,7 @@ export class PropertiesAssignmentComponent { .filterComponentInstanceProperties(this.component, filterData) .subscribe(response => { - this.processInstancePropertiesResponse(response); + this.processInstancePropertiesResponse(response, false); this.hierarchyPropertiesDisplayOptions.searchText = filterData.propertyName;//mark results in tree this.searchPropertyName = filterData.propertyName;//mark in table this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Composition']); @@ -373,6 +375,7 @@ export class PropertiesAssignmentComponent { this.hierarchyPropertiesDisplayOptions.searchText = ""; this.displayClearSearch = false; this.advanceSearch.clearAll(); + this.searchQuery = ''; }; clickOnClearSearch = () => { @@ -382,4 +385,8 @@ export class PropertiesAssignmentComponent { this.hierarchyNavTabs, 'triggerTabChange', ['Composition']); }; + private isInput = (instanceType:string):boolean =>{ + return instanceType === ResourceType.VF || instanceType === ResourceType.PNF; + } + } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts index bdfbc4c402..bd629939be 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts @@ -18,10 +18,9 @@ export class PropertiesUtils { * 3. Initialize valueObj (which also creates any new list/map flattened children as needed) * Returns InstanceFePropertiesMap */ - public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, inputs:Array<InputFEModel>): InstanceFePropertiesMap => { + public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, isVF:boolean, inputs?:Array<InputFEModel>): InstanceFePropertiesMap => { let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap(); angular.forEach(instancePropertiesMap, (properties:Array<PropertyBEModel>, instanceId:string) => { - let instanceInputs: Array<InputFEModel> = inputs.filter(input => input.instanceUniqueId == instanceId); let propertyFeArray: Array<PropertyFEModel> = []; _.forEach(properties, (property: PropertyBEModel) => { @@ -34,12 +33,19 @@ export class PropertiesUtils { if (newFEProp.derivedDataType == DerivedPropertyType.COMPLEX) { //Create children if prop is not simple, list, or map. newFEProp.flattenedChildren = this.createFlattenedChildren(newFEProp.type, newFEProp.name); } - if (instanceInputs.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children - instanceInputs.filter(input => input.relatedProperty.name == newFEProp.name).forEach((input) => { - newFEProp.setAsDeclared(input.relatedProperty.nestedPath); //if a path was sent, its a child prop. this param is optional - this.propertiesService.disableRelatedProperties(newFEProp, input.relatedProperty.nestedPath); + if (newFEProp.getInputValues && newFEProp.getInputValues.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children + newFEProp.getInputValues.forEach(propInputDetail => { + let inputPath = propInputDetail.inputPath; + if (!isVF && !inputPath) { //TODO: this is a workaround until Marina adds inputPath + let input = inputs.find(input => input.uniqueId == propInputDetail.inputId); + if (!input) { console.log("CANNOT FIND INPUT FOR " + propInputDetail.inputId); return; } + else inputPath = input.inputPath; + } + if (isVF || inputPath == newFEProp.name) inputPath = undefined; + newFEProp.setAsDeclared(inputPath); //if a path is sent, its a child prop. this param is optional + this.propertiesService.disableRelatedProperties(newFEProp, inputPath); }); - } + } this.initValueObjectRef(newFEProp); //initialize valueObj. propertyFeArray.push(newFEProp); newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children @@ -51,19 +57,8 @@ export class PropertiesUtils { }); return instanceFePropertiesMap; } - private createListOrMapChildrenFromValueObj = (property: PropertyFEModel) => { - if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP) - && Object.keys(property.valueObj).length) { - - Object.keys(property.valueObj).forEach((key) => { - let newProps: Array<DerivedFEProperty> = this.createListOrMapChildren(property, key, property.valueObj[key]); - property.flattenedChildren.push(...newProps); - }); - - } - } - public createListOrMapChildren = (property:PropertyBEModel, key: string, valueObj: any): Array<DerivedFEProperty> => { + public createListOrMapChildren = (property:PropertyFEModel | DerivedFEProperty, key: string, valueObj: any): Array<DerivedFEProperty> => { let newProps: Array<DerivedFEProperty> = []; let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj); newProps.push(parentProp); @@ -101,10 +96,12 @@ export class PropertiesUtils { } else { property.valueObj = _.merge({}, JSON.parse(property.defaultValue || '{}'), JSON.parse(property.value || '{}')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. } - if (property.derivedDataType == DerivedPropertyType.COMPLEX) { - this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name); + if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP) && Object.keys(property.valueObj).length) { + Object.keys(property.valueObj).forEach((key) => { + property.flattenedChildren.push(...this.createListOrMapChildren(property, key, property.valueObj[key])) + }); } else { - this.createListOrMapChildrenFromValueObj(property); + this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name); } } } @@ -116,6 +113,7 @@ export class PropertiesUtils { */ public assignFlattenedChildrenValues = (parentValueJSON: any, derivedPropArray: Array<DerivedFEProperty>, parentName: string) => { if (!derivedPropArray || !parentName) return; + let propsToPushMap: Map<number, Array<DerivedFEProperty>> = new Map<number, Array<DerivedFEProperty>>(); derivedPropArray.forEach((prop, index) => { let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name @@ -124,20 +122,27 @@ export class PropertiesUtils { if ((prop.derivedDataType == DerivedPropertyType.SIMPLE || prop.isDeclared) && typeof prop.valueObj == 'object') { //Stringify objects that should be strings prop.valueObj = JSON.stringify(prop.valueObj); } else { //parse strings that should be objects - if ((prop.derivedDataType == DerivedPropertyType.COMPLEX || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj != 'object') { + if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') { prop.valueObj = JSON.parse(prop.valueObj || '{}'); } else if (prop.derivedDataType == DerivedPropertyType.LIST && typeof prop.valueObj != 'object') { prop.valueObj = JSON.parse(prop.valueObj || '[]'); - } - if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && Object.keys(prop.valueObj).length) { + } else if (prop.derivedDataType == DerivedPropertyType.MAP && typeof prop.valueObj != 'object' && (!prop.isChildOfListOrMap || !prop.schema.property.isSimpleType)) { //dont parse values for children of map of simple + prop.valueObj = JSON.parse(prop.valueObj || '{}'); + } + if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj == 'object' && Object.keys(prop.valueObj).length) { let newProps: Array<DerivedFEProperty> = []; Object.keys(prop.valueObj).forEach((key) => { newProps.push(...this.createListOrMapChildren(prop, key, prop.valueObj[key]));//create new children, assign their values, and then add to array }); - derivedPropArray.splice(index + 1, 0, ...newProps); + propsToPushMap[index + 1] = newProps; } } }); + + //add props after we're done looping (otherwise our loop gets messed up). Push in reverse order, so we dont mess up indexes. + Object.keys(propsToPushMap).reverse().forEach((indexToInsert) => { + derivedPropArray.splice(+indexToInsert, 0, ...propsToPushMap[indexToInsert]); //slacker parsing + }); } public resetPropertyValue = (property: PropertyFEModel, newValue: string, nestedPath?: string): void => { |