From 027c7aead35d48d97096edd336675b52abd678bc Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 13 Nov 2015 17:15:33 +0100
Subject: [PATCH] Cleaned up node-details-table jsx mess

---
 .../scripts/components/node-details-table.js  | 32 ----------------
 client/app/scripts/components/node-details.js |  4 +-
 .../node-details-controls.js                  |  2 +-
 .../node-details-table-row-number.js          | 16 ++++++++
 .../node-details-table-row-sparkline.js       | 18 +++++++++
 .../node-details-table-row-value.js           | 20 ++++++++++
 .../node-details/node-details-table.js        | 38 +++++++++++++++++++
 7 files changed, 95 insertions(+), 35 deletions(-)
 delete mode 100644 client/app/scripts/components/node-details-table.js
 rename client/app/scripts/components/{ => node-details}/node-details-controls.js (94%)
 create mode 100644 client/app/scripts/components/node-details/node-details-table-row-number.js
 create mode 100644 client/app/scripts/components/node-details/node-details-table-row-sparkline.js
 create mode 100644 client/app/scripts/components/node-details/node-details-table-row-value.js
 create mode 100644 client/app/scripts/components/node-details/node-details-table.js

diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
deleted file mode 100644
index 767c0585f..000000000
--- a/client/app/scripts/components/node-details-table.js
+++ /dev/null
@@ -1,32 +0,0 @@
-const React = require('react');
-const Sparkline = require('./sparkline');
-
-const NodeDetailsTable = React.createClass({
-
-  render: function() {
-    return (
-      <div className="node-details-table">
-        <h4 className="node-details-table-title truncate" title={this.props.title}>
-          {this.props.title}
-        </h4>
-
-        {this.props.rows.map(function(row) {
-          return (
-            <div className="node-details-table-row" key={row.key + row.value_major + row.value_minor}>
-              <div className="node-details-table-row-key truncate" title={row.key}>{row.key}</div>
-              { row.value_type === 'numeric' && <div className="node-details-table-row-value-scalar">{row.value_major}</div> }
-              { row.value_type === 'numeric' && <div className="node-details-table-row-value-unit">{row.value_minor}</div> }
-              { row.value_type === 'sparkline' && <div className="node-details-table-row-value-sparkline"><Sparkline data={row.metric.samples} min={0} max={row.metric.max} first={row.metric.first} last={row.metric.last} interpolate="none" />{row.value_major}</div> }
-              { row.value_type === 'sparkline' && <div className="node-details-table-row-value-unit">{row.value_minor}</div> }
-              { row.value_type !== 'numeric' && row.value_type !== 'sparkline' && <div className="node-details-table-row-value-major truncate" title={row.value_major}>{row.value_major}</div> }
-              { row.value_type !== 'numeric' && row.value_type !== 'sparkline' && row.value_minor && <div className="node-details-table-row-value-minor truncate" title={row.value_minor}>{row.value_minor}</div> }
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-});
-
-module.exports = NodeDetailsTable;
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 6cf6d725b..6222b3d07 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -1,8 +1,8 @@
 const _ = require('lodash');
 const React = require('react');
 
-const NodeDetailsControls = require('./node-details-controls');
-const NodeDetailsTable = require('./node-details-table');
+const NodeDetailsControls = require('./node-details/node-details-controls');
+const NodeDetailsTable = require('./node-details/node-details-table');
 const NodeColorMixin = require('../mixins/node-color-mixin');
 const TitleUtils = require('../utils/title-utils');
 
diff --git a/client/app/scripts/components/node-details-controls.js b/client/app/scripts/components/node-details/node-details-controls.js
similarity index 94%
rename from client/app/scripts/components/node-details-controls.js
rename to client/app/scripts/components/node-details/node-details-controls.js
index fb46f2527..53658d74c 100644
--- a/client/app/scripts/components/node-details-controls.js
+++ b/client/app/scripts/components/node-details/node-details-controls.js
@@ -1,6 +1,6 @@
 const React = require('react');
 
-const NodeControlButton = require('./node-control-button');
+const NodeControlButton = require('../node-control-button');
 
 const NodeDetailsControls = React.createClass({
 
diff --git a/client/app/scripts/components/node-details/node-details-table-row-number.js b/client/app/scripts/components/node-details/node-details-table-row-number.js
new file mode 100644
index 000000000..bcfd4a52a
--- /dev/null
+++ b/client/app/scripts/components/node-details/node-details-table-row-number.js
@@ -0,0 +1,16 @@
+const React = require('react');
+
+const NodeDetailsTableRowNumber = React.createClass({
+
+  render: function() {
+    const row = this.props.row;
+    return (
+      <div className="node-details-table-row-value">
+        <div className="node-details-table-row-value-scalar">{row.value_major}</div>
+        <div className="node-details-table-row-value-unit">{row.value_minor}</div>
+      </div>
+    );
+  }
+});
+
+module.exports = NodeDetailsTableRowNumber;
diff --git a/client/app/scripts/components/node-details/node-details-table-row-sparkline.js b/client/app/scripts/components/node-details/node-details-table-row-sparkline.js
new file mode 100644
index 000000000..d59914aa3
--- /dev/null
+++ b/client/app/scripts/components/node-details/node-details-table-row-sparkline.js
@@ -0,0 +1,18 @@
+const React = require('react');
+
+const Sparkline = require('../sparkline');
+
+const NodeDetailsTableRowSparkline = React.createClass({
+
+  render: function() {
+    const row = this.props.row;
+    return (
+      <div className="node-details-table-row-value">
+        <div className="node-details-table-row-value-sparkline"><Sparkline data={row.metric.samples} min={0} max={row.metric.max} first={row.metric.first} last={row.metric.last} interpolate="none" />{row.value_major}</div>
+        <div className="node-details-table-row-value-unit">{row.value_minor}</div>
+      </div>
+    );
+  }
+});
+
+module.exports = NodeDetailsTableRowSparkline;
diff --git a/client/app/scripts/components/node-details/node-details-table-row-value.js b/client/app/scripts/components/node-details/node-details-table-row-value.js
new file mode 100644
index 000000000..4cdcf9544
--- /dev/null
+++ b/client/app/scripts/components/node-details/node-details-table-row-value.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const NodeDetailsTableRowValue = React.createClass({
+
+  render: function() {
+    const row = this.props.row;
+    return (
+      <div className="node-details-table-row-value">
+        <div className="node-details-table-row-value-major truncate" title={row.value_major}>
+          {row.value_major}
+        </div>
+        {row.value_minor && <div className="node-details-table-row-value-minor truncate" title={row.value_minor}>
+          {row.value_minor}
+        </div>}
+      </div>
+    );
+  }
+});
+
+module.exports = NodeDetailsTableRowValue;
diff --git a/client/app/scripts/components/node-details/node-details-table.js b/client/app/scripts/components/node-details/node-details-table.js
new file mode 100644
index 000000000..1e92a639f
--- /dev/null
+++ b/client/app/scripts/components/node-details/node-details-table.js
@@ -0,0 +1,38 @@
+const React = require('react');
+
+const NodeDetailsTableRowValue = require('./node-details-table-row-value');
+const NodeDetailsTableRowNumber = require('./node-details-table-row-number');
+const NodeDetailsTableRowSparkline = require('./node-details-table-row-sparkline');
+
+const NodeDetailsTable = React.createClass({
+
+  render: function() {
+    return (
+      <div className="node-details-table">
+        <h4 className="node-details-table-title truncate" title={this.props.title}>
+          {this.props.title}
+        </h4>
+
+        {this.props.rows.map(function(row) {
+          let valueComponent;
+          if (row.value_type === 'numeric') {
+            valueComponent = <NodeDetailsTableRowNumber row={row} />;
+          } else if (row.value_type === 'sparkline') {
+            valueComponent = <NodeDetailsTableRowSparkline row={row} />;
+          } else {
+            valueComponent = <NodeDetailsTableRowValue row={row} />;
+          }
+          return (
+            <div className="node-details-table-row" key={row.key + row.value_major + row.value_minor}>
+              <div className="node-details-table-row-key truncate" title={row.key}>{row.key}</div>
+              {valueComponent}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+});
+
+module.exports = NodeDetailsTable;