Update frontend to handle new :interval: shape

ui/src/dashboards/containers/DashboardPage.js

@@ -263,14 +263,23 @@ class DashboardPage extends Component {
       ],
     }
 
-    // this controls the auto group by behavior
     const interval = {
       id: 'interval',
-      type: 'constant',
+      type: 'autoGroupBy',
       tempVar: ':interval:',
-      resolution: 1000,
-      reportingInterval: 10000000000,
-      values: [],
+      label: 'automatically determine the best group by time',
+      values: [
+        {
+          value: '1000', // pixels
+          type: 'resolution',
+          selected: true,
+        },
+        {
+          value: '3',
+          type: 'pointsPerPixel',
+          selected: true,
+        },
+      ],
     }
 
     let templatesIncludingDashTime

ui/src/shared/components/AutoRefresh.js

@@ -81,20 +81,35 @@ const AutoRefresh = ComposedComponent => {
         const templatesWithResolution = templates.map(temp => {
           if (temp.tempVar === ':interval:') {
             if (resolution) {
-              return {...temp, resolution}
+              return {
+                ...temp,
+                values: temp.values.map(
+                  v => (temp.type === 'resolution' ? {...v, resolution} : v)
+                ),
+              }
+            }
+
+            return {
+              ...temp,
+              values: [
+                ...temp.values,
+                {value: '1000', type: 'resolution', selected: true},
+              ],
             }
-            return {...temp, resolution: 1000}
           }
-          return {...temp}
+
+          return temp
         })
 
+        const tempVars = removeUnselectedTemplateValues(templatesWithResolution)
+
         return fetchTimeSeriesAsync(
           {
             source: host,
             db: database,
             rp,
             query,
-            tempVars: removeUnselectedTemplateValues(templatesWithResolution),
+            tempVars,
             resolution,
           },
           editQueryStatus