AMBARI-8391. Alerts UI: Create dialog to Manage Notifications of alerts (srimanth)

ambari-web/app/controllers.js

@@ -74,6 +74,7 @@ require('controllers/main/alerts/definition_details_controller');
 require('controllers/main/alerts/definition_configs_controller');
 require('controllers/main/alerts/alert_instances_controller');
 require('controllers/main/alerts/manage_alert_groups_controller');
+require('controllers/main/alerts/manage_alert_notifications_controller');
 require('controllers/main/service');
 require('controllers/main/service/item');
 require('controllers/main/service/info/summary');

ambari-web/app/controllers/main/alerts/alert_definitions_actions_controller.js

@@ -148,7 +148,20 @@ App.MainAlertDefinitionActionsController = Em.ArrayController.extend({
     });
   },
 
-
-  manageNotifications: Em.K
+  /**
+   *  "Manage Alert Notifications" handler
+   */
+  manageNotifications: function () {
+    return App.ModalPopup.show({
+      header: Em.I18n.t('alerts.actions.manage_alert_notifications_popup.header'),
+      bodyClass: App.ManageAlertNotificationsView.extend({
+        controllerBinding: 'App.router.manageAlertNotificationsController'
+      }),
+      classNames: ['sixty-percent-width-modal', 'manage-configuration-group-popup'],
+      secondary: null,
+      primary: Em.I18n.t('common.close'),
+      didInsertElement: Em.K
+    });
+  }
 
 });

ambari-web/app/controllers/main/alerts/manage_alert_notifications_controller.js

@@ -0,0 +1,66 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+App.ManageAlertNotificationsController = Em.Controller.extend({
+  name: 'manageAlertNotificationsController',
+  isLoaded: false,
+
+  /**
+   * @type {App.AlertNotification[]}
+   */
+  alertNotifications: function () {
+    if (this.get('isLoaded')) {
+      return App.AlertNotification.find().toArray();
+    }
+    return [];
+  }.property('isLoaded'),
+
+  /**
+   * @type {App.AlertNotification}
+   */
+  selectedAlertNotification: null,
+
+  loadAlertNotifications: function () {
+    if (this.get('isLoaded')) {
+      return;
+    }
+    App.ajax.send({
+      name: 'alerts.notifications',
+      sender: this,
+      data: {},
+      success: 'getAlertNotificationsSuccessCallback',
+      error: 'getAlertNotificationsErrorCallback'
+    });
+  },
+
+  getAlertNotificationsSuccessCallback: function (json) {
+    App.alertNotificationMapper.map(json);
+    this.set('isLoaded', true);
+  },
+
+  getAlertNotificationsErrorCallback: function () {
+    this.set('isLoaded', true);
+  },
+
+  addAlertNotification: Em.K,
+  deleteAlertNotification: Em.K,
+  editAlertNotification: Em.K,
+  duplicateAlertNotification: Em.K
+});

ambari-web/app/mappers.js

@@ -38,4 +38,5 @@ require('mappers/alert_definitions_mapper');
 require('mappers/alert_definition_summary_mapper');
 require('mappers/alert_instances_mapper');
 require('mappers/alert_groups_mapper');
+require('mappers/alert_notification_mapper');
 require('mappers/root_service_mapper');

ambari-web/app/messages.js

@@ -74,6 +74,7 @@ Em.I18n.translations = {
   'common.hosts':'Hosts',
   'common.services':'Services',
   'common.group':'Group',
+  'common.groups':'Groups',
   'common.progress':'Progress',
   'common.status':'Status',
   'common.action':'Action',
@@ -161,6 +162,7 @@ Em.I18n.translations = {
   'common.add': 'Add',
   'common.edit': 'Edit',
   'common.delete': 'Delete',
+  'common.duplicate': 'Duplicate',
   'common.empty': 'Empty',
   'common.override':'Override',
   'common.undo':'Undo',
@@ -1723,6 +1725,14 @@ Em.I18n.translations = {
   'alerts.actions.manage_alert_groups_popup.selectDefsDialog.selectedDefsLink': '{0} out of {1} alert definitions selected',
   'alerts.actions.manage_alert_groups_popup.selectDefsDialog.message.warning': 'At least one alert definition needs to be selected.',
 
+  'alerts.actions.manage_alert_notifications_popup.header':'Manage Alert Notifications',
+  'alerts.actions.manage_alert_notifications_popup.addButton':'Create new Alert Notification',
+  'alerts.actions.manage_alert_notifications_popup.removeButton':'Delete Alert Notification',
+  'alerts.actions.manage_alert_notifications_popup.editButton':'Edit Alert Notification',
+  'alerts.actions.manage_alert_notifications_popup.duplicateButton':'Duplicate Alert Notification',
+  'alerts.actions.manage_alert_notifications_popup.method':'Method',
+  'alerts.actions.manage_alert_notifications_popup.email':'Email',
+
   'hosts.host.add':'Add New Hosts',
   'hosts.table.noHosts':'No hosts to display',
 

ambari-web/app/models/alert_notification.js

@@ -24,4 +24,21 @@ App.AlertNotification = DS.Model.extend({
   type: DS.attr('string'),
   description: DS.attr('string'),
   properties: DS.attr('string')
-});
+});
+
+App.AlertNotification.FIXTURES = [
+  {
+    "description" : "Admins",
+    "id" : 1,
+    "name" : "Administrators",
+    "type" : "EMAIL",
+    "properties" : ""
+  },
+  {
+    "description" : "Operators",
+    "id" : 2,
+    "name" : "Operators",
+    "type" : "SNMP",
+    "properties" : ""
+  }
+];

ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs

@@ -0,0 +1,108 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+{{#if controller.isLoaded}}
+  <div class="row-fluid  manage-configuration-group-content">
+    <div class="span12">
+      <div class="row-fluid">
+        <div class="span4">
+          <span>&nbsp;</span>
+          {{view Em.Select
+          contentBinding="alertNotifications"
+          optionLabelPath="content.name"
+          multiple="multiple"
+          class="group-select"
+          selectionBinding="view.selectedAlertNotification"
+          }}
+          <div class="btn-toolbar pull-right">
+            <button rel="button-info" class="btn"
+              {{translateAttr data-original-title="alerts.actions.manage_alert_notifications_popup.addButton"}}
+              {{action addAlertNotification target="controller"}}><i class="icon-plus"></i></button>
+            <button rel="button-info" class="btn"
+              {{translateAttr data-original-title="alerts.actions.manage_alert_notifications_popup.removeButton"}}
+              {{bindAttr disabled="view.isRemoveButtonDisabled"}}
+              {{action deleteAlertNotification target="controller"}}><i class="icon-minus"></i></button>
+            <div class="btn-group dropup">
+              <button class="btn dropdown-toggle" data-toggle="dropdown">
+                <i class="icon-cog"></i>&nbsp;<span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu">
+                <li {{bindAttr class="view.isEditButtonDisabled:disabled"}}>
+                  <a href="" rel="button-info-dropdown"
+                    {{translateAttr data-original-title="alerts.actions.manage_alert_notifications_popup.editButton"}}
+                    {{action editAlertNotification target="controller"}}>{{t common.edit}}</a>
+                </li>
+                <li {{bindAttr class="view.isDuplicateButtonDisabled:disabled"}}>
+                  <a href="" rel="button-info-dropdown"
+                    {{translateAttr data-original-title="alerts.actions.manage_alert_notifications_popup.duplicateButton"}}
+                    {{action duplicateAlertNotification target="controller"}}>{{t common.duplicate}}</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="span8">
+          <span>&nbsp;</span>
+
+          <div class="row-fluid">
+            <div class="span12 pull-right">
+              {{#if selectedAlertNotification}}
+              <div class="row-fluid">
+                <div class="span3">{{t common.name}}</div>
+                <div class="span9">{{selectedAlertNotification.name}}</div>
+              </div>
+              <div class="row-fluid">
+                <div class="span3">{{t common.groups}}</div>
+                <div class="span9">{{view.selectedAlertNotificationGroups}}</div>
+              </div>
+              <div class="row-fluid">
+                <div class="span3">{{t alerts.actions.manage_alert_notifications_popup.method}}</div>
+                <div class="span9">{{selectedAlertNotification.type}}</div>
+              </div>
+              {{#if view.showEmailDetails}}
+                <div class="row-fluid">
+                  <div class="span3">{{t alerts.actions.manage_alert_notifications_popup.email}}</div>
+                  <div class="span9">{{selectedAlertNotification.properties.email}}</div>
+                </div>
+              {{/if}}
+              {{#if view.showSNMPDetails}}
+              {{/if}}
+                <div class="row-fluid">
+                  <div class="span3">{{t common.description}}</div>
+                  <div class="span9">{{selectedAlertNotification.description}}</div>
+                </div>
+              {{/if}}
+            </div>
+          </div>
+        </div>
+        <div class="clearfix"></div>
+        <div class="row-fluid">
+          <div class="span12 text-error" id="manage-config-group-error-div">
+            {{#if view.errorMessage}}
+              {{errorMessage}}
+            {{else}}
+              &nbsp;
+            {{/if}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{{else}}
+  <div class="spinner"></div>
+{{/if}}

ambari-web/app/utils/ajax/ajax.js

@@ -364,6 +364,10 @@ var urls = {
     'real': '/clusters/{clusterName}/alerts?fields=*',
     'mock': '/data/alerts/alert_instances.json'
   },
+  'alerts.notifications': {
+    'real': '/alert_targets?fields=*',
+    'mock': ''
+  },
   'alerts.instances.by_definition': {
     'real': '/clusters/{clusterName}/alerts?fields=*&Alert/definition_id={definitionId}',
     'mock': '/data/alerts/alert_instances.json'

ambari-web/app/views.js

@@ -47,6 +47,7 @@ require('views/main/alerts/alert_definitions_actions_view');
 require('views/main/alerts/definition_configs_view');
 require('views/main/alerts');
 require('views/main/alerts/manage_alert_groups_view');
+require('views/main/alerts/manage_alert_notifications_view');
 require('views/main/charts');
 require('views/main/views/details');
 require('views/main/host');

ambari-web/app/views/main/alerts/manage_alert_notifications_view.js

@@ -0,0 +1,97 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+App.ManageAlertNotificationsView = Em.View.extend({
+
+  templateName: require('templates/main/alerts/manage_alert_notifications_popup'),
+
+  selectedAlertNotification: null,
+
+  selectedAlertNotificationGroups: function () {
+    //TODO: Implement binding to AlertGroups
+    return ['Group1', 'Group2'].join(', ');
+  }.property('controller.selectedAlertNotification'),
+
+  isEditButtonDisabled: true,
+
+  isRemoveButtonDisabled: true,
+
+  isDuplicateButtonDisabled: true,
+
+  showEmailDetails: function () {
+    return this.get('controller.selectedAlertNotification.type') === 'EMAIL';
+  }.property('controller.selectedAlertNotification.type'),
+
+  showSNMPDetails: function () {
+    return this.get('controller.selectedAlertNotification.type') === 'SNMP';
+  }.property('controller.selectedAlertNotification.type'),
+
+  buttonObserver: function () {
+    var selectedAlertNotification = this.get('controller.selectedAlertNotification');
+    if (selectedAlertNotification) {
+      this.set('isEditButtonDisabled', false);
+      this.set('isRemoveButtonDisabled', false);
+      this.set('isDuplicateButtonDisabled', false);
+    } else {
+      this.set('isEditButtonDisabled', true);
+      this.set('isRemoveButtonDisabled', true);
+      this.set('isDuplicateButtonDisabled', true);
+    }
+  }.observes('controller.selectedAlertNotification'),
+
+  onAlertNotificationSelect: function () {
+    var selectedAlertNotification = this.get('selectedAlertNotification');
+    var length = selectedAlertNotification.length;
+    if (selectedAlertNotification && length) {
+      this.set('controller.selectedAlertNotification', selectedAlertNotification[length - 1]);
+    }
+    if (selectedAlertNotification && length > 1) {
+      this.set('selectedAlertNotification', selectedAlertNotification[length - 1]);
+    }
+  }.observes('selectedAlertNotification'),
+
+  onLoad: function () {
+    if (this.get('controller.isLoaded')) {
+      var notifications = this.get('controller.alertNotifications');
+      if (notifications && notifications.length) {
+        this.set('selectedAlertNotification', notifications[0]);
+      }  else {
+        this.set('selectedAlertNotification', null);
+      }
+      Em.run.later(this, function () {
+        App.tooltip(this.$("[rel='button-info']"));
+        App.tooltip(this.$("[rel='button-info-dropdown']"), {placement: 'left'});
+      }, 50) ;
+    }
+  }.observes('controller.isLoaded'),
+
+  willInsertElement: function () {
+    this.get('controller').loadAlertNotifications();
+  },
+
+  didInsertElement: function () {
+    this.onLoad();
+  },
+
+  errorMessage: function () {
+    return this.get('controller.errorMessage');
+  }.property('controller.errorMessage')
+
+});