QPID-6130: [Java Broker] Introduce edit queue dialog - further add/edit harmonisation

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

4 files changed, 162 insertions, 107 deletions

diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/addQueue.html b/qpid/java/broker-plugins/management-http/src/main/java/resources/addQueue.html
index d74dd6ebee..042d6d7ad7 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/addQueue.html
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/addQueue.html
@@ -39,19 +39,75 @@
             <div class="clear">
                 <div class="formLabel-labelCell">Queue Type:</div>
                 <div class="formLabel-controlCell">
-                    <input type="radio" id="formAddQueueTypeStandard" name="type" value="standard" checked="checked" dojoType="dijit.form.RadioButton" />
-                    <label for="formAddQueueTypeStandard">Standard</label>
-                    &nbsp;
-                    <input type="radio" id="formAddQueueTypePriority" name="type" value="priority" dojoType="dijit.form.RadioButton" />
-                    <label for="formAddQueueTypePriority">Priority</label>
-                    &nbsp;
-                    <input type="radio" id="formAddQueueTypeLVQ" name="type" value="lvq" dojoType="dijit.form.RadioButton" />
-                    <label for="formAddQueueTypeLVQ">LVQ</label>
-                    &nbsp;
-                    <input type="radio" id="formAddQueueTypeSorted" name="type" value="sorted" dojoType="dijit.form.RadioButton" />
-                    <label for="formAddQueueTypeSorted">Sorted</label>
+                    <select id="formAddQueue.type"
+                            dojoType="dijit.form.FilteringSelect"
+                            data-dojo-props="
+                              name: 'type',
+                              value: 'standard',
+                              searchAttr: 'name',
+                              required: true,
+                              promptMessage: 'Type of Queue',
+                              title: 'Enter the queue type'">
+                        <option value="standard">Standard</option>
+                        <option value="priority">Priority</option>
+                        <option value="lvq">LVQ</option>
+                        <option value="sorted">Sorted</option>
+                    </select>
+                </div>
+            </div>
+            <div class="clear"></div>
+
+            <div id="formAddQueueType:priority" class="hidden typeSpecificDiv">
+                <div class="clear">
+                    <div class="formLabel-labelCell">Priorities:</div>
+                    <div class="formLabel-controlCell">
+                        <input type="text" id="formAddQueue.priorities"
+                               data-dojo-type="dijit/form/ValidationTextBox"
+                               data-dojo-props="
+                                  name: 'priorities',
+                                  placeHolder: 'number of priorities',
+                                  promptMessage: 'Number of priorities supported by the queue',
+                                  title: 'Enter the number of priorities supported by the queue',
+                                  trim: true"/>
+                    </div>
+                </div>
+                <div class="clear"></div>
+            </div>
+
+            <div id="formAddQueueType:lvq" class="hidden typeSpecificDiv">
+                <div class="clear">
+                    <div class="formLabel-labelCell">LVQ Message Property:</div>
+                    <div class="formLabel-controlCell">
+                        <input type="text" id="formAddQueue.lvqKey"
+                               data-dojo-type="dijit/form/ValidationTextBox"
+                               data-dojo-props="
+                                  name: 'lvqKey',
+                                  placeHolder: 'lvq key',
+                                  promptMessage: 'Name of the message property used to perform the conflation',
+                                  title: 'Enter the name of the message property used to perform the conflation',
+                                  trim: true"/>
+                    </div>
+                </div>
+                <div class="clear"></div>
+            </div>
+
+            <div id="formAddQueueType:sorted" class="hidden typeSpecificDiv">
+                <div class="clear">
+                    <div class="formLabel-labelCell">Sort Message Property*:</div>
+                    <div class="formLabel-controlCell">
+                        <input type="text" id="formAddQueue.sortKey"
+                               data-dojo-type="dijit/form/ValidationTextBox"
+                               data-dojo-props="
+                                  name: 'sortKey',
+                                  placeHolder: 'sort key',
+                                  promptMessage: 'Name of the message property used for sorting the messages on the queue',
+                                  title: 'Enter the name of the message property used for sorting the messages on the queue',
+                                  trim: true"/>
+                    </div>
                 </div>
+                <div class="clear"></div>
             </div>
+
             <div class="clear">
                 <div class="formLabel-labelCell">Durable?</div>
                 <div class="formLabel-controlCell">
@@ -108,62 +164,6 @@
                 </div>
             </div>
 
-            <div class="clear"></div>
-
-            <div id="formAddQueueTypePriority:fields" class="hidden"
-                 data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Priority Queue Settings'">
-                <div class="clear">
-                    <div class="formLabel-labelCell">Priorities:</div>
-                    <div class="formLabel-controlCell">
-                        <input type="text" id="formAddQueue.priorities"
-                               data-dojo-type="dijit/form/ValidationTextBox"
-                               data-dojo-props="
-                                  name: 'priorities',
-                                  placeHolder: 'number of priorities',
-                                  promptMessage: 'Number of priorities supported by the queue',
-                                  title: 'Enter the number of priorities supported by the queue',
-                                  trim: true"/>
-                    </div>
-                </div>
-                <div class="clear"></div>
-            </div>
-
-            <div id="formAddQueueTypeLVQ:fields" class="hidden"
-                 data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Last Value Queue Settings'">
-                <div class="clear">
-                    <div class="formLabel-labelCell">LVQ Message Property:</div>
-                    <div class="formLabel-controlCell">
-                        <input type="text" id="formAddQueue.lvqkey"
-                               data-dojo-type="dijit/form/ValidationTextBox"
-                               data-dojo-props="
-                                  name: 'lvqKey',
-                                  placeHolder: 'lvq key',
-                                  promptMessage: 'Name of the message property used to perform the conflation',
-                                  title: 'Enter the name of the message property used to perform the conflation',
-                                  trim: true"/>
-                    </div>
-                </div>
-                <div class="clear"></div>
-            </div>
-
-            <div id="formAddQueueTypeSorted:fields" class="hidden"
-                 data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Sorted Queue Settings'">
-                <div class="clear">
-                    <div class="formLabel-labelCell">Sort Message Property*:</div>
-                    <div class="formLabel-controlCell">
-                        <input type="text" id="formAddQueue.sortkey"
-                               data-dojo-type="dijit/form/ValidationTextBox"
-                               data-dojo-props="
-                                  name: 'sortKey',
-                                  placeHolder: 'sort key',
-                                  promptMessage: 'Name of the message property used for sorting the messages on the queue',
-                                  title: 'Enter the name of the message property used for sorting the messages on the queue',
-                                  trim: true"/>
-                    </div>
-                </div>
-                <div class="clear"></div>
-            </div>
-
             <div class="clear formBox">
                 <fieldset>
                 <legend>Flow Control Settings</legend>
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/editQueue.html b/qpid/java/broker-plugins/management-http/src/main/java/resources/editQueue.html
index 5587bbbdab..aff2b5dfa5 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/editQueue.html
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/editQueue.html
@@ -49,6 +49,59 @@
                                       disabled: 'true'"/>
                     </div>
                 </div>
+                <div class="clear"></div>
+
+                <div id="formEditQueueType:priority" class="hidden typeSpecificDiv">
+                    <div class="clear">
+                        <div class="formLabel-labelCell">Priorities:</div>
+                        <div class="formLabel-controlCell">
+                            <input type="text" id="formEditQueue.priorities"
+                                   data-dojo-type="dijit/form/ValidationTextBox"
+                                   data-dojo-props="
+                                  name: 'priorities',
+                                  disabled: 'true',
+                                  promptMessage: 'Number of priorities supported by the queue',
+                                  title: 'Enter the number of priorities supported by the queue',
+                                  trim: true"/>
+                        </div>
+                    </div>
+                    <div class="clear"></div>
+                </div>
+
+                <div id="formEditQueueType:lvq" class="hidden typeSpecificDiv">
+                    <div class="clear">
+                        <div class="formLabel-labelCell">LVQ Message Property:</div>
+                        <div class="formLabel-controlCell">
+                            <input type="text" id="formEditQueue.lvqKey"
+                                   data-dojo-type="dijit/form/ValidationTextBox"
+                                   data-dojo-props="
+                                  name: 'lvqKey',
+                                  disabled: 'true',
+                                  promptMessage: 'Name of the message property used to perform the conflation',
+                                  title: 'Enter the name of the message property used to perform the conflation',
+                                  trim: true"/>
+                        </div>
+                    </div>
+                    <div class="clear"></div>
+                </div>
+
+                <div id="formEditQueueType:sorted" class="hidden typeSpecificDiv">
+                    <div class="clear">
+                        <div class="formLabel-labelCell">Sort Message Property*:</div>
+                        <div class="formLabel-controlCell">
+                            <input type="text" id="formEditQueue.sortKey"
+                                   data-dojo-type="dijit/form/ValidationTextBox"
+                                   data-dojo-props="
+                                  name: 'sortKey',
+                                  disabled: 'true',
+                                  promptMessage: 'Name of the message property used for sorting the messages on the queue',
+                                  title: 'Enter the name of the message property used for sorting the messages on the queue',
+                                  trim: true"/>
+                        </div>
+                    </div>
+                    <div class="clear"></div>
+                </div>
+
                 <div class="clear">
                     <div class="formLabel-labelCell">Durable?</div>
                     <div class="formLabel-controlCell">
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/addQueue.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/addQueue.js
index 2e18f27a40..236efb2efa 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/addQueue.js
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/addQueue.js
@@ -27,6 +27,7 @@ define(["dojo/_base/xhr",
         "dojo/_base/array",
         "dojo/_base/event",
         'dojo/_base/json',
+        "dojo/query",
         'qpid/common/util',
         "qpid/common/ContextVariablesEditor",
         "dijit/form/NumberSpinner", // required by the form
@@ -43,22 +44,14 @@ define(["dojo/_base/xhr",
         /* basic dojox classes */
         "dojox/form/BusyButton", "dojox/form/CheckedMultiSelect",
         "dojo/domReady!"],
-    function (xhr, dom, construct, win, registry, parser, array, event, json, util) {
+    function (xhr, dom, construct, win, registry, parser, array, event, json, query, util) {
 
         var addQueue = {};
 
         var node = construct.create("div", null, win.body(), "last");
 
-        var typeSpecificFields = {
-                        priorities: "priority",
-                        lvqKey: "lvq",
-                        sortKey: "sorted"
-                    };
-
-        var requiredFields = {
-                priority: "priorities",
-                sorted: "sortkey"
-            };
+        var typeSpecificFields = { priorities: "priority", lvqKey: "lvq", sortKey: "sorted" };
+        var requiredFields = { sorted: "sortKey"};
 
         var fieldConverters = {
                 queueFlowControlSizeBytes:        parseInt,
@@ -97,8 +90,8 @@ define(["dojo/_base/xhr",
                                 newQueue["messageGroupSharedGroups"] = true;
                             }
                         }
-                        else if (!typeSpecificFields.hasOwnProperty(propName) ||
-                                        formValues[ "type" ] === typeSpecificFields[ propName ]) {
+                        else if (!typeSpecificFields.hasOwnProperty(propName) || formValues[ "type" ] === typeSpecificFields[ propName ])
+                        {
                             if(formValues[ propName ] !== "") {
                                 if (fieldConverters.hasOwnProperty(propName))
                                 {
@@ -126,36 +119,29 @@ define(["dojo/_base/xhr",
                             addQueue.dialogNode = dom.byId("addQueue");
                             parser.instantiate([addQueue.dialogNode]);
 
-                            // for children which have name type, add a function to make all the associated rows
-                            // visible / invisible as the radio button is checked / unchecked
-
+                            // for children which have name type, add a function to make all the associated atrributes
+                            // visible / invisible as the select is changed
                             theForm = registry.byId("formAddQueue");
-                            array.forEach(theForm.getDescendants(), function(widget)
+                            var typeSelector = registry.byId("formAddQueue.type");
+                            typeSelector.on("change", function(value)
+                            {
+                                query(".typeSpecificDiv").forEach(function(node, index, arr)
                                 {
-                                    if(widget.name === "type") {
-                                        widget.on("change", function(isChecked) {
-
-                                            var objId = widget.id + ":fields";
-                                            var obj = registry.byId(objId);
-                                            if(obj) {
-                                                if(isChecked) {
-                                                    obj.domNode.style.display = "block";
-                                                } else {
-                                                    obj.domNode.style.display = "none";
-                                                }
-                                                obj.resize();
-                                                var widgetValue = widget.value;
-                                                if (requiredFields.hasOwnProperty(widgetValue))
-                                                {
-                                                    dijit.byId('formAddQueue.' + requiredFields[widgetValue]).required = isChecked;
-                                                }
-
-                                                util.applyMetadataToWidgets(obj.domNode, "Queue", widgetValue);
-                                            }
-                                        })
+                                    if (node.id === "formAddQueueType:" + value)
+                                    {
+                                        node.style.display = "block";
+                                        util.applyMetadataToWidgets(node, "Queue", value);
+                                    }
+                                    else
+                                    {
+                                        node.style.display = "none";
                                     }
-
                                 });
+                                for(var requiredField in requiredFields)
+                                {
+                                    dijit.byId('formAddQueue.' + requiredFields[requiredField]).required = (requiredField == value);
+                                }
+                            });
 
                             theForm.on("submit", function(e) {
 
diff --git a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/editQueue.js b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/editQueue.js
index 1a8b9f80fb..06c9672efe 100644
--- a/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/editQueue.js
+++ b/qpid/java/broker-plugins/management-http/src/main/java/resources/js/qpid/management/editQueue.js
@@ -57,7 +57,10 @@ define(["dojo/_base/xhr",
                   "alertThresholdMessageAge",
                   "alertThresholdMessageSize",
                   "alertRepeatGap",
-                  "maximumDeliveryAttempts"];
+                  "maximumDeliveryAttempts",
+                  "priorities",
+                  "lvqKey",
+                  "sortKey"];
 
     var numericFieldNames = ["maximumMessageTtl",
                   "minimumMessageTtl",
@@ -90,6 +93,7 @@ define(["dojo/_base/xhr",
         }
         this.form = registry.byId("formEditQueue");
         this.form.on("submit", function(){return false;});
+        this.typeSelector = registry.byId("formEditQueue.type");
       },
       show: function(hostData)
       {
@@ -113,6 +117,18 @@ define(["dojo/_base/xhr",
               }
             }
         );
+        var queueType = this.typeSelector.get("value");
+        query(".typeSpecificDiv").forEach(function(node, index, arr){
+            if (node.id === "formEditQueueType:" + queueType)
+            {
+                node.style.display = "block";
+                util.applyMetadataToWidgets(node, "Queue", queueType);
+            }
+            else
+            {
+                node.style.display = "none";
+            }
+        });
       },
       destroy: function()
       {