Merge pull request #689 from weaveworks/684-colors

Rank-based colors for nodes

client/app/scripts/components/node-details.js

@@ -61,7 +61,7 @@ const NodeDetails = React.createClass({
       return this.renderLoading();
     }
 
-    const nodeColor = this.getNodeColorDark(details.label_major);
+    const nodeColor = this.getNodeColorDark(details.rank);
     const styles = {
       controls: {
         'backgroundColor': this.brightenColor(nodeColor)

client/app/scripts/mixins/node-color-mixin.js

@@ -1,17 +1,24 @@
 const d3 = require('d3');
 
 const colors = d3.scale.category20();
-
-// make sure the internet always gets the same color
-const internetLabel = 'the Internet';
-colors(internetLabel);
-
+const PSEUDO_COLOR = '#b1b1cb';
+let colorIndex = 0;
 
 const NodeColorMixin = {
   getNodeColor: function(text) {
+    colorIndex++;
+    // skip green and red (index 5-8 in d3.scale.category20)
+    if (colorIndex > 4 && colorIndex < 9) {
+      colors('_' + colorIndex);
+      return this.getNodeColor(text);
+    }
+
     return colors(text);
   },
   getNodeColorDark: function(text) {
+    if (text === undefined) {
+      return PSEUDO_COLOR;
+    }
     const color = d3.rgb(colors(text));
     let hsl = color.hsl();
 

render/detailed_node.go

@@ -26,6 +26,7 @@ type DetailedNode struct {
 	ID         string            `json:"id"`
 	LabelMajor string            `json:"label_major"`
 	LabelMinor string            `json:"label_minor,omitempty"`
+	Rank       string            `json:"rank,omitempty"`
 	Pseudo     bool              `json:"pseudo,omitempty"`
 	Tables     []Table           `json:"tables"`
 	Controls   []ControlInstance `json:"controls"`
@@ -115,6 +116,7 @@ func MakeDetailedNode(r report.Report, n RenderableNode) DetailedNode {
 		ID:         n.ID,
 		LabelMajor: n.LabelMajor,
 		LabelMinor: n.LabelMinor,
+		Rank:       n.Rank,
 		Pseudo:     n.Pseudo,
 		Tables:     tables,
 		Controls:   controls(r, n),

render/detailed_node_test.go

@@ -88,6 +88,7 @@ func TestMakeDetailedHostNode(t *testing.T) {
 		ID:         render.MakeHostID(fixture.ClientHostID),
 		LabelMajor: "client",
 		LabelMinor: "hostname.com",
+		Rank:       "hostname.com",
 		Pseudo:     false,
 		Controls:   []render.ControlInstance{},
 		Tables: []render.Table{
@@ -155,6 +156,7 @@ func TestMakeDetailedContainerNode(t *testing.T) {
 		ID:         fixture.ServerContainerID,
 		LabelMajor: "server",
 		LabelMinor: fixture.ServerHostName,
+		Rank:       "imageid456",
 		Pseudo:     false,
 		Controls:   []render.ControlInstance{},
 		Tables: []render.Table{