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 ( -
-

- {this.props.title} -

- - {this.props.rows.map(function(row) { - return ( -
-
{row.key}
- { row.value_type === 'numeric' &&
{row.value_major}
} - { row.value_type === 'numeric' &&
{row.value_minor}
} - { row.value_type === 'sparkline' &&
{row.value_major}
} - { row.value_type === 'sparkline' &&
{row.value_minor}
} - { row.value_type !== 'numeric' && row.value_type !== 'sparkline' &&
{row.value_major}
} - { row.value_type !== 'numeric' && row.value_type !== 'sparkline' && row.value_minor &&
{row.value_minor}
} -
- ); - })} -
- ); - } - -}); - -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-control-button.js b/client/app/scripts/components/node-details/node-details-control-button.js similarity index 76% rename from client/app/scripts/components/node-control-button.js rename to client/app/scripts/components/node-details/node-details-control-button.js index 70f8f10a5..c66c9b0ad 100644 --- a/client/app/scripts/components/node-control-button.js +++ b/client/app/scripts/components/node-details/node-details-control-button.js @@ -1,7 +1,8 @@ const React = require('react'); -const AppActions = require('../actions/app-actions'); -const NodeControlButton = React.createClass({ +const AppActions = require('../../actions/app-actions'); + +const NodeDetailsControlButton = React.createClass({ render: function() { let className = `node-control-button fa ${this.props.control.icon}`; @@ -20,4 +21,4 @@ const NodeControlButton = React.createClass({ }); -module.exports = NodeControlButton; +module.exports = NodeDetailsControlButton; diff --git a/client/app/scripts/components/node-details-controls.js b/client/app/scripts/components/node-details/node-details-controls.js similarity index 84% rename from client/app/scripts/components/node-details-controls.js rename to client/app/scripts/components/node-details/node-details-controls.js index fb46f2527..8034bcce9 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 NodeDetailsControlButton = require('./node-details-control-button'); const NodeDetailsControls = React.createClass({ @@ -17,7 +17,8 @@ const NodeDetailsControls = React.createClass({ {this.props.controls && this.props.controls.map(control => { return ( - + ); })} 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 ( +
+
{row.value_major}
+
{row.value_minor}
+
+ ); + } +}); + +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 ( +
+
{row.value_major}
+
{row.value_minor}
+
+ ); + } +}); + +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 ( +
+
+ {row.value_major} +
+ {row.value_minor &&
+ {row.value_minor} +
} +
+ ); + } +}); + +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 ( +
+

+ {this.props.title} +

+ + {this.props.rows.map(function(row) { + let valueComponent; + if (row.value_type === 'numeric') { + valueComponent = ; + } else if (row.value_type === 'sparkline') { + valueComponent = ; + } else { + valueComponent = ; + } + return ( +
+
{row.key}
+ {valueComponent} +
+ ); + })} +
+ ); + } + +}); + +module.exports = NodeDetailsTable;