add ability to delete kapacitor config

ui/src/shared/actions/sources.js

@@ -3,6 +3,7 @@ import {
   getSources,
   getKapacitors as getKapacitorsAJAX,
   updateKapacitor as updateKapacitorAJAX,
+  deleteKapacitor as deleteKapacitorAJAX,
 } from 'src/shared/apis'
 import {publishNotification} from './notifications'
 
@@ -44,6 +45,13 @@ export const setActiveKapacitor = kapacitor => ({
   },
 })
 
+export const deleteKapacitor = kapacitor => ({
+  type: 'DELETE_KAPACITOR',
+  payload: {
+    kapacitor,
+  },
+})
+
 // Async action creators
 
 export const removeAndLoadSources = source => async dispatch => {
@@ -88,3 +96,17 @@ export const setActiveKapacitorAsync = kapacitor => async dispatch => {
   const kapacitorPost = {...kapacitor, active: true}
   await updateKapacitorAJAX(kapacitorPost)
 }
+
+export const deleteKapacitorAsync = (source, kapacitor) => async dispatch => {
+  try {
+    await deleteKapacitorAJAX(source, kapacitor.id)
+    dispatch(deleteKapacitor(kapacitor))
+  } catch (err) {
+    dispatch(
+      publishNotification(
+        'error',
+        'Internal Server Error. Could not delete Kapacitor config.'
+      )
+    )
+  }
+}

ui/src/shared/apis/index.js

@@ -89,6 +89,18 @@ export const getKapacitors = async source => {
   }
 }
 
+export const deleteKapacitor = async (source, kapacitorID) => {
+  try {
+    return await AJAX({
+      method: 'DELETE',
+      url: `${source.links.kapacitors}/${kapacitorID}`,
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
 export function createKapacitor(
   source,
   {url, name = 'My Kapacitor', username, password}
@@ -151,11 +163,9 @@ export function updateKapacitorConfigSection(kapacitor, section, properties) {
 }
 
 export function testAlertOutput(kapacitor, outputName, properties) {
-  return kapacitorProxy(
-    kapacitor,
-    'GET',
-    '/kapacitor/v1/service-tests'
-  ).then(({data: {services}}) => {
+  return kapacitorProxy(kapacitor, 'GET', '/kapacitor/v1/service-tests').then(({
+    data: {services},
+  }) => {
     const service = services.find(s => s.name === outputName)
     return kapacitorProxy(
       kapacitor,

ui/src/shared/reducers/sources.js

@@ -54,6 +54,18 @@ const sourcesReducer = (state = initialState, action) => {
       })
       return updatedSources
     }
+
+    case 'DELETE_KAPACITOR': {
+      const {kapacitor} = action.payload
+      const updatedSources = _.cloneDeep(state)
+      updatedSources.forEach(source => {
+        const index = _.findIndex(source.kapacitors, k => k.id === kapacitor.id)
+        if (index >= 0) {
+          source.kapacitors.splice(index, 1)
+        }
+      })
+      return updatedSources
+    }
   }
 
   return state

ui/src/sources/components/InfluxTable.js

@@ -3,7 +3,13 @@ import {Link, withRouter} from 'react-router'
 
 import Dropdown from 'shared/components/Dropdown'
 
-const kapacitorDropdown = (kapacitors, source, router, setActiveKapacitor) => {
+const kapacitorDropdown = (
+  kapacitors,
+  source,
+  router,
+  setActiveKapacitor,
+  handleDeleteKapacitor
+) => {
   if (!kapacitors || kapacitors.length === 0) {
     return (
       <Link to={`/sources/${source.id}/kapacitors/new`}>Add Kapacitor</Link>
@@ -45,6 +51,14 @@ const kapacitorDropdown = (kapacitors, source, router, setActiveKapacitor) => {
             router.push(`${item.resource}/edit`)
           },
         },
+        {
+          icon: 'trash',
+          text: 'delete',
+          handler: item => {
+            handleDeleteKapacitor(source, item.kapacitor)
+          },
+          confirmable: true,
+        },
       ]}
       selected={selected}
     />
@@ -58,6 +72,7 @@ const InfluxTable = ({
   location,
   router,
   setActiveKapacitor,
+  handleDeleteKapacitor,
 }) => (
   <div className="row">
     <div className="col-md-12">
@@ -100,7 +115,8 @@ const InfluxTable = ({
                         s.kapacitors,
                         s,
                         router,
-                        setActiveKapacitor
+                        setActiveKapacitor,
+                        handleDeleteKapacitor
                       )}
                     </td>
                     <td className="text-right">
@@ -147,6 +163,7 @@ InfluxTable.propTypes = {
   }),
   sources: array.isRequired,
   setActiveKapacitor: func.isRequired,
+  handleDeleteKapacitor: func.isRequired,
 }
 
 export default withRouter(InfluxTable)

ui/src/sources/containers/ManageSources.js

@@ -6,6 +6,7 @@ import {
   removeAndLoadSources,
   fetchKapacitorsAsync,
   setActiveKapacitorAsync,
+  deleteKapacitorAsync,
 } from 'src/shared/actions/sources'
 
 import InfluxTable from '../components/InfluxTable'
@@ -45,7 +46,7 @@ class ManageSources extends Component {
   }
 
   render() {
-    const {sources, source, setActiveKapacitor} = this.props
+    const {sources, source, setActiveKapacitor, deleteKapacitor} = this.props
 
     return (
       <div className="page" id="manage-sources-page">
@@ -63,6 +64,7 @@ class ManageSources extends Component {
               source={source}
               sources={sources}
               setActiveKapacitor={setActiveKapacitor}
+              handleDeleteKapacitor={deleteKapacitor}
             />
           </div>
         </div>
@@ -86,6 +88,7 @@ ManageSources.propTypes = {
   removeAndLoadSources: func.isRequired,
   fetchKapacitors: func.isRequired,
   setActiveKapacitor: func.isRequired,
+  deleteKapacitor: func.isRequired,
 }
 
 const mapStateToProps = ({sources}) => ({
@@ -96,6 +99,7 @@ const mapDispatchToProps = dispatch => ({
   removeAndLoadSources: bindActionCreators(removeAndLoadSources, dispatch),
   fetchKapacitors: bindActionCreators(fetchKapacitorsAsync, dispatch),
   setActiveKapacitor: bindActionCreators(setActiveKapacitorAsync, dispatch),
+  deleteKapacitor: bindActionCreators(deleteKapacitorAsync, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(ManageSources)