commit 72181595c087cdd0e6497efcf4c4b3d99ddd1bef
author Matteo Scandolo <matteo.scandolo@gmail.com> Tue Jul 25 14:49:40 2017 -0700
committer Matteo Scandolo <matteo.scandolo@gmail.com> Thu Jul 27 13:20:56 2017 -0700
tree b961708f20fb98b2f2971a91dce056dc5c7ef8c8
parent 53f99c8bbd582e42da0bf1ec2bc8acbb4fceeb4a

[CORD-1250] Rendering new ServiceInstance Models

Change-Id: Ic8fdb4775b119816b4b7aa085e6af699eaa13a67

src/app/service-graph/components/fine-grained/fine-grained.component.scss

diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.scss b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
index c7fcfbc..37605f9 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.scss
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
@@ -41,7 +41,7 @@
         stroke: blue;
       }
 
-      &.tenant > rect{
+      &.tenant, &.serviceinstance > rect{
         stroke: green;
       }
 
@@ -60,6 +60,15 @@
   .link-group {
     line {
       stroke: $color-accent;
+
+      &.ext-service-instance {
+        stroke: green;
+      }
+
+      &.ext-owner {
+        stroke: green;
+        stroke-dasharray: 5;
+      }
     }
   }
   .arrow-marker {

src/app/service-graph/components/fine-grained/fine-grained.component.ts

diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.ts b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
index 3fc47a5..6d57aad 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.ts
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
@@ -1,4 +1,3 @@
-import {IXosServiceGraphStore} from '../../services/graph.store';
 import './fine-grained.component.scss';
 import * as d3 from 'd3';
 import * as $ from 'jquery';
@@ -11,11 +10,12 @@
 import {IXosSidePanelService} from '../../../core/side-panel/side-panel.service';
 import {IXosGraphHelpers} from '../../services/d3-helpers/graph.helpers';
 import {IXosServiceGraphExtender, IXosServiceGraphReducer} from '../../services/graph.extender';
+import {IXosServiceInstanceGraphStore} from '../../services/service-instance.graph.store';
 
 class XosFineGrainedTenancyGraphCtrl {
   static $inject = [
     '$log',
-    'XosServiceGraphStore',
+    'XosServiceInstanceGraphStore',
     'XosDebouncer',
     'XosModelDiscoverer',
     'XosSidePanel',
@@ -39,7 +39,7 @@
 
   constructor(
     private $log: ng.ILogService,
-    private XosServiceGraphStore: IXosServiceGraphStore,
+    private XosServiceInstanceGraphStore: IXosServiceInstanceGraphStore,
     private XosDebouncer: IXosDebouncer,
     private XosModelDiscoverer: IXosModelDiscovererService,
     private XosSidePanel: IXosSidePanelService,
@@ -56,10 +56,10 @@
       this.renderGraph();
     });
 
-    this.GraphSubscription = this.XosServiceGraphStore.get()
+    this.GraphSubscription = this.XosServiceInstanceGraphStore.get()
       .subscribe(
         (graph) => {
-          this.$log.debug(`[XosFineGrainedTenancyGraphCtrl] Fine-Grained Event and render`, graph);
+          this.$log.debug(`[XosServiceInstanceGraphStore] Fine-Grained Event and render`, graph);
 
           if (!graph || !graph.nodes || !graph.links) {
             return;
@@ -159,9 +159,6 @@
         });
     };
     const getLinkStrenght = (l: IXosServiceGraphLink) => {
-      if (l.id.indexOf('service') > -1) {
-        return 0.1;
-      }
       return 1;
     };
     const svgDim = this.getSvgDimensions();
@@ -311,6 +308,7 @@
     const entering = node.enter()
       .append('g')
       .attr({
+        id: n => n.id,
         class: n => `node ${n.type} ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`,
         transform: (n, i) => `translate(${hStep * i}, ${vStep * i})`
       })
@@ -343,10 +341,10 @@
       });
 
     this.renderServiceNodes(entering.filter('.service'));
-    this.renderTenantNodes(entering.filter('.tenant'));
+    this.renderTenantNodes(entering.filter('.serviceinstance'));
     this.renderNetworkNodes(entering.filter('.network'));
     this.renderSubscriberNodes(entering.filter('.subscriber'));
-    this.renderSubscriberNodes(entering.filter('.tenantroot'));
+    // this.renderSubscriberNodes(entering.filter('.tenantroot'));
   }
 
   private renderLinks(links: IXosServiceGraphLink[]) {
@@ -358,6 +356,7 @@
 
     entering.append('line')
       .attr({
+        id: n => n.id,
         class: n => `link ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`,
         'marker-start': 'url(#arrow)'
       });