feat(plugins): migrated cloudwatch and fixed a bunch of issues with data source edit views

public/app/plugins/datasource/cloudwatch/datasource.d.ts

@@ -1,3 +1,3 @@
-declare var Datasource: any;
+declare var CloudWatchDatasource: any;
-export default Datasource;
+export {CloudWatchDatasource};
 

public/app/plugins/datasource/cloudwatch/datasource.js

@@ -357,5 +357,7 @@ function (angular, _, moment, dateMath) {
 
   }
 
-  return CloudWatchDatasource;
+  return {
+    CloudWatchDatasource: CloudWatchDatasource
+  };
 });

public/app/plugins/datasource/cloudwatch/module.js

@@ -1,27 +0,0 @@
-define([
-  './datasource',
-  './query_parameter_ctrl',
-  './query_ctrl',
-],
-function (CloudWatchDatasource) {
-  'use strict';
-
-  function metricsQueryEditor() {
-    return {controller: 'CloudWatchQueryCtrl', templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.editor.html'};
-  }
-
-  function annotationsQueryEditor() {
-    return {templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html'};
-  }
-
-  function configView() {
-    return {templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/edit_view.html'};
-  }
-
-  return  {
-    Datasource: CloudWatchDatasource,
-    configView: configView,
-    annotationsQueryEditor: annotationsQueryEditor,
-    metricsQueryEditor: metricsQueryEditor,
-  };
-});

public/app/plugins/datasource/cloudwatch/module.ts

@@ -0,0 +1,20 @@
+import './query_parameter_ctrl';
+
+import {CloudWatchDatasource} from './datasource';
+import {CloudWatchQueryCtrl} from './query_ctrl';
+
+class CloudWatchConfigCtrl {
+  static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/config.html';
+}
+
+class CloudWatchAnnotationsQueryCtrl {
+  static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html';
+}
+
+export {
+  CloudWatchDatasource as Datasource,
+  CloudWatchQueryCtrl as QueryCtrl,
+  CloudWatchConfigCtrl as ConfigCtrl,
+  CloudWatchAnnotationsQueryCtrl as AnnotationsQueryCtrl,
+};
+

public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html

@@ -1 +1 @@
-<cloudwatch-query-parameter target="annotation" datasource="datasource"></cloudwatch-query-parameter>
+<cloudwatch-query-parameter target="ctrl.annotation" datasource="ctrl.datasource"></cloudwatch-query-parameter>

public/app/plugins/datasource/cloudwatch/partials/config.html

@@ -9,7 +9,7 @@
 					Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip>
 				</li>
 				<li>
-					<input type="text" class="tight-form-input input-large last" ng-model='current.database' placeholder="default"></input>
+					<input type="text" class="tight-form-input input-large last" ng-model='ctrl.current.database' placeholder="default"></input>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
@@ -24,7 +24,7 @@
           Please update the region list in pkg/api/cloudwatch/metric.go
 				-->
         <li>
-          <select class="tight-form-input input-large last" ng-model="current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select>
+          <select class="tight-form-input input-large last" ng-model="ctrl.current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select>
 				</li>
 			</ul>
 			<div class="clearfix"></div>

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

@@ -1,38 +1,4 @@
-<div class="tight-form">
+<query-editor-row ctrl="ctrl">
-	<ul class="tight-form-list pull-right">
+</query-editor-row>
-		<li class="tight-form-item">
-			<div class="dropdown">
-				<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
-					<i class="fa fa-bars"></i>
-				</a>
-				<ul class="dropdown-menu pull-right" role="menu">
-					<li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateDataQuery(target)">Duplicate</a></li>
-					<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveDataQuery($index, $index-1)">Move up</a></li>
-					<li role="menuitem"><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="ctrl.removeDataQuery(target)">
-				<i class="fa fa-remove"></i>
-			</a>
-		</li>
-	</ul>
 
-	<ul class="tight-form-list">
+<cloudwatch-query-parameter target="ctrl.target" datasource="ctrl.datasource" on-change="ctrl.refresh()"></cloudwatch-query-parameter>
-		<li class="tight-form-item" style="min-width: 15px; text-align: center">
-			{{target.refId}}
-		</li>
-		<li>
-			<a  class="tight-form-item"
-				ng-click="target.hide = !target.hide; ctrl.refresh();"
-				role="menuitem">
-				<i class="fa fa-eye"></i>
-			</a>
-		</li>
-	</ul>
-
-	<div class="clearfix"></div>
-</div>
-
-<cloudwatch-query-parameter target="target" datasource="ctrl.datasource" on-change="refreshMetricData()"></cloudwatch-query-parameter>

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

@@ -1,27 +0,0 @@
-define([
-  'angular',
-  'lodash',
-],
-function (angular, _) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('CloudWatchQueryCtrl', function($scope) {
-
-    $scope.init = function() {
-      $scope.aliasSyntax = '{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}';
-    };
-
-    $scope.refreshMetricData = function() {
-      if (!_.isEqual($scope.oldTarget, $scope.target)) {
-        $scope.oldTarget = angular.copy($scope.target);
-        $scope.ctrl.refresh();
-      }
-    };
-
-    $scope.init();
-
-  });
-
-});

public/app/plugins/datasource/cloudwatch/query_ctrl.ts

@@ -0,0 +1,17 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import './query_parameter_ctrl';
+import _ from 'lodash';
+import {QueryCtrl} from 'app/features/panel/panel';
+
+export class CloudWatchQueryCtrl extends QueryCtrl {
+  static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/query.editor.html';
+
+  aliasSyntax: string;
+
+  /** @ngInject **/
+  constructor($scope, $injector) {
+    super($scope, $injector);
+    this.aliasSyntax = '{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}';
+  }
+}

public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.js

@@ -9,7 +9,7 @@ function (angular, _) {
 
   module.directive('cloudwatchQueryParameter', function() {
     return {
-      templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.parameter.html',
+      templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html',
       controller: 'CloudWatchQueryParameterCtrl',
       restrict: 'E',
       scope: {

public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts

@@ -3,7 +3,7 @@ import "../datasource";
 import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common';
 import moment from 'moment';
 import helpers from 'test/specs/helpers';
-import Datasource from "../datasource";
+import {CloudWatchDatasource} from "../datasource";
 
 describe('CloudWatchDatasource', function() {
   var ctx = new helpers.ServiceTestContext();
@@ -20,7 +20,7 @@ describe('CloudWatchDatasource', function() {
     ctx.$q = $q;
     ctx.$httpBackend =  $httpBackend;
     ctx.$rootScope = $rootScope;
-    ctx.ds = $injector.instantiate(Datasource, {instanceSettings: instanceSettings});
+    ctx.ds = $injector.instantiate(CloudWatchDatasource, {instanceSettings: instanceSettings});
   }));
 
   describe('When performing CloudWatch query', function() {

public/app/plugins/datasource/elasticsearch/config_ctrl.ts

@@ -0,0 +1,34 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+
+export class ElasticConfigCtrl {
+  static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/config.html';
+  current: any;
+
+  /** @ngInject */
+  constructor($scope) {
+    this.current.jsonData.timeField = this.current.jsonData.timeField || '@timestamp';
+  }
+
+  indexPatternTypes = [
+    {name: 'No pattern',  value: undefined},
+    {name: 'Hourly',      value: 'Hourly',  example: '[logstash-]YYYY.MM.DD.HH'},
+    {name: 'Daily',       value: 'Daily',   example: '[logstash-]YYYY.MM.DD'},
+    {name: 'Weekly',      value: 'Weekly',  example: '[logstash-]GGGG.WW'},
+    {name: 'Monthly',     value: 'Monthly', example: '[logstash-]YYYY.MM'},
+    {name: 'Yearly',      value: 'Yearly',  example: '[logstash-]YYYY'},
+  ];
+
+  esVersions = [
+    {name: '1.x', value: 1},
+    {name: '2.x', value: 2},
+  ];
+
+  indexPatternTypeChanged() {
+    var def = _.findWhere(this.indexPatternTypes, {value: this.current.jsonData.interval});
+    this.current.database = def.example || 'es-index-name';
+  }
+}
+

public/app/plugins/datasource/elasticsearch/edit_view.ts

@@ -1,39 +0,0 @@
-///<reference path="../../../headers/common.d.ts" />
-
-import angular from 'angular';
-import _ from 'lodash';
-
-export class EditViewCtrl {
-
-  /** @ngInject */
-  constructor($scope) {
-    $scope.indexPatternTypes = [
-      {name: 'No pattern',  value: undefined},
-      {name: 'Hourly',      value: 'Hourly',  example: '[logstash-]YYYY.MM.DD.HH'},
-      {name: 'Daily',       value: 'Daily',   example: '[logstash-]YYYY.MM.DD'},
-      {name: 'Weekly',      value: 'Weekly',  example: '[logstash-]GGGG.WW'},
-      {name: 'Monthly',     value: 'Monthly', example: '[logstash-]YYYY.MM'},
-      {name: 'Yearly',      value: 'Yearly',  example: '[logstash-]YYYY'},
-    ];
-
-    $scope.esVersions = [
-      {name: '1.x', value: 1},
-      {name: '2.x', value: 2},
-    ];
-
-    $scope.indexPatternTypeChanged = function() {
-      var def = _.findWhere($scope.indexPatternTypes, {value: $scope.current.jsonData.interval});
-      $scope.current.database = def.example || 'es-index-name';
-    };
-  }
-}
-
-function editViewDirective() {
-  return {
-    templateUrl: 'public/app/plugins/datasource/elasticsearch/partials/edit_view.html',
-    controller: EditViewCtrl,
-  };
-};
-
-
-export default editViewDirective;

public/app/plugins/datasource/elasticsearch/module.ts

@@ -1,9 +1,6 @@
 import {ElasticDatasource} from './datasource';
 import {ElasticQueryCtrl} from './query_ctrl';
-
+import {ElasticConfigCtrl} from './config_ctrl';
-class ElasticConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/config.html';
-}
 
 class ElasticQueryOptionsCtrl {
   static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/query.options.html';

public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html

@@ -1,14 +1,14 @@
 <div class="editor-row">
-	<div class="section" ng-if="annotation.index">
+	<div class="section" ng-if="ctrl.annotation.index">
 		<h5>Index name</h5>
 		<div class="editor-option">
-			<input type="text" class="span4" ng-model='annotation.index' placeholder="events-*"></input>
+			<input type="text" class="span4" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
 		</div>
 	</div>
 	<div class="section">
 		<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5>
 		<div class="editor-option">
-			<input type="text" class="span6" ng-model='annotation.query' placeholder="tags:deploy"></input>
+			<input type="text" class="span6" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
 		</div>
 	</div>
 </div>
@@ -18,22 +18,22 @@
 		<h5>Field mappings</h5>
 		<div class="editor-option">
 			<label class="small">Time</label>
-			<input type="text" class="input-small" ng-model='annotation.timeField' placeholder="@timestamp"></input>
+			<input type="text" class="input-small" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
 		</div>
 
 		<div class="editor-option">
 			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='annotation.titleField' placeholder="desc"></input>
+			<input type="text" class="input-small" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
 		</div>
 
 		<div class="editor-option">
 			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='annotation.tagsField' placeholder="tags"></input>
+			<input type="text" class="input-small" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
 		</div>
 
 		<div class="editor-option">
 			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='annotation.textField' placeholder=""></input>
+			<input type="text" class="input-small" ng-model='ctrl.annotation.textField' placeholder=""></input>
 		</div>
 	</div>
 </div>

public/app/plugins/datasource/elasticsearch/partials/config.html

@@ -1,4 +1,5 @@
-<datasource-http-settings></datasource-http-settings>
+<datasource-http-settings current="ctrl.current">
+</datasource-http-settings>
 
 <h4>Elasticsearch details</h4>
 
@@ -8,13 +9,13 @@
 			Index name
 		</li>
 		<li>
-			<input type="text" class="tight-form-input input-xlarge" ng-model='current.database' placeholder="" required></input>
+			<input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.database' placeholder="" required></input>
 		</li>
 		<li class="tight-form-item">
 			Pattern
 		</li>
 		<li>
-			<select class="input-medium tight-form-input" ng-model="current.jsonData.interval" ng-options="f.value as f.name for f in indexPatternTypes" ng-change="indexPatternTypeChanged()" ></select>
+			<select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
 		</li>
 	</ul>
 	<div class="clearfix"></div>
@@ -25,7 +26,7 @@
 			Time field name
 		</li>
 		<li>
-			<input type="text" class="tight-form-input input-xlarge" ng-model='current.jsonData.timeField' placeholder="" required ng-init="current.jsonData.timeField = current.jsonData.timeField || '@timestamp'"></input>
+			<input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
 		</li>
 	</ul>
 	<div class="clearfix"></div>
@@ -36,7 +37,7 @@
 			Version
 		</li>
 		<li>
-			<select class="input-medium tight-form-input" ng-model="current.jsonData.esVersion" ng-options="f.value as f.name for f in esVersions"></select>
+			<select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
 		</li>
 	</ul>
 	<div class="clearfix"></div>
@@ -52,7 +53,7 @@
 			Group by time interval
 		</li>
 		<li>
-			<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="current.jsonData.timeInterval"
+			<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="ctrl.current.jsonData.timeInterval"
 			spellcheck='false' placeholder="example: >10s">
 		</li>
 		<li class="tight-form-item">

public/app/plugins/datasource/influxdb/partials/config.html

@@ -1,4 +1,5 @@
-<datasource-http-settings></datasource-http-settings>
+<datasource-http-settings current="ctrl.current">
+</datasource-http-settings>
 
 <h4>InfluxDB Details</h4>
 
@@ -8,7 +9,7 @@
 			Database
 		</li>
 		<li>
-			<input type="text" class="tight-form-input input-large" ng-model='current.database' placeholder="" required></input>
+			<input type="text" class="tight-form-input input-large" ng-model='ctrl.current.database' placeholder="" required></input>
 		</li>
 	</ul>
 	<div class="clearfix"></div>
@@ -19,13 +20,13 @@
 			User
 		</li>
 		<li>
-			<input type="text" class="tight-form-input input-large" ng-model='current.user' placeholder="" required></input>
+			<input type="text" class="tight-form-input input-large" ng-model='ctrl.current.user' placeholder="" required></input>
 		</li>
 		<li class="tight-form-item">
 			Password
 		</li>
 		<li>
-			<input type="password" class="tight-form-input input-large" ng-model='current.password' placeholder="" required></input>
+			<input type="password" class="tight-form-input input-large" ng-model='ctrl.current.password' placeholder="" required></input>
 		</li>
 	</ul>
 	<div class="clearfix"></div>

public/less/panel.less

@@ -86,7 +86,6 @@
 }
 
 .panel-fullscreen {
-  margin: 5px 20px;
   .panel-title-container {
     padding: 8px;
   }