You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@qpid.apache.org by kw...@apache.org on 2017/09/18 09:36:41 UTC
[2/2] qpid-broker-j git commit: QPID-7772: [Web Management Console]
Correct focus stealing defect found by the review of orudyy@apache.org
QPID-7772: [Web Management Console] Correct focus stealing defect found by the review of orudyy@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 <ke...@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-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org