feat(query editors): more progress on ES query editor

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

@@ -11,9 +11,9 @@
 	</div>
 
 	<div class="gf-form">
-		<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="tight-form-item-large"></metric-segment-model>
-		<metric-segment-model ng-if="aggDef.requiresField" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="tight-form-item-xxlarge"></metric-segment-model>
-		<metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="tight-form-item-xxlarge"></metric-segment-model>
+		<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="width-10"></metric-segment-model>
+		<metric-segment-model ng-if="aggDef.requiresField" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model>
+		<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">
@@ -38,78 +38,49 @@
 			<a class="pointer" ng-click="removeMetricAgg()"><i class="fa fa-minus"></i></a>
 		</label>
 	</div>
-
 </div>
 
 <div class="gf-form-group" ng-if="showOptions">
-	<div class="gf-form" ng-if="agg.type === 'derivative'">
-		<label class="gf-form-label width-8">Unit</label>
-		<input type="text" class="gf-form-input max-width-10" ng-model="agg.settings.unit" ng-blur="onChangeInternal()" spellcheck='false'>
+
+	<div class="gf-form offset-width-7" ng-if="agg.type === 'derivative'">
+		<label class="gf-form-label width-10">Unit</label>
+		<input type="text" class="gf-form-input max-width-12" ng-model="agg.settings.unit" ng-blur="onChangeInternal()" spellcheck='false'>
 	</div>
 
-	<div class="gf-form" ng-if="agg.type === 'moving_avg'">
-		<label class="gf-form-label width-8">Window</label>
-		<input type="number" class="gf-form-input max-width-10" ng-model="agg.settings.window" ng-blur="onChangeInternal()" spellcheck='false'>
+	<div class="gf-form offset-width-7" ng-if="agg.type === 'moving_avg'">
+		<label class="gf-form-label width-10">Window</label>
+		<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.window" ng-blur="onChangeInternal()" spellcheck='false'>
 	</div>
 
-	<div class="gf-form" ng-if="agg.type === 'moving_avg'">
-		<label class="gf-form-label width-8">Model</label>
-		<input type="text" class="gf-form-input max-width-10" ng-change="onChangeInternal()" ng-model="agg.settings.model" blur="onChange()" spellcheck='false'>
+	<div class="gf-form offset-width-7" ng-if="agg.type === 'moving_avg'">
+		<label class="gf-form-label width-10">Model</label>
+		<input type="text" class="gf-form-input max-width-12" ng-change="onChangeInternal()" ng-model="agg.settings.model" blur="onChange()" spellcheck='false'>
 	</div>
 
-	<div class="gf-form" ng-if="agg.type === 'percentiles'">
-		<label class="gf-form-label">Percentiles</label>
-		<input type="text" class="gf-form-input max-width-25" ng-model="agg.settings.percents" array-join ng-blur="onChange()"></input>
+	<div class="gf-form offset-width-7" ng-if="agg.type === 'percentiles'">
+		<label class="gf-form-label width-10">Percentiles</label>
+		<input type="text" class="gf-form-input max-width-12" ng-model="agg.settings.percents" array-join ng-blur="onChange()"></input>
 	</div>
 
 	<div ng-if="agg.type === 'extended_stats'">
-		<div class="gf-form" ng-repeat="stat in extendedStats">
-			<ul class="gf-form-list">
-				<li class="tight-form-item" style="width: 100px">
-					{{stat.text}}
-				</li>
-				<li class="tight-form-item last">
-					<editor-checkbox text="" model="agg.meta.{{stat.value}}" change="onChange()"></editor-checkbox>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<gf-form-switch ng-repeat="stat in extendedStats" class="gf-form offset-width-7" label="{{stat.text}}" label-class="width-10" checked="agg.meta[stat.value]" on-change="ctrl.render()"></gf-form-switch>
+
+		<div class="gf-form offset-width-7">
+			<label class="gf-form-label width-10">Sigma</label>
+			<input type="number" class="gf-form-input max-width-12" placeholder="3" ng-model="agg.settings.sigma" ng-blur="onChange()"></input>
 		</div>
 	</div>
-	<div class="tight-form" ng-if="agg.type === 'extended_stats'">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 100px">
-				Sigma
-			</li>
-			<li>
-				<input type="number" class="input-mini tight-form-input last" placeholder="3" ng-model="agg.settings.sigma" ng-blur="onChange()"></input>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
-	</div>
 
-	<div class="tight-form" ng-if="aggDef.supportsInlineScript">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 100px;">
-				Script
-			</li>
-			<li>
-				<input type="text" class="input-medium tight-form-input last" empty-to-null ng-model="agg.inlineScript" ng-blur="onChangeInternal()" spellcheck='false' placeholder="_value * 1">
-			</li>
-		</ul>
-		<div class="clearfix"></div>
+	<div class="gf-form offset-width-7" ng-if="aggDef.supportsInlineScript">
+		<label class="gf-form-label width-10">Script</label>
+		<input type="text" class="gf-form-input max-width-12" empty-to-null ng-model="agg.inlineScript" ng-blur="onChangeInternal()" spellcheck='false' placeholder="_value * 1">
 	</div>
 
-	<div class="tight-form" ng-if="aggDef.supportsMissing">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 100px;">
-				Missing
-				<tip>The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value</tip>
-			</li>
-			<li>
-				<input type="number" class="input-medium tight-form-input last" empty-to-null ng-model="agg.settings.missing" ng-blur="onChangeInternal()" spellcheck='false'>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
+	<div class="gf-form offset-width-7" ng-if="aggDef.supportsMissing">
+		<label class="gf-form-label width-10">
+			Missing
+			<tip>The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value</tip>
+		</label>
+		<input type="number" class="gf-form-input max-width-12" empty-to-null ng-model="agg.settings.missing" ng-blur="onChangeInternal()" spellcheck='false'>
 	</div>
-
 </div>

public/sass/components/_gf-form.scss

@@ -210,6 +210,8 @@ $gf-form-margin: 0.25rem;
     margin-bottom: 2px;
   }
 
+  .gf-form-switch input,
+  .gf-form-switch label,
   .gf-form-input,
   .gf-form-select-wrapper,
   .gf-form-filler,
@@ -220,7 +222,6 @@ $gf-form-margin: 0.25rem;
 
 .gf-form-query-content {
   flex-grow: 1;
-  overflow: hidden;
 
   &--collapsed {
     overflow: hidden;

public/sass/utils/_widths.scss

@@ -17,3 +17,9 @@
   }
 }
 
+@for $i from 1 through 30 {
+  .offset-width-#{$i} {
+    margin-left: ($spacer * $i) !important;
+  }
+}
+