Fix Node Filter faults

Issue-ID: SDC-3798
Signed-off-by: aribeiro <anderson.ribeiro@est.tech>
Change-Id: If8f3cbed8bf63bc1667e279b48ac0c2488d6a350

3 files changed, 38 insertions, 32 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
index 8d2357d6ad..1328747f88 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
@@ -387,6 +387,7 @@ export class CompositionGraphComponent implements AfterViewInit {
     }
 
     private loadCompositionData = () => {
+        console.log("Loading composition data....")
         this.loaderService.activate();
         this.topologyTemplateService.getComponentCompositionData(this.topologyTemplateId, this.topologyTemplateType).subscribe((response: ComponentGenericResponse) => {
             if (this.topologyTemplateType === ComponentType.SERVICE) {
@@ -658,6 +659,12 @@ export class CompositionGraphComponent implements AfterViewInit {
             }
         );
 
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, () => {
+            this._cy.elements().remove();
+            this.loadCompositionData();
+            this.selectTopologyTemplate();
+        });
+
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstanceId: string) => {
             const nodeToDelete = this._cy.getElementById(componentInstanceId);
             this.nodesGraphUtils.deleteNode(this._cy, this.topologyTemplate, nodeToDelete);
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
index 8a577aef77..5f9fac5f09 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
@@ -21,18 +21,18 @@
                 </div>
 
                 <div class="i-sdc-form-item rule-input-field">
-                    <label class="i-sdc-form-label required" >Function Type</label>
-                    <ui-element-dropdown class="i-sdc-form-select" data-tests-id="functionType" [values]="functionTypes" [(value)]="currentRule.sourceType" (change)="onSelectFunctionType()"></ui-element-dropdown>
+                    <label class="i-sdc-form-label required">Function Type</label>
+                    <ui-element-dropdown class="i-sdc-form-select" data-tests-id="functionType" [values]="functionTypes" [(value)]="currentRule.sourceType" (elementChanged)="onSelectFunctionType($event.value)"></ui-element-dropdown>
                 </div>
 
                 <div class="i-sdc-form-item rule-input-field" *ngIf="isPropertyFunctionSelected()">
-                    <label class="i-sdc-form-label required" >Source</label>
-                    <ui-element-dropdown class="i-sdc-form-select" data-tests-id="sourceType" [values]="sourceTypes" [(value)]="currentRule.sourceName" (change)="onSelectSourceType()"></ui-element-dropdown>
+                    <label class="i-sdc-form-label required">Source</label>
+                    <ui-element-dropdown class="i-sdc-form-select" data-tests-id="sourceType" [values]="sourceTypes" [(value)]="currentRule.sourceName" (elementChanged)="onSelectSourceType($event.value)"></ui-element-dropdown>
                 </div>
 
                 <div  [ngClass]="isComplexListMapType() && isStaticSource() ? 'complex-input-field' : ''"
-                    class="rule-input-field assigned-value-field">
-                    <label class="i-sdc-form-label required" >{{assignedValueLabel}}</label>
+                      class="i-sdc-form-item rule-input-field">
+                    <label class="i-sdc-form-label required">{{assignedValueLabel}}</label>
                     <dynamic-property
                         *ngIf="isStaticSource() && isComplexListMapType()"
                         [selectedPropertyId]="selectedPropertyObj.uniqueId"
@@ -53,7 +53,7 @@
                             [type]="selectedPropertyObj ? selectedPropertyObj.type : 'string'">
                     </dynamic-element>
                     <ui-element-dropdown *ngIf="!isStaticSource()"
-                                         class="rule-assigned-value"
+                                         class="i-sdc-form-select"
                                          data-tests-id="ruleAssignedValue"
                                          [(value)]="currentRule.value"
                                          [values]="listOfValuesToAssign">
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
index c6b3b65512..1aea85a618 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
@@ -86,12 +86,12 @@ export class ServiceDependenciesEditorComponent {
   ngOnInit() {
     this.currentIndex = this.input.serviceRuleIndex;
     this.serviceRulesList = this.input.serviceRules;
+    this.initFunctionTypes();
     this.initCurrentRule();
     this.currentServiceName = this.input.currentServiceName;
     this.operatorTypes = this.input.operatorTypes;
     this.selectedServiceProperties = this.input.selectedInstanceProperties;
     this.ddValueSelectedServicePropertiesNames = _.map(this.input.selectedInstanceProperties, (prop) => new DropdownValue(prop.name, prop.name));
-    this.initFunctionTypes();
     if (this.SOURCE_TYPES.STATIC.value !== this.currentRule.sourceType) {
       this.loadSourceTypesData();
     }
@@ -107,8 +107,13 @@ export class ServiceDependenciesEditorComponent {
           value: '',
           constraintOperator: OPERATOR_TYPES.EQUAL
         });
-    if (this.currentRule && this.currentRule.sourceType === this.SOURCE_TYPES.SERVICE_INPUT.value) {
-      this.currentRule.sourceName = this.input.compositeServiceName;
+    if (this.currentRule && this.currentRule.sourceType === this.SOURCE_TYPES.STATIC.value){
+      this.sourceTypes.push({
+        label: this.SOURCE_TYPES.STATIC.label,
+        value: this.SOURCE_TYPES.STATIC.value,
+        assignedLabel: this.SOURCE_TYPES.STATIC.value,
+        type: this.SOURCE_TYPES.STATIC.value,
+        options: []});
     }
   }
 
@@ -126,25 +131,31 @@ export class ServiceDependenciesEditorComponent {
     this.currentRule.value = "";
   }
 
-  onSelectFunctionType() {
-    this.currentRule.value = "";
+  onSelectFunctionType(value: any) {
     this.currentRule.sourceName = "";
     this.listOfValuesToAssign = [];
-    this.currentRule.sourceType = this.updateCurrentSourceType(this.currentRule.sourceType);
+    this.currentRule.sourceType = value;
     this.loadSourceTypesData();
     this.updateSourceTypesRelatedValues();
   }
 
-  onSelectSourceType() {
-    this.currentRule.value = "";
+  onSelectSourceType(value: any) {
+    this.currentRule.sourceName = value;
     this.updateSourceTypesRelatedValues();
+    if (this.listOfValuesToAssign) {
+      this.currentRule.value = this.listOfValuesToAssign[0].value
+    }
   }
 
-  loadSourceTypesData() {
+  private loadSourceTypesData() {
+    const SELF = "SELF";
+    if (this.SOURCE_TYPES.SERVICE_INPUT.value === this.currentRule.sourceType) {
+      this.currentRule.sourceName = SELF;
+    }
     this.sourceTypes = [];
     this.sourceTypes.push({
-      label: this.input.compositeServiceName,
-      value: this.input.compositeServiceName,
+      label: SELF,
+      value: SELF,
       assignedLabel: this.currentRule.sourceType == this.SOURCE_TYPES.SERVICE_PROPERTY.value
           ? this.SOURCE_TYPES.SERVICE_PROPERTY.label : this.SOURCE_TYPES.SERVICE_INPUT.label,
       type: this.currentRule.sourceType == this.SOURCE_TYPES.SERVICE_PROPERTY.value
@@ -152,9 +163,7 @@ export class ServiceDependenciesEditorComponent {
       options: this.loadSourceTypeBySelectedFunction().get(this.currentRule.sourceType)
     });
 
-    if (this.currentRule.sourceType === this.SOURCE_TYPES.SERVICE_INPUT.value) {
-      this.currentRule.sourceName = this.input.compositeServiceName;
-    } else {
+    if (this.currentRule.sourceType !== this.SOURCE_TYPES.SERVICE_INPUT.value) {
       if (this.input.selectedInstanceSiblings && this.isPropertyFunctionSelected) {
         _.forEach(this.input.selectedInstanceSiblings, (sib) =>
             this.sourceTypes.push({
@@ -217,17 +226,6 @@ export class ServiceDependenciesEditorComponent {
     }
   }
 
-  private updateCurrentSourceType = (sourceType: string): string => {
-    switch (sourceType) {
-      case this.SOURCE_TYPES.STATIC.value:
-        return this.SOURCE_TYPES.STATIC.value;
-      case this.SOURCE_TYPES.SERVICE_PROPERTY.value:
-        return this.SOURCE_TYPES.SERVICE_PROPERTY.value;
-      case this.SOURCE_TYPES.SERVICE_INPUT.value:
-        return this.SOURCE_TYPES.SERVICE_INPUT.value;
-    }
-  }
-
   filterOptionsByType() {
     if (!this.selectedPropertyObj) {
       this.listOfValuesToAssign = [];
@@ -250,6 +248,7 @@ export class ServiceDependenciesEditorComponent {
       const isStatic = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value;
       return this.currentRule.isValidRule(isStatic);
     }
+
     // for update all rules
     return this.serviceRulesList.every((rule) => rule.isValidRule(rule.sourceName === this.SOURCE_TYPES.STATIC.value));
   }