AMBARI-8597. Alerts UI: Minor edit Alert Definition cleanups (srimanth)

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

@@ -165,10 +165,12 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
       }),
       App.AlertConfigProperties.Thresholds.OkThreshold.create({
         label: 'Thresholds',
+        showInputForValue: false,
         text: isWizard ? '' : this.getThresholdsProperty('ok', 'text'),
         value: isWizard ? '' : this.getThresholdsProperty('ok', 'value')
       }),
       App.AlertConfigProperties.Thresholds.CriticalThreshold.create({
+        showInputForValue: false,
         text: isWizard ? '' : this.getThresholdsProperty('critical', 'text'),
         value: isWizard ? '' : this.getThresholdsProperty('critical', 'value')
       })
@@ -282,14 +284,17 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
       }),
       App.AlertConfigProperties.Thresholds.OkThreshold.create({
         label: 'Thresholds',
+        showInputForValue: false,
         text: isWizard ? '' : this.getThresholdsProperty('ok', 'text'),
         value: isWizard ? '' : this.getThresholdsProperty('ok', 'value')
       }),
       App.AlertConfigProperties.Thresholds.WarningThreshold.create({
+        showInputForValue: false,
         text: isWizard ? '' : this.getThresholdsProperty('warning', 'text'),
         value: isWizard ? '' : this.getThresholdsProperty('warning', 'value')
       }),
       App.AlertConfigProperties.Thresholds.CriticalThreshold.create({
+        showInputForValue: false,
         text: isWizard ? '' : this.getThresholdsProperty('critical', 'text'),
         value: isWizard ? '' : this.getThresholdsProperty('critical', 'value')
       })
@@ -318,11 +323,13 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
       }),
       App.AlertConfigProperties.Thresholds.WarningThreshold.create({
         text: isWizard ? '' : this.getThresholdsProperty('warning', 'text'),
-        value: isWizard ? '' : this.getThresholdsProperty('warning', 'value')
+        value: isWizard ? '' : this.getThresholdsProperty('warning', 'value'),
+        valueMetric: '%'
       }),
       App.AlertConfigProperties.Thresholds.CriticalThreshold.create({
         text: isWizard ? '' : this.getThresholdsProperty('critical', 'text'),
-        value: isWizard ? '' : this.getThresholdsProperty('critical', 'value')
+        value: isWizard ? '' : this.getThresholdsProperty('critical', 'value'),
+        valueMetric: '%'
       })
     ];
   },

ambari-web/app/mappers/alert_definitions_mapper.js

@@ -35,6 +35,7 @@ App.alertDefinitionsMapper = App.QuickDataMapper.create({
   config: {
     id: 'AlertDefinition.id',
     name: 'AlertDefinition.name',
+    description: 'AlertDefinition.description',
     label: 'AlertDefinition.label',
     service_id: 'AlertDefinition.service_name',
     service_name: 'AlertDefinition.service_name',

ambari-web/app/models/alert_config.js

@@ -247,6 +247,18 @@ App.AlertConfigProperties = {
      */
     value: '',
 
+    /**
+     * Type of value. This will be a fixed set of types (like %).
+     */
+    valueMetric: null,
+
+    /**
+     * Value actually displayed to the user. This value is transformed
+     * based on the limited types of 'valueMetric's. Mappings from 
+     * 'value' to 'displayValue' is handled by observers.
+     */
+    displayValue: '',
+
     /**
      * threshold-text
      * @type {string}
@@ -259,6 +271,11 @@ App.AlertConfigProperties = {
 
     apiProperty: [],
 
+    init:function () {
+      this.valueWasChanged();
+      this._super();
+    },
+
     /**
      * @type {string[]}
      */
@@ -300,7 +317,33 @@ App.AlertConfigProperties = {
     wasChanged: function () {
       return (this.get('previousValue') !== null && this.get('value') !== this.get('previousValue')) ||
         (this.get('previousText') !== null && this.get('text') !== this.get('previousText'));
-    }.property('value', 'text', 'previousValue', 'previousText')
+    }.property('value', 'text', 'previousValue', 'previousText'),
+
+    valueWasChanged : function() {
+      var value = this.get('value');
+      var valueMetric = this.get('valueMetric');
+      var displayValue = this.get('displayValue');
+      var newDisplayValue = value;
+      if ('%' == valueMetric) {
+        newDisplayValue = (Number(value) * 100) + '';
+      }
+      if (newDisplayValue != displayValue) {
+        this.set('displayValue', newDisplayValue);
+      }
+    }.observes('value', 'valueMetric'),
+
+    displayValueWasChanged: function () {
+      var value = this.get('value');
+      var valueMetric = this.get('valueMetric');
+      var displayValue = this.get('displayValue');
+      var newValue = displayValue;
+      if ('%' == valueMetric) {
+        newValue = (Number(displayValue) / 100) + '';
+      }
+      if (newValue != value) {
+        this.set('value', newValue);
+      }
+    }.observes('displayValue', 'valueMetric')
 
   }),
 

ambari-web/app/models/alert_definition.js

@@ -23,6 +23,7 @@ App.AlertDefinition = DS.Model.extend({
 
   name: DS.attr('string'),
   label: DS.attr('string'),
+  description: DS.attr('string'),
   service: DS.belongsTo('App.Service'),
   serviceName: DS.attr('string'),
   componentName: DS.attr('string'),
@@ -213,8 +214,6 @@ App.AlertDefinition = DS.Model.extend({
   severityOrder: ['CRITICAL', 'WARNING', 'OK', 'UNKNOWN', 'PENDING'],
   order: ['OK', 'WARNING', 'CRITICAL', 'UNKNOWN'],
 
-  // todo: in future be mapped from server response
-  description: 'Description for the Alert Definition.',
   // todo: in future be mapped from server response
   thresholds: '5-10'
 });

ambari-web/app/styles/alerts.less

@@ -158,24 +158,19 @@
   .col1,
   td:first-child + td,
   th:first-child + th {
-    width: 15%;
+    width: 20%;
   }
 
   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
-    width: 15%;
+    width: 10%
   }
+
   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
-    width: 10%
-  }
-
-  .col4,
-  td:first-child + td + td + td + td,
-  th:first-child + th + th + th + th {
-    width: 30%;
+    width: 40%;
   }
 
   .alert-text {
@@ -188,6 +183,15 @@
 }
 
 #alert-definition-details {
+  .box {
+    .box-header {
+      .edit-link {
+        margin: 5px;
+      }
+    }
+    margin-top: 20px;
+    margin-bottom: 0px;
+  }
   .definition-details-block {
     margin-top: 30px;
     .multiline-text {
@@ -207,7 +211,7 @@
 
   .status {
     margin-bottom: 30px;
-    text-align: center;
+    text-align: right;
     .label {
       font-size: 14px;
       padding: 5px 8px;
@@ -258,7 +262,8 @@
 
   .edit-buttons {
     text-align: right;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+    margin-right: 10px;
   }
 
   .text-area-edit {
@@ -273,11 +278,6 @@
     cursor: pointer;
   }
 
-  .buttons-block {
-    button {
-      font-size: 1.1em;
-    }
-  }
 }
 
 .alert-configs {
@@ -302,6 +302,10 @@
     }
   }
 
+  .input-append {
+    padding-right: 13px;
+  }
+
   .alert-interval-input {
     input {
       width: 20%;

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

@@ -18,17 +18,17 @@
 
 <div class="control-group">
   <div class="span3"><span {{bindAttr class="view.property.badgeCssClass :alert-state-single-host :label"}}>{{view.property.badge}}</span>&nbsp;</div>
-  <div class="span2">
-    {{#if view.property.showInputForValue}}
-      {{view Em.TextField valueBinding="view.property.value" disabledBinding="view.property.isDisabled" class="span11"}}
-    {{/if}}
-  </div>
-  <div class="span7">
+  {{#if view.property.showInputForValue}}
+    <div {{bindAttr class=":span2 view.property.valueMetric:input-append"}}>
+        {{view Em.TextField valueBinding="view.property.displayValue" disabledBinding="view.property.isDisabled" class="span11"}}
+        {{#if view.property.valueMetric}}
+          <span class="add-on">{{view.property.valueMetric}}</span>
+        {{/if}}
+    </div>
+  {{/if}}
+  <div {{bindAttr class=":alert-text-input view.property.showInputForValue:span7:span9"}}>
     {{#if view.property.showInputForText}}
       {{view Em.TextField valueBinding="view.property.text" disabledBinding="view.property.isDisabled"}}
     {{/if}}
   </div>
-</div>
-
-
-
+</div>

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

@@ -51,8 +51,12 @@
       <div><a href="javascript:void(null)" data-toggle="modal" {{action back}}><i class="icon-arrow-left"></i>&nbsp;{{t common.back}}</a></div>
 
       {{! Alert Definition Configs }}
-      <div class="definition-details-block">
-        <strong>{{t common.configuration}}</strong>
+      <div class="box">
+        <div class="box-header">
+          <div class="pull-left">
+            <h4>{{t common.configuration}}</h4>
+          </div>
+          <div class="pull-right span5 row-fluid" style="padding:0 10px;">
           {{#isAccessible ADMIN}}
             {{#unless App.router.mainAlertDefinitionConfigsController.canEdit}}
               <a {{action editConfigs target="App.router.mainAlertDefinitionConfigsController"}} class="pull-right edit-link">
@@ -60,7 +64,8 @@
               </a>
             {{/unless}}
           {{/isAccessible}}
-        <hr>
+          </div>
+        </div>
         {{view App.AlertDefinitionConfigsView contentBinding="view.controller.content" alertDefinitionTypeBinding="view.controller.content.type" canEdit=false}}
         {{#if App.router.mainAlertDefinitionConfigsController.canEdit}}
           <div class="edit-buttons">
@@ -72,7 +77,6 @@
         {{/if}}
       </div>
       {{! Alert Definition Configs end }}
-
     </div>
     {{! Left column end }}
 
@@ -81,31 +85,38 @@
       <div class="status">
         {{{controller.content.status}}}
       </div>
-      <div class="buttons-block">
-        {{#isAccessible ADMIN}}
-          {{#if controller.content.enabled}}
-            <button {{action toggleState target="controller"}} class="btn btn-danger disable-button"><i
-               class="icon-power-off"></i>&nbsp;{{t alerts.definition.details.disable}}</button>
-          {{else}}
-            <button {{action toggleState target="controller"}} class="btn btn-success enable-button"><i
-               class="icon-power-off"></i>&nbsp;{{t alerts.definition.details.enable}}</button>
-          {{/if}}
-          <button {{action deleteAlertDefinition target="controller"}} class="btn delete-button"><i
-              class="icon-trash"></i>&nbsp;{{t common.delete}}</button>
-        {{/isAccessible}}
-      </div>
       <div class="properties-list">
         <div class="row-fluid">
           <div class="span4 property-name">{{t alerts.table.state}}:</div>
           <div class="span8">
             {{#if controller.content.enabled}}
-              <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
-                <span class="icon-off"></span> {{t alerts.table.state.enabled}}
-              </span>
+              {{#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>
+              {{/isAccessible}}
+              {{#isAccessible NON_ADMIN}}
+                <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+                      {{t alerts.table.state.enabled}}
+                </span>
+              {{/isAccessible}}
             {{else}}
-              <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
-                <span class="icon-off"></span> {{t alerts.table.state.disabled}}
-              </span>
+              {{#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>
+              {{/isAccessible}}
+              {{#isAccessible NON_ADMIN}}
+                <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+                      {{t alerts.table.state.disabled}}
+                </span>
+              {{/isAccessible}}
             {{/if}}
           </div>
         </div>
@@ -160,7 +171,6 @@
         <thead>
         <tr>
           <th class="first">{{t alerts.definition.details.serviceHost}}</th>
-          <th>{{t alerts.table.header.lastTriggered}}</th>
           <th>{{t common.status}}</th>
           <th>{{t alerts.definition.details.24-hour}}</th>
           <th>{{t alerts.table.header.text}}</th>
@@ -179,7 +189,6 @@
                   <a {{action goToHostAlerts instance.host target="controller"}} href="#">{{instance.host.hostName}}</a>
                 {{/if}}
               </td>
-              <td>{{instance.lastTriggeredFormatted}}</td>
               <td>{{{instance.status}}}  <time class="timeago" {{bindAttr data-original-title="instance.lastTriggeredFormatted"}}>{{instance.lastTriggeredForFormatted}}</time></td>
               <td>{{view view.lastDayCount hostBinding="instance.host"}}</td>
               <td><span class="alert-text" {{bindAttr data-original-title="instance.text"}} class="alert-text">{{instance.text}}</span></td>

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

@@ -376,7 +376,10 @@ App.MainAlertDefinitionsView = App.TableView.extend({
       if (value != undefined ) {
         this.get('content').setEach('selected', false);
         this.set('selected', this.get('content').findProperty('value', value));
-        this.get('content').findProperty('value', value).set('selected', true);
+        var selectEntry = this.get('content').findProperty('value', value);
+        if (selectEntry) {
+          selectEntry.set('selected', true);
+        }
       }
     }.observes('value')
   }),

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

@@ -65,9 +65,9 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
    */
   tooltipsUpdater: function () {
     Em.run.next(function () {
-      App.tooltip($(".timeago, .alert-text"));
+      App.tooltip($(".timeago, .alert-text, .enable-disable-button"));
     });
-  }.observes('pageContent.@each'),
+  }.observes('pageContent.@each.text', 'controller.content.enabled'),
 
   /**
    * View calculates and represents count of alerts on appropriate host during last day

ambari-web/test/models/alert_config_test.js

@@ -52,6 +52,35 @@ describe('App.AlertConfigProperties', function () {
 
     });
 
+    describe('#valueWasChanged', function () {
+
+      it('value change should effect displayValue', function () {
+
+        model = App.AlertConfigProperties.Threshold.create({
+          value: '0.4',
+          valueMetric: '%',
+          text: 'text',
+          showInputForValue: false,
+          showInputForText: false
+        });
+
+        expect(model.get('displayValue')).to.eql('40');
+      });
+
+      it('value change should not effect displayValue', function () {
+
+        model = App.AlertConfigProperties.Threshold.create({
+          value: '0.4',
+          text: 'text',
+          showInputForValue: false,
+          showInputForText: false
+        });
+
+        expect(model.get('displayValue')).to.eql('0.4');
+      });
+
+    });
+
     describe('#badgeCssClass', function () {
 
       it ('should be based on badge', function () {