1 files changed, 10 insertions, 1 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 3cab4b300f..8d2357d6ad 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
@@ -25,7 +25,8 @@ import {
     ZoneInstanceAssignmentType,
     ZoneInstanceMode,
     ZoneInstanceType,
-    Requirement
+    Requirement,
+    Capability
 } from 'app/models';
 import { ForwardingPath } from 'app/models/forwarding-path';
 import { CompositionCiServicePathLink } from 'app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link';
@@ -649,6 +650,14 @@ export class CompositionGraphComponent implements AfterViewInit {
                 .find(r => r.uniqueId === requirement.uniqueId).external = requirement.external;
         });
 
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_CAPABILITY_EXTERNAL_CHANGED,
+            (uniqueId: string, capability: Capability) => {
+                const graphCapability = this._cy.getElementById(uniqueId).data()
+                    .componentInstance.capabilities[capability.type].find(cap => cap.uniqueId === capability.uniqueId);
+                graphCapability.external = capability.external;
+            }
+        );
+
         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);