query: more work on metrics tab changes

public/app/features/panel/metrics_panel_ctrl.ts

@@ -1,5 +1,6 @@
 ///<reference path="../../headers/common.d.ts" />
 
+import angular from 'angular';
 import config from 'app/core/config';
 import $ from 'jquery';
 import _ from 'lodash';
@@ -33,6 +34,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   dataStream: any;
   dataSubscription: any;
   dataList: any;
+  nextRefId: string;
 
   constructor($scope, $injector) {
     super($scope, $injector);
@@ -307,6 +309,25 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.datasource = null;
     this.refresh();
   }
+
+  addQuery(target) {
+    target.refId = this.dashboard.getNextQueryLetter(this.panel);
+
+    this.panel.targets.push(target);
+    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
+  }
+
+  removeQuery(target) {
+    var index = _.indexOf(this.panel.targets, target);
+    this.panel.targets.splice(index, 1);
+    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
+    this.refresh();
+  }
+
+  moveQuery(target, direction) {
+    var index = _.indexOf(this.panel.targets, target);
+    _.move(this.panel.targets, index, index + direction);
+  }
 }
 
 export {MetricsPanelCtrl};

public/app/features/panel/metrics_tab.ts

@@ -36,8 +36,10 @@ export class MetricsTabCtrl {
     }
 
     this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
-    this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true});
+    this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true, fake: true});
-    this.nextRefId = this.getNextQueryLetter();
+
+    // update next ref id
+    this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
   }
 
   getOptions(includeBuiltin) {
@@ -61,22 +63,13 @@ export class MetricsTabCtrl {
     var ds = _.find(this.datasources, {name: this.mixedDsSegment.value});
     if (ds) {
       target.datasource = ds.name;
-      this.panelCtrl.panel.targets.push(target);
+      this.panelCtrl.addDataQuery(target);
       this.mixedDsSegment.value = '';
     }
   }
 
-  getNextQueryLetter() {
+  addQuery() {
-    return this.dashboard.getNextQueryLetter(this.panel);
+    this.panelCtrl.addQuery({isNew: true});
-  }
-
-  addDataQuery() {
-    var target: any = {
-      isNew: true,
-      refId: this.getNextQueryLetter()
-    };
-    this.panelCtrl.panel.targets.push(target);
-    this.nextRefId = this.getNextQueryLetter();
   }
 }
 

public/app/features/panel/panel_ctrl.ts

@@ -76,8 +76,18 @@ export class PanelCtrl {
     profiler.renderingCompleted(this.panel.id, this.timing);
   }
 
+  shouldSkipRefresh() {
+    // some scenarios we should never ignore refresh
+    if (this.fullscreen || this.dashboard.meta.soloMode || this.dashboard.snapshot) {
+      return false;
+    }
+
+    return !this.isPanelVisible();
+  }
+
   refresh() {
-    if (!this.isPanelVisible() && !this.dashboard.meta.soloMode && !this.dashboard.snapshot) {
+    // somet
+    if (this.shouldSkipRefresh()) {
       this.skippedLastRefresh = true;
       return;
     }

public/app/features/panel/query_editor_row.ts

@@ -21,7 +21,7 @@ export class QueryRowCtrl {
     this.panel = this.panelCtrl.panel;
 
     if (!this.target.refId) {
-      this.target.refId = this.getNextQueryLetter();
+      this.target.refId = this.panelCtrl.dashboard.getNextQueryLetter(this.panel);
     }
 
     this.toggleCollapse(true);
@@ -40,16 +40,6 @@ export class QueryRowCtrl {
     this.panelCtrl.refresh();
   }
 
-  getNextQueryLetter() {
-    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-    return _.find(letters, refId => {
-      return _.every(this.panel.targets, function(other) {
-        return other.refId !== refId;
-      });
-    });
-  }
-
   toggleCollapse(init) {
     if (!this.canCollapse) {
       return;
@@ -87,19 +77,16 @@ export class QueryRowCtrl {
       delete this.panelCtrl.__collapsedQueryCache[this.target.refId];
     }
 
-    this.panel.targets = _.without(this.panel.targets, this.target);
+    this.panelCtrl.removeQuery(this.target);
-    this.panelCtrl.refresh();
   }
 
   duplicateQuery() {
     var clone = angular.copy(this.target);
-    clone.refId = this.getNextQueryLetter();
+    this.panelCtrl.addQuery(clone);
-    this.panel.targets.push(clone);
   }
 
   moveQuery(direction) {
-    var index = _.indexOf(this.panel.targets, this.target);
+    this.panelCtrl.moveQuery(this.target, direction);
-    _.move(this.panel.targets, index, index + direction);
   }
 }
 

public/app/partials/metrics.html

@@ -2,10 +2,6 @@
 <div class="gf-form-group">
   <div class="gf-form-inline">
     <div class="gf-form">
-      <label class="gf-form-label">
-        <i class="icon-gf icon-gf-datasources"></i>
-      </label>
-
       <label class="gf-form-label">
         Data Source
       </label>
@@ -31,9 +27,9 @@
 				<span class="gf-form-query-letter-cell-carret">
 					<i class="fa fa-caret-down"></i>
 				</span>
-				<span class="gf-form-query-letter-cell-letter">{{ctrl.nextRefId}}</span>
+				<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span>
 			</label>
-					<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.current.meta.mixed">
+					<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed">
 						Add Query
 					</button>
 

public/sass/components/_gf-form.scss

@@ -118,6 +118,7 @@ $gf-form-margin: 0.25rem;
   padding: $input-padding-y $input-padding-x;
   margin-right: $gf-form-margin;
   font-size: $font-size-base;
+  margin-right: $gf-form-margin;
   line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;

public/sass/components/edit_sidemenu.scss

@@ -10,7 +10,6 @@
 }
 
 .edit-sidemenu-aside {
-  min-width: 6rem;
   margin-right: $spacer*2;
 }