AMBARI-8494. Alerts UI: Time showed for alerts should be relative to now (onechiporenko)

ambari-web/app/models/alert_definition.js

@@ -63,6 +63,15 @@ App.AlertDefinition = DS.Model.extend({
     return dateUtils.dateFormat(this.get('lastTriggered'));
   }.property('lastTriggered'),
 
+  /**
+   * Formatted timestamp with <code>$.timeago</code>
+   * @type {string}
+   */
+  lastTriggeredAgoFormatted: function () {
+    var lastTriggered = this.get('lastTriggered');
+    return lastTriggered ? $.timeago(new Date(lastTriggered)): '';
+  }.property('lastTriggered'),
+
   /**
    * Status generates from child-alerts
    * Format: 1 OK / 2 WARN / 1 CRIT / 1 UNKNOWN

ambari-web/app/models/alert_instance.js

@@ -58,6 +58,15 @@ App.AlertInstance = DS.Model.extend({
     return dateUtils.dateFormat(this.get('latestTimestamp'));
   }.property('latestTimestamp'),
 
+  /**
+   * Formatted timestamp with <code>$.timeago</code>
+   * @type {string}
+   */
+  lastTriggeredAgoFormatted: function () {
+    var lastTriggered = this.get('latestTimestamp');
+    return lastTriggered ? $.timeago(new Date(lastTriggered)): '';
+  }.property('latestTimestamp'),
+
   /**
    * List of css-classes for alert instance status
    * @type {object}

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

@@ -55,23 +55,25 @@
           </td>
           <td>{{{alertDefinition.status}}}</td>
           <td>{{alertDefinition.service.serviceName}}</td>
-          <td>{{alertDefinition.lastTriggeredFormatted}}</td>
+          <td><time class="timeago" {{bindAttr data-original-title="alertDefinition.lastTriggeredFormatted"}}>{{alertDefinition.lastTriggeredAgoFormatted}}</time></td>
           <td class="last toggle-state-button">
             {{#if alertDefinition.enabled}}
               {{t alerts.table.state.enabled}} &nbsp;&nbsp;
               {{#isAccessible ADMIN}}
-                <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class=":enable-disable-button alertDefinition.enabled:enabled:disabled"}}
-                  {{bindAttr data-original-title="alerts.table.state.enabled.tooltip"}}>
-                    <span class="icon-off"></span>
-                </a>
+                <span class="enable-disable-button" {{bindAttr data-original-title="view.enabledTooltip"}}>
+                  <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:enabled:disabled"}}>
+                      <span class="icon-off"></span>
+                  </a>
+                </span>
               {{/isAccessible}}
             {{else}}
               {{t alerts.table.state.disabled}} &nbsp;
               {{#isAccessible ADMIN}}
-                <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class=":enable-disable-button alertDefinition.enabled:enabled:disabled"}}
-                  {{bindAttr data-original-title="alerts.table.state.disabled.tooltip"}}>
-                    <span class="icon-off"></span>
-                </a>
+                <span class="enable-disable-button" {{bindAttr data-original-title="view.disabledTooltip"}}>
+                  <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:enabled:disabled"}}>
+                      <span class="icon-off"></span>
+                  </a>
+                </span>
               {{/isAccessible}}
             {{/if}}
           </td>

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

@@ -20,6 +20,8 @@
 
 <div id="alert-definition-details">
   <div class="row-fluid">
+
+    {{! Left column }}
     <div class="span9">
       <div class="definition-name">
         {{#if controller.editing.label.isEditing}}
@@ -89,6 +91,9 @@
         {{/if}}
       </div>
     </div>
+    {{! Left column end }}
+
+    {{! Right column }}
     <div class="span3 right-column">
       <div class="service-name">
         {{t common.service}}: <span class="label label-info">{{controller.content.service.displayName}}</span>
@@ -124,6 +129,9 @@
       </div>
     </div>
   </div>
+  {{! Right column end }}
+
+  {{! List of alerts }}
   <div class="definition-details-block">
     <span class="instances-label">
       <strong>{{t alerts.definition.details.instances}}</strong>
@@ -149,7 +157,7 @@
             <tr>
               <td class="first">{{instance.state}}</td>
               <td><a {{action goToHostAlerts instance.host target="controller"}} href="#">{{instance.host.hostName}}</a></td>
-              <td>{{instance.lastTriggered}}</td>
+              <td><time class="timeago" {{bindAttr data-original-title="instance.lastTriggered"}}>{{instance.lastTriggeredAgoFormatted}}</time></td>
               <td>10</td>
               <td class="last">Admins</td>
             </tr>
@@ -170,6 +178,8 @@
 
     </div>
   </div>
+  {{! List of alerts end }}
+
 </div>
 {{else}}
   <div class="spinner"></div>

ambari-web/app/templates/main/host/host_alerts.hbs

@@ -47,7 +47,7 @@
           <td class="first">{{alertInstance.label}}</td>
           <td>{{{alertInstance.status}}}</td>
           <td>{{alertInstance.service.serviceName}}</td>
-          <td>{{alertInstance.lastTriggered}}</td>
+          <td><time class="timeago" {{bindAttr data-original-title="instance.lastTriggered"}}>{{instance.lastTriggeredAgoFormatted}}</time></td>
           <td>{{alertInstance.formattedNotifications}}</td>
         </tr>
       {{/each}}

ambari-web/app/views/main/alert_definitions_view.js

@@ -30,9 +30,7 @@ App.MainAlertDefinitionsView = App.TableView.extend({
   }.property('controller.content.@each'),
 
   didInsertElement: function () {
-    Em.run.later(this, function () {
-      App.tooltip($(".enable-disable-button"));
-    }, 50) ;
+    this.tooltipsUpdater();
   },
 
   /**
@@ -44,6 +42,16 @@ App.MainAlertDefinitionsView = App.TableView.extend({
 
   colPropAssoc: ['', 'label', 'summary', 'service.serviceName', 'lastTriggered', 'groups', 'enabled'],
 
+  /**
+   * @type {string}
+   */
+  enabledTooltip: Em.I18n.t('alerts.table.state.enabled.tooltip'),
+
+  /**
+   * @type {string}
+   */
+  disabledTooltip: Em.I18n.t('alerts.table.state.disabled.tooltip'),
+
   sortView: sort.wrapperView,
 
   /**
@@ -367,5 +375,16 @@ App.MainAlertDefinitionsView = App.TableView.extend({
     if (this.get('paginationRightClass') === 'paginate_next') {
       this._super();
     }
-  }
-});
+  },
+
+  /**
+   * Update tooltips when <code>pageContent</code> is changed
+   * @method tooltipsUpdater
+   */
+  tooltipsUpdater: function () {
+    Em.run.next(this, function () {
+      App.tooltip($(".enable-disable-button, .timeago"));
+    });
+  }.observes('pageContent.@each')
+
+});

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

@@ -28,6 +28,10 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
    */
   isLoaded: false,
 
+  content: function () {
+    return this.get('controller.alerts');
+  }.property('controller.alerts.@each'),
+
   willInsertElement: function () {
     var self = this,
       updater = App.router.get('updateController');
@@ -54,7 +58,14 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
     this.filter();
   },
 
-  content: function () {
-    return this.get('controller.alerts');
-  }.property('controller.alerts.@each')
+  /**
+   * Update tooltips when <code>pageContent</code> is changed
+   * @method tooltipsUpdater
+   */
+  tooltipsUpdater: function () {
+    Em.run.next(this, function () {
+      App.tooltip($(".timeago"));
+    });
+  }.observes('pageContent.@each')
+
 });

ambari-web/test/models/alert_definition_test.js

@@ -108,4 +108,18 @@ describe('App.AlertDefinition', function() {
 
   });
 
+  describe('#lastTriggeredAgoFormatted', function () {
+
+    it('should be empty', function () {
+      model.set('lastTriggered', 0);
+      expect(model.get('lastTriggeredAgoFormatted')).to.equal('');
+    });
+
+    it('should not be empty', function () {
+      model.set('lastTriggered', new Date().getTime() - 61000);
+      expect(model.get('lastTriggeredAgoFormatted')).to.equal('about a minute ago');
+    });
+
+  });
+
 });