github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 02:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #676 from weaveworks/637-details-refactor

Browse Source 
Cleaned up node-details-table jsx mess
This commit is contained in:
David
2015-11-16 15:54:47 +01:00
parent 8980f6c4cc 5508c0aa67
commit 03c3bf292d
8 changed files with 101 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/app/scripts/components/node-details-table.js
View File

@@ -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;

4
client/app/scripts/components/node-details.js
View File

@@ -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');

7
client/app/scripts/components/node-control-button.js → client/app/scripts/components/node-details/node-details-control-button.js
View File

@@ -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;

5
client/app/scripts/components/node-details-controls.js → client/app/scripts/components/node-details/node-details-controls.js
View File

@@ -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({
<span className="node-details-controls-buttons">
{this.props.controls && this.props.controls.map(control => {
return (
<NodeControlButton control={control} pending={this.props.pending} key={control.id} />
<NodeDetailsControlButton control={control}
pending={this.props.pending} key={control.id} />
);
})}
</span>

16
client/app/scripts/components/node-details/node-details-table-row-number.js Normal file
View File

@@ -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;

18
client/app/scripts/components/node-details/node-details-table-row-sparkline.js Normal file
View File

@@ -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;

20
client/app/scripts/components/node-details/node-details-table-row-value.js Normal file
View File

@@ -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;

38
client/app/scripts/components/node-details/node-details-table.js Normal file
View File

@@ -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;