AMBARI-10996 Bring back the custom time range control that sets it for all graph widgets shown. (atkach)

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

@@ -76,6 +76,13 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
     }
   ],
 
+  /**
+   * @type {boolean}
+   */
+  showTimeRangeControl: function () {
+    return this.get('isServiceWithEnhancedWidgets') && this.get('widgets').filterProperty('widgetType', 'GRAPH').length > 0;
+  }.property('isServiceWithEnhancedWidgets', 'widgets.length'),
+
   /**
    * Set initial Ranger plugins data
    * @method setRangerPlugins
@@ -354,7 +361,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
    * @param {object|null} data
    */
   loadAllSharedWidgetsSuccessCallback: function (data) {
-    var widgetIds = this.get('widgets') ? this.get('widgets').mapProperty('id'): [];
+    var widgetIds = this.get('widgets').mapProperty('id');
     if (data.items[0] && data.items.length) {
       this.set("allSharedWidgets",
         data.items.filter(function (widget) {
@@ -404,7 +411,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
    * @param {object|null} data
    */
   loadMineWidgetsSuccessCallback: function (data) {
-    var widgetIds = this.get('widgets') ? this.get('widgets').mapProperty('id'): [];
+    var widgetIds = this.get('widgets').mapProperty('id');
     if (data.items[0] && data.items.length) {
       this.set("mineWidgets",
         data.items.filter(function (widget) {

ambari-web/app/controllers/main/service/widgets/create/step2_controller.js

@@ -236,14 +236,6 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
     this.set('widgetProperties', this.get('content.widgetProperties'));
     this.set('widgetValues', this.get('content.widgetValues'));
     this.set('widgetMetrics', this.get('content.widgetMetrics'));
-    this.set('expressions', this.get('content.expressions').map(function (item) {
-      return Em.Object.create(item);
-    }, this));
-    this.set('dataSets', this.get('content.dataSets').map(function (item) {
-      item.expression = Em.Object.create(item.expression);
-      return Em.Object.create(item);
-    }, this));
-    this.set('templateValue', this.get('content.templateValue'));
     if (this.get('expressions.length') === 0) {
       this.addExpression(null, true);
     }
@@ -262,6 +254,7 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
       values: [],
       metrics: []
     };
+
     if (this.get('expressions').length > 0 && this.get('dataSets').length > 0) {
       switch (widgetType) {
         case 'GAUGE':
@@ -404,43 +397,42 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
   /**
    * convert data with model format to editable format
    * Note: in order to edit widget expression it should be converted to editable format
-   * @param {App.Widget} content
-   * @param {Ember.Controller} widgetController
    */
-  convertData: function(content, widgetController) {
+  convertData: function() {
     var self = this;
     var expressionId = 0;
+    var widgetValues = this.get('content.widgetValues');
+    var widgetMetrics = this.get('content.widgetMetrics');
 
     this.get('expressions').clear();
     this.get('dataSets').clear();
 
-    switch (content.get('widgetType')) {
-      case 'NUMBER':
-      case 'GAUGE':
-        var id = this.addExpression(null, true);
-        this.get('expressions').findProperty('id', id).set('data', this.parseValue(content.get('values')[0].value, content.get('metrics'))[0]);
-        break;
-      case 'TEMPLATE':
-        this.parseValue(content.get('values')[0].value, content.get('metrics')).forEach(function(item, index) {
-          var id = this.addExpression(null, (index === 0));
-          this.get('expressions').findProperty('id', id).set('data', item);
-        }, this);
-        this.set('templateValue', content.get('values')[0].value.replace(this.get('EXPRESSION_REGEX'), function(){
-          return '{{' + self.get('EXPRESSION_PREFIX') + ++expressionId + '}}';
-        }));
-        break;
-      case 'GRAPH':
-        content.get('values').forEach(function (value, index) {
-          var id = this.addDataSet(null, (index === 0));
-          var dataSet = this.get('dataSets').findProperty('id', id);
-          dataSet.set('label', value.name);
-          dataSet.set('expression.data', this.parseValue(value.value, content.get('metrics'))[0]);
-        }, this);
-        break;
+    if (widgetValues.length > 0) {
+      switch (this.get('content.widgetType')) {
+        case 'NUMBER':
+        case 'GAUGE':
+          var id = this.addExpression(null, true);
+          this.get('expressions').findProperty('id', id).set('data', this.parseValue(widgetValues[0].value, widgetMetrics)[0]);
+          break;
+        case 'TEMPLATE':
+          this.parseValue(widgetValues[0].value, widgetMetrics).forEach(function (item, index) {
+            var id = this.addExpression(null, (index === 0));
+            this.get('expressions').findProperty('id', id).set('data', item);
+          }, this);
+          this.set('templateValue', widgetValues[0].value.replace(this.get('EXPRESSION_REGEX'), function () {
+            return '{{' + self.get('EXPRESSION_PREFIX') + ++expressionId + '}}';
+          }));
+          break;
+        case 'GRAPH':
+          widgetValues.forEach(function (value, index) {
+            var id = this.addDataSet(null, (index === 0));
+            var dataSet = this.get('dataSets').findProperty('id', id);
+            dataSet.set('label', value.name);
+            dataSet.set('expression.data', this.parseValue(value.value, widgetMetrics)[0]);
+          }, this);
+          break;
+      }
     }
-    widgetController.save('templateValue', this.get('templateValue'));
-    widgetController.save('expressions', this.get('expressions'));
-    widgetController.save('dataSets', this.get('dataSets'));
   },
 
   /**

ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js

@@ -34,7 +34,7 @@ App.WidgetWizardController = App.WizardController.extend({
   content: Em.Object.create({
     controllerName: 'widgetWizardController',
     widgetService: null,
-    widgetType: '',
+    widgetType: "",
 
     /**
      * @type {number}
@@ -87,11 +87,8 @@ App.WidgetWizardController = App.WizardController.extend({
      * }]
      */
     widgetValues: [],
-    expressions: [],
-    dataSets: [],
-    templateValue: null,
-    widgetName: null,
-    widgetDescription: null,
+    widgetName: "",
+    widgetDescription: "",
     widgetAuthor: function () {
       return App.router.get('loginName');
     }.property('App.router.loginName'),

ambari-web/app/controllers/main/service/widgets/edit_controller.js

@@ -75,9 +75,6 @@ App.WidgetEditController = App.WidgetWizardController.extend({
      * }]
      */
     widgetValues: [],
-    expressions: [],
-    dataSets: [],
-    templateValue: null,
     widgetName: null,
     widgetDescription: null,
     widgetScope: null,
@@ -91,12 +88,9 @@ App.WidgetEditController = App.WidgetWizardController.extend({
         type: 'sync',
         callback: function () {
           this.load('widgetType');
-          this.load('widgetProperties');
-          this.load('widgetValues');
-          this.load('widgetMetrics');
-          this.load('expressions');
-          this.load('dataSets');
-          this.load('templateValue');
+          this.load('widgetProperties', true);
+          this.load('widgetValues', true);
+          this.load('widgetMetrics', true);
         }
       },
       {

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

@@ -121,7 +121,7 @@ App.WidgetMixin = Ember.Mixin.create({
         });
       }
     }
-  }.observes('customTimeRange'),
+  }.observes('customTimeRange', 'content.properties.time_range'),
 
   /**
    * get data formatted for request

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

@@ -93,10 +93,9 @@ App.WidgetSectionMixin = Ember.Mixin.create({
     if (this.get('isWidgetsLoaded')) {
       if (this.get('activeWidgetLayout.widgets')) {
         return this.get('activeWidgetLayout.widgets').toArray();
-      } else {
-        return [];
       }
     }
+    return [];
   }.property('isWidgetsLoaded'),
 
 

ambari-web/app/models/widget.js

@@ -132,11 +132,6 @@ App.WidgetType.FIXTURES = [
         isRequired: true,
         value: 'LINE'
       },
-      {
-        name : 'time_range',
-        isRequired: true,
-        value: "1"
-      },
       {
         name : 'display_unit',
         isRequired: false,

ambari-web/app/routes/add_widget.js

@@ -134,8 +134,8 @@ module.exports = App.WizardRoute.extend({
       widgetWizardController.save('expressions', widgetStep2controller.get('expressions'));
       widgetWizardController.save('dataSets', widgetStep2controller.get('dataSets'));
       widgetWizardController.save('templateValue', widgetStep2controller.get('templateValue'));
-      widgetWizardController.save('widgetName', null);
-      widgetWizardController.save('widgetDescription', null);
+      widgetWizardController.save('widgetName', "");
+      widgetWizardController.save('widgetDescription', "");
       widgetWizardController.save('widgetScope', null);
       router.transitionTo('step3');
     }

ambari-web/app/routes/main.js

@@ -588,7 +588,6 @@ module.exports = Em.Route.extend(App.RouterRedirections, {
       widgetController.save('widgetAuthor', context.get('author'));
       widgetController.save('widgetId', context.get('id'));
       widgetController.save('allMetrics', []);
-      router.get('widgetWizardStep2Controller').convertData(context, widgetController);
     }
     router.transitionTo('editWidget');
   },

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

@@ -79,7 +79,7 @@
         <div class="box">
           <div class="box-header">
             <h4>{{t services.service.metrics}}</h4>
-            {{#unless isServiceWithEnhancedWidgets}}
+            {{#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>
@@ -90,7 +90,7 @@
                   {{/each}}
                 </ul>
               </div>
-            {{/unless}}
+            {{/if}}
             {{#if isServiceWithEnhancedWidgets}}
               <div class="btn-group pull-right actions">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

ambari-web/app/views/common/widget/graph_widget_view.js

@@ -44,7 +44,12 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
    * @type {number}
    */
   timeRange: function () {
-    return this.get('customTimeRange') || parseInt(this.get('content.properties.time_range')) * this.get('TIME_FACTOR');
+    var timeRange = parseInt(this.get('content.properties.time_range'));
+    if (isNaN(timeRange)) {
+      //1h - default time range
+      timeRange = 1;
+    }
+    return this.get('customTimeRange') || timeRange * this.get('TIME_FACTOR');
   }.property('content.properties.time_range', 'customTimeRange'),
 
   /**

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

@@ -441,16 +441,17 @@ 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'), seconds: 3600},
-    {index: 1, name: Em.I18n.t('graphs.timeRange.twoHours'), seconds: 7200},
-    {index: 2, name: Em.I18n.t('graphs.timeRange.fourHours'), seconds: 14400},
-    {index: 3, name: Em.I18n.t('graphs.timeRange.twelveHours'), seconds: 43200},
-    {index: 4, name: Em.I18n.t('graphs.timeRange.day'), seconds: 86400},
-    {index: 5, name: Em.I18n.t('graphs.timeRange.week'), seconds: 604800},
-    {index: 6, name: Em.I18n.t('graphs.timeRange.month'), seconds: 2592000},
-    {index: 7, name: Em.I18n.t('graphs.timeRange.year'), seconds: 31104000}
+    {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,
@@ -460,28 +461,14 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
 
   /**
    * onclick handler for a time range option
+   * @param {object} event
    */
   setTimeRange: function (event) {
-    var self = this;
-    if (event && event.context) {
-      self.postUserPref(self.get('persistKey'), event.context.index);
-      self.set('currentTimeRangeIndex', event.context.index);
-      var svcName = self.get('service.serviceName');
-      if (svcName) {
-        var result = [], graphObjects = [], chunkSize = this.get('chunkSize');
-        var allServices = require('data/service_graph_config').getServiceGraphConfig();
-        allServices[svcName.toLowerCase()].forEach(function(graphName) {
-          graphObjects.push(App["ChartServiceMetrics" + graphName].extend({
-            currentTimeIndex : event.context.index
-          }));
-        });
-        while(graphObjects.length) {
-          result.push(graphObjects.splice(0, chunkSize));
-        }
-        self.set('serviceMetricGraphs', result);
-        self.set('isServiceMetricLoaded', true);
-      }
-    }
+    this.set('currentTimeRangeIndex', event.context.index);
+
+    this.get('controller.widgets').filterProperty('widgetType', 'GRAPH').forEach(function (widget) {
+      widget.set('properties.time_range', event.context.value);
+    }, this);
   },
 
   loadServiceSummary: function () {

ambari-web/app/views/main/service/widgets/create/step2_view.js

@@ -51,6 +51,7 @@ App.WidgetWizardStep2View = Em.View.extend({
   didInsertElement: function () {
     var controller = this.get('controller');
     this.ensureTooltip();
+    controller.convertData();
     controller.initWidgetData();
     controller.renderProperties();
     controller.updateExpressions();

ambari-web/test/controllers/main/service/widgets/create/step2_controller_test.js

@@ -275,4 +275,41 @@ describe('App.WidgetWizardStep2Controller', function () {
     });
   });
 
+  describe("#initWidgetData()", function() {
+    it("new data", function() {
+      controller.set('expressions', []);
+      controller.set('dataSets', []);
+      controller.get('content').setProperties({
+        widgetProperties: {a:1},
+        widgetValues: [1],
+        widgetMetrics: [2]
+      });
+
+      controller.initWidgetData();
+
+      expect(controller.get('widgetProperties')).to.eql({a:1});
+      expect(controller.get('widgetValues')).to.eql([]);
+      expect(controller.get('widgetMetrics')).to.eql([]);
+      expect(controller.get('expressions')).to.not.be.empty;
+      expect(controller.get('dataSets')).to.not.be.empty;
+    });
+    it("previously edited", function() {
+      controller.set('expressions', [{}]);
+      controller.set('dataSets', [{}]);
+      controller.get('content').setProperties({
+        widgetProperties: {a:1},
+        widgetValues: [1],
+        widgetMetrics: [2]
+      });
+
+      controller.initWidgetData();
+
+      expect(controller.get('widgetProperties')).to.eql({a:1});
+      expect(controller.get('widgetValues')).to.eql([1]);
+      expect(controller.get('widgetMetrics')).to.eql([2]);
+      expect(controller.get('expressions')).to.not.be.empty;
+      expect(controller.get('dataSets')).to.not.be.empty;
+    });
+  });
+
 });