From 0e4b70a4a87f57c2ae96bcecc1671857abbb9576 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 28 Apr 2016 10:13:18 +0200
Subject: [PATCH] feat(query_editors): more work

---
 .../app/features/panel/metrics_ds_selector.ts |  4 +-
 .../panel/partials/query_editor_row.html      | 14 ++---
 .../opentsdb/partials/query.editor.html       |  2 +-
 public/sass/components/_gf-form.scss          | 37 -------------
 public/sass/components/_query_editor.scss     | 53 +++++++++++++++++++
 5 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/public/app/features/panel/metrics_ds_selector.ts b/public/app/features/panel/metrics_ds_selector.ts
index 25cda0a29f8..0c3c61955e3 100644
--- a/public/app/features/panel/metrics_ds_selector.ts
+++ b/public/app/features/panel/metrics_ds_selector.ts
@@ -55,8 +55,10 @@ export class MetricsDsSelectorCtrl {
   constructor(private uiSegmentSrv, datasourceSrv) {
     this.datasources = datasourceSrv.getMetricSources();
 
+    var dsValue = this.panelCtrl.panel.datasource || null;
+
     for (let ds of this.datasources) {
-      if (ds.value === this.panelCtrl.panel.datasource) {
+      if (ds.value === dsValue) {
         this.current = ds;
       }
     }
diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html
index 6acd1b5dfe2..e8dbe1434e7 100644
--- a/public/app/features/panel/partials/query_editor_row.html
+++ b/public/app/features/panel/partials/query_editor_row.html
@@ -1,12 +1,14 @@
 
 <div class="gf-form-query">
 	<div class="gf-form">
-    <label class="gf-form-label">
-      <a class="pointer query-keyword" tabindex="1" ng-click="ctrl.toggleCollapse()" ng-class="{muted: !ctrl.canCollapse}">
-				<i class="fa fa-caret-down" ng-hide="ctrl.collapsed"></i>
-				<i class="fa fa-caret-right" ng-show="ctrl.collapsed"></i>
-        {{ctrl.target.refId}}
-				<em ng-show="ctrl.target.datasource">{{ctrl.target.datasource}}&nbsp;</em>
+    <label class="gf-form-label gf-form-query-letter-cell">
+      <a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()">
+        <span  ng-class="{muted: !ctrl.canCollapse}" class="gf-form-query-letter-cell-carret">
+          <i class="fa fa-caret-down" ng-hide="ctrl.collapsed"></i>
+          <i class="fa fa-caret-right" ng-show="ctrl.collapsed"></i>
+        </span>
+        <span class="gf-form-query-letter-cell-letter">{{ctrl.target.refId}}</span>
+        <em class="gf-form-query-letter-cell-ds" ng-show="ctrl.target.datasource">({{ctrl.target.datasource}})</em>
       </a>
 		</label>
   </div>
diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
index 7ccdc60d0a2..4683f9c300a 100644
--- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
@@ -219,7 +219,7 @@
 	</div>
 
 	<div class="gf-form-inline">
-		<gf-form-switch class="gf-form" label="Rate" label-class="width-8" checked="ctrl.target.shouldComputeRate" on-change="ctrl.targetBlur()">
+		<gf-form-switch class="gf-form" label="Rate" label-class="width-8 query-keyword" checked="ctrl.target.shouldComputeRate" on-change="ctrl.targetBlur()">
 		</gf-form-switch>
 
 		<gf-form-switch ng-hide="!ctrl.target.shouldComputeRate"
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 990bba6fcb9..0ae9f7ebb71 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -223,43 +223,6 @@ $gf-form-margin: 0.25rem;
   }
 }
 
-.gf-form-query {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: flex-start;
-  align-items: flex-start;
-
-  .gf-form,
-  .gf-form-filler {
-    margin-bottom: 2px;
-  }
-
-  .gf-form-switch,
-  .gf-form-switch label,
-  .gf-form-input,
-  .gf-form-select-wrapper,
-  .gf-form-filler,
-  .gf-form-label {
-    margin-right: 2px;
-  }
-}
-
-.gf-form-query-content {
-  flex-grow: 2;
-
-  &--collapsed {
-    overflow: hidden;
-
-    .gf-form-label {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      white-space: nowrap;
-    }
-  }
-}
-
 .gf-form-help-icon {
   flex-grow: 0;
   padding-left: $spacer;
diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss
index 823d4cb0039..4c807ed0e6b 100644
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@@ -14,3 +14,56 @@
   color: $orange;
 }
 
+.gf-form-query {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  align-items: flex-start;
+
+  .gf-form,
+  .gf-form-filler {
+    margin-bottom: 2px;
+  }
+
+  .gf-form-switch,
+  .gf-form-switch label,
+  .gf-form-input,
+  .gf-form-select-wrapper,
+  .gf-form-filler,
+  .gf-form-label {
+    margin-right: 2px;
+  }
+}
+
+.gf-form-query-content {
+  flex-grow: 2;
+
+  &--collapsed {
+    overflow: hidden;
+
+    .gf-form-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      white-space: nowrap;
+    }
+  }
+}
+
+.gf-form-query-letter-cell {
+  .gf-form-query-letter-cell-carret {
+    display: inline-block;
+    width: 0.7rem;
+    position: relative;
+    left: -2px;
+  }
+  .gf-form-query-letter-cell-letter {
+    font-weight: bold;
+    color: $blue;
+  }
+  .gf-form-query-letter-cell-ds {
+    color: $text-color-weak;
+  }
+}
+