WIP

ui/src/data_explorer/components/GroupByTimeDropdown.js

@@ -33,7 +33,7 @@ const GroupByTimeDropdown = React.createClass({
 
     return (
       <Dropdown
-        className="dropdown-130"
+        className="dropdown-140 group-by-time-dropdown"
         menuClass={isInRuleBuilder ? 'dropdown-malachite' : null}
         buttonColor={isInRuleBuilder ? 'btn-default' : 'btn-info'}
         items={validOptions.map(groupBy => ({

ui/src/shared/components/FieldList.js

@@ -94,13 +94,7 @@ const FieldList = React.createClass({
         <div className="query-builder--heading">
           <span>Fields</span>
           {hasAggregates
-            ? <div>
-                {isKapacitorRule
-                  ? null
-                  : <FillQuery
-                      value={query.fill}
-                      onSelection={this.handleFill}
-                    />}
+            ? <div style={{display: 'flex', alignItems: 'center'}}>
                 <GroupByTimeDropdown
                   isOpen={!hasGroupByTime}
                   selected={query.groupBy.time}
@@ -108,6 +102,12 @@ const FieldList = React.createClass({
                   isInRuleBuilder={isKapacitorRule}
                   isInDataExplorer={isInDataExplorer}
                 />
+                {isKapacitorRule
+                  ? null
+                  : <FillQuery
+                      value={query.fill}
+                      onSelection={this.handleFill}
+                    />}
               </div>
             : null}
         </div>

ui/src/shared/components/FillQuery.js

@@ -23,7 +23,7 @@ class FillQuery extends Component {
   }
 
   static defaultProps = {
-    size: 'xs',
+    size: 'sm',
     theme: 'blue',
     value: NULL,
   }
@@ -79,13 +79,12 @@ class FillQuery extends Component {
 
     return (
       <div className={`fill-query fill-query--${size}`}>
-        <label>Fill</label>
         <Dropdown
           selected={selected.text}
           items={queryFills}
           className="fill-query--dropdown"
           buttonSize={`btn-${size}`}
-          buttonColor="btn-default"
+          buttonColor="btn-info"
           menuClass={`dropdown-${this.getColor(theme)}`}
           onChoose={this.handleDropdown}
         />

ui/src/style/components/fill-query.scss

@@ -6,14 +6,9 @@
 
 .fill-query {
   display: flex;
-  align-items: stretch;
+  align-items: center;
   flex-wrap: nowrap;
-}
-.fill-query > label {
-  white-space: nowrap;
-  margin: 0;
-  @include no-user-select();
-  color: $g11-sidewalk;
+  margin-left: 8px; // Assumes it is to the right of GROUP BY TIME
 }
 .fill-query--dropdown .dropdown-toggle {
   font-family: $code-font;
@@ -27,27 +22,15 @@
 }
 // Size modifiers
 .fill-query--xs {
-  .fill-query--dropdown .dropdown-toggle { width: 90px; }
-  .fill-query--input {width: 70px;}
-  & > label {
-    height: 22px;
-    line-height: 22px;
-    font-size: 12px;
-    padding: 0 8px;
+  .fill-query--dropdown .dropdown-toggle {
+    width: 90px;
+  }
+  .fill-query--input {
+    width: 70px;
   }
 }
 .fill-query--sm {
-  .fill-query--dropdown .dropdown-toggle { width: 110px; }
-  .fill-query--input {width: 90px;}
-  & > label {
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    padding: 0 11px;
+  .fill-query--input {
+    width: 90px;
   }
 }
-
-// Prevent component from being flush to edge when used in Query Editor
-.query-editor--status .fill-query {
-  margin-right: 4px;
-}

ui/src/style/unsorted.scss

@@ -58,7 +58,8 @@
   color: $g12-forge;
   padding: 20px 0;
 
-  h4, h5 {
+  h4,
+  h5 {
     font-weight: 400;
   }
 
@@ -73,7 +74,7 @@
 */
 .loading-dots {
   position: absolute;
-  transform: translate(0,0);
+  transform: translate(0, 0);
   transform: translateX(50%);
   width: 16px;
   height: 18px;
@@ -85,12 +86,24 @@
     border-radius: 50%;
     position: absolute;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
   }
 
-  div:nth-child(1) {left: 0; animation: refreshingSpinnerA 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}
-  div:nth-child(2) {left: 50%; animation: refreshingSpinnerB 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}
-  div:nth-child(3) {left: 100%; animation: refreshingSpinnerC 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}
+  div:nth-child(1) {
+    left: 0;
+    animation: refreshingSpinnerA 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
+      infinite;
+  }
+  div:nth-child(2) {
+    left: 50%;
+    animation: refreshingSpinnerB 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
+      infinite;
+  }
+  div:nth-child(3) {
+    left: 100%;
+    animation: refreshingSpinnerC 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
+      infinite;
+  }
 }
 
 /*
@@ -111,9 +124,7 @@
     color: $g11-sidewalk;
     background-color: $g17-whisper;
     box-shadow: none;
-    transition:
-      color 0.25s ease,
-      background-color 0.25s ease;
+    transition: color 0.25s ease, background-color 0.25s ease;
 
     &:hover {
       cursor: pointer;
@@ -190,7 +201,9 @@ br {
     color: $g20-white;
   }
 
-  p {font-size: 13px;}
+  p {
+    font-size: 13px;
+  }
 }
 .alerts-widget {
   height: 100%;
@@ -198,14 +211,15 @@ br {
   flex-direction: column;
   align-items: stretch;
 
-  > .btn {margin: 20px 0;}
+  > .btn {
+    margin: 20px 0;
+  }
 
   .alert-history-table {
     flex: 1 0 0;
   }
 }
 
-
 /*
   Version Number
   -----------------------------------------------------------------------------
@@ -218,8 +232,6 @@ br {
   font-size: 13px;
 }
 
-
-
 /*
   View TICKscript Overlay
   -----------------------------------------------------------------------------
@@ -244,3 +256,14 @@ $tick-script-overlay-margin: 30px;
   padding: 20px;
   border: 2px solid $g4-onyx;
 }
+
+/*
+  GROUP BY TIME Dropdown
+
+*/
+.group-by-time-dropdown {
+  .dropdown-selected,
+  .dropdown-item {
+    font-family: $code-font;
+  }
+}