ux(): big progress on updating query editors

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

@@ -1,4 +1,4 @@
-<div class="gf-form-inline">
+<div class="gf-form-query">
 	<div class="gf-form">
 		<label class="gf-form-label">
 			{{ctrl.target.refId}}
@@ -9,7 +9,8 @@
 			</a>
 		</label>
 	</div>
-	<div ng-transclude style="max-width: 100%; flex-grow: 10;">
+
+	<div ng-transclude class="gf-form-query-content">
 	</div>
 
 	<div class="gf-form">

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

@@ -1,105 +1,89 @@
 <query-editor-row ctrl="ctrl">
-		<div ng-hide="ctrl.target.rawQuery" class="gf-form-inline">
-			<label class="gf-form-label query-keyword width-7">FROM</label>
 
-			<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
-			<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
+	<div class="gf-form" ng-show="ctrl.target.rawQuery">
+		<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
+	</div>
 
-			<label class="gf-form-label query-keyword">
-				WHERE
-			</label>
+  <div ng-hide="ctrl.target.rawQuery">
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword width-7">FROM</label>
 
-			<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>
+				<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
+				<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
 			</div>
-		</div>
 
-		<div class="gf-form" ng-show="ctrl.target.rawQuery">
-			<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
-		</div>
-</query-editor-row>
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword">WHERE</label>
 
-<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">
-				<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 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>
+
+			<div class="gf-form-filler"></div>
 		</div>
-	</div>
-	<div class="gf-form-inline query-editor-secondary-row">
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">
-				<span>GROUP BY</span>
-			</label>
 
+		<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword width-7">
+					<span ng-show="$index === 0">SELECT</span>
+				</label>
+			</div>
 
-			<influx-query-part-editor
-					ng-repeat="part in ctrl.queryModel.groupByParts"
-					part="part"
-					class="gf-form-label tight-form-func"
-					remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
-			</influx-query-part-editor>
+			<div class="gf-form" ng-repeat="part in selectParts">
+				<influx-query-part-editor
+						class="gf-form-label query-part"
+						part="part"
+						remove-action="ctrl.removeSelectPart(selectParts, part)"
+						part-updated="ctrl.selectPartUpdated(selectParts, part)"
+						get-options="ctrl.getPartOptions(part)">
+				</influx-query-part-editor>
+			</div>
 
-			<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
-	</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="gf-form">
+				<label class="dropdown"
+					dropdown-typeahead="ctrl.selectMenu"
+					dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
+				</label>
+			</div>
+
+			<div class="gf-form-filler"></div>
+		</div>
+
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword width-7">
+					<span>GROUP BY</span>
+				</label>
+
+				<influx-query-part-editor
+						ng-repeat="part in ctrl.queryModel.groupByParts"
+						part="part"
+						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>
 
-	<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>
+
+			<div class="gf-form-filler"></div>
+		</div>
 
-<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()">
 	</div>
-	<div class="gf-form">
-		<label class="gf-form-label">Format as</label>
-		<div class="gf-form-select-wrapper">
-			<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 class="gf-form-inline">
+		<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()">
+		</div>
+		<div class="gf-form">
+			<label class="gf-form-label">Format as</label>
+			<div class="gf-form-select-wrapper">
+				<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>
-</div>
 
+</query-editor-row>

public/app/plugins/datasource/influxdb/partials/query_part.html

@@ -2,4 +2,4 @@
 	<span class="pointer fa fa-remove" ng-click="removeActionInternal()" ></span>
 </div>
 
-<a ng-click="toggleControls()">{{part.def.type}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span>
+<a ng-click="toggleControls()" class="query-part-name">{{part.def.type}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span>

public/sass/_grafana.scss

@@ -68,6 +68,7 @@
 @import "components/drop";
 @import "components/query_editor";
 @import "components/tabbed_view";
+@import "components/query_part";
 
 // PAGES
 @import "pages/login";

public/sass/components/_gf-form.scss

@@ -49,6 +49,16 @@ $gf-form-margin: 0.25rem;
   @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);
+}
+
 .gf-form-checkbox {
   flex-shrink: 0;
   padding: $input-padding-y $input-padding-x;
@@ -152,10 +162,6 @@ $gf-form-margin: 0.25rem;
   flex-grow: 0;
 }
 
-.query-editor-secondary-row {
-  margin-left: 5.2rem;
-}
-
 .gf-form-switch {
   margin-right: $gf-form-margin;
 }
@@ -186,3 +192,27 @@ $gf-form-margin: 0.25rem;
     pointer-events: none;
   }
 }
+
+.gf-form-query {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  align-items: flex-start;
+
+  .gf-form,
+  .gf-form-filler {
+    margin-bottom: 2px;
+  }
+
+  .gf-form-input,
+  .gf-form-select-wrapper,
+  .gf-form-filler,
+  .gf-form-label {
+    margin-right: 2px;
+  }
+}
+
+.gf-form-query-content {
+  flex-grow: 1;
+}

public/sass/components/_query_part.scss

@@ -0,0 +1,16 @@
+
+.query-part {
+  background-color: $input-bg !important;
+
+  &.show-function-controls {
+    padding-top: 5px;
+    min-width: 100px;
+    text-align: center;
+  }
+}
+
+.query-part-name {
+}
+
+.query-part-parameters {
+}