QPID-5413: Add virtual host node UI to view the details about existing virtual host nodes

git-svn-id: https://svn.apache.org/repos/asf/qpid/trunk@1592951 13f79535-47bb-0310-9956-ffa450edef68

18 files changed, 533 insertions, 31 deletions

diff --git a/qpid/java/broker-plugins/derby-store/src/main/java/resources/js/qpid/management/virtualhostnode/derby/show.js b/qpid/java/broker-plugins/derby-store/src/main/java/resources/js/qpid/management/virtualhostnode/derby/show.js
new file mode 100644
index 0000000000..d72b41d0c4
--- /dev/null
+++ b/qpid/java/broker-plugins/derby-store/src/main/java/resources/js/qpid/management/virtualhostnode/derby/show.js
@@ -0,0 +1,50 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+define(["dojo/_base/xhr",
+        "dojo/_base/lang",
+        "dojo/_base/connect",
+        "dojo/parser",
+        "dojo/string",
+        "dojox/html/entities",
+        "dojo/query",
+        "dojo/json",
+        "dojo/domReady!"],
+  function (xhr, lang, connect, parser, json, entities, query, json)
+  {
+    function DerbyNode(containerNode)
+    {
+      var that = this;
+      xhr.get({url: "virtualhostnode/derby/show.html",
+        sync: true,
+        load:  function(template) {
+          containerNode.innerHTML = template;
+          parser.parse(containerNode);
+        }});
+      this.storePath = query(".storePath", containerNode)[0];
+    }
+
+    DerbyNode.prototype.update=function(data)
+    {
+      this.storePath.innerHTML = entities.encode(String(data.storePath));
+    };
+
+    return DerbyNode;
+});
diff --git a/qpid/java/broker-plugins/derby-store/src/main/java/resources/virtualhostnode/derby/show.html b/qpid/java/broker-plugins/derby-store/src/main/java/resources/virtualhostnode/derby/show.html
new file mode 100644
index 0000000000..9cf5dadae8
--- /dev/null
+++ b/qpid/java/broker-plugins/derby-store/src/main/java/resources/virtualhostnode/derby/show.html
@@ -0,0 +1,21 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div style="clear:both">
+  <div class="formLabel-labelCell" style="float:left; width: 200px;">Store Path:</div>
+  <div class="storePath" style="float:left;"></div>
+</div>
\ No newline at end of file
diff --git a/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/store/jdbc/JDBCMessageStore.java b/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/store/jdbc/JDBCMessageStore.java
index 037b9ee037..d70f2a3d78 100644
--- a/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/store/jdbc/JDBCMessageStore.java
+++ b/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/store/jdbc/JDBCMessageStore.java
@@ -50,7 +50,7 @@ public class JDBCMessageStore extends AbstractJDBCMessageStore implements Messag
     private static final Logger _logger = Logger.getLogger(JDBCMessageStore.class);
 
     public static final String TYPE = "JDBC";
-    public static final String CONNECTION_URL = "connectionURL";
+    public static final String CONNECTION_URL = "connectionUrl";
     public static final String CONNECTION_POOL_TYPE = "connectionPoolType";
     public static final String JDBC_BIG_INT_TYPE = "bigIntType";
     public static final String JDBC_BYTES_FOR_BLOB = "bytesForBlob";
diff --git a/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNode.java b/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNode.java
index f66cb74529..302ec9c59f 100644
--- a/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNode.java
+++ b/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNode.java
@@ -21,10 +21,10 @@
 package org.apache.qpid.server.virtualhostnode.jdbc;
 
 import org.apache.qpid.server.model.ManagedAttribute;
+import org.apache.qpid.server.model.VirtualHostNode;
 import org.apache.qpid.server.store.jdbc.DefaultConnectionProviderFactory;
 
-
-public interface JDBCVirtualHostNode
+public interface JDBCVirtualHostNode<X extends JDBCVirtualHostNode<X>> extends VirtualHostNode<X>
 {
     //TODO: Split this attribute into connectionUrl, username and password. Make the password attribute secure.
     @ManagedAttribute(mandatory=true)
diff --git a/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNodeImpl.java b/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNodeImpl.java
index 8d7c79b656..cb3077bc65 100644
--- a/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNodeImpl.java
+++ b/qpid/java/broker-plugins/jdbc-store/src/main/java/org/apache/qpid/server/virtualhostnode/jdbc/JDBCVirtualHostNodeImpl.java
@@ -31,7 +31,7 @@ import org.apache.qpid.server.store.jdbc.JDBCMessageStoreFactory;
 import org.apache.qpid.server.virtualhostnode.AbstractStandardVirtualHostNode;
 
 @ManagedObject( category = false, type = "JDBC" )
-public class JDBCVirtualHostNodeImpl extends AbstractStandardVirtualHostNode<JDBCVirtualHostNodeImpl> implements JDBCVirtualHostNode
+public class JDBCVirtualHostNodeImpl extends AbstractStandardVirtualHostNode<JDBCVirtualHostNodeImpl> implements JDBCVirtualHostNode<JDBCVirtualHostNodeImpl>
 {
     @ManagedAttributeField
     private String _connectionUrl;
diff --git a/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/js/qpid/management/virtualhost/store/jdbc/add.js b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/js/qpid/management/virtualhost/store/jdbc/add.js
index d1f4787202..21c0c17de9 100644
--- a/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/js/qpid/management/virtualhost/store/jdbc/add.js
+++ b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/js/qpid/management/virtualhost/store/jdbc/add.js
@@ -81,7 +81,7 @@ define(["dojo/_base/xhr",
                                          var poolTypesDiv = dom.byId("addVirtualHost.specific.selectPoolType");
                                          var input = construct.create("input", {id: "addPoolType", required: false}, poolTypesDiv);
                                          that.poolTypeChooser = new FilteringSelect({ id: "addVirtualHost.specific.store.poolType",
-                                                                                   name: "connectionPool",
+                                                                                   name: "connectionPoolType",
                                                                                    store: poolTypesStore,
                                                                                    searchAttr: "name", required: false,
                                                                                    onChange: selectPoolType }, input);
diff --git a/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/js/qpid/management/virtualhostnode/jdbc/show.js b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/js/qpid/management/virtualhostnode/jdbc/show.js
new file mode 100644
index 0000000000..20637da6c2
--- /dev/null
+++ b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/js/qpid/management/virtualhostnode/jdbc/show.js
@@ -0,0 +1,61 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+define(["dojo/_base/xhr",
+        "dojo/_base/lang",
+        "dojo/_base/connect",
+        "dojo/parser",
+        "dojo/string",
+        "dojox/html/entities",
+        "dojo/query",
+        "dojo/json",
+        "dojo/domReady!"],
+  function (xhr, lang, connect, parser, json, entities, query, json)
+  {
+    var fieldNames = ["connectionUrl", "bigIntType", "varBinaryType", "blobType", "bytesForBlob", "connectionPoolType"];
+
+    function JdbcNode(containerNode)
+    {
+      var that = this;
+      xhr.get({url: "virtualhostnode/jdbc/show.html",
+        sync: true,
+        load:  function(template) {
+          containerNode.innerHTML = template;
+          parser.parse(containerNode);
+        }});
+      for(var i=0; i<fieldNames.length;i++)
+      {
+        var fieldName = fieldNames[i];
+        this[fieldName]= query("." + fieldName, containerNode)[0];
+      }
+    }
+
+    JdbcNode.prototype.update=function(data)
+    {
+      for(var i=0; i<fieldNames.length;i++)
+      {
+        var fieldName = fieldNames[i];
+        var value = data[fieldName];
+        this[fieldName].innerHTML= value?entities.encode(String(value)):"";
+      }
+    };
+
+    return JdbcNode;
+});
diff --git a/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/virtualhost/store/jdbc/add.html b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/virtualhost/store/jdbc/add.html
index c3d6c287a2..0644887a43 100644
--- a/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/virtualhost/store/jdbc/add.html
+++ b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/virtualhost/store/jdbc/add.html
@@ -19,7 +19,7 @@
       <td class="tableContainer-labelCell" style="width: 300px;"><strong>JDBC Url*:  </strong></td>
       <td class="tableContainer-valueCell">
           <input dojoType="dijit/form/ValidationTextBox" required="true" id="formAddVirtualHost.specific.store.connectionURL"
-                 name="connectionURL" placeholder="jdbc:provider:info" />
+                 name="connectionUrl" placeholder="jdbc:provider:info" />
   </tr>
   <tr>
       <td class="tableContainer-labelCell" style="width: 300px;"><strong>Connection Pool:  </strong></td>
diff --git a/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/virtualhostnode/jdbc/show.html b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/virtualhostnode/jdbc/show.html
new file mode 100644
index 0000000000..63fec28012
--- /dev/null
+++ b/qpid/java/broker-plugins/jdbc-store/src/main/java/resources/virtualhostnode/jdbc/show.html
@@ -0,0 +1,44 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<div>
+  <div style="clear:both">
+    <div class="formLabel-labelCell" style="float:left; width: 200px;">Connection URL:</div>
+    <div class="connectionUrl" style="float:left;"></div>
+  </div>
+  <div style="clear:both">
+    <div class="formLabel-labelCell" style="float:left; width: 200px;">Big Integer Type:</div>
+    <div class="bigIntType" style="float:left;"></div>
+  </div>
+  <div style="clear:both">
+    <div class="formLabel-labelCell" style="float:left; width: 200px;">Var Binary Type:</div>
+    <div class="varBinaryType" style="float:left;"></div>
+  </div>
+  <div style="clear:both">
+    <div class="formLabel-labelCell" style="float:left; width: 200px;">Blob Type:</div>
+    <div class="blobType" style="float:left;"></div>
+  </div>
+  <div style="clear:both">
+    <div class="formLabel-labelCell" style="float:left; width: 200px;">Bytes For Blob:</div>
+    <div class="bytesForBlob" style="float:left;"></div>
+  </div>
+  <div style="clear:both">
+    <div class="formLabel-labelCell" style="float:left; width: 200px;">Connection Pool Type:</div>
+    <div class="connectionPoolType" style="float:left;"></div>
+  </div>
+  <div style="clear:both"></div>
+</div>
+
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/common/UpdatableStore.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/common/UpdatableStore.js
index ea3ba78372..97b1e32798 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/common/UpdatableStore.js
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/common/UpdatableStore.js
@@ -97,8 +97,11 @@ define(["dojo/store/Memory",
                         }
                     }
                     if(modified) {
-                        // ... check attributes for updates
-                        store.notify(theItem, data[i].id);
+                        store.put(data[i], {overwrite: true});
+                        if (store instanceof Observable)
+                        {
+                          store.notify(theItem, data[i].id);
+                        }
                         changed = true;
                     }
                 } else {
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js
index a0414b07d2..9696280b2c 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/Broker.js
@@ -44,6 +44,9 @@ define(["dojo/_base/xhr",
         "dijit/form/ValidationTextBox",
         "dijit/form/CheckBox",
         "dojo/store/Memory",
+        "dijit/form/DropDownButton",
+        "dijit/Menu",
+        "dijit/MenuItem",
         "dojo/domReady!"],
        function (xhr, parser, query, connect, properties, updater, util, UpdatableStore, EnhancedGrid, registry, entities, addAuthenticationProvider, addVirtualHost, addPort, addKeystore, addGroupProvider, addAccessControlProvider) {
 
@@ -197,17 +200,6 @@ define(["dojo/_base/xhr",
                             var addHostButton = query(".addVirtualHost", contentPane.containerNode)[0];
                             connect.connect(registry.byNode(addHostButton), "onClick", function(evt){ addVirtualHost.show(); });
 
-                            var deleteHostButton = query(".deleteVirtualHost", contentPane.containerNode)[0];
-                            connect.connect(registry.byNode(deleteHostButton), "onClick",
-                                    function(evt){
-                                        util.deleteGridSelections(
-                                                that.brokerUpdater,
-                                                that.brokerUpdater.vhostsGrid.grid,
-                                                "api/latest/virtualhostnodes",
-                                                "Deletion of virtual host will delete the message store data.\n\n Are you sure you want to delete virtual host");
-                                }
-                            );
-
                             var addPortButton = query(".addPort", contentPane.containerNode)[0];
                             connect.connect(registry.byNode(addPortButton), "onClick", function(evt){
                               addPort.show(null, that.brokerUpdater.brokerData.authenticationproviders,
@@ -335,6 +327,7 @@ define(["dojo/_base/xhr",
 
                              var gridProperties = {
                                      height: 400,
+                                     selectionMode: "single",
                                      plugins: {
                                               pagination: {
                                                   pageSizes: ["10", "25", "50", "100"],
@@ -350,27 +343,30 @@ define(["dojo/_base/xhr",
 
                              that.vhostsGrid =
                                 new UpdatableStore(that.brokerData.virtualhostnodes, query(".broker-virtualhosts")[0],
-                                                [ { name: "Virtual Host",    field: "_item",      width: "120px",
+                                                [
+                                                  { name: "Node Name", field: "name", width: "20%"},
+                                                  { name: "Node State", field: "state", width: "15%"},
+                                                  { name: "Virtual Host Path", field: "_item", width: "20%",
                                                     formatter: function(item){
                                                       return item && item.virtualhosts? item.virtualhosts[0].name: (item?item.name: "N/A");
                                                     }
                                                   },
-                                                  { name: "State",    field: "_item",      width: "70px",
+                                                  { name: "Virtual Host State", field: "_item", width: "15%",
                                                     formatter: function(item){
                                                       return item && item.virtualhosts? item.virtualhosts[0].state: (item?item.state: "N/A");
                                                     }
                                                   },
-                                                  { name: "Connections",    field: "_item",      width: "80px",
+                                                  { name: "Connections", field: "_item", width: "10%",
                                                     formatter: function(item){
                                                         return item && item.virtualhosts? item.virtualhosts[0].statistics.connectionCount: 0;
                                                     }
                                                   },
-                                                  { name: "Queues",    field: "_item",      width: "80px",
+                                                  { name: "Queues",    field: "_item", width: "10%",
                                                     formatter: function(item){
                                                         return item && item.virtualhosts? item.virtualhosts[0].statistics.queueCount: 0;
                                                     }
                                                   },
-                                                  { name: "Exchanges",    field: "_item",      width: "100%",
+                                                  { name: "Exchanges", field: "_item", width: "10%",
                                                     formatter: function(item){
                                                         return item && item.virtualhosts? item.virtualhosts[0].statistics.exchangeCount: 0;
                                                     }
@@ -380,13 +376,57 @@ define(["dojo/_base/xhr",
                                                         function(evt){
                                                             var idx = evt.rowIndex,
                                                                 theItem = this.getItem(idx);
-                                                            var nodeName = obj.dataStore.getValue(theItem,"name");
-                                                            var host = theItem && theItem.virtualhosts? theItem.virtualhosts[0]: null;
-                                                            var nodeObject = { type: "virtualhostnode", name: nodeName, parent: brokerObj};
-                                                            that.controller.show("virtualhost", host?host.name:nodeName, nodeObject, host?host.id:null);
+                                                            that.showVirtualHost(theItem, brokerObj);
                                                         });
                                                 }, gridProperties, EnhancedGrid);
 
+                             var virtualHostNodeMenuButton = registry.byNode(query(".virtualHostNodeMenuButton", node)[0]);
+                             var virtualHostMenuButton = registry.byNode(query(".virtualHostMenuButton", node)[0]);
+
+                             var toggleVirtualHostNodeNodeMenus = function(rowIndex){
+                               var data = that.vhostsGrid.grid.selection.getSelected();
+                               virtualHostNodeMenuButton.set("disabled",data.length!=1);
+                               virtualHostMenuButton.set("disabled",data.length!=1 );
+                             };
+
+                             connect.connect(that.vhostsGrid.grid.selection, 'onSelected',  toggleVirtualHostNodeNodeMenus);
+                             connect.connect(that.vhostsGrid.grid.selection, 'onDeselected',  toggleVirtualHostNodeNodeMenus);
+
+                             var hostMenuItems = virtualHostMenuButton.dropDown.getChildren();
+                             var viewVirtualHostItem = hostMenuItems[0];
+                             viewVirtualHostItem.on("click", function(){
+                               var data = that.vhostsGrid.grid.selection.getSelected();
+                               if (data.length == 1)
+                               {
+                                 that.showVirtualHost(data[0], brokerObj);
+                               }
+                             });
+
+                             var nodeMenuItems = virtualHostNodeMenuButton.dropDown.getChildren();
+                             var viewNodeButton = nodeMenuItems[0];
+                             viewNodeButton.on("click",
+                                     function(evt){
+                                       var data = that.vhostsGrid.grid.selection.getSelected();
+                                       if (data.length == 1)
+                                       {
+                                         var item = data[0];
+                                         that.controller.show("virtualhostnode", item.name, brokerObj, item.id);
+                                       }
+                                 }
+                             );
+                             var deleteNodeButton = nodeMenuItems[1];
+                             deleteNodeButton.on("click",
+                                     function(evt){
+                                         util.deleteGridSelections(
+                                                 that,
+                                                 that.vhostsGrid.grid,
+                                                 "api/latest/virtualhostnode",
+                                                 "Deletion of virtual host node will delete both configuration and message data.\n\n Are you sure you want to delete virtual host node");
+                                 }
+                             );
+
+                             gridProperties.selectionMode="extended";
+
                              that.portsGrid =
                                 new UpdatableStore(that.brokerData.ports, query(".broker-ports")[0],
                                                 [   { name: "Name", field: "name", width: "150px"},
@@ -502,6 +542,14 @@ define(["dojo/_base/xhr",
                          });
            }
 
+           BrokerUpdater.prototype.showVirtualHost=function(item, brokerObj)
+           {
+             var nodeName = item.name;
+             var host = item.virtualhosts? item.virtualhosts[0]: null;
+             var nodeObject = { type: "virtualhostnode", name: nodeName, parent: brokerObj};
+             this.controller.show("virtualhost", host?host.name:nodeName, nodeObject, host?host.id:null);
+           }
+
            BrokerUpdater.prototype.updateHeader = function()
            {
                this.showReadOnlyAttributes();
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHostNode.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHostNode.js
new file mode 100644
index 0000000000..e2cd763fba
--- /dev/null
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/VirtualHostNode.js
@@ -0,0 +1,132 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+define(["dojo/_base/xhr",
+        "dojo/parser",
+        "dojo/query",
+        "dojo/_base/connect",
+        "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",
+        "dojox/grid/EnhancedGrid",
+        "dojo/domReady!"],
+       function (xhr, parser, query, connect, registry, entities, properties, updater, util, formatter, UpdatableStore, addQueue, addExchange, EnhancedGrid) {
+
+           function VirtualHostNode(name, parent, controller)
+           {
+               this.name = name;
+               this.controller = controller;
+               this.modelObj = { type: "virtualhostnode", name: name, parent: parent};
+           }
+
+           VirtualHostNode.prototype.getTitle = function()
+           {
+               return "VirtualHostNode: " + this.name;
+           };
+
+           VirtualHostNode.prototype.open = function(contentPane)
+           {
+               var that = this;
+               this.contentPane = contentPane;
+               xhr.get({url: "showVirtualHostNode.html",
+                        sync: true,
+                        load:  function(data) {
+                            contentPane.containerNode.innerHTML = data;
+                            parser.parse(contentPane.containerNode);
+
+                            that.vhostNodeUpdater = new Updater(contentPane.containerNode, that.modelObj, that.controller);
+                            that.vhostNodeUpdater.update();
+
+                            updater.add( that.vhostNodeUpdater );
+                       }});
+
+           };
+
+           VirtualHostNode.prototype.close = function()
+           {
+               updater.remove( this.vhostNodeUpdater );
+           };
+
+           function Updater(node, vhost, controller)
+           {
+               var that = this;
+
+               function findNode(name)
+               {
+                   return query("." + name, node)[0];
+               }
+
+               function storeNodes(names)
+               {
+                   for(var i = 0; i < names.length; i++)
+                   {
+                       that[names[i]] = findNode(names[i]);
+                   }
+               }
+
+               storeNodes(["name", "state", "type", "messageStoreProviderYes","messageStoreProviderNo"]);
+               this.detailsDiv = findNode("virtualhostnodedetails");
+
+               this.query = "api/latest/virtualhostnode/" + encodeURIComponent(vhost.name);
+          }
+
+           Updater.prototype.update = function()
+           {
+               var that = this;
+               xhr.get({url: this.query, sync: properties.useSyncGet, handleAs: "json"}).then(
+                   function(data)
+                   {
+                     that.updateUI(data[0]);
+                   }
+               );
+           };
+
+           Updater.prototype.updateUI = function(data)
+           {
+             this.name.innerHTML = entities.encode(String(data[ "name" ]));
+             this.state.innerHTML = entities.encode(String(data[ "state" ]));
+             this.type.innerHTML = entities.encode(String(data[ "type" ]));
+             this.messageStoreProviderYes.style.display = data.messageStoreProvider? "block" : "none";
+             this.messageStoreProviderNo.style.display = data.messageStoreProvider? "none" : "block";
+             if (!this.details)
+             {
+               var that = this;
+               require(["qpid/management/virtualhostnode/" + data.type.toLowerCase() + "/show"],
+                 function(VirtualHostNodeDetails)
+                 {
+                   that.details = new VirtualHostNodeDetails(that.detailsDiv);
+                   that.details.update(data);
+                 }
+               );
+             }
+             else
+             {
+               this.details.update(data);
+             }
+           }
+
+           return VirtualHostNode;
+       });
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/controller.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/controller.js
index edf534176d..4b8e9db4b0 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/controller.js
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/controller.js
@@ -39,10 +39,11 @@ define(["dojo/dom",
         "qpid/management/Plugin",
         "qpid/management/logs/LogViewer",
         "qpid/management/PreferencesProvider",
+        "qpid/management/VirtualHostNode",
         "dojo/ready",
         "dojo/domReady!"],
        function (dom, registry, ContentPane, CheckBox, UserPreferences, entities, Broker, VirtualHost, Exchange, Queue, Connection, AuthProvider,
-                 GroupProvider, Group, KeyStore, TrustStore, AccessControlProvider, Port, Plugin, LogViewer, PreferencesProvider, ready) {
+                 GroupProvider, Group, KeyStore, TrustStore, AccessControlProvider, Port, Plugin, LogViewer, PreferencesProvider, VirtualHostNode, ready) {
            var controller = {};
 
            var constructors = { broker: Broker, virtualhost: VirtualHost, exchange: Exchange,
@@ -50,7 +51,8 @@ define(["dojo/dom",
                                 authenticationprovider: AuthProvider, groupprovider: GroupProvider,
                                 group: Group, keystore: KeyStore, truststore: TrustStore,
                                 accesscontrolprovider: AccessControlProvider, port: Port,
-                                plugin: Plugin, logViewer: LogViewer, preferencesprovider: PreferencesProvider};
+                                plugin: Plugin, logViewer: LogViewer, preferencesprovider: PreferencesProvider,
+                                virtualhostnode: VirtualHostNode};
 
            var tabDiv = dom.byId("managedViews");
 
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/treeView.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/treeView.js
index 0a05cca75d..3b65ffaacf 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/treeView.js
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/treeView.js
@@ -296,6 +296,8 @@ define(["dojo/_base/xhr",
                  controller.show("plugin", details.plugin, {type:"broker", name:""}, theItem.id);
                } else if (details.type == "preferencesprovider") {
                  controller.show("preferencesprovider", details.preferencesprovider, details.parent, theItem.id);
+               } else if (details.type == "virtualhostnode") {
+                 controller.show("virtualhostnode", details.virtualhostnode, details.parent, theItem.id);
                }
            };
 
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/virtualhostnode/json/show.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/virtualhostnode/json/show.js
new file mode 100644
index 0000000000..e912cf2fb0
--- /dev/null
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/virtualhostnode/json/show.js
@@ -0,0 +1,50 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+define(["dojo/_base/xhr",
+        "dojo/_base/lang",
+        "dojo/_base/connect",
+        "dojo/parser",
+        "dojo/string",
+        "dojox/html/entities",
+        "dojo/query",
+        "dojo/json",
+        "dojo/domReady!"],
+  function (xhr, lang, connect, parser, json, entities, query, json)
+  {
+    function JsonNode(containerNode)
+    {
+      var that = this;
+      xhr.get({url: "virtualhostnode/json/show.html",
+        sync: true,
+        load:  function(template) {
+          containerNode.innerHTML = template;
+          parser.parse(containerNode);
+        }});
+      this.storePath = query(".storePath", containerNode)[0];
+    }
+
+    JsonNode.prototype.update=function(data)
+    {
+      this.storePath.innerHTML = entities.encode(String(data.storePath));
+    };
+
+    return JsonNode;
+});
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/showBroker.html b/qpid/java/broker-plugins/management-http/src/main/java/resources/showBroker.html
index 0fab44fe84..d036fd9e22 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/showBroker.html
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/showBroker.html
@@ -74,7 +74,27 @@
     <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Virtual Hosts'">
         <div class="broker-virtualhosts"></div>
         <button data-dojo-type="dijit.form.Button" class="addVirtualHost">Add Virtual Host</button>
-        <button data-dojo-type="dijit.form.Button" class="deleteVirtualHost">Delete Virtual Host</button>
+        <div data-dojo-type="dijit.form.DropDownButton" class="virtualHostNodeMenuButton" data-dojo-props="iconClass: 'dijitIconConnector',disabled:true">
+            <span>Virtual Host Node</span>
+            <div data-dojo-type="dijit.Menu">
+                <div data-dojo-type="dijit.MenuItem">View</div>
+                <div data-dojo-type="dijit.MenuItem">Delete</div>
+                <div data-dojo-type="dijit.MenuItem"
+                    data-dojo-props="disabled: true,onClick: function(){alert('TODO');}">Start</div>
+                <div data-dojo-type="dijit.MenuItem"
+                    data-dojo-props="disabled:true, onClick: function(){alert('TODO');}">Stop</div>
+            </div>
+          </div>
+        <div data-dojo-type="dijit.form.DropDownButton" class="virtualHostMenuButton" data-dojo-props="iconClass: 'dijitIconPackage',disabled:true">
+            <span>Virtual Host</span>
+            <div data-dojo-type="dijit.Menu" class="virtualHostMenu">
+                <div data-dojo-type="dijit.MenuItem" class="viewVirtualHost" >View</div>
+                <div data-dojo-type="dijit.MenuItem"
+                    data-dojo-props="disabled: true,onClick: function(){alert('TODO');}">Start</div>
+                <div data-dojo-type="dijit.MenuItem"
+                    data-dojo-props="disabled:true, onClick: function(){alert('TODO');}">Quiesce</div>
+            </div>
+          </div>
     </div>
     <br/>
     <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Ports'">
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/showVirtualHostNode.html b/qpid/java/broker-plugins/management-http/src/main/java/resources/showVirtualHostNode.html
new file mode 100644
index 0000000000..2559dd98f9
--- /dev/null
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/showVirtualHostNode.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+ -
+ - Licensed to the Apache Software Foundation (ASF) under one
+ - or more contributor license agreements.  See the NOTICE file
+ - distributed with this work for additional information
+ - regarding copyright ownership.  The ASF licenses this file
+ - to you under the Apache License, Version 2.0 (the
+ - "License"); you may not use this file except in compliance
+ - with the License.  You may obtain a copy of the License at
+ -
+ -   http://www.apache.org/licenses/LICENSE-2.0
+ -
+ - Unless required by applicable law or agreed to in writing,
+ - software distributed under the License is distributed on an
+ - "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ - KIND, either express or implied.  See the License for the
+ - specific language governing permissions and limitations
+ - under the License.
+ -
+ -->
+
+<div class="virtualhostnode">
+    <div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Virtual Host Node Attributes',  open: true">
+        <div style="clear:both">
+            <div class="formLabel-labelCell" style="float:left; width: 200px;">Name:</div>
+            <div class="name" style="float:left;"></div>
+        </div>
+        <div style="clear:both">
+            <div class="formLabel-labelCell" style="float:left; width: 200px;">State:</div>
+            <div class="state" style="float:left;"></div>
+        </div>
+        <div style="clear:both">
+            <div class="formLabel-labelCell" style="float:left; width: 200px;">Type:</div>
+            <div class="type" style="float:left;"></div>
+        </div>
+        <div style="clear:both">
+            <div class="formLabel-labelCell" style="float:left; width: 200px;">Message Store Provider:</div>
+            <div class="messageStoreProviderYes" style="float:left;display:none">Yes</div>
+            <div class="messageStoreProviderNo" style="float:left;display:none">No</div>
+        </div>
+        <div class="virtualhostnodedetails" style="clear:both">
+        </div>
+        <div style="clear:both"></div>
+      </div>
+    <br/>
+</div>
+
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/virtualhostnode/json/show.html b/qpid/java/broker-plugins/management-http/src/main/java/resources/virtualhostnode/json/show.html
new file mode 100644
index 0000000000..9cf5dadae8
--- /dev/null
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/virtualhostnode/json/show.html
@@ -0,0 +1,21 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div style="clear:both">
+  <div class="formLabel-labelCell" style="float:left; width: 200px;">Store Path:</div>
+  <div class="storePath" style="float:left;"></div>
+</div>
\ No newline at end of file