add filtering for hosts

ui/src/hosts/components/HostsTable.js

@@ -6,34 +6,48 @@ const HostsTable = React.createClass({
     hosts: PropTypes.arrayOf(React.PropTypes.object),
   },
 
+  getInitialState() {
+    return {
+      filteredHosts: this.props.hosts,
+    };
+  },
+
+  filterHosts() {
+    const hosts = this.props.hosts.filter((h) => h.name.search(this.refs.filter.value) !== -1);
+    this.setState({filteredHosts: hosts});
+  },
+
   render() {
-    const {hosts} = this.props;
     const {Table, Thead, Tr, Td, Th} = Reactable;
 
-
     return (
-      <Table sortable={true} className="table v-center">
-        <Thead>
-          <Th column="hostname">Hostname</Th>
-          <Th column="status">Status</Th>
-          <Th column="cpu">CPU</Th>
-          <Th column="load">Load</Th>
-          <Th column="apps">Apps</Th>
-        </Thead>
-        {
-          hosts.map(({name, id}) => {
-            return (
-              <Tr key={id}>
-                <Td column="hostname"><a href={`/hosts/${id}`}>{name}</a></Td>
-                <Td column="status">UP</Td>
-                <Td column="cpu">98%</Td>
-                <Td column="load">1.12</Td>
-                <Td column="apps">influxdb, ntp, system</Td>
-              </Tr>
-            );
-          })
-        }
-      </Table>
+      <div>
+        <div className="col-md-3">
+          <input ref="filter" type="text" className="form-control" onChange={this.filterHosts}/>
+        </div>
+        <Table sortable={true} className="table v-center">
+          <Thead>
+            <Th column="name">Hostname</Th>
+            <Th column="status">Status</Th>
+            <Th column="cpu">CPU</Th>
+            <Th column="load">Load</Th>
+            <Th column="apps">Apps</Th>
+          </Thead>
+          {
+            this.state.filteredHosts.map(({name, id}) => {
+              return (
+                <Tr key={id}>
+                  <Td column="name"><a href={`/hosts/${id}`}>{name}</a></Td>
+                  <Td column="status">UP</Td>
+                  <Td column="cpu">98%</Td>
+                  <Td column="load">1.12</Td>
+                  <Td column="apps">influxdb, ntp, system</Td>
+                </Tr>
+              );
+            })
+          }
+        </Table>
+      </div>
     );
   },
 });