From 16cede30f6321b09cc344e5fd913b5e86bcb9f44 Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Thu, 28 Apr 2016 16:03:14 +0200
Subject: [PATCH] feat(alerting): move alertingtab to seperate directive

---
 public/app/features/alerts/alert_log_ctrl.ts  |  1 -
 .../app/plugins/panel/graph/alert_tab_ctrl.ts | 40 +++++++++++++++++++
 public/app/plugins/panel/graph/module.ts      | 12 +-----
 .../panel/graph/partials/tab_alerting.html    |  2 +-
 4 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 public/app/plugins/panel/graph/alert_tab_ctrl.ts

diff --git a/public/app/features/alerts/alert_log_ctrl.ts b/public/app/features/alerts/alert_log_ctrl.ts
index 045e6a878b5..191f6337e99 100644
--- a/public/app/features/alerts/alert_log_ctrl.ts
+++ b/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;
     });
 
diff --git a/public/app/plugins/panel/graph/alert_tab_ctrl.ts b/public/app/plugins/panel/graph/alert_tab_ctrl.ts
new file mode 100644
index 00000000000..aeb371e2f19
--- /dev/null
+++ b/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',
+  };
+}
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 4776377a625..d20c50405bc 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/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;
diff --git a/public/app/plugins/panel/graph/partials/tab_alerting.html b/public/app/plugins/panel/graph/partials/tab_alerting.html
index 00e1f940183..a48dafa453d 100644
--- a/public/app/plugins/panel/graph/partials/tab_alerting.html
+++ b/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>