refactor: metric segment remake

public/app/core/components/form_dropdown/form_dropdown.ts

@@ -28,8 +28,9 @@ export class FormDropdownCtrl {
   onChange: any;
   getOptions: any;
   optionCache: any;
+  lookupText: boolean;
 
-  constructor(private $scope, $element, private $sce, private templateSrv) {
+  constructor(private $scope, $element, private $sce, private templateSrv, private $q) {
     this.inputElement = $element.find('input').first();
     this.linkElement = $element.find('a').first();
     this.linkMode = true;
@@ -69,29 +70,45 @@ export class FormDropdownCtrl {
       }
     });
 
+    this.inputElement.keydown(evt => {
+      if (evt.keyCode === 13) {
+        this.inputElement.blur();
+      }
+    });
+
     this.inputElement.blur(this.inputBlur.bind(this));
   }
 
-  modelChanged(newVal) {
+  getOptionsInternal(query) {
+    var result = this.getOptions({$query: query});
+    if (this.isPromiseLike(result)) {
+      return result;
+    }
+    return this.$q.when(result);
+  }
+
+  isPromiseLike(obj) {
+    return obj && (typeof obj.then === 'function');
+  }
+
+  modelChanged() {
     if (_.isObject(this.model)) {
       this.updateDisplay(this.model.text);
     } else {
-
       // if we have text use it
-      if (this.text) {
+      if (this.lookupText) {
-        this.updateDisplay(this.text);
+        this.getOptionsInternal("").then(options => {
-      } else {
-        // otherwise we need to do initial lookup, usually happens first time
-        this.getOptions().then(options => {
           var item = _.find(options, {value: this.model});
           this.updateDisplay(item ? item.text : this.model);
         });
+      } else {
+        this.updateDisplay(this.model);
       }
     }
   }
 
   typeaheadSource(query, callback) {
-    this.getOptions({$query: query}).then(options => {
+    this.getOptionsInternal(query).then(options => {
       this.optionCache = options;
 
       // extract texts
@@ -223,9 +240,8 @@ export function formDropdownDirective() {
       cssClass: "@",
       allowCustom: "@",
       labelMode: "@",
+      lookupText: "@",
     },
-    link: function() {
-    }
   };
 }
 

public/app/features/panel/partials/metrics_tab.html

@@ -35,6 +35,7 @@
     <div class="gf-form">
       <label class="gf-form-label">Panel Data Source</label>
       <gf-form-dropdown model="ctrl.panelDsValue"
+                        lookup-text="true"
                         get-options="ctrl.getOptions(true)"
                         on-change="ctrl.datasourceChanged($option)">
       </gf-form-dropdown>

public/app/plugins/datasource/elasticsearch/bucket_agg.js

@@ -26,13 +26,21 @@ function (angular, _, queryDef) {
     var bucketAggs = $scope.target.bucketAggs;
 
     $scope.orderByOptions = [];
-    $scope.bucketAggTypes = queryDef.bucketAggTypes;
+
-    $scope.orderOptions = queryDef.orderOptions;
+    $scope.getBucketAggTypes = function() {
-    $scope.sizeOptions = queryDef.sizeOptions;
+      return queryDef.bucketAggTypes;
+    };
+
+    $scope.getOrderOptions = function() {
+      return queryDef.orderOptions;
+    };
+
+    $scope.getSizeOptions = function() {
+      return queryDef.sizeOptions;
+    };
 
     $rootScope.onAppEvent('elastic-query-updated', function() {
       $scope.validateModel();
-      $scope.updateOrderByOptions();
     }, $scope);
 
     $scope.init = function() {
@@ -166,11 +174,10 @@ function (angular, _, queryDef) {
 
     $scope.toggleOptions = function() {
       $scope.showOptions = !$scope.showOptions;
-      $scope.updateOrderByOptions();
     };
 
-    $scope.updateOrderByOptions = function() {
+    $scope.getOrderByOptions = function() {
-      $scope.orderByOptions = queryDef.getOrderByOptions($scope.target);
+      return queryDef.getOrderByOptions($scope.target);
     };
 
     $scope.getFieldsInternal = function() {

public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html

@@ -5,9 +5,22 @@
 			<span ng-hide="isFirst">Then by</span>
 		</label>
 
-		<gf-form-dropdown value="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></gf-form-dropdown>
+		<gf-form-dropdown model="agg.type"
-		<!-- <metric&#45;segment&#45;model property="agg.type" options="bucketAggTypes" on&#45;change="onTypeChanged()" custom="false" css&#45;class="width&#45;10"></metric&#45;segment&#45;model> -->
+											lookup-text="true"
-		<metric-segment-model ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model>
+											get-options="getBucketAggTypes()"
+											on-change="onTypeChanged()"
+											allow-custom="false"
+											label-mode="true"
+											css-class="width-10">
+		</gf-form-dropdown>
+		<gf-form-dropdown ng-if="agg.field"
+											model="agg.field"
+											get-options="getFieldsInternal()"
+											on-change="onChange()"
+											allow-custom="false"
+											label-mode="true"
+											css-class="width-12">
+		</gf-form-dropdown>
 	</div>
 
 	<div class="gf-form gf-form--grow">
@@ -34,7 +47,13 @@
 	<div ng-if="agg.type === 'date_histogram'">
 		<div class="gf-form offset-width-7">
 			<label class="gf-form-label width-10">Interval</label>
-			<metric-segment-model property="agg.settings.interval" get-options="getIntervalOptions()" on-change="onChangeInternal()" css-class="width-12" custom="true"></metric-segment-model>
+			<gf-form-dropdown model="agg.settings.interval"
+												get-options="getIntervalOptions()"
+												on-change="onChangeInternal()"
+												allow-custom="true"
+												label-mode="true"
+												css-class="width-12">
+			</gf-form-dropdown>
 		</div>
 
 		<div class="gf-form offset-width-7">
@@ -67,11 +86,23 @@
 	<div ng-if="agg.type === 'terms'">
 		<div class="gf-form offset-width-7">
 			<label class="gf-form-label width-10">Order</label>
-			<metric-segment-model property="agg.settings.order" options="orderOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
+			<gf-form-dropdown model="agg.settings.order"
+											  lookup-text="true"
+												get-options="getOrderOptions()"
+												on-change="onChangeInternal()"
+												label-mode="true"
+												css-class="width-12">
+			</gf-form-dropdown>
 		</div>
 		<div class="gf-form offset-width-7">
 			<label class="gf-form-label width-10">Size</label>
-			<metric-segment-model property="agg.settings.size" options="sizeOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
+			<gf-form-dropdown model="agg.settings.size"
+											  lookup-text="true"
+												get-options="getSizeOptions()"
+												on-change="onChangeInternal()"
+												label-mode="true"
+												css-class="width-12">
+			</gf-form-dropdown>
 		</div>
 		<div class="gf-form offset-width-7">
 			<label class="gf-form-label width-10">Min Doc Count</label>
@@ -79,7 +110,13 @@
 		</div>
 		<div class="gf-form offset-width-7">
 			<label class="gf-form-label width-10">Order By</label>
-			<metric-segment-model property="agg.settings.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
+			<gf-form-dropdown model="agg.settings.orderBy"
+											  lookup-text="true"
+												get-options="getOrderByOptions()"
+												on-change="onChangeInternal()"
+												label-mode="true"
+												css-class="width-12">
+			</gf-form-dropdown>
 		</div>
 		<div class="gf-form offset-width-7">
 			<label class="gf-form-label width-10">

public/app/plugins/datasource/elasticsearch/partials/metric_agg.html

@@ -11,9 +11,9 @@
 	</div>
 
 	<div class="gf-form">
-		<gf-form-dropdown value="agg.type" options="metricAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></gf-form-dropdown>
+		<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="width-10"></metric-segment-model>
-		<gf-form-dropdown ng-if="aggDef.requiresField" value="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></gf-form-dropdown>
+		<metric-segment-model ng-if="aggDef.requiresField" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model>
-		<gf-form-dropdown ng-if="aggDef.isPipelineAgg" value="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></gf-form-dropdown>
+		<metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
 	</div>
 
 	<div class="gf-form gf-form--grow">

public/app/plugins/datasource/elasticsearch/query_ctrl.ts

@@ -31,11 +31,11 @@ export class ElasticQueryCtrl extends QueryCtrl {
 
   queryUpdated() {
     var newJson = angular.toJson(this.datasource.queryBuilder.build(this.target), true);
-    if (newJson !== this.rawQueryOld) {
+    if (this.rawQueryOld && newJson !== this.rawQueryOld) {
-      this.rawQueryOld = newJson;
       this.refresh();
     }
 
+    this.rawQueryOld = newJson;
     this.$rootScope.appEvent('elastic-query-updated');
   }