Move query options into QueryOptions component

ui/src/shared/components/FieldList.js

@@ -1,9 +1,8 @@
 import React, {PropTypes, Component} from 'react'
 import _ from 'lodash'
 
+import QueryOptions from 'shared/components/QueryOptions'
 import FieldListItem from 'src/data_explorer/components/FieldListItem'
-import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown'
-import FillQuery from 'shared/components/FillQuery'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 import {showFieldKeys} from 'shared/apis/metaQuery'
@@ -134,7 +133,6 @@ class FieldList extends Component {
     } = this.props
 
     const hasAggregates = numFunctions(fields) > 0
-    const hasGroupByTime = groupBy.time
     const noDBorMeas = !database || !measurement
 
     return (
@@ -142,16 +140,13 @@ class FieldList extends Component {
         <div className="query-builder--heading">
           <span>Fields</span>
           {hasAggregates
-            ? <div className="query-builder--groupby-fill-container">
+            ? <QueryOptions
-                <GroupByTimeDropdown
+                fill={fill}
-                  isOpen={!hasGroupByTime}
+                groupBy={groupBy}
-                  selected={groupBy.time}
+                onFill={this.handleFill}
-                  onChooseGroupByTime={this.handleGroupByTime}
+                isKapacitorRule={isKapacitorRule}
-                />
+                onGroupByTime={this.handleGroupByTime}
-                {isKapacitorRule
+              />
-                  ? null
-                  : <FillQuery value={fill} onChooseFill={this.handleFill} />}
-              </div>
             : null}
         </div>
         {noDBorMeas

ui/src/shared/components/QueryOptions.js

@@ -0,0 +1,32 @@
+import React, {PropTypes} from 'react'
+import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown'
+import FillQuery from 'shared/components/FillQuery'
+
+const QueryOptions = ({
+  fill,
+  onFill,
+  groupBy,
+  onGroupByTime,
+  isKapacitorRule,
+}) =>
+  <div className="query-builder--groupby-fill-container">
+    <GroupByTimeDropdown
+      selected={groupBy.time}
+      onChooseGroupByTime={onGroupByTime}
+    />
+    {isKapacitorRule ? null : <FillQuery value={fill} onChooseFill={onFill} />}
+  </div>
+
+const {bool, func, shape, string} = PropTypes
+
+QueryOptions.propTypes = {
+  fill: string,
+  onFill: func.isRequired,
+  groupBy: shape({
+    time: string,
+  }).isRequired,
+  onGroupByTime: func.isRequired,
+  isKapacitorRule: bool.isRequired,
+}
+
+export default QueryOptions