feat(panels): updated influxdb editor to use panelCtrl

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

@@ -35,7 +35,7 @@
 				{{target.refId}}
 			</li>
 			<li>
-				<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" 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>
@@ -60,7 +60,7 @@
 		</ul>
 
 		<div class="tight-form-flex-wrapper" ng-show="target.rawQuery">
-			<input type="text" class="tight-form-clear-input" ng-model="target.query" spellcheck="false" style="width: 100%;" ng-blur="get_data()"></input>
+			<input type="text" class="tight-form-clear-input" ng-model="target.query" spellcheck="false" style="width: 100%;" ng-blur="panelCtrl.refresh()"></input>
 		</div>
 
 		<div class="clearfix"></div>
@@ -88,7 +88,7 @@
 					<span>GROUP BY</span>
 				</li>
 				<li ng-repeat="part in queryModel.groupByParts">
-					<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="removeGroupByPart(part, $index)" part-updated="get_data();" get-options="getPartOptions(part)"></influx-query-part-editor>
+					<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="removeGroupByPart(part, $index)" part-updated="panelCtrl.refresh();" get-options="getPartOptions(part)"></influx-query-part-editor>
 				</li>
 				<li>
 					<metric-segment segment="groupBySegment" get-options="getGroupByOptions()" on-change="groupByAction(part, $index)"></metric-segment>
@@ -104,13 +104,13 @@
 				ALIAS BY
 			</li>
 			<li>
-				<input type="text" class="tight-form-clear-input input-xlarge" ng-model="target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="get_data()">
+				<input type="text" class="tight-form-clear-input input-xlarge" ng-model="target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="panelCtrl.refresh()">
 			</li>
 			<li class="tight-form-item">
 				Format as
 			</li>
 			<li>
-				<select class="input-small tight-form-input" style="width: 104px" ng-model="target.resultFormat" ng-options="f.value as f.text for f in resultFormats" ng-change="get_data()"></select>
+				<select class="input-small tight-form-input" style="width: 104px" ng-model="target.resultFormat" ng-options="f.value as f.text for f in resultFormats" ng-change="panelCtrl.refresh()"></select>
 			</li>
 		</ul>
 		<div class="clearfix"></div>

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

@@ -8,7 +8,7 @@
 				 Group by time interval
 			</li>
 			<li>
-				<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
+				<input type="text" class="input-medium tight-form-input" ng-model="ctrl.panel.interval" ng-blur="ctrl.refresh();"
 				spellcheck='false' placeholder="example: >10s">
 			</li>
 			<li class="tight-form-item">
@@ -24,17 +24,17 @@
 				<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">
 					alias patterns
 				</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">
 					stacking &amp; and fill
 				</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">
 					group by time
 				</a>
 			</li>
@@ -46,7 +46,7 @@
 <div class="editor-row">
 	<div class="pull-left" style="margin-top: 30px;">
 
-		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 1">
+		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 1">
 			<h5>Alias patterns</h5>
 			<ul>
 				<li>$m = replaced with measurement name</li>
@@ -58,7 +58,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 2">
+		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 2">
 			<h5>Stacking and fill</h5>
 			<ul>
 				<li>When stacking is enabled it important that points align</li>
@@ -69,7 +69,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>Group by time</h5>
 			<ul>
 				<li>Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana</li>
@@ -80,8 +80,6 @@
 				<li>Example: &gt;60s if you write metrics to InfluxDB every 60 seconds</li>
 			</ul>
 		</div>
-
-
 	</div>
 </div>
 

public/app/plugins/datasource/influxdb/query_ctrl.js

@@ -15,13 +15,15 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
   queryPart = queryPart.default;
 
   module.controller('InfluxQueryCtrl', function($scope, templateSrv, $q, uiSegmentSrv) {
+    var panelCtrl = $scope.ctrl;
+    $scope.panelCtrl = panelCtrl;
 
     $scope.init = function() {
       if (!$scope.target) { return; }
 
       $scope.target = $scope.target;
       $scope.queryModel = new InfluxQuery($scope.target);
-      $scope.queryBuilder = new InfluxQueryBuilder($scope.target, $scope.datasource.database);
+      $scope.queryBuilder = new InfluxQueryBuilder($scope.target, panelCtrl.datasource.database);
       $scope.groupBySegment = uiSegmentSrv.newPlusButton();
       $scope.resultFormats = [
          {text: 'Time series', value: 'time_series'},
@@ -75,7 +77,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
     $scope.getGroupByOptions = function() {
       var query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
 
-      return $scope.datasource.metricFindQuery(query)
+      return panelCtrl.datasource.metricFindQuery(query)
       .then(function(tags) {
         var options = [];
         if (!$scope.queryModel.hasFill()) {
@@ -97,26 +99,26 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
       var plusButton = uiSegmentSrv.newPlusButton();
       $scope.groupBySegment.value  = plusButton.value;
       $scope.groupBySegment.html  = plusButton.html;
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.removeGroupByPart = function(part, index) {
       $scope.queryModel.removeGroupByPart(part, index);
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.addSelectPart = function(selectParts, cat, subitem) {
       $scope.queryModel.addSelectPart(selectParts, subitem.value);
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.removeSelectPart = function(selectParts, part) {
       $scope.queryModel.removeSelectPart(selectParts, part);
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.selectPartUpdated = function() {
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.fixTagSegments = function() {
@@ -130,19 +132,19 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
 
     $scope.measurementChanged = function() {
       $scope.target.measurement = $scope.measurementSegment.value;
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.getPolicySegments = function() {
       var policiesQuery = $scope.queryBuilder.buildExploreQuery('RETENTION POLICIES');
-      return $scope.datasource.metricFindQuery(policiesQuery)
+      return panelCtrl.datasource.metricFindQuery(policiesQuery)
       .then($scope.transformToSegments(false))
       .then(null, $scope.handleQueryError);
     };
 
     $scope.policyChanged = function() {
       $scope.target.policy = $scope.policySegment.value;
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.toggleQueryMode = function () {
@@ -151,19 +153,19 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
 
     $scope.getMeasurements = function () {
       var query = $scope.queryBuilder.buildExploreQuery('MEASUREMENTS');
-      return $scope.datasource.metricFindQuery(query)
+      return panelCtrl.datasource.metricFindQuery(query)
       .then($scope.transformToSegments(true), $scope.handleQueryError);
     };
 
     $scope.getPartOptions = function(part) {
       if (part.def.type === 'field') {
         var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
-        return $scope.datasource.metricFindQuery(fieldsQuery)
+        return panelCtrl.datasource.metricFindQuery(fieldsQuery)
         .then($scope.transformToSegments(true), $scope.handleQueryError);
       }
       if (part.def.type === 'tag') {
         var tagsQuery = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
-        return $scope.datasource.metricFindQuery(tagsQuery)
+        return panelCtrl.datasource.metricFindQuery(tagsQuery)
         .then($scope.transformToSegments(true), $scope.handleQueryError);
       }
     };
@@ -211,7 +213,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
         addTemplateVars = true;
       }
 
-      return $scope.datasource.metricFindQuery(query)
+      return panelCtrl.datasource.metricFindQuery(query)
       .then($scope.transformToSegments(addTemplateVars))
       .then(function(results) {
         if (segment.type === 'key') {
@@ -224,7 +226,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
 
     $scope.getFieldSegments = function() {
       var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
-      return $scope.datasource.metricFindQuery(fieldsQuery)
+      return panelCtrl.datasource.metricFindQuery(fieldsQuery)
       .then($scope.transformToSegments(false))
       .then(null, $scope.handleQueryError);
     };
@@ -234,7 +236,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
 
     $scope.setFill = function(fill) {
       $scope.target.fill = fill;
-      $scope.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.tagSegmentUpdated = function(segment, index) {
@@ -300,7 +302,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
       });
 
       $scope.target.tags = tags;
-      $scope.$parent.get_data();
+      panelCtrl.refresh();
     };
 
     $scope.getTagValueOperator = function(tagValue, tagOperator) {

public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts

@@ -10,14 +10,20 @@ describe('InfluxDBQueryCtrl', function() {
   beforeEach(angularMocks.module('grafana.controllers'));
   beforeEach(angularMocks.module('grafana.services'));
   beforeEach(ctx.providePhase());
-  beforeEach(ctx.createControllerPhase('InfluxQueryCtrl'));
+
+  beforeEach(angularMocks.inject(($rootScope, $controller, $q) => {
+    ctx.$q = $q;
+    ctx.scope = $rootScope.$new();
+    ctx.scope.ctrl = {panel: ctx.panel};
+    ctx.panelCtrl = ctx.scope.ctrl;
+    ctx.controller = $controller('InfluxQueryCtrl', {$scope: ctx.scope});
+  }));
 
   beforeEach(function() {
     ctx.scope.target = {};
-    ctx.scope.$parent = { get_data: sinon.spy() };
-
-    ctx.scope.datasource = ctx.datasource;
-    ctx.scope.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([]));
+    ctx.panelCtrl.refresh = sinon.spy();
+    ctx.panelCtrl.datasource = ctx.datasource;
+    ctx.panelCtrl.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([]));
   });
 
   describe('init', function() {

public/test/specs/helpers.js

@@ -44,7 +44,7 @@ define([
         self.$browser = $browser;
         self.$q = $q;
         self.panel = {type: 'test'};
-        self.dashboard = {};
+        self.dashboard = {meta: {}};
 
         $rootScope.appEvent = sinon.spy();
         $rootScope.onAppEvent = sinon.spy();
@@ -67,7 +67,7 @@ define([
         self.scope.contextSrv = {};
         self.scope.panel = {};
         self.scope.row = { panels:[] };
-        self.scope.dashboard = {};
+        self.scope.dashboard = {meta: {}};
         self.scope.dashboardMeta = {};
         self.scope.dashboardViewState = new DashboardViewStateStub();
         self.scope.appEvent = sinon.spy();