From 04d90d7139c5f46c10238227c3e9aae8055f3d8d Mon Sep 17 00:00:00 2001
From: hagen1778 <hagen1778@gmail.com>
Date: Wed, 8 Mar 2017 21:30:20 +0200
Subject: [PATCH] Make Prometheus query field a textarea #7663

---
 .../prometheus/partials/query.editor.html       | 17 ++++++++++-------
 .../plugins/datasource/prometheus/query_ctrl.ts |  4 ++++
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html
index 37c27ace58a..1840f74bd74 100644
--- a/public/app/plugins/datasource/prometheus/partials/query.editor.html
+++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html
@@ -1,12 +1,7 @@
-<query-editor-row query-ctrl="ctrl" can-collapse="false">
+<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">
-			<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>
+			<textarea rows="3" 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()"></textarea>
 		</div>
 	</div>
 
@@ -39,6 +34,14 @@
 					ng-change="ctrl.refreshMetricData()">
 				</select>
 			</div>
+		</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 class="gf-form">
 			<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>
diff --git a/public/app/plugins/datasource/prometheus/query_ctrl.ts b/public/app/plugins/datasource/prometheus/query_ctrl.ts
index c6bbe03a8d7..66ea92a917f 100644
--- a/public/app/plugins/datasource/prometheus/query_ctrl.ts
+++ b/public/app/plugins/datasource/prometheus/query_ctrl.ts
@@ -75,6 +75,10 @@ class PrometheusQueryCtrl extends QueryCtrl {
     var hash = encodeURIComponent(JSON.stringify([expr]));
     this.linkToPrometheus = this.datasource.directUrl + '/graph#' + hash;
   }
+
+  getCollapsedText() {
+    return this.target.expr;
+  }
 }
 
 export {PrometheusQueryCtrl};