feat(panels): fixes

public/app/features/panel/metrics_panel_ctrl.ts

@@ -192,7 +192,43 @@ class MetricsPanelCtrl extends PanelCtrl {
       return results;
     });
   }
+
+  addDataQuery(datasource) {
+    this.dashboard.addDataQueryTo(this.panel, datasource);
+  }
+
+  removeDataQuery(query) {
+    this.dashboard.removeDataQuery(this.panel, query);
+    this.refresh();
+  };
+
+  duplicateDataQuery(query) {
+    this.dashboard.duplicateDataQuery(this.panel, query);
+  }
+
+  moveDataQuery(fromIndex, toIndex) {
+    this.dashboard.moveDataQuery(this.panel, fromIndex, toIndex);
+  }
+
+  setDatasource(datasource) {
+    // switching to mixed
+    if (datasource.meta.mixed) {
+      _.each(this.panel.targets, target => {
+        target.datasource = this.panel.datasource;
+        if (target.datasource === null) {
+          target.datasource = config.defaultDatasource;
+        }
+      });
+    } else if (this.datasource && this.datasource.meta.mixed) {
+      _.each(this.panel.targets, target => {
+        delete target.datasource;
+      });
+    }
+
+    this.panel.datasource = datasource.value;
+    this.datasource = null;
+    this.refresh();
+  }
 }
 
 export {MetricsPanelCtrl};
-

public/app/features/panel/panel_ctrl.ts

@@ -16,6 +16,7 @@ export class PanelCtrl {
   fullscreen: boolean;
   inspector: any;
   editModeInitiated: boolean;
+  editorHelpIndex: number;
 
   constructor($scope, $injector) {
     var plugin = config.panels[this.panel.type];
@@ -100,4 +101,13 @@ export class PanelCtrl {
   broadcastRender(arg1?, arg2?) {
     this.$scope.$broadcast('render', arg1, arg2);
   }
+
+ toggleEditorHelp(index) {
+   if (this.editorHelpIndex === index) {
+     this.editorHelpIndex = null;
+     return;
+   }
+   this.editorHelpIndex = index;
+ }
+
 }

public/app/plugins/datasource/graphite/partials/query.editor.html

@@ -25,19 +25,19 @@
 						</a>
 					</li>
 					<li role="menuitem">
-						<a tabindex="1" ng-click="duplicateDataQuery(target)">Duplicate</a>
+						<a tabindex="1" ng-click="ctrl.duplicateDataQuery(target)">Duplicate</a>
 					</li>
 					<li role="menuitem">
-						<a tabindex="1" ng-click="moveDataQuery($index, $index-1)">Move up</a>
+						<a tabindex="1" ng-click="ctrl.moveDataQuery($index, $index-1)">Move up</a>
 					</li>
 					<li role="menuitem">
-						<a tabindex="1" ng-click="moveDataQuery($index, $index+1)">Move down</a>
+						<a tabindex="1" ng-click="ctrl.moveDataQuery($index, $index+1)">Move down</a>
 					</li>
 				</ul>
 			</div>
 		</li>
 		<li class="tight-form-item last">
-			<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+			<a class="pointer" tabindex="1" ng-click="ctrl.removeDataQuery(target)">
 				<i class="fa fa-remove"></i>
 			</a>
 		</li>
@@ -48,7 +48,7 @@
 			{{target.refId}}
 		</li>
 		<li>
-			<a class="tight-form-item" ng-click="target.hide = !target.hide; panelCtrl.getData();" role="menuitem">
+			<a class="tight-form-item" ng-click="target.hide = !target.hide; panelCtrl.refresh();" role="menuitem">
 				<i class="fa fa-eye"></i>
 			</a>
 		</li>

public/app/plugins/datasource/graphite/partials/query.options.html

@@ -11,7 +11,7 @@
 			<li>
 				<input type="text"
 					class="input-mini tight-form-input"
-					ng-model="panel.cacheTimeout"
+					ng-model="ctrl.panel.cacheTimeout"
 					bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
 					data-placement="right"
 					spellcheck='false'
@@ -23,10 +23,10 @@
 			<li>
 				<input type="text"
 					class="input-mini tight-form-input"
-					ng-model="panel.maxDataPoints"
+					ng-model="ctrl.panel.maxDataPoints"
 					bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
 					data-placement="right"
-					ng-model-onblur ng-change="get_data()"
+					ng-model-onblur ng-change="ctrl.refresh()"
 					spellcheck='false'
 					placeholder="auto"></input>
 			</li>
@@ -39,27 +39,27 @@
 				<i class="fa fa-info-circle"></i>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					shorter legend names
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					series as parameters
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					stacking
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					templating
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					max data points
 				</a>
 			</li>
@@ -71,7 +71,7 @@
 <div class="editor-row">
 	<div class="pull-left" style="margin-top: 30px;">
 
-		<div class="grafana-info-box span8" ng-if="editorHelpIndex === 1">
+		<div class="grafana-info-box span8" ng-if="ctrl.editorHelpIndex === 1">
 			<h5>Shorter legend names</h5>
 			<ul>
 				<li>alias() function to specify a custom series name</li>
@@ -81,7 +81,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span8" ng-if="editorHelpIndex === 2">
+		<div class="grafana-info-box span8" ng-if="ctrl.editorHelpIndex === 2">
 			<h5>Series as parameter</h5>
 			<ul>
 				<li>Some graphite functions allow you to have many series arguments</li>
@@ -99,7 +99,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
+		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 3">
 			<h5>Stacking</h5>
 			<ul>
 				<li>You find the stacking option under Display Styles tab</li>
@@ -107,7 +107,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 4">
+		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 4">
 			<h5>Templating</h5>
 			<ul>
 				<li>You can use a template variable in place of metric names</li>
@@ -116,7 +116,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 5">
+		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 5">
 			<h5>Max data points</h5>
 			<ul>
 				<li>Every graphite request is issued with a maxDataPoints parameter</li>