AMBARI-18912. Implement Create Alerts: step 1 select alert type.(XIWANG)

ambari-web/app/controllers/main/alerts/add_alert_definition/step1_controller.js

@@ -24,34 +24,25 @@ App.AddAlertDefinitionStep1Controller = Em.Controller.extend({
 
   /**
    * List of available alert definition types
-   * @type {{value: string, isActive: boolean}[]}
+   * @type {{name: string, isActive: boolean}[]}
    */
-  alertDefinitionsTypes: [
-    Em.Object.create({value: 'PORT', isActive: false, icon: 'icon-signal'}),
-    Em.Object.create({value: 'METRIC', isActive: false, icon: 'icon-bolt'}),
-    Em.Object.create({value: 'WEB', isActive: false, icon: 'icon-globe'}),
-    Em.Object.create({value: 'AGGREGATE', isActive: false, icon: 'icon-plus-sign-alt'}),
-    Em.Object.create({value: 'SCRIPT', isActive: false, icon: 'icon-code'}),
-    Em.Object.create({value: 'SERVER', isActive: false, icon: 'icon-desktop'}),
-    Em.Object.create({value: 'RECOVERY', isActive: false, icon: 'icon-desktop'})
-  ],
-
-  /**
-   * "Next"-button is disabled if user doesn't select any alert definition type
-   * @type {boolean}
-   */
-  isSubmitDisabled: Em.computed.everyBy('alertDefinitionsTypes', 'isActive', false),
+  alertDefinitionsTypes: function () {
+    return App.AlertType.find().map(function(option) {
+      return Em.Object.create({
+        name: option.get('name'),
+        displayName: option.get('displayName'),
+        icon: option.get('iconPath'),
+        description: option.get('description')
+      });
+    });
+  }.property(),
 
   /**
    * Set selectedType if it exists in the wizard controller
    * @method loadStep
    */
   loadStep: function() {
-    this.get('alertDefinitionsTypes').setEach('isActive', false);
-    var selectedType = this.get('content.selectedType');
-    if(selectedType) {
-      this.selectType({context: {value: selectedType}});
-    }
+    this.set('content.selectedType', '');
   },
 
   /**
@@ -61,10 +52,10 @@ App.AddAlertDefinitionStep1Controller = Em.Controller.extend({
    */
   selectType: function(e) {
     var type = e.context,
-      types = this.get('alertDefinitionsTypes');
-    types.setEach('isActive', false);
-    types.findProperty('value', type.value).set('isActive', true);
-    this.set('content.selectedType', type.value);
+        types = this.get('alertDefinitionsTypes');
+    this.set('content.selectedType', type.name);
+    $("[rel='selectable-tooltip']").trigger('mouseleave');
+    App.router.send('next');
   }
 
 });

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

@@ -225,7 +225,7 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
     var result = [];
     var alertDefinition = this.get('content');
     var isWizard = this.get('isWizard');
-    var units = this.get('content.reporting').findProperty('type','units') ?
+    var units = this.get('content.reporting') && this.get('content.reporting').findProperty('type','units') ?
       this.get('content.reporting').findProperty('type','units').get('text'): null;
 
     if (this.get('isWizard')) {
@@ -256,7 +256,7 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
         value: isWizard ? '' : this.getThresholdsProperty('critical', 'value')
       }),
       App.AlertConfigProperties.Parameter.create({
-        value: alertDefinition.get('uri.connectionTimeout'),
+        value: isWizard ? '': alertDefinition.get('uri.connectionTimeout'),
         threshold: "CRITICAL",
         name: 'connection_timeout',
         label: 'Connection Timeout',
@@ -311,7 +311,7 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
         value: isWizard ? '' : this.getThresholdsProperty('critical', 'value')
       }),
       App.AlertConfigProperties.Parameter.create({
-        value: alertDefinition.get('uri.connectionTimeout'),
+        value: isWizard ? '': alertDefinition.get('uri.connectionTimeout'),
         threshold: "CRITICAL",
         name: 'connection_timeout',
         label: 'Connection Timeout',
@@ -404,7 +404,7 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
         valueMetric: units
       }),
       App.AlertConfigProperties.Parameter.create({
-        value: alertDefinition.get('uri.connectionTimeout'),
+        value: isWizard ? '': alertDefinition.get('uri.connectionTimeout'),
         name: 'connection_timeout',
         label: 'Connection Timeout',
         displayType: 'parameter',
@@ -447,20 +447,22 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
       NUMERIC: App.AlertConfigProperties.Parameters.NumericMixin,
       PERCENT: App.AlertConfigProperties.Parameters.PercentageMixin
     };
-    alertDefinition.get('parameters').forEach(function (parameter) {
-      var mixin = mixins[parameter.get('type')] || {}; // validation depends on parameter-type
-      result.push(App.AlertConfigProperties.Parameter.create(mixin, {
-        value: isWizard ? '' : parameter.get('value'),
-        apiProperty: parameter.get('name'),
-        description: parameter.get('description'),
-        label: isWizard ? '' : parameter.get('displayName'),
-        threshold: isWizard ? '' : parameter.get('threshold'),
-        units: isWizard ? '' : parameter.get('units'),
-        type: isWizard ? '' : parameter.get('type'),
-        hidden: parameter.get('visibility') === "HIDDEN",
-        readonly: parameter.get('visibility') === "READ_ONLY"
-      }));
-    });
+    if (alertDefinition) {
+      alertDefinition.get('parameters').forEach(function (parameter) {
+        var mixin = mixins[parameter.get('type')] || {}; // validation depends on parameter-type
+        result.push(App.AlertConfigProperties.Parameter.create(mixin, {
+          value: isWizard ? '' : parameter.get('value'),
+          apiProperty: parameter.get('name'),
+          description: parameter.get('description'),
+          label: isWizard ? '' : parameter.get('displayName'),
+          threshold: isWizard ? '' : parameter.get('threshold'),
+          units: isWizard ? '' : parameter.get('units'),
+          type: isWizard ? '' : parameter.get('type'),
+          hidden: parameter.get('visibility') === "HIDDEN",
+          readonly: parameter.get('visibility') === "READ_ONLY"
+        }));
+      });
+    }
 
     return result;
   },
@@ -473,7 +475,7 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
   renderAggregateConfigs: function () {
     var isWizard = this.get('isWizard');
     var alertDefinition = this.get('content');
-    var units = this.get('content.reporting').findProperty('type','units') ?
+    var units = this.get('content.reporting') && this.get('content.reporting').findProperty('type','units') ?
         this.get('content.reporting').findProperty('type','units').get('text'): null;
     return [
       App.AlertConfigProperties.Description.create({

ambari-web/app/messages.js

@@ -1045,12 +1045,21 @@ Em.I18n.translations = {
   'form.validator.alertNotificationName':'Invalid Alert Notification Name. Only alphanumerics, hyphens, spaces and underscores are allowed.',
   'form.validator.configKey.specific':'"{0}" is invalid Key. Only alphanumerics, hyphens, underscores, asterisks and periods are allowed.',
 
-  'alerts.add.header': 'Create Alert Definition',
-  'alerts.add.step1.header': 'Choose Type',
-  'alerts.add.step2.header': 'Configure',
-  'alerts.add.step3.header': 'Review',
+  'alerts.add.header': 'Create Alert',
+  'alerts.add.step1.header': 'Choose Alert Type',
+  'alerts.add.step1.header.description': 'Select the type of alert you want to create',
+  'alerts.add.step2.header': 'Define Alert',
+  'alerts.add.step3.header': 'Specify Threshold',
   'alerts.add.step3.selectedType': 'Selected Type',
 
+  'alerts.add.wizard.step1.body.choose.tooltip': 'Click to select',
+  'alerts.add.wizard.step1.body.port.description':'Check TCP connectivity to a remote endpoint',
+  'alerts.add.wizard.step1.body.web.description':'Check for TCP connectivity and verify that a proper HTTP response code was returned',
+  'alerts.add.wizard.step1.body.metric.description':'Define JMX/AMS endpoints that can be queried for values',
+  'alerts.add.wizard.step1.body.script.description':'Defer all functionality to a Python script accessible to the Ambari agents from a specified relative or absolute path',
+  'alerts.add.wizard.step1.body.aggregate.description':'Combine the results of another alert definition from different nodes',
+  'alerts.add.wizard.step1.body.raw.description':'User can upload alert parameter using a JSON script',
+
   'alerts.fastAccess.popup.header': '{0} Critical or Warning Alerts',
   'alerts.fastAccess.popup.body.name': 'Alert Definition Name',
   'alerts.fastAccess.popup.body.showmore': 'Go to Alerts Definitions',

ambari-web/app/models/alerts/alert_definition.js

@@ -325,3 +325,57 @@ App.AlertMetricsSourceDefinition.FIXTURES = [];
 App.AlertMetricsUriDefinition.FIXTURES = [];
 App.AlertMetricsAmsDefinition.FIXTURES = [];
 App.AlertDefinitionParameter.FIXTURES = [];
+
+
+App.AlertType = DS.Model.extend({
+  name: DS.attr('string'),
+  displayName: DS.attr('string'),
+  iconPath: DS.attr('string'),
+  description: DS.attr('string'),
+  properties: DS.attr('array')
+});
+
+App.AlertType.FIXTURES = [
+  {
+    id: 'PORT',
+    name: 'PORT',
+    icon_path: 'icon-signin',
+    display_name: 'Port',
+    description: Em.I18n.t('alerts.add.wizard.step1.body.port.description')
+  },
+  {
+    id: 'WEB',
+    name: 'WEB',
+    icon_path: 'icon-globe',
+    display_name: 'Web',
+    description: Em.I18n.t('alerts.add.wizard.step1.body.web.description')
+  },
+  {
+    id: 'METRIC',
+    name: 'METRIC',
+    display_name: 'Metric',
+    icon_path: 'icon-bolt',
+    description: Em.I18n.t('alerts.add.wizard.step1.body.metric.description')
+  },
+  {
+    id: 'SCRIPT',
+    name: 'SCRIPT',
+    icon_path: 'icon-file-text',
+    display_name: 'Script',
+    description: Em.I18n.t('alerts.add.wizard.step1.body.script.description')
+  },
+  {
+    id: 'AGGREGATE',
+    name: 'AGGREGATE',
+    icon_path: 'icon-plus',
+    display_name: 'Aggregate',
+    description: Em.I18n.t('alerts.add.wizard.step1.body.aggregate.description')
+  },
+  {
+    id: 'RAW',
+    name: 'RAW',
+    icon_path: 'icon-align-justify',
+    display_name: 'Raw',
+    description: Em.I18n.t('alerts.add.wizard.step1.body.raw.description')
+  }
+];

ambari-web/app/styles/alerts.less

@@ -668,4 +668,68 @@
 .alert-definition-filter-list {
   max-height: 200px;
   overflow-y: scroll;
-}
+}
+
+/***** Start styles for alert create wizard *****/
+#create-alert-wizard-step1 {
+  .alert-types-container {
+    .alert-type {
+      height: 155px;
+      width: 30.5%;
+      margin: 0px 8px 20px 8px;
+      padding: 10px;
+      background: white;
+      border: 1px solid #ccc;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+    }
+    .alert-type:hover {
+      cursor: pointer;
+      border: 1px solid #eee;
+      background: #eee;
+    }
+    .icon {
+      span {
+        font-size: 35px;
+        line-height: 3.5;
+        margin-left: 5px;
+      }
+    }
+    .icon.PORT {
+      color: #F6D955;
+    }
+    .icon.WEB {
+      color: #9ADCD4;
+    }
+    .icon.METRIC {
+      color: #F69F79;
+    }
+    .icon.SCRIPT {
+      color: #F2C2AA;
+    }
+    .icon.AGGREGATE {
+      color: #8AD4C7;
+    }
+    .icon.RAW {
+      color: #C9A6B2;
+    }
+    .label-description {
+      padding-top: 10px;
+      .label-text {
+        font-size: 14px;
+        font-weight: bold;
+        margin-bottom: 5px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .description-text {
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+

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

@@ -16,14 +16,23 @@
 * limitations under the License.
 }}
 
-<h2>{{t alerts.add.step1.header}}</h2>
-
-{{#each type in controller.alertDefinitionsTypes}}
-  <a href="#" {{bindAttr class=":btn type.isActive:active"}} {{action selectType type target="controller"}}>
-    <span {{bindAttr class="type.icon"}}></span> {{type.value}}
-  </a>
-{{/each}}
-
-<div class="btn-area">
-  <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
+<div id="create-alert-wizard-step1">
+  <h2>{{t alerts.add.step1.header}}</h2>
+  <div class="alert alert-info">{{t alerts.add.step1.header.description}}</div>
+  <div class="alert-types-container row-fluid">
+    {{#each type in controller.alertDefinitionsTypes}}
+      <div class="span4 alert-type" rel="selectable-tooltip"
+        {{translateAttr data-original-title="alerts.add.wizard.step1.body.choose.tooltip"}}
+        {{action "selectType" type target="controller"}}>
+        <div {{bindAttr class="type.name :icon :span3"}}>
+          <span {{bindAttr class="type.icon"}}></span>
+        </div>
+        <div class="label-description span9">
+          <p class="label-text">{{type.displayName}}</p>
+          <p class="description-text">{{type.description}}</p>
+        </div>
+      </div>
+    {{/each}}
+  </div>
 </div>
+

ambari-web/app/views/main/alerts/add_alert_definition/step1_view.js

@@ -24,6 +24,9 @@ App.AddAlertDefinitionStep1View = Em.View.extend({
 
   didInsertElement: function() {
     this.get('controller').loadStep();
+    Em.run.later(this, function () {
+      App.tooltip($("[rel='selectable-tooltip']"));
+    }, 300);
   }
 
 });

ambari-web/test/controllers/main/alerts/add_alert_definition/step1_controller_test.js

@@ -30,13 +30,13 @@ describe('App.AddAlertDefinitionStep1Controller', function () {
   describe('#selectType', function() {
 
     beforeEach(function () {
-      controller.get('alertDefinitionsTypes').setEach('isActive', false);
+      controller.get('content').set('selectedType', '');
     });
 
     it('should set isActive for selected type', function () {
       var e = {context: {value: 'PORT'}};
       controller.selectType(e);
-      expect(controller.get('alertDefinitionsTypes').findProperty('value', 'PORT').get('isActive')).to.be.true;
+      expect(controller.get('content.selectedType')).to.equal('PORT');
     });
 
   });
@@ -45,30 +45,12 @@ describe('App.AddAlertDefinitionStep1Controller', function () {
 
     beforeEach(function () {
       controller.set('content.selectedType', 'PORT');
-
     });
 
     it('should set predefined type', function () {
       controller.loadStep();
-      expect(controller.get('alertDefinitionsTypes').findProperty('value', 'PORT').get('isActive')).to.be.true;
-    });
-
-  });
-
-  describe('#isSubmitDisabled', function () {
-
-    beforeEach(function () {
-      controller.get('alertDefinitionsTypes').setEach('isActive', false);
-    });
-
-    it('should be based on isActive', function () {
-
-      expect(controller.get('isSubmitDisabled')).to.be.true;
-      controller.get('alertDefinitionsTypes').objectAt(0).set('isActive', true);
-      expect(controller.get('isSubmitDisabled')).to.be.false;
-
+      expect(controller.get('content.selectedType').to.equal(''));
     });
 
   });
-
 });