ux(query-editors): more progress on elastic query editor

public/app/features/panel/partials/query_editor_row.html

@@ -12,7 +12,7 @@
 
 	<div class="gf-form-query-content" ng-if="ctrl.collapsed">
 		<div class="gf-form">
-			<label class="gf-form-label gf-form-filler pointer" ng-click="ctrl.toggleCollapse()">
+			<label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
 				{{ctrl.collapsedText}}
 			</label>
 		</div>

public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html

@@ -17,7 +17,9 @@
 		</label>
 	</div>
 
-	<div class="gf-form-filler"></div>
+	<div class="gf-form gf-form--grow">
+		<label class="gf-form-label gf-form-label--grow"></label>
+	</div>
 
 	<div class="gf-form">
 		<label class="gf-form-label" ng-if="isFirst">

public/app/plugins/datasource/elasticsearch/partials/metric_agg.html

@@ -26,7 +26,9 @@
 		</label>
 	</div>
 
-	<div class="gf-form-filler"></div>
+	<div class="gf-form gf-form--grow">
+		<label class="gf-form-label gf-form-label--grow"></label>
+	</div>
 
 	<div class="gf-form">
 		<label class="gf-form-label" ng-if="isFirst">

public/app/plugins/datasource/elasticsearch/partials/query.editor.html

-<query-editor-row query-ctrl="ctrl">
+<query-editor-row query-ctrl="ctrl" can-collapse="true">
 
 	<div class="gf-form-inline">
-		<div class="gf-form gf-form-flex">
+		<div class="gf-form gf-form--grow">
 			<label class="gf-form-label query-keyword width-7">Query</label>
 			<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck='false' placeholder="Lucene query" ng-blur="ctrl.refresh()">
 		</div>

public/app/plugins/datasource/elasticsearch/query_ctrl.ts

@@ -38,6 +38,11 @@ export class ElasticQueryCtrl extends QueryCtrl {
     this.$rootScope.appEvent('elastic-query-updated');
   }
 
+  getCollapsedText() {
+    var text = 'Count(), Avg(@value), Group by(@timestamp, 1min) Query';
+    return text;
+  }
+
   handleQueryError(err) {
     this.error = err.message || 'Failed to issue metric query';
     return [];

public/app/plugins/datasource/graphite/partials/query.editor.html

@@ -18,7 +18,9 @@
         <span graphite-add-func></span>
       </div>
 
-      <div class="gf-form-filler"></div>
+      <div class="gf-form gf-form--grow">
+				<div class="gf-form-label gf-form-label--grow"></div>
+			</div>
     </div>
   </div>
 

public/app/plugins/datasource/influxdb/partials/query.editor.html

@@ -16,13 +16,16 @@
 
 			<div class="gf-form">
 				<label class="gf-form-label query-keyword">WHERE</label>
+			</div>
+
+			<div class="gf-form" ng-repeat="segment in ctrl.tagSegments">
+				<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
+			</div>
 
-				<div ng-repeat="segment in ctrl.tagSegments">
-					<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
-				</div>
+			<div class="gf-form gf-form--grow">
+				<div class="gf-form-label gf-form-label--grow"></div>
 			</div>
 
-			<div class="gf-form-filler"></div>
 		</div>
 
 		<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
@@ -49,7 +52,9 @@
 				</label>
 			</div>
 
-			<div class="gf-form-filler"></div>
+			<div class="gf-form gf-form--grow">
+				<div class="gf-form-label gf-form-label--grow"></div>
+			</div>
 		</div>
 
 		<div class="gf-form-inline">
@@ -66,9 +71,12 @@
 				</influx-query-part-editor>
 
 				<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
+
 			</div>
 
-			<div class="gf-form-filler"></div>
+			<div class="gf-form gf-form--grow">
+				<div class="gf-form-label gf-form-label--grow"></div>
+			</div>
 		</div>
 	</div>
 
@@ -83,7 +91,9 @@
 				<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
 			</div>
 		</div>
-		<div class="gf-form-filler"></div>
+		<div class="gf-form gf-form--grow">
+			<div class="gf-form-label gf-form-label--grow"></div>
+		</div>
 	</div>
 
 </query-editor-row>

public/sass/components/_drop.scss

-$popover-arrow-size: 1rem;
+$popover-arrow-size: 0.7rem;
 $color: inherit;
 $backgroundColor: $btn-secondary-bg;
 $color: $text-color;

public/sass/components/_gf-form.scss

@@ -11,6 +11,10 @@ $gf-form-margin: 0.25rem;
   &--offset-1 {
     margin-left: $spacer;
   }
+
+  &--grow {
+    flex-grow: 1;
+  }
 }
 
 .gf-form-group {
@@ -22,10 +26,6 @@ $gf-form-margin: 0.25rem;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: flex-start;
-
-  .gf-form-flex {
-    flex-grow: 1;
-  }
 }
 
 .gf-form-button-row {
@@ -48,16 +48,12 @@ $gf-form-margin: 0.25rem;
 
   border: $input-btn-border-width solid transparent;
   @include border-radius($label-border-radius-sm);
-}
 
-.gf-form-filler {
-  margin-right: $gf-form-margin;
-  margin-bottom: $gf-form-margin;
-  flex-grow: 1;
-  background-color: $input-label-bg;
 
-  border: $input-btn-border-width solid transparent;
-  @include border-radius($label-border-radius-sm);
+  &--grow {
+    flex-grow: 1;
+    min-height: 2.7rem;
+  }
 }
 
 .gf-form-checkbox {

public/sass/mixins/_drop_element.scss

@@ -10,7 +10,7 @@
       font-family: inherit;
       background: $theme-bg;
       color: $theme-color;
-      padding: $spacer;
+      padding: 0.65rem;
       font-size: $font-size-sm;
       max-width: 20rem;