AMBARI-8673. Alerts UI: Tooltips not going away on Alert-Definitions page

ambari-web/app/styles/alerts.less

@@ -582,3 +582,7 @@
   }
 }
 /*****end styles for alert popup*****/
+.enable-disable-button::before {
+  font-family: FontAwesome;
+  content: "\f011";
+}

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

@@ -41,9 +41,9 @@
                   </div>
                   <div class="name-text"><a href="#" {{action "gotoAlertDetails" alertInstance target="view"}}>{{alertInstance.label}}</a></div>
                   <div class="status-col" rel="alert-status-tooltip" {{bindAttr title="alertInstance.lastTriggered"}}>
-                    <span class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggeredVerboseDisplay"}}>
+                    <span>
                       <span class="status-icon">{{{alertInstance.status}}}</span>
-                      <time>{{alertInstance.lastTriggeredForFormatted}}</time>
+                      <time class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggeredVerboseDisplay"}}>{{alertInstance.lastTriggeredForFormatted}}</time>
                     </span>
                   </div>
               </div>

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

@@ -60,12 +60,11 @@
           <td class="last toggle-state-button">
             {{#if alertDefinition.enabled}}
               {{#isAccessible ADMIN}}
-                <span class="enable-disable-button" {{bindAttr data-original-title="view.enabledTooltip"}}>
-                  <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>
-                      <span class="icon-off"></span>
-                      {{t alerts.table.state.enabled}}
-                  </a>
-                </span>
+                <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>
+                  <span class="enable-disable-button" {{bindAttr data-original-title="view.enabledTooltip"}}>
+                    {{view.enabledDisplay}}
+                  </span>
+                </a>
               {{/isAccessible}}
               {{#isAccessible NON_ADMIN}}
                 <span {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>
@@ -74,12 +73,11 @@
               {{/isAccessible}}
             {{else}}
               {{#isAccessible ADMIN}}
-                <span class="enable-disable-button" {{bindAttr data-original-title="view.disabledTooltip"}}>
-                  <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>
-                      <span class="icon-off"></span>
-                      {{t alerts.table.state.disabled}}
-                  </a>
-                </span>
+                <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>
+                  <span class="enable-disable-button" {{bindAttr data-original-title="view.disabledTooltip"}}>
+                    {{view.disabledDisplay}}
+                  </span>
+                </a>
               {{/isAccessible}}
               {{#isAccessible NON_ADMIN}}
                 <span {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>

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

@@ -91,12 +91,11 @@
           <div class="span8">
             {{#if controller.content.enabled}}
               {{#isAccessible ADMIN}}
-                <span class="enable-disable-button" {{translateAttr data-original-title="alerts.table.state.enabled.tooltip"}}>
-                  <a href="#" {{action "toggleState" controller.content target="controller"}} {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
-                      <span class="icon-off"></span>
-                      {{t alerts.table.state.enabled}}
-                  </a>
-                </span>
+                <a href="#" {{action "toggleState" controller.content target="controller"}} {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+                  <span class="enable-disable-button" {{translateAttr data-original-title="alerts.table.state.enabled.tooltip"}}>
+                      {{view.enabledDisplay}}
+                  </span>
+                </a>
               {{/isAccessible}}
               {{#isAccessible NON_ADMIN}}
                 <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
@@ -105,12 +104,11 @@
               {{/isAccessible}}
             {{else}}
               {{#isAccessible ADMIN}}
-                <span class="enable-disable-button" {{translateAttr data-original-title="alerts.table.state.disabled.tooltip"}}>
-                  <a href="#" {{action "toggleState" controller.content target="controller"}} {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
-                      <span class="icon-off"></span>
-                      {{t alerts.table.state.disabled}}
-                  </a>
-                </span>
+                <a href="#" {{action "toggleState" controller.content target="controller"}} {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+                  <span class="enable-disable-button" {{translateAttr data-original-title="alerts.table.state.disabled.tooltip"}}>
+                    {{view.disabledDisplay}}
+                  </span>
+                </a>
               {{/isAccessible}}
               {{#isAccessible NON_ADMIN}}
                 <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>

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

@@ -52,6 +52,16 @@ App.MainAlertDefinitionsView = App.TableView.extend({
    */
   disabledTooltip: Em.I18n.t('alerts.table.state.disabled.tooltip'),
 
+  /**
+   * @type {string}
+   */
+  enabledDisplay: Em.I18n.t('alerts.table.state.enabled'),
+
+  /**
+   * @type {string}
+   */
+  disabledDisplay: Em.I18n.t('alerts.table.state.disabled'),
+
   sortView: sort.wrapperView,
 
   /**

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

@@ -28,6 +28,16 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
    */
   isLoaded: false,
 
+  /**
+   * @type {string}
+   */
+  enabledDisplay: Em.I18n.t('alerts.table.state.enabled'),
+
+  /**
+   * @type {string}
+   */
+  disabledDisplay: Em.I18n.t('alerts.table.state.disabled'),
+
   content: function () {
     return this.get('controller.alerts');
   }.property('controller.alerts.@each'),