Add dashboard to props

ui/src/dashboards/containers/DashboardPage.js

@@ -53,6 +53,7 @@ class DashboardPage extends Component {
     const dashboard = dashboards.find(
       d => d.id === idNormalizer(TYPE_ID, dashboardID)
     )
+
     // Refresh and persists influxql generated template variable values
     await updateTempVarValues(source, dashboard)
     await putDashboardByID(dashboardID)
@@ -76,8 +77,9 @@ class DashboardPage extends Component {
   }
 
   handleSaveEditedCell = newCell => {
-    this.props.dashboardActions
-      .updateDashboardCell(this.getActiveDashboard(), newCell)
+    const {dashboardActions, dashboard} = this.props
+    dashboardActions
+      .updateDashboardCell(dashboard, newCell)
       .then(this.handleDismissOverlay)
   }
 
@@ -86,21 +88,24 @@ class DashboardPage extends Component {
   }
 
   handleChooseTimeRange = ({upper, lower}) => {
-    const {params: {dashboardID}, dashboardActions} = this.props
-    dashboardActions.setDashTimeV1(idNormalizer(TYPE_ID, dashboardID), {
+    const {dashboard, dashboardActions} = this.props
+    dashboardActions.setDashTimeV1(dashboard.id, {
       upper,
       lower,
     })
   }
 
   handleUpdatePosition = cells => {
-    const newDashboard = {...this.getActiveDashboard(), cells}
-    this.props.dashboardActions.updateDashboard(newDashboard)
-    this.props.dashboardActions.putDashboard(newDashboard)
+    const {dashboardActions, dashboard} = this.props
+    const newDashboard = {...dashboard, cells}
+
+    dashboardActions.updateDashboard(newDashboard)
+    dashboardActions.putDashboard(newDashboard)
   }
 
   handleAddCell = () => {
-    this.props.dashboardActions.addDashboardCellAsync(this.getActiveDashboard())
+    const {dashboardActions, dashboard} = this.props
+    dashboardActions.addDashboardCellAsync(dashboard)
   }
 
   handleEditDashboard = () => {
@@ -112,42 +117,40 @@ class DashboardPage extends Component {
   }
 
   handleRenameDashboard = name => {
+    const {dashboardActions, dashboard} = this.props
     this.setState({isEditMode: false})
-    const newDashboard = {...this.getActiveDashboard(), name}
-    this.props.dashboardActions.updateDashboard(newDashboard)
-    this.props.dashboardActions.putDashboard(newDashboard)
+    const newDashboard = {...dashboard, name}
+
+    dashboardActions.updateDashboard(newDashboard)
+    dashboardActions.putDashboard(newDashboard)
   }
 
-  handleUpdateDashboardCell = newCell => {
-    return () => {
-      this.props.dashboardActions.updateDashboardCell(
-        this.getActiveDashboard(),
-        newCell
-      )
-    }
+  handleUpdateDashboardCell = newCell => () => {
+    const {dashboardActions, dashboard} = this.props
+    dashboardActions.updateDashboardCell(dashboard, newCell)
   }
 
   handleDeleteDashboardCell = cell => {
-    const dashboard = this.getActiveDashboard()
-    this.props.dashboardActions.deleteDashboardCellAsync(dashboard, cell)
+    const {dashboardActions, dashboard} = this.props
+    dashboardActions.deleteDashboardCellAsync(dashboard, cell)
   }
 
   handleSelectTemplate = templateID => values => {
-    const {params: {dashboardID}} = this.props
-    this.props.dashboardActions.templateVariableSelected(
-      idNormalizer(TYPE_ID, dashboardID),
-      templateID,
-      [values]
-    )
+    const {dashboardActions, dashboard} = this.props
+    dashboardActions.templateVariableSelected(dashboard.id, templateID, [
+      values,
+    ])
   }
 
   handleEditTemplateVariables = (
     templates,
     onSaveTemplatesSuccess
   ) => async () => {
+    const {dashboardActions, dashboard} = this.props
+
     try {
-      await this.props.dashboardActions.putDashboard({
-        ...this.getActiveDashboard(),
+      await dashboardActions.putDashboard({
+        dashboard,
         templates,
       })
       onSaveTemplatesSuccess()
@@ -191,11 +194,6 @@ class DashboardPage extends Component {
     this.setState({zoomedTimeRange: {zoomedLower, zoomedUpper}})
   }
 
-  getActiveDashboard() {
-    const {params: {dashboardID}, dashboards} = this.props
-    return dashboards.find(d => d.id === idNormalizer(TYPE_ID, dashboardID))
-  }
-
   render() {
     const {zoomedTimeRange} = this.state
     const {zoomedLower, zoomedUpper} = zoomedTimeRange
@@ -206,6 +204,7 @@ class DashboardPage extends Component {
       timeRange,
       timeRange: {lower, upper},
       showTemplateControlBar,
+      dashboard,
       dashboards,
       autoRefresh,
       cellQueryStatus,
@@ -258,8 +257,6 @@ class DashboardPage extends Component {
       values: [],
     }
 
-    const dashboard = this.getActiveDashboard()
-
     let templatesIncludingDashTime
     if (dashboard) {
       templatesIncludingDashTime = [
@@ -378,6 +375,7 @@ DashboardPage.propTypes = {
     pathname: string.isRequired,
     query: shape({}),
   }).isRequired,
+  dashboard: shape({}),
   dashboardActions: shape({
     putDashboard: func.isRequired,
     getDashboardsAsync: func.isRequired,
@@ -440,9 +438,14 @@ const mapStateToProps = (state, {params: {dashboardID}}) => {
       r => r.dashboardID === idNormalizer(TYPE_ID, dashboardID)
     ) || defaultTimeRange
 
+  const dashboard = dashboards.find(
+    d => d.id === idNormalizer(TYPE_ID, dashboardID)
+  )
+
   return {
     dashboards,
     autoRefresh,
+    dashboard,
     timeRange,
     showTemplateControlBar,
     inPresentationMode,