<query-editor-row query-ctrl="ctrl" can-collapse="false">

<div class="gf-form-inline">

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

<label class="gf-form-label width-8">Query</label>

<input type="text" class="gf-form-input" ng-model="ctrl.target.expr" spellcheck='false' placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.refreshMetricData()">

</div>

<div class="gf-form max-width-22">

<label class="gf-form-label">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>

<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"

</div>

<div class="gf-form">

<label class="gf-form-label width-5">Step</label>

<input type="text" class="gf-form-input max-width-5" 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>

<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>

display: none;