Merge pull request #3960 from GordonSmith/HPCC-8795

HPCC-8795 WU Query Page Add Context Menu

Reviewed-By: Miguel Vazquez <miguel.vazquez@lexisnexis.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/files/css/hpcc.css

@@ -237,6 +237,24 @@ margin-left:-20px;
     vertical-align: middle;
 }
 
+.iconFilter{
+    background-image: url("../img/filter.png");
+    width: 16px;
+    height: 16px;
+    border:none;
+    display:inline-block;
+    vertical-align: middle;
+}
+
+.iconNoFilter{
+    background-image: url("../img/noFilter.png");
+    width: 16px;
+    height: 16px;
+    border:none;
+    display:inline-block;
+    vertical-align: middle;
+}
+
 .iconRefresh {
     background-image: url("../img/refresh2.png"); 
     width: 16px;

esp/files/scripts/WUQueryWidget.js

@@ -1,32 +1,40 @@
 /*##############################################################################
-#	HPCC SYSTEMS software Copyright (C) 2012 HPCC Systems.
+#   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
+#   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
+#      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.
+#   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/on",
+    "dojo/dom-class",
     "dojo/data/ObjectStore",
     "dojo/date",
-    "dojo/on",
 
     "dijit/_TemplatedMixin",
     "dijit/_WidgetsInTemplateMixin",
     "dijit/registry",
+    "dijit/Menu",
+    "dijit/MenuItem",
+    "dijit/MenuSeparator",
+    "dijit/PopupMenuItem",
+    "dijit/Dialog",
 
     "dojox/grid/EnhancedGrid",
     "dojox/grid/enhanced/plugins/Pagination",
     "dojox/grid/enhanced/plugins/IndirectSelection",
+    "dojox/widget/Calendar",
 
     "hpcc/_TabContainerWidget",
     "hpcc/WsWorkunits",
@@ -41,17 +49,19 @@ define([
     "dijit/form/DateTextBox",
     "dijit/form/TimeTextBox",
     "dijit/form/Button",
+    "dijit/form/RadioButton",
     "dijit/form/Select",
     "dijit/Toolbar",
     "dijit/TooltipDialog"
-], function (declare, dom, ObjectStore, date, on,
-                _TemplatedMixin, _WidgetsInTemplateMixin, registry,
-                EnhancedGrid, Pagination, IndirectSelection,
+], function (declare, array, dom, on, domClass, ObjectStore, date,
+                _TemplatedMixin, _WidgetsInTemplateMixin, registry, Menu, MenuItem, MenuSeparator, PopupMenuItem, Dialog,
+                EnhancedGrid, Pagination, IndirectSelection, Calendar,
                 _TabContainerWidget, WsWorkunits, WUDetailsWidget,
                 template) {
     return declare("WUQueryWidget", [_TabContainerWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {
         templateString: template,
         baseClass: "WUQueryWidget",
+
         workunitsTab: null,
         workunitsGrid: null,
         legacyPane: null,
@@ -59,6 +69,8 @@ define([
 
         tabMap: [],
 
+        validateDialog: null,
+
         postCreate: function (args) {
             this.inherited(arguments);
             this.workunitsTab = registry.byId(this.id + "_Workunits");
@@ -68,8 +80,20 @@ define([
 
         startup: function (args) {
             this.inherited(arguments);
-            this.refreshActionState();
             this.initWorkunitsGrid();
+            this.initFilter();
+            this.initContextMenu();
+            this.refreshActionState();
+        },
+
+        resize: function (args) {
+            this.inherited(arguments);
+
+            //  TODO:  This should not be needed
+            var context = this;
+            setTimeout(function () {
+                context.borderContainer.resize();
+            }, 100);
         },
 
         //  Hitched actions  ---
@@ -127,11 +151,21 @@ define([
         },
         _onDeschedule: function (event) {
         },
-        _onFilterApply: function (event) {
+        _onClickFilterApply: function (event) {
             this.workunitsGrid.rowSelectCell.toggleAllSelection(false);
+
             this.refreshGrid();
         },
-        _onFilterClear: function(event) {
+        _onFilterApply: function (event) {
+            this.workunitsGrid.rowSelectCell.toggleAllSelection(false);
+            if (this.hasFilter()) {
+                registry.byId(this.id + "FilterDropDown").closeDropDown();
+                this.refreshGrid();
+            } else {
+                this.validateDialog.show();
+            }
+        },
+        _onFilterClear: function (event, supressGridRefresh) {
             this.workunitsGrid.rowSelectCell.toggleAllSelection(false);
             dom.byId(this.id + "Owner").value = "";
             dom.byId(this.id + "Jobname").value = "";
@@ -144,7 +178,70 @@ define([
             dom.byId(this.id + "FromTime").value = "";
             dom.byId(this.id + "ToDate").value = "";
             dom.byId(this.id + "LastNDays").value = "";
-            this.refreshGrid();
+            if (!supressGridRefresh) {
+                this.refreshGrid();
+            }
+        },
+        _onRowDblClick: function (wuid) {
+            var wuTab = this.ensurePane(this.id + "_" + wuid, {
+                Wuid: wuid
+            });
+            this.selectChild(wuTab);
+        },
+        _onRowContextMenu: function (idx, item, colField, mystring) {
+            var selection = this.workunitsGrid.selection.getSelected();
+            var found = array.indexOf(selection, item);
+            if (found == -1) {
+                this.workunitsGrid.selection.deselectAll();
+                this.workunitsGrid.selection.setSelected(idx, true);
+            }
+
+            this.menuFilterOwner.set("disabled", false);
+            this.menuFilterJobname.set("disabled", false);
+            this.menuFilterCluster.set("disabled", false);
+            this.menuFilterState.set("disabled", false);
+
+            if (item) {
+                this.menuFilterOwner.set("label", "Owner:  " + item.Owner);
+                this.menuFilterOwner.set("hpcc_value", item.Owner);
+                this.menuFilterJobname.set("label", "Jobname:  " + item.Jobname);
+                this.menuFilterJobname.set("hpcc_value", item.Jobname);
+                this.menuFilterCluster.set("label", "Cluster:  " + item.Cluster);
+                this.menuFilterCluster.set("hpcc_value", item.Cluster);
+                this.menuFilterState.set("label", "State:  " + item.State);
+                this.menuFilterState.set("hpcc_value", item.State);
+            }
+
+            if (item.Owner == "") {
+                this.menuFilterOwner.set("disabled", true);
+                this.menuFilterOwner.set("label", "Owner:  " + "N/A");
+            }
+            if (item.Jobname == "") {
+                this.menuFilterJobname.set("disabled", true);
+                this.menuFilterJobname.set("label", "Jobname:  " + "N/A");
+            }
+            if (item.Cluster == "") {
+                this.menuFilterCluster.set("disabled", true);
+                this.menuFilterCluster.set("label", "Cluster:  " + "N/A");
+            }
+            if (item.State == "") {
+                this.menuFilterState.set("disabled", true);
+                this.menuFilterState.set("label", "State:  " + "N/A");
+            }
+        },
+
+        //  Implementation  ---
+        hasFilter: function () {
+            return dom.byId(this.id + "Owner").value !== "" ||
+               dom.byId(this.id + "Jobname").value !== "" ||
+               dom.byId(this.id + "Cluster").value !== "" ||
+               dom.byId(this.id + "State").value !== "" ||
+               dom.byId(this.id + "ECL").value !== "" ||
+               dom.byId(this.id + "LogicalFile").value !== "" ||
+               dom.byId(this.id + "FromDate").value !== "" ||
+               dom.byId(this.id + "FromTime").value !== "" ||
+               dom.byId(this.id + "ToDate").value !== "" ||
+               dom.byId(this.id + "LastNDays").value !== "";
         },
 
         getFilter: function () {
@@ -165,7 +262,7 @@ define([
             } else if (retVal.LastNDays != "") {
                 retVal["DateRB"] = "0";
                 var now = new Date();
-                retVal.StartDate = date.add(now, "day", dom.byId(this.id + "LastNDays").value * -1).toISOString();
+                retVal.StartDate = date.add(now, "day", retVal.LastNDays * -1).toISOString();
                 retVal.EndDate = now.toISOString();
             }
             return retVal;
@@ -214,41 +311,139 @@ define([
             }
         },
 
-        initWorkunitsGrid: function() {
+        addMenuItem: function (menu, details) {
+            var menuItem = new MenuItem(details);
+            menu.addChild(menuItem);
+            return menuItem;
+        },
+
+        initContextMenu: function () {
+            var context = this;
+            var pMenu = new Menu({
+                targetNodeIds: [this.id + "WorkunitsGrid"]
+            });
+            this.menuOpen = this.addMenuItem(pMenu, {
+                label: "Open",
+                onClick: function () { context._onOpen(); }
+            });
+            this.menuDelete = this.addMenuItem(pMenu, {
+                label: "Delete",
+                onClick: function () { context._onDelete(); }
+            });
+            this.menuSetToFailed = this.addMenuItem(pMenu, {
+                label: "Set To Failed",
+                onClick: function () { context._onSetToFailed(); }
+            });
+            pMenu.addChild(new MenuSeparator());
+            this.menuProtect = this.addMenuItem(pMenu, {
+                label: "Protect",
+                onClick: function () { context._onProtect(); }
+            });
+            this.menuUnprotect = this.addMenuItem(pMenu, {
+                label: "Unprotect",
+                onClick: function () { context._onUnprotect(); }
+            });
+            pMenu.addChild(new MenuSeparator());
+            this.menuReschedule = this.addMenuItem(pMenu, {
+                label: "Reschedule",
+                onClick: function () { context._onReschedule(); }
+            });
+            this.menuDeschedule = this.addMenuItem(pMenu, {
+                label: "Deschedule",
+                onClick: function () { context._onDeschedule(); }
+            });
+            pMenu.addChild(new MenuSeparator());
+            {
+                var pSubMenu = new Menu();
+                this.menuFilterOwner = this.addMenuItem(pSubMenu, {
+                    onClick: function (args) {
+                        context._onFilterClear(null, true);
+                        registry.byId(context.id + "Owner").set("value", context.menuFilterOwner.get("hpcc_value"));
+                        context._onClickFilterApply();
+                    }
+                });
+                this.menuFilterJobname = this.addMenuItem(pSubMenu, {
+                    onClick: function (args) {
+                        context._onFilterClear(null, true);
+                        registry.byId(context.id + "Jobname").set("value", context.menuFilterJobname.get("hpcc_value"));
+                        context._onClickFilterApply();
+                    }
+                });
+                this.menuFilterCluster = this.addMenuItem(pSubMenu, {
+                    onClick: function (args) {
+                        context._onFilterClear(null, true);
+                        registry.byId(context.id + "Cluster").set("value", context.menuFilterCluster.get("hpcc_value"));
+                        context._onClickFilterApply();
+                    }
+                });
+                this.menuFilterState = this.addMenuItem(pSubMenu, {
+                    onClick: function (args) {
+                        context._onFilterClear(null, true);
+                        registry.byId(context.id + "State").set("value", context.menuFilterState.get("hpcc_value"));
+                        context._onClickFilterApply();
+                    }
+                });
+                pSubMenu.addChild(new MenuSeparator());
+                this.menuFilterClearFilter = this.addMenuItem(pSubMenu, {
+                    label: "Clear",
+                    onClick: function () { context._onFilterClear(); }
+                });
+                pMenu.addChild(new PopupMenuItem({
+                    label: "Filter",
+                    popup: pSubMenu
+                }));
+            }
+            pMenu.startup();
+        },
+
+        initWorkunitsGrid: function () {
             this.workunitsGrid.setStructure([
-			    {
-				    name: "P",
-				    field: "Protected",
-				    width: "20px",
-				    formatter: function (protected) {
-					    if (protected == true) {
-					        return "P";
-					    }
-					    return "";
-				    }
-			    },
-			    { name: "Wuid", field: "Wuid", width: "12" },
-			    { name: "Owner", field: "Owner", width: "8" },
-			    { name: "Job Name", field: "Jobname", width: "16" },
-			    { name: "Cluster", field: "Cluster", width: "8" },
-			    { name: "Roxie Cluster", field: "RoxieCluster", width: "8" },
-			    { name: "State", field: "State", width: "8" },
-			    { name: "Total Thor Time", field: "TotalThorTime", width: "8" }
+                {
+                    name: "<img src='../files/img/locked.png'>",
+                    field: "Protected",
+                    width: "16px",
+                    formatter: function (protected) {
+                        if (protected == true) {
+                            return ("<img src='../files/img/locked.png'>");
+                        }
+                        return "";
+                    }
+                },
+                { name: "Wuid", field: "Wuid", width: "12" },
+                { name: "Owner", field: "Owner", width: "8" },
+                { name: "Job Name", field: "Jobname", width: "16" },
+                { name: "Cluster", field: "Cluster", width: "8" },
+                { name: "Roxie Cluster", field: "RoxieCluster", width: "8" },
+                { name: "State", field: "State", width: "8" },
+                { name: "Total Thor Time", field: "TotalThorTime", width: "8" }
             ]);
+
             var store = new WsWorkunits.WUQuery();
             var objStore = new ObjectStore({ objectStore: store });
             this.workunitsGrid.setStore(objStore);
             this.workunitsGrid.setQuery(this.getFilter());
+            this.workunitsGrid.noDataMessage = "<span class='dojoxGridNoData'>Zero Workunits (check filter).</span>";
 
             var context = this;
             this.workunitsGrid.on("RowDblClick", function (evt) {
-                if (context.onRowDblClick) {
+                if (context._onRowDblClick) {
                     var idx = evt.rowIndex;
                     var item = this.getItem(idx);
                     var Wuid = this.store.getValue(item, "Wuid");
-                    context.onRowDblClick(Wuid);
+                    context._onRowDblClick(Wuid);
+                }
+            }, true);
+
+            this.workunitsGrid.on("RowContextMenu", function (evt) {
+                if (context._onRowContextMenu) {
+                    var idx = evt.rowIndex;
+                    var colField = evt.cell.field;
+                    var item = this.getItem(idx);
+                    var mystring = "item." + colField;
+                    context._onRowContextMenu(idx, item, colField, mystring);
                 }
             }, true);
+            var today = new Date();
 
             dojo.connect(this.workunitsGrid.selection, 'onSelected', function (idx) {
                 context.refreshActionState();
@@ -256,10 +451,20 @@ define([
             dojo.connect(this.workunitsGrid.selection, 'onDeselected', function (idx) {
                 context.refreshActionState();
             });
-
             this.workunitsGrid.startup();
         },
 
+        initFilter: function () {
+            this.validateDialog = new Dialog({
+                title: "Filter",
+                content: "No filter criteria specified."
+            });
+            dojo.connect(registry.byId(this.id + "FromDate"), 'onClick', function (evt) {
+            });
+            dojo.connect(registry.byId(this.id + "ToDate"), 'onClick', function (evt) {
+            });
+        },
+
         refreshGrid: function (args) {
             this.workunitsGrid.setQuery(this.getFilter());
             var context = this;
@@ -275,6 +480,7 @@ 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].Protected && selection[i].Protected != "0") {
@@ -296,6 +502,11 @@ define([
             registry.byId(this.id + "Unprotect").set("disabled", !hasProtected);
             registry.byId(this.id + "Reschedule").set("disabled", true);    //TODO
             registry.byId(this.id + "Deschedule").set("disabled", true);    //TODO
+
+            this.menuProtect.set("disabled", !hasNotProtected);
+            this.menuUnprotect.set("disabled", !hasProtected);
+
+            dom.byId(this.id + "IconFilter").src = hasFilter ? "img/filter.png" : "img/noFilter.png";
         },
 
         ensurePane: function (id, params) {
@@ -316,13 +527,7 @@ define([
                 this.addChild(retVal, 2);
             }
             return retVal;
-        },
-
-        onRowDblClick: function (wuid) {
-            var wuTab = this.ensurePane(this.id + "_" + wuid, {
-                Wuid: wuid
-            });
-            this.selectChild(wuTab);
         }
+
     });
 });

esp/files/templates/WUQueryWidget.html

@@ -13,58 +13,60 @@
                     <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>
-                    <div data-dojo-type="dijit.form.DropDownButton">
+                    <img id="${id}IconFilter" src="img/noFilter.png" class="iconNoFilter"/>
+                    <div data-dojo-type="dijit.form.DropDownButton" id="${id}FilterDropDown">
                         <span>Filter</span>
                         <div data-dojo-type="dijit.TooltipDialog" class="toolTip">
-                            <form class="smallForm">
+                            <form id="${id}filterForm" class="smallForm">
                                 <ul>
-                                    <li> 
+                                    <li>
                                         <label for="${id}Owner">Owner:</label>
-                                        <input id="${id}Owner" data-dojo-props="trim: true, placeHolder:'jsmi*'" data-dojo-type="dijit.form.TextBox"/>
+                                        <input id="${id}Owner" data-dojo-props="trim: true, placeHolder:'jsmi*'" data-dojo-type="dijit.form.TextBox" />
                                     </li>
-                                    <li> 
+                                    <li>
                                         <label for="${id}Jobname">Job Name:</label>
-                                        <input id="${id}Jobname" data-dojo-props="trim: true, placeHolder:'log_analysis_1'" data-dojo-type="dijit.form.TextBox"/>
+                                        <input id="${id}Jobname" data-dojo-props="trim: true, placeHolder:'log_analysis_1'" data-dojo-type="dijit.form.TextBox" />
                                     </li>
-                                    <li> 
+                                    <li>
                                         <label for="${id}Cluster">Cluster:</label>
-                                        <input id="${id}Cluster" data-dojo-props="trim: true, placeHolder:'r?x*'" data-dojo-type="dijit.form.TextBox"/>
+                                        <input id="${id}Cluster" data-dojo-props="trim: true, placeHolder:'r?x*'" data-dojo-type="dijit.form.TextBox" />
                                     </li>
-                                    <li> 
+                                    <li>
                                         <label for="${id}State">State:</label>
-                                        <input id="${id}State" data-dojo-props="trim: true, placeHolder:'failed'" data-dojo-type="dijit.form.TextBox"/>
+                                        <input id="${id}State" data-dojo-props="trim: true, placeHolder:'failed'" data-dojo-type="dijit.form.TextBox" />
                                     </li>
-                                    <li> 
+                                    <li>
                                         <label for="${id}ECL">ECL Text:</label>
-                                        <input id="${id}ECL" data-dojo-props="trim: true, placeHolder:':=dataset'" data-dojo-type="dijit.form.TextBox"/>
+                                        <input id="${id}ECL" data-dojo-props="trim: true, placeHolder:':=dataset'" data-dojo-type="dijit.form.TextBox" />
                                     </li>
                                     <li>
                                         <label for="${id}LogicalFile">Logical File:</label>
-                                        <input id="${id}LogicalFile" data-dojo-props="trim: true, placeHolder:'*::somefile'" data-dojo-type="dijit.form.TextBox"/>
-                                        <select id="${id}LogicalFileSearchType" name="${id}LogicalFileSearchType" style="width: 8em" data-dojo-type="dijit.form.Select">
+                                        <input id="${id}LogicalFile" data-dojo-props="trim: true, placeHolder:'*::somefile'" data-dojo-type="dijit.form.TextBox" />
+                                        <select id="${id}LogicalFileSearchType" name="${id}LogicalFileSearchType" data-dojo-type="dijit.form.Select">
                                             <option value="Created">Created</option>
-                                            <option value="Used" selected="selected">Used</option>
+                                            <option value="Used" selected="selected">Referenced</option>
                                         </select>
                                     </li>
-                                    <li> 
+                                    <li>
                                         <label for="${id}FromDate">From:</label>
-                                        <img src="img/cal.gif" alt="calendar"/>
-                                        <input id="${id}FromDate" data-dojo-props="trim: true, placeHolder:'7/28/2012'" data-dojo-type="dijit.form.DateTextBox"/>
-                                        <input id="${id}FromTime" class="smallCombo" data-dojo-props="trim: true, placeHolder:'7:30 AM'" data-dojo-type="dijit.form.TimeTextBox"/>
+                                        <!--<img src="img/cal.gif" alt="calendar" id="${id}FromDate"/>-->
+                                        <input id="${id}FromDate" data-dojo-props="trim: true, placeHolder:'m/dd/yyyy'" data-dojo-type="dijit.form.DateTextBox" />
+                                        <input id="${id}FromTime" class="smallCombo" data-dojo-props="trim: true, placeHolder:'7:30 AM'" data-dojo-type="dijit.form.TimeTextBox" />
                                     </li>
-                                    <li> 
+                                    <li>
                                         <label for="${id}ToDate">To:</label>
-                                        <img src="img/cal.gif" alt="calendar"/>
-                                        <input id="${id}ToDate" data-dojo-props="trim: true, placeHolder:'7/28/2012'" data-dojo-type="dijit.form.DateTextBox"/>
-                                        <input id="${id}ToTime"  data-dojo-props="trim: true, placeHolder:'7:30 PM'" data-dojo-type="dijit.form.TimeTextBox"/>
+                                        <!--<img src="img/cal.gif" alt="calendar" id="${id}ToDate"/>-->
+                                        <input id="${id}ToDate" data-dojo-props="trim: true, placeHolder:'m/dd/yyyy'" data-dojo-type="dijit.form.DateTextBox" />
+                                        <input id="${id}ToTime" data-dojo-props="trim: true, placeHolder:'7:30 PM'"
+                                            data-dojo-type="dijit.form.TimeTextBox" />
                                     </li>
-                                    <li> 
+                                    <li>
                                         <label for="${id}LastNDays">Last N Days:</label>
-                                        <input id="${id}LastNDays" data-dojo-props="trim: true, placeHolder:'2'" data-dojo-type="dijit.form.TextBox"/>
+                                        <input id="${id}LastNDays" data-dojo-props="trim: true, placeHolder:'2'" data-dojo-type="dijit.form.TextBox" />
                                     </li>
                                 </ul>
-                                <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>
+                                <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>
                             </form>
                         </div>
                     </div>