From 0f5e55db53486dbb9308c318057adca323aaff6d Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Thu, 11 Jun 2015 14:06:20 +0200
Subject: [PATCH 1/2] Display a n/a header in details if nodes are gone

fixes #193
---
 client/app/scripts/components/details.js      |  4 +-
 client/app/scripts/components/node-details.js | 41 +++++++++++++++----
 client/app/styles/main.less                   |  4 ++
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/client/app/scripts/components/details.js b/client/app/scripts/components/details.js
index 24e9553da..bccab8f1a 100644
--- a/client/app/scripts/components/details.js
+++ b/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;
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 099290317..96913ea76 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -18,28 +18,53 @@ 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">
+            Not visible to Scope anymore: {this.props.nodeId}
+          </div>
+        </div>
+      </div>
+    );
+  },
+
+  render: function() {
+    const details = this.props.details;
+    const nodeExists = this.props.nodes[this.props.nodeId];
+
+    if (!details) {
+      if (nodeExists) {
+        return this.renderLoading();
+      }
+      return this.renderNotAvailable();
     }
 
     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>
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 4f12fd9aa..cc1794187 100644
--- a/client/app/styles/main.less
+++ b/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;
     }
   }
 

From eb8a56bb1f3f4e24bf53e1c07d269cbe3554e285 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Thu, 11 Jun 2015 19:19:54 +0200
Subject: [PATCH 2/2] show N/A if node disappears on remove

---
 client/app/scripts/components/node-details.js | 17 ++++++++++++-----
 client/app/styles/main.less                   |  4 ++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 96913ea76..1c74c0db9 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -32,9 +32,15 @@ const NodeDetails = React.createClass({
             n/a
           </h2>
           <div className="node-details-header-label-minor truncate">
-            Not visible to Scope anymore: {this.props.nodeId}
+            {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>
     );
   },
@@ -43,13 +49,14 @@ const NodeDetails = React.createClass({
     const details = this.props.details;
     const nodeExists = this.props.nodes[this.props.nodeId];
 
-    if (!details) {
-      if (nodeExists) {
-        return this.renderLoading();
-      }
+    if (!nodeExists) {
       return this.renderNotAvailable();
     }
 
+    if (!details) {
+      return this.renderLoading();
+    }
+
     const style = {
       'background-color': this.getNodeColorDark(details.label_major)
     };
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index cc1794187..b4df69bf9 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -290,6 +290,10 @@ body {
     width: 100%;
     padding: 0 36px 0 36px;
     overflow-y: scroll;
+
+    &-info {
+      margin-top: 16px;
+    }
   }
 
   &-table {