You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by al...@apache.org on 2016/02/24 13:00:35 UTC
ambari git commit: AMBARI-15143. Display spinner in place of graph
while new data loading is in progress (alexantonenko)
Repository: ambari
Updated Branches:
refs/heads/branch-2.2 a01c4ad3f -> f022c8545
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/f022c854
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/f022c854
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/f022c854
Branch: refs/heads/branch-2.2
Commit: f022c8545e570e127fd708769627dcf4f0e76bea
Parents: a01c4ad
Author: Alex Antonenko <hi...@gmail.com>
Authored: Wed Feb 24 14:00:19 2016 +0200
Committer: Alex Antonenko <hi...@gmail.com>
Committed: Wed Feb 24 14:00:29 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/f022c854/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index 08736d8..77834f5 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -2225,6 +2225,11 @@ a:focus {
}
}
}
+ .screensaver {
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ }
}
.chart-container {
cursor: pointer;
@@ -2681,6 +2686,11 @@ table.graphs {
.spinner {
margin: 55px auto;
}
+ .chart-container {
+ .spinner {
+ margin: 15px auto 35px;
+ }
+ }
.row-fluid .span2p4 {
width: 19.60%;
*width: 19.60%;
@@ -2780,7 +2790,7 @@ table.graphs {
border: 1px solid silver;
color: #ffffff;
i {
- font-size: 4em;
+ font-size: inherit;
}
}
}
@@ -4643,9 +4653,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/f022c854/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/f022c854/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.
}}
<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"}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/f022c854/ambari-web/app/templates/main/charts/linear_time.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/charts/linear_time.hbs b/ambari-web/app/templates/main/charts/linear_time.hbs
index 28e2fa4..7011465 100644
--- a/ambari-web/app/templates/main/charts/linear_time.hbs
+++ b/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>
http://git-wip-us.apache.org/repos/asf/ambari/blob/f022c854/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 18b74be..2af9cbf 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({
@@ -1066,7 +1079,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'),
@@ -1118,18 +1134,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/f022c854/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 2ab2706..e2c55cb 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: function () {
return this.get('childViews.lastObject');
}.property(),
http://git-wip-us.apache.org/repos/asf/ambari/blob/f022c854/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 9704ae2..1901dac 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: function () {
return this.get('childViews.lastObject');
}.property(),
http://git-wip-us.apache.org/repos/asf/ambari/blob/f022c854/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 d66ada4..4454b83 100644
--- a/ambari-web/test/views/common/chart/linear_time_test.js
+++ b/ambari-web/test/views/common/chart/linear_time_test.js
@@ -269,31 +269,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
})
@@ -310,6 +335,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 () {