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

<query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
	<div class="gf-form-inline">
		<div class="gf-form gf-form--grow">
			<textarea rows="3" class="gf-form-input" ng-model="ctrl.target.expr" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 give-focus="ctrl.target.refId == 'A'" ng-model-onblur ng-change="ctrl.refreshMetricData()"></textarea>
		</div>
	</div>

	<div class="gf-form-inline">
		<div class="gf-form gf-form--grow">
			<code-editor content="ctrl.target.expr" on-change="ctrl.refreshMetricData()"
				get-metrics="ctrl.getMetricsAutocomplete" data-mode="prometheus">
			</code-editor>
		</div>
	</div>

	<div class="gf-form-inline">
		<div class="gf-form max-width-26">
			<label class="gf-form-label width-8">Legend format</label>
			<input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat"
			spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
			ng-model-onblur ng-change="ctrl.refreshMetricData()">
			</input>
		</div>

		<div class="gf-form">
			<label class="gf-form-label width-6">Min step</label>
			<input type="text" class="gf-form-input width-8" ng-model="ctrl.target.interval"
					   data-placement="right"
			       spellcheck='false'
			       placeholder="{{ctrl.panelCtrl.interval}}"
			       data-min-length=0 data-items=100
			       ng-model-onblur
			       ng-change="ctrl.refreshMetricData()"/>
			<info-popover mode="right-absolute">
				Leave blank for auto handling based on time range and panel width
			</info-popover>
		</div>

		<div class="gf-form">
			<label class="gf-form-label">Resolution</label>
			<div class="gf-form-select-wrapper max-width-15">
				<select ng-model="ctrl.target.intervalFactor" class="gf-form-input"
					ng-options="r.factor as r.label for r in ctrl.resolutions"
					ng-change="ctrl.refreshMetricData()">
				</select>
			</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 max-width-26">
			<label class="gf-form-label width-8">Metric lookup</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>
		</div>

		<div class="gf-form">
			<label class="gf-form-label width-6">Format as</label>
			<div class="gf-form-select-wrapper width-8">
				<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
			</div>
			<label class="gf-form-label">
				<a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
					<i class="fa fa-share-square-o"></i>
				</a>
			</label>
		</div>

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

</query-editor-row>