From 76c4bfe2682a926ee479783abfe3ba4571e973ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 15 Jun 2017 14:03:26 -0400
Subject: [PATCH] ux: new metric segment is starting to work

---
 .../components/form_dropdown/form_dropdown.ts | 21 +++++++++----------
 .../features/panel/partials/metrics_tab.html  |  3 +--
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/public/app/core/components/form_dropdown/form_dropdown.ts b/public/app/core/components/form_dropdown/form_dropdown.ts
index cb7390ead9a..50017225720 100644
--- a/public/app/core/components/form_dropdown/form_dropdown.ts
+++ b/public/app/core/components/form_dropdown/form_dropdown.ts
@@ -20,7 +20,9 @@ export class FormDropdownCtrl {
   text: any;
   options: any;
   cssClass: any;
+  cssClasses: any;
   allowCustom: any;
+  labelMode: boolean;
   linkMode: boolean;
   cancelBlur: any;
   onChange: any;
@@ -33,15 +35,15 @@ export class FormDropdownCtrl {
     this.linkMode = true;
     this.cancelBlur = null;
 
-    if (!this.getOptions) {
-      this.getOptions = () => {
-        return Promise.resolve(this.options);
-      };
-    }
-
     // listen to model changes
     $scope.$watch("ctrl.model", this.modelChanged.bind(this));
 
+    if (this.labelMode) {
+      this.cssClasses = 'gf-form-label ' + this.cssClass;
+    } else {
+      this.cssClasses = 'gf-form-input gf-form-input--dropdown ' + this.cssClass;
+    }
+
     this.inputElement.attr('data-provide', 'typeahead');
     this.inputElement.typeahead({
       source: this.typeaheadSource.bind(this),
@@ -199,9 +201,7 @@ const template =  `
   spellcheck="false"
   style="display:none">
 </input>
-
-<a class="gf-form-label"
-	 ng-class="ctrl.cssClass"
+<a ng-class="ctrl.cssClasses"
 	 tabindex="1"
 	 ng-click="ctrl.open()"
 	 give-focus="ctrl.focus"
@@ -218,12 +218,11 @@ export function formDropdownDirective() {
     controllerAs: 'ctrl',
     scope: {
       model: "=",
-      options: "=",
       getOptions: "&",
       onChange: "&",
       cssClass: "@",
       allowCustom: "@",
-      selectMode: "@",
+      labelMode: "@",
     },
     link: function() {
     }
diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html
index 32f43f1d639..d8d8816d63b 100644
--- a/public/app/features/panel/partials/metrics_tab.html
+++ b/public/app/features/panel/partials/metrics_tab.html
@@ -36,8 +36,7 @@
       <label class="gf-form-label">Panel Data Source</label>
       <gf-form-dropdown model="ctrl.panelDsValue"
                         get-options="ctrl.getOptions(true)"
-                        on-change="ctrl.datasourceChanged($option)"
-                        css-class="width-10">
+                        on-change="ctrl.datasourceChanged($option)">
       </gf-form-dropdown>
     </div>
   </div>