feat(alerting): move alertingtab to seperate directive

public/app/features/alerts/alert_log_ctrl.ts

@@ -21,7 +21,6 @@ export class AlertLogCtrl {
 
   loadAlertLogs() {
     this.backendSrv.get('/api/alerts/events/' + this.alertId).then(result => {
-      console.log(result);
       this.alertLogs = result;
     });
 

public/app/plugins/panel/graph/alert_tab_ctrl.ts

@@ -0,0 +1,40 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import $ from 'jquery';
+import angular from 'angular';
+
+export class AlertTabCtrl {
+  panel: any;
+  panelCtrl: any;
+
+  /** @ngInject */
+  constructor($scope) {
+    $scope.alertTab = this;
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+  }
+
+  convertThresholdsToAlerts() {
+    if (this.panel.grid && this.panel.grid.threshold1) {
+      this.panel.alerting.warnLevel = '< ' + this.panel.grid.threshold1;
+    }
+
+    if (this.panel.grid && this.panel.grid.threshold2) {
+      this.panel.alerting.critLevel = '< ' + this.panel.grid.threshold2;
+    }
+  }
+}
+
+/** @ngInject */
+export function graphAlertEditor() {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/app/plugins/panel/graph/partials/tab_alerting.html',
+    controller: AlertTabCtrl,
+    //bindToController: true,
+    //controllerAs: 'ctrl',
+  };
+}

public/app/plugins/panel/graph/module.ts

@@ -12,6 +12,7 @@ import _ from 'lodash';
 import TimeSeries from 'app/core/time_series2';
 import * as fileExport from 'app/core/utils/file_export';
 import {MetricsPanelCtrl} from 'app/plugins/sdk';
+import {graphAlertEditor} from './alert_tab_ctrl';
 
 class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
@@ -129,7 +130,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Axes', 'public/app/plugins/panel/graph/tab_axes.html', 2);
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
     this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
-    this.addEditorTab('Alerting', 'public/app/plugins/panel/graph/partials/tab_alerting.html', 5);
+    this.addEditorTab('Alerting', graphAlertEditor, 5);
 
     this.logScales = {
       'linear': 1,
@@ -311,15 +312,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.refresh();
   }
 
-  convertThresholdsToAlerts() {
-    if (this.panel.grid && this.panel.grid.thresholds1) {
-      this.panel.alerting.warnLevel = '< ' + this.panel.grid.threshold1;
-    }
-
-    if (this.panel.grid && this.panel.grid.thresholds2) {
-      this.panel.alerting.critLevel = '< ' + this.panel.grid.threshold2;
-    }
-  }
 
   legendValuesOptionChanged() {
     var legend = this.panel.legend;

public/app/plugins/panel/graph/partials/tab_alerting.html

@@ -14,7 +14,7 @@
     </div>
 
     <h5 class="section-heading">Thresholds</h5>
-		<p ng-show="ctrl.panel.grid.threshold1 || ctrl.panel.grid.threshold2">We noticed you have existing threshholds.<a href="#" ng-click="ctrl.convertThresholdsToAlert()">Convert them</a></p>
+		<p ng-show="ctrl.panel.grid.threshold1 || ctrl.panel.grid.threshold2">We noticed you have existing threshholds.<a ng-click="alertTab.convertThresholdsToAlerts()">Convert them</a></p>
     <div class="gf-form">
       <span class="gf-form-label width-7">Warn level</span>
       <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.panel.alerting.warnLevel"></input>