You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@qpid.apache.org by or...@apache.org on 2017/09/15 16:21:59 UTC

qpid-broker-j git commit: QPID-7772: [Java Broker, WMC] Improve UI for Virtual host and statistics

Repository: qpid-broker-j
Updated Branches:
  refs/heads/master 3da255dee -> f8e43f2e5


QPID-7772: [Java Broker, WMC] Improve UI for Virtual host and statistics

* Replace VH tab grids with dgrid
* Initialize StatisticsWidget field _allGrid in postCreate


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/f8e43f2e
Tree: http://git-wip-us.apache.org/repos/asf/qpid-broker-j/tree/f8e43f2e
Diff: http://git-wip-us.apache.org/repos/asf/qpid-broker-j/diff/f8e43f2e

Branch: refs/heads/master
Commit: f8e43f2e5ff0a75a022067ecbdb8f1813be5e181
Parents: 3da255d
Author: Alex Rudyy <or...@apache.org>
Authored: Fri Sep 15 17:21:32 2017 +0100
Committer: Alex Rudyy <or...@apache.org>
Committed: Fri Sep 15 17:21:44 2017 +0100

----------------------------------------------------------------------
 .../src/main/java/resources/css/common.css      |  18 +
 .../js/qpid/common/StatisticsWidget.js          |  23 +-
 .../resources/js/qpid/management/VirtualHost.js | 478 +++++++++----------
 .../src/main/java/resources/showExchange.html   |  48 +-
 .../main/java/resources/showVirtualHost.html    |  12 +-
 5 files changed, 296 insertions(+), 283 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/f8e43f2e/broker-plugins/management-http/src/main/java/resources/css/common.css
----------------------------------------------------------------------
diff --git a/broker-plugins/management-http/src/main/java/resources/css/common.css b/broker-plugins/management-http/src/main/java/resources/css/common.css
index bdacc7d..74b4602 100644
--- a/broker-plugins/management-http/src/main/java/resources/css/common.css
+++ b/broker-plugins/management-http/src/main/java/resources/css/common.css
@@ -532,6 +532,24 @@ td.advancedSearchField, col.autoWidth {
 .virtualHostConnections .field-msgOutRate { width: 10% }
 .virtualHostConnections .field-bytesOutRate { width: 10% }
 
+.virtualHostQueues .field-selected { width: 2em; }
+.virtualHostQueues .field-name { width: auto; }
+.virtualHostQueues .field-type { width: 10%; }
+.virtualHostQueues .field-consumerCount { width: 10% }
+.virtualHostQueues .field-queueDepthMessages { width: 10% }
+.virtualHostQueues .field-queueDepthBytes { width: 10% }
+
+.virtualHostExchanges .field-selected { width: 2em; }
+.virtualHostExchanges .field-name { width: auto; }
+.virtualHostExchanges .field-type { width: 10%; }
+.virtualHostExchanges .field-bindingCount { width: 10% }
+
+.virtualHostLoggers .field-selected { width: 2em; }
+.virtualHostLoggers .field-name { width: auto; }
+.virtualHostLoggers .field-type { width: 10%; }
+.virtualHostLoggers .field-warnCount { width: 10% }
+.virtualHostLoggers .field-errorCount { width: 10% }
+
 .queueConsumers .field-name { width: 30%; }
 .queueConsumers .field-distributionMode { width: 10% }
 .queueConsumers .field-connectionName { width: 10% }

http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/f8e43f2e/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 dcab5b9a..d865070 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
@@ -61,6 +61,7 @@ define(["dojox/lang/functional/object",
                 //Strip out the apache comment header from the template html as comments unsupported.
                 templateString: template.replace(/<!--[\s\S]*?-->/g, ""),
 
+                // template fields
                 msgBytePairCumulativeStatisticsGridContainer: null,
                 otherCumulativeStatisticsGridContainer: null,
                 msgBytePairPointInTimeStatisticsGridContainer: null,
@@ -69,21 +70,23 @@ define(["dojox/lang/functional/object",
                 statisticsPane: null,
                 allStatsToggle: null,
 
+                // constructor arguments
                 category: null,
                 type: null,
                 management: null,
                 defaultStatistics: null,
 
+                // inner fields
                 _msgBytePairCumulativeStatisticsGrid: null,
                 _otherCumulativeStatisticsGrid: null,
                 _msgBytePairPointInTimeStatisticsGrid: null,
                 _otherPointInTimeStatisticsGrid: null,
-                _allGrids: [],
+                _allGrids: null,
 
                 _showAllStats : false,
                 _sampleTime: null,
                 _previousSampleTime: null,
-                _nodes: {},
+                _userPreferences: null,
 
                 postCreate: function ()
                 {
@@ -93,7 +96,7 @@ define(["dojox/lang/functional/object",
 
                     var type = this.type ? this.type : this.category;
 
-                    this.userPreferences = this.management.userPreferences;
+                    this._userPreferences = this.management.userPreferences;
                     var allStatistics = metadata.getStatisticsMetadata(this.category, type);
                     var allAugmentedStatistics = this._augmentStatistics(allStatistics);
                     var pairedByteMessageStatistic = [];
@@ -138,7 +141,7 @@ define(["dojox/lang/functional/object",
                     this._msgBytePairCumulativeStatisticsGrid =
                         new EnhancedGrid({
                             store: this._dataStore,
-                            class: "statisticGrid",
+                            "class": "statisticGrid",
                             autoHeight: true,
                             structure: [{
                                 name: "Name",
@@ -177,7 +180,7 @@ define(["dojox/lang/functional/object",
                     this._otherCumulativeStatisticsGrid =
                         new EnhancedGrid({
                             store: this._dataStore,
-                            class: "statisticGrid",
+                            "class": "statisticGrid",
                             autoHeight: true,
                             structure: [{
                                 name: "Name",
@@ -204,7 +207,7 @@ define(["dojox/lang/functional/object",
                     this._msgBytePairPointInTimeStatisticsGrid =
                         new EnhancedGrid({
                             store: this._dataStore,
-                            class: "statisticGrid",
+                            "class": "statisticGrid",
                             autoHeight: true,
                             structure: [{
                                 name: "Name",
@@ -233,7 +236,7 @@ define(["dojox/lang/functional/object",
                     this._otherPointInTimeStatisticsGrid =
                         new EnhancedGrid({
                             store: this._dataStore,
-                            class: "statisticGrid",
+                            "class": "statisticGrid",
                             autoHeight: true,
                             structure: [{
                                 name: "Name",
@@ -253,10 +256,10 @@ define(["dojox/lang/functional/object",
                                this._isStatItemShown(statItem);
                     });
 
-                    this._allGrids.push(this._msgBytePairCumulativeStatisticsGrid,
+                    this._allGrids = [this._msgBytePairCumulativeStatisticsGrid,
                                         this._otherCumulativeStatisticsGrid,
                                         this._msgBytePairPointInTimeStatisticsGrid,
-                                        this._otherPointInTimeStatisticsGrid);
+                                        this._otherPointInTimeStatisticsGrid];
 
                     connect.connect(this.statisticsPane, "toggle", lang.hitch(this, this.resize));
                     array.forEach(this._allGrids, function(grid)
@@ -375,7 +378,7 @@ define(["dojox/lang/functional/object",
                     }
                     else if (units === "ABSOLUTE_TIME")
                     {
-                        return this.userPreferences.formatDateTime(value, {
+                        return this._userPreferences.formatDateTime(value, {
                             addOffset: true,
                             appendTimeZone: true
                         });

http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/f8e43f2e/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 2a10ef5..f910ed7 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
@@ -20,42 +20,38 @@
  */
 define(["dojo/parser",
         "dojo/query",
-        "dojo/_base/connect",
         "dojo/_base/lang",
+        "dojo/_base/declare",
         "dijit/registry",
         "dojox/html/entities",
-        "qpid/common/properties",
         "qpid/common/updater",
         "qpid/common/util",
         "qpid/common/formatter",
-        "qpid/common/UpdatableStore",
         "qpid/management/addQueue",
         "qpid/management/addExchange",
         "qpid/management/addLogger",
         "qpid/management/query/QueryGrid",
-        "dojox/grid/EnhancedGrid",
         "qpid/management/editVirtualHost",
         "qpid/common/StatisticsWidget",
+        "dgrid/Selector",
         "dojo/text!showVirtualHost.html",
         "dojo/domReady!"],
     function (parser,
               query,
-              connect,
               lang,
+              declare,
               registry,
               entities,
-              properties,
               updater,
               util,
               formatter,
-              UpdatableStore,
               addQueue,
               addExchange,
               addLogger,
               QueryGrid,
-              EnhancedGrid,
               editVirtualHost,
               StatisticsWidget,
+              Selector,
               template)
     {
 
@@ -85,41 +81,27 @@ define(["dojo/parser",
                     that.vhostUpdater = new Updater(that);
 
                     var addQueueButton = query(".addQueueButton", containerNode)[0];
-                    connect.connect(registry.byNode(addQueueButton), "onClick", function (evt)
+                    registry.byNode(addQueueButton).on("click", function (evt)
                     {
                         addQueue.show(that.management, that.modelObj)
                     });
 
                     var deleteQueueButton = query(".deleteQueueButton", containerNode)[0];
-                    connect.connect(registry.byNode(deleteQueueButton), "onClick", function (evt)
+                    registry.byNode(deleteQueueButton).on("click", function (evt)
                     {
-                        util.deleteSelectedObjects(that.vhostUpdater.queuesGrid.grid,
-                            "Are you sure you want to delete queue",
-                            that.management,
-                            {
-                                type: "queue",
-                                parent: that.modelObj
-                            },
-                            that.vhostUpdater);
+                        that._deleteSelectedItems(that.vhostUpdater.queuesGrid, "queue", "queue");
                     });
 
                     var addExchangeButton = query(".addExchangeButton", containerNode)[0];
-                    connect.connect(registry.byNode(addExchangeButton), "onClick", function (evt)
+                    registry.byNode(addExchangeButton).on("click", function (evt)
                     {
                         addExchange.show(that.management, that.modelObj);
                     });
 
                     var deleteExchangeButton = query(".deleteExchangeButton", containerNode)[0];
-                    connect.connect(registry.byNode(deleteExchangeButton), "onClick", function (evt)
+                    registry.byNode(deleteExchangeButton).on("click", function (evt)
                     {
-                        util.deleteSelectedObjects(that.vhostUpdater.exchangesGrid.grid,
-                            "Are you sure you want to delete exchange",
-                            that.management,
-                            {
-                                type: "exchange",
-                                parent: that.modelObj
-                            },
-                            that.vhostUpdater);
+                        that._deleteSelectedItems(that.vhostUpdater.exchangesGrid, "exchange", "exchange");
                     });
 
                     var addLoggerButtonNode = query(".addVirtualHostLogger", contentPane.containerNode)[0];
@@ -133,14 +115,7 @@ define(["dojo/parser",
                     var deleteLoggerButton = registry.byNode(deleteLoggerButtonNode);
                     deleteLoggerButton.on("click", function (evt)
                     {
-                        util.deleteSelectedObjects(that.vhostUpdater.virtualHostLoggersGrid.grid,
-                            "Are you sure you want to delete virtual host logger",
-                            that.management,
-                            {
-                                type: "virtualhostlogger",
-                                parent: that.modelObj
-                            },
-                            that.vhostUpdater);
+                        that._deleteSelectedItems(that.vhostUpdater.virtualHostLoggersGrid, "virtualhostlogger", "virtual host logger");
                     });
 
                     that.stopButton = registry.byNode(query(".stopButton", containerNode)[0]);
@@ -200,6 +175,39 @@ define(["dojo/parser",
                 });
         };
 
+        VirtualHost.prototype._deleteSelectedItems = function(dgrid, category, friendlyCategoryName)
+        {
+            var selected = [];
+            var selection = dgrid.selection;
+            for(var item in selection)
+            {
+                if (selection.hasOwnProperty(item))
+                {
+                    selected.push(item);
+                }
+            }
+            if (selected.length > 0)
+            {
+                var ending = selected.length > 1 ? "s " : " ";
+                if (confirm(lang.replace("Are you sure you want to delete {0} {1}{2}from virtual host '{3}'?",
+                        [selected.length,
+                         entities.encode(String(friendlyCategoryName || category )),
+                         ending,
+                         entities.encode(String(this.modelObj.name))])))
+                {
+                    this.management
+                        .remove({
+                            type: category,
+                            parent: this.modelObj
+                        }, {"id": selected})
+                        .then(lang.hitch(this, function (responseData)
+                        {
+                            this.vhostUpdater.update();
+                        }));
+                }
+            }
+        };
+
         VirtualHost.prototype.close = function ()
         {
             updater.remove(this.vhostUpdater);
@@ -223,6 +231,7 @@ define(["dojo/parser",
             this.contentPane = virtualHost.contentPane;
             this.management = controller.management;
             this.modelObj = vhost;
+            this.vhostData = {};
             var that = this;
 
             function findNode(name)
@@ -256,85 +265,90 @@ define(["dojo/parser",
                         "virtualHostConnections",
                         "virtualHostChildren"]);
 
-            that.vhostData = {};
-
-            var gridProperties = {
-                keepSelection: true,
-                plugins: {
-                    pagination: {
-                        pageSizes: [10, 25, 50, 100],
-                        description: true,
-                        sizeSwitch: true,
-                        pageStepper: true,
-                        gotoButton: true,
-                        maxPageStep: 4,
-                        position: "bottom"
-                    },
-                    indirectSelection: true
 
-                }
-            };
-
-            that.queuesGrid = new UpdatableStore([], findNode("queues"), [{
-                name: "Name",
-                field: "name",
-                width: "30%"
-            }, {
-                name: "Type",
-                field: "type",
-                width: "20%"
-            }, {
-                name: "Consumers",
-                field: "consumerCount",
-                width: "10%"
-            }, {
-                name: "Depth (msgs)",
-                field: "queueDepthMessages",
-                width: "20%"
-            }, {
-                name: "Depth (bytes)",
-                field: "queueDepthBytes",
-                width: "20%",
-                get: function (rowIndex, item)
-                {
-                    if (!item)
+
+            var CustomGrid = declare([QueryGrid, Selector]);
+
+            this.queuesGrid = new CustomGrid({
+                detectChanges: true,
+                rowsPerPage: 10,
+                transformer: util.queryResultToObjects,
+                management: this.management,
+                parentObject: this.modelObj,
+                category: "Queue",
+                selectClause: "id, name, type, consumerCount, queueDepthMessages, queueDepthBytes",
+                orderBy: "name",
+                selectionMode: 'multiple',
+                deselectOnRefresh: false,
+                allowSelectAll: true,
+                columns: [
                     {
-                        return;
+                        field: "selected",
+                        label: 'All',
+                        selector: 'checkbox'
+                    }, {
+                        label: "Name",
+                        field: "name"
+                    }, {
+                        label: "Type",
+                        field: "type"
+                    }, {
+                        label: "Consumers",
+                        field: "consumerCount"
+                    }, {
+                        label: "Depth (msgs)",
+                        field: "queueDepthMessages"
+                    }, {
+                        label: "Depth (bytes)",
+                        field: "queueDepthBytes",
+                        formatter: function (value, object)
+                        {
+                            var bytesFormat = formatter.formatBytes(value);
+                            return bytesFormat.toString();
+                        }
                     }
-                    var store = this.grid.store;
-                    var qdb = store.getValue(item, "queueDepthBytes");
-                    var bytesFormat = formatter.formatBytes(qdb);
-                    return bytesFormat.value + " " + bytesFormat.units;
-                }
-            }], function (obj)
-            {
-                connect.connect(obj.grid, "onRowDblClick", obj.grid, function (evt)
-                {
-                    var theItem = this.getItem(evt.rowIndex);
-                    controller.showById(theItem.id);
-                });
-            }, gridProperties, EnhancedGrid);
-
-            that.exchangesGrid = new UpdatableStore([], findNode("exchanges"), [{
-                name: "Name",
-                field: "name",
-                width: "50%"
-            }, {
-                name: "Type",
-                field: "type",
-                width: "30%"
-            }, {
-                name: "Binding Count",
-                field: "bindingCount",
-                width: "20%"
-            }], function (obj)
-            {
-                connect.connect(obj.grid, "onRowDblClick", obj.grid, function (evt)
+                ]
+            }, findNode("queues"));
+            this.queuesGrid.on('rowBrowsed', function(event){controller.showById(event.id);});
+            this.queuesGrid.startup();
+
+            this.exchangesGrid = new CustomGrid({
+                detectChanges: true,
+                rowsPerPage: 10,
+                transformer: util.queryResultToObjects,
+                management: this.management,
+                parentObject: this.modelObj,
+                category: "Exchange",
+                selectClause: "id, name, type, bindingCount",
+                orderBy: "name",
+                selectionMode: 'multiple',
+                deselectOnRefresh: false,
+                allowSelectAll: true,
+                allowSelect: function (row)
                 {
-                    var theItem = this.getItem(evt.rowIndex);
-                    controller.showById(theItem.id);
-                });
-            }, gridProperties, EnhancedGrid);
+                    var item = row.data;
+                    var isStandard = item && item.name && util.isReservedExchangeName(item.name);
+                    return !isStandard;
+                },
+                columns: [
+                    {
+                        field: "selected",
+                        label: 'All',
+                        selector: 'checkbox'
+                    },  {
+                        label: "Name",
+                        field: "name"
+                    }, {
+                        label: "Type",
+                        field: "type"
+                    }, {
+                        label: "Binding Count",
+                        field: "bindingCount"
+                    }
+                ]
+            }, findNode("exchanges"));
+            this.exchangesGrid.on('rowBrowsed', function(event){controller.showById(event.id);});
+            this.exchangesGrid.startup();
 
             this.connectionsGrid = new QueryGrid({
                 detectChanges: true,
@@ -376,155 +390,136 @@ define(["dojo/parser",
                 ]
             }, findNode("connections"));
             this.connectionsGrid.on('rowBrowsed', function(event){controller.showById(event.id);});
-            that.connectionsGrid.startup();
-
-            // Add onShow handler to work around an issue with not rendering of grid columns before first update.
-            // It seems if dgrid is created when tab is not shown (not active) the grid columns are not rendered.
-            this.contentPane.on("show",
-                                function()
-                                {
-                                    that.connectionsGrid.resize();
-                                });
-
-
-            that.virtualHostLoggersGrid = new UpdatableStore([], findNode("loggers"), [{
-                name: "Name",
-                field: "name",
-                width: "40%"
-            }, {
-                name: "State",
-                field: "state",
-                width: "20%"
-            }, {
-                name: "Type",
-                field: "type",
-                width: "20%"
-            }, {
-                name: "Errors",
-                field: "errorCount",
-                width: "10%"
-            }, {
-                name: "Warnings",
-                field: "warnCount",
-                width: "10%"
-            }], function (obj)
-            {
-                connect.connect(obj.grid, "onRowDblClick", obj.grid, function (evt)
-                {
-                    var theItem = this.getItem(evt.rowIndex);
-                    controller.showById(theItem.id);
-                });
-            }, gridProperties, EnhancedGrid);
+            this.connectionsGrid.startup();
 
+            this.virtualHostLoggersGrid = new CustomGrid({
+                detectChanges: true,
+                rowsPerPage: 10,
+                transformer: util.queryResultToObjects,
+                management: this.management,
+                parentObject: this.modelObj,
+                category: "VirtualHostLogger",
+                selectClause: "id, name, type, errorCount, warnCount",
+                orderBy: "name",
+                selectionMode: 'multiple',
+                deselectOnRefresh: false,
+                allowSelectAll: true,
+                columns: [
+                    {
+                        field: "selected",
+                        label: 'All',
+                        selector: 'checkbox'
+                    },  {
+                        label: "Name",
+                        field: "name"
+                    }, {
+                        label: "Type",
+                        field: "type"
+                    }, {
+                        label: "Errors",
+                        field: "errorCount"
+                    }, {
+                        label: "Warnings",
+                        field: "warnCount"
+                    }
+                ]
+            }, findNode("loggers"));
+            this.virtualHostLoggersGrid.on('rowBrowsed', function(event){controller.showById(event.id);});
+            this.virtualHostLoggersGrid.startup();
         }
 
-        Updater.prototype.updateHeader = function ()
-        {
-            this.name.innerHTML = entities.encode(String(this.vhostData["name"]));
-            this.type.innerHTML = entities.encode(String(this.vhostData["type"]));
-            this.state.innerHTML = entities.encode(String(this.vhostData["state"]));
-            this.durable.innerHTML = entities.encode(String(this.vhostData["durable"]));
-            this.lifetimePolicy.innerHTML = entities.encode(String(this.vhostData["lifetimePolicy"]));
-            util.updateUI(this.vhostData,
-                ["housekeepingCheckPeriod",
-                 "housekeepingThreadCount",
-                 "storeTransactionIdleTimeoutClose",
-                 "storeTransactionIdleTimeoutWarn",
-                 "storeTransactionOpenTimeoutClose",
-                 "storeTransactionOpenTimeoutWarn",
-                 "connectionThreadPoolSize"],
-                this)
-        };
-
         Updater.prototype.update = function (callback)
         {
             if (!this.contentPane.selected && !callback)
             {
                 return;
             }
-
-            var thisObj = this;
-
-            thisObj.connectionsGrid.updateData();
-            thisObj.connectionsGrid.resize();
-
             this.management.load(this.modelObj,
                 {
                     excludeInheritedContext: true,
-                    depth: 1
+                    depth: 0
                 })
-                .then(function (data)
+                .then(lang.hitch(this, function (data)
                 {
-                    thisObj.vhostData = data || {
-                            name: thisObj.modelObj.name
-                        };
-
-                    if (!thisObj.virtualhostStatistics)
-                    {
-                        thisObj.virtualhostStatistics = new StatisticsWidget({
-                            category:  "VirtualHost",
-                            type: thisObj.vhostData.type,
-                            management: thisObj.management,
-                            defaultStatistics: ["messagesIn", "messagesOut", "totalDepthOfQueuesMessages"]
+                    this._updateFromData(data, callback);
+                }), lang.hitch(this, function (error)
+                {
+                    util.tabErrorHandler(error,
+                        {
+                            updater: this,
+                            contentPane: this.tabObject.contentPane,
+                            tabContainer: this.tabObject.controller.tabContainer,
+                            name: this.modelObj.name,
+                            category: "Virtual Host"
                         });
-                        thisObj.virtualhostStatistics.placeAt(thisObj.virtualhostStatisticsNode);
-                        thisObj.virtualhostStatistics.startup();
-                    }
+                }));
+        };
 
-                    if (callback)
-                    {
-                        callback();
-                    }
+        Updater.prototype._updateFromData = function(data, callback)
+        {
+            this.vhostData = data || {name: this.modelObj.name};
 
-                    try
-                    {
-                        thisObj._update();
-                    }
-                    catch (e)
-                    {
-                        if (console && console.error)
-                        {
-                            console.error(e);
-                        }
-                    }
-                }, function (error)
-                {
-                    util.tabErrorHandler(error, {
-                        updater: thisObj,
-                        contentPane: thisObj.tabObject.contentPane,
-                        tabContainer: thisObj.tabObject.controller.tabContainer,
-                        name: thisObj.modelObj.name,
-                        category: "Virtual Host"
-                    });
+            if (!this.virtualhostStatistics)
+            {
+                this.virtualhostStatistics = new StatisticsWidget({
+                    category: "VirtualHost",
+                    type: this.vhostData.type,
+                    management: this.management,
+                    defaultStatistics: ["messagesIn", "messagesOut", "totalDepthOfQueuesMessages"]
                 });
+                this.virtualhostStatistics.placeAt(this.virtualhostStatisticsNode);
+                this.virtualhostStatistics.startup();
+            }
+
+            if (callback)
+            {
+                callback();
+            }
+
+            try
+            {
+                this._update();
+            }
+            catch (e)
+            {
+                if (console && console.error)
+                {
+                    console.error(e);
+                }
+            }
         };
 
         Updater.prototype._update = function ()
         {
-            var thisObj = this;
             this.tabObject.startButton.set("disabled", !this.vhostData.state || this.vhostData.state !== "STOPPED");
             this.tabObject.stopButton.set("disabled", !this.vhostData.state || this.vhostData.state !== "ACTIVE");
             this.tabObject.editButton.set("disabled", !this.vhostData.state || this.vhostData.state === "UNAVAILABLE");
             this.tabObject.downloadButton.set("disabled", !this.vhostData.state || this.vhostData.state !== "ACTIVE");
             this.tabObject.deleteButton.set("disabled", !this.vhostData.state);
 
-            var queues = thisObj.vhostData["queues"];
-            var exchanges = thisObj.vhostData["exchanges"];
+            this.virtualhostStatistics.update(this.vhostData.statistics);
+            this.virtualhostStatistics.resize();
 
-            thisObj.virtualhostStatistics.update(thisObj.vhostData.statistics);
-            thisObj.virtualhostStatistics.resize();
+            this._updateHeader();
 
-            thisObj.updateHeader();
+            this.virtualHostChildren.style.display = this.vhostData.state === "ACTIVE" ? "block" : "none";
 
-            this._updateGrids(thisObj.vhostData);
+            if (this.vhostData.state === "ACTIVE")
+            {
+                this.connectionsGrid.updateData();
+                this.queuesGrid.updateData();
+                this.exchangesGrid.updateData();
+                this.virtualHostLoggersGrid.updateData();
+            }
 
-            if (thisObj.details)
+            if (this.details)
             {
-                thisObj.details.update(thisObj.vhostData);
+                this.details.update(this.vhostData);
             }
             else
             {
-                require(["qpid/management/virtualhost/" + thisObj.vhostData.type.toLowerCase() + "/show"],
+                var thisObj = this;
+                require(["qpid/management/virtualhost/" + this.vhostData.type.toLowerCase() + "/show"],
                     function (VirtualHostDetails)
                     {
                         thisObj.details = new VirtualHostDetails({
@@ -534,7 +529,24 @@ define(["dojo/parser",
                         thisObj.details.update(thisObj.vhostData);
                     });
             }
+        };
 
+        Updater.prototype._updateHeader = function ()
+        {
+            this.name.innerHTML = entities.encode(String(this.vhostData["name"]));
+            this.type.innerHTML = entities.encode(String(this.vhostData["type"]));
+            this.state.innerHTML = entities.encode(String(this.vhostData["state"]));
+            this.durable.innerHTML = entities.encode(String(this.vhostData["durable"]));
+            this.lifetimePolicy.innerHTML = entities.encode(String(this.vhostData["lifetimePolicy"]));
+            util.updateUI(this.vhostData,
+                ["housekeepingCheckPeriod",
+                 "housekeepingThreadCount",
+                 "storeTransactionIdleTimeoutClose",
+                 "storeTransactionIdleTimeoutWarn",
+                 "storeTransactionOpenTimeoutClose",
+                 "storeTransactionOpenTimeoutWarn",
+                 "connectionThreadPoolSize"],
+                this)
         };
 
         Updater.prototype._transformConnectionData = function (data)
@@ -584,24 +596,6 @@ define(["dojo/parser",
             return connections;
         };
 
-        Updater.prototype._updateGrids = function (data)
-        {
-            this.virtualHostChildren.style.display = data.state === "ACTIVE" ? "block" : "none";
-            if (data.state === "ACTIVE")
-            {
-                util.updateUpdatableStore(this.queuesGrid, data.queues);
-                util.updateUpdatableStore(this.exchangesGrid, data.exchanges);
-                util.updateUpdatableStore(this.virtualHostLoggersGrid, data.virtualhostloggers);
-
-                var exchangesGrid = this.exchangesGrid.grid;
-                for (var i = 0; i < data.exchanges.length; i++)
-                {
-                    var item = exchangesGrid.getItem(i);
-                    var isStandard = item && item.name && util.isReservedExchangeName(item.name);
-                    exchangesGrid.rowSelectCell.setDisabled(i, isStandard);
-                }
-            }
-        };
 
         return VirtualHost;
     });

http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/f8e43f2e/broker-plugins/management-http/src/main/java/resources/showExchange.html
----------------------------------------------------------------------
diff --git a/broker-plugins/management-http/src/main/java/resources/showExchange.html b/broker-plugins/management-http/src/main/java/resources/showExchange.html
index 6211c7b..1c2c9b5 100644
--- a/broker-plugins/management-http/src/main/java/resources/showExchange.html
+++ b/broker-plugins/management-http/src/main/java/resources/showExchange.html
@@ -22,35 +22,33 @@
     <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Exchange Attributes',  open: true">
         <div class="clear">
             <div class="formLabel-labelCell">Name:</div>
-            <div class="name"></div>
+            <div class="name formValue-valueCell"></div>
         </div>
-        <div class="clear">
-            <div class="alignLeft">
-                <div class="clear">
-                    <div class="formLabel-labelCell">Type:</div>
-                    <div class="type  formValue-valueCell"></div>
-                </div>
-                <div class="clear">
-                    <div class="formLabel-labelCell">State:</div>
-                    <div class="state formValue-valueCell"></div>
-                </div>
-                <div class="clear">
-                    <div class="formLabel-labelCell">Durable:</div>
-                    <div class="durable formValue-valueCell"></div>
-                </div>
-                <div class="clear">
-                    <div class="formLabel-labelCell">Lifespan:</div>
-                    <div class="lifetimePolicy formValue-valueCell"></div>
-                </div>
+        <div class="clear"></div>
+        <div class="alignLeft">
+            <div class="clear">
+                <div class="formLabel-labelCell">Type:</div>
+                <div class="type formValue-valueCell"></div>
+            </div>
+            <div class="clear">
+                <div class="formLabel-labelCell">State:</div>
+                <div class="state formValue-valueCell"></div>
             </div>
-            <div class="alignRight">
-                <div class="clear">
-                    <div class="formLabel-labelCell">Alternate Binding:</div>
-                    <div class="alternateBinding formValue-valueCell"></div>
-                </div>
+            <div class="clear">
+                <div class="formLabel-labelCell">Durable:</div>
+                <div class="durable formValue-valueCell"></div>
+            </div>
+            <div class="clear">
+                <div class="formLabel-labelCell">Lifespan:</div>
+                <div class="lifetimePolicy formValue-valueCell"></div>
+            </div>
+        </div>
+        <div class="alignRight">
+            <div class="clear">
+                <div class="formLabel-labelCell">Alternate Binding:</div>
+                <div class="alternateBinding formValue-valueCell"></div>
             </div>
         </div>
-
         <div class="clear"></div>
     </div>
     <br/>

http://git-wip-us.apache.org/repos/asf/qpid-broker-j/blob/f8e43f2e/broker-plugins/management-http/src/main/java/resources/showVirtualHost.html
----------------------------------------------------------------------
diff --git a/broker-plugins/management-http/src/main/java/resources/showVirtualHost.html b/broker-plugins/management-http/src/main/java/resources/showVirtualHost.html
index 8a37893..465af03 100644
--- a/broker-plugins/management-http/src/main/java/resources/showVirtualHost.html
+++ b/broker-plugins/management-http/src/main/java/resources/showVirtualHost.html
@@ -27,13 +27,13 @@
                 <div class="formLabel-labelCell">Name:</div>
                 <div class="name formValue-valueCell"></div>
             </div>
+        </div>
+        <div class="clear"></div>
+        <div class="alignLeft">
             <div class="clear">
                 <div class="formLabel-labelCell">Type:</div>
                 <div class="type formValue-valueCell"></div>
             </div>
-        </div>
-        <div class="clear"></div>
-        <div class="alignLeft">
             <div class="clear">
                 <div class="formLabel-labelCell">State:</div>
                 <div class="state formValue-valueCell"></div>
@@ -107,13 +107,13 @@
     </div>
     <br/>
     <div class="virtualHostChildren">
-        <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Exchanges'">
+        <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Exchanges'" class="virtualHostExchanges">
             <div class="exchanges"></div>
             <button data-dojo-type="dijit.form.Button" class="addExchangeButton">Add Exchange</button>
             <button data-dojo-type="dijit.form.Button" class="deleteExchangeButton">Delete Exchange</button>
         </div>
         <br/>
-        <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Queues'">
+        <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Queues'" class="virtualHostQueues">
             <div class="queues"></div>
             <button data-dojo-type="dijit.form.Button" class="addQueueButton">Add Queue</button>
             <button data-dojo-type="dijit.form.Button" class="deleteQueueButton">Delete Queue</button>
@@ -123,7 +123,7 @@
             <div class="connections"></div>
         </div>
         <br/>
-        <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Virtual Host Loggers'">
+        <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Virtual Host Loggers'"  class="virtualHostLoggers">
             <div class="loggers"></div>
             <button data-dojo-type="dijit.form.Button" class="addVirtualHostLogger">Add Virtual Host Logger</button>
             <button data-dojo-type="dijit.form.Button" class="deleteVirtualHostLogger">Delete Virtual Host Logger</button>


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org