fix(query editors): added select style to segment, used by data source selector

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;

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>

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;

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>

public/app/plugins/datasource/graphite/partials/query.editor.html

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

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 {