From 7b20f18ea9dd3b1f592a547b3d189d6b754cbfdf Mon Sep 17 00:00:00 2001
From: Jade McGough <jade@thezets.com>
Date: Wed, 21 Sep 2016 15:05:48 -0700
Subject: [PATCH] move hosts table to separate component

---
 ui/src/hosts/components/HostsTable.js | 42 +++++++++++++++++++++++++++
 ui/src/hosts/containers/HostsPage.js  | 28 ++----------------
 2 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 ui/src/hosts/components/HostsTable.js

diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js
new file mode 100644
index 000000000..0e53a831c
--- /dev/null
+++ b/ui/src/hosts/components/HostsTable.js
@@ -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;
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index 2544ed2ef..475e95a87 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/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>