Merge pull request #216 from weaveworks/show-gone-details

Display a n/a header in details if nodes are gone

client/app/scripts/components/details.js

@@ -16,7 +16,8 @@ const Details = React.createClass({
               <span className="fa fa-close" onClick={this.handleClickClose} />
             </div>
           </div>
-          <NodeDetails details={this.props.details} />
+          <NodeDetails nodeId={this.props.nodeId} details={this.props.details}
+            nodes={this.props.nodes} />
         </Paper>
       </div>
     );
@@ -27,7 +28,6 @@ const Details = React.createClass({
     AppActions.clickCloseDetails();
   }
 
-
 });
 
 module.exports = Details;

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

@@ -18,28 +18,60 @@ const NodeDetails = React.createClass({
     TitleUtils.resetTitle();
   },
 
-  render: function() {
-    const node = this.props.details;
+  renderLoading: function() {
+    return (
+      <div className="node-details" />
+    );
+  },
 
-    if (!node) {
-      return <div className="node-details" />;
+  renderNotAvailable: function() {
+    return (
+      <div className="node-details">
+        <div className="node-details-header node-details-header-notavailable">
+          <h2 className="node-details-header-label truncate">
+            n/a
+          </h2>
+          <div className="node-details-header-label-minor truncate">
+            {this.props.nodeId}
+          </div>
+        </div>
+        <div className="node-details-content">
+          <p className="node-details-content-info">
+            This node is not visible to Scope anymore.
+            The node will re-appear if it communicates again.
+          </p>
+        </div>
+      </div>
+    );
+  },
+
+  render: function() {
+    const details = this.props.details;
+    const nodeExists = this.props.nodes[this.props.nodeId];
+
+    if (!nodeExists) {
+      return this.renderNotAvailable();
+    }
+
+    if (!details) {
+      return this.renderLoading();
     }
 
     const style = {
-      'background-color': this.getNodeColorDark(node.label_major)
+      'background-color': this.getNodeColorDark(details.label_major)
     };
 
     return (
       <div className="node-details">
         <div className="node-details-header" style={style}>
           <h2 className="node-details-header-label truncate">
-            {node.label_major}
+            {details.label_major}
           </h2>
-          <div className="node-details-header-label-minor truncate">{node.label_minor}</div>
+          <div className="node-details-header-label-minor truncate">{details.label_minor}</div>
         </div>
 
         <div className="node-details-content">
-          {this.props.details.tables.map(function(table) {
+          {details.tables.map(function(table) {
             return <NodeDetailsTable title={table.title} rows={table.rows} isNumeric={table.numeric} />;
           })}
         </div>

client/app/styles/main.less

@@ -19,6 +19,7 @@
 @primary-color: @weave-charcoal-blue;
 @background-color: lighten(@primary-color, 66%);
 @background-secondary-color: lighten(@background-color, 8%);
+@background-dark-color: @primary-color;
 @text-color: lighten(@primary-color, 10%);
 @text-secondary-color: lighten(@primary-color, 33%);
 @text-tertiary-color: lighten(@primary-color, 50%);
@@ -275,7 +276,10 @@ body {
         font-size: 120%;
         color: @white;
       }
+    }
 
+    &-notavailable {
+      background-color: @background-dark-color;
     }
   }
 
@@ -286,6 +290,10 @@ body {
     width: 100%;
     padding: 0 36px 0 36px;
     overflow-y: scroll;
+
+    &-info {
+      margin-top: 16px;
+    }
   }
 
   &-table {