[CORD-2424] Adding Instances and Networks to the graph

Change-Id: Ib30081f4995930d979447af59124896f1308f54d
diff --git a/src/app/service-graph/services/renderer/node.renderer.ts b/src/app/service-graph/services/renderer/node.renderer.ts
index fb29046..18719f1 100644
--- a/src/app/service-graph/services/renderer/node.renderer.ts
+++ b/src/app/service-graph/services/renderer/node.renderer.ts
@@ -60,6 +60,8 @@
 
     this.renderServiceNodes(entering.filter('.service'));
     this.renderServiceInstanceNodes(entering.filter('.serviceinstance'));
+    this.renderInstanceNodes(entering.filter('.instance'));
+    this.renderNetworkNodes(entering.filter('.network'));
 
     node.exit().remove();
   }
@@ -106,6 +108,46 @@
     this.handleLabels(nodes); // eventually improve, padding top is wrong
   }
 
+  private renderInstanceNodes(nodes: d3.selection) {
+    nodes
+      .append('rect')
+      .attr({
+        rx: config.node.radius,
+        ry: config.node.radius
+      });
+
+    nodes
+      .append('path')
+      .attr({
+        d: this.XosServiceGraphIcons.get('instance').path,
+        transform: this.XosServiceGraphIcons.get('instance').transform,
+        class: 'icon'
+      });
+
+    this.positionServiceNodeGroup(nodes);
+    this.handleLabels(nodes);
+  }
+
+  private renderNetworkNodes(nodes: d3.selection) {
+    nodes
+      .append('rect')
+      .attr({
+        rx: config.node.radius,
+        ry: config.node.radius
+      });
+
+    nodes
+      .append('path')
+      .attr({
+        d: this.XosServiceGraphIcons.get('network').path,
+        transform: this.XosServiceGraphIcons.get('network').transform,
+        class: 'icon'
+      });
+
+    this.positionServiceNodeGroup(nodes);
+    this.handleLabels(nodes);
+  }
+
   private positionServiceNodeGroup(nodes: d3.selection) {
     const self = this;
     nodes.each(function (d: IXosSgNode) {
@@ -231,6 +273,7 @@
   }
 
   private getNodeLabel(n: any): string {
+    // NOTE for 'instances' display instance_name instead of name?
     return n.data.name ? n.data.name.toUpperCase() : n.data.id;
     // return n.data.name ? n.data.name.toUpperCase() + ` - ${n.data.id}` : n.data.id;
   }