[CORD-2424] Adding Instances and Networks to the graph
Change-Id: Ib30081f4995930d979447af59124896f1308f54d
diff --git a/src/app/service-graph/components/graph/graph.component.scss b/src/app/service-graph/components/graph/graph.component.scss
index 40b6f11..5d773a1 100644
--- a/src/app/service-graph/components/graph/graph.component.scss
+++ b/src/app/service-graph/components/graph/graph.component.scss
@@ -73,12 +73,12 @@
.node {
cursor: pointer;
+ fill: $background-color;
}
.node.service {
> rect {
stroke: $color-accent;
- fill: $background-color;
}
> .icon {
fill: $color-accent;
@@ -87,11 +87,28 @@
.node.serviceinstance {
> rect {
- stroke: green;
- fill: $background-color;
+ stroke: $serviceinstances-fg;
}
> .icon {
- fill: green;
+ fill: $serviceinstances-fg;
+ }
+ }
+
+ .node.instance {
+ > rect {
+ stroke: $instances-fg;
+ }
+ > .icon {
+ fill: $instances-fg;
+ }
+ }
+
+ .node.network {
+ > rect {
+ stroke: $networks-fg;
+ }
+ > .icon {
+ fill: $networks-fg;
}
}
@@ -114,12 +131,21 @@
}
line.ownership {
- stroke: green;
+ stroke: $serviceinstances-fg;
stroke-dasharray: 5;
}
line.serviceinstancelink {
- stroke: green;
+ stroke: $serviceinstances-fg;
+ }
+
+ line.instance_ownership {
+ stroke: $instances-fg;
+ stroke-dasharray: 5;
+ }
+
+ line.port {
+ stroke: $networks-fg;
}
}
.arrow-marker {
diff --git a/src/app/service-graph/components/graph/graph.component.ts b/src/app/service-graph/components/graph/graph.component.ts
index 5f84384..ed36654 100644
--- a/src/app/service-graph/components/graph/graph.component.ts
+++ b/src/app/service-graph/components/graph/graph.component.ts
@@ -26,7 +26,7 @@
import {IXosServiceGraphIcons} from '../../services/d3-helpers/graph-icons.service';
import {IXosNodePositioner} from '../../services/node-positioner.service';
import {IXosNodeRenderer} from '../../services/renderer/node.renderer';
-import {IXosSgNode} from '../../interfaces';
+import {IXosSgLink, IXosSgNode} from '../../interfaces';
import {IXosGraphConfig} from '../../services/graph.config';
class XosServiceGraphCtrl {
@@ -74,7 +74,6 @@
graph => {
this.graph = graph;
if (this.graph.nodes().length > 0) {
- this.loader = false;
this.renderGraph(this.graph);
}
},
@@ -154,6 +153,7 @@
this.XosNodePositioner.positionNodes(svgDim, nodes)
.then((nodes: IXosSgNode[]) => {
+ this.loader = false;
this.forceLayout
.nodes(nodes)
@@ -162,6 +162,15 @@
.linkDistance(config.force.linkDistance)
.charge(config.force.charge)
.gravity(config.force.gravity)
+ .linkStrength((link: IXosSgLink) => {
+ switch (link.type) {
+ case 'ownership':
+ case 'instance_ownership':
+ // NOTE make "ownsership" links stronger than other for positioning
+ return 1;
+ }
+ return 0.1;
+ })
.start();
// render nodes