allow users to edit their existing kapacitor instances

ui/src/shared/components/Dropdown.js

@@ -64,7 +64,7 @@ class Dropdown extends Component {
                   <div className="dropdown-item__actions">
                     {actions.map((action) => {
                       return (
-                        <button key={action.text} data-target={action.target} data-toggle="modal" className="dropdown-item__action" onClick={(e) => this.handleAction(e, action, item)}>
+                        <button key={action.text} className="dropdown-item__action" onClick={(e) => this.handleAction(e, action, item)}>
                           <span title={action.text} className={`icon ${action.icon}`}></span>
                         </button>
                       )
@@ -99,8 +99,8 @@ const {
 Dropdown.propTypes = {
   actions: arrayOf(shape({
     icon: string.isRequired,
-    target: string.isRequired,
     text: string.isRequired,
+    handler: func.isRequired,
   })),
   items: arrayOf(shape({
     text: string.isRequired,

ui/src/side_nav/containers/SideNav.js

@@ -56,8 +56,6 @@ const SideNav = React.createClass({
         </NavBlock>
         <NavBlock icon="cog-thick" link={`${sourcePrefix}/manage-sources`}>
           <NavHeader link={`${sourcePrefix}/manage-sources`} title="Configuration" />
-          <NavListItem link={`${sourcePrefix}/manage-sources`}>InfluxDB</NavListItem>
-          <NavListItem link={`${sourcePrefix}/kapacitor-config`}>Kapacitor</NavListItem>
         </NavBlock>
         {
           showLogout ? (

ui/src/sources/components/InfluxTable.js

@@ -1,16 +1,16 @@
 import React, {PropTypes} from 'react'
-import {Link} from 'react-router'
+import {Link, withRouter} from 'react-router'
 
 import Dropdown from 'shared/components/Dropdown'
 
-const kapacitorDropdown = (kapacitors, source) => {
+const kapacitorDropdown = (kapacitors, source, router) => {
   if (!kapacitors || kapacitors.length === 0) {
     return (
       <span>--</span>
     )
   }
   const kapacitorItems = kapacitors.map((k) => {
-    return {text: k.name}
+    return {text: k.name, resource: `/sources/${source.id}/kapacitors/${k.id}`}
   })
   return (
     <Dropdown
@@ -20,6 +20,14 @@ const kapacitorDropdown = (kapacitors, source) => {
         url: `/sources/${source.id}/kapacitors/new`,
         text: "Add Kapacitor",
       }}
+      actions={
+      [{
+        icon: "pencil",
+        text: "edit",
+        handler: (item) => {
+          router.push(`${item.resource}/edit`)
+        },
+      }]}
       selected={kapacitorItems[0].text}
     />
   )
@@ -30,6 +38,7 @@ const InfluxTable = ({
   source,
   handleDeleteSource,
   location,
+  router,
 }) => (
   <div className="row">
     <div className="col-md-12">
@@ -58,7 +67,7 @@ const InfluxTable = ({
                         <td className="monotype">{s.url}</td>
                         <td>
                           {
-                            kapacitorDropdown(s.kapacitors, source)
+                            kapacitorDropdown(s.kapacitors, source, router)
                           }
                         </td>
                         <td className="text-right">
@@ -87,11 +96,13 @@ const {
 } = PropTypes
 
 InfluxTable.propTypes = {
-  sources: array.isRequired,
+  handleDeleteSource: func.isRequired,
   location: shape({
     pathname: string.isRequired,
   }).isRequired,
-  handleDeleteSource: func.isRequired,
+  router: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+  }).isRequired,
   source: shape({
     id: string.isRequired,
     links: shape({
@@ -99,6 +110,7 @@ InfluxTable.propTypes = {
       self: string.isRequired,
     }),
   }),
+  sources: array.isRequired,
 }
 
-export default InfluxTable
+export default withRouter(InfluxTable)