AMBARI-8382 Configs: Dashboard > Config History custom date option issues. (atkach)

ambari-web/app/assets/test/tests.js

@@ -147,6 +147,7 @@ var files = ['test/init_model_test',
   'test/views/common/rolling_restart_view_test',
   'test/views/common/modal_popup_test',
   'test/views/common/sort_view_test',
+  'test/views/common/custom_date_popup_test',
   'test/views/common/configs/config_history_flow_test',
   'test/views/main/dashboard_test',
   'test/views/main/menu_test',

ambari-web/app/controllers/main/dashboard/config_history_controller.js

@@ -102,6 +102,44 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
   ],
 
   modifiedFilter: Em.Object.create({
+    content: [
+      {
+        value: 'Any',
+        label: Em.I18n.t('any')
+      },
+      {
+        value: 'Past 1 hour',
+        label: 'Past 1 hour'
+      },
+      {
+        value: 'Past 1 Day',
+        label: 'Past 1 Day'
+      },
+      {
+        value: 'Past 2 Days',
+        label: 'Past 2 Days'
+      },
+      {
+        value: 'Past 7 Days',
+        label: 'Past 7 Days'
+      },
+      {
+        value: 'Past 14 Days',
+        label: 'Past 14 Days'
+      },
+      {
+        value: 'Past 30 Days',
+        label: 'Past 30 Days'
+      },
+      {
+        value: 'Custom',
+        label: 'Custom'
+      },
+      {
+        value: 'Custom2',
+        label: 'Custom'
+      }
+    ],
     optionValue: 'Any',
     filterModified: function () {
       var time = "";
@@ -134,13 +172,15 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
           time = "";
           break;
       }
-      if (this.get('modified') !== "Custom") {
-        this.set("actualValues.startTime", time);
-        this.set("actualValues.endTime", '');
+      if (!["Custom", "Custom2"].contains(this.get('optionValue.value'))) {
+        this.set("actualValues", {
+          endTime: '',
+          startTime: time
+        });
       }
     }.observes('optionValue'),
     cancel: function () {
-      this.set('optionValue', 'Any');
+      this.set('optionValue', this.get('content').findProperty('value', 'Any'));
     },
     actualValues: Em.Object.create({
       startTime: "",

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

@@ -17,23 +17,23 @@
 }}
 
 <div class="jobs-custom-dates">
-  <div>
+  <div {{bindAttr class=":control-group view.isValid.isStartDateError:error"}}>
     <label>{{t jobs.customDateFilter.startTime}}</label>
     {{view Ember.TextField valueBinding="controller.customDateFormFields.startDate" class="input-small datepicker"}}
     {{view Ember.Select contentBinding="view.hourOptions" selectionBinding="controller.customDateFormFields.hoursForStart" class="input-mini"}}
     {{view Ember.Select contentBinding="view.minuteOptions" selectionBinding="controller.customDateFormFields.minutesForStart" class="input-mini"}}
     {{view Ember.Select contentBinding="view.middayPeriodOptions" selectionBinding="controller.customDateFormFields.middayPeriodForStart" class="input-mini"}}
-    <span class="help-inline">{{controller.filterObject.errorMessages.startDate}}</span>
+    <span class="help-inline">{{view.validationErrors.startDate}}</span>
   </div>
   <div>
 
   </div>
-  <div>
+  <div {{bindAttr class=":control-group view.isValid.isEndDateError:error"}}>
     <label>{{t jobs.customDateFilter.endTime}}</label>
     {{view Ember.TextField valueBinding="controller.customDateFormFields.endDate" class="input-small datepicker"}}
     {{view Ember.Select contentBinding="view.hourOptions" selectionBinding="controller.customDateFormFields.hoursForEnd" class="input-mini"}}
     {{view Ember.Select contentBinding="view.minuteOptions" selectionBinding="controller.customDateFormFields.minutesForEnd" class="input-mini"}}
     {{view Ember.Select contentBinding="view.middayPeriodOptions" selectionBinding="controller.customDateFormFields.middayPeriodForEnd" class="input-mini"}}
-    <span class="help-inline">{{controller.filterObject.errorMessages.endDate}}</span>
+    <span class="help-inline">{{view.validationErrors.endDate}}</span>
   </div>
 </div>

ambari-web/app/views/common/custom_date_popup.js

@@ -42,22 +42,23 @@ module.exports = Em.Object.create({
     endDate: ''
   }),
 
-  showCustomDatePopup: function (context, valueObject) {
+  showCustomDatePopup: function (context) {
     var self = this;
 
-    App.ModalPopup.show({
+    return App.ModalPopup.show({
       header: Em.I18n.t('jobs.table.custom.date.header'),
       onPrimary: function () {
         self.validate();
-        if(self.get('errors.isStartDateError') || self.get('errors.isEndDateError')){
+        if(self.get('errors.isStartDateError') || self.get('errors.isEndDateError')) {
           return false;
         }
 
         var windowStart = self.createCustomStartDate();
         var windowEnd = self.createCustomEndDate();
-
-        valueObject.set("endTime", windowEnd.getTime());
-        valueObject.set("startTime", windowStart.getTime());
+        context.set('actualValues', {
+          endTime: windowEnd.getTime(),
+          startTime: windowStart.getTime()
+        });
         this.hide();
       },
       onSecondary: function () {
@@ -65,7 +66,9 @@ module.exports = Em.Object.create({
         this.hide();
       },
       bodyClass: App.JobsCustomDatesSelectView.extend({
-        controller: self
+        controller: self,
+        validationErrors: self.get('errorMessages'),
+        isValid: self.get('errors')
       })
     });
   },

ambari-web/app/views/common/filter_view.js

@@ -207,7 +207,7 @@ var wrapperView = Ember.View.extend({
       // now hide option with current value
       $select.find('option[value="{0}"]'.format(this.get('value'))).css('display', 'none');
       // and show option that was hidden
-      $select.find('option[value="{0}"'.format(hiddenValue)).css('display', 'block');
+      $select.find('option[value="{0}"]'.format(hiddenValue)).css('display', 'block');
     }
   }
 });

ambari-web/app/views/common/select_custom_date_view.js

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+var App = require('app');
+
 App.JobsCustomDatesSelectView = Em.View.extend({
 
   name: 'jobsCustomDatesSelectView',
@@ -31,6 +33,8 @@ App.JobsCustomDatesSelectView = Em.View.extend({
   didInsertElement: function () {
     $('.datepicker').datepicker({
       format: 'mm/dd/yyyy'
+    }).on('changeDate', function() {
+      $(this).datepicker('hide');
     });
   }
 });

ambari-web/app/views/main/dashboard/config_history_view.js

@@ -129,44 +129,19 @@ App.MainConfigHistoryView = App.TableView.extend(App.TableServerViewMixin, {
     column: 3,
     appliedEmptyValue: ["", ""],
     fieldType: 'filter-input-width,modified-filter',
-    content: [
+    triggeredOnSameValue: [
       {
-        value: 'Any',
-        label: Em.I18n.t('any')
-      },
-      {
-        value: 'Past 1 hour',
-        label: 'Past 1 hour'
-      },
-      {
-        value: 'Past 1 Day',
-        label: 'Past 1 Day'
-      },
-      {
-        value: 'Past 2 Days',
-        label: 'Past 2 Days'
-      },
-      {
-        value: 'Past 7 Days',
-        label: 'Past 7 Days'
-      },
-      {
-        value: 'Past 14 Days',
-        label: 'Past 14 Days'
-      },
-      {
-        value: 'Past 30 Days',
-        label: 'Past 30 Days'
+        values: ['Custom', 'Custom2'],
+        displayAs: 'Custom'
       }
     ],
     emptyValue: 'Any',
     valueBinding: "controller.modifiedFilter.optionValue",
     selectedBinding: "controller.modifiedFilter.optionValue",
-    startTimeBinding: "controller.modifiedFilter.actualValues.startTime",
-    endTimeBinding: "controller.modifiedFilter.actualValues.endTime",
+    contentBinding: "controller.modifiedFilter.content",
     onTimeChange: function () {
       this.get('parentView').updateFilter(this.get('column'), [this.get('controller.modifiedFilter.actualValues.startTime'), this.get('controller.modifiedFilter.actualValues.endTime')], 'range');
-    }.observes('controller.modifiedFilter.actualValues.startTime', 'controller.modifiedFilter.actualValues.endTime')
+    }.observes('controller.modifiedFilter.actualValues')
   }),
 
   authorFilterView: filters.createTextView({

ambari-web/test/views/common/custom_date_popup_test.js

@@ -0,0 +1,61 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+describe('CustomDatePopup', function() {
+  var customDatePopup = require('views/common/custom_date_popup');
+
+  describe('#showCustomDatePopup', function() {
+    var context = Em.Object.create({
+      cancel: sinon.spy(),
+      actualValues: Em.Object.create()
+    });
+    var popup = customDatePopup.showCustomDatePopup(context);
+    
+    it('`onSecondary` should call `cancel` method in passed context', function() {
+      popup.onSecondary();
+      expect(context.cancel.calledOnce).to.ok;
+    });
+
+    it('empty values passed for end and start dates, validation should fail with appropriate message', function() {
+      expect(popup.onPrimary()).to.false;
+      expect(customDatePopup.get('errors.isStartDateError')).to.ok;
+      expect(customDatePopup.get('errors.isEndDateError')).to.ok;
+      expect(customDatePopup.get('errorMessages.startDate')).to.equal(Em.I18n.t('jobs.customDateFilter.error.required'));
+      expect(customDatePopup.get('errorMessages.endDate')).to.equal(Em.I18n.t('jobs.customDateFilter.error.required'));
+    });
+
+    it('passed start date is greater then end data, validation should fail with apporpriate message', function() {
+      customDatePopup.set('customDateFormFields.startDate', '11/11/11');
+      customDatePopup.set('customDateFormFields.endDate', '11/10/11');
+      expect(popup.onPrimary()).to.false;
+      expect(customDatePopup.get('errors.isStartDateError')).to.false;
+      expect(customDatePopup.get('errors.isEndDateError')).to.ok;
+      expect(customDatePopup.get('errorMessages.endDate')).to.equal(Em.I18n.t('jobs.customDateFilter.error.date.order'));
+    });
+
+    it('valid values passed, `valueObject` should contain `endTime` and `startTime`', function() {
+      customDatePopup.set('customDateFormFields.startDate', '11/11/11');
+      customDatePopup.set('customDateFormFields.endDate', '11/12/11');
+      popup.onPrimary();
+      expect(context.get('actualValues.startTime')).to.be.equal(1320966000000);
+      expect(context.get('actualValues.endTime')).to.equal(1321052400000);
+    });
+  });
+});