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

Cleaned up node-details-table jsx mess

Browse Source
This commit is contained in:
David Kaltschmidt
2015-11-13 17:15:33 +01:00
parent 8980f6c4cc
commit 027c7aead3
7 changed files with 95 additions and 35 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');

2
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 NodeControlButton = require('../node-control-button');
const NodeDetailsControls = React.createClass({

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;