refactor(): trying to move app events away from rootScope

public/app/core/app_events.ts

+///<reference path="../headers/common.d.ts" />
+
+import {Emitter} from './utils/emitter';
+
+var appEvents = new Emitter();
+export default appEvents;

public/app/core/core.ts

@@ -36,6 +36,8 @@ import 'app/core/services/all';
 import 'app/core/routes/routes';
 import './filters/filters';
 import coreModule from './core_module';
+import appEvents from './app_events';
+
 
 export {
   arrayJoin,
@@ -48,5 +50,6 @@ export {
   liveSrv,
   layoutSelector,
   infoPopover,
-  Emitter
+  Emitter,
+  appEvents,
 };

public/app/core/services/alert_srv.js

-define([
-  'angular',
-  'lodash',
-  '../core_module',
-],
-function (angular, _, coreModule) {
-  'use strict';
-
-  coreModule.default.service('alertSrv', function($timeout, $sce, $rootScope, $modal, $q) {
-    var self = this;
-
-    this.init = function() {
-      $rootScope.onAppEvent('alert-error', function(e, alert) {
-        self.set(alert[0], alert[1], 'error');
-      }, $rootScope);
-      $rootScope.onAppEvent('alert-warning', function(e, alert) {
-        self.set(alert[0], alert[1], 'warning', 5000);
-      }, $rootScope);
-      $rootScope.onAppEvent('alert-success', function(e, alert) {
-        self.set(alert[0], alert[1], 'success', 3000);
-      }, $rootScope);
-      $rootScope.onAppEvent('confirm-modal', this.showConfirmModal, $rootScope);
-    };
-
-    // List of all alert objects
-    this.list = [];
-
-    this.set = function(title,text,severity,timeout) {
-      var newAlert = {
-        title: title || '',
-        text: text || '',
-        severity: severity || 'info',
-      };
-
-      var newAlertJson = angular.toJson(newAlert);
-
-      // remove same alert if it already exists
-      _.remove(self.list, function(value) {
-        return angular.toJson(value) === newAlertJson;
-      });
-
-      self.list.push(newAlert);
-      if (timeout > 0) {
-        $timeout(function() {
-          self.list = _.without(self.list,newAlert);
-        }, timeout);
-      }
-
-      if (!$rootScope.$$phase) {
-        $rootScope.$digest();
-      }
-
-      return(newAlert);
-    };
-
-    this.clear = function(alert) {
-      self.list = _.without(self.list,alert);
-    };
-
-    this.clearAll = function() {
-      self.list = [];
-    };
-
-    this.showConfirmModal = function(e, payload) {
-      var scope = $rootScope.$new();
-
-      scope.title = payload.title;
-      scope.text = payload.text;
-      scope.text2 = payload.text2;
-      scope.onConfirm = payload.onConfirm;
-      scope.icon = payload.icon || "fa-check";
-      scope.yesText = payload.yesText || "Yes";
-      scope.noText = payload.noText || "Cancel";
-
-      var confirmModal = $modal({
-        template: 'public/app/partials/confirm_modal.html',
-        persist: false,
-        modalClass: 'confirm-modal',
-        show: false,
-        scope: scope,
-        keyboard: false
-      });
-
-      $q.when(confirmModal).then(function(modalEl) {
-        modalEl.modal('show');
-      });
-
-    };
-
-  });
-});

public/app/core/services/alert_srv.ts

+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+
+export class AlertSrv {
+  list: any[];
+
+  /** @ngInject */
+  constructor(private $timeout, private $sce, private $rootScope, private $modal) {
+    this.list = [];
+  }
+
+  init() {
+    this.$rootScope.onAppEvent('alert-error', (e, alert) => {
+      this.set(alert[0], alert[1], 'error', 0);
+    }, this.$rootScope);
+
+    this.$rootScope.onAppEvent('alert-warning', (e, alert) => {
+      this.set(alert[0], alert[1], 'warning', 5000);
+    }, this.$rootScope);
+
+    this.$rootScope.onAppEvent('alert-success', (e, alert) => {
+      this.set(alert[0], alert[1], 'success', 3000);
+    }, this.$rootScope);
+
+    appEvents.on('confirm-modal', this.showConfirmModal.bind(this));
+
+    this.$rootScope.onAppEvent('confirm-modal', (e, data) => {
+      this.showConfirmModal(data);
+    }, this.$rootScope);
+  }
+
+  set(title, text, severity, timeout) {
+    var newAlert = {
+      title: title || '',
+      text: text || '',
+      severity: severity || 'info',
+    };
+
+    var newAlertJson = angular.toJson(newAlert);
+
+    // remove same alert if it already exists
+    _.remove(this.list, function(value) {
+      return angular.toJson(value) === newAlertJson;
+    });
+
+    this.list.push(newAlert);
+    if (timeout > 0) {
+      this.$timeout(() => {
+        this.list = _.without(this.list, newAlert);
+      }, timeout);
+    }
+
+    if (!this.$rootScope.$$phase) {
+      this.$rootScope.$digest();
+    }
+
+    return(newAlert);
+  }
+
+  clear(alert) {
+    this.list = _.without(this.list, alert);
+  }
+
+  clearAll() {
+    this.list = [];
+  }
+
+  showConfirmModal(payload) {
+    var scope = this.$rootScope.$new();
+
+    scope.title = payload.title;
+    scope.text = payload.text;
+    scope.text2 = payload.text2;
+    scope.onConfirm = payload.onConfirm;
+    scope.icon = payload.icon || "fa-check";
+    scope.yesText = payload.yesText || "Yes";
+    scope.noText = payload.noText || "Cancel";
+
+    var confirmModal = this.$modal({
+      template: 'public/app/partials/confirm_modal.html',
+      persist: false,
+      modalClass: 'confirm-modal',
+      show: false,
+      scope: scope,
+      keyboard: false
+    });
+
+    confirmModal.then(function(modalEl) {
+      modalEl.modal('show');
+    });
+  }
+}
+
+coreModule.service('alertSrv', AlertSrv);

public/app/core/utils/emitter.ts

+///<reference path="../../headers/common.d.ts" />
 
 import {Subject} from 'vendor/npm/rxjs/Subject';
 

public/app/features/plugins/ds_edit_ctrl.ts

@@ -2,8 +2,9 @@
 
 import angular from 'angular';
 import _ from 'lodash';
-import coreModule from 'app/core/core_module';
+
 import config from 'app/core/config';
+import {coreModule, appEvents} from 'app/core/core';
 
 var datasourceTypes = [];
 
@@ -142,7 +143,7 @@ export class DataSourceEditCtrl {
     }
 
     delete(s) {
-      this.$scope.appEvent('confirm-modal', {
+      appEvents.emit('confirm-modal', {
         title: 'Delete',
         text: 'Are you sure you want to delete this datasource?',
         yesText: "Delete",

public/test/specs/app_specs.ts

+import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
+
+import {GrafanaApp} from 'app/app';
+
+describe('GrafanaApp', () => {
+
+  var app = new GrafanaApp();
+
+  it('can call inits', () => {
+    expect(app).to.not.be(null);
+  });
+});
+
+

public/vendor/angular-other/angular-strap.js

@@ -79,76 +79,7 @@ angular.module('$strap.directives').factory('$modal', [
     return ModalFactory;
   }
 ])
-'use strict';
-angular.module('$strap.directives').directive('bsTabs', [
-  '$parse',
-  '$compile',
-  '$timeout',
-  function ($parse, $compile, $timeout) {
-    var template = '<div class="tabs">' + '<ul class="nav nav-tabs">' + '<li ng-repeat="pane in panes" ng-class="{active:pane.active}">' + '<a data-target="#{{pane.id}}" data-index="{{$index}}" data-toggle="tab">{{pane.title}}</a>' + '</li>' + '</ul>' + '<div class="tab-content" ng-transclude>' + '</div>';
-    return {
-      restrict: 'A',
-      require: '?ngModel',
-      priority: 0,
-      scope: true,
-      template: template,
-      replace: true,
-      transclude: true,
-      compile: function compile(tElement, tAttrs, transclude) {
-        return function postLink(scope, iElement, iAttrs, controller) {
-          var getter = $parse(iAttrs.bsTabs), setter = getter.assign, value = getter(scope);
-          scope.panes = [];
-          var $tabs = iElement.find('ul.nav-tabs');
-          var $panes = iElement.find('div.tab-content');
-          var activeTab = 0, id, title, active;
-          $timeout(function () {
-            $panes.find('[data-title], [data-tab]').each(function (index) {
-              var $this = angular.element(this);
-              id = 'tab-' + scope.$id + '-' + index;
-              title = $this.data('title') || $this.data('tab');
-              active = !active && $this.hasClass('active');
-              $this.attr('id', id).addClass('tab-pane');
-              if (iAttrs.fade)
-                $this.addClass('fade');
-              scope.panes.push({
-                id: id,
-                title: title,
-                content: this.innerHTML,
-                active: active
-              });
-            });
-            if (scope.panes.length && !active) {
-              $panes.find('.tab-pane:first-child').addClass('active' + (iAttrs.fade ? ' in' : ''));
-              scope.panes[0].active = true;
-            }
-          });
-          if (controller) {
-            iElement.on('show', function (ev) {
-              var $target = $(ev.target);
-              scope.$apply(function () {
-                controller.$setViewValue($target.data('index'));
-              });
-            });
-            scope.$watch(iAttrs.ngModel, function (newValue, oldValue) {
-              if (angular.isUndefined(newValue))
-                return;
-              activeTab = newValue;
-              setTimeout(function () {
-                // Check if we're still on the same tab before making the switch
-                if(activeTab === newValue) {
-                  var $next = $($tabs[0].querySelectorAll('li')[newValue * 1]);
-                  if (!$next.hasClass('active')) {
-                    $next.children('a').tab('show');
-                  }
-                }
-              });
-            });
-          }
-        };
-      }
-    };
-  }
-]);
+
 'use strict';
 angular.module('$strap.directives').directive('bsTooltip', [
   '$parse',
@@ -202,6 +133,7 @@ angular.module('$strap.directives').directive('bsTooltip', [
     };
   }
 ]);
+
 'use strict';
 angular.module('$strap.directives').directive('bsTypeahead', [
   '$parse',