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

<div class="gf-form-inline">
	<div class="gf-form">
		<label class="gf-form-label query-keyword width-7">
			<span ng-show="isFirst">Group by</span>
			<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>

		<label class="gf-form-label" ng-if="settingsLinkText">
			<a ng-click="toggleOptions()">
				<i class="fa fa-caret-down" ng-show="showOptions"></i>
				<i class="fa fa-caret-right" ng-hide="showOptions"></i>
				{{settingsLinkText}}
			</a>
		</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>
		</label>
		<label class="gf-form-label">
			<a class="pointer" ng-click="removeBucketAgg()"><i class="fa fa-minus"></i></a>
		</label>
	</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>
		<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>
		<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>
	</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>
		<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>
		<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>
	</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">
					<a class="pointer" ng-click="addFiltersQuery()"><i class="fa fa-plus"></i></a>
				</li>
				<li class="tight-form-item last" ng-if="!$first">
					<a class="pointer" ng-click="removeFiltersQuery(filter)"><i class="fa fa-minus"></i></a>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>

	</div>

</div>