Refactor group by time dropdown

ui/src/data_explorer/components/FieldList.js

@@ -1,7 +1,8 @@
 import React, {PropTypes} from 'react'
 
 import FieldListItem from 'src/data_explorer/components/FieldListItem'
-import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown'
+import GroupByTimeDropdown
+  from 'src/data_explorer/components/GroupByTimeDropdown'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 import {showFieldKeys} from 'shared/apis/metaQuery'
@@ -77,7 +78,7 @@ const FieldList = React.createClass({
   },
 
   render() {
-    const {query} = this.props
+    const {query, isKapacitorRule} = this.props
     const hasAggregates = query.fields.some(f => f.funcs && f.funcs.length)
     const hasGroupByTime = query.groupBy.time
 
@@ -90,6 +91,7 @@ const FieldList = React.createClass({
                 isOpen={!hasGroupByTime}
                 selected={query.groupBy.time}
                 onChooseGroupByTime={this.handleGroupByTime}
+                isInRuleBuilder={isKapacitorRule}
               />
             : null}
         </div>

ui/src/data_explorer/components/FieldListItem.js

@@ -56,7 +56,9 @@ const FieldListItem = React.createClass({
     if (isKapacitorRule) {
       return (
         <div
-          className={classnames('query-builder--list-item', {active: isSelected})}
+          className={classnames('query-builder--list-item', {
+            active: isSelected,
+          })}
           key={fieldFunc}
           onClick={_.wrap(fieldFunc, this.handleToggleField)}
         >
@@ -66,14 +68,15 @@ const FieldListItem = React.createClass({
           </span>
           {isSelected
             ? <Dropdown
+                className="dropdown-110"
+                menuClass="dropdown-malachite"
                 items={items}
                 onChoose={this.handleApplyFunctions}
                 selected={
                   fieldFunc.funcs.length ? fieldFunc.funcs[0] : 'Function'
                 }
               />
-            : null
-          }
+            : null}
         </div>
       )
     }
@@ -81,7 +84,9 @@ const FieldListItem = React.createClass({
     return (
       <div key={fieldFunc}>
         <div
-          className={classnames('query-builder--list-item', {active: isSelected})}
+          className={classnames('query-builder--list-item', {
+            active: isSelected,
+          })}
           onClick={_.wrap(fieldFunc, this.handleToggleField)}
         >
           <span>
@@ -89,13 +94,17 @@ const FieldListItem = React.createClass({
             {fieldText}
           </span>
           {isSelected
-            ? <div className={classnames('btn btn-xs btn-info', {'function-selector--toggled': isOpen})} onClick={this.toggleFunctionsMenu}>
+            ? <div
+                className={classnames('btn btn-xs btn-info', {
+                  'function-selector--toggled': isOpen,
+                })}
+                onClick={this.toggleFunctionsMenu}
+              >
                 Functions
               </div>
-            : null
-          }
+            : null}
         </div>
-        {(isSelected && isOpen)
+        {isSelected && isOpen
           ? <FunctionSelector
               onApply={this.handleApplyFunctions}
               selectedItems={fieldFunc.funcs || []}

ui/src/data_explorer/components/GroupByTimeDropdown.js

@@ -1,49 +1,33 @@
 import React, {PropTypes} from 'react'
-import classnames from 'classnames'
 
 import groupByTimeOptions from 'hson!../data/groupByTimes.hson'
 
-const {bool, string, func} = PropTypes
+import Dropdown from 'shared/components/Dropdown'
+
+const {bool, func, string} = PropTypes
 
 const GroupByTimeDropdown = React.createClass({
   propTypes: {
-    isOpen: bool,
     selected: string,
     onChooseGroupByTime: func.isRequired,
+    isInRuleBuilder: bool,
   },
 
   render() {
-    const {isOpen, selected, onChooseGroupByTime} = this.props
+    const {selected, onChooseGroupByTime, isInRuleBuilder} = this.props
 
     return (
-      <div
-        className={classnames('dropdown group-by-time-dropdown', {
-          open: isOpen,
-        })}
-      >
-        <div
-          className="btn btn-sm btn-info dropdown-toggle"
-          data-toggle="dropdown"
-        >
-          <span>Group by {selected || 'time'}</span>
-          <span className="caret" />
-        </div>
-        <ul className="dropdown-menu">
-          {groupByTimeOptions.map(groupBy => {
-            return (
-              <li
-                className="dropdown-item"
-                key={groupBy.menuOption}
-                onClick={() => onChooseGroupByTime(groupBy)}
-              >
-                <a href="#">
-                  {groupBy.menuOption}
-                </a>
-              </li>
-            )
-          })}
-        </ul>
-      </div>
+      <Dropdown
+        className="dropdown-130"
+        menuClass={isInRuleBuilder ? 'dropdown-malachite' : null}
+        buttonColor={isInRuleBuilder ? 'btn-default' : 'btn-info'}
+        items={groupByTimeOptions.map(groupBy => ({
+          ...groupBy,
+          text: groupBy.menuOption,
+        }))}
+        onChoose={onChooseGroupByTime}
+        selected={selected ? `Group by ${selected}` : 'Group by Time'}
+      />
     )
   },
 })

ui/src/style/components/dropdown.scss

@@ -220,40 +220,3 @@ $dropdown-menu-max-height: 270px;
   }
 }
 
-/*
-    Group By Time Dropdown
-    ----------------------------------------------
-*/
-.group-by-time-dropdown {
-  .dropdown-toggle {
-    width: 120px;
-    height: 28px !important;
-    line-height: 28px !important;
-    font-size: 12px;
-    text-transform: none;
-    border-radius: $radius;
-    display: block;
-  }
-  .dropdown-menu > li.dropdown-item > a {display: block;}
-}
-.data-explorer .group-by-time-dropdown .dropdown-toggle {
-  font-weight: 600;
-  background-color: $g2-kevlar;
-  line-height: 24px !important;
-  border: 2px solid $g6-smoke;
-  transition:
-    border-color 0.25s ease,
-    color 0.25s ease,
-    box-shadow 0.25s ease;
-  color: $g10-wolf;
-
-  &:hover {
-    border-color: $g7-graphite;
-    color: $g18-cloud;
-  }
-}
-.data-explorer .group-by-time-dropdown.open .dropdown-toggle {
-  background-color: $g2-kevlar !important;
-  border-color: $c-pool !important;
-  box-shadow: 0 0 6px 0px $c-pool !important
-}