Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

move hosts table to separate component

pull/113/head
Jade McGough 2016-09-21 15:05:48 -07:00
parent 60e1a4aec0
commit 7b20f18ea9
2 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/hosts/components/HostsTable.js Normal file
View File

@ -0,0 +1,42 @@
import React, {PropTypes} from 'react';
const HostsTable = React.createClass({
propTypes: {
hosts: PropTypes.arrayOf(React.PropTypes.object),
},
render() {
const {hosts} = this.props;
return (
<table className="table v-center">
<thead>
<tr>
<th>Hostname</th>
<th>Status</th>
<th>CPU</th>
<th>Load</th>
<th>Apps</th>
</tr>
</thead>
<tbody>
{
hosts.map(({name, id}) => {
return (
<tr key={id}>
<td><a href={`/hosts/${id}`}>{name}</a></td>
<td>UP</td>
<td>98%</td>
<td>1.12</td>
<td>influxdb, ntp, system</td>
</tr>
);
})
}
</tbody>
</table>
);
},
});
export default HostsTable;

28
ui/src/hosts/containers/HostsPage.js
View File

@ -1,5 +1,6 @@
import React, {PropTypes} from 'react';
import FlashMessages from 'shared/components/FlashMessages';
import HostsTable from '../components/HostsTable';
export const HostsPage = React.createClass({
propTypes: {
@ -26,32 +27,7 @@ export const HostsPage = React.createClass({
<div className="col-md-12">
<div className="panel panel-minimal">
<div className="panel-body">
<table className="table v-center">
<thead>
<tr>
<th>Hostname</th>
<th>Status</th>
<th>CPU</th>
<th>Load</th>
<th>Apps</th>
</tr>
</thead>
<tbody>
{
sources.map(({name, id}) => {
return (
<tr key={id}>
<td><a href={`/hosts/${id}`}>{name}</a></td>
<td>UP</td>
<td>98%</td>
<td>1.12</td>
<td>influxdb, ntp, system</td>
</tr>
);
})
}
</tbody>
</table>
<HostsTable hosts={sources} />
</div>
</div>
</div>