Pull component specific attributes out of group by selection

ui/src/dashboards/components/CellEditorOverlay.js

@@ -21,6 +21,7 @@ import {
 } from 'src/dashboards/constants'
 import {OVERLAY_TECHNOLOGY} from 'shared/constants/classNames'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
+import {AUTO_GROUP_BY} from 'shared/constants'
 
 class CellEditorOverlay extends Component {
   constructor(props) {
@@ -368,6 +369,7 @@ class CellEditorOverlay extends Component {
                   activeQueryIndex={activeQueryIndex}
                   activeQuery={this.getActiveQuery()}
                   setActiveQueryIndex={this.handleSetActiveQueryIndex}
+                  initialGroupByTime={AUTO_GROUP_BY}
                 />}
           </CEOBottom>
         </ResizeContainer>

ui/src/dashboards/components/QueryMaker.js

@@ -22,6 +22,7 @@ const QueryMaker = ({
   onAddQuery,
   activeQuery,
   onDeleteQuery,
+  initialGroupByTime,
   activeQueryIndex,
   setActiveQueryIndex,
 }) =>
@@ -47,10 +48,11 @@ const QueryMaker = ({
             templates={templates}
           />
           <SchemaExplorer
-            query={activeQuery}
-            actions={actions}
-            onAddQuery={onAddQuery}
             source={source}
+            actions={actions}
+            query={activeQuery}
+            onAddQuery={onAddQuery}
+            initialGroupByTime={initialGroupByTime}
           />
         </div>
       : <EmptyQuery onAddQuery={onAddQuery} />}
@@ -92,6 +94,7 @@ QueryMaker.propTypes = {
       tempVar: string.isRequired,
     })
   ).isRequired,
+  initialGroupByTime: string.isRequired,
 }
 
 export default QueryMaker

ui/src/data_explorer/components/QueryMaker.js

@@ -7,7 +7,13 @@ import {buildRawText} from 'utils/influxql'
 const rawTextBinder = (links, id, action) => text =>
   action(links.queries, id, text)
 
-const QueryMaker = ({source, actions, timeRange, activeQuery}) =>
+const QueryMaker = ({
+  source,
+  actions,
+  timeRange,
+  activeQuery,
+  initialGroupByTime,
+}) =>
   <div className="query-maker query-maker--panel">
     <div className="query-maker--tab-contents">
       <QueryEditor
@@ -19,7 +25,11 @@ const QueryMaker = ({source, actions, timeRange, activeQuery}) =>
           actions.editRawTextAsync
         )}
       />
-      <SchemaExplorer query={activeQuery} actions={actions} />
+      <SchemaExplorer
+        initialGroupByTime={initialGroupByTime}
+        query={activeQuery}
+        actions={actions}
+      />
     </div>
   </div>
 
@@ -48,6 +58,7 @@ QueryMaker.propTypes = {
     editRawTextAsync: func.isRequired,
   }).isRequired,
   activeQuery: shape({}),
+  initialGroupByTime: string.isRequired,
 }
 
 export default QueryMaker

ui/src/data_explorer/containers/DataExplorer.js

@@ -13,7 +13,7 @@ import Header from '../containers/Header'
 import ResizeContainer from 'shared/components/ResizeContainer'
 import OverlayTechnologies from 'shared/components/OverlayTechnologies'
 
-import {VIS_VIEWS} from 'shared/constants'
+import {VIS_VIEWS, INITIAL_GROUP_BY_TIME} from 'shared/constants'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from '../constants'
 import {errorThrown} from 'shared/actions/errors'
 import {setAutoRefresh} from 'shared/actions/app'
@@ -114,6 +114,7 @@ class DataExplorer extends Component {
             actions={queryConfigActions}
             timeRange={timeRange}
             activeQuery={this.getActiveQuery()}
+            initialGroupByTime={INITIAL_GROUP_BY_TIME}
           />
           <Visualization
             isInDataExplorer={true}

ui/src/shared/components/FieldList.js

@@ -98,12 +98,17 @@ class FieldList extends Component {
   }
 
   handleToggleField = field => {
-    const {addInitialField, onToggleField, query} = this.props
+    const {
+      addInitialField,
+      onToggleField,
+      query,
+      initialGroupByTime: time,
+    } = this.props
     const {fields, groupBy} = query
-    const defaultGroupBy = {...groupBy, time: '10s'}
+    const initialGroupBy = {...groupBy, time}
 
     if (_.size(fields)) {
-      addInitialField(field, defaultGroupBy)
+      addInitialField(field, initialGroupBy)
     }
 
     onToggleField(field)
@@ -210,6 +215,7 @@ FieldList.propTypes = {
   }),
   removeFuncs: func.isRequired,
   addInitialField: func.isRequired,
+  initialGroupByTime: string.isRequired,
 }
 
 export default FieldList

ui/src/shared/components/SchemaExplorer.js

@@ -11,6 +11,7 @@ const SchemaExplorer = ({
   query,
   query: {id},
   source,
+  initialGroupByTime,
   actions: {
     fill,
     chooseTag,
@@ -44,6 +45,7 @@ const SchemaExplorer = ({
       source={source}
       query={query}
       querySource={source}
+      initialGroupByTime={initialGroupByTime}
       onToggleField={actionBinder(id, toggleField)}
       onFill={actionBinder(id, fill)}
       onGroupByTime={actionBinder(id, groupByTime)}
@@ -72,6 +74,7 @@ SchemaExplorer.propTypes = {
     editRawTextAsync: func.isRequired,
   }).isRequired,
   source: shape({}),
+  initialGroupByTime: string.isRequired,
 }
 
 export default SchemaExplorer

ui/src/utils/influxql.js

@@ -1,9 +1,6 @@
 import _ from 'lodash'
 
-import {
-  TEMP_VAR_INTERVAL,
-  DEFAULT_DASHBOARD_GROUP_BY_INTERVAL,
-} from 'shared/constants'
+import {TEMP_VAR_INTERVAL, AUTO_GROUP_BY} from 'shared/constants'
 import {NULL_STRING} from 'shared/constants/queryFillOptions'
 import {TYPE_QUERY_CONFIG, TYPE_IFQL} from 'src/dashboards/constants'
 import timeRanges from 'hson!shared/data/timeRanges.hson'
@@ -134,7 +131,7 @@ function _buildGroupByTime(groupBy) {
     return ''
   }
 
-  return ` GROUP BY ${groupBy.time === DEFAULT_DASHBOARD_GROUP_BY_INTERVAL
+  return ` GROUP BY ${groupBy.time === AUTO_GROUP_BY
     ? TEMP_VAR_INTERVAL
     : `time(${groupBy.time})`}`
 }