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({
{nameOrField}
- +
{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
))