PUT to Template Variable API works.

ui/spec/dashboards/reducers/uiSpec.js

@@ -10,7 +10,7 @@ import {
   editDashboardCell,
   renameDashboardCell,
   syncDashboardCell,
-  templateVariableEdited,
+  editTemplateVariableSuccess,
   templateVariableSelected,
 } from 'src/dashboards/actions'
 
@@ -63,10 +63,11 @@ const c1 = {
 }
 const cells = [c1]
 const tempVar = {
-  id: 1,
+  ...d1.templates[0],
+  id: '1',
   type: 'measurement',
   label: 'test query',
-  code: '$HOSTS',
+  tempVar: '$HOSTS',
   query: {
     db: 'db1',
     text: 'SHOW TAGS WHERE HUNTER = "coo"',
@@ -167,17 +168,17 @@ describe('DataExplorer.Reducers.UI', () => {
     state = {
       dashboards: [dash],
     }
-    const updates = {
-      code: '$NEWCODE',
+    const edited = {
+      ...d1.templates[0],
+      id: '1',
+      tempVar: '$NEWCODE',
       label: 'new label',
       type: 'tagKey',
     }
-    const expected = {...tempVar, ...updates}
+    const expected = {...tempVar, ...edited}
+
+    const actual = reducer(state, editTemplateVariableSuccess(dash.id, edited))
 
-    const actual = reducer(
-      state,
-      templateVariableEdited(dash.id, tempVar.id, updates)
-    )
     expect(actual.dashboards[0].templates[0]).to.deep.equal(expected)
   })
 

ui/src/dashboards/actions/index.js

@@ -5,10 +5,12 @@ import {
   updateDashboardCell as updateDashboardCellAJAX,
   addDashboardCell as addDashboardCellAJAX,
   deleteDashboardCell as deleteDashboardCellAJAX,
+  editTemplateVariable as editTemplateVariableAJAX,
 } from 'src/dashboards/apis'
 
 import {publishNotification} from 'shared/actions/notifications'
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
+// import {errorThrown} from 'shared/actions/errors'
 
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants'
 
@@ -122,12 +124,11 @@ export const templateVariableSelected = (dashboardID, templateID, values) => ({
   },
 })
 
-export const templateVariableEdited = (dashboardID, templateID, updates) => ({
-  type: 'TEMPLATE_VARIABLE_EDITED',
+export const editTemplateVariableSuccess = (dashboardID, data) => ({
+  type: 'EDIT_TEMPLATE_VARIABLE_SUCCESS',
   payload: {
     dashboardID,
-    templateID,
-    updates,
+    data,
   },
 })
 
@@ -150,6 +151,9 @@ const templates = [
       {value: 'us-east', type: 'tagKey', selected: true},
       {value: 'us-mount', type: 'tagKey', selected: false},
     ],
+    links: {
+      self: '/chronograf/v1/dashboards/2/templates/1',
+    },
   },
   {
     id: '2',
@@ -161,6 +165,9 @@ const templates = [
       {value: '99.1', type: 'measurement', selected: false},
       {value: '101.3', type: 'measurement', selected: true},
     ],
+    links: {
+      self: '/chronograf/v1/dashboards/2/templates/2',
+    },
   },
 ]
 
@@ -232,3 +239,21 @@ export const deleteDashboardCellAsync = cell => async dispatch => {
     throw error
   }
 }
+
+export const editTemplateVariableAsync = (
+  dashboardID,
+  staleTemplateVariable,
+  editedTemplateVariable
+) => async dispatch => {
+  // dispatch(editTemplateVariableRequested())
+  try {
+    const {data} = await editTemplateVariableAJAX(
+      staleTemplateVariable,
+      editedTemplateVariable
+    )
+    dispatch(editTemplateVariableSuccess(+dashboardID, data))
+  } catch (error) {
+    // dispatch(errorThrown(error))
+    // dispatch(editTemplateVariableFailed())
+  }
+}

ui/src/dashboards/apis/index.js

@@ -23,7 +23,7 @@ export function updateDashboardCell(cell) {
   })
 }
 
-export const createDashboard = async (dashboard) => {
+export const createDashboard = async dashboard => {
   try {
     return await AJAX({
       method: 'POST',
@@ -36,7 +36,7 @@ export const createDashboard = async (dashboard) => {
   }
 }
 
-export const deleteDashboard = async (dashboard) => {
+export const deleteDashboard = async dashboard => {
   try {
     return await AJAX({
       method: 'DELETE',
@@ -61,7 +61,7 @@ export const addDashboardCell = async (dashboard, cell) => {
   }
 }
 
-export const deleteDashboardCell = async (cell) => {
+export const deleteDashboardCell = async cell => {
   try {
     return await AJAX({
       method: 'DELETE',
@@ -72,3 +72,19 @@ export const deleteDashboardCell = async (cell) => {
     throw error
   }
 }
+
+export const editTemplateVariable = async (
+  staleTemplateVariable,
+  editedTemplateVariable
+) => {
+  try {
+    return await AJAX({
+      method: 'PUT',
+      url: staleTemplateVariable.links.self,
+      data: editedTemplateVariable,
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

ui/src/dashboards/containers/DashboardPage.js

@@ -154,14 +154,12 @@ class DashboardPage extends Component {
     )
   }
 
-  handleEditTemplateVariable(staleTemplateVariable, newTemplateVariable) {
-    // const {params: {dashboardID}} = this.props
-    console.log(staleTemplateVariable, newTemplateVariable)
-    // this.props.dashboardActions.templateVariableEdited(
-    //   +dashboardID,
-    //   templateVariableID,
-    //   updates
-    // )
+  handleEditTemplateVariable(staleTemplateVariable, editedTemplateVariable) {
+    this.props.dashboardActions.editTemplateVariableAsync(
+      this.props.params.dashboardID,
+      staleTemplateVariable,
+      editedTemplateVariable
+    )
   }
 
   getActiveDashboard() {

ui/src/dashboards/reducers/ui.js

@@ -10,9 +10,7 @@ const initialState = {
   cellQueryStatus: {queryID: null, status: null},
 }
 
-import {
-  TEMPLATE_VARIABLE_SELECTED,
-} from 'shared/constants/actionTypes'
+import {TEMPLATE_VARIABLE_SELECTED} from 'shared/constants/actionTypes'
 
 export default function ui(state = initialState, action) {
   switch (action.type) {
@@ -185,12 +183,16 @@ export default function ui(state = initialState, action) {
     }
 
     case TEMPLATE_VARIABLE_SELECTED: {
-      const {dashboardID, templateID, values: updatedSelectedValues} = action.payload
-      const newDashboards = state.dashboards.map((dashboard) => {
+      const {
+        dashboardID,
+        templateID,
+        values: updatedSelectedValues,
+      } = action.payload
+      const newDashboards = state.dashboards.map(dashboard => {
         if (dashboard.id === dashboardID) {
-          const newTemplates = dashboard.templates.map((staleTemplate) => {
+          const newTemplates = dashboard.templates.map(staleTemplate => {
             if (staleTemplate.id === templateID) {
-              const newValues = staleTemplate.values.map((staleValue) => {
+              const newValues = staleTemplate.values.map(staleValue => {
                 let selected = false
                 for (let i = 0; i < updatedSelectedValues.length; i++) {
                   if (updatedSelectedValues[i].value === staleValue.value) {
@@ -211,18 +213,16 @@ export default function ui(state = initialState, action) {
       return {...state, dashboards: newDashboards}
     }
 
-    case 'EDIT_TEMPLATE': {
-      const {dashboardID, templateID, updates} = action.payload
-
+    case 'EDIT_TEMPLATE_VARIABLE_SUCCESS': {
+      const {dashboardID, data} = action.payload
+      debugger
       const dashboards = state.dashboards.map(
         d =>
           (d.id === dashboardID
             ? {
-              ...d,
-              templates: d.templates.map(
-                t => (t.id === templateID ? {...t, ...updates} : t)
-              ),
-            }
+                ...d,
+                templates: d.templates.map(t => (t.id === data.id ? data : t)),
+              }
             : d)
       )
       return {...state, dashboards}