AMBARI-15143. Display spinner in place of graph while new data loading is in progress (alexantonenko)

ambari-web/app/styles/application.less

@@ -2230,6 +2230,11 @@ a:focus {
       }
     }
   }
+  .screensaver {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 .chart-container {
   cursor: pointer;
@@ -2708,6 +2713,11 @@ table.graphs {
     .spinner {
       margin: 55px auto;
     }
+    .chart-container {
+      .spinner {
+        margin: 15px auto 35px;
+      }
+    }
     .row-fluid .span2p4 {
       width: 19.60%;
       *width: 19.60%;
@@ -2807,7 +2817,7 @@ table.graphs {
         border: 1px solid silver;
         color: #ffffff;
         i {
-          font-size: 4em;
+          font-size: inherit;
         }
       }
     }
@@ -4692,9 +4702,6 @@ ul.inline li {
   height: 157px;
   border: 1px solid silver;
   margin: 20px 15px 10px 15px;
-  i {
-    font-size: 4em;
-  }
 }
 
 /* TIME RANGE WIDGET END */

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -137,9 +137,6 @@
         width: 90%;
         height: 100px;
         border: 1px solid #eee;
-        i {
-          font-size: 4em;
-        }
       }
       .chart-container{
         margin: -4px 8px 0 8px;
@@ -282,6 +279,11 @@
       overflow-y: scroll;
     }
   }
+  .screensaver {
+    .spinner {
+      display: none;
+    }
+  }
 }
 
 .chart-legend .description-line {

ambari-web/app/templates/common/chart/linear_time.hbs

@@ -16,7 +16,9 @@
 * limitations under the License.
 }}
 <div class="chart-wrapper">
-  <div {{bindAttr class="view.isReady:hide:show :screensaver :no-borders :chart-container"}}></div>
+  <div {{bindAttr class="view.isReady:hide:show :screensaver :no-borders :chart-container"}}>
+    {{view App.SpinnerView}}
+  </div>
   <div {{bindAttr class="view.isReady::hidden :actions-container"}}>
     {{view view.timeRangeListView}}
     <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon"}}

ambari-web/app/templates/main/charts/linear_time.hbs

@@ -18,6 +18,7 @@
 
 <div class="screensaver chart-container" {{bindAttr class="view.isReady:hide"}} >
   <div id="{{unbound view.id}}-title" class="chart-title">{{view.title}}</div>
+  {{view App.SpinnerView}}
 </div>
 <div id="{{unbound view.id}}-container" class="chart-container hide" {{bindAttr class="view.isReady:show"}} rel="ZoomInTooltip">
   <div id="{{unbound view.id}}-yaxis" class="chart-y-axis" {{action showGraphInPopup target="view"}}></div>

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

@@ -574,7 +574,12 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
     //if graph opened as modal popup
     var popup_path = $(this.get('_popupSelector'));
     var graph_container = $(this.get('_containerSelector'));
+    var seconds = this.get('parentView.graphSeconds');
     var container;
+    if (!Em.isNone(seconds)) {
+      this.set('timeUnitSeconds', seconds);
+      this.set('parentView.graphSeconds', null);
+    }
     if (popup_path.length) {
       popup_path.children().each(function () {
         $(this).children().remove();
@@ -917,6 +922,14 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
     }
 
     this.set('isPopup', true);
+    if (this.get('inWidget') && !this.get('parentView.isClusterMetricsWidget')) {
+      this.setProperties({
+        currentTimeIndex: this.get('parentView.timeIndex'),
+        customStartTime: this.get('parentView.startTime'),
+        customEndTime: this.get('parentView.endTime'),
+        customDurationFormatted: this.get('parentView.durationFormatted')
+      });
+    }
     var self = this;
 
     App.ModalPopup.show({
@@ -1065,7 +1078,10 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
       reloadGraphByTime: function (index) {
         this.set('childViews.firstObject.currentTimeRangeIndex', index);
         this.set('currentTimeIndex', index);
-        self.set('currentTimeIndex', index);
+        self.setProperties({
+          currentTimeIndex: index,
+          isPopupReady: false
+        });
         App.ajax.abortRequests(this.get('graph.runningPopupRequests'));
       },
       currentTimeIndex: self.get('currentTimeIndex'),
@@ -1117,18 +1133,38 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
     });
     if (index !== 8 || targetView.get('customStartTime') && targetView.get('customEndTime')) {
       App.ajax.abortRequests(this.get('runningRequests'));
+      if (this.get('inWidget') && !this.get('parentView.isClusterMetricsWidget')) {
+        this.set('parentView.isLoaded', false);
+      } else {
+        this.set('isReady', false);
+      }
     }
   }.observes('parentView.parentView.currentTimeRangeIndex', 'parentView.currentTimeRangeIndex', 'parentView.parentView.customStartTime', 'parentView.customStartTime', 'parentView.parentView.customEndTime', 'parentView.customEndTime'),
   timeUnitSeconds: 3600,
   timeUnitSecondsSetter: function () {
-      var index = this.get('currentTimeIndex');
+    var index = this.get('currentTimeIndex'),
+      startTime = this.get('customStartTime'),
+      endTime = this.get('customEndTime'),
+      durationFormatted = this.get('customDurationFormatted'),
+      seconds;
     if (index !== 8) {
       // Preset time range is specified by user
-      var seconds = this.get('timeStates').objectAt(this.get('currentTimeIndex')).seconds;
-      this.set('timeUnitSeconds', seconds);
-    } else if (!Em.isNone(this.get('customStartTime')) && !Em.isNone(this.get('customEndTime'))) {
+      seconds = this.get('timeStates').objectAt(this.get('currentTimeIndex')).seconds;
+    } else if (!Em.isNone(startTime) && !Em.isNone(endTime)) {
       // Custom start and end time is specified by user
-      this.set('timeUnitSeconds', (this.get('customEndTime') - this.get('customStartTime')) / 1000);
+      seconds = (endTime - startTime) / 1000;
+    }
+    if (!Em.isNone(seconds)) {
+      this.set('timeUnitSeconds', seconds);
+      if (this.get('inWidget') && !this.get('parentView.isClusterMetricsWidget')) {
+        this.get('parentView').setProperties({
+          graphSeconds: seconds,
+          timeIndex: index,
+          startTime: startTime,
+          endTime: endTime,
+          durationFormatted: durationFormatted
+        });
+      }
     }
   }.observes('currentTimeIndex', 'customStartTime', 'customEndTime')
 

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

@@ -77,6 +77,36 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, App.ExportMetricsMixin, {
    */
   data: [],
 
+  /**
+   * time range index for graph
+   * @type {number}
+   */
+  timeIndex: 0,
+
+  /**
+   * custom start time for graph
+   * @type {number|null}
+   */
+  startTime: null,
+
+  /**
+   * custom end time for graph
+   * @type {number|null}
+   */
+  endTime: null,
+
+  /**
+   * graph time range duration in seconds
+   * @type {number|null}
+   */
+  graphSeconds: null,
+
+  /**
+   * time range duration as string
+   * @type {string|null}
+   */
+  durationFormatted: null,
+
   exportTargetView: Em.computed.alias('childViews.lastObject'),
 
   drawWidget: function () {

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

@@ -22,6 +22,8 @@ App.ClusterMetricsDashboardWidgetView = App.DashboardWidgetView.extend(App.Expor
 
   templateName: require('templates/main/dashboard/widgets/cluster_metrics'),
 
+  isClusterMetricsWidget: true,
+
   exportTargetView: Em.computed.alias('childViews.lastObject'),
 
   didInsertElement: function () {

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

@@ -274,31 +274,56 @@ describe('App.ChartLinearTimeView', function () {
 
     var view,
       cases = [
-      {
-        parent: 1,
-        child: 2,
-        result: 2,
-        title: 'child and parent have currentTimeRangeIndex'
-      },
-      {
-        parent: undefined,
-        child: 2,
-        result: 2,
-        title: 'only child has currentTimeRangeIndex'
-      },
-      {
-        parent: 1,
-        child: undefined,
-        result: 1,
-        title: 'only parent has currentTimeRangeIndex'
-      }
-    ];
+        {
+          parent: 1,
+          child: 2,
+          result: 2,
+          title: 'child and parent have currentTimeRangeIndex'
+        },
+        {
+          parent: undefined,
+          child: 2,
+          result: 2,
+          title: 'only child has currentTimeRangeIndex'
+        },
+        {
+          parent: 1,
+          child: undefined,
+          result: 1,
+          title: 'only parent has currentTimeRangeIndex'
+        }
+      ],
+      isReadyCases = [
+        {
+          inWidget: true,
+          isClusterMetricsWidget: true,
+          parentViewIsLoaded: true,
+          isReady: false,
+          title: 'cluster metrics widget'
+        },
+        {
+          inWidget: true,
+          isClusterMetricsWidget: false,
+          parentViewIsLoaded: false,
+          isReady: true,
+          title: 'enhanced service widget'
+        },
+        {
+          inWidget: false,
+          isClusterMetricsWidget: false,
+          parentViewIsLoaded: true,
+          isReady: false,
+          title: 'non-widget graph'
+        }
+      ];
 
     beforeEach(function () {
       view = App.ChartLinearTimeView.create({
+        isReady: true,
         controller: {},
         parentView: Em.Object.create({
           currentTimeRangeIndex: 1,
+          isLoaded: true,
           parentView: Em.Object.create({
             currentTimeRangeIndex: 2
           })
@@ -316,6 +341,33 @@ describe('App.ChartLinearTimeView', function () {
       });
     });
 
+    isReadyCases.forEach(function (item) {
+
+      describe(item.title, function () {
+
+        beforeEach(function () {
+          sinon.stub(App.ajax, 'abortRequests', Em.K);
+          view.set('inWidget', item.inWidget);
+          view.set('parentView.isClusterMetricsWidget', item.isClusterMetricsWidget);
+          view.propertyDidChange('parentView.currentTimeRangeIndex');
+        });
+
+        afterEach(function () {
+          App.ajax.abortRequests.restore();
+        });
+
+        it('parentView.isLoaded', function () {
+          expect(view.get('parentView.isLoaded')).to.eql(item.parentViewIsLoaded);
+        });
+
+        it('isReady', function () {
+          expect(view.get('isReady')).to.eql(item.isReady);
+        });
+
+      });
+
+    });
+
   });
 
   describe('#loadDataSuccessCallback', function () {