From 3aa1cb012a8b8f9e3cb1d28e9a52ef491654d916 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Wed, 6 Dec 2017 12:13:17 +0100
Subject: [PATCH] added tooltip, fixes #10092 (#10097)

* added tooltip, fixes #10092

* fixed code formatting
---
 .../prometheus/partials/query.editor.html     | 109 +++++++++---------
 1 file changed, 53 insertions(+), 56 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html
index 98fd01eee15..8d6e89c3406 100644
--- a/public/app/plugins/datasource/prometheus/partials/query.editor.html
+++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html
@@ -1,63 +1,60 @@
 <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="false">
-	<div class="gf-form-inline">
-		<div class="gf-form gf-form--grow">
-			<code-editor content="ctrl.target.expr" datasource="ctrl.datasource" on-change="ctrl.refreshMetricData()"
-				get-completer="ctrl.getCompleter()" data-mode="prometheus" code-editor-focus="ctrl.isLastQuery">
-			</code-editor>
-		</div>
-	</div>
+  <div class="gf-form-inline">
+    <div class="gf-form gf-form--grow">
+      <code-editor content="ctrl.target.expr" datasource="ctrl.datasource" on-change="ctrl.refreshMetricData()" get-completer="ctrl.getCompleter()"
+        data-mode="prometheus" code-editor-focus="ctrl.isLastQuery">
+      </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-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>
+      <info-popover mode="right-absolute">
+        Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for
+        the label hostname.
+      </info-popover>
+    </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 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">
-			<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>
-			<gf-form-switch class="gf-form" label="Instant" label-class="width-5" checked="ctrl.target.instant" on-change="ctrl.refresh()">
-			</gf-form-switch>
-			<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>
+    <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">
+      <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>
+      <gf-form-switch class="gf-form" label="Instant" label-class="width-5" checked="ctrl.target.instant" on-change="ctrl.refresh()">
+      </gf-form-switch>
+      <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>