From 2c74196c1c8310c70635c4c7b093d1ffb6839f8b Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Fri, 29 Jan 2016 11:26:59 +0100
Subject: [PATCH] Fixes host node/details panel color mismatch

- 'label_major' has been changed to 'label' in the details api response.
- getNodeColorDark was giving up too early if a rank wasn't provided.
  The topo diagram which uses getNodeColor will select a color even w/
  no rank. Hosts don't have ranks at the mo.
---
 client/app/scripts/charts/node.js             | 4 ++--
 client/app/scripts/components/node-details.js | 8 +++++---
 client/app/scripts/utils/color-utils.js       | 9 ++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index 39150e6fe..f78f9f4ab 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -25,8 +25,8 @@ export default class Node extends React.Component {
     }
     let labelOffsetY = 18;
     let subLabelOffsetY = 35;
-    const isPseudo = !!this.props.pseudo;
-    const color = isPseudo ? '' : getNodeColor(this.props.rank, this.props.label);
+    const color = getNodeColor(this.props.rank, this.props.label,
+                               this.props.pseudo);
     const onMouseEnter = this.handleMouseEnter;
     const onMouseLeave = this.handleMouseLeave;
     const onMouseClick = this.handleMouseClick;
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 1e96f284c..701e58896 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -53,7 +53,9 @@ export default class NodeDetails extends React.Component {
   renderLoading() {
     const node = this.props.nodes.get(this.props.nodeId);
     const label = node ? node.get('label_major') : this.props.label;
-    const nodeColor = node ? getNodeColorDark(node.get('rank'), label) : getNeutralColor();
+    const nodeColor = (node ?
+                       getNodeColorDark(node.get('rank'), label, node.get('pseudo')) :
+                       getNeutralColor());
     const tools = this.renderTools();
     const styles = {
       header: {
@@ -129,7 +131,7 @@ export default class NodeDetails extends React.Component {
     const details = this.props.details;
     const showSummary = details.metadata !== undefined || details.metrics !== undefined;
     const showControls = details.controls && details.controls.length > 0;
-    const nodeColor = getNodeColorDark(details.rank, details.label_major);
+    const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo);
     const {error, pending} = (this.props.nodeControlStatus || {});
     const tools = this.renderTools();
     const styles = {
@@ -186,6 +188,6 @@ export default class NodeDetails extends React.Component {
   }
 
   updateTitle() {
-    setDocumentTitle(this.props.details && this.props.details.label_major);
+    setDocumentTitle(this.props.details && this.props.details.label);
   }
 }
diff --git a/client/app/scripts/utils/color-utils.js b/client/app/scripts/utils/color-utils.js
index 4e8c45d0b..55e26359e 100644
--- a/client/app/scripts/utils/color-utils.js
+++ b/client/app/scripts/utils/color-utils.js
@@ -44,12 +44,15 @@ export function getNeutralColor() {
   return PSEUDO_COLOR;
 }
 
-export function getNodeColor(text, secondText) {
+export function getNodeColor(text, secondText, isPseudo = false) {
+  if (isPseudo) {
+    return PSEUDO_COLOR;
+  }
   return colors(text, secondText).toString();
 }
 
-export function getNodeColorDark(text, secondText) {
-  if (!text) {
+export function getNodeColorDark(text = '', secondText = '', isPseudo = false) {
+  if (isPseudo) {
     return PSEUDO_COLOR;
   }
   const color = d3.rgb(colors(text, secondText));