AMBARI-12717. Ambari UI with 10K+ alerts on the cluster becomes unresponsive after opening alerts popup (onechiporenko)

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

@@ -27,11 +27,18 @@ App.MainAlertInstancesController = Em.Controller.extend({
   /**
    * @type {App.AlertInstance[]}
    */
-  unhealthyAlertInstances: function () {
-    return App.AlertInstance.find().filter(function (item) {
+  unhealthyAlertInstances: [],
+
+  updateUnhealthyAlertInstances: function () {
+    Em.run.once(this, this.updateUnhealthyAlertInstancesOnce);
+  }.observes('content.[]'),
+
+  updateUnhealthyAlertInstancesOnce: function() {
+    var alertInstances = App.AlertInstance.find().filter(function (item) {
       return ['CRITICAL', 'WARNING'].contains(item.get('state'));
     });
-  }.property('content.[]'),
+    this.set('unhealthyAlertInstances', alertInstances);
+  },
 
   /**
    * Are alertInstances loaded
@@ -117,9 +124,11 @@ App.MainAlertInstancesController = Em.Controller.extend({
    * @method loadAlertInstances
    */
   loadAlertInstances: function () {
-    this.set('isLoaded', false);
-    this.set('sourceType', null);
-    this.set('sourceName', null);
+    this.setProperties({
+      isLoaded: false,
+      sourceType: null,
+      sourceName: null
+    });
     this.fetchAlertInstances();
   },
 
@@ -130,9 +139,11 @@ App.MainAlertInstancesController = Em.Controller.extend({
    * @method loadAlertInstancesByHost
    */
   loadAlertInstancesByHost: function (hostName) {
-    this.set('isLoaded', false);
-    this.set('sourceType', 'HOST');
-    this.set('sourceName', hostName);
+    this.setProperties({
+      isLoaded: false,
+      sourceType: 'HOST',
+      sourceName: hostName
+    });
     this.fetchAlertInstances();
   },
 
@@ -143,9 +154,11 @@ App.MainAlertInstancesController = Em.Controller.extend({
    * @method loadAlertInstancesByAlertDefinition
    */
   loadAlertInstancesByAlertDefinition: function (definitionId) {
-    this.set('isLoaded', false);
-    this.set('sourceType', 'ALERT_DEFINITION');
-    this.set('sourceName', definitionId);
+    this.setProperties({
+      isLoaded: false,
+      sourceType: 'ALERT_DEFINITION',
+      sourceName: definitionId
+    });
     this.fetchAlertInstances();
   },
 
@@ -171,7 +184,7 @@ App.MainAlertInstancesController = Em.Controller.extend({
   getAlertInstancesSuccessCallback: function (json) {
     App.alertInstanceMapper.map(json);
     this.set('isLoaded', true);
-    this.set('reload', !this.get('reload'));
+    this.toggleProperty('reload');
   },
 
   /**
@@ -199,8 +212,6 @@ App.MainAlertInstancesController = Em.Controller.extend({
         return Em.I18n.t('alerts.fastAccess.popup.header').format(this.get('alertsNumber'));
       }.property('alertsNumber'),
 
-      definitionsController: this,
-
       classNames: ['sixty-percent-width-modal', 'alerts-popup'],
 
       secondary: Em.I18n.t('alerts.fastAccess.popup.body.showmore'),
@@ -343,7 +354,6 @@ App.MainAlertInstancesController = Em.Controller.extend({
 
         didInsertElement: function () {
           this.filter();
-          this.ensureTooltip();
           this.addObserver('filteringComplete', this, this.overlayObserver);
           this.overlayObserver();
           return this._super();

ambari-web/app/templates/common/modal_popups/alerts_popup.hbs

@@ -42,10 +42,10 @@
                       {{alertInstance.text}}
                     </div>
                   </div>
-                  <div class="status-col" rel="alert-status-tooltip" {{bindAttr title="alertInstance.lastTriggered"}}>
+                  <div class="status-col" {{bindAttr title="alertInstance.lastTriggered"}}>
                     <span>
                       <span class="status-icon">{{{alertInstance.status}}}</span>
-                      <time class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggeredVerboseDisplay"}}>{{alertInstance.lastTriggeredForFormatted}}</time>
+                      <time>{{alertInstance.lastTriggeredForFormatted}}</time>
                     </span>
                   </div>
               </div>