feat(plugins): refactored datasourceEditCtrl to typescript, #4298

public/app/core/directives/plugin_component.ts

@@ -148,12 +148,13 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
       }
       // ConfigCtrl
       case 'datasource-config-ctrl': {
-        return System.import(scope.datasourceMeta.module).then(function(dsModule) {
+        var dsMeta = scope.ctrl.datasourceMeta;
+        return System.import(dsMeta.module).then(function(dsModule) {
           return {
-            baseUrl: scope.datasourceMeta.baseUrl,
-            name: 'ds-config-' + scope.datasourceMeta.id,
+            baseUrl: dsMeta.baseUrl,
+            name: 'ds-config-' + dsMeta.id,
             bindings: {meta: "=", current: "="},
-            attrs: {meta: "datasourceMeta", current: "current"},
+            attrs: {meta: "ctrl.datasourceMeta", current: "ctrl.current"},
             Component: dsModule.ConfigCtrl,
           };
         });

public/app/core/routes/routes.ts

@@ -57,6 +57,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/datasources/edit/:id', {
     templateUrl: 'public/app/features/datasources/partials/edit.html',
     controller : 'DataSourceEditCtrl',
+    controllerAs: 'ctrl',
     resolve: loadOrgBundle,
   })
   .when('/datasources/new', {

public/app/features/datasources/edit_ctrl.js

@@ -1,129 +0,0 @@
-define([
-  'angular',
-  'lodash',
-  'app/core/config',
-],
-function (angular, _, config) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-  var datasourceTypes = [];
-
-  module.directive('datasourceHttpSettings', function() {
-    return {
-      scope: {current: "="},
-      templateUrl: 'public/app/features/datasources/partials/http_settings.html'
-    };
-  });
-
-  module.controller('DataSourceEditCtrl', function($scope, $q, backendSrv, $routeParams, $location, datasourceSrv) {
-
-    var defaults = {
-      name: '',
-      type: 'graphite',
-      url: '',
-      access: 'proxy',
-      jsonData: {}
-    };
-
-    $scope.init = function() {
-      $scope.isNew = true;
-      $scope.datasources = [];
-
-      $scope.loadDatasourceTypes().then(function() {
-        if ($routeParams.id) {
-          $scope.getDatasourceById($routeParams.id);
-        } else {
-          $scope.current = angular.copy(defaults);
-          $scope.typeChanged();
-        }
-      });
-    };
-
-    $scope.loadDatasourceTypes = function() {
-      if (datasourceTypes.length > 0) {
-        $scope.types = datasourceTypes;
-        return $q.when(null);
-      }
-
-      return backendSrv.get('/api/org/plugins', {enabled: 1, type: 'datasource'}).then(function(plugins) {
-        datasourceTypes = plugins;
-        $scope.types = plugins;
-      });
-    };
-
-    $scope.getDatasourceById = function(id) {
-      backendSrv.get('/api/datasources/' + id).then(function(ds) {
-        $scope.isNew = false;
-        $scope.current = ds;
-        return $scope.typeChanged();
-      });
-    };
-
-    $scope.typeChanged = function() {
-      return backendSrv.get('/api/org/plugins/' + $scope.current.type + '/settings').then(function(pluginInfo) {
-        $scope.datasourceMeta = pluginInfo;
-      });
-    };
-
-    $scope.updateFrontendSettings = function() {
-      return backendSrv.get('/api/frontend/settings').then(function(settings) {
-        config.datasources = settings.datasources;
-        config.defaultDatasource = settings.defaultDatasource;
-        datasourceSrv.init();
-      });
-    };
-
-    $scope.testDatasource = function() {
-      $scope.testing = { done: false };
-
-      datasourceSrv.get($scope.current.name).then(function(datasource) {
-        if (!datasource.testDatasource) {
-          $scope.testing.message = 'Data source does not support test connection feature.';
-          $scope.testing.status = 'warning';
-          $scope.testing.title = 'Unknown';
-          return;
-        }
-
-        return datasource.testDatasource().then(function(result) {
-          $scope.testing.message = result.message;
-          $scope.testing.status = result.status;
-          $scope.testing.title = result.title;
-        }, function(err) {
-          if (err.statusText) {
-            $scope.testing.message = err.statusText;
-            $scope.testing.title = "HTTP Error";
-          } else {
-            $scope.testing.message = err.message;
-            $scope.testing.title = "Unknown error";
-          }
-        });
-      }).finally(function() {
-        $scope.testing.done = true;
-      });
-    };
-
-    $scope.saveChanges = function(test) {
-      if (!$scope.editForm.$valid) {
-        return;
-      }
-
-      if ($scope.current.id) {
-        return backendSrv.put('/api/datasources/' + $scope.current.id, $scope.current).then(function() {
-          $scope.updateFrontendSettings().then(function() {
-            if (test) {
-              $scope.testDatasource();
-            }
-          });
-        });
-      } else {
-        return backendSrv.post('/api/datasources', $scope.current).then(function(result) {
-          $scope.updateFrontendSettings();
-          $location.path('datasources/edit/' + result.id);
-        });
-      }
-    };
-
-    $scope.init();
-  });
-});

public/app/features/datasources/edit_ctrl.ts

@@ -0,0 +1,140 @@
+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+import coreModule from 'app/core/core_module';
+import config from 'app/core/config';
+
+var datasourceTypes = [];
+
+var defaults = {
+  name: '',
+  type: 'graphite',
+  url: '',
+  access: 'proxy',
+  jsonData: {}
+};
+
+export class DataSourceEditCtrl {
+  isNew: boolean;
+  datasources: any[];
+  current: any;
+  types: any;
+  testing: any;
+  datasourceMeta: any;
+
+  /** @ngInject */
+  constructor(
+    private $scope,
+    private $q,
+    private backendSrv,
+    private $routeParams,
+    private $location,
+    private datasourceSrv) {
+
+      this.isNew = true;
+      this.datasources = [];
+
+      this.loadDatasourceTypes().then(() => {
+        if (this.$routeParams.id) {
+          this.getDatasourceById(this.$routeParams.id);
+        } else {
+          this.current = angular.copy(defaults);
+          this.typeChanged();
+        }
+      });
+    }
+
+    loadDatasourceTypes() {
+      if (datasourceTypes.length > 0) {
+        this.types = datasourceTypes;
+        return this.$q.when(null);
+      }
+
+      return this.backendSrv.get('/api/org/plugins', {enabled: 1, type: 'datasource'}).then(plugins => {
+        datasourceTypes = plugins;
+        this.types = plugins;
+      });
+    }
+
+    getDatasourceById(id) {
+      this.backendSrv.get('/api/datasources/' + id).then(ds => {
+        this.isNew = false;
+        this.current = ds;
+        return this.typeChanged();
+      });
+    }
+
+    typeChanged() {
+      return this.backendSrv.get('/api/org/plugins/' + this.current.type + '/settings').then(pluginInfo => {
+        this.datasourceMeta = pluginInfo;
+      });
+    }
+
+    updateFrontendSettings() {
+      return this.backendSrv.get('/api/frontend/settings').then(settings => {
+        config.datasources = settings.datasources;
+        config.defaultDatasource = settings.defaultDatasource;
+        this.datasourceSrv.init();
+      });
+    }
+
+    testDatasource() {
+      this.testing = { done: false };
+
+      this.datasourceSrv.get(this.current.name).then(datasource => {
+        if (!datasource.testDatasource) {
+          this.testing.message = 'Data source does not support test connection feature.';
+          this.testing.status = 'warning';
+          this.testing.title = 'Unknown';
+          return;
+        }
+
+        return datasource.testDatasource().then(result => {
+          this.testing.message = result.message;
+          this.testing.status = result.status;
+          this.testing.title = result.title;
+        }).catch(err => {
+          if (err.statusText) {
+            this.testing.message = err.statusText;
+            this.testing.title = "HTTP Error";
+          } else {
+            this.testing.message = err.message;
+            this.testing.title = "Unknown error";
+          }
+        });
+      }).finally(() => {
+        this.testing.done = true;
+      });
+    }
+
+    saveChanges(test) {
+      if (!this.$scope.editForm.$valid) {
+        return;
+      }
+
+      if (this.current.id) {
+        return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(() => {
+          this.updateFrontendSettings().then(() => {
+            if (test) {
+              this.testDatasource();
+            }
+          });
+        });
+      } else {
+        return this.backendSrv.post('/api/datasources', this.current).then(result => {
+          this.updateFrontendSettings();
+          this.$location.path('datasources/edit/' + result.id);
+        });
+      }
+    };
+}
+
+coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl);
+
+coreModule.directive('datasourceHttpSettings', function() {
+  return {
+    scope: {current: "="},
+    templateUrl: 'public/app/features/datasources/partials/http_settings.html'
+  };
+});

public/app/features/datasources/partials/edit.html

@@ -1,43 +1,58 @@
-<navbar
-title="Data Sources"
-title-url="datasources"
-icon="icon-gf icon-gf-datasources">
+<navbar title="Data Sources" title-url="datasources" icon="icon-gf icon-gf-datasources">
 </navbar>
 
 <div class="page-container">
-	<div class="page-header">
+
+  <div class="page-header">
 		<h1 ng-show="isNew">Add data source</h1>
 		<h1 ng-show="!isNew">Edit data source</h1>
+
+		<div class="page-header-tabs">
+
+			<ul class="gf-tabs">
+				<li class="gf-tabs-item">
+					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
+					  Config
+					</a>
+				</li>
+				<li class="gf-tabs-item" ng-show="ctrl.hasDashboards" ng-cloak>
+					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
+					  Dashboards
+					</a>
+				</li>
+			</ul>
+		</div>
 	</div>
 
+
 	<form name="editForm">
 		<div class="gf-form-group">
 			<div class="gf-form">
 				<span class="gf-form-label width-7">Name</span>
-				<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
+				<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
 				<info-popover offset="0px -95px">
 					The name is used when you select the data source in panels.
 					The <code>Default</code> data source is preselected in new
 					panels.
 				</info-popover>
 
-				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
+				<editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox>
 			</div>
 
 			<div class="gf-form">
 				<span class="gf-form-label width-7">Type</span>
 				<div class="gf-form-select-wrapper">
-					<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="v.id as v.name for v in types" ng-change="typeChanged()"></select>
+					<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
 				</div>
 			</div>
 		</div>
 
 
-		<rebuild-on-change property="datasourceMeta.id">
+		<rebuild-on-change property="ctrl.datasourceMeta.id">
 			<plugin-component type="datasource-config-ctrl">
 			</plugin-component>
 
-			<dashboard-import-list plugin="datasourceMeta"></dashboard-import-list>
+			<dashboard-import-list plugin="ctrl.datasourceMeta"></dashboard-import-list>
 		</rebuild-on-change>
 
 		<div ng-if="testing" style="margin-top: 25px">
@@ -50,9 +65,9 @@ icon="icon-gf icon-gf-datasources">
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
-			<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
-			<button type="submit" class="btn btn-secondary" ng-show="!isNew" ng-click="saveChanges(true)">
+			<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
+			<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
+			<button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
 				Test Connection
 			</button>
 			<a class="btn btn-link" href="datasources">Cancel</a>