HPCC-9901 Generic Filter Widget

Create a generic drop down filter widget to ensure consistency across filtered lists.

Fixes HPCC-9901

Signed-off-by: Gordon Smith <gordon.smith@lexisnexis.com>

esp/files/scripts/DFUQueryWidget.js

@@ -50,6 +50,7 @@ define([
     "hpcc/SFDetailsWidget",
     "hpcc/DFUWUDetailsWidget",
     "hpcc/TargetSelectWidget",
+    "hpcc/FilterDropDownWidget",
 
     "dojo/text!../templates/DFUQueryWidget.html",
 
@@ -69,7 +70,7 @@ define([
 ], function (declare, lang, arrayUtil, dom, domAttr, domConstruct, domClass, domForm, date, on,
                 registry, Dialog, Menu, MenuItem, MenuSeparator, PopupMenuItem, Textarea,
                 Grid, Keyboard, Selection, selector, ColumnResizer, DijitRegistry, Pagination,
-                _TabContainerWidget, WsDfu, ESPUtil, ESPLogicalFile, ESPDFUWorkunit, LFDetailsWidget, SFDetailsWidget, DFUWUDetailsWidget, TargetSelectWidget,
+                _TabContainerWidget, WsDfu, ESPUtil, ESPLogicalFile, ESPDFUWorkunit, LFDetailsWidget, SFDetailsWidget, DFUWUDetailsWidget, TargetSelectWidget, FilterDropDownWidget,
                 template) {
     return declare("DFUQueryWidget", [_TabContainerWidget, ESPUtil.FormHelper], {
         templateString: template,
@@ -78,11 +79,12 @@ define([
         workunitsTab: null,
         workunitsGrid: null,
 
-        validateDialog: null,
+        filter: null,
 
         postCreate: function (args) {
             this.inherited(arguments);
             this.workunitsTab = registry.byId(this.id + "_Workunits");
+            this.filter = registry.byId(this.id + "Filter");
             this.clusterTargetSelect = registry.byId(this.id + "ClusterTargetSelect");
             this.desprayTargetSelect = registry.byId(this.id + "DesprayTargetSelect");
         },
@@ -178,20 +180,6 @@ define([
             registry.byId(this.id + "DesprayDropDown").closeDropDown();
         },
 
-        _onFilterApply: function (event) {
-            registry.byId(this.id + "FilterDropDown").closeDropDown();
-            if (this.hasFilter()) {
-                this.applyFilter();
-            } else {
-                this.validateDialog.show();
-            }
-        },
-
-        _onFilterClear: function(event) {
-            this.clearFilter();
-            this.applyFilter();
-        },
-
         _onRowDblClick: function (item) {
             var wuTab = this.ensureLFPane(this.id + "_" + item.Name, item);
             this.selectChild(wuTab);
@@ -218,24 +206,8 @@ define([
         },
 
         //  Implementation  ---
-        clearFilter: function () {
-            arrayUtil.forEach(registry.byId(this.id + "FilterForm").getDescendants(), function (item, idx) {
-                item.set('value', null);
-            });
-        },
-
-        hasFilter: function () {
-            var filter = domForm.toObject(this.id + "FilterForm");
-            for (var key in filter) {
-                if (filter[key] != "") {
-                    return true;
-                }
-            }
-            return false;
-        },
-
         getFilter: function () {
-            var retVal = domForm.toObject(this.id + "FilterForm");
+            var retVal = this.filter.toObject();
             lang.mixin(retVal, {
                 StartDate: this.getISOString("FromDate", "FromTime"),
                 EndDate: this.getISOString("ToDate", "ToTime")
@@ -249,10 +221,6 @@ define([
             return retVal;
         },
 
-        applyFilter: function () {
-            this.refreshGrid();
-        },
-
         //  Implementation  ---
         init: function (params) {
             if (this.inherited(arguments))
@@ -319,23 +287,24 @@ define([
                 var pSubMenu = new Menu();
                 this.menuFilterOwner = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "Owner").set("value", context.menuFilterOwner.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "Owner", context.menuFilterOwner.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 this.menuFilterCluster = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "ClusterTargetSelect").set("value", context.menuFilterCluster.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "ClusterTargetSelect", context.menuFilterOwner.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 pSubMenu.addChild(new MenuSeparator());
                 this.menuFilterClearFilter = this.addMenuItem(pSubMenu, {
                     label: "Clear",
                     onClick: function () {
-                        context._onFilterClear();
+                        context.filter.clear();
+                        context.refreshGrid();
                     }
                 });
 
@@ -470,13 +439,6 @@ define([
                     }, sourceDiv);
                 });
             }
-
-            this.refreshFilterState();
-        },
-
-        refreshFilterState: function () {
-            var hasFilter = this.hasFilter();
-            dom.byId(this.id + "IconFilter").src = hasFilter ? "img/filter.png" : "img/noFilter.png";
         },
 
         ensureDFUWUPane: function (id, params) {

esp/files/scripts/FilterDropDownWidget.js

@@ -0,0 +1,109 @@
+/*##############################################################################
+#   HPCC SYSTEMS software Copyright (C) 2012 HPCC Systems.
+#
+#   Licensed 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/declare",
+    "dojo/_base/array",
+    "dojo/dom",
+    "dojo/dom-form",
+    "dojo/on",
+
+    "dijit/registry",
+
+    "hpcc/_Widget",
+
+    "dojo/text!../templates/FilterDropDownWidget.html",
+
+    "dijit/form/DropDownButton",
+    "dijit/TooltipDialog",
+    "dijit/form/Form",
+    "dijit/form/Button",
+
+    "dojox/layout/TableContainer"
+
+], function (declare, arrayUtil, dom, domForm, on,
+                registry,
+                _Widget,
+                template) {
+    return declare("FilterDropDownWidget", [_Widget], {
+        templateString: template,
+        baseClass: "FilterDropDownWidget",
+
+        iconFilter: null,
+        filterDropDown: null,
+        filterForm: null,
+
+        postCreate: function (args) {
+            this.inherited(arguments);
+            this.filterDropDown = registry.byId(this.id + "FilterDropDown");
+            this.filterForm = registry.byId(this.id + "FilterForm");
+        },
+
+        startup: function (args) {
+            this.inherited(arguments);
+            this.iconFilter = dom.byId(this.id + "IconFilter");
+        },
+
+        //  Hitched actions  ---
+        _onFilterClear: function (event) {
+            this.clear();
+            this.filterDropDown.closeDropDown();
+            this.emit("clear");
+            this.refreshState();
+        },
+
+        _onFilterApply: function (event) {
+            this.filterDropDown.closeDropDown();
+            this.emit("apply");
+            this.refreshState();
+        },
+
+        //  Implementation  ---
+        clear: function () {
+            arrayUtil.forEach(this.filterForm.getDescendants(), function (item, idx) {
+                item.set("value", null);
+            });
+        },
+
+        setValue: function (id, value) {
+            registry.byId(id).set("value", value);
+            this.refreshState();
+        },
+
+        exists: function () {
+            var filter = this.toObject();
+            for (var key in filter) {
+                if (filter[key] != "") {
+                    return true;
+                }
+            }
+            return false;
+        },
+
+        toObject: function () {
+            var retVal = domForm.toObject(this.filterForm.id);
+            return retVal;
+        },
+
+        init: function (params) {
+            if (this.inherited(arguments))
+                return;
+        },
+
+        refreshState: function () {
+            this.iconFilter.src = this.exists() ? "img/filter.png" : "img/noFilter.png";
+        }
+    });
+});

esp/files/scripts/GetDFUWorkunitsWidget.js

@@ -43,6 +43,7 @@ define([
     "hpcc/FileSpray",
     "hpcc/DFUWUDetailsWidget",
     "hpcc/TargetSelectWidget",
+    "hpcc/FilterDropDownWidget",
 
     "dojo/text!../templates/GetDFUWorkunitsWidget.html",
 
@@ -62,7 +63,7 @@ define([
 ], function (declare, arrayUtil,dom, domClass, domForm, date, on,
                 registry, Dialog, Menu, MenuItem, MenuSeparator, PopupMenuItem,
                 Grid, Keyboard, Selection, selector, ColumnResizer, DijitRegistry, Pagination,
-                _TabContainerWidget, ESPUtil, ESPDFUWorkunit, FileSpray, DFUWUDetailsWidget, TargetSelectWidget,
+                _TabContainerWidget, ESPUtil, ESPDFUWorkunit, FileSpray, DFUWUDetailsWidget, TargetSelectWidget, FilterDropDownWidget,
                 template) {
     return declare("GetDFUWorkunitsWidget", [_TabContainerWidget], {
         templateString: template,
@@ -70,19 +71,20 @@ define([
 
         workunitsTab: null,
         workunitsGrid: null,
+        filter: null,
         clusterTargetSelect: null,
         stateTargetSelect: null,
 
         postCreate: function (args) {
             this.inherited(arguments);
             this.workunitsTab = registry.byId(this.id + "_Workunits");
+            this.filter = registry.byId(this.id + "Filter");
             this.clusterTargetSelect = registry.byId(this.id + "ClusterTargetSelect");
             this.stateSelect = registry.byId(this.id + "StateSelect");
         },
 
         startup: function (args) {
             this.inherited(arguments);
-            this.initFilter();
         },
 
         getTitle: function () {
@@ -133,20 +135,6 @@ define([
             FileSpray.DFUWorkunitsAction(this.workunitsGrid.getSelected(), "Unprotect");
         },
 
-        _onFilterApply: function (event) {
-            registry.byId(this.id + "FilterDropDown").closeDropDown();
-            if (this.hasFilter()) {
-                this.applyFilter();
-            } else {
-                this.validateDialog.show();
-            }
-        },
-
-        _onFilterClear: function(event) {
-            this.clearFilter();
-            this.applyFilter();
-        },
-
         _onRowDblClick: function (id) {
             var wuTab = this.ensurePane(this.id + "_" + id, {
                 Wuid: id
@@ -185,31 +173,6 @@ define([
             }
         },
 
-        clearFilter: function () {
-            arrayUtil.forEach(registry.byId(this.id + "FilterForm").getDescendants(), function (item, idx) {
-                item.set('value', null);
-            });
-        },
-
-        hasFilter: function () {
-            var filter = domForm.toObject(this.id + "FilterForm");
-            for (var key in filter) {
-                if (filter[key] != "") {
-                    return true;
-                }
-            }
-            return false;
-        },
-
-        getFilter: function () {
-            var retVal = domForm.toObject(this.id + "FilterForm");
-            return retVal;
-        },
-
-        applyFilter: function () {
-            this.refreshGrid();
-        },
-
         //  Implementation  ---
         init: function (params) {
             if (this.inherited(arguments))
@@ -229,6 +192,14 @@ define([
                 includeBlank: true
             });
             this.selectChild(this.workunitsTab, true);
+
+            var context = this;
+            this.filter.on("clear", function (evt) {
+                context.refreshGrid();
+            });
+            this.filter.on("apply", function (evt) {
+                context.refreshGrid();
+            });
         },
 
         initTab: function () {
@@ -292,30 +263,31 @@ define([
                 });*/
                 this.menuFilterJobname = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "Jobname").set("value", context.menuFilterJobname.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "Jobname", context.menuFilterOwner.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 this.menuFilterCluster = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "ClusterTargetSelect").set("value", context.menuFilterCluster.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "ClusterTargetSelect", context.menuFilterOwner.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 this.menuFilterState = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "StateSelect").set("value", context.menuFilterState.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "StateSelect", context.menuFilterOwner.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 pSubMenu.addChild(new MenuSeparator());
                 this.menuFilterClearFilter = this.addMenuItem(pSubMenu, {
                     label: "Clear",
                     onClick: function () {
-                        context._onFilterClear();
+                        context.filter.clear();
+                        context.refreshGrid();
                     }
                 });
 
@@ -414,15 +386,8 @@ define([
             this.workunitsGrid.startup();
         },
 
-        initFilter: function () {
-            this.validateDialog = new Dialog({
-                title: "Filter",
-                content: "No filter criteria specified."
-            });
-        },
-
         refreshGrid: function (args) {
-            this.workunitsGrid.set("query", this.getFilter());
+            this.workunitsGrid.set("query", this.filter.toObject());
         },
 
         refreshActionState: function () {
@@ -432,7 +397,6 @@ define([
             var hasNotProtected = false;
             var hasFailed = false;
             var hasNotFailed = false;
-            var hasFilter = this.hasFilter();
             for (var i = 0; i < selection.length; ++i) {
                 hasSelection = true;
                 if (selection[i] && selection[i].isProtected && selection[i].isProtected != "0") {
@@ -452,13 +416,6 @@ define([
             registry.byId(this.id + "SetToFailed").set("disabled", !hasNotProtected);
             registry.byId(this.id + "Protect").set("disabled", !hasNotProtected);
             registry.byId(this.id + "Unprotect").set("disabled", !hasProtected);
-
-            this.refreshFilterState();
-        },
-
-        refreshFilterState: function () {
-            var hasFilter = this.hasFilter();
-            dom.byId(this.id + "IconFilter").src = hasFilter ? "img/filter.png" : "img/noFilter.png";
         },
 
         ensurePane: function (id, params) {

esp/files/scripts/WUQueryWidget.js

@@ -24,7 +24,6 @@ define([
     "dojo/on",
 
     "dijit/registry",
-    "dijit/Dialog",
     "dijit/Menu",
     "dijit/MenuItem",
     "dijit/MenuSeparator",
@@ -44,6 +43,7 @@ define([
     "hpcc/ESPWorkunit",
     "hpcc/WUDetailsWidget",
     "hpcc/TargetSelectWidget",
+    "hpcc/FilterDropDownWidget",
 
     "dojo/text!../templates/WUQueryWidget.html",
 
@@ -62,9 +62,9 @@ define([
     "dojox/layout/TableContainer"
 
 ], function (declare, lang, arrayUtil, dom, domClass, domForm, date, on,
-                registry, Dialog, Menu, MenuItem, MenuSeparator, PopupMenuItem,
+                registry, Menu, MenuItem, MenuSeparator, PopupMenuItem,
                 Grid, Keyboard, Selection, selector, ColumnResizer, DijitRegistry, Pagination,
-                _TabContainerWidget, WsWorkunits, ESPUtil, ESPWorkunit, WUDetailsWidget, TargetSelectWidget,
+                _TabContainerWidget, WsWorkunits, ESPUtil, ESPWorkunit, WUDetailsWidget, TargetSelectWidget, FilterDropDownWidget,
                 template) {
     return declare("WUQueryWidget", [_TabContainerWidget, ESPUtil.FormHelper], {
         templateString: template,
@@ -72,14 +72,14 @@ define([
 
         workunitsTab: null,
         workunitsGrid: null,
+        filter: null,
         clusterTargetSelect: null,
         stateSelect: null,
 
-        validateDialog: null,
-
         postCreate: function (args) {
             this.inherited(arguments);
             this.workunitsTab = registry.byId(this.id + "_Workunits");
+            this.filter = registry.byId(this.id + "Filter");
             this.clusterTargetSelect = registry.byId(this.id + "ClusterTargetSelect");
             this.stateSelect = registry.byId(this.id + "StateSelect");
             this.logicalFileSearchTypeSelect = registry.byId(this.id + "LogicalFileSearchType");
@@ -88,7 +88,6 @@ define([
         startup: function (args) {
             this.inherited(arguments);
             this.initContextMenu();
-            this.initFilter();
         },
 
         getTitle: function () {
@@ -150,20 +149,6 @@ define([
         _onDeschedule: function (event) {
         },
 
-        _onFilterApply: function (event) {
-            registry.byId(this.id + "FilterDropDown").closeDropDown();
-            if (this.hasFilter()) {
-                this.applyFilter();
-            } else {
-                this.validateDialog.show();
-            }
-        },
-
-        _onFilterClear: function (event) {
-            this.clearFilter();
-            this.applyFilter();
-        },
-
         _onRowDblClick: function (wuid) {
             var wuTab = this.ensurePane(this.id + "_" + wuid, {
                 Wuid: wuid
@@ -207,24 +192,8 @@ define([
         },
 
         //  Implementation  ---
-        clearFilter: function () {
-            arrayUtil.forEach(registry.byId(this.id + "FilterForm").getDescendants(), function (item, idx) {
-                item.set("value", null);
-            });
-        },
-
-        hasFilter: function () {
-            var filter = domForm.toObject(this.id + "FilterForm");
-            for (var key in filter) {
-                if (filter[key] != "") {
-                    return true;
-                }
-            }
-            return false;
-        },
-
         getFilter: function () {
-            var retVal = domForm.toObject(this.id + "FilterForm");
+            var retVal = this.filter.toObject();
             lang.mixin(retVal, {
                 StartDate: this.getISOString("FromDate", "FromTime"),
                 EndDate: this.getISOString("ToDate", "ToTime")
@@ -240,10 +209,6 @@ define([
             return retVal;
         },
 
-        applyFilter: function () {
-            this.refreshGrid();
-        },
-
         //  Implementation  ---
         init: function (params) {
             if (this.inherited(arguments))
@@ -267,6 +232,14 @@ define([
 
             this.initWorkunitsGrid();
             this.selectChild(this.workunitsTab, true);
+
+            var context = this;
+            this.filter.on("clear", function (evt) {
+                context.refreshGrid();
+            });
+            this.filter.on("apply", function (evt) {
+                context.refreshGrid();
+            });
         },
 
         initTab: function () {
@@ -327,37 +300,38 @@ define([
                 var pSubMenu = new Menu();
                 this.menuFilterOwner = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "Owner").set("value", context.menuFilterOwner.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "Owner", context.menuFilterOwner.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 this.menuFilterJobname = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "Jobname").set("value", context.menuFilterJobname.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "Jobname", context.menuFilterJobname.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 this.menuFilterCluster = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "ClusterTargetSelect").set("value", context.menuFilterCluster.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "ClusterTargetSelect", context.menuFilterCluster.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 this.menuFilterState = this.addMenuItem(pSubMenu, {
                     onClick: function (args) {
-                        context.clearFilter();
-                        registry.byId(context.id + "StateSelect").set("value", context.menuFilterState.get("hpcc_value"));
-                        context.applyFilter();
+                        context.filter.clear();
+                        context.filter.setValue(context.id + "StateSelect", context.menuFilterState.get("hpcc_value"));
+                        context.refreshGrid();
                     }
                 });
                 pSubMenu.addChild(new MenuSeparator());
                 this.menuFilterClearFilter = this.addMenuItem(pSubMenu, {
                     label: "Clear",
                     onClick: function () {
-                        context._onFilterClear();
+                        context.filter.clear();
+                        context.refreshGrid();
                     }
                 });
                 pMenu.addChild(new PopupMenuItem({
@@ -446,13 +420,6 @@ define([
             this.workunitsGrid.startup();
         },
 
-        initFilter: function () {
-            this.validateDialog = new Dialog({
-                title: "Filter",
-                content: "No filter criteria specified."
-            });
-        },
-
         refreshGrid: function (args) {
             this.workunitsGrid.set("query", this.getFilter());
         },
@@ -500,13 +467,6 @@ define([
 
             this.menuProtect.set("disabled", !hasNotProtected);
             this.menuUnprotect.set("disabled", !hasProtected);
-
-            this.refreshFilterState();
-        },
-
-        refreshFilterState: function () {
-            var hasFilter = this.hasFilter();
-            dom.byId(this.id + "IconFilter").src = hasFilter ? "img/filter.png" : "img/noFilter.png";
         },
 
         ensurePane: function (id, params) {

esp/files/templates/DFUQueryWidget.html

@@ -43,28 +43,18 @@
                         </div>
                     </div>
                     <span data-dojo-type="dijit.ToolbarSeparator"></span>
-                    <img id="${id}IconFilter" src="img/noFilter.png" class="iconNoFilter"/>
-                    <div id="${id}FilterDropDown" data-dojo-type="dijit.form.DropDownButton">
-                        <span>Filter</span>
-                        <div data-dojo-type="dijit.TooltipDialog">
-                            <div id="${id}FilterForm" style="width:430px" data-dojo-type="dijit.form.Form">
-                                <div data-dojo-props="cols:2" data-dojo-type="dojox.layout.TableContainer">
-                                    <input id="${id}Name" title="Name:" name="LogicalName" colspan="2" style="width:100%;" data-dojo-props="trim: true, placeHolder:'*::somefile*'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}Description" title="Description:" name="Description" colspan="2" style="width:100%;" data-dojo-props="trim: true, placeHolder:'Some*Description'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}Owner" title="Owner:" name="Owner" colspan="2" data-dojo-props="trim: true, placeHolder:'JSmith*'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}ClusterTargetSelect" title="Cluster:" name="ClusterName" colspan="2" style="display: inline-block; vertical-align: middle" data-dojo-type="TargetSelectWidget" />
-                                    <input id="${id}FromSize" title="From&nbsp;Sizes:" name="FileSizeFrom" colspan="2" data-dojo-props="trim: true, placeHolder:'4096'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}ToSize" title="To&nbsp;Sizes:" name="FileSizeTo" colspan="2" data-dojo-props="trim: true, placeHolder:'16777216'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}FromDate" title="From&nbsp;Date:" name="StartDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
-                                    <input id="${id}FromTime" title="" name="FromTime" data-dojo-props="trim: true, placeHolder:'7:30 AM'" data-dojo-type="dijit.form.TimeTextBox" />
-                                    <input id="${id}ToDate" title="To&nbsp;Date:" name="EndDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
-                                    <input id="${id}ToTime" title="" name="ToTime" data-dojo-props="trim: true, placeHolder:'7:30 PM'" data-dojo-type="dijit.form.TimeTextBox" />
-                                    <input id="${id}LastNDays" title="Last&nbsp;N&nbsp;Days:" name="FirstN" colspan="2" data-dojo-props="dtrim: true, placeHolder:'2'" data-dojo-type="dijit.form.TextBox" />
-                                </div>
-                                <button data-dojo-attach-event="onClick:_onFilterApply" data-dojo-type="dijit.form.Button">Apply</button>
-                                <button data-dojo-attach-event="onClick:_onFilterClear" data-dojo-type="dijit.form.Button">Clear</button>
-                            </div>
-                        </div>
+                    <div id="${id}Filter" data-dojo-type="FilterDropDownWidget">
+                        <input id="${id}Name" title="Name:" name="LogicalName" colspan="2" style="width:100%;" data-dojo-props="trim: true, placeHolder:'*::somefile*'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}Description" title="Description:" name="Description" colspan="2" style="width:100%;" data-dojo-props="trim: true, placeHolder:'Some*Description'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}Owner" title="Owner:" name="Owner" colspan="2" data-dojo-props="trim: true, placeHolder:'JSmith*'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}ClusterTargetSelect" title="Cluster:" name="ClusterName" colspan="2" style="display: inline-block; vertical-align: middle" data-dojo-type="TargetSelectWidget" />
+                        <input id="${id}FromSize" title="From&nbsp;Sizes:" name="FileSizeFrom" colspan="2" data-dojo-props="trim: true, placeHolder:'4096'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}ToSize" title="To&nbsp;Sizes:" name="FileSizeTo" colspan="2" data-dojo-props="trim: true, placeHolder:'16777216'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}FromDate" title="From&nbsp;Date:" name="StartDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
+                        <input id="${id}FromTime" title="" name="FromTime" data-dojo-props="trim: true, placeHolder:'7:30 AM'" data-dojo-type="dijit.form.TimeTextBox" />
+                        <input id="${id}ToDate" title="To&nbsp;Date:" name="EndDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
+                        <input id="${id}ToTime" title="" name="ToTime" data-dojo-props="trim: true, placeHolder:'7:30 PM'" data-dojo-type="dijit.form.TimeTextBox" />
+                        <input id="${id}LastNDays" title="Last&nbsp;N&nbsp;Days:" name="FirstN" colspan="2" data-dojo-props="dtrim: true, placeHolder:'2'" data-dojo-type="dijit.form.TextBox" />
                     </div>
                     <span data-dojo-type="dijit.ToolbarSeparator"></span>
                     <div id="${id}NewPage" class="right" data-dojo-attach-event="onClick:_onNewPage" data-dojo-props="iconClass:'iconNewPage', showLabel:false" data-dojo-type="dijit.form.Button">Open in New Page</div>

esp/files/templates/FilterDropDownWidget.html

@@ -0,0 +1,17 @@
+<span class="${baseClass}">
+    <img id="${id}IconFilter" src="img/noFilter.png" class="iconNoFilter"/>
+    <div id="${id}FilterDropDown" data-dojo-type="dijit.form.DropDownButton">
+        <span>Filter</span>
+        <div class="toolTip" data-dojo-type="dijit.TooltipDialog">
+            <div id="${id}FilterForm" style="width:460px" data-dojo-type="dijit.form.Form">
+                <div class="dijitDialogPaneContentArea" data-dojo-props="cols:2" data-dojo-type="dojox.layout.TableContainer">
+                    <span data-dojo-attach-point="containerNode"></span>
+                </div>
+                <div class="dijitDialogPaneActionBar">
+                    <button id="${id}FilterApply" data-dojo-attach-event="onClick:_onFilterApply" data-dojo-type="dijit.form.Button">Apply</button>
+                    <button id="${id}FilterClear" data-dojo-attach-event="onClick:_onFilterClear" data-dojo-type="dijit.form.Button">Clear</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>

esp/files/templates/GetDFUWorkunitsWidget.html

@@ -12,22 +12,12 @@
                     <div id="${id}Protect" data-dojo-attach-event="onClick:_onProtect" data-dojo-type="dijit.form.Button">Protect</div>
                     <div id="${id}Unprotect" data-dojo-attach-event="onClick:_onUnprotect" data-dojo-type="dijit.form.Button">Unprotect</div>
                     <span data-dojo-type="dijit.ToolbarSeparator"></span>
-                    <img id="${id}IconFilter" src="img/noFilter.png" class="iconNoFilter"/>
-                    <div id="${id}FilterDropDown" data-dojo-type="dijit.form.DropDownButton">
-                        <span>Filter</span>
-                        <div data-dojo-type="dijit.TooltipDialog">
-                            <div id="${id}FilterForm" style="width:360px" data-dojo-type="dijit.form.Form">
-                                <div data-dojo-props="cols:2" data-dojo-type="dojox.layout.TableContainer">
-                                    <input id="${id}Owner" title="Owner:" name="Owner" colspan="2" data-dojo-props="trim: true, placeHolder:'jsmi*'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}Jobname" title="Jobname:" name="Jobname" colspan="2" data-dojo-props="trim: true, placeHolder:'log_analysis_1*'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}ClusterTargetSelect" title="Cluster:" name="Cluster" colspan="2" data-dojo-props="trim: true, placeHolder:'r?x*'" data-dojo-type="TargetSelectWidget" />
-                                    <input id="${id}StateSelect" title="State" name="StateReq" colspan="2" data-dojo-props="trim: true, placeHolder:'Created'" data-dojo-type="TargetSelectWidget" />
-                                    <input id="${id}Type" title="Archived&nbsp;Only" name="Type" value="archived workunits" colspan="2" data-dojo-type="dijit.form.CheckBox" />
-                                </div>
-                                <button data-dojo-attach-event="onClick:_onFilterApply" data-dojo-type="dijit.form.Button">Apply</button>
-                                <button data-dojo-attach-event="onClick:_onFilterClear" data-dojo-type="dijit.form.Button">Clear</button>
-                            </div>
-                        </div>
+                    <div id="${id}Filter" data-dojo-type="FilterDropDownWidget">
+                        <input id="${id}Owner" title="Owner:" name="Owner" colspan="2" data-dojo-props="trim: true, placeHolder:'jsmi*'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}Jobname" title="Jobname:" name="Jobname" colspan="2" data-dojo-props="trim: true, placeHolder:'log_analysis_1*'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}ClusterTargetSelect" title="Cluster:" name="Cluster" colspan="2" data-dojo-props="trim: true, placeHolder:'r?x*'" data-dojo-type="TargetSelectWidget" />
+                        <input id="${id}StateSelect" title="State" name="StateReq" colspan="2" data-dojo-props="trim: true, placeHolder:'Created'" data-dojo-type="TargetSelectWidget" />
+                        <input id="${id}Type" title="Archived&nbsp;Only" name="Type" value="archived workunits" colspan="2" data-dojo-type="dijit.form.CheckBox" />
                     </div>
                     <span data-dojo-type="dijit.ToolbarSeparator"></span>
                     <div id="${id}NewPage" class="right" data-dojo-attach-event="onClick:_onNewPage" data-dojo-props="iconClass:'iconNewPage', showLabel:false" data-dojo-type="dijit.form.Button">Open in New Page</div>

esp/files/templates/HPCCPlatformFilesWidget.html

@@ -4,12 +4,12 @@
             <div id="${id}StackController" style="width: 100%" data-dojo-props="containerId:'${id}TabContainer'" data-dojo-type="dijit.layout.StackController"></div>
         </div>
         <div id="${id}TabContainer" data-dojo-props="region: 'center', tabPosition: 'top'" style="width: 100%; height: 100%" data-dojo-type="dijit.layout.StackContainer">
-            <div id="${id}_Workunits" title="Workunits" data-dojo-type="GetDFUWorkunitsWidget">
-            </div>
             <div id="${id}_LogicalFiles" title="Logical Files" data-dojo-type="DFUQueryWidget">
             </div>
             <div id="${id}_LandingZones" title="Landing Zones" data-dojo-type="LZBrowseWidget">
             </div>
+            <div id="${id}_Workunits" title="Workunits" data-dojo-type="GetDFUWorkunitsWidget">
+            </div>
             <div id="${id}_XRef" title="XRef" data-dojo-type="dijit.layout.ContentPane">
             </div>
         </div>

esp/files/templates/WUQueryWidget.html

@@ -17,30 +17,20 @@
                     <div id="${id}Reschedule" data-dojo-attach-event="onClick:_onReschedule" data-dojo-type="dijit.form.Button">Reschedule</div>
                     <div id="${id}Deschedule" data-dojo-attach-event="onClick:_onDeschedule" data-dojo-type="dijit.form.Button">Deschedule</div>
                     <span data-dojo-type="dijit.ToolbarSeparator"></span>
-                    <img id="${id}IconFilter" src="img/noFilter.png" class="iconNoFilter"/>
-                    <div id="${id}FilterDropDown" data-dojo-type="dijit.form.DropDownButton">
-                        <span>Filter</span>
-                        <div data-dojo-type="dijit.TooltipDialog" class="toolTip">
-                            <div id="${id}FilterForm" style="width:460px" data-dojo-type="dijit.form.Form">
-                                <div data-dojo-props="cols:2" data-dojo-type="dojox.layout.TableContainer">
-                                    <input id="${id}Wuid" title="WUID:" name="Wuid" colspan="2" data-dojo-props="trim: true, placeHolder:'W20130222-171723'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}Owner" title="Owner:" name="Owner" colspan="2" data-dojo-props="trim: true, placeHolder:'jsmi*'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}Jobname" title="Job&nbsp;Name:" name="Jobname" colspan="2" data-dojo-props="trim: true, placeHolder:'log_analysis_1*'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}ClusterTargetSelect" title="Cluster:" name="Cluster" colspan="2" data-dojo-props="trim: true, placeHolder:'r?x*'" data-dojo-type="TargetSelectWidget" />
-                                    <input id="${id}StateSelect" title="State:" name="State" colspan="2" data-dojo-props="trim: true, placeHolder:'Created'" data-dojo-type="TargetSelectWidget" />
-                                    <input id="${id}ECL" title="ECL:" name="ECL" colspan="2" data-dojo-props="trim: true, placeHolder:':=dataset*'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}LogicalFile" title="Logical&nbsp;File" name="LogicalFile" colspan="2" data-dojo-props="trim: true, placeHolder:'*::somefile'" data-dojo-type="dijit.form.TextBox" />
-                                    <input id="${id}LogicalFileSearchType" title="Logical&nbsp;File&nbsp;Type" name="LogicalFileSearchType" colspan="2" data-dojo-type="TargetSelectWidget" />
-                                    <input id="${id}FromDate" title="From&nbsp;Date:" name="StartDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
-                                    <input id="${id}FromTime" name="FromTime" data-dojo-props="trim: true, placeHolder:'7:30 AM'" data-dojo-type="dijit.form.TimeTextBox" />
-                                    <input id="${id}ToDate" title="To&nbsp;Date:" name="EndDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
-                                    <input id="${id}ToTime" name="ToTime" data-dojo-props="trim: true, placeHolder:'7:30 PM'" data-dojo-type="dijit.form.TimeTextBox" />
-                                    <input id="${id}LastNDays" title="Last&nbsp;N&nbsp;Days:" name="LastNDays" data-dojo-props="dtrim: true, placeHolder:'2'" data-dojo-type="dijit.form.TextBox" />
-                                </div>
-                                <button id="${id}FilterApply" data-dojo-attach-event="onClick:_onFilterApply" data-dojo-type="dijit.form.Button">Apply</button>
-                                <button id="${id}FilterClear" data-dojo-attach-event="onClick:_onFilterClear" data-dojo-type="dijit.form.Button">Clear</button>
-                            </div>
-                        </div>
+                    <div id="${id}Filter" data-dojo-type="FilterDropDownWidget">
+                        <input id="${id}Wuid" title="WUID:" name="Wuid" colspan="2" style="width:100%" data-dojo-props="trim: true, placeHolder:'W20130222-171723'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}Owner" title="Owner:" name="Owner" colspan="2" data-dojo-props="trim: true, placeHolder:'jsmi*'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}Jobname" title="Job&nbsp;Name:" name="Jobname" colspan="2" data-dojo-props="trim: true, placeHolder:'log_analysis_1*'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}ClusterTargetSelect" title="Cluster:" name="Cluster" colspan="2" data-dojo-props="trim: true, placeHolder:'r?x*'" data-dojo-type="TargetSelectWidget" />
+                        <input id="${id}StateSelect" title="State:" name="State" colspan="2" data-dojo-props="trim: true, placeHolder:'Created'" data-dojo-type="TargetSelectWidget" />
+                        <input id="${id}ECL" title="ECL:" name="ECL" colspan="2" data-dojo-props="trim: true, placeHolder:':=dataset*'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}LogicalFile" title="Logical&nbsp;File" name="LogicalFile" colspan="2" data-dojo-props="trim: true, placeHolder:'*::somefile'" data-dojo-type="dijit.form.TextBox" />
+                        <input id="${id}LogicalFileSearchType" title="Logical&nbsp;File&nbsp;Type" name="LogicalFileSearchType" colspan="2" data-dojo-type="TargetSelectWidget" />
+                        <input id="${id}FromDate" title="From&nbsp;Date:" name="StartDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
+                        <input id="${id}FromTime" name="FromTime" data-dojo-props="trim: true, placeHolder:'7:30 AM'" data-dojo-type="dijit.form.TimeTextBox" />
+                        <input id="${id}ToDate" title="To&nbsp;Date:" name="EndDate" data-dojo-props="trim: true, placeHolder:'7/28/2013'" data-dojo-type="dijit.form.DateTextBox" />
+                        <input id="${id}ToTime" name="ToTime" data-dojo-props="trim: true, placeHolder:'7:30 PM'" data-dojo-type="dijit.form.TimeTextBox" />
+                        <input id="${id}LastNDays" title="Last&nbsp;N&nbsp;Days:" name="LastNDays" data-dojo-props="dtrim: true, placeHolder:'2'" data-dojo-type="dijit.form.TextBox" />
                     </div>
                     <span data-dojo-type="dijit.ToolbarSeparator"></span>
                     <div id="${id}NewPage" class="right" data-dojo-attach-event="onClick:_onNewPage" data-dojo-props="iconClass:'iconNewPage', showLabel:false" data-dojo-type="dijit.form.Button">Open in New Page</div>