From 429ef27661a9255838fbe6f52a143be6364b8ff3 Mon Sep 17 00:00:00 2001
From: Jade McGough <jade@influxdb.com>
Date: Thu, 13 Apr 2017 16:33:27 -0700
Subject: [PATCH] move influx source managament table to separate component

---
 ui/src/sources/components/InfluxTable.js   | 81 ++++++++++++++++++++++
 ui/src/sources/containers/ManageSources.js | 63 ++++-------------
 2 files changed, 94 insertions(+), 50 deletions(-)
 create mode 100644 ui/src/sources/components/InfluxTable.js

diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js
new file mode 100644
index 000000000..8f24d7f03
--- /dev/null
+++ b/ui/src/sources/components/InfluxTable.js
@@ -0,0 +1,81 @@
+import React, {PropTypes} from 'react'
+import {Link} from 'react-router'
+
+const InfluxTable = ({
+  sources,
+  source,
+  handleDeleteSource,
+  kapacitors,
+  location,
+}) => (
+  <div className="row">
+    <div className="col-md-12">
+
+      <div className="panel panel-minimal">
+        <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+          <h2 className="panel-title">InfluxDB Sources</h2>
+          <Link to={`/sources/${source.id}/manage-sources/new`} className="btn btn-sm btn-primary">Add New Source</Link>
+        </div>
+        <div className="panel-body">
+          <div className="table-responsive margin-bottom-zero">
+            <table className="table v-center margin-bottom-zero">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Host</th>
+                  <th>Kapacitor</th>
+                  <th className="text-right"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {
+                  sources.map((s) => {
+                    const kapacitorName = kapacitors[s.id] ? kapacitors[s.id].name : ''
+                    return (
+                      <tr key={s.id}>
+                        <td>{s.name}{s.default ? <span className="default-source-label">Default</span> : null}</td>
+                        <td className="monotype">{s.url}</td>
+                        <td>{kapacitorName ? kapacitorName : "--"}</td>
+                        <td className="text-right">
+                          <Link className="btn btn-info btn-xs" to={`${location.pathname}/${s.id}/edit`}><span className="icon pencil"></span></Link>
+                          <Link className="btn btn-success btn-xs" to={`/sources/${s.id}/hosts`}>Connect</Link>
+                          <button className="btn btn-danger btn-xs" onClick={() => handleDeleteSource(s)}><span className="icon trash"></span></button>
+                        </td>
+                      </tr>
+                    )
+                  })
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+const {
+  array,
+  func,
+  object,
+  shape,
+  string,
+} = PropTypes
+
+InfluxTable.propTypes = {
+  sources: array.isRequired,
+  kapacitors: object,
+  location: shape({
+    pathname: string.isRequired,
+  }).isRequired,
+  handleDeleteSource: func.isRequired,
+  source: shape({
+    id: string.isRequired,
+    links: shape({
+      proxy: string.isRequired,
+      self: string.isRequired,
+    }),
+  }),
+}
+
+export default InfluxTable
diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js
index 715afb06f..d5108c964 100644
--- a/ui/src/sources/containers/ManageSources.js
+++ b/ui/src/sources/containers/ManageSources.js
@@ -1,9 +1,11 @@
 import React, {PropTypes} from 'react'
-import {withRouter, Link} from 'react-router'
+import {withRouter} from 'react-router'
 import {getKapacitor} from 'shared/apis'
 import {removeAndLoadSources} from 'src/shared/actions/sources'
 import {connect} from 'react-redux'
 
+import InfluxTable from '../components/InfluxTable'
+
 const {
   array,
   func,
@@ -59,67 +61,28 @@ export const ManageSources = React.createClass({
   },
 
   render() {
+    // probably should move kapacitors to props and use redux store
     const {kapacitors} = this.state
-    const {sources} = this.props
-    const {pathname} = this.props.location
-    const numSources = sources.length
-    const sourcesTitle = `${numSources} ${numSources === 1 ? 'Source' : 'Sources'}`
+    const {sources, source, location} = this.props
 
     return (
       <div className="page" id="manage-sources-page">
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>InfluxDB Sources</h1>
+              <h1>Configuration</h1>
             </div>
           </div>
         </div>
         <div className="page-contents">
           <div className="container-fluid">
-            <div className="row">
-              <div className="col-md-12">
-
-                <div className="panel panel-minimal">
-                  <div className="panel-heading u-flex u-ai-center u-jc-space-between">
-                    <h2 className="panel-title">{sourcesTitle}</h2>
-                    <Link to={`/sources/${this.props.source.id}/manage-sources/new`} className="btn btn-sm btn-primary">Add New Source</Link>
-                  </div>
-                  <div className="panel-body">
-                    <div className="table-responsive margin-bottom-zero">
-                      <table className="table v-center margin-bottom-zero">
-                        <thead>
-                          <tr>
-                            <th>Name</th>
-                            <th>Host</th>
-                            <th>Kapacitor</th>
-                            <th className="text-right"></th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {
-                            sources.map((source) => {
-                              const kapacitorName = kapacitors[source.id] ? kapacitors[source.id].name : ''
-                              return (
-                                <tr key={source.id}>
-                                  <td>{source.name}{source.default ? <span className="default-source-label">Default</span> : null}</td>
-                                  <td className="monotype">{source.url}</td>
-                                  <td>{kapacitorName ? kapacitorName : "--"}</td>
-                                  <td className="text-right">
-                                    <Link className="btn btn-info btn-xs" to={`${pathname}/${source.id}/edit`}><span className="icon pencil"></span></Link>
-                                    <Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link>
-                                    <button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteSource(source)}><span className="icon trash"></span></button>
-                                  </td>
-                                </tr>
-                              )
-                            })
-                          }
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <InfluxTable
+              handleDeleteSource={this.handleDeleteSource}
+              source={source}
+              sources={sources}
+              kapacitors={kapacitors}
+              location={location}
+            />
           </div>
         </div>
       </div>