feat(query_editors): more work

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;
       }
     }

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>

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"

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;

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;
+  }
+}
+