AMBARI-8541. Alerts UI: Miscellaneous alerts UI style corrections (srimanth)

ambari-web/app/app.js

@@ -70,6 +70,8 @@ module.exports = Em.Application.create({
     switch (type) {
       case 'ADMIN':
         return this.get('isAdmin');
+      case 'NON_ADMIN':
+        return !this.get('isAdmin');
       case 'MANAGER':
         return this.get('isAdmin') || this.get('isOperator');
       case 'OPERATOR':

ambari-web/app/messages.js

@@ -848,7 +848,7 @@ Em.I18n.translations = {
 
   'alerts.fastAccess.popup.header': '{0} Critical or Warning Alerts',
   'alerts.fastAccess.popup.body.name': 'Alert Name',
-  'alerts.fastAccess.popup.body.showmore': 'Show all Alerts Definitions',
+  'alerts.fastAccess.popup.body.showmore': 'Go to Alerts Definitions',
   'alerts.fastAccess.popup.body.noalerts': 'No critical or warning alerts to display',
 
   'alerts.actions.create': 'Create Alert',
@@ -858,12 +858,14 @@ Em.I18n.translations = {
 
   'alerts.table.noAlerts': 'No Alerts to display',
   'alerts.table.header.lastTriggered': 'Last Triggered',
+  'alerts.table.header.lastTrigger': 'Last Trigger',
   'alerts.table.header.definitionName': 'Definition Name',
   'alerts.table.header.notification': 'Notification',
+  'alerts.table.state': 'State',
   'alerts.table.state.enabled': 'Enabled',
   'alerts.table.state.disabled': 'Disabled',
-  'alerts.table.state.enabled.tooltip': 'Disable this alert definition',
-  'alerts.table.state.disabled.tooltip': 'Enable this alert definition',
+  'alerts.table.state.enabled.tooltip': 'Click to disable this alert definition',
+  'alerts.table.state.disabled.tooltip': 'Click to enable this alert definition',
   'alerts.table.state.enabled.confirm.msg': 'You are about to Disable this alert definition.',
   'alerts.table.state.disabled.confirm.msg': 'You are about to Enable this alert definition.',
   'alerts.table.state.enabled.confirm.btn': 'Confirm Disable',
@@ -875,7 +877,7 @@ Em.I18n.translations = {
   'alerts.definition.details.enableDisable': 'Enable / Disable',
   'alerts.definition.details.groups': 'Groups',
   'alerts.definition.details.instances': 'Instances',
-  'alerts.definition.details.serviceHost': 'Service: Host',
+  'alerts.definition.details.serviceHost': 'Service / Host',
   'alerts.definition.details.24-hour': '24-Hour',
   'alerts.definition.details.notification': 'Notification',
   'alerts.definition.details.noAlerts': 'No alert instances to show',

ambari-web/app/models/alert_instance.js

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

ambari-web/app/styles/alerts.less

@@ -53,6 +53,14 @@
   }
 }
 
+.alert-definition-enable {
+  color: @health-status-green;
+}
+
+.alert-definition-disable {
+  color: gray;
+}
+
 .alerts-table {
 
   margin-top: 10px;
@@ -169,6 +177,9 @@
   hr {
     margin: 10px 0 0 0;
   }
+  .edit-description-button {
+    font-size: 14px;
+  }
   .edit-description-button:hover {
     text-decoration: none;
   }
@@ -191,6 +202,9 @@
     .properties-list {
       margin-top: 50px;
       text-align: left;
+      .property-name {
+        font-weight: bold;
+      }
       ul {
         list-style: none;
         margin: 0;
@@ -216,6 +230,8 @@
     .edit-buttons {
       margin-bottom: 0px;
       margin-top: -4px;
+      float: left;
+      margin-left: 7px;
     }
   }
 
@@ -389,22 +405,23 @@
     border-bottom: 1px solid #CCC;
     text-align: center;
     font-size: 15px;
-    padding: 0 0 20px 0;
+    padding: 0px 0px 20px 0px;
     height: 20px;
     .status-top {
-      width: 5%;
-      padding-left: 20px;
+      width: 12%;
+      padding-left: 5px;
+      min-width: 20px;
     }
     .name-top {
-      width: 30%;
-      padding-left: 110px;
+      width: 33%;
+      padding-left: 10px;
     }
     .service-top {
-      width: 30%;
-      padding-left: 5px;
+      width: 28%;
+      padding-left: 10px;
     }
     .last-triggered-top {
-      padding-left: 5px;
+      padding-left: 10px;
     }
     .status-top,.name-top,.service-top,.last-triggered-top {
       float: left;

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

@@ -20,7 +20,7 @@
   {{#if view.isLoaded}}
     <div class="alert-list-main-warp">
       <div class="top-wrap">
-        <div class="status-top"></div>
+        <div class="status-top">&nbsp;</div>
         <div class="name-top">{{t alerts.fastAccess.popup.body.name}}</div>
         <div class="service-top">{{t alerts.definition.details.serviceHost}}</div>
         <div class="last-triggered-top">{{t alerts.table.header.lastTriggered}}</div>
@@ -34,11 +34,12 @@
                 <div class="alert-list-line-cursor">
                   <div class="status-icon">{{{alertInstance.status}}}</div>
                   <div class="name-text"><a href="#" {{action "gotoAlertDetails" alertInstance target="view"}}>{{alertInstance.label}}</a></div>
-                  <div class="service-text"><a href="#" {{action "gotoService" alertInstance.service target="view"}}>{{alertInstance.service.displayName}}</a>:&nbsp;
+                  <div class="service-text"><a href="#" {{action "gotoService" alertInstance.service target="view"}}>{{alertInstance.service.displayName}}</a>
                     {{#if alertInstance.host}}
+                      {{#if alertInstance.service.displayName}}
+                        &nbsp;/&nbsp;
+                      {{/if}}
                       <a {{action "goToHostAlerts" alertInstance.host target="view"}} href="#">{{alertInstance.host.hostName}}</a>
-                    {{else}}
-                      <span class="na-text">{{t common.na}}</span>
                     {{/if}}
                   </div>
                   <div class="last-triggered-text">{{alertInstance.lastTriggered}}</div>

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

@@ -58,23 +58,33 @@
           <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}}
                 <span class="enable-disable-button" {{bindAttr data-original-title="view.enabledTooltip"}}>
-                  <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:enabled:disabled"}}>
+                  <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>
               {{/isAccessible}}
+              {{#isAccessible NON_ADMIN}}
+                <span {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>
+                      {{t alerts.table.state.enabled}}
+                </span>
+              {{/isAccessible}}
             {{else}}
-              {{t alerts.table.state.disabled}} &nbsp;
               {{#isAccessible ADMIN}}
                 <span class="enable-disable-button" {{bindAttr data-original-title="view.disabledTooltip"}}>
-                  <a href="#" {{action "toggleState" alertDefinition target="controller"}} {{bindAttr class="alertDefinition.enabled:enabled:disabled"}}>
+                  <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>
               {{/isAccessible}}
+              {{#isAccessible NON_ADMIN}}
+                <span {{bindAttr class="alertDefinition.enabled:alert-definition-enable:alert-definition-disable"}}>
+                      {{t alerts.table.state.disabled}}
+                </span>
+              {{/isAccessible}}
             {{/if}}
           </td>
         </tr>

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

@@ -25,10 +25,10 @@
     <div class="span9">
       <div class="definition-name row-fluid">
         {{#if controller.editing.label.isEditing}}
-          <div {{bindAttr class="controller.editing.label.isError:error :span8 :name-text-field :control-group"}}>
+          <div {{bindAttr class="controller.editing.label.isError:error :span5 :name-text-field :control-group"}}>
             {{view Em.TextField valueBinding="controller.editing.label.value"}}
           </div>
-          <div class="edit-buttons span3">
+          <div class="edit-buttons">
             <button {{action cancelEdit controller.editing.label target="controller"}} class="btn">{{t common.cancel}}</button>
             <button {{bindAttr disabled="controller.editing.label.isError"}} {{action saveEdit controller.editing.label target="controller"}}
                 class="btn btn-primary">{{t common.save}}
@@ -114,21 +114,25 @@
         {{/isAccessible}}
       </div>
       <div class="properties-list">
+        {{#if controller.content.service.displayName}}
         <div class="row-fluid">
-          <div class="span4">{{t common.service}}:</div>
-          <div class="span8"><span class="label label-info">{{controller.content.service.displayName}}</span></div>
-      </div>
+          <div class="span4 property-name">{{t common.service}}:</div>
+          <div class="span8"><span>{{controller.content.service.displayName}}</span></div>
+        </div>
+        {{/if}}
+        {{#if controller.content.componentNameFormatted}}
         <div class="row-fluid">
-          <div class="span4">{{t common.component}}:</div>
+          <div class="span4 property-name">{{t common.component}}:</div>
           <div class="span8">{{controller.content.componentNameFormatted}}</div>
-      </div>
+        </div>
+        {{/if}}
         <div class="row-fluid">
-          <div class="span4">{{t common.type}}:</div>
+          <div class="span4 property-name">{{t common.type}}:</div>
           <div class="span8"> {{controller.content.type}}</div>
-      </div>
+        </div>
       {{#if controller.groupsList.length}}
         <div class="row-fluid">
-          <div class="span4">{{t alerts.definition.details.groups}}:</div>
+          <div class="span4 property-name">{{t alerts.definition.details.groups}}:</div>
           <div class="span8">
             <ul>
               {{#each groupName in controller.groupsList}}
@@ -139,7 +143,7 @@
         </div>
       {{/if}}
         <div class="row-fluid">
-          <div class="span4">{{t alerts.table.header.lastTriggered}}:</div>
+          <div class="span4 property-name">{{t alerts.table.header.lastTrigger}}:</div>
           <div class="span8">{{controller.content.lastTriggeredFormatted}}</div>
         </div>
       </div>
@@ -170,11 +174,12 @@
             <tr>
               <td class="first">{{{instance.status}}}</td>
               <td>
-                <a {{action goToService instance.service target="controller"}} href="#">{{instance.service.displayName}}</a>:&nbsp;
+                <a {{action goToService instance.service target="controller"}} href="#">{{instance.service.displayName}}</a>
                 {{#if instance.host}}
+                  {{#if instance.service.displayName}}
+                    &nbsp;/&nbsp;
+                  {{/if}}
                   <a {{action goToHostAlerts instance.host target="controller"}} href="#">{{instance.host.hostName}}</a>
-                {{else}}
-                  {{t common.na}}
                 {{/if}}
               </td>
               <td><time class="timeago" {{bindAttr data-original-title="instance.lastTriggered"}}>{{instance.lastTriggeredAgoFormatted}}</time></td>

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

@@ -103,7 +103,7 @@ App.MainAlertDefinitionsView = App.TableView.extend({
    * @type {Em.View}
    */
   enabledSort: sort.fieldView.extend({
-    template:Em.Handlebars.compile('<span {{bindAttr class="view.status :column-name"}}><span class="icon-off"></span></span>'),
+    template:Em.Handlebars.compile('<span {{bindAttr class="view.status :column-name"}}>{{t alerts.table.state}}</span>'),
     column: 6,
     name: 'enabled'
   }),