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

<query-editor-row query-ctrl="ctrl" can-collapse="false">
	<div class="gf-form-inline">
		<div class="gf-form max-width-25">
			<label class="gf-form-label query-keyword width-8">
				Metric
				<label class="gf-form-label" bs-tooltip="ctrl.errors.metric" style="color: rgb(229, 189, 28)" ng-show="ctrl.errors.metric">
					<i class="fa fa-warning"></i>
				</label>
			</label>
			<input type="text" class="gf-form-input" ng-model="ctrl.target.metric"
						 spellcheck='false' bs-typeahead="ctrl.suggestMetrics" placeholder="metric name" data-min-length=0 data-items=100
						ng-blur="ctrl.targetBlur()">
			</input>
		</div>
		<div class="gf-form">
			<label class="gf-form-label query-keyword">
				Aggregator
				<a bs-tooltip="ctrl.errors.aggregator" style="color: rgb(229, 189, 28)" ng-show="ctrl.errors.aggregator">
					<i class="fa fa-warning"></i>
				</a>
			</label>
			<div class="gf-form-select-wrapper max-width-15">
				<select ng-model="ctrl.target.aggregator" class="gf-form-input"
								ng-options="agg for agg in ctrl.aggregators"
								ng-change="ctrl.targetBlur()">
		 	 </select>
			</div>
		</div>
			<div class="gf-form max-width-20">
				<label class="gf-form-label query-keyword width-6">
					Alias:
					<info-popover mode="right-normal">
						Use patterns like $tag_tagname to replace part of the alias for a tag value
					</info-popover>
				</label>
				<input  type="text" class="gf-form-input"
		   					ng-model="ctrl.target.alias"
								spellcheck='false'
								placeholder="series alias"
								data-min-length=0 data-items=100
								ng-blur="ctrl.targetBlur()"></input>
			</div>

			<div class="gf-form gf-form--grow">
				<div class="gf-form-label gf-form-label--grow"></div>
			</div>
	</div>

	<div class="gf-form-inline">
		<div class="gf-form max-width-25">
			<label class="gf-form-label query-keyword width-8">Down sample</label>
			<input type="text" class="gf-form-input"
						 ng-model="ctrl.target.downsampleInterval"
						 ng-model-onblur
			       ng-change="ctrl.targetBlur()"
			       placeholder="interval"></input>
			<info-popover mode="right-absolute">
				blank for auto, or for example <code>1m</code>
			</info-popover>
		</div>

		<div class="gf-form">
			<label class="gf-form-label query-keyword">Aggregator</label>
			<div class="gf-form-select-wrapper">
				<select ng-model="ctrl.target.downsampleAggregator" class="gf-form-input"
								ng-options="agg for agg in ctrl.aggregators"
				        ng-change="ctrl.targetBlur()">
				</select>
			</div>
		</div>

		<div class="gf-form" ng-if="ctrl.tsdbVersion == 2">
			<label class="gf-form-label query-keyword width-6">Fill</label>
			<div class="gf-form-select-wrapper">
				<select ng-model="ctrl.target.downsampleFillPolicy" class="gf-form-input"
								ng-options="agg for agg in ctrl.fillPolicies"
								ng-change="ctrl.targetBlur()">
				</select>
			</div>
		</div>

		<gf-form-switch class="gf-form"
										label="Disable downsampling"
										checked="ctrl.target.disableDownsampling"
										on-change="ctrl.targetBlur()">
		</gf-form-switch>

		<div class="gf-form gf-form--grow">
			<div class="gf-form-label gf-form-label--grow"></div>
		</div>
	</div>

	<div class="gf-form-inline" ng-if="ctrl.tsdbVersion == 2">
		<div class="gf-form">

			<label class="gf-form-label query-keyword width-8">
				Filters
				<info-popover mode="right-normal">
					Filters does not work with tags, either of the two will work but not both.
				</info-popover>
			</label>

			<div ng-repeat="fil in ctrl.target.filters track by $index" class="gf-form-label">
				{{fil.tagk}}&nbsp;=&nbsp;{{fil.type}}&#40;{{fil.filter}}&#41;&nbsp;&#44&nbsp;groupBy&nbsp;=&nbsp;{{fil.groupBy}}
				<a ng-click="ctrl.editFilter(fil, $index)">
					<i class="fa fa-pencil"></i>
				</a>
				<a ng-click="ctrl.removeFilter($index)">
					<i class="fa fa-remove"></i>
				</a>
			</div>
			<label class="gf-form-label query-keyword" ng-hide="ctrl.addFilterMode">
				<a ng-click="ctrl.addFilter()">
					<i class="fa fa-plus"></i>
				</a>
			</label>
 		</div>

		<div class="gf-form-inline" ng-show="ctrl.addFilterMode">
			<div class="gf-form">
				<input type="text" class="gf-form-input" spellcheck='false'
						 bs-typeahead="ctrl.suggestTagKeys" data-min-length=0 data-items=100
             ng-model="ctrl.target.currentFilterKey" placeholder="key">
				</input>
			</div>

			<div class="gf-form">
				<label class="gf-form-label">Type</label>
				<div class="gf-form-select-wrapper">
					<select ng-model="ctrl.target.currentFilterType" class="gf-form-input" ng-options="filType for filType in ctrl.filterTypes">
					</select>
				</div>
			</div>

			<div class="gf-form">
				<input type="text" class="gf-form-input" spellcheck='false' bs-typeahead="ctrl.suggestTagValues" data-min-length=0 data-items=100 ng-model="ctrl.target.currentFilterValue" placeholder="filter">
				</input>
			</div>

			<gf-form-switch class="gf-form" label="Group by" checked="ctrl.target.currentFilterGroupBy" on-change="ctrl.targetBlur()">
			</gf-form-switch>

			<div class="gf-form" ng-show="ctrl.addFilterMode">
				<label class="gf-form-label" ng-show="ctrl.errors.filters">
					<a bs-tooltip="ctrl.errors.filters" style="color: rgb(229, 189, 28)" >
						<i class="fa fa-warning"></i>
					</a>
				</label>

				<label class="gf-form-label">
					<a ng-click="ctrl.addFilter()" ng-hide="ctrl.errors.filters">add filter</a>
					<a ng-click="ctrl.closeAddFilterMode()">
						<i class="fa fa-remove"></i>
					</a>
				</label>
			</div>

		</div>

		<div class="gf-form gf-form--grow">
			<div class="gf-form-label gf-form-label--grow"></div>
		</div>
	</div>

	<div class="gf-form-inline">
		<div class="gf-form">
			<label class="gf-form-label query-keyword width-8">
				Tags
				<info-popover mode="right-normal" ng-if="ctrl.tsdbVersion == 2">
					Please use filters, tags are deprecated in opentsdb 2.2
				</info-popover>
			</label>
		</div>

		<div class="gf-form" ng-repeat="(key, value) in ctrl.target.tags track by $index" class="gf-form">
			<label class="gf-form-label">
				{{key}}&nbsp;=&nbsp;{{value}}
				<a ng-click="ctrl.editTag(key, value)">
					<i class="fa fa-pencil"></i>
				</a>
				<a ng-click="ctrl.removeTag(key)">
					<i class="fa fa-remove"></i>
				</a>
			</label>
		</div>

		<div class="gf-form" ng-hide="ctrl.addTagMode">
			<label class="gf-form-label query-keyword">
				<a ng-click="ctrl.addTag()"><i class="fa fa-plus"></i></a>
			</label>
		</div>

		<div class="gf-form" ng-show="ctrl.addTagMode">
			<input type="text"
						 class="gf-form-input" spellcheck='false'
						 bs-typeahead="ctrl.suggestTagKeys" data-min-length=0 data-items=100
					   ng-model="ctrl.target.currentTagKey" placeholder="key">
			</input>

			<input type="text" class="gf-form-input"
						 spellcheck='false' bs-typeahead="ctrl.suggestTagValues"
						 data-min-length=0 data-items=100 ng-model="ctrl.target.currentTagValue" placeholder="value">
			</input>

			<label class="gf-form-label" ng-show="ctrl.errors.tags">
				<a bs-tooltip="ctrl.errors.tags" style="color: rgb(229, 189, 28)" >
					<i class="fa fa-warning"></i>
				</a>
			</label>
			<label class="gf-form-label" >
				<a ng-click="ctrl.addTag()" ng-hide="ctrl.errors.tags">add tag</a>
				<a ng-click="ctrl.closeAddTagMode()"><i class="fa fa-remove"></i></a>
			</label>
		</div>

		<div class="gf-form gf-form--grow">
			<div class="gf-form-label gf-form-label--grow"></div>
		</div>
	</div>

	<div class="gf-form-inline">
		<gf-form-switch class="gf-form" label="Rate" label-class="width-8" checked="ctrl.target.shouldComputeRate" on-change="ctrl.targetBlur()">
		</gf-form-switch>

		<gf-form-switch ng-hide="!ctrl.target.shouldComputeRate"
										class="gf-form" label="Counter" checked="ctrl.target.isCounter" on-change="ctrl.targetBlur()">
		</gf-form-switch>


		<div class="gf-form" ng-hide="!ctrl.target.isCounter || !ctrl.target.shouldComputeRate">
			<label class="gf-form-label">Counter Max</label>
			<input type="text" class="gf-form-input"
					 	 ng-disabled="!ctrl.target.shouldComputeRate"
						 ng-model="ctrl.target.counterMax" spellcheck='false'
						 placeholder="max value" ng-model-onblur
						 ng-blur="ctrl.targetBlur()">
			</input>

			<label class="gf-form-label">Reset Value</label>
			<input type="text" class="tight-form-input input-small"
					   ng-disabled="!ctrl.target.shouldComputeRate"
						 ng-model="ctrl.target.counterResetValue" spellcheck='false'
						 placeholder="reset value" ng-model-onblur
						 ng-blur="ctrl.targetBlur()">
			</input>
		</div>

		<div class="gf-form gf-form--grow">
			<div class="gf-form-label gf-form-label--grow"></div>
		</div>
	</div>
</query-editor-row>