AMBARI-8520. Alerts UI: In create alert wizard, need per alert-type configurations on Page-2. (akovalenko)

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

@@ -28,7 +28,7 @@ App.AddAlertDefinitionStep1Controller = Em.Controller.extend({
    */
   alertDefinitionsTypes: [
     Em.Object.create({value: 'PORT', isActive: false, icon: 'icon-signal'}),
-    Em.Object.create({value: 'METRICS', isActive: false, icon: 'icon-bolt'}),
+    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'})

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

@@ -20,6 +20,6 @@ var App = require('app');
 
 App.AddAlertDefinitionStep2Controller = Em.Controller.extend({
 
-  name: 'addAlertDefinitionStep2'
+  name: 'addAlertDefinitionStep2Controller'
 
 });

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

@@ -20,6 +20,6 @@ var App = require('app');
 
 App.AddAlertDefinitionStep3Controller = Em.Controller.extend({
 
-  name: 'addAlertDefinitionStep3'
+  name: 'addAlertDefinitionStep3Controller'
 
 });

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

@@ -33,6 +33,19 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
    */
   canEdit: true,
 
+  /**
+   * Define configs view mode (Wizard or Definition Details page)
+   * @type {Boolean}
+   */
+  isWizard: false,
+
+  /**
+   * Alert Definition type
+   * binding is set in template
+   * @type {String}
+   */
+  alertDefinitionType: '',
+
   /**
    * Array of displayNames of all services
    * is used for "Service" config options
@@ -42,6 +55,12 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
     return App.Service.find().mapProperty('displayName');
   }.property(),
 
+  /**
+   * All possible values for scope propery
+   * @type {Array}
+   */
+  allScopes: ['Any', 'Host', 'Service'],
+
   /**
    * Array of all aggregate-alerts names
    * @type {Array}
@@ -81,21 +100,37 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
    * @method onServiceSelect
    */
   onServiceSelect: function () {
-    var serviceProperty = this.get('configs').findProperty('label', 'Service');
-    if (serviceProperty) {
-      var componentsProperty = this.get('configs').findProperty('label', 'Component');
+    var serviceProperty = this.get('configs').findProperty('name', 'service');
+    if (serviceProperty && serviceProperty.get('value') !== 'Ambari') {
+      var componentsProperty = this.get('configs').findProperty('name', 'component');
       componentsProperty.set('options', ['No component'].concat(App.HostComponent.find().filterProperty('service.displayName', serviceProperty.get('value')).mapProperty('displayName').uniq()));
     }
   }.observes('configs.@each.value'),
 
+  /**
+   * OnSelect handler for <code>select_type</code> property
+   * disable fields related to definition type and set options to select lists
+   */
+  changeType: function (selectedType) {
+    if (selectedType === 'alert_type_service') {
+      this.get('configs').findProperty('name', 'service').set('isDisabled', false).set('options', this.get('allServices')).set('value', this.get('allServices')[0]);
+      this.get('configs').findProperty('name', 'component').set('isDisabled', false).set('value', 'No component');
+      this.get('configs').findProperty('name', 'scope').set('isDisabled', false).set('options', this.get('allScopes')).set('value', this.get('allScopes')[0]);
+    } else {
+      this.get('configs').findProperty('name', 'service').set('isDisabled', true).set('options', ['Ambari']).set('value', 'Ambari');
+      this.get('configs').findProperty('name', 'component').set('isDisabled', true).set('options', ['Ambari Agent']).set('value', 'Ambari Agent');
+      this.get('configs').findProperty('name', 'scope').set('isDisabled', true).set('options', ['Host']).set('value', 'Host');
+    }
+  },
+
   /**
    * Render array of configs for appropriate alert definition type
    * @method renderConfigs
    */
   renderConfigs: function () {
-    var alertDefinition = this.get('content');
+    var alertDefinitionType = this.get('alertDefinitionType');
     var configs = [];
-    switch (alertDefinition.get('type')) {
+    switch (alertDefinitionType) {
       case 'PORT':
         configs = this.renderPortConfigs();
         break;
@@ -112,7 +147,7 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
         configs = this.renderAggregateConfigs();
         break;
       default:
-        console.error('Incorrect Alert Definition Type: ', alertDefinition.get('type'));
+        console.error('Incorrect Alert Definition Type: ', alertDefinitionType);
     }
 
     configs.setEach('isDisabled', !this.get('canEdit'));
@@ -126,40 +161,32 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
    * @returns {Array}
    */
   renderPortConfigs: function () {
+    var result = [];
     var alertDefinition = this.get('content');
-    return [
-      App.AlertConfigProperties.AlertName.create({
-        value: alertDefinition.get('name')
-      }),
-      App.AlertConfigProperties.Service.create({
-        options: this.get('allServices'),
-        value: alertDefinition.get('service.displayName')
-      }),
-      App.AlertConfigProperties.Component.create({
-        options: this.get('allComponents'),
-        value: alertDefinition.get('componentName') ? App.format.role(alertDefinition.get('componentName')) : 'No component'
-      }),
-      App.AlertConfigProperties.Scope.create({
-        value: alertDefinition.get('scope').toLowerCase().capitalize()
-      }),
-      App.AlertConfigProperties.Description.create({
-        value: alertDefinition.get('description')
-      }),
+    var isWizard = this.get('isWizard');
+
+    if (this.get('isWizard')) {
+      result = result.concat(this.renderCommonWizardConfigs());
+    }
+
+    result = result.concat([
       App.AlertConfigProperties.Interval.create({
-        value: alertDefinition.get('interval')
+        value: isWizard ? '' : alertDefinition.get('interval')
       }),
       App.AlertConfigProperties.Thresholds.create({
-        value: this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
-        from: this.get('thresholdsFrom'),
-        to: this.get('thresholdsTo')
+        value: isWizard ? '' : this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
+        from: isWizard ? '' : this.get('thresholdsFrom'),
+        to: isWizard ? '' : this.get('thresholdsTo')
       }),
       App.AlertConfigProperties.URI.create({
-        value: alertDefinition.get('uri')
+        value: isWizard ? '' : alertDefinition.get('uri')
       }),
       App.AlertConfigProperties.DefaultPort.create({
-        value: alertDefinition.get('defaultPort')
+        value: isWizard ? '' : alertDefinition.get('defaultPort')
       })
-    ];
+    ]);
+
+    return result;
   },
 
   /**
@@ -168,35 +195,25 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
    * @returns {Array}
    */
   renderMetricConfigs: function () {
+    var result = [];
     var alertDefinition = this.get('content');
-    return [
-      App.AlertConfigProperties.AlertName.create({
-        value: alertDefinition.get('name')
-      }),
-      App.AlertConfigProperties.Service.create({
-        options: this.get('allServices'),
-        value: alertDefinition.get('service.displayName')
-      }),
-      App.AlertConfigProperties.Component.create({
-        options: this.get('allComponents'),
-        value: alertDefinition.get('componentName') ? App.format.role(alertDefinition.get('componentName')) : 'No component'
-      }),
-      App.AlertConfigProperties.Scope.create({
-        value: alertDefinition.get('scope').toLowerCase().capitalize()
-      }),
-      App.AlertConfigProperties.Description.create({
-        value: alertDefinition.get('description')
-      }),
+    var isWizard = this.get('isWizard');
+
+    if (this.get('isWizard')) {
+      result = result.concat(this.renderCommonWizardConfigs());
+    }
+
+    result = result.concat([
       App.AlertConfigProperties.Interval.create({
-        value: alertDefinition.get('interval')
+        value: isWizard ? '' : alertDefinition.get('interval')
       }),
       App.AlertConfigProperties.Thresholds.create({
-        value: this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
-        from: this.get('thresholdsFrom'),
-        to: this.get('thresholdsTo')
+        value: isWizard ? '' : this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
+        from: isWizard ? '' : this.get('thresholdsFrom'),
+        to: isWizard ? '' : this.get('thresholdsTo')
       }),
       App.AlertConfigProperties.URIExtended.create({
-        value: JSON.stringify({
+        value: isWizard ? '' : JSON.stringify({
           http: alertDefinition.get('uri.http'),
           https: alertDefinition.get('uri.https'),
           https_property: alertDefinition.get('uri.httpsProperty'),
@@ -204,14 +221,16 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
         })
       }),
       App.AlertConfigProperties.Metrics.create({
-        value: alertDefinition.get('jmx.propertyList') ? alertDefinition.get('jmx.propertyList').join(',\n') : alertDefinition.get('ganglia.propertyList').join(',\n'),
-        isJMXMetric: !!alertDefinition.get('jmx.propertyList')
+        value: isWizard ? '' : alertDefinition.get('jmx.propertyList') ? alertDefinition.get('jmx.propertyList').join(',\n') : alertDefinition.get('ganglia.propertyList').join(',\n'),
+        isJMXMetric: isWizard ? false : !!alertDefinition.get('jmx.propertyList')
       }),
       App.AlertConfigProperties.FormatString.create({
-        value: alertDefinition.get('jmx.value') ? alertDefinition.get('jmx.value') : alertDefinition.get('ganglia.value'),
-        isJMXMetric: !!alertDefinition.get('jmx.value')
+        value: isWizard ? '' : alertDefinition.get('jmx.value') ? alertDefinition.get('jmx.value') : alertDefinition.get('ganglia.value'),
+        isJMXMetric: isWizard ? false : !!alertDefinition.get('jmx.value')
       })
-    ];
+    ]);
+
+    return result;
   },
 
   /**
@@ -220,42 +239,34 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
    * @returns {Array}
    */
   renderWebConfigs: function () {
+    var result = [];
     var alertDefinition = this.get('content');
-    return [
-      App.AlertConfigProperties.AlertName.create({
-        value: alertDefinition.get('name')
-      }),
-      App.AlertConfigProperties.Service.create({
-        options: this.get('allServices'),
-        value: alertDefinition.get('service.displayName')
-      }),
-      App.AlertConfigProperties.Component.create({
-        options: this.get('allComponents'),
-        value: alertDefinition.get('componentName') ? App.format.role(alertDefinition.get('componentName')) : 'No component'
-      }),
-      App.AlertConfigProperties.Scope.create({
-        value: alertDefinition.get('scope').toLowerCase().capitalize()
-      }),
-      App.AlertConfigProperties.Description.create({
-        value: alertDefinition.get('description')
-      }),
+    var isWizard = this.get('isWizard');
+
+    if (this.get('isWizard')) {
+      result = result.concat(this.renderCommonWizardConfigs());
+    }
+
+    result = result.concat([
       App.AlertConfigProperties.Interval.create({
-        value: alertDefinition.get('interval')
+        value: isWizard ? '' : alertDefinition.get('interval')
       }),
       App.AlertConfigProperties.Thresholds.create({
-        value: this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
-        from: this.get('thresholdsFrom'),
-        to: this.get('thresholdsTo')
+        value: isWizard ? '' : this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
+        from: isWizard ? '' : this.get('thresholdsFrom'),
+        to: isWizard ? '' : this.get('thresholdsTo')
       }),
       App.AlertConfigProperties.URIExtended.create({
-        value: JSON.stringify({
+        value: isWizard ? '' : JSON.stringify({
           http: alertDefinition.get('uri.http'),
           https: alertDefinition.get('uri.https'),
           https_property: alertDefinition.get('uri.httpsProperty'),
           https_property_value: alertDefinition.get('uri.httpsPropertyValue')
         })
       })
-    ];
+    ]);
+
+    return result;
   },
 
   /**
@@ -264,37 +275,29 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
    * @returns {Array}
    */
   renderScriptConfigs: function () {
+    var result = [];
     var alertDefinition = this.get('content');
-    return [
-      App.AlertConfigProperties.AlertName.create({
-        value: alertDefinition.get('name')
-      }),
-      App.AlertConfigProperties.Service.create({
-        options: this.get('allServices'),
-        value: alertDefinition.get('service.displayName')
-      }),
-      App.AlertConfigProperties.Component.create({
-        options: this.get('allComponents'),
-        value: alertDefinition.get('componentName') ? App.format.role(alertDefinition.get('componentName')) : 'No component'
-      }),
-      App.AlertConfigProperties.Scope.create({
-        value: alertDefinition.get('scope').toLowerCase().capitalize()
-      }),
-      App.AlertConfigProperties.Description.create({
-        value: alertDefinition.get('description')
-      }),
+    var isWizard = this.get('isWizard');
+
+    if (this.get('isWizard')) {
+      result = result.concat(this.renderCommonWizardConfigs());
+    }
+
+    result = result.concat([
       App.AlertConfigProperties.Interval.create({
-        value: alertDefinition.get('interval')
+        value: isWizard ? '' : alertDefinition.get('interval')
       }),
       App.AlertConfigProperties.Thresholds.create({
-        value: this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
-        from: this.get('thresholdsFrom'),
-        to: this.get('thresholdsTo')
+        value: isWizard ? '' : this.get('thresholdsFrom') + '-' + this.get('thresholdsTo'),
+        from: isWizard ? '' : this.get('thresholdsFrom'),
+        to: isWizard ? '' : this.get('thresholdsTo')
       }),
       App.AlertConfigProperties.Path.create({
-        value: alertDefinition.get('location')
+        value: isWizard ? '' : alertDefinition.get('location')
       })
-    ];
+    ]);
+
+    return result;
   },
 
   /**
@@ -303,14 +306,50 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
    * @returns {Array}
    */
   renderAggregateConfigs: function () {
+    var isWizard = this.get('isWizard');
     var alertDefinition = this.get('content');
     return [
       App.AlertConfigProperties.AlertNameSelected.create({
-        value: alertDefinition.get('name'),
+        value: isWizard ? this.get('aggregateAlertNames')[0] : alertDefinition.get('name'),
         options: this.get('aggregateAlertNames')
       }),
       App.AlertConfigProperties.Description.create({
-        value: alertDefinition.get('description')
+        value: isWizard ? '' : alertDefinition.get('description')
+      })
+    ];
+  },
+
+  /**
+   * Render common list of configs used in almost all alert types in wizard
+   * @returns {Array}
+   */
+  renderCommonWizardConfigs: function () {
+    return [
+      App.AlertConfigProperties.AlertName.create({
+        value: ''
+      }),
+      App.AlertConfigProperties.ServiceAlertType.create({
+        value: true
+      }),
+      App.AlertConfigProperties.Service.create({
+        options: this.get('allServices'),
+        value: this.get('allServices')[0],
+        isShifted: true
+      }),
+      App.AlertConfigProperties.Component.create({
+        options: this.get('allComponents'),
+        value: 'No component',
+        isShifted: true
+      }),
+      App.AlertConfigProperties.Scope.create({
+        options: this.get('allScopes'),
+        isShifted: true
+      }),
+      App.AlertConfigProperties.HostAlertType.create({
+        value: false
+      }),
+      App.AlertConfigProperties.Description.create({
+        value: ''
       })
     ];
   },
@@ -395,6 +434,20 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({
     }, this);
 
     return propertiesToUpdate;
+  },
+
+  /**
+   * Return array of all config values
+   * used to save configs to local db in wizard
+   * @returns {Array}
+   */
+  getConfigsValues: function () {
+    return this.get('configs').map(function (property) {
+      return {
+        name: property.get('name'),
+        value: property.get('value')
+      }
+    });
   }
 
 });

ambari-web/app/models/alert_config.js

@@ -69,6 +69,12 @@ App.AlertConfigProperty = Ember.Object.extend({
    */
   classNames: '',
 
+  /**
+   * define whether row with property should be shifted right
+   * @type {Boolean}
+   */
+  isShifted: false,
+
   /**
    * name or names of properties related to config
    * may be either string for one property or array of strings for multiple properties
@@ -84,6 +90,17 @@ App.AlertConfigProperty = Ember.Object.extend({
    */
   isJMXMetric: null,
 
+  /**
+   * define place to show label
+   * if true - label is shown before input
+   * if false - label is shown after input
+   * @type {Boolean}
+   */
+  isPreLabeled: function () {
+    var afterLabeledTypes = ['radioButton'];
+    return !afterLabeledTypes.contains(this.get('displayType'));
+  }.property('displayType'),
+
   /**
    * value converted to appropriate format for sending to server
    * should be computed property
@@ -117,6 +134,8 @@ App.AlertConfigProperty = Ember.Object.extend({
         return App.AlertConfigSelectView;
       case 'threshold':
         return App.AlertConfigThresholdView;
+      case 'radioButton':
+        return App.AlertConfigRadioButtonView;
       default:
         console.error('Unable to find viewClass for displayType ', displayType);
     }
@@ -127,17 +146,32 @@ App.AlertConfigProperty = Ember.Object.extend({
 App.AlertConfigProperties = {
 
   AlertName: App.AlertConfigProperty.extend({
+    name: 'alert_name',
     label: 'Alert Name',
     displayType: 'textField',
     classNames: 'alert-text-input',
     apiProperty: 'name'
   }),
   AlertNameSelected: App.AlertConfigProperty.extend({
+    name: 'alert_name',
     label: 'Alert Name',
     displayType: 'select',
     apiProperty: 'name'
   }),
+  ServiceAlertType: App.AlertConfigProperty.extend({
+    name: 'alert_type_service',
+    label: 'Service Alert Definition',
+    displayType: 'radioButton',
+    group: 'alert_type'
+  }),
+  HostAlertType: App.AlertConfigProperty.extend({
+    name: 'alert_type_host',
+    label: 'Host Alert Definition',
+    displayType: 'radioButton',
+    group: 'alert_type'
+  }),
   Service: App.AlertConfigProperty.extend({
+    name: 'service',
     label: 'Service',
     displayType: 'select',
     apiProperty: 'service_name',
@@ -146,6 +180,7 @@ App.AlertConfigProperties = {
     }.property('value')
   }),
   Component: App.AlertConfigProperty.extend({
+    name: 'component',
     label: 'Component',
     displayType: 'select',
     apiProperty: 'component_name',
@@ -154,8 +189,8 @@ App.AlertConfigProperties = {
     }.property('value')
   }),
   Scope: App.AlertConfigProperty.extend({
+    name: 'scope',
     label: 'Scope',
-    options: ['Any', 'Host', 'Service'],
     displayType: 'select',
     apiProperty: 'scope',
     apiFormattedValue: function () {
@@ -163,6 +198,7 @@ App.AlertConfigProperties = {
     }.property('value')
   }),
   Description: App.AlertConfigProperty.extend({
+    name: 'description',
     label: 'Description',
     displayType: 'textArea',
     classNames: 'alert-config-text-area',
@@ -170,6 +206,7 @@ App.AlertConfigProperties = {
     apiProperty: 'description'
   }),
   Interval: App.AlertConfigProperty.extend({
+    name: 'interval',
     label: 'Interval',
     displayType: 'textField',
     unit: 'Second',
@@ -177,6 +214,7 @@ App.AlertConfigProperties = {
     apiProperty: 'interval'
   }),
   Thresholds: App.AlertConfigProperty.extend({
+    name: 'thresholds',
     label: 'Thresholds',
     displayType: 'threshold',
     classNames: 'alert-thresholds-input',
@@ -212,12 +250,14 @@ App.AlertConfigProperties = {
     }.property('from', 'to')
   }),
   URI: App.AlertConfigProperty.extend({
+    name: 'uri',
     label: 'URI',
     displayType: 'textField',
     classNames: 'alert-text-input',
     apiProperty: 'source.uri'
   }),
   URIExtended: App.AlertConfigProperty.extend({
+    name: 'uri',
     label: 'URI',
     displayType: 'textArea',
     classNames: 'alert-config-text-area',
@@ -233,18 +273,21 @@ App.AlertConfigProperties = {
     }.property('value')
   }),
   DefaultPort: App.AlertConfigProperty.extend({
+    name: 'default_port',
     label: 'Default Port',
     displayType: 'textField',
     classNames: 'alert-port-input',
     apiProperty: 'source.default_port'
   }),
   Path: App.AlertConfigProperty.extend({
+    name: 'path',
     label: 'Path',
     displayType: 'textField',
     classNames: 'alert-text-input',
     apiProperty: 'source.path'
   }),
   Metrics: App.AlertConfigProperty.extend({
+    name: 'metrics',
     label: 'JMX/Ganglia Metrics',
     displayType: 'textArea',
     classNames: 'alert-config-text-area',
@@ -256,6 +299,7 @@ App.AlertConfigProperties = {
     }.property('value')
   }),
   FormatString: App.AlertConfigProperty.extend({
+    name: 'metrics_string',
     label: 'Format String',
     displayType: 'textArea',
     classNames: 'alert-config-text-area',

ambari-web/app/routes/add_alert_definition_routes.js

@@ -95,6 +95,8 @@ module.exports = App.WizardRoute.extend({
 
     next: function (router) {
       var controller = router.get('addAlertDefinitionController');
+      controller.set('content.configs', App.router.get('mainAlertDefinitionConfigsController').getConfigsValues());
+      controller.setDBProperty('content', controller.get('content'));
       router.transitionTo('step3');
     }
 

ambari-web/app/styles/alerts.less

@@ -232,6 +232,14 @@
 
 .alert-configs {
 
+  label.shifted {
+    width: 170px;
+  }
+
+  .controls.shifted {
+    margin-left: 190px;
+  }
+
   margin-top: 20px;
 
   .alert-config-text-area {

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

@@ -18,7 +18,7 @@
 
 <h2>{{t alerts.add.step2.header}}</h2>
 
-{{controller.content.selectedType}}
+{{view App.AlertDefinitionConfigsView canEdit=true isWizard=true alertDefinitionTypeBinding="controller.content.selectedType"}}
 
 <div class="btn-area">
   <a class="btn" {{bindAttr disabled="isBackBtnDisabled"}} {{action back}}>&larr; {{t common.back}}</a>

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

@@ -18,11 +18,20 @@
 <form class="form-horizontal alert-configs">
   {{#each property in controller.configs}}
     <div class="control-group">
-      <label class="control-label">{{property.label}}</label>
+      {{#if property.isPreLabeled}}
+        <label {{bindAttr class=":control-label property.isShifted:shifted"}}>{{property.label}}</label>
 
-      <div class="controls">
-        {{view property.viewClass propertyBinding="property"}}
-      </div>
+        <div {{bindAttr class=":controls property.isShifted:shifted"}}>
+          {{view property.viewClass propertyBinding="property"}}
+        </div>
+      {{else}}
+        <div class="controls">
+          <label class="radio">
+            {{view property.viewClass propertyBinding="property"}}
+            {{property.label}}
+          </label>
+        </div>
+      {{/if}}
     </div>
   {{/each}}
 </form>

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

@@ -82,7 +82,7 @@
             {{/unless}}
           {{/isAccessible}}
         <hr>
-        {{view App.AlertDefinitionConfigsView contentBinding="view.controller.content" canEdit=false}}
+        {{view App.AlertDefinitionConfigsView contentBinding="view.controller.content" alertDefinitionTypeBinding="view.controller.content.type" canEdit=false}}
         {{#if App.router.mainAlertDefinitionConfigsController.canEdit}}
           <div class="edit-buttons">
             <button {{action cancelEditConfigs target="App.router.mainAlertDefinitionConfigsController"}} class="btn">{{t common.cancel}}</button>

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

@@ -39,6 +39,8 @@ App.AlertDefinitionConfigsView = Em.View.extend({
 
   init: function () {
     this.set('controller.canEdit', this.get('canEdit'));
+    this.set('controller.isWizard', this.get('isWizard'));
+    this.set('controller.alertDefinitionType', this.get('alertDefinitionType'));
     this.set('controller.content', this.get('content'));
     this.get('controller').renderConfigs();
     this._super();
@@ -69,3 +71,18 @@ App.AlertConfigThresholdView = Em.View.extend({
   templateName: require('templates/main/alerts/configs/alert_config_threshold'),
   classNameBindings: ['property.classNames', 'parentView.basicClass']
 });
+
+App.AlertConfigRadioButtonView = Em.Checkbox.extend({
+  attributeBindings: ['type', 'name', 'value', 'checked', 'disabled'],
+  type: 'radio',
+  nameBinding: 'property.group',
+  checkedBinding: 'property.value',
+
+  change: function () {
+    this.set('property.value', true);
+    this.get('parentView.controller.configs').filterProperty('group', this.get('name')).without(this.get('property')).setEach('value', false);
+    this.get('parentView.controller').changeType(this.get('property.name'));
+  },
+
+  classNameBindings: ['property.classNames']
+});

ambari-web/test/controllers/main/alerts/definitions_configs_controller_test.js

@@ -60,31 +60,31 @@ describe('App.MainAlertDefinitionConfigsController', function () {
     });
 
     it('should call renderPortConfigs method', function () {
-      controller.set('content.type', 'PORT');
+      controller.set('alertDefinitionType', 'PORT');
       controller.renderConfigs();
       expect(controller.renderPortConfigs.calledOnce).to.be.true;
     });
 
     it('should call renderMetricConfigs method', function () {
-      controller.set('content.type', 'METRIC');
+      controller.set('alertDefinitionType', 'METRIC');
       controller.renderConfigs();
       expect(controller.renderMetricConfigs.calledOnce).to.be.true;
     });
 
     it('should call renderWebConfigs method', function () {
-      controller.set('content.type', 'WEB');
+      controller.set('alertDefinitionType', 'WEB');
       controller.renderConfigs();
       expect(controller.renderWebConfigs.calledOnce).to.be.true;
     });
 
     it('should call renderScriptConfigs method', function () {
-      controller.set('content.type', 'SCRIPT');
+      controller.set('alertDefinitionType', 'SCRIPT');
       controller.renderConfigs();
       expect(controller.renderScriptConfigs.calledOnce).to.be.true;
     });
 
     it('should call renderAggregateConfigs method', function () {
-      controller.set('content.type', 'AGGREGATE');
+      controller.set('alertDefinitionType', 'AGGREGATE');
       controller.renderConfigs();
       expect(controller.renderAggregateConfigs.calledOnce).to.be.true;
     });
@@ -120,14 +120,15 @@ describe('App.MainAlertDefinitionConfigsController', function () {
         defaultPort: '777'
       }));
 
+      controller.set('isWizard', true);
       var result = controller.renderPortConfigs();
 
-      expect(result.length).to.equal(9);
-      expect(result.someProperty('value', 'alertDefinitionName')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionService')).to.be.true;
-      expect(result.someProperty('value', 'Component1')).to.be.true;
-      expect(result.someProperty('value', 'Host')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionDescription')).to.be.true;
+      expect(result.length).to.equal(11);
+
+      controller.set('isWizard', false);
+      result = controller.renderPortConfigs();
+
+      expect(result.length).to.equal(4);
       expect(result.someProperty('value', 60)).to.be.true;
       expect(result.someProperty('value', '10-20')).to.be.true;
       expect(result.someProperty('value', 'alertDefinitionUri')).to.be.true;
@@ -178,14 +179,15 @@ describe('App.MainAlertDefinitionConfigsController', function () {
         }
       }));
 
+      controller.set('isWizard', true);
       var result = controller.renderMetricConfigs();
 
-      expect(result.length).to.equal(10);
-      expect(result.someProperty('value', 'alertDefinitionName')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionService')).to.be.true;
-      expect(result.someProperty('value', 'Component1')).to.be.true;
-      expect(result.someProperty('value', 'Host')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionDescription')).to.be.true;
+      expect(result.length).to.equal(12);
+
+      controller.set('isWizard', false);
+      result = controller.renderMetricConfigs();
+
+      expect(result.length).to.equal(5);
       expect(result.someProperty('value', 60)).to.be.true;
       expect(result.someProperty('value', '10-20')).to.be.true;
       expect(result.someProperty('value', '{\"http\":\"{{mapred-site/mapreduce.jobhistory.webapp.address}}\",\"https\":\"{{mapred-site/mapreduce.jobhistory.webapp.https.address}}\"}')).to.be.true;
@@ -229,14 +231,15 @@ describe('App.MainAlertDefinitionConfigsController', function () {
         }
       }));
 
+      controller.set('isWizard', true);
       var result = controller.renderWebConfigs();
 
-      expect(result.length).to.equal(8);
-      expect(result.someProperty('value', 'alertDefinitionName')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionService')).to.be.true;
-      expect(result.someProperty('value', 'Component1')).to.be.true;
-      expect(result.someProperty('value', 'Host')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionDescription')).to.be.true;
+      expect(result.length).to.equal(10);
+
+      controller.set('isWizard', false);
+      result = controller.renderWebConfigs();
+
+      expect(result.length).to.equal(3);
       expect(result.someProperty('value', 60)).to.be.true;
       expect(result.someProperty('value', '10-20')).to.be.true;
       expect(result.someProperty('value', '{\"http\":\"{{mapred-site/mapreduce.jobhistory.webapp.address}}\",\"https\":\"{{mapred-site/mapreduce.jobhistory.webapp.https.address}}\"}')).to.be.true;
@@ -272,14 +275,15 @@ describe('App.MainAlertDefinitionConfigsController', function () {
         location: 'path to script'
       }));
 
+      controller.set('isWizard', true);
       var result = controller.renderScriptConfigs();
 
-      expect(result.length).to.equal(8);
-      expect(result.someProperty('value', 'alertDefinitionName')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionService')).to.be.true;
-      expect(result.someProperty('value', 'Component1')).to.be.true;
-      expect(result.someProperty('value', 'Host')).to.be.true;
-      expect(result.someProperty('value', 'alertDefinitionDescription')).to.be.true;
+      expect(result.length).to.equal(10);
+
+      controller.set('isWizard', false);
+      result = controller.renderScriptConfigs();
+
+      expect(result.length).to.equal(3);
       expect(result.someProperty('value', 60)).to.be.true;
       expect(result.someProperty('value', '10-20')).to.be.true;
       expect(result.someProperty('value', 'path to script')).to.be.true;
@@ -470,5 +474,74 @@ describe('App.MainAlertDefinitionConfigsController', function () {
     });
   });
 
-})
-;
+  describe('#changeType()', function () {
+
+    it('should disable and enable appropriate configs', function () {
+
+      controller.set('allServices', ['service1', 'service2']);
+      controller.set('allScopes', ['scope1', 'scope2']);
+
+      controller.set('configs', [
+        Em.Object.create({name: 'service', isDisabled: false}),
+        Em.Object.create({name: 'component', isDisabled: false}),
+        Em.Object.create({name: 'scope', isDisabled: false})
+      ]);
+
+      controller.changeType('Host Alert Definition');
+
+      expect(controller.get('configs').everyProperty('isDisabled', true)).to.be.true;
+      expect(controller.get('configs').findProperty('name', 'service').get('options')).to.eql(['Ambari']);
+      expect(controller.get('configs').findProperty('name', 'service').get('value')).to.equal('Ambari');
+      expect(controller.get('configs').findProperty('name', 'component').get('value')).to.equal('Ambari Agent');
+      expect(controller.get('configs').findProperty('name', 'scope').get('options')).to.eql(['Host']);
+      expect(controller.get('configs').findProperty('name', 'scope').get('value')).to.equal('Host');
+
+      controller.changeType('alert_type_service');
+
+      expect(controller.get('configs').everyProperty('isDisabled', false)).to.be.true;
+      expect(controller.get('configs').findProperty('name', 'service').get('options')).to.eql(['service1', 'service2']);
+      expect(controller.get('configs').findProperty('name', 'service').get('value')).to.equal('service1');
+      expect(controller.get('configs').findProperty('name', 'component').get('value')).to.equal('No component');
+      expect(controller.get('configs').findProperty('name', 'scope').get('options')).to.eql(['scope1', 'scope2']);
+      expect(controller.get('configs').findProperty('name', 'scope').get('value')).to.equal('scope1');
+
+    });
+
+  });
+
+  describe('#renderCommonWizardConfigs()', function () {
+
+    it('should return correct number of configs', function () {
+
+      var result = controller.renderCommonWizardConfigs();
+
+      expect(result.length).to.equal(7);
+
+    });
+
+  });
+
+  describe('#getConfigsValues()', function () {
+
+    it('should create key-value map from configs', function () {
+
+      controller.set('configs', [
+        Em.Object.create({name: 'name1', value: 'value1'}),
+        Em.Object.create({name: 'name2', value: 'value2'}),
+        Em.Object.create({name: 'name3', value: 'value3'})
+      ]);
+
+      var result = controller.getConfigsValues();
+
+      expect(result).to.eql([
+        {name: 'name1', value: 'value1'},
+        {name: 'name2', value: 'value2'},
+        {name: 'name3', value: 'value3'}
+      ]);
+
+    });
+
+  });
+
+
+});