diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index bb7c389df..0824a197a 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/ui/src/dashboards/containers/DashboardPage.js @@ -27,31 +27,11 @@ class DashboardPage extends Component { super(props) this.state = { - selectedCell: null, - isEditMode: false, - isTemplating: false, dygraphs: [], + isEditMode: false, + selectedCell: null, + isTemplating: false, } - - this.handleAddCell = ::this.handleAddCell - this.handleEditDashboard = ::this.handleEditDashboard - this.handleSaveEditedCell = ::this.handleSaveEditedCell - this.handleDismissOverlay = ::this.handleDismissOverlay - this.handleUpdatePosition = ::this.handleUpdatePosition - this.handleChooseTimeRange = ::this.handleChooseTimeRange - this.handleRenameDashboard = ::this.handleRenameDashboard - this.handleEditDashboardCell = ::this.handleEditDashboardCell - this.handleCancelEditDashboard = ::this.handleCancelEditDashboard - this.handleDeleteDashboardCell = ::this.handleDeleteDashboardCell - this.handleOpenTemplateManager = ::this.handleOpenTemplateManager - this.handleUpdateDashboardCell = ::this.handleUpdateDashboardCell - this.handleSummonOverlayTechnologies = ::this - .handleSummonOverlayTechnologies - this.handleRunTemplateVariableQuery = ::this.handleRunTemplateVariableQuery - this.handleEditTemplateVariables = ::this.handleEditTemplateVariables - this.handleRunQueryFailure = ::this.handleRunQueryFailure - this.handleToggleTempVarControls = ::this.handleToggleTempVarControls - this.synchronizer = ::this.synchronizer } async componentDidMount() { @@ -73,7 +53,7 @@ class DashboardPage extends Component { await putDashboardByID(dashboardID) } - handleOpenTemplateManager() { + handleOpenTemplateManager = () => { this.setState({isTemplating: true}) } @@ -86,43 +66,43 @@ class DashboardPage extends Component { } } - handleDismissOverlay() { + handleDismissOverlay = () => { this.setState({selectedCell: null}) } - handleSaveEditedCell(newCell) { + handleSaveEditedCell = newCell => { this.props.dashboardActions .updateDashboardCell(this.getActiveDashboard(), newCell) .then(this.handleDismissOverlay) } - handleSummonOverlayTechnologies(cell) { + handleSummonOverlayTechnologies = cell => { this.setState({selectedCell: cell}) } - handleChooseTimeRange(timeRange) { + handleChooseTimeRange = timeRange => { this.props.dashboardActions.setTimeRange(timeRange) } - handleUpdatePosition(cells) { + handleUpdatePosition = cells => { const newDashboard = {...this.getActiveDashboard(), cells} this.props.dashboardActions.updateDashboard(newDashboard) this.props.dashboardActions.putDashboard(newDashboard) } - handleAddCell() { + handleAddCell = () => { this.props.dashboardActions.addDashboardCellAsync(this.getActiveDashboard()) } - handleEditDashboard() { + handleEditDashboard = () => { this.setState({isEditMode: true}) } - handleCancelEditDashboard() { + handleCancelEditDashboard = () => { this.setState({isEditMode: false}) } - handleRenameDashboard(name) { + handleRenameDashboard = name => { this.setState({isEditMode: false}) const newDashboard = {...this.getActiveDashboard(), name} this.props.dashboardActions.updateDashboard(newDashboard) @@ -130,7 +110,7 @@ class DashboardPage extends Component { } // Places cell into editing mode. - handleEditDashboardCell(x, y, isEditing) { + handleEditDashboardCell = (x, y, isEditing) => { return () => { this.props.dashboardActions.editDashboardCell( this.getActiveDashboard(), @@ -141,7 +121,7 @@ class DashboardPage extends Component { } } - handleUpdateDashboardCell(newCell) { + handleUpdateDashboardCell = newCell => { return () => { this.props.dashboardActions.updateDashboardCell( this.getActiveDashboard(), @@ -150,7 +130,7 @@ class DashboardPage extends Component { } } - handleDeleteDashboardCell(cell) { + handleDeleteDashboardCell = cell => { const dashboard = this.getActiveDashboard() this.props.dashboardActions.deleteDashboardCellAsync(dashboard, cell) } @@ -164,46 +144,27 @@ class DashboardPage extends Component { ) } - handleRunTemplateVariableQuery( - templateVariable, - {query, db, tempVars, type, tagKey, measurement} - ) { - const {source} = this.props - this.props.dashboardActions.runTemplateVariableQueryAsync( - templateVariable, - { - source, - query, - db, - // rp, TODO - tempVars, - type, - tagKey, - measurement, - } - ) - } - - handleEditTemplateVariables(templates, onSaveTemplatesSuccess) { - return async () => { - try { - await this.props.dashboardActions.putDashboard({ - ...this.getActiveDashboard(), - templates, - }) - onSaveTemplatesSuccess() - } catch (error) { - console.error(error) - } + handleEditTemplateVariables = ( + templates, + onSaveTemplatesSuccess + ) => async () => { + try { + await this.props.dashboardActions.putDashboard({ + ...this.getActiveDashboard(), + templates, + }) + onSaveTemplatesSuccess() + } catch (error) { + console.error(error) } } - handleRunQueryFailure(error) { + handleRunQueryFailure = error => { console.error(error) this.props.errorThrown(error) } - synchronizer(dygraph) { + synchronizer = dygraph => { const dygraphs = [...this.state.dygraphs, dygraph] const {dashboards, params} = this.props const dashboard = dashboards.find(d => d.id === +params.dashboardID) @@ -221,11 +182,11 @@ class DashboardPage extends Component { this.setState({dygraphs}) } - handleToggleTempVarControls() { + handleToggleTempVarControls = () => { this.props.templateControlBarVisibilityToggled() } - handleCancelEditCell(cellID) { + handleCancelEditCell = cellID => { this.props.dashboardActions.cancelEditCell( this.getActiveDashboard().id, cellID @@ -313,49 +274,49 @@ class DashboardPage extends Component { {isTemplating ? : null} {selectedCell ? : null} {isEditMode ? : {dashboards ? dashboards.map((d, i) => @@ -373,19 +334,19 @@ class DashboardPage extends Component { dashboard={dashboard} timeRange={timeRange} autoRefresh={autoRefresh} - synchronizer={this.synchronizer} onAddCell={this.handleAddCell} - onEditCell={this.handleEditDashboardCell} + synchronizer={this.synchronizer} inPresentationMode={inPresentationMode} + onEditCell={this.handleEditDashboardCell} onPositionChange={this.handleUpdatePosition} + onSelectTemplate={this.handleSelectTemplate} + onCancelEditCell={this.handleCancelEditCell} onDeleteCell={this.handleDeleteDashboardCell} onUpdateCell={this.handleUpdateDashboardCell} + showTemplateControlBar={showTemplateControlBar} onOpenTemplateManager={this.handleOpenTemplateManager} templatesIncludingDashTime={templatesIncludingDashTime} onSummonOverlayTechnologies={this.handleSummonOverlayTechnologies} - onSelectTemplate={this.handleSelectTemplate} - showTemplateControlBar={showTemplateControlBar} - onCancelEditCell={::this.handleCancelEditCell} /> : null}