Create UI for adding/removing alert subscriptions

This commit is contained in:
Alex DeBrie 2016-03-14 18:25:41 +00:00
parent 82b7146216
commit ed7f9ea5f0
3 changed files with 65 additions and 7 deletions

View File

@ -74,6 +74,7 @@
$scope.ops = ['greater than', 'less than', 'equals'];
$scope.selectedQuery = null;
$scope.destinations = Destination.query();
$scope.getDefaultName = function() {
if (!$scope.alert.query) {
@ -92,8 +93,6 @@
});
};
$scope.destinations = Destination.query();
$scope.saveChanges = function() {
if ($scope.alert.name === undefined || $scope.alert.name === '') {
$scope.alert.name = $scope.getDefaultName();
@ -110,9 +109,10 @@
growl.addErrorMessage("Failed saving alert.");
});
};
};
angular.module('redash.directives').directive('alertSubscribers', ['AlertSubscription', function (AlertSubscription) {
angular.module('redash.directives').directive('alertSubscribers', ['AlertSubscription', 'Destination', 'growl', function (AlertSubscription, Destination, growl) {
return {
restrict: 'E',
replace: true,
@ -122,6 +122,40 @@
},
controller: function ($scope) {
$scope.subscribers = AlertSubscription.query({alertId: $scope.alertId});
$scope.subscription = {};
$scope.destinations = Destination.query();
$scope.destinationsDisplay = function(destination) {
var icons = {
'slack': 'fa-slack',
'email': 'fa-envelope',
'webhook': 'fa-bolt',
'hipchat': 'fa-comment-o'
}
var icon = icons[destination.type] || 'fa-bullseye'
return '<i class="fa ' + icon + '"></i>&nbsp;' + destination.name
};
$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() {
growl.addErrorMessage("Failed saving subscription.");
});
};
$scope.unsubscribe = function(subscriber) {
$scope.sub = new AlertSubscription({alert_id: subscriber.alert_id, subscriber_id: subscriber.id});
$scope.sub.$delete(function() {
growl.addSuccessMessage("Unsubscribed");
$scope.subscribers = _.without($scope.subscribers, subscriber);
}, function() {
growl.addErrorMessage("Failed unsubscribing.");
});
};
}
}
}]);
@ -159,7 +193,7 @@
});
} else {
$scope.subscription = new AlertSubscription({alert_id: $scope.alertId});
$scope.subscription.$save(function() {
$scope.subscription.$delete(function() {
$scope.subscribers.push($scope.subscription);
updateClass();
}, function() {

View File

@ -608,7 +608,12 @@
};
var AlertSubscription = function ($resource) {
var resource = $resource('api/alerts/:alertId/subscriptions/:userId', {alertId: '@alert_id', userId: '@user.id'});
var actions = {
'get': {method: 'GET'},
'save': {method: 'POST'},
'delete': {method: 'DELETE'}
};
var resource = $resource('api/alerts/:alertId/subscriptions/:subscriberId', {alertId: '@alert_id', subscriberId: '@subscriber_id'});
return resource;
};

View File

@ -1,4 +1,23 @@
<div>
<strong>Subscribers</strong> <subscribe-button alert-id="alertId" subscribers="subscribers"></subscribe-button><br/>
<img ng-src="{{s.user.gravatar_url}}" class="img-circle" alt="{{s.user.name}}" ng-repeat="s in subscribers"/>
<form name="subscribeForm" ng-submit="saveSubscriber()" class="form">
<div class="form-group">
<label>Add a Destination</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>