Updated tempVars schema and refactor how selected values are reduced

ui/src/dashboards/actions/index.js

@@ -128,32 +128,31 @@ export const tvSelected = (dashboardID, tvID, values) => ({
 
 const tempVars = [
   {
-    id: 1,
+    id: '1',
     type: 'query',
     label: 'test query',
     tempVar: '$REGION',
     query: {
-      db: 'db1.rp1',
+      db: 'db1',
+      rp: 'rp1',
       text: 'SHOW TAGS WHERE HUNTER = "coo"',
     },
     values: [
       {value: 'us-west', type: 'tagKey'},
-      {value: 'us-east', type: 'tagKey'},
+      {value: 'us-east', type: 'tagKey', selected: true},
       {value: 'us-mount', type: 'tagKey'},
     ],
-    selectedValues: [{value: 'us-east', type: 'tagKey'}],
   },
   {
-    id: 2,
+    id: '2',
     type: 'csv',
     label: 'test csv',
     tempVar: '$TEMPERATURE',
     values: [
       {value: '98.7', type: 'measurement'},
       {value: '99.1', type: 'measurement'},
-      {value: '101.3', type: 'measurement'},
+      {value: '101.3', type: 'measurement', selected: true},
     ],
-    selectedValues: [{value: '99.1', type: 'measurement'}],
   },
 ]
 

ui/src/dashboards/components/Dashboard.js

@@ -1,6 +1,8 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
 
+import omit from 'lodash/omit'
+
 import LayoutRenderer from 'shared/components/LayoutRenderer'
 import Dropdown from 'shared/components/Dropdown'
 
@@ -49,17 +51,23 @@ const Dashboard = ({
         </div>
         <div className="page-header__right">
           {
-            tempVars.map(({id, values, selectedValues}) => {
-              const items = values ? values.map((value) => Object.assign(value, {text: value.value})) : []
-              // TODO: change Dropdown to a MultiSelectDropdown, [0].value to
-              // the full array, and [item] to all selectedValues when we update
+            tempVars.map(({id, values}) => {
+              let selected
+              const items = values ? values.map((value) => {
+                if (value.selected) {
+                  selected = value.value
+                }
+                return Object.assign(value, {text: value.value})
+              }) : []
+              // TODO: change Dropdown to a MultiSelectDropdown, `selected` to
+              // the full array, and [item] to all `selected` values when we update
               // this component to support multiple values
               return (
                 <Dropdown
                   key={id}
                   items={items}
-                  selected={selectedValues[0].value || "Loading..."}
-                  onChoose={(item) => onSelectTV(id, [item])}
+                  selected={selected || "Loading..."}
+                  onChoose={(item) => onSelectTV(id, [item].map((x) => omit(x, 'text')))}
                 />
               )
             })

ui/src/dashboards/containers/DashboardPage.js

@@ -290,10 +290,7 @@ DashboardPage.propTypes = {
           values: arrayOf(shape({
             type: string.isRequired,
             value: string.isRequired,
-          })).isRequired,
-          selectedValues: arrayOf(shape({
-            type: string.isRequired,
-            value: string.isRequired,
+            selected: bool,
           })).isRequired,
         }),
       ),

ui/src/dashboards/reducers/ui.js

@@ -170,14 +170,24 @@ export default function ui(state = initialState, action) {
     }
 
     case TEMPLATE_VARIABLE_SELECTED: {
-      const {dashboardID, tvID, values} = action.payload
+      const {dashboardID, tvID, values: updatedSelectedValues} = action.payload
       const newDashboards = state.dashboards.map((dashboard) => {
         if (dashboard.id === dashboardID) {
-          const newTVs = dashboard.tempVars.map((tV) => {
-            if (tV.id === tvID) {
-              return {...tV, selectedValues: values}
+          const newTVs = dashboard.tempVars.map((staleTV) => {
+            if (staleTV.id === tvID) {
+              const newValues = staleTV.values.map((staleValue) => {
+                let selected = false
+                for (let i = 0; i < updatedSelectedValues.length; i++) {
+                  if (updatedSelectedValues[i].value === staleValue.value) {
+                    selected = true
+                    break
+                  }
+                }
+                return {...staleValue, selected}
+              })
+              return {...staleTV, values: newValues}
             }
-            return tV
+            return staleTV
           })
           return {...dashboard, tempVars: newTVs}
         }

ui/src/shared/components/AutoRefresh.js

@@ -4,6 +4,7 @@ import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
 
 const {
   arrayOf,
+  bool,
   element,
   func,
   number,
@@ -28,10 +29,7 @@ const AutoRefresh = (ComposedComponent) => {
         values: arrayOf(shape({
           type: string.isRequired,
           value: string.isRequired,
-        })).isRequired,
-        selectedValues: arrayOf(shape({
-          type: string.isRequired,
-          value: string.isRequired,
+          selected: bool,
         })).isRequired,
       })),
       queries: arrayOf(shape({

ui/src/shared/components/LayoutRenderer.js

@@ -47,12 +47,11 @@ export const LayoutRenderer = React.createClass({
       }).isRequired
     ),
     tempVars: arrayOf(shape({
-      id: number.isRequired,
+      id: string.isRequired,
       type: string.isRequired,
       label: string.isRequired,
       tempVar: string.isRequired,
       values: arrayOf(shape()).isRequired,
-      selectedValues: arrayOf(shape()).isRequired,
     })).isRequired,
     host: string,
     source: string,