DashboardsPage can now delete a dashboard (tho not reflected in UI except on refresh)

ui/src/dashboards/actions/index.js

@@ -1,11 +1,14 @@
 import {
   getDashboards as getDashboardsAJAX,
   updateDashboard as updateDashboardAJAX,
+  deleteDashboard as deleteDashboardAJAX,
   updateDashboardCell as updateDashboardCellAJAX,
   addDashboardCell as addDashboardCellAJAX,
   deleteDashboardCell as deleteDashboardCellAJAX,
 } from 'src/dashboards/apis'
 
+import {publishNotification} from 'src/shared/actions/notifications';
+
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants'
 
 export const loadDashboards = (dashboards, dashboardID) => ({
@@ -37,6 +40,20 @@ export const updateDashboard = (dashboard) => ({
   },
 })
 
+export const deleteDashboard = (dashboard) => ({
+  type: 'DELETE_DASHBOARD',
+  payload: {
+    dashboard,
+  },
+})
+
+export const undoDeleteDashboard = (dashboard) => ({
+  type: 'UNDO_DELETE_DASHBOARD',
+  payload: {
+    dashboard,
+  },
+})
+
 export const updateDashboardCells = (cells) => ({
   type: 'UPDATE_DASHBOARD_CELLS',
   payload: {
@@ -109,6 +126,17 @@ export const updateDashboardCell = (cell) => (dispatch) => {
   })
 }
 
+export const deleteDashboardAsync = (dashboard) => async (dispatch) => {
+  dispatch(deleteDashboard(dashboard))
+  try {
+    await deleteDashboardAJAX(dashboard)
+    dispatch(publishNotification('success', 'Dashboard deleted successfully.'))
+  } catch (error) {
+    dispatch(undoDeleteDashboard(dashboard)) // undo optimistic update
+    dispatch(publishNotification('error', `Failed to delete dashboard: ${error.data.message}.`))
+  }
+}
+
 export const addDashboardCellAsync = (dashboard) => async (dispatch) => {
   try {
     const {data} = await addDashboardCellAJAX(dashboard, NEW_DEFAULT_DASHBOARD_CELL)

ui/src/dashboards/apis/index.js

@@ -36,6 +36,18 @@ export const createDashboard = async (dashboard) => {
   }
 }
 
+export const deleteDashboard = async (dashboard) => {
+  try {
+    return await AJAX({
+      method: 'DELETE',
+      url: dashboard.links.self,
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
 export const addDashboardCell = async (dashboard, cell) => {
   try {
     return await AJAX({

ui/src/dashboards/containers/DashboardsPage.js

@@ -1,8 +1,14 @@
 import React, {PropTypes} from 'react'
 import {Link, withRouter} from 'react-router'
-import SourceIndicator from '../../shared/components/SourceIndicator'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
+import SourceIndicator from 'shared/components/SourceIndicator'
+import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
 
 import {getDashboards, createDashboard} from '../apis'
+import {deleteDashboardAsync} from 'src/dashboards/actions'
+
 import {NEW_DASHBOARD} from 'src/dashboards/constants'
 
 const {
@@ -26,6 +32,7 @@ const DashboardsPage = React.createClass({
       push: func.isRequired,
     }).isRequired,
     addFlashMessage: func,
+    handleDeleteDashboard: func.isRequired,
   },
 
   getInitialState() {
@@ -50,6 +57,10 @@ const DashboardsPage = React.createClass({
     push(`/sources/${id}/dashboards/${data.id}`)
   },
 
+  handleDeleteDashboard(dashboard) {
+    this.props.handleDeleteDashboard(dashboard)
+  },
+
   render() {
     const dashboardLink = `/sources/${this.props.source.id}`
     let tableHeader
@@ -95,12 +106,13 @@ const DashboardsPage = React.createClass({
                           {
                             this.state.dashboards.map((dashboard) => {
                               return (
-                                <tr key={dashboard.id}>
+                                <tr key={dashboard.id} className="">
                                   <td className="monotype">
                                     <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
                                       {dashboard.name}
                                     </Link>
                                   </td>
+                                  <DeleteConfirmTableCell onDelete={this.handleDeleteDashboard} item={dashboard} />
                                 </tr>
                               );
                             })
@@ -125,4 +137,8 @@ const DashboardsPage = React.createClass({
   },
 })
 
-export default withRouter(DashboardsPage)
+const mapDispatchToProps = (dispatch) => ({
+  handleDeleteDashboard: bindActionCreators(deleteDashboardAsync, dispatch),
+})
+
+export default connect(null, mapDispatchToProps)(withRouter(DashboardsPage))

ui/src/dashboards/reducers/ui.js

@@ -48,6 +48,26 @@ export default function ui(state = initialState, action) {
       return {...state, ...newState}
     }
 
+    case 'DELETE_DASHBOARD': {
+      const {dashboard} = action.payload
+      const newState = {
+        dashboards: state.dashboards.filter((d) => d.id !== dashboard.id),
+      }
+
+      return {...state, ...newState}
+    }
+
+    case 'UNDO_DELETE_DASHBOARD': {
+      const {dashboard} = action.payload
+      const newState = {
+        dashboards: [
+          _.cloneDeep(dashboard),
+          ...state.dashboards,
+        ],
+      }
+      return {...state, ...newState}
+    }
+
     case 'UPDATE_DASHBOARD_CELLS': {
       const {cells} = action.payload
       const {dashboard} = state