2 files changed, 60 insertions, 1 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
index f88db47524..2a7fd74e53 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
@@ -164,12 +164,54 @@ export class CommonGraphUtils {
         if (!this.isRelationCertified(cy.nodes(), link.source, link.target)) {
             link.classes = 'not-certified-link';
         }
-        cy.add({
+        let linkElement = cy.add({
             group: 'edges',
             data: link,
             classes: link.classes
         });
+        this.initLinkTooltip(linkElement, link);
+    };
+
+    /**
+     * This function will init qtip tooltip on the link
+     * @params linkElement - the link we want the tooltip to apply on,
+     * link - the link obj
+     */
+    public initLinkTooltip(linkElement:Cy.CollectionElements, link:CompositionCiLinkBase) {
+
+        let opts = {
+            content: function () {
+                return '<div class="line">' +
+                            '<span class="req-cap-label">R: </span>' +
+                            '<span>'+ link.relation.relationships[0].relation.requirement + '</span>' +
+                        '</div>' +
+                        '<div class="line">' +
+                            '<div class="sprite-new link-tooltip-arrow"></div>' +
+                            '<span class="req-cap-label">C: </span>' +
+                            '<span>' + link.relation.relationships[0].relation.capability + '</span>' +
+                        '</div>';
+            },
+            position: {
+                my: 'top center',
+                at: 'bottom center',
+                adjust: {x:0, y:0}
+            },
+            style: {
+                classes: 'qtip-dark qtip-rounded qtip-custom link-qtip',
+                tip: {
+                    width: 16,
+                    height: 8
+                }
+            },
+            show: {
+                event: 'mouseover',
+                delay: 1000
+            },
+            hide: {event: 'mouseout mousedown'},
+            includeLabels: true
+        };
 
+        linkElement.qtip(opts);
     };
 
     /**
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
index 7e21f8293b..36c75c55fc 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
@@ -225,6 +225,23 @@ export class ComponentInstanceNodesStyle {
                 css: {
                     'overlay-opacity': 0
                 }
+            }, {
+                selector: '.configuration-node',
+                css: {
+                    'background-color': 'rgb(255,255,255)',
+                    'shape': 'rectangle',
+                    'label': 'data(displayName)',
+                    'background-image': 'data(img)',
+                    'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'background-opacity': 0,
+                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+                    'overlay-opacity': 0
+                }
             }
         ]
     }