Fetch resolution from dygraphs for autoGroupBy

ui/src/shared/actions/timeSeries.js

@@ -40,7 +40,7 @@ export const handleError = (error, query, editQueryStatus) => {
 }
 
 export const fetchTimeSeriesAsync = async (
-  {source, db, rp, query, tempVars},
+  {source, db, rp, query, tempVars, resolution},
   editQueryStatus = noop
 ) => {
   handleLoading(query, editQueryStatus)
@@ -51,6 +51,7 @@ export const fetchTimeSeriesAsync = async (
       rp,
       query: query.text,
       tempVars,
+      resolution,
     })
     return handleSuccess(data, query, editQueryStatus)
   } catch (error) {

ui/src/shared/components/AutoRefresh.js

@@ -50,6 +50,7 @@ const AutoRefresh = ComposedComponent => {
       return {
         lastQuerySuccessful: false,
         timeSeries: [],
+        resolution: null,
       }
     },
 
@@ -104,6 +105,7 @@ const AutoRefresh = ComposedComponent => {
 
     executeQueries(queries, templates = []) {
       const {editQueryStatus} = this.props
+      const {resolution} = this.state
 
       if (!queries.length) {
         this.setState({timeSeries: []})
@@ -121,6 +123,7 @@ const AutoRefresh = ComposedComponent => {
             rp,
             query,
             tempVars: removeUnselectedTemplateValues(templates),
+            resolution,
           },
           editQueryStatus
         )
@@ -143,6 +146,10 @@ const AutoRefresh = ComposedComponent => {
       this.intervalID = false
     },
 
+    setResolution(resolution) {
+      this.setState({resolution})
+    },
+
     render() {
       const {timeSeries} = this.state
 
@@ -157,7 +164,7 @@ const AutoRefresh = ComposedComponent => {
         return this.renderNoResults()
       }
 
-      return <ComposedComponent {...this.props} data={timeSeries} />
+      return <ComposedComponent {...this.props} data={timeSeries} setResolution={this.setResolution} />
     },
 
     /**

ui/src/shared/components/Dygraph.js

@@ -7,6 +7,7 @@ import _ from 'lodash'
 import Dygraphs from 'src/external/dygraph'
 import getRange from 'shared/parsing/getRangeForDygraph'
 
+
 const LINE_COLORS = [
   '#00C9FF',
   '#9394FF',
@@ -233,6 +234,9 @@ export default class Dygraph extends Component {
       ...options,
     })
 
+    const {w} = this.dygraph.getArea()
+    this.props.setResolution(w)
+
     // Simple opt-out for now, if a graph should not be synced
     if (this.props.synchronizer) {
       this.sync()
@@ -358,4 +362,5 @@ Dygraph.propTypes = {
     lower: string.isRequired,
   }),
   synchronizer: func,
+  setResolution: func,
 }

ui/src/shared/components/LineGraph.js

@@ -37,6 +37,7 @@ export default React.createClass({
     }),
     isInDataExplorer: bool,
     synchronizer: func,
+    setResolution: func,
   },
 
   getDefaultProps() {
@@ -149,6 +150,7 @@ export default React.createClass({
           ruleValues={ruleValues}
           synchronizer={synchronizer}
           timeRange={timeRange}
+          setResolution={this.props.setResolution}
         />
         {showSingleStat
           ? <div className="graph-single-stat single-stat">

ui/src/utils/queryUrlGenerator.js

@@ -1,6 +1,6 @@
 import AJAX from 'utils/ajax'
 
-export const proxy = async ({source, query, db, rp, tempVars}) => {
+export const proxy = async ({source, query, db, rp, tempVars, resolution}) => {
   try {
     return await AJAX({
       method: 'POST',
@@ -8,6 +8,7 @@ export const proxy = async ({source, query, db, rp, tempVars}) => {
       data: {
         tempVars,
         query,
+        resolution,
         db,
         rp,
       },