add hosts page with basic table display of hosts

ui/src/hosts/containers/HostsPage.js

@@ -0,0 +1,66 @@
+import React, {PropTypes} from 'react';
+import FlashMessages from 'shared/components/FlashMessages';
+
+export const HostsPage = React.createClass({
+  propTypes: {
+    dataNodes: PropTypes.arrayOf(React.PropTypes.object),
+  },
+
+  render() {
+    const {dataNodes} = this.props;
+
+    return (
+      <div className="hosts">
+        <div className="enterprise-header">
+          <div className="enterprise-header__container">
+            <div className="enterprise-header__left">
+              <h1>
+                Hosts
+              </h1>
+            </div>
+          </div>
+        </div>
+
+        <div className="container-fluid">
+          <div className="row">
+            <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>
+                      {
+                        dataNodes.map(({name, id}) => {
+                          return (
+                            <tr key={id}>
+                              <td>{name}</td>
+                              <td>UP</td>
+                              <td>98%</td>
+                              <td>1.12</td>
+                              <td>influxdb, ntp, system</td>
+                            </tr>
+                          );
+                        })
+                      }
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+
+});
+
+export default FlashMessages(HostsPage);

ui/src/hosts/index.js

@@ -0,0 +1,2 @@
+import HostsPage from './containers/HostsPage';
+export default HostsPage;

ui/src/index.js

@@ -5,6 +5,7 @@ import {Router, Route, browserHistory} from 'react-router';
 
 import App from 'src/App';
 import CheckDataNodes from 'src/CheckDataNodes';
+import HostsPage from 'src/hosts';
 import OverviewPage from 'src/overview';
 import QueriesPage from 'src/queries';
 import TasksPage from 'src/tasks';
@@ -130,6 +131,7 @@ const Root = React.createClass({
               <Route path="chronograf/data_explorer/:explorerID" component={DataExplorer} />
               <Route path="roles" component={RolesPageContainer} />
               <Route path="roles/:roleSlug" component={RolePageContainer} />
+              <Route path="hosts/list" component={HostsPage} />
             </Route>
             <Route path="users" component={UsersPage} />
             <Route path="users/:userID" component={UserEditPage} />

ui/src/side_nav/components/SideNav.js

@@ -40,7 +40,7 @@ const SideNav = React.createClass({
         </NavBlock>
         <NavBlock matcher="hosts" icon="crown" link={`/hosts/list`}>
           <NavHeader link={`/hosts/list`} title="Infrastructure" />
-          <NavListItem matcher="list" link={`/list`}>Host List</NavListItem>
+          <NavListItem matcher="list" link={`/hosts/list`}>Host List</NavListItem>
         </NavBlock>
       </NavBar>
     );