AMBARI-13331. Allow user to customize time period for graphs on dashboard and host summary page.

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

@@ -141,6 +141,7 @@ var files = [
   'test/mixins/common/configs/toggle_isrequired_test',
   'test/mixins/common/chart/storm_linear_time_test',
   'test/mixins/common/widgets/export_metrics_mixin_test',
+  'test/mixins/common/widgets/time_range_mixin_test',
   'test/mixins/common/widgets/widget_section_test',
   'test/mixins/common/localStorage_test',
   'test/mixins/common/reload_popup_test',

ambari-web/app/messages.js

@@ -2343,6 +2343,7 @@ Em.I18n.translations = {
   'dashboard.button.switchShort': 'Switch',
   'dashboard.button.reset': 'Reset all widgets to default ',
   'dashboard.button.gangliaLink': 'View metrics in Ganglia',
+  'dashboard.widgets.actions.title': 'Metric Actions',
   'dashboard.widgets.create': 'Create Widget',
   'dashboard.widgets.actions.browse': 'Browse Widgets',
   'dashboard.widgets.layout.import': 'Import a layout',

ambari-web/app/mixins.js

@@ -50,6 +50,7 @@ require('mixins/common/configs/configs_loader');
 require('mixins/common/configs/configs_comparator');
 require('mixins/common/configs/toggle_isrequired');
 require('mixins/common/widgets/export_metrics_mixin');
+require('mixins/common/widgets/time_range_mixin');
 require('mixins/common/widgets/widget_mixin');
 require('mixins/common/widgets/widget_section');
 require('mixins/unit_convert/base_unit_convert_mixin');

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

@@ -0,0 +1,58 @@
+/**
+ * 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');
+
+require('views/common/time_range_list');
+
+App.TimeRangeMixin = Em.Mixin.create({
+
+  timeRangeClassName: 'pull-right',
+
+  /**
+   * time range options for service metrics, a dropdown will list all options
+   * value set in hours
+   */
+  timeRangeOptions: [
+    {index: 0, name: Em.I18n.t('graphs.timeRange.hour'), value: '1'},
+    {index: 1, name: Em.I18n.t('graphs.timeRange.twoHours'), value: '2'},
+    {index: 2, name: Em.I18n.t('graphs.timeRange.fourHours'), value: '4'},
+    {index: 3, name: Em.I18n.t('graphs.timeRange.twelveHours'), value: '12'},
+    {index: 4, name: Em.I18n.t('graphs.timeRange.day'), value: '24'},
+    {index: 5, name: Em.I18n.t('graphs.timeRange.week'), value: '168'},
+    {index: 6, name: Em.I18n.t('graphs.timeRange.month'), value: '720'},
+    {index: 7, name: Em.I18n.t('graphs.timeRange.year'), value: '8760'}
+  ],
+
+  currentTimeRangeIndex: 0,
+
+  currentTimeRange: function() {
+    return this.get('timeRangeOptions').objectAt(this.get('currentTimeRangeIndex'));
+  }.property('currentTimeRangeIndex'),
+
+  /**
+   * onclick handler for a time range option
+   * @param {object} event
+   */
+  setTimeRange: function (event) {
+    this.set('currentTimeRangeIndex', event.context.index);
+  },
+
+  timeRangeListView: App.TimeRangeListView.extend()
+
+});

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

@@ -0,0 +1,26 @@
+{{!
+* 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.
+}}
+
+<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+  {{view.parentView.currentTimeRange.name}} &nbsp;<span class="caret"></span>
+</button>
+<ul class="dropdown-menu">
+  {{#each option in view.parentView.timeRangeOptions}}
+    <li><a href="#" {{action setTimeRange option target="view.parentView"}}>{{option.name}}</a></li>
+  {{/each}}
+</ul>

ambari-web/app/templates/main/dashboard/widgets.hbs

@@ -17,10 +17,10 @@
 }}
 {{#if view.isDataLoaded}}
 
-  <div id="widgets-options-menu" class="dropdown">
+  <div id="widgets-options-menu" class="dropdown btn-group pull-left">
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-        <span>Metric Actions</span>
-        <span class="caret"></span>
+      <span>{{t dashboard.widgets.actions.title}}</span>
+      <span class="caret"></span>
     </a>
     <ul class="dropdown-menu">
       <li class="dropdown-submenu add-widgets-text">
@@ -46,6 +46,8 @@
       </li>
     </ul>
   </div>
+  {{view view.timeRangeListView}}
+  <div class="clearfix"></div>
 
   <div class="dashboard-widgets-box">
     <div id="dashboard-widgets"  class="widgets-container">

ambari-web/app/templates/main/host/summary.hbs

@@ -183,6 +183,7 @@
                 {{/if}}
               </div>
             {{/if}}
+            {{view view.timeRangeListView}}
           </div>
           <div>
            {{view App.MainHostMetricsView contentBinding="view.content"}}

ambari-web/app/templates/main/service/info/summary.hbs

@@ -76,16 +76,7 @@
         <div class="box-header">
           <h4>{{t services.service.metrics}}</h4>
           {{#if showTimeRangeControl}}
-            <div class="btn-group pull-right">
-              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                {{view.currentTimeRange.name}} &nbsp;<span class="caret"></span>
-              </button>
-              <ul class="dropdown-menu">
-                {{#each option in view.timeRangeOptions}}
-                  <li><a href="#" {{action setTimeRange option target="view"}}>{{option.name}}</a></li>
-                {{/each}}
-              </ul>
-            </div>
+            {{view view.timeRangeListView}}
           {{/if}}
           {{#if isServiceWithEnhancedWidgets}}
             {{#if isAmbariMetricsInstalled}}

ambari-web/app/views.js

@@ -39,6 +39,7 @@ require('views/common/rolling_restart_view');
 require('views/common/select_custom_date_view');
 require('views/common/metric');
 require('views/common/time_range');
+require('views/common/time_range_list');
 require('views/common/form/field');
 require('views/common/form/spinner_input_view');
 require('views/common/quick_view_link_view');

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

@@ -814,7 +814,8 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
 
       onPrimary: function () {
         self.setProperties({
-          currentTimeIndex: 0,
+          currentTimeIndex: self.get('controller.isServiceWithEnhancedWidgets') === false ?
+            self.get('parentView.currentTimeRangeIndex') : self.get('parentView.parentView.currentTimeRangeIndex'),
           isPopup: false
         });
         this._super();
@@ -880,6 +881,11 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
   ],
   // should be set by time range control dropdown list when create current graph
   currentTimeIndex: 0,
+  setCurrentTimeIndexFromParent: function () {
+    var index = this.get('controller.isServiceWithEnhancedWidgets') === false ?
+      this.get('parentView.currentTimeRangeIndex') : this.get('parentView.parentView.currentTimeRangeIndex');
+    this.set('currentTimeIndex', index);
+  }.observes('parentView.parentView.currentTimeRangeIndex', 'parentView.currentTimeRangeIndex'),
   timeUnitSeconds: function () {
     return this.get('timeStates').objectAt(this.get('currentTimeIndex')).seconds;
   }.property('currentTimeIndex'),

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

@@ -0,0 +1,27 @@
+/**
+ * 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');
+
+App.TimeRangeListView = Em.View.extend({
+
+  templateName: require('templates/common/time_range_list'),
+
+  classNameBindings: [':btn-group', 'parentView.timeRangeClassName']
+
+});

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

@@ -19,7 +19,7 @@
 var App = require('app');
 var filters = require('views/common/filter_view');
 
-App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
+App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, App.TimeRangeMixin, {
 
   name: 'mainDashboardWidgetsView',
 
@@ -51,6 +51,8 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
    */
   isMoving: false,
 
+  timeRangeClassName: 'pull-left',
+
   /**
    * Make widgets' list sortable on New Dashboard style
    */

ambari-web/app/views/main/host/summary.js

@@ -18,7 +18,7 @@
 
 var App = require('app');
 
-App.MainHostSummaryView = Em.View.extend({
+App.MainHostSummaryView = Em.View.extend(App.TimeRangeMixin, {
 
   templateName: require('templates/main/host/summary'),
 

ambari-web/app/views/main/service/info/summary.js

@@ -21,7 +21,7 @@ var misc = require('utils/misc');
 require('views/main/service/service');
 require('data/service_graph_config');
 
-App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
+App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, App.TimeRangeMixin, {
   templateName: require('templates/main/service/info/summary'),
   /**
    * @property {Number} chunkSize - number of columns in Metrics section
@@ -498,32 +498,12 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
     }
   },
 
-  /**
-   * time range options for service metrics, a dropdown will list all options
-   * value set in hours
-   */
-  timeRangeOptions: [
-    {index: 0, name: Em.I18n.t('graphs.timeRange.hour'), value: '1'},
-    {index: 1, name: Em.I18n.t('graphs.timeRange.twoHours'), value: '2'},
-    {index: 2, name: Em.I18n.t('graphs.timeRange.fourHours'), value: '4'},
-    {index: 3, name: Em.I18n.t('graphs.timeRange.twelveHours'), value: '12'},
-    {index: 4, name: Em.I18n.t('graphs.timeRange.day'), value: '24'},
-    {index: 5, name: Em.I18n.t('graphs.timeRange.week'), value: '168'},
-    {index: 6, name: Em.I18n.t('graphs.timeRange.month'), value: '720'},
-    {index: 7, name: Em.I18n.t('graphs.timeRange.year'), value: '8760'}
-  ],
-
-  currentTimeRangeIndex: 0,
-  currentTimeRange: function() {
-    return this.get('timeRangeOptions').objectAt(this.get('currentTimeRangeIndex'));
-  }.property('currentTimeRangeIndex'),
-
   /**
    * onclick handler for a time range option
    * @param {object} event
    */
   setTimeRange: function (event) {
-    this.set('currentTimeRangeIndex', event.context.index);
+    this._super(event);
 
     this.get('controller.widgets').filterProperty('widgetType', 'GRAPH').forEach(function (widget) {
       widget.set('properties.time_range', event.context.value);

ambari-web/test/mixins/common/widgets/time_range_mixin_test.js

@@ -0,0 +1,58 @@
+/**
+ * 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');
+
+require('mixins/common/widgets/time_range_mixin');
+
+describe('App.TimeRangeMixin', function () {
+
+  var obj;
+
+  beforeEach(function () {
+    obj = Em.Object.create(App.TimeRangeMixin);
+  });
+
+  describe('#currentTimeRange', function () {
+
+    var cases = Em.Object.create(App.TimeRangeMixin).get('timeRangeOptions'),
+      title = 'should set "{0}" time range';
+
+    cases.forEach(function (item) {
+      it(title.format(item.name), function () {
+        obj.set('currentTimeRangeIndex', item.index);
+        expect(obj.get('currentTimeRange')).to.eql(item);
+      });
+    });
+
+  });
+
+  describe('#setTimeRange', function () {
+
+    it('should set time range', function () {
+      obj.setTimeRange({
+        context: {
+          index: 1
+        }
+      });
+      expect(obj.get('currentTimeRangeIndex')).to.equal(1);
+    });
+
+  });
+
+});

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

@@ -93,7 +93,7 @@ describe('App.ChartLinearTimeView', function () {
         expect(App.ChartLinearTimeView.BytesFormatter(test.i)).to.equal(test.e);
       });
     });
-  }),
+  });
   describe('#PercentageFormatter', function() {
     var tests = [
       {m:'undefined to "0 %"',i:undefined,e:'0 %'},
@@ -208,6 +208,48 @@ describe('App.ChartLinearTimeView', function () {
       services.yarnService = [];
     });
   });
+
+  describe('#setCurrentTimeIndexFromParent', function () {
+
+    var view,
+      cases = [
+      {
+        isServiceWithEnhancedWidgets: false,
+        currentTimeIndex: 1,
+        title: 'service with enhanced widgets'
+      },
+      {
+        isServiceWithEnhancedWidgets: true,
+        currentTimeIndex: 2,
+        title: 'service without enhanced widgets'
+      },
+      {
+        currentTimeIndex: 2,
+        title: 'other view'
+      }
+    ];
+
+    beforeEach(function () {
+      view = App.ChartLinearTimeView.create({
+        controller: {},
+        parentView: {
+          currentTimeRangeIndex: 1,
+          parentView: {
+            currentTimeRangeIndex: 2
+          }
+        }
+      });
+    });
+
+    cases.forEach(function (item) {
+      it(item.title, function () {
+        view.set('controller.isServiceWithEnhancedWidgets', item.isServiceWithEnhancedWidgets);
+        view.propertyDidChange('parentView.currentTimeRangeIndex');
+        expect(view.get('currentTimeIndex')).to.equal(item.currentTimeIndex);
+      });
+    });
+
+  });
 });