Populate HostsTable with name and CPU

Also includes a slight refactor of HostsTable to better separate some
mixed functional / stateful logic.

ui/src/hosts/components/HostsTable.js

@@ -3,20 +3,28 @@ import _ from 'lodash';
 
 const HostsTable = React.createClass({
   propTypes: {
-    hosts: PropTypes.arrayOf(React.PropTypes.object),
+    hosts: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string,
+      cpu: PropTypes.number,
+      load: PropTypes.string,
+    })),
   },
 
   getInitialState() {
     return {
+      searchTerm: '',
       filteredHosts: this.props.hosts,
       sortDirection: null,
     };
   },
 
-  filterHosts(searchTerm) {
-    const unfiltered = this.props.hosts;
-    const hosts = unfiltered.filter((h) => h.name.search(searchTerm) !== -1);
-    this.setState({filteredHosts: hosts});
+  componentWillReceiveProps(newProps) {
+    this.filterHosts(newProps.hosts, this.state.searchTerm);
+  },
+
+  filterHosts(allHosts, searchTerm) {
+    const hosts = allHosts.filter((h) => h.name.search(searchTerm) !== -1);
+    this.setState({searchTerm, filteredHosts: hosts});
   },
 
   changeSort() {
@@ -27,8 +35,8 @@ const HostsTable = React.createClass({
     }
   },
 
-  sort(hosts) {
-    switch (this.state.sortDirection) {
+  sort(hosts, direction) {
+    switch (direction) {
       case 'asc':
         return _.sortBy(hosts, (e) => e.name);
       case 'desc':
@@ -39,11 +47,11 @@ const HostsTable = React.createClass({
   },
 
   render() {
-    const hosts = this.sort(this.state.filteredHosts);
+    const hosts = this.sort(this.state.filteredHosts, this.state.sortDirection);
 
     return (
       <div>
-        <SearchBar onSearch={this.filterHosts} />
+        <SearchBar onSearch={_.wrap(this.props.hosts, this.filterHosts)} />
         <table className="table v-center">
           <thead>
             <tr>
@@ -56,13 +64,13 @@ const HostsTable = React.createClass({
           </thead>
           <tbody>
             {
-              hosts.map(({name, id}) => {
+              hosts.map(({name, cpu, load}) => {
                 return (
                   <tr key={name}>
-                    <td><a href={`/hosts/${id}`}>{name}</a></td>
+                    <td><a href={`/hosts/${name}`}>{name}</a></td>
                     <td>UP</td>
-                    <td>98%</td>
-                    <td>1.12</td>
+                    <td>{`${cpu}%`}</td>
+                    <td>changeme</td>
                     <td>influxdb, ntp, system</td>
                   </tr>
                 );

ui/src/hosts/containers/HostsPage.js

@@ -1,6 +1,9 @@
 import React, {PropTypes} from 'react';
+import _ from 'lodash';
 import FlashMessages from 'shared/components/FlashMessages';
 import HostsTable from '../components/HostsTable';
+import {proxy} from 'utils/queryUrlGenerator';
+import timeSeriesToDygraph from 'utils/timeSeriesToDygraph';
 
 export const HostsPage = React.createClass({
   propTypes: {
@@ -15,10 +18,33 @@ export const HostsPage = React.createClass({
     }).isRequired,
   },
 
-  render() {
-    const {source} = this.props;
-    const sources = [source];
+  getInitialState() {
+    return {
+      hosts: [],
+    };
+  },
 
+  componentDidMount() {
+    proxy({
+      source: this.props.source.links.proxy,
+      query: `select mean(usage_user) from cpu where cpu = 'cpu-total' and time > now() - 10m group by host`,
+      db: 'telegraf',
+    }).then((resp) => {
+      const hosts = resp.data.results[0].series.map((s) => {
+        const meanIndex = s.columns.findIndex((col) => col === 'mean');
+        return {
+          name: s.tags['host'],
+          cpu: Math.round(s.values[0][meanIndex]),
+        };
+      });
+
+      this.setState({
+        hosts,
+      });
+    });
+  },
+
+  render() {
     return (
       <div className="hosts">
         <div className="enterprise-header">
@@ -36,7 +62,7 @@ export const HostsPage = React.createClass({
             <div className="col-md-12">
               <div className="panel panel-minimal">
                 <div className="panel-body">
-                  <HostsTable hosts={sources} />
+                  <HostsTable hosts={this.state.hosts} />
                 </div>
               </div>
             </div>