diff --git a/client/js/goldstoneBasePageView.js b/client/js/goldstoneBasePageView.js index 69925bfc3..d4d7281b0 100644 --- a/client/js/goldstoneBasePageView.js +++ b/client/js/goldstoneBasePageView.js @@ -51,6 +51,13 @@ var GoldstoneBasePageView = GoldstoneBaseView.extend({ clearInterval(ns.scheduleInterval); }, + onClose: function() { + if (this.defaults.scheduleInterval) { + clearInterval(this.defaults.scheduleInterval); + } + this.off(); + }, + scheduleInterval: function() { var self = this; var ns = this.defaults; diff --git a/client/js/views/metricViewerPageView.js b/client/js/views/metricViewerPageView.js index d18d92091..b2a4f2212 100644 --- a/client/js/views/metricViewerPageView.js +++ b/client/js/views/metricViewerPageView.js @@ -22,7 +22,7 @@ The nesting of this page is: |__ MetricViewerView + MetricViewerCollection |____ MetricView + MetricViewCollection -At the moment /metric will default to 6 charts. +At the moment /#metric will default to 6 charts. /metric/1 will show 1 chart /metric/2 will show 2 charts /metric/3 will show 3 charts @@ -33,17 +33,33 @@ var MetricViewerPageView = GoldstoneBasePageView.extend({ initialize: function(options) { + // hide global lookback selector + $("select#global-lookback-range").hide(); + // options.numCharts passed in by goldstoneRouter - // and reflects the number n (1-6) following "/metric/n" + // and reflects the number n (1-6) following "/#metric/n" this.numCharts = options.numCharts; + + // model to hold collection/views of chart grids + this.metricViewGridContainer = new Backbone.Model({ + grid: { + view: {}, + collection: {} + } + }); + + // instantiate initialize in GoldstoneBasePageView MetricViewerPageView.__super__.initialize.apply(this, arguments); }, - metricViewGridContainer: { + onClose: function() { + // clear out grid of collections/views + this.metricViewGridContainer.clear(); - // will be populated during renderCharts() - view: {}, - collection: {} + // return global lookback selector to page + $("select#global-lookback-range").show(); + + MetricViewerPageView.__super__.onClose.apply(this, arguments); }, renderCharts: function() { @@ -63,12 +79,14 @@ var MetricViewerPageView = GoldstoneBasePageView.extend({ //--------------------------------------------- // instantiate as many metricViews as requested + // Backbone getter: + var grid = this.metricViewGridContainer.get('grid'); + for (var i = 0; i < num; i++) { // underscore method for producing unique integer var id = _.uniqueId(); - var grid = this.metricViewGridContainer; grid.collection[id] = new MetricViewerCollection({}); grid.view[id] = new MetricViewerView({ @@ -84,6 +102,20 @@ var MetricViewerPageView = GoldstoneBasePageView.extend({ } }, + triggerChange: function(change) { + // upon lookbackIntervalReached, trigger all views + // so they can be refreshed via metricViewerView + if (change === 'lookbackIntervalReached') { + var grid = this.metricViewGridContainer.get('grid').view; + + // trigger each chart currently in the grid that the refresh + // interval has been reached + _.each(grid, function(view) { + view.trigger('globalLookbackReached'); + }); + } + }, + template: _.template('' + '
' + '
' + diff --git a/client/js/views/metricViewerView.js b/client/js/views/metricViewerView.js index 9fb3cf704..23d28f631 100644 --- a/client/js/views/metricViewerView.js +++ b/client/js/views/metricViewerView.js @@ -59,9 +59,15 @@ var MetricViewerView = GoldstoneBaseView.extend({ } // after the dropdown is populated, - // attache button listeners + // attach button listeners this.attachModalTriggers(); }); + + this.listenTo(this, 'globalLookbackReached', function() { + if (this.metricChart) { + this.appendChart(); + } + }); }, attachModalTriggers: function() { @@ -99,8 +105,12 @@ var MetricViewerView = GoldstoneBaseView.extend({ 'resource': $(menu).find('.resource-dropdown-options').val(), 'statistic': $(menu).find('.statistic-dropdown-options').val(), 'standardDev': $(menu).find('.standard-dev:checked').length, - 'lookback': $(menu).find('.lookback-dropdown-options').val(), - 'interval': $(menu).find('.interval-dropdown-options').val(), + // if lookback is left blank, default to 1 + 'lookbackValue': $(menu).find('.modal-lookback-value').val() || 1, + 'lookbackUnit': $(menu).find('.lookback-dropdown-options').val(), + // if lookback is left blank, default to 1 + 'intervalValue': $(menu).find('.modal-interval-value').val() || 1, + 'intervalUnit': $(menu).find('.interval-dropdown-options').val(), }); }, @@ -120,8 +130,10 @@ var MetricViewerView = GoldstoneBaseView.extend({ var url = '/core/metrics/summarize/?name=' + options.metric + '&@timestamp__range={"gte":' + - (+new Date() - (options.lookback * 60 * 1000)) + - '}&interval=' + options.interval; + (+new Date() - (options.lookbackValue * options.lookbackUnit * 1000)) + + '}&interval=' + + options.intervalValue + + options.intervalUnit; if (options.resource !== 'all') { url += '&node=' + options.resource; } @@ -210,20 +222,24 @@ var MetricViewerView = GoldstoneBaseView.extend({ '
Standard Deviation Bands?
' + + // ES can handle s/m/h/d in the "interval" param '
Lookback
' + + '' + ' ' + '' + // ES can handle s/m/h/d in the "interval" param '
Charting Interval
' + + '' + ' ' + '' + '
' + // end modal-body diff --git a/goldstone/static/bundle/bundle.js b/goldstone/static/bundle/bundle.js index 9d44b3eab..7088c4682 100644 --- a/goldstone/static/bundle/bundle.js +++ b/goldstone/static/bundle/bundle.js @@ -559,6 +559,13 @@ var GoldstoneBasePageView = GoldstoneBaseView.extend({ clearInterval(ns.scheduleInterval); }, + onClose: function() { + if (this.defaults.scheduleInterval) { + clearInterval(this.defaults.scheduleInterval); + } + this.off(); + }, + scheduleInterval: function() { var self = this; var ns = this.defaults; @@ -7099,7 +7106,7 @@ The nesting of this page is: |__ MetricViewerView + MetricViewerCollection |____ MetricView + MetricViewCollection -At the moment /metric will default to 6 charts. +At the moment /#metric will default to 6 charts. /metric/1 will show 1 chart /metric/2 will show 2 charts /metric/3 will show 3 charts @@ -7110,17 +7117,33 @@ var MetricViewerPageView = GoldstoneBasePageView.extend({ initialize: function(options) { + // hide global lookback selector + $("select#global-lookback-range").hide(); + // options.numCharts passed in by goldstoneRouter - // and reflects the number n (1-6) following "/metric/n" + // and reflects the number n (1-6) following "/#metric/n" this.numCharts = options.numCharts; + + // model to hold collection/views of chart grids + this.metricViewGridContainer = new Backbone.Model({ + grid: { + view: {}, + collection: {} + } + }); + + // instantiate initialize in GoldstoneBasePageView MetricViewerPageView.__super__.initialize.apply(this, arguments); }, - metricViewGridContainer: { + onClose: function() { + // clear out grid of collections/views + this.metricViewGridContainer.clear(); + + // return global lookback selector to page + $("select#global-lookback-range").show(); - // will be populated during renderCharts() - view: {}, - collection: {} + MetricViewerPageView.__super__.onClose.apply(this, arguments); }, renderCharts: function() { @@ -7140,12 +7163,14 @@ var MetricViewerPageView = GoldstoneBasePageView.extend({ //--------------------------------------------- // instantiate as many metricViews as requested + // Backbone getter: + var grid = this.metricViewGridContainer.get('grid'); + for (var i = 0; i < num; i++) { // underscore method for producing unique integer var id = _.uniqueId(); - var grid = this.metricViewGridContainer; grid.collection[id] = new MetricViewerCollection({}); grid.view[id] = new MetricViewerView({ @@ -7161,6 +7186,20 @@ var MetricViewerPageView = GoldstoneBasePageView.extend({ } }, + triggerChange: function(change) { + // upon lookbackIntervalReached, trigger all views + // so they can be refreshed via metricViewerView + if (change === 'lookbackIntervalReached') { + var grid = this.metricViewGridContainer.get('grid').view; + + // trigger each chart currently in the grid that the refresh + // interval has been reached + _.each(grid, function(view) { + view.trigger('globalLookbackReached'); + }); + } + }, + template: _.template('' + '
' + '
' + @@ -7237,9 +7276,15 @@ var MetricViewerView = GoldstoneBaseView.extend({ } // after the dropdown is populated, - // attache button listeners + // attach button listeners this.attachModalTriggers(); }); + + this.listenTo(this, 'globalLookbackReached', function() { + if (this.metricChart) { + this.appendChart(); + } + }); }, attachModalTriggers: function() { @@ -7277,8 +7322,12 @@ var MetricViewerView = GoldstoneBaseView.extend({ 'resource': $(menu).find('.resource-dropdown-options').val(), 'statistic': $(menu).find('.statistic-dropdown-options').val(), 'standardDev': $(menu).find('.standard-dev:checked').length, - 'lookback': $(menu).find('.lookback-dropdown-options').val(), - 'interval': $(menu).find('.interval-dropdown-options').val(), + // if lookback is left blank, default to 1 + 'lookbackValue': $(menu).find('.modal-lookback-value').val() || 1, + 'lookbackUnit': $(menu).find('.lookback-dropdown-options').val(), + // if lookback is left blank, default to 1 + 'intervalValue': $(menu).find('.modal-interval-value').val() || 1, + 'intervalUnit': $(menu).find('.interval-dropdown-options').val(), }); }, @@ -7298,8 +7347,10 @@ var MetricViewerView = GoldstoneBaseView.extend({ var url = '/core/metrics/summarize/?name=' + options.metric + '&@timestamp__range={"gte":' + - (+new Date() - (options.lookback * 60 * 1000)) + - '}&interval=' + options.interval; + (+new Date() - (options.lookbackValue * options.lookbackUnit * 1000)) + + '}&interval=' + + options.intervalValue + + options.intervalUnit; if (options.resource !== 'all') { url += '&node=' + options.resource; } @@ -7388,20 +7439,24 @@ var MetricViewerView = GoldstoneBaseView.extend({ '
Standard Deviation Bands?
' + + // ES can handle s/m/h/d in the "interval" param '
Lookback
' + + '' + ' ' + '' + // ES can handle s/m/h/d in the "interval" param '
Charting Interval
' + + '' + ' ' + '' + '
' + // end modal-body diff --git a/test/e2e/e2eTests.js b/test/e2e/e2eTests.js index 8971bc91f..94a20ee2a 100644 --- a/test/e2e/e2eTests.js +++ b/test/e2e/e2eTests.js @@ -296,7 +296,9 @@ casper.test.begin('/settings/tenants page updates user personal settings / passw this.echo('Text in #formTenantId: ' + this.evaluate(function() { return $('#formTenantId').text(); })); + }); + casper.waitForSelector('#tenants-single-rsrc-table td.sorting_1', function() { // don't actually submit new settings this.click('#tenants-single-rsrc-table td.sorting_1');