Return-Path: X-Original-To: apmail-ambari-commits-archive@www.apache.org Delivered-To: apmail-ambari-commits-archive@www.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id 894B51890C for ; Wed, 24 Feb 2016 14:24:17 +0000 (UTC) Received: (qmail 71277 invoked by uid 500); 24 Feb 2016 14:24:17 -0000 Delivered-To: apmail-ambari-commits-archive@ambari.apache.org Received: (qmail 71182 invoked by uid 500); 24 Feb 2016 14:24:17 -0000 Mailing-List: contact commits-help@ambari.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: ambari-dev@ambari.apache.org Delivered-To: mailing list commits@ambari.apache.org Received: (qmail 71150 invoked by uid 99); 24 Feb 2016 14:24:17 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 24 Feb 2016 14:24:17 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id 04519E8EBE; Wed, 24 Feb 2016 14:24:17 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: ncole@apache.org To: commits@ambari.apache.org Date: Wed, 24 Feb 2016 14:24:18 -0000 Message-Id: In-Reply-To: <19603bbb3b9b41bfa23df66eeba7d4d4@git.apache.org> References: <19603bbb3b9b41bfa23df66eeba7d4d4@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: [3/7] ambari git commit: AMBARI-15143. Display spinner in place of graph while new data loading is in progress (alexantonenko) AMBARI-15143. Display spinner in place of graph while new data loading is in progress (alexantonenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/92461254 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/92461254 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/92461254 Branch: refs/heads/branch-dev-patch-upgrade Commit: 9246125443dca9d2c59d1617f59e4229cb85fb88 Parents: 03534a0 Author: Alex Antonenko Authored: Wed Feb 24 13:18:02 2016 +0200 Committer: Alex Antonenko Committed: Wed Feb 24 13:46:31 2016 +0200 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 15 +++- .../app/styles/enhanced_service_dashboard.less | 8 +- .../app/templates/common/chart/linear_time.hbs | 4 +- .../app/templates/main/charts/linear_time.hbs | 1 + .../app/views/common/chart/linear_time.js | 48 +++++++++-- .../views/common/widget/graph_widget_view.js | 30 +++++++ .../dashboard/widgets/cluster_metrics_widget.js | 2 + .../test/views/common/chart/linear_time_test.js | 90 +++++++++++++++----- 8 files changed, 165 insertions(+), 33 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/92461254/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 4e2b5d1..3a49d5c 100644 --- a/ambari-web/app/styles/application.less +++ b/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 */ http://git-wip-us.apache.org/repos/asf/ambari/blob/92461254/ambari-web/app/styles/enhanced_service_dashboard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less index f04ba02..cf02474 100644 --- a/ambari-web/app/styles/enhanced_service_dashboard.less +++ b/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 { http://git-wip-us.apache.org/repos/asf/ambari/blob/92461254/ambari-web/app/templates/common/chart/linear_time.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/chart/linear_time.hbs b/ambari-web/app/templates/common/chart/linear_time.hbs index acc3422..2844728 100644 --- a/ambari-web/app/templates/common/chart/linear_time.hbs +++ b/ambari-web/app/templates/common/chart/linear_time.hbs @@ -16,7 +16,9 @@ * limitations under the License. }}
-
+
+ {{view App.SpinnerView}} +
{{view view.timeRangeListView}}
{{view.title}}
+ {{view App.SpinnerView}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/92461254/ambari-web/app/views/common/chart/linear_time.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/chart/linear_time.js b/ambari-web/app/views/common/chart/linear_time.js index 864203d..bc00bb2 100644 --- a/ambari-web/app/views/common/chart/linear_time.js +++ b/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') http://git-wip-us.apache.org/repos/asf/ambari/blob/92461254/ambari-web/app/views/common/widget/graph_widget_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/widget/graph_widget_view.js b/ambari-web/app/views/common/widget/graph_widget_view.js index 30eb658..2413236 100644 --- a/ambari-web/app/views/common/widget/graph_widget_view.js +++ b/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 () { http://git-wip-us.apache.org/repos/asf/ambari/blob/92461254/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js b/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js index 500f9e8..a688e60 100644 --- a/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js +++ b/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 () { http://git-wip-us.apache.org/repos/asf/ambari/blob/92461254/ambari-web/test/views/common/chart/linear_time_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/common/chart/linear_time_test.js b/ambari-web/test/views/common/chart/linear_time_test.js index 0484fd1..c05ce23 100644 --- a/ambari-web/test/views/common/chart/linear_time_test.js +++ b/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 () {