QPID-7772: [Web Management Console] Correct focus stealing defect found by the review of oru...@apache.org
Also switched from EnhancedGrid to Dgrid. Project: http://git-wip-us.apache.org/repos/asf/qpid-broker-j/repo Commit: http://git-wip-us.apache.org/repos/asf/qpid-broker-j/commit/ed33110b Tree: http://git-wip-us.apache.org/repos/asf/qpid-broker-j/tree/ed33110b Diff: http://git-wip-us.apache.org/repos/asf/qpid-broker-j/diff/ed33110b Branch: refs/heads/master Commit: ed33110be5974d7c9d7e2030cbb3684567f60d53 Parents: 98990e9 Author: Keith Wall <keith.w...@gmail.com> Authored: Sat Sep 16 12:15:38 2017 +0100 Committer: Keith Wall <kw...@apache.org> Committed: Mon Sep 18 10:34:24 2017 +0100 ---------------------------------------------------------------------- .../js/qpid/common/StatisticsWidget.js | 365 +++++++++---------- .../java/resources/js/qpid/management/Broker.js | 1 - .../resources/js/qpid/management/Connection.js | 1 - .../resources/js/qpid/management/Exchange.js | 1 - .../java/resources/js/qpid/management/Queue.js | 1 - .../resources/js/qpid/management/VirtualHost.js | 1 - 6 files changed, 169 insertions(+), 201 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/ed33110b/broker-plugins/management-http/src/main/java/resources/js/qpid/common/StatisticsWidget.js ---------------------------------------------------------------------- diff --git a/broker-plugins/management-http/src/main/java/resources/js/qpid/common/StatisticsWidget.js b/broker-plugins/management-http/src/main/java/resources/js/qpid/common/StatisticsWidget.js index d865070..478dd2e 100644 --- a/broker-plugins/management-http/src/main/java/resources/js/qpid/common/StatisticsWidget.js +++ b/broker-plugins/management-http/src/main/java/resources/js/qpid/common/StatisticsWidget.js @@ -22,14 +22,16 @@ define(["dojox/lang/functional/object", "dojo/_base/declare", "dojo/_base/array", "dojo/_base/lang", - "dojo/_base/connect", + "dojo/promise/all", + "dojo/Deferred", + "dojo/dom-style", "dojo/on", "dojo/mouse", "dojo/number", - "dojo/store/Memory", - "dojox/grid/EnhancedGrid", - "dojo/data/ObjectStore", - "dojo/store/Observable", + "dstore/Memory", + 'dstore/Trackable', + "dojox/html/entities", + "dgrid/OnDemandGrid", "dijit/_WidgetBase", "dijit/Tooltip", "dijit/registry", @@ -41,14 +43,16 @@ define(["dojox/lang/functional/object", declare, array, lang, - connect, + all, + Deferred, + domStyle, on, mouse, number, Memory, - EnhancedGrid, - ObjectStore, - Observable, + Trackable, + entities, + Grid, _WidgetBase, Tooltip, registry, @@ -104,169 +108,101 @@ define(["dojox/lang/functional/object", this._filterMessageByteStatisticPairs(allAugmentedStatistics, pairedByteMessageStatistic, otherStatistics); - this._store = new Memory({ - data: allAugmentedStatistics, + var TrackableMemory = declare([Memory, Trackable]); + + this._otherStatsStore = new TrackableMemory({ + data: otherStatistics, idProperty: "id" }); - this._dataStore = ObjectStore({objectStore: new Observable(this._store)}); + this._pairedStatsStore = new TrackableMemory({ + data: pairedByteMessageStatistic, + idProperty: "id" + }); - var formatRate = function (fields) + var defaultFilter = function(item) { - var value = fields[0] ? fields[0] : 0; - var previousValue = fields[1] ? fields[1] : 0; - var units = fields[2]; - var rateWithUnit = this._formatRate(value, previousValue, units); - return rateWithUnit ? rateWithUnit.toString() : "N/A"; - }; - - var formatValue = function (fields) { - var value = fields[0] ? fields[0] : 0; - var units = fields[1]; - return this._formatValue(value, units); - }; - - var formatByteStatValueFromMsgStat = function (msgStatItem) { - var byteStatItem = this._queryStatItem(msgStatItem, "BYTES"); - var value = this._formatValue(byteStatItem.value ? byteStatItem.value : 0, byteStatItem.units); - return value; + return this._showAllStats || item.defaultItem; }; - var formatByteStatRateFromMsgStat = function (msgStatItem) { - var byteStatItem = this._queryStatItem(msgStatItem, "BYTES"); - var rateWithUnit = this._formatRate(byteStatItem.value ? byteStatItem.value : 0, byteStatItem.previousValue ? byteStatItem.previousValue : 0, byteStatItem.units); - return rateWithUnit ? rateWithUnit.toString() : "N/A"; + var gridProps = { + className: "dgrid-autoheight statisticGrid", + highlightRow : function() {return false} }; this._msgBytePairCumulativeStatisticsGrid = - new EnhancedGrid({ - store: this._dataStore, - "class": "statisticGrid", - autoHeight: true, - structure: [{ - name: "Name", - field: "label", - width: "52%" + new Grid(lang.mixin(gridProps, { + collection: this._pairedStatsStore.filter({statisticType : "CUMULATIVE"}) + .filter(lang.hitch(this, defaultFilter)), + columns: [{ + label: "Name", + get: lang.hitch(this, function (obj) {return obj.msgItem.label}) }, { - name: "Messages", - fields: ["value", "units"], - width: "12%", - formatter: lang.hitch(this, formatValue) + label: "Messages", + get: lang.hitch(this, function(obj) {return this._formatValue(obj.msgItem)}) }, { - name: "Message Rate", - fields: ["value", "previousValue", "units"], - width: "12%", - formatter: lang.hitch(this, formatRate) + label: "Message Rate", + get: lang.hitch(this, function(obj) {return this._formatRate(obj.msgItem)}) }, { - name: "Bytes", - field: "_item", - width: "12%", - formatter: lang.hitch(this, formatByteStatValueFromMsgStat) + label: "Bytes", + get: lang.hitch(this, function(obj) {return this._formatValue(obj.byteItem)}) }, { - name: "Byte Rate", - field: "_item", - width: "12%", - formatter: lang.hitch(this, formatByteStatRateFromMsgStat) + label: "Byte Rate", + get: lang.hitch(this, function(obj) {return this._formatRate(obj.byteItem)}) }] - }, this.msgBytePairCumulativeStatisticsGridContainer); - - this._msgBytePairCumulativeStatisticsGrid.query = lang.hitch(this, function (statItem) { - return statItem.statisticType === "CUMULATIVE" && - statItem.units === "MESSAGES" && - array.indexOf(pairedByteMessageStatistic, statItem) > -1 && - this._isStatItemShown(statItem); - }); + }), this.msgBytePairCumulativeStatisticsGridContainer); this._otherCumulativeStatisticsGrid = - new EnhancedGrid({ - store: this._dataStore, - "class": "statisticGrid", - autoHeight: true, - structure: [{ - name: "Name", - field: "label", - width: "52%" + new Grid(lang.mixin(gridProps, { + collection: this._otherStatsStore.filter({statisticType: "CUMULATIVE"}) + .filter(lang.hitch(this, defaultFilter)), + columns: [{ + label: "Name", + field: "label" }, { - name: "Value", - fields: ["value", "units"], - width: "24%", - formatter: lang.hitch(this, formatValue) + label: "Value", + get: lang.hitch(this, function(obj) {return this._formatValue(obj)}) }, { - name: "Rate", - fields: ["value", "previousValue", "units"], - width: "24%", - formatter: lang.hitch(this, formatRate) + label: "Rate", + get: lang.hitch(this, function(obj) {return this._formatRate(obj)}) }] - }, this.otherCumulativeStatisticsGridContainer); - this._otherCumulativeStatisticsGrid.query = lang.hitch(this, function (statItem) { - return statItem.statisticType === "CUMULATIVE" && - array.indexOf(pairedByteMessageStatistic, statItem) === -1 && - this._isStatItemShown(statItem); - }); + }), this.otherCumulativeStatisticsGridContainer); this._msgBytePairPointInTimeStatisticsGrid = - new EnhancedGrid({ - store: this._dataStore, - "class": "statisticGrid", - autoHeight: true, - structure: [{ - name: "Name", - field: "label", - width: "52%" + new Grid(lang.mixin(gridProps, { + collection: this._pairedStatsStore.filter({statisticType : "POINT_IN_TIME"}) + .filter(lang.hitch(this, defaultFilter)), + columns: [{ + label: "Name", + get: lang.hitch(this, function (obj) {return obj.msgItem.label}) }, { - name: "Message Value", - fields: ["value", "units"], - width: "24%", - formatter: lang.hitch(this, formatValue) + label: "Message Value", + get: lang.hitch(this, function(obj) {return this._formatValue(obj)}) }, { - name: "Byte Value", - field: "_item", - width: "24%", - formatter: lang.hitch(this, formatByteStatValueFromMsgStat) + label: "Byte Value", + get: lang.hitch(this, function(obj) {return this._formatValue(obj)}) }] - }, this.msgBytePairPointInTimeStatisticsGridContainer); - - this._msgBytePairPointInTimeStatisticsGrid.query = lang.hitch(this, function (statItem) { - return statItem.statisticType === "POINT_IN_TIME" && - statItem.units === "MESSAGES" && - array.indexOf(pairedByteMessageStatistic, statItem) > -1 && - this._isStatItemShown(statItem); - }); + }), this.msgBytePairPointInTimeStatisticsGridContainer); this._otherPointInTimeStatisticsGrid = - new EnhancedGrid({ - store: this._dataStore, - "class": "statisticGrid", - autoHeight: true, - structure: [{ - name: "Name", - field: "label", - width: "52%" + new Grid(lang.mixin(gridProps, { + collection: this._otherStatsStore.filter({statisticType: "POINT_IN_TIME"}) + .filter(lang.hitch(this, defaultFilter)), + columns: [{ + label: "Name", + field: "label" }, { - name: "Value", - fields: ["value", "units"], - width: "48%", - formatter: lang.hitch(this, formatValue) + label: "Value", + get: lang.hitch(this, function(obj) {return this._formatValue(obj)}) }] - }, this.otherPointInTimeStatisticsGridContainer); - - this._otherPointInTimeStatisticsGrid.query = lang.hitch(this, function (statItem) { - return statItem.statisticType === "POINT_IN_TIME" && - array.indexOf(pairedByteMessageStatistic, statItem) === -1 && - this._isStatItemShown(statItem); - }); + }), this.otherPointInTimeStatisticsGridContainer); this._allGrids = [this._msgBytePairCumulativeStatisticsGrid, - this._otherCumulativeStatisticsGrid, - this._msgBytePairPointInTimeStatisticsGrid, - this._otherPointInTimeStatisticsGrid]; - - connect.connect(this.statisticsPane, "toggle", lang.hitch(this, this.resize)); - array.forEach(this._allGrids, function(grid) - { - connect.connect(grid, "onCellMouseOver", lang.hitch(this, this._addDynamicTooltipToGridRow)); - }, this); + this._otherCumulativeStatisticsGrid, + this._msgBytePairPointInTimeStatisticsGrid, + this._otherPointInTimeStatisticsGrid]; + //this.statisticsPane.on("toggle", lang.hitch(this, this.resize)); this.allStatsToggle.on("change", lang.hitch(this, this._onStatsToggleChange)); }, startup: function () @@ -275,65 +211,116 @@ define(["dojox/lang/functional/object", { this.inherited(arguments); - array.forEach(this._allGrids, function (grid) { + array.forEach(this._allGrids, function (grid) + { grid.startup(); + + grid.on("dgrid-refresh-complete", lang.hitch(this, function (event) + { + var hide = event.grid.get("total") === 0; + domStyle.set(event.grid.domNode, 'display', hide ? "none": "block"); + event.grid.resize(); + })); + + grid.on(".dgrid-content .dgrid-row:mouseover", lang.hitch(this, function(event) + { + var row = grid.row(event); + var statItem = row.data; + this._addDynamicTooltipToGridRow(statItem, row.element); + + })); }, this); } }, resize: function () { this.inherited(arguments); - this._showHideGrids(); array.forEach(this._allGrids, function(grid) { grid.resize(); }, this); - }, update: function (statistics) { this._previousSampleTime = this._sampleTime; this._sampleTime = new Date(); + this._updateStoreData(statistics); + }, + _updateStoreData: function (statistics) + { + function updateItem(storeItem) + { + if (storeItem.id in statistics) + { + var newValue = statistics[storeItem.id]; - array.forEach(this._allGrids, function(grid) + storeItem["previousValue"] = storeItem["value"]; + storeItem["value"] = newValue; + return true; + } + return false; + } + + this._otherStatsStore.forEach(function(storeItem) { - grid.beginUpdate(); + if (updateItem(storeItem)) + { + this._otherStatsStore.put(storeItem); + } }, this); - this._updateStoreData(statistics, this._store.data); - - array.forEach(this._allGrids, function(grid) + this._pairedStatsStore.forEach(function(pairedStatItem) { - grid.endUpdate(); + var updated = updateItem(pairedStatItem.msgItem); + updated = updateItem(pairedStatItem.byteItem) || updated; + + if (updated) + { + this._pairedStatsStore.put(pairedStatItem); + } + }, this); }, - uninitialize: function () - { - this.inherited(arguments); - this._dataStore.close(); - }, - _isStatItemShown: function (statItem) - { - return this._showAllStats || (!this.defaultStatistics || array.indexOf(this.defaultStatistics, statItem.name) > -1); - }, _onStatsToggleChange: function (value) { this.allStatsToggle.set("label", value ? "Show fewer statistics" : "Show more statistics"); this.allStatsToggle.set("iconClass", value ? "minusIcon" : "addIcon"); + this.allStatsToggle.set("disabled", true); this._showAllStats = value; - array.forEach(this._allGrids, function(grid) + var refreshPromises = []; + + // Refresh the grids so they re-query the store thus taking account of the new showAllStats state. + array.forEach(this._allGrids, function (grid) { - grid._refresh(); + var deferred = new Deferred(); + refreshPromises.push(deferred.promise); + + var handler = grid.on("dgrid-refresh-complete", lang.hitch(this, function () + { + deferred.resolve(); + handler.remove(); + })); + + // grid.refresh(); + // It seems refreshing the grid is not a reliable way to of getting it to re-query the store, + // bumping the collection seems to do the trick. + grid.set("collection", grid.get("collection")); }, this); - this._showHideGrids(); - this.resize(); + all(refreshPromises).then(lang.hitch(this, function() + { + this.allStatsToggle.set("disabled", false); + })); }, - _formatRate : function (value, previousValue, units) + _formatRate : function (statItem) { if (this._previousSampleTime) { + var value = statItem.value ? statItem.value : 0; + var previousValue = statItem.previousValue ? statItem.previousValue : 0; + var units = statItem.units; + var samplePeriod = this._sampleTime.getTime() - this._previousSampleTime.getTime(); var rate = number.round((1000 * (value - previousValue)) / samplePeriod); @@ -359,15 +346,17 @@ define(["dojox/lang/functional/object", } else { - valueWithUnit.units = " Δs" + valueWithUnit.units = entities.decode("Δ") + "value/s"; } return valueWithUnit; } return null; }, - _formatValue : function (value, units) + _formatValue : function (statItem) { + var value = statItem.value ? statItem.value : 0; + var units = statItem.units; if (units === "BYTES") { return formatter.formatBytes(value); @@ -388,19 +377,6 @@ define(["dojox/lang/functional/object", return value; } }, - _showHideGrids: function () - { - array.forEach(this._allGrids, function(grid) - { - grid.set("hidden", grid.rowCount === 0); - }, this); - }, - _updateStoreData: function (statistics, data) { - array.forEach(data, function (storeItem) { - storeItem["previousValue"] = storeItem["value"]; - storeItem["value"] = statistics[storeItem.id]; - }, this); - }, _augmentStatistics : function(statItems) { var items = []; @@ -408,7 +384,8 @@ define(["dojox/lang/functional/object", var item = lang.mixin(statItem, {id: statItem.name, value: null, - previousValue: null}); + previousValue: null, + defaultItem: array.indexOf(this.defaultStatistics, statItem.name) > -1}); items.push(item); }, this); items.sort(function(x,y) {return ((x.label === y.label) ? 0 : ((x.label > y.label) ? 1 : -1 ))}); @@ -427,7 +404,9 @@ define(["dojox/lang/functional/object", { var byteItemCandidates = array.filter(otherStatistics, function(item) { - return item.units === "BYTES" && item.label === msgItemCandidate.label; + return item.units === "BYTES" && + item.label === msgItemCandidate.label && + item.statisticType === msgItemCandidate.statisticType; }); if (byteItemCandidates.length === 1) @@ -437,32 +416,26 @@ define(["dojox/lang/functional/object", otherStatistics.splice(array.indexOf(otherStatistics, msgItemCandidate), 1); otherStatistics.splice(array.indexOf(otherStatistics, byteItemCandidate), 1); - byteMsgPairStatistics.push(msgItemCandidate); - byteMsgPairStatistics.push(byteItemCandidate); + byteMsgPairStatistics.push({id: msgItemCandidate.id, + statisticType: msgItemCandidate.statisticType, + msgItem: msgItemCandidate, + byteItem: byteItemCandidate, + defaultItem: msgItemCandidate.defaultItem, + description: msgItemCandidate.description}); } }, this); }, - _addDynamicTooltipToGridRow: function(e) + _addDynamicTooltipToGridRow: function(statItem, rowNode) { - var statItem = e.grid.getItem(e.rowIndex); if (statItem && statItem.description) { - Tooltip.show(statItem.description, e.rowNode); - on.once(e.rowNode, mouse.leave, function() + Tooltip.show(statItem.description, rowNode); + on.once(rowNode, mouse.leave, function() { - Tooltip.hide(e.rowNode); + Tooltip.hide(rowNode); }); } - }, - _queryStatItem: function (statItem, units) - { - var result = this._store.query({ - label: statItem.label, - statisticType: statItem.statisticType, - units: units - }); - return result[0]; } }); }); http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/ed33110b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js ---------------------------------------------------------------------- diff --git a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js index 174a8d7..dd2292d 100644 --- a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js +++ b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js @@ -1002,7 +1002,6 @@ define(["dojo/parser", } } that.brokerStatistics.update(that.brokerData.statistics); - that.brokerStatistics.resize(); util.flattenStatistics(that.brokerData); http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/ed33110b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Connection.js ---------------------------------------------------------------------- diff --git a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Connection.js b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Connection.js index ea21a78..da92278 100644 --- a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Connection.js +++ b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Connection.js @@ -351,7 +351,6 @@ define(["dojo/parser", that.sessions = sessions; that.connectionStatistics.update(that.connectionData.statistics); - that.connectionStatistics.resize(); // update sessions that.sessionsGrid.update(that.connectionData.sessions) http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/ed33110b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Exchange.js ---------------------------------------------------------------------- diff --git a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Exchange.js b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Exchange.js index 01298e9..7ddea2e 100644 --- a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Exchange.js +++ b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Exchange.js @@ -301,7 +301,6 @@ define(["dojo/_base/xhr", } thisObj.exchangeStatistics.update(thisObj.exchangeData.statistics); - thisObj.exchangeStatistics.resize(); thisObj.updateHeader(); // update bindings http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/ed33110b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Queue.js ---------------------------------------------------------------------- diff --git a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Queue.js b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Queue.js index 5f3ac3a..5a21ab9 100644 --- a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Queue.js +++ b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Queue.js @@ -597,7 +597,6 @@ define(["dojo/_base/declare", this.holdOnPublishEnabled.innerHTML = entities.encode(String(this.queueData["holdOnPublishEnabled"])); this.queueStatistics.update(this.queueData.statistics); - this.queueStatistics.resize(); }; QueueUpdater.prototype.update = function (callback) http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/ed33110b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHost.js ---------------------------------------------------------------------- diff --git a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHost.js b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHost.js index f910ed7..fc6af61 100644 --- a/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHost.js +++ b/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHost.js @@ -498,7 +498,6 @@ define(["dojo/parser", this.tabObject.deleteButton.set("disabled", !this.vhostData.state); this.virtualhostStatistics.update(this.vhostData.statistics); - this.virtualhostStatistics.resize(); this._updateHeader(); --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@qpid.apache.org For additional commands, e-mail: commits-h...@qpid.apache.org
