From 6c3b713b3d8da6bf47312213c2f3a91e74c38ca2 Mon Sep 17 00:00:00 2001
From: Alex DeBrie <alexdebrie1@gmail.com>
Date: Wed, 23 Mar 2016 16:33:07 +0000
Subject: [PATCH] Add destination subscriptions to Alert page

---
 rd_ui/app/scripts/controllers/alerts.js       | 44 +++++++++++++++++++
 .../views/alerts/destinationsubscribers.html  | 25 +++++++++++
 rd_ui/app/views/alerts/edit.html              |  1 +
 rd_ui/app/views/alerts/usersubscribers.html   |  2 +-
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 rd_ui/app/views/alerts/destinationsubscribers.html

diff --git a/rd_ui/app/scripts/controllers/alerts.js b/rd_ui/app/scripts/controllers/alerts.js
index 352fb129..4a811ef5 100644
--- a/rd_ui/app/scripts/controllers/alerts.js
+++ b/rd_ui/app/scripts/controllers/alerts.js
@@ -130,6 +130,50 @@
     }
   }]);
 
+  angular.module('redash.directives').directive('destinationSubscribers', ['AlertSubscription', 'Destination', 'growl', function (AlertSubscription, Destination, growl) {
+    return {
+      restrict: 'E',
+      replace: true,
+      templateUrl: '/views/alerts/destinationSubscribers.html',
+      scope: {
+        'alertId': '='
+      },
+      controller: function ($scope) {
+        $scope.subscription = {};
+        $scope.subscribers = [];
+        $scope.destinations = Destination.query();
+
+        $scope.destinationsDisplay = function(destination) {
+            return '<i class="fa ' + destination.icon + '"></i>&nbsp;' + destination.name
+        };
+
+        $scope.subscribers = AlertSubscription.query({alertId: $scope.alertId}, function(subscriptions) {
+              $scope.subscribers = _.filter(subscriptions, function(subscription) { return typeof subscription.destination !== "undefined"; });
+        });
+        $scope.saveSubscriber = function() {
+            $scope.sub = new AlertSubscription({alert_id: $scope.alertId, destination_id: $scope.subscription.destination.id});
+            $scope.sub.$save(function() {
+              growl.addSuccessMessage("Subscribed.");
+              $scope.subscribers.push($scope.sub);
+            }, function(response) {
+              console.log(response);
+              growl.addErrorMessage("Failed saving subscription.");
+            });
+        };
+
+        $scope.unsubscribe = function(subscriber) {
+            $scope.sub = new AlertSubscription({alert_id: subscriber.alert_id, id: subscriber.id});
+            $scope.sub.$delete(function() {
+              growl.addSuccessMessage("Unsubscribed");
+              $scope.subscribers = _.without($scope.subscribers, subscriber);
+            }, function() {
+              growl.addErrorMessage("Failed unsubscribing.");
+            });
+        };
+      }
+    }
+  }]);
+
   angular.module('redash.directives').directive('subscribeButton', ['AlertSubscription', 'growl', function (AlertSubscription, growl) {
     return {
       restrict: 'E',
diff --git a/rd_ui/app/views/alerts/destinationsubscribers.html b/rd_ui/app/views/alerts/destinationsubscribers.html
new file mode 100644
index 00000000..11d3df6f
--- /dev/null
+++ b/rd_ui/app/views/alerts/destinationsubscribers.html
@@ -0,0 +1,25 @@
+<div class="row">
+    <strong>Destination subscriptions</strong>
+    <p><i>Destination subscriptions will send a notification to the configured destination</i></p>
+    <form name="subscribeForm" ng-submit="saveSubscriber()" class="form">
+        <div class="form-group">
+            <label>Add a destination subscription</label>
+            <ui-select ng-model="subscription.destination">
+                <ui-select-match>{{$select.selected.name}}</ui-select-match>
+                <ui-select-choices repeat="d in destinations">
+                    <span ng-bind-html=destinationsDisplay(d)></span>
+                </ui-select-choices>
+            </ui-select>
+        </div>
+        <div class="form-group">
+            <button class="btn btn-primary">Subscribe</button>
+        </div>
+    </form>
+    <div class="list-group">
+        <label>Currently subscribed</label>
+        <div class="list-group-item" ng-repeat="subscriber in subscribers">
+            <span ng-bind-html=destinationsDisplay(subscriber.destination)></span>
+            <button class="btn btn-xs btn-danger pull-right" ng-click="unsubscribe(subscriber)">Unsubscribe</button>
+        </div>
+    </div>
+</div>
diff --git a/rd_ui/app/views/alerts/edit.html b/rd_ui/app/views/alerts/edit.html
index 00a26e09..ae910613 100644
--- a/rd_ui/app/views/alerts/edit.html
+++ b/rd_ui/app/views/alerts/edit.html
@@ -62,6 +62,7 @@
         <div class="col-md-4" ng-if="alert.id">
             <h3><i>Subscriptions</i></h3>
             <user-subscribers alert-id="alertId"></user-subscribers>
+            <destination-subscribers alert-id="alertId"></destination-subscribers>
         </div>
     </div>
 </div>
diff --git a/rd_ui/app/views/alerts/usersubscribers.html b/rd_ui/app/views/alerts/usersubscribers.html
index 0da211f4..9583b2d3 100644
--- a/rd_ui/app/views/alerts/usersubscribers.html
+++ b/rd_ui/app/views/alerts/usersubscribers.html
@@ -1,4 +1,4 @@
-<div>
+<div ng-style='{"min-height":"100px"}' class="row">
     <strong>User subscriptions</strong> <subscribe-button alert-id="alertId" subscribers="subscribers"></subscribe-button><br/>
     <p><i>User subscriptions will send a notification to your email</i></p>
     <img ng-src="{{s.user.gravatar_url}}" class="img-circle" alt="{{s.id}}" ng-repeat="s in subscribers"/>