diff --git a/ui/src/dashboards/actions/index.js b/ui/src/dashboards/actions/index.js
index b48541de3..58b003dba 100644
--- a/ui/src/dashboards/actions/index.js
+++ b/ui/src/dashboards/actions/index.js
@@ -3,6 +3,7 @@ import {
updateDashboard as updateDashboardAJAX,
updateDashboardCell as updateDashboardCellAJAX,
addDashboardCell as addDashboardCellAJAX,
+ deleteDashboardCell as deleteDashboardCellAJAX,
} from 'src/dashboards/apis'
import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants'
@@ -86,6 +87,13 @@ export const renameDashboardCell = (x, y, name) => ({
},
})
+export const deleteDashboardCell = (cell) => ({
+ type: 'DELETE_DASHBOARD_CELL',
+ payload: {
+ cell,
+ },
+})
+
// Async Action Creators
export const getDashboards = (dashboardID) => (dispatch) => {
@@ -117,3 +125,13 @@ export const addDashboardCellAsync = (dashboard) => async (dispatch) => {
throw error
}
}
+
+export const deleteDashboardCellAsync = (cell) => async (dispatch) => {
+ try {
+ await deleteDashboardCellAJAX(cell)
+ dispatch(deleteDashboardCell(cell))
+ } catch (error) {
+ console.error(error)
+ throw error
+ }
+}
diff --git a/ui/src/dashboards/apis/index.js b/ui/src/dashboards/apis/index.js
index 7a4168f09..2abf5db8f 100644
--- a/ui/src/dashboards/apis/index.js
+++ b/ui/src/dashboards/apis/index.js
@@ -48,3 +48,15 @@ export const addDashboardCell = async (dashboard, cell) => {
throw error
}
}
+
+export const deleteDashboardCell = async (cell) => {
+ try {
+ return await AJAX({
+ method: 'DELETE',
+ url: cell.links.self,
+ })
+ } catch (error) {
+ console.error(error)
+ throw error
+ }
+}
diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js
index 2b8c6751a..fd1dc3d46 100644
--- a/ui/src/dashboards/components/Dashboard.js
+++ b/ui/src/dashboards/components/Dashboard.js
@@ -12,6 +12,7 @@ const Dashboard = ({
onEditCell,
onRenameCell,
onUpdateCell,
+ onDeleteCell,
onSummonOverlayTechnologies,
source,
autoRefresh,
@@ -25,13 +26,13 @@ const Dashboard = ({
{isEditMode ? : null}
- {Dashboard.renderDashboard(dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onSummonOverlayTechnologies)}
+ {Dashboard.renderDashboard(dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies)}
)
}
-Dashboard.renderDashboard = (dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onSummonOverlayTechnologies) => {
+Dashboard.renderDashboard = (dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies) => {
const cells = dashboard.cells.map((cell, i) => {
i = `${i}`
const dashboardCell = {...cell, i}
@@ -58,6 +59,7 @@ Dashboard.renderDashboard = (dashboard, autoRefresh, timeRange, source, onPositi
onEditCell={onEditCell}
onRenameCell={onRenameCell}
onUpdateCell={onUpdateCell}
+ onDeleteCell={onDeleteCell}
onSummonOverlayTechnologies={onSummonOverlayTechnologies}
/>
)
@@ -79,6 +81,7 @@ Dashboard.propTypes = {
onEditCell: func,
onRenameCell: func,
onUpdateCell: func,
+ onDeleteCell: func,
onSummonOverlayTechnologies: func,
source: shape({
links: shape({
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index 5610da0f6..de8250890 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/ui/src/dashboards/containers/DashboardPage.js
@@ -154,6 +154,10 @@ const DashboardPage = React.createClass({
}
},
+ handleDeleteDashboardCell(cell) {
+ this.props.dashboardActions.deleteDashboardCellAsync(cell)
+ },
+
render() {
const {
dashboards,
@@ -223,6 +227,7 @@ const DashboardPage = React.createClass({
onEditCell={this.handleEditDashboardCell}
onRenameCell={this.handleRenameDashboardCell}
onUpdateCell={this.handleUpdateDashboardCell}
+ onDeleteCell={this.handleDeleteDashboardCell}
onSummonOverlayTechnologies={this.handleSummonOverlayTechnologies}
/>
diff --git a/ui/src/dashboards/reducers/ui.js b/ui/src/dashboards/reducers/ui.js
index abc1c73db..982a7ddd4 100644
--- a/ui/src/dashboards/reducers/ui.js
+++ b/ui/src/dashboards/reducers/ui.js
@@ -109,6 +109,23 @@ export default function ui(state = initialState, action) {
return {...state, ...newState}
}
+ case 'DELETE_DASHBOARD_CELL': {
+ const {cell} = action.payload
+ const {dashboard} = state
+
+ const newCells = dashboard.cells.filter((c) => !(c.x === cell.x && c.y === cell.y))
+ const newDashboard = {
+ ...dashboard,
+ cells: newCells,
+ }
+ const newState = {
+ dashboard: newDashboard,
+ dashboards: state.dashboards.map((d) => d.id === dashboard.id ? newDashboard : d),
+ }
+
+ return {...state, ...newState}
+ }
+
case 'SYNC_DASHBOARD_CELL': {
const {cell} = action.payload
const {dashboard} = state
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index 9932f4ae4..89c744a1f 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -50,6 +50,7 @@ export const LayoutRenderer = React.createClass({
onEditCell: func,
onRenameCell: func,
onUpdateCell: func,
+ onDeleteCell: func,
onSummonOverlayTechnologies: func,
},
@@ -86,7 +87,7 @@ export const LayoutRenderer = React.createClass({
},
generateVisualizations() {
- const {autoRefresh, source, cells, onEditCell, onRenameCell, onUpdateCell, onSummonOverlayTechnologies} = this.props;
+ const {autoRefresh, source, cells, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies} = this.props;
return cells.map((cell) => {
const qs = cell.queries.map((query) => {
@@ -103,6 +104,7 @@ export const LayoutRenderer = React.createClass({
onEditCell={onEditCell}
onRenameCell={onRenameCell}
onUpdateCell={onUpdateCell}
+ onDeleteCell={onDeleteCell}
onSummonOverlayTechnologies={onSummonOverlayTechnologies}
cell={cell}
>
@@ -123,6 +125,7 @@ export const LayoutRenderer = React.createClass({
onEditCell={onEditCell}
onRenameCell={onRenameCell}
onUpdateCell={onUpdateCell}
+ onDeleteCell={onDeleteCell}
onSummonOverlayTechnologies={onSummonOverlayTechnologies}
cell={cell}
>
diff --git a/ui/src/shared/components/NameableGraph.js b/ui/src/shared/components/NameableGraph.js
index 3ab2d991b..7c4cf2669 100644
--- a/ui/src/shared/components/NameableGraph.js
+++ b/ui/src/shared/components/NameableGraph.js
@@ -23,6 +23,7 @@ const NameableGraph = React.createClass({
onEditCell: func,
onRenameCell: func,
onUpdateCell: func,
+ onDeleteCell: func,
onSummonOverlayTechnologies: func,
},
@@ -56,6 +57,7 @@ const NameableGraph = React.createClass({
onEditCell,
onRenameCell,
onUpdateCell,
+ onDeleteCell,
onSummonOverlayTechnologies,
children,
} = this.props
@@ -96,7 +98,7 @@ const NameableGraph = React.createClass({
{children}
@@ -106,13 +108,14 @@ const NameableGraph = React.createClass({
},
})
-const ContextMenu = OnClickOutside(({isOpen, toggleMenu, onEdit, cell}) => (
+const ContextMenu = OnClickOutside(({isOpen, toggleMenu, onEdit, onDelete, cell}) => (
- onEdit(cell)}>Edit
+ - onDelete(cell)}>Delete
))