From bbf4d0031947a6615592803966b4f964403133f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 25 Apr 2016 15:49:33 +0200
Subject: [PATCH] fix(query editors): added select style to segment, used by
 data source selector

---
 public/app/core/directives/metric_segment.js       |  9 ++++++---
 public/app/features/panel/metrics_ds_selector.ts   |  4 ++--
 .../plugins/datasource/elasticsearch/bucket_agg.js |  1 -
 .../elasticsearch/partials/bucket_agg.html         |  2 +-
 .../datasource/graphite/partials/query.editor.html |  2 +-
 public/sass/components/_gf-form.scss               | 14 ++++++++++++++
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/public/app/core/directives/metric_segment.js b/public/app/core/directives/metric_segment.js
index 7680f6049e0..61415a660b2 100644
--- a/public/app/core/directives/metric_segment.js
+++ b/public/app/core/directives/metric_segment.js
@@ -11,7 +11,10 @@ function (_, $, coreModule) {
       ' class="gf-form-input input-medium"' +
       ' spellcheck="false" style="display:none"></input>';
 
-    var buttonTemplate = '<a class="gf-form-label" ng-class="segment.cssClass" ' +
+    var linkTemplate = '<a class="gf-form-label" ng-class="segment.cssClass" ' +
+      'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
+
+    var selectTemplate = '<a class="gf-form-input gf-form-input--dropdown" ng-class="segment.cssClass" ' +
       'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
 
     return {
@@ -20,9 +23,9 @@ function (_, $, coreModule) {
         getOptions: "&",
         onChange: "&",
       },
-      link: function($scope, elem) {
+      link: function($scope, elem, attrs) {
         var $input = $(inputTemplate);
-        var $button = $(buttonTemplate);
+        var $button = $(attrs.styleMode === 'select' ? selectTemplate : linkTemplate);
         var segment = $scope.segment;
         var options = null;
         var cancelBlur = null;
diff --git a/public/app/features/panel/metrics_ds_selector.ts b/public/app/features/panel/metrics_ds_selector.ts
index b5457c21164..25cda0a29f8 100644
--- a/public/app/features/panel/metrics_ds_selector.ts
+++ b/public/app/features/panel/metrics_ds_selector.ts
@@ -13,10 +13,10 @@ var template = `
         <i class="icon-gf icon-gf-datasource"></i>
       </label>
       <label class="gf-form-label">
-        Data source
+        Panel data source
       </label>
 
-      <metric-segment segment="ctrl.dsSegment"
+      <metric-segment segment="ctrl.dsSegment" style-mode="select"
                       get-options="ctrl.getOptions()"
                       on-change="ctrl.datasourceChanged()"></metric-segment>
     </div>
diff --git a/public/app/plugins/datasource/elasticsearch/bucket_agg.js b/public/app/plugins/datasource/elasticsearch/bucket_agg.js
index 16666e81b80..18e2f3cf3b1 100644
--- a/public/app/plugins/datasource/elasticsearch/bucket_agg.js
+++ b/public/app/plugins/datasource/elasticsearch/bucket_agg.js
@@ -124,7 +124,6 @@ function (angular, _, queryDef) {
         }
       }
 
-      console.log(settingsLinkText);
       $scope.settingsLinkText = settingsLinkText;
       $scope.agg.settings = settings;
       return true;
diff --git a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
index 77d8361f8d8..993291d8767 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
@@ -44,7 +44,7 @@
 		<div class="gf-form offset-width-7">
 			<label class="gf-form-label width-10">
 				Trim edges points
-				<info-popver mode="right-normal">
+				<info-popover mode="right-normal">
 					Trim the edges on the timeseries x datapoints
 				</info-popover>
 			</label>
diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html
index 3c2075d34bb..5000f0a5954 100755
--- a/public/app/plugins/datasource/graphite/partials/query.editor.html
+++ b/public/app/plugins/datasource/graphite/partials/query.editor.html
@@ -1,7 +1,7 @@
 <query-editor-row query-ctrl="ctrl">
 
 	<div class="gf-form" ng-show="ctrl.target.textEditor">
-		<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
+		<input type="text" class="gf-form-input" ng-model="ctrl.target.target" spellcheck="false" ng-blur="ctrl.refresh()"></input>
 	</div>
 
   <div ng-hide="ctrl.target.textEditor">
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 8160d4b0977..c5112460588 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -123,6 +123,20 @@ $gf-form-margin: 0.25rem;
   }
 
   &.gf-size-auto { width: auto; }
+
+  &--dropdown {
+    padding-right: $input-padding-x*2;
+    &:after {
+      position: absolute;
+      top: 35%;
+      right: $input-padding-x/2;
+      background-color: transparent;
+      color: $input-color;
+      font: normal normal normal $font-size-sm/1 FontAwesome;
+      content: '\f0d7';
+      pointer-events: none;
+    }
+  }
 }
 
 .gf-form-select-wrapper {