TVM now persists its state to the server.

ui/src/dashboards/actions/index.js

@@ -5,7 +5,6 @@ import {
   updateDashboardCell as updateDashboardCellAJAX,
   addDashboardCell as addDashboardCellAJAX,
   deleteDashboardCell as deleteDashboardCellAJAX,
-  editTemplateVariable as editTemplateVariableAJAX,
 } from 'src/dashboards/apis'
 
 import {publishNotification} from 'shared/actions/notifications'
@@ -199,22 +198,3 @@ 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) {
-    console.error(error)
-    // dispatch(errorThrown(error))
-    // dispatch(editTemplateVariableFailed())
-  }
-}

ui/src/dashboards/apis/index.js

@@ -74,15 +74,12 @@ export const deleteDashboardCell = async cell => {
   }
 }
 
-export const editTemplateVariable = async (
-  staleTemplateVariable,
-  editedTemplateVariable
-) => {
+export const editTemplateVariables = async templateVariable => {
   try {
     return await AJAX({
       method: 'PUT',
-      url: staleTemplateVariable.links.self,
-      data: editedTemplateVariable,
+      url: templateVariable.links.self,
+      data: templateVariable,
     })
   } catch (error) {
     console.error(error)

ui/src/dashboards/components/TemplateVariableManager.js

@@ -3,6 +3,8 @@ import OnClickOutside from 'react-onclickoutside'
 import TemplateVariableTable
   from 'src/dashboards/components/TemplateVariableTable'
 
+import {TEMPLATE_VARIABLE_TYPES} from 'src/dashboards/constants'
+
 const TemplateVariableManager = ({
   onClose,
   onEditTemplateVariables,
@@ -20,7 +22,7 @@ const TemplateVariableManager = ({
         <button className="btn btn-primary btn-sm">Add Variable</button>
         <button
           className="btn btn-primary btn-sm"
-          onClick={onEditTemplateVariables}
+          onClick={onEditTemplateVariables(templates)}
         >
           Save Template
         </button>
@@ -86,7 +88,7 @@ class TemplateVariableManagerWrapper extends Component {
 
     const values = parsedData.map(value => ({
       value,
-      type,
+      type: TEMPLATE_VARIABLE_TYPES[type],
       selected: selectedValue === value,
     }))
 

ui/src/dashboards/constants/index.js

@@ -54,6 +54,15 @@ export const TEMPLATE_TYPES = [
   },
 ]
 
+export const TEMPLATE_VARIABLE_TYPES = {
+  csv: 'csv',
+  databases: 'database',
+  measurements: 'measurement',
+  fieldKeys: 'fieldKey',
+  tagKeys: 'tagKey',
+  tagValues: 'tagValue',
+}
+
 export const TEMPLATE_VARIABLE_QUERIES = {
   databases: 'SHOW DATABASES',
   measurements: 'SHOW MEASUREMENTS ON $database',

ui/src/dashboards/containers/DashboardPage.js

@@ -177,13 +177,16 @@ class DashboardPage extends Component {
   }
 
   // TODO: make this work over array of template variables onSave in TVM
-  handleEditTemplateVariables(staleTemplateVariable, editedTemplateVariable) {
-    //   // this.props.dashboardActions.editTemplateVariableAsync(
-    //   //   this.props.params.dashboardID,
-    //   //   staleTemplateVariable,
-    //   //   editedTemplateVariable
-    //   // )
-    //   console.log('hello')
+  handleEditTemplateVariables(templates) {
+    return e => {
+      const {params: {dashboardID}, dashboards} = this.props
+      const currentDashboard = dashboards.find(({id}) => id === +dashboardID)
+
+      this.props.dashboardActions.putDashboard({
+        ...currentDashboard,
+        templates,
+      })
+    }
   }
 
   handleRunQueryFailure(error) {

ui/src/dashboards/reducers/ui.js

@@ -219,7 +219,7 @@ export default function ui(state = initialState, action) {
           (d.id === dashboardID
             ? {
                 ...d,
-                templates: d.templates.map(t => (t.id === data.id ? data : t)),
+                templates: data,
               }
             : d)
       )