support both uid and id for showing/removing notifiers

public/app/features/alerting/AlertTabCtrl.ts

@@ -142,7 +142,9 @@ export class AlertTabCtrl {
       isDefault: false,
       uid: model.uid
     });
-    if (!_.find(this.alert.notifications, { id: model.id})) {
+
+    // avoid duplicates using both id and uid to be backwards compatible.
+    if (!_.find(this.alert.notifications, n => n.id === model.id || n.uid === model.uid)) {
       this.alert.notifications.push({ uid: model.uid });
     }
 
@@ -152,9 +154,11 @@ export class AlertTabCtrl {
     this.addNotificationSegment.fake = true;
   }
 
-  removeNotification(deleteUid) {
-    _.remove(this.alert.notifications, { uid: deleteUid});
-    _.remove(this.alertNotifications, { uid: deleteUid});
+  removeNotification(an) {
+    // remove notifiers refeered to by id and uid to support notifiers added
+    // before and after we added support for uid
+    _.remove(this.alert.notifications, n =>  n.uid === an.uid || n.id === an.id);
+    _.remove(this.alertNotifications, n =>  n.uid === an.uid || n.id === an.id);
   }
 
   initModel() {
@@ -190,7 +194,14 @@ export class AlertTabCtrl {
     ThresholdMapper.alertToGraphThresholds(this.panel);
 
     for (const addedNotification of alert.notifications) {
-      const model = _.find(this.notifications, { id: addedNotification.id });
+      // lookup notifier type by uid
+      let model = _.find(this.notifications, { uid: addedNotification.uid });
+
+      // fallback to using id if uid is missing
+      if (!model) {
+        model = _.find(this.notifications, { id: addedNotification.id });
+      }
+
       if (model && model.isDefault === false) {
         model.iconClass = this.getNotificationIcon(model.type);
         this.alertNotifications.push(model);

public/app/features/alerting/partials/alert_tab.html

@@ -135,7 +135,7 @@
         <div class="gf-form" ng-repeat="nc in ctrl.alertNotifications">
           <span class="gf-form-label" ng-style="{'background-color': nc.bgColor }">
             <i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
-            <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification(nc.uid)" ng-if="nc.isDefault === false"></i>
+            <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification(nc)" ng-if="nc.isDefault === false"></i>
           </span>
         </div>
         <div class="gf-form">