ux(query-editors): more progress and fixes

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

@@ -23,7 +23,7 @@
 
 	<div class="gf-form">
 		<label class="gf-form-label">
-			<a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()">
+			<a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()" disabled>
 				<i class="fa fa-fw fa-chevron-down" ng-hide="ctrl.collapsed"></i>
 				<i class="fa fa-fw fa-chevron-left" ng-show="ctrl.collapsed"></i>
 			</a>

public/app/plugins/datasource/elasticsearch/bucket_agg.js

@@ -124,6 +124,7 @@ function (angular, _, queryDef) {
         }
       }
 
+      console.log(settingsLinkText);
       $scope.settingsLinkText = settingsLinkText;
       $scope.agg.settings = settings;
       return true;

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

@@ -5,10 +5,12 @@
 			<span ng-hide="isFirst">Then by</span>
 		</label>
 
-		<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="tight-form-item-large"></metric-segment-model>
-		<metric-segment-model ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="tight-form-item-xxlarge"></metric-segment>
+		<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></metric-segment-model>
+		<metric-segment-model ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment>
+	</div>
 
-		<label class="gf-form-label" ng-if="settingsLinkText">
+	<div class="gf-form gf-form--grow">
+		<label class="gf-form-label gf-form-label--grow">
 			<a ng-click="toggleOptions()">
 				<i class="fa fa-caret-down" ng-show="showOptions"></i>
 				<i class="fa fa-caret-right" ng-hide="showOptions"></i>
@@ -17,10 +19,6 @@
 		</label>
 	</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">
 			<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
@@ -31,99 +29,61 @@
 	</div>
 </div>
 
-<div class="tight-form" ng-if="showOptions">
-	<div class="tight-form-inner-box" ng-if="agg.type === 'date_histogram'">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 170px">
-					Interval
-				</li>
-				<li>
-					<metric-segment-model property="agg.settings.interval" get-options="getIntervalOptions()" on-change="onChangeInternal()" css-class="last" custom="true"></metric-segment-model>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+<div class="gf-form-group" ng-if="showOptions">
+	<div ng-if="agg.type === 'date_histogram'">
+		<div class="gf-form offset-width-7">
+			<label class="gf-form-label width-10">Interval</label>
+			<metric-segment-model property="agg.settings.interval" get-options="getIntervalOptions()" on-change="onChangeInternal()" css-class="width-12" custom="true"></metric-segment-model>
 		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 170px">
-					Min Doc Count
-				</li>
-				<li>
-					<input type="number" class="tight-form-input" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+
+		<div class="gf-form offset-width-7">
+			<label class="gf-form-label width-10">Min Doc Count</label>
+			<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
 		</div>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 170px">
-					Trim edges points
-				</li>
-				<li>
-					<input class="tight-form-input" type="number" ng-model="agg.settings.trimEdges" ng-change="onChangeInternal()">
-				</li>
-				<li class="tight-form-item last">
-					<i class="fa fa-question-circle" bs-tooltip="'Trim the edges on the timeseries x datapoints'" data-placement="right"></i>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+
+		<div class="gf-form offset-width-7">
+			<label class="gf-form-label width-10">
+				Trim edges points
+				<info-popver mode="right-normal">
+					Trim the edges on the timeseries x datapoints
+				</info-popover>
+			</label>
+			<input class="gf-form-input max-width-12" type="number" ng-model="agg.settings.trimEdges" ng-change="onChangeInternal()">
 		</div>
 	</div>
-	<div class="tight-form-inner-box" ng-if="agg.type === 'terms'">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 60px">
-					Order
-				</li>
-				<li>
-					<metric-segment-model property="agg.settings.order" options="orderOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+
+	<div ng-if="agg.type === 'terms'">
+		<div class="gf-form offset-width-7">
+			<label class="gf-form-label">Order</label>
+			<metric-segment-model property="agg.settings.order" options="orderOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
 		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 60px">
-					Size
-				</li>
-				<li>
-					<metric-segment-model property="agg.settings.size" options="sizeOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+
+		<div class="gf-form offset-width-7">
+			<label class="gf-form-label width-10">Size</label>
+			<metric-segment-model property="agg.settings.size" options="sizeOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
 		</div>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 60px">
-					Order By
-				</li>
-				<li>
-					<metric-segment-model property="agg.settings.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+
+		<div class="gf-form offset-width-7">
+			<label class="gf-form-label width-10">Order By</label>
+			<metric-segment-model property="agg.settings.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
 		</div>
 	</div>
-	<div class="tight-form-inner-box" ng-if="agg.type === 'filters'">
-		<div class="tight-form" ng-repeat="filter in agg.settings.filters" ng-class="{last: $last}">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 100px">
-					Query {{$index + 1}}
-				</li>
-				<li>
-					<input type="text" class="tight-form-input input-large" ng-model="filter.query" spellcheck='false' placeholder="Lucene query" ng-blur="onChangeInternal()">
-				</li>
-				<li class="tight-form-item last" ng-if="$first">
+
+	<div ng-if="agg.type === 'filters'">
+		<div class="gf-form-inline" ng-repeat="filter in agg.settings.filters" ng-class="{last: $last}">
+			<div class="gf-form">
+				<label class="gf-form-item width-10">Query {{$index + 1}}</label>
+				<input type="text" class="gf-form-input max-width-12" ng-model="filter.query" spellcheck='false' placeholder="Lucene query" ng-blur="onChangeInternal()">
+			</div>
+			<div class="gf-form">
+				<label class="gf-form-label" ng-if="$first">
 					<a class="pointer" ng-click="addFiltersQuery()"><i class="fa fa-plus"></i></a>
-				</li>
-				<li class="tight-form-item last" ng-if="!$first">
+				</label>
+				<label class="gf-form-label" ng-if="!$first">
 					<a class="pointer" ng-click="removeFiltersQuery(filter)"><i class="fa fa-minus"></i></a>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+				</label>
+			</div>
 		</div>
-
 	</div>
 
 </div>

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

@@ -16,9 +16,9 @@
 		<metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
 	</div>
 
-	<div class="gf-form" ng-if="settingsLinkText">
-		<label class="gf-form-label">
-			<a ng-click="toggleOptions()">
+	<div class="gf-form gf-form--grow">
+		<label class="gf-form-label gf-form-label--grow">
+			<a ng-click="toggleOptions()" ng-if="settingsLinkText">
 				<i class="fa fa-caret-down" ng-show="showOptions"></i>
 				<i class="fa fa-caret-right" ng-hide="showOptions"></i>
 					{{settingsLinkText}}
@@ -26,10 +26,6 @@
 		</label>
 	</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">
 			<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>

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

@@ -57,97 +57,6 @@
 			</div>
 		</div>
 
-<<<<<<< HEAD
-<div ng-hide="ctrl.target.rawQuery">
-	<div class="gf-form-inline query-editor-secondary-row" ng-repeat="selectParts in ctrl.queryModel.selectModels">
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">SELECT</label>
-
-			<influx-query-part-editor
-					ng-repeat="part in selectParts"
-					class="gf-form-label tight-form-func"
-					part="part"
-					remove-action="ctrl.removeSelectPart(selectParts, part)"
-					part-updated="ctrl.selectPartUpdated(selectParts, part)"
-					get-options="ctrl.getPartOptions(part)">
-			</influx-query-part-editor>
-
-			<label class="dropdown"
-				dropdown-typeahead="ctrl.selectMenu"
-				dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
-			</label>
-    </div>
-  </div>
-  <div class="gf-form-inline query-editor-secondary-row">
-    <div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">GROUP BY</label>
-      <influx-query-part-editor
-          class="gf-form-label tight-form-func"
-          ng-repeat="part in ctrl.queryModel.groupByParts"
-          part="part"
-          remove-action="ctrl.removeGroupByPart(part, $index)"
-          part-updated="ctrl.refresh();"
-          get-options="ctrl.getPartOptions(part)">
-      </influx-query-part-editor>
-      <metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
-		</div>
-	</div>
-</div>
-||||||| merged common ancestors
-<div ng-hide="ctrl.target.rawQuery">
-	<div class="gf-form-inline query-editor-secondary-row" ng-repeat="selectParts in ctrl.queryModel.selectModels">
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-6">
-				<span ng-show="$index === 0">SELECT</span>
-			</label>
-
-			<influx-query-part-editor
-					ng-repeat="part in selectParts"
-					class="gf-form-label tight-form-func"
-					part="part"
-					remove-action="ctrl.removeSelectPart(selectParts, part)"
-					part-updated="ctrl.selectPartUpdated(selectParts, part)"
-					get-options="ctrl.getPartOptions(part)">
-			</influx-query-part-editor>
-
-			<label class="dropdown"
-				dropdown-typeahead="ctrl.selectMenu"
-				dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
-			</label>
-	</div>
-</div>
-
-<div ng-hide="ctrl.target.rawQuery" ng-if="false">
-	<div class="tight-form" ng-repeat="selectParts in ctrl.queryModel.selectModels">
-		<ul class="tight-form-list">
-			<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
-				<span ng-show="$index === 0">SELECT</span>
-			</li>
-			<li ng-repeat="part in selectParts">
-				<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="ctrl.removeSelectPart(selectParts, part)" part-updated="ctrl.selectPartUpdated(selectParts, part)" get-options="ctrl.getPartOptions(part)"></influx-query-part-editor>
-			</li>
-			<li class="dropdown" dropdown-typeahead="ctrl.selectMenu" dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
-			</li>
-		</ul>
-		<div class="clearfix"></div>
-	</div>
-
-	<div class="tight-form">
-		<ul class="tight-form-list">
-			<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
-				<span>GROUP BY</span>
-			</li>
-			<li ng-repeat="part in ctrl.queryModel.groupByParts">
-				<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)"></influx-query-part-editor>
-			</li>
-			<li>
-				<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
-	</div>
-</div>
-=======
 		<div class="gf-form-inline">
 			<div class="gf-form">
 				<label class="gf-form-label query-keyword width-7">
@@ -160,28 +69,13 @@
 								class="gf-form-label query-part"
 								remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
 				</influx-query-part-editor>
-
-				<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
->>>>>>> 4515e6678346e711c34d379bba45504eae6a5dc8
-
-<<<<<<< HEAD
-<div class="gf-form-inline query-editor-secondary-row">
-	<div class="gf-form max-width-30">
-		<label class="gf-form-label query-keyword width-7">ALIAS BY</label>
-		<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
-||||||| merged common ancestors
-<div class="gf-form-inline query-editor-secondary-row">
-	<div class="gf-form max-width-30">
-		<label class="gf-form-label query-keyword">ALIAS BY</label>
-		<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
-=======
 			</div>
 
 			<div class="gf-form gf-form--grow">
 				<div class="gf-form-label gf-form-label--grow"></div>
 			</div>
 		</div>
->>>>>>> 4515e6678346e711c34d379bba45504eae6a5dc8
+
 	</div>
 
 	<div class="gf-form-inline">

public/sass/components/_gf-form.scss

@@ -17,6 +17,16 @@ $gf-form-margin: 0.25rem;
   }
 }
 
+.gf-form-disabled {
+  color: $text-color-weak;
+
+  .query-keyword,
+  a,
+  .gf-form-input {
+    color: $text-color-weak;
+  }
+}
+
 .gf-form-group {
   margin-bottom: $spacer * 2.5;
 }
@@ -52,7 +62,7 @@ $gf-form-margin: 0.25rem;
 
   &--grow {
     flex-grow: 1;
-    min-height: 2.7rem;
+    min-height: 2.65rem;
   }
 }
 
@@ -221,7 +231,7 @@ $gf-form-margin: 0.25rem;
 }
 
 .gf-form-query-content {
-  flex-grow: 1;
+  flex-grow: 2;
 
   &--collapsed {
     overflow: hidden;