AMBARI-14765. Too many ticks on the graph if large custom time range is specified (alexantonenko)

ambari-web/app/mixins/common/widgets/time_range_mixin.js

@@ -127,7 +127,7 @@ App.TimeRangeMixin = Em.Mixin.create({
         defaultEndTime.setMinutes(minutes);
         defaultStartTime = defaultEndTime.getTime() - duration;
       }
-      timeRangePopup.showCustomDatePopup(primary.bind(this), secondary.bind(this), {
+      timeRangePopup.showCustomDatePopup(primary.bind(this), secondary, {
         startDate: App.formatDateTimeWithTimeZone(defaultStartTime, 'MM/DD/YYYY'),
         hoursForStart: App.formatDateTimeWithTimeZone(defaultStartTime, 'hh'),
         minutesForStart: App.formatDateTimeWithTimeZone(defaultStartTime, 'mm'),

ambari-web/app/views/common/chart/linear_time.js

@@ -619,28 +619,27 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
    * @return Rickshaw.Fixtures.Time
    */
   localeTimeUnit: function (timeUnitSeconds) {
-    var timeUnit = new Rickshaw.Fixtures.Time();
-    switch (timeUnitSeconds) {
-      case 604800:
-        timeUnit = timeUnit.unit('day');
-        break;
-      case 2592000:
-        timeUnit = timeUnit.unit('week');
-        break;
-      case 31104000:
-        timeUnit = timeUnit.unit('month');
-        break;
-      default:
-        timeUnit = {
-          name: timeUnitSeconds / 240 + ' minute',
-          seconds: timeUnitSeconds / 4,
-          formatter: function (d) {
-            // format locale specific time
-            var minutes = dateUtils.dateFormatZeroFirst(d.getMinutes());
-            var hours = dateUtils.dateFormatZeroFirst(d.getHours());
-            return hours + ":" + minutes;
-          }
-        };
+    var timeUnit = new Rickshaw.Fixtures.Time(),
+      unitName;
+    if (timeUnitSeconds < 172800) {
+      timeUnit = {
+        name: timeUnitSeconds / 240 + ' minute',
+        seconds: timeUnitSeconds / 4,
+        formatter: function (d) {
+          // format locale specific time
+          var minutes = dateUtils.dateFormatZeroFirst(d.getMinutes());
+          var hours = dateUtils.dateFormatZeroFirst(d.getHours());
+          return hours + ":" + minutes;
+        }
+      };
+    } else if (timeUnitSeconds < 1209600) {
+      timeUnit = timeUnit.unit('day');
+    } else if (timeUnitSeconds < 5184000) {
+      timeUnit = timeUnit.unit('week');
+    } else if (timeUnitSeconds < 62208000) {
+      timeUnit = timeUnit.unit('month');
+    } else {
+      timeUnit = timeUnit.unit('year');
     }
     return timeUnit;
   },
@@ -1111,11 +1110,11 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
       // Preset time range is specified by user
       var seconds = this.get('timeStates').objectAt(this.get('currentTimeIndex')).seconds;
       this.set('timeUnitSeconds', seconds);
-    } else {
+    } else if (!Em.isNone(this.get('customStartTime')) && !Em.isNone(this.get('customEndTime'))) {
       // Custom start and end time is specified by user
-      this.propertyDidChange('timeUnitSeconds');
+      this.set('timeUnitSeconds', (this.get('customEndTime') - this.get('customStartTime')) / 1000);
     }
-  }.observes('currentTimeIndex', 'parentView.childViews.lastObject.customStartTime', 'parentView.childViews.lastObject.customEndTime')
+  }.observes('currentTimeIndex', 'customStartTime', 'customEndTime')
 
 });
 

ambari-web/test/views/common/chart/linear_time_test.js

@@ -258,7 +258,8 @@ describe('App.ChartLinearTimeView', function () {
         chartLinearTimeView.setProperties({
           currentTimeIndex: item.currentTimeIndex,
           customStartTime: item.customStartTime,
-          customEndTime: item.customEndTime
+          customEndTime: item.customEndTime,
+          timeUnitSeconds: 3600
         });
         var requestData = Em.Object.create(chartLinearTimeView.getDataForAjaxRequest());
         expect(requestData.getProperties(['fromSeconds', 'toSeconds'])).to.eql({
@@ -390,6 +391,73 @@ describe('App.ChartLinearTimeView', function () {
 
   });
 
+  describe('#localeTimeUnit', function () {
+
+    var cases = [
+      {
+        timeUnitSeconds: 240,
+        localeTimeUnit: '1 minute'
+      },
+      {
+        timeUnitSeconds: 172788,
+        localeTimeUnit: '719.95 minute'
+      },
+      {
+        timeUnitSeconds: 172800,
+        localeTimeUnit: 'day'
+      },
+      {
+        timeUnitSeconds: 1209599,
+        localeTimeUnit: 'day'
+      },
+      {
+        timeUnitSeconds: 1209600,
+        localeTimeUnit: 'week'
+      },
+      {
+        timeUnitSeconds: 5183999,
+        localeTimeUnit: 'week'
+      },
+      {
+        timeUnitSeconds: 5184000,
+        localeTimeUnit: 'month'
+      },
+      {
+        timeUnitSeconds: 62207999,
+        localeTimeUnit: 'month'
+      },
+      {
+        timeUnitSeconds: 622080000,
+        localeTimeUnit: 'year'
+      },
+      {
+        timeUnitSeconds: 700000000,
+        localeTimeUnit: 'year'
+      }
+    ];
+
+    beforeEach(function () {
+      sinon.stub(Rickshaw.Fixtures, 'Time').returns({
+        unit: function (name) {
+          return {
+            name: name
+          };
+        }
+      });
+    });
+
+    afterEach(function () {
+      Rickshaw.Fixtures.Time.restore();
+    });
+
+    cases.forEach(function (item) {
+      it(item.timeUnitSeconds + 's', function () {
+        expect(chartLinearTimeView.localeTimeUnit(item.timeUnitSeconds).name).to.equal(item.localeTimeUnit);
+      });
+    });
+
+  });
+
 });