Merge pull request #691 from weaveworks/loading-details

Show a spinner while node details are loading

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

@@ -21,8 +21,32 @@ const NodeDetails = React.createClass({
   },
 
   renderLoading: function() {
+    const node = this.props.nodes.get(this.props.nodeId);
+    const nodeColor = this.getNodeColorDark(node.get('rank'), node.get('label_major'));
+    const styles = {
+      header: {
+        'backgroundColor': nodeColor
+      }
+    };
+
     return (
-      <div className="node-details" />
+      <div className="node-details">
+        <div className="node-details-header" style={styles.header}>
+          <div className="node-details-header-wrapper">
+            <h2 className="node-details-header-label truncate">
+              {node.get('label_major')}
+            </h2>
+            <div className="node-details-header-label-minor truncate">
+              {node.get('label_minor')}
+            </div>
+          </div>
+        </div>
+        <div className="node-details-content">
+          <div className="node-details-content-loading">
+            <span className="fa fa-circle-o-notch fa-spin" />
+          </div>
+        </div>
+      </div>
     );
   },
 

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

@@ -45,7 +45,7 @@ const NodeColorMixin = {
     return colors(text, secondText);
   },
   getNodeColorDark: function(text, secondText) {
-    if (text === undefined) {
+    if (!text) {
       return PSEUDO_COLOR;
     }
     const color = d3.rgb(colors(text, secondText));

client/app/scripts/stores/app-store.js

@@ -269,10 +269,9 @@ AppStore.registeredCallback = function(payload) {
     break;
 
   case ActionTypes.CLICK_NODE:
-    if (payload.nodeId === selectedNodeId) {
-      // clicking same node twice unsets the selection
-      deSelectNode();
-    } else {
+    deSelectNode();
+    if (payload.nodeId !== selectedNodeId) {
+      // select new node if it's not the same (in that case just delesect)
       selectedNodeId = payload.nodeId;
     }
     AppStore.emit(AppStore.CHANGE_EVENT);
@@ -350,13 +349,16 @@ AppStore.registeredCallback = function(payload) {
 
   case ActionTypes.RECEIVE_NODE_DETAILS:
     errorUrl = null;
-    nodeDetails = payload.details;
+    // disregard if node is not selected anymore
+    if (payload.details.id === selectedNodeId) {
+      nodeDetails = payload.details;
+    }
     AppStore.emit(AppStore.CHANGE_EVENT);
     break;
 
   case ActionTypes.RECEIVE_NODES_DELTA:
     const emptyMessage = !payload.delta.add && !payload.delta.remove
-      && payload.delta.update;
+      && !payload.delta.update;
 
     if (!emptyMessage) {
       debug('RECEIVE_NODES_DELTA',

client/app/styles/main.less

@@ -22,6 +22,7 @@
 @background-color: lighten(@primary-color, 66%);
 @background-secondary-color: lighten(@background-color, 8%);
 @background-dark-color: @primary-color;
+@background-medium-color: lighten(@background-dark-color, 55%);
 @text-color: lighten(@primary-color, 10%);
 @text-secondary-color: lighten(@primary-color, 33%);
 @text-tertiary-color: lighten(@primary-color, 50%);
@@ -35,6 +36,10 @@
   text-overflow: ellipsis;
 }
 
+.colorable {
+  transition: background-color .3s ease-in-out;
+}
+
 .palable {
   transition: opacity .2s ease-in-out;
   transition: border-color .2s ease-in-out;
@@ -352,6 +357,7 @@ h2 {
   flex-flow: column;
 
   &-header {
+    .colorable;
 
     &-wrapper {
       padding: 36px 36px 16px 36px;
@@ -444,6 +450,14 @@ h2 {
     &-info {
       margin-top: 16px;
     }
+
+    &-loading {
+      margin-top: 48px;
+      text-align: center;
+      font-size: 48px;
+      color: @background-medium-color;
+      opacity: 0.7;
+    }
   }
 
   &-table {