Merge pull request #113 from influxdata/feature/hosts-table

hosts sorting/filtering

ui/src/hosts/components/HostsTable.js

@@ -0,0 +1,105 @@
+import React, {PropTypes} from 'react';
+import _ from 'lodash';
+
+const HostsTable = React.createClass({
+  propTypes: {
+    hosts: PropTypes.arrayOf(React.PropTypes.object),
+  },
+
+  getInitialState() {
+    return {
+      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});
+  },
+
+  changeSort() {
+    if (this.state.sortDirection === 'asc') {
+      this.setState({sortDirection: 'desc'});
+    } else {
+      this.setState({sortDirection: 'asc'});
+    }
+  },
+
+  sort(hosts) {
+    switch (this.state.sortDirection) {
+      case 'asc':
+        return _.sortBy(hosts, (e) => e.name);
+      case 'desc':
+        return _.sortBy(hosts, (e) => e.name).reverse();
+      default:
+        return hosts;
+    }
+  },
+
+  render() {
+    const hosts = this.sort(this.state.filteredHosts);
+
+    return (
+      <div>
+        <SearchBar onSearch={this.filterHosts} />
+        <table className="table v-center">
+          <thead>
+            <tr>
+              <th onClick={this.changeSort} className="sortable-header">Hostname</th>
+              <th>Status</th>
+              <th>CPU</th>
+              <th>Load</th>
+              <th>Apps</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              hosts.map(({name, id}) => {
+                return (
+                  <tr key={name}>
+                    <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>
+      </div>
+    );
+  },
+});
+
+const SearchBar = React.createClass({
+  propTypes: {
+    onSearch: PropTypes.func.isRequired,
+  },
+
+  handleChange() {
+    this.props.onSearch(this.refs.searchInput.value);
+  },
+
+  render() {
+    return (
+      <div className="users__search-widget input-group">
+        <div className="input-group-addon">
+          <span className="icon search" aria-hidden="true"></span>
+        </div>
+        <input
+          type="text"
+          className="form-control"
+          placeholder="Find host"
+          ref="searchInput"
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  },
+});
+
+export default HostsTable;

ui/src/hosts/containers/HostsPage.js

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

ui/src/side_nav/components/SideNav.js

@@ -38,7 +38,7 @@ const SideNav = React.createClass({
           <NavListItem matcher="settings" link={`/account/settings`}>Settings</NavListItem>
           <a className="sidebar__menu-item" href="/logout">Logout</a>
         </NavBlock>
-        <NavBlock matcher="hosts" icon="crown" link={`/hosts`}>
+        <NavBlock matcher="hosts" icon="cpu" link={`/hosts`}>
           <NavHeader link={`/hosts`} title="Infrastructure" />
           <NavListItem matcher="hosts" link={`/hosts`}>Host List</NavListItem>
         </NavBlock>

ui/src/style/enterprise_style/application.scss

@@ -12,10 +12,11 @@
 @import 'signup';
 @import 'modals';
 @import 'enterprise-custom';
+@import 'hosts';
 
 // Because of some issues with sharing styles across multiple webpack bundles,
 // we have to import other scss files here instead of in their corresponding
 // components.  There's likely a better fix, but this does for now.
 @import '../_OverviewPage';
 @import '../chronograf/main';
-@import '../_SideNav';
+@import '../_SideNav';

ui/src/style/enterprise_style/hosts.scss

@@ -0,0 +1,3 @@
+.sortable-header {
+  cursor: pointer;
+}