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

<query-editor-row ctrl="ctrl">
		<ul class="tight-form-list" ng-hide="ctrl.target.rawQuery">
			<li class="tight-form-item query-keyword" style="width: 75px">
				FROM
			</li>
			<li>
				<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
			</li>
			<li>
				<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
			</li>
			<li class="tight-form-item query-keyword" style="padding-left: 15px; padding-right: 15px;">
				WHERE
			</li>
			<li ng-repeat="segment in ctrl.tagSegments">
				<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
			</li>
		</ul>

		<div class="tight-form-flex-wrapper" ng-show="ctrl.target.rawQuery">
			<input type="text" class="tight-form-clear-input" ng-model="ctrl.target.query" spellcheck="false" style="width: 100%;" ng-blur="ctrl.refresh()"></input>
		</div>
</query-editor-row>

<div ng-hide="ctrl.target.rawQuery">
	<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="tight-form">
	<ul class="tight-form-list">
		<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
			ALIAS BY
		</li>
		<li>
			<input type="text" class="tight-form-clear-input input-xlarge" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
		</li>
		<li class="tight-form-item">
			Format as
		</li>
		<li>
			<select class="input-small tight-form-input" style="width: 104px" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
		</li>
	</ul>
	<div class="clearfix"></div>
</div>