HPCC-11587 Add 'Open In New Page' to Package Map area

The code for the Package Map display is upgraded to support
the function of 'Open In New Page'.

Signed-off-by: wangkx <kevin.wang@lexisnexis.com>

esp/src/eclwatch/PackageMapDetailsWidget.js

@@ -22,28 +22,24 @@ define([
     "dojo/dom-attr",
     "dojo/dom-class",
     "dojo/topic",
-
-    "dijit/layout/_LayoutWidget",
-    "dijit/_TemplatedMixin",
-    "dijit/_WidgetsInTemplateMixin",
     "dijit/registry",
 
-    "hpcc/WsPackageMaps",
+    "hpcc/_TabContainerWidget",
+    "hpcc/DelayLoadWidget",
     "hpcc/PackageSourceWidget",
+    "hpcc/WsPackageMaps",
 
     "dojo/text!../templates/PackageMapDetailsWidget.html",
 
     "dijit/layout/BorderContainer",
     "dijit/layout/TabContainer",
     "dijit/layout/ContentPane",
+    "dijit/form/TextBox",
     "dijit/form/Button",
-    "dijit/Toolbar",
-    "dijit/TooltipDialog",
-    "dijit/TitlePane"
-], function (declare, lang, i18n, nlsHPCC, dom, domAttr, domClass, topic,
-    _LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin, registry,
-    WsPackageMaps, PackageSourceWidget, template) {
-    return declare("PackageMapDetailsWidget", [_LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {
+    "dijit/Toolbar"
+], function (declare, lang, i18n, nlsHPCC, dom, domAttr, domClass, topic, registry,
+    _TabContainerWidget, DelayLoadWidget, PackageSourceWidget, WsPackageMaps, template) {
+    return declare("PackageMapDetailsWidget", [_TabContainerWidget], {
         templateString: template,
         baseClass: "PackageMapDetailsWidget",
         i18n: nlsHPCC,
@@ -108,6 +104,9 @@ define([
         init: function (params) {
             if (this.initalized)
                 return;
+	    if (this.inherited(arguments))
+                return;
+
             this.initalized = true;
             this.tabId = params.tabId;
             this.packageMap = params.packageMap;

esp/src/eclwatch/PackageMapQueryWidget.js

@@ -61,7 +61,7 @@ define([
     _TabContainerWidget, DelayLoadWidget, PackageMapDetailsWidget, PackageMapValidateWidget,
     WsPackageMaps, ESPPackageProcess, SFDetailsWidget,
     template) {
-    return declare("PackageMapQueryWidget", [_TabContainerWidget, _LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {
+    return declare("PackageMapQueryWidget", [_TabContainerWidget], {
         templateString: template,
         baseClass: "PackageMapQueryWidget",
         i18n: nlsHPCC,
@@ -405,6 +405,9 @@ define([
             if (this.initalized)
                 return;
 
+            if (this.inherited(arguments))
+                return;
+
             this.initalized = true;
             this.params = params;
             this.getSelections();

esp/src/eclwatch/PackageMapValidateContentWidget.js

@@ -23,7 +23,8 @@ define([
     "dojo/topic",
     "dijit/registry",
 
-    "hpcc/_Widget",
+    "hpcc/_TabContainerWidget",
+    "hpcc/DelayLoadWidget",
     "hpcc/ECLSourceWidget",
     "hpcc/WsPackageMaps",
 
@@ -32,11 +33,11 @@ define([
     "dijit/layout/BorderContainer",
     "dijit/layout/TabContainer",
     "dijit/layout/ContentPane",
+    "dijit/form/Select",
     "dijit/form/Button"
 ], function (declare, lang, i18n, nlsHPCC, dom, query, topic, registry,
-                _Widget, EclSourceWidget, WsPackageMaps,
-                template) {
-    return declare("PackageMapValidateContentWidget", [_Widget], {
+    __TabContainerWidget, DelayLoadWidget, EclSourceWidget, WsPackageMaps, template) {
+    return declare("PackageMapValidateContentWidget", [_TabContainerWidget], {
         templateString: template,
         baseClass: "PackageMapValidateContentWidget",
         i18n: nlsHPCC,
@@ -52,6 +53,7 @@ define([
         resultControl: null,
 
         constructor: function() {
+            this.targets = new Array();
             this.processes = new Array();
         },
 
@@ -89,9 +91,14 @@ define([
             if (this.initalized)
                 return;
 
+            if (this.inherited(arguments))
+                return;
+
             this.initalized = true;
-            if (params.targets !== undefined)
+            if ((params.targets !== undefined) && (params.targets[0].Name !== undefined))
                 this.initSelections(params.targets);
+            else
+                this.getSelections();
 
             this.editorControl = registry.byId(this.id + "Source");
             this.editorControl.init(params);
@@ -109,6 +116,25 @@ define([
             }, false);
         },
 
+        getSelections: function () {
+            var context = this;
+            WsPackageMaps.GetPackageMapSelectOptions({
+                    includeTargets: true,
+                    IncludeProcesses: true,
+                    IncludeProcessFilters: true
+                }, {
+                load: function (response) {
+                    if (lang.exists("Targets.TargetData", response)) {
+                        context.targets = response.Targets.TargetData;
+                        context.initSelections(context.targets);
+                    }
+                },
+                error: function (errMsg, errStack) {
+                    context.showErrors(errMsg, errStack);
+                }
+            });
+        },
+
         initSelections: function (targets) {
             this.targets = targets;
             if (this.targets.length > 0) {

esp/src/eclwatch/PackageMapValidateWidget.js

@@ -23,7 +23,6 @@ define([
     "dojo/topic",
     "dijit/registry",
 
-    "hpcc/_Widget",
     "hpcc/_TabContainerWidget",
     "hpcc/DelayLoadWidget",
     "hpcc/ECLSourceWidget",
@@ -34,10 +33,10 @@ define([
     "dijit/layout/BorderContainer",
     "dijit/layout/TabContainer",
     "dijit/layout/ContentPane",
-    "dijit/form/Button"
+    "dijit/form/Button",
+    "dijit/form/Select"
 ], function (declare, lang, i18n, nlsHPCC, dom, query, topic, registry,
-                _Widget, _TabContainerWidget, DelayLoadWidget, EclSourceWidget, WsPackageMaps,
-                template) {
+    _TabContainerWidget, DelayLoadWidget, EclSourceWidget, WsPackageMaps, template) {
     return declare("PackageMapValidateWidget", [_TabContainerWidget], {
         templateString: template,
         baseClass: "PackageMapValidateWidget",
@@ -57,6 +56,7 @@ define([
 
         constructor: function() {
             this.processes = new Array();
+            this.targets = new Array();
         },
 
         buildRendering: function (args) {
@@ -83,14 +83,38 @@ define([
             this.validatePackageMapContentWidget = registry.byId(this.id + "_ValidatePackageMapContent");
         },
 
+        getSelections: function () {
+            var context = this;
+            WsPackageMaps.GetPackageMapSelectOptions({
+                    includeTargets: true,
+                    IncludeProcesses: true,
+                    IncludeProcessFilters: true
+                }, {
+                load: function (response) {
+                    if (lang.exists("Targets.TargetData", response)) {
+                        context.targets = response.Targets.TargetData;
+                        context.initSelections(context.targets);
+                    }
+                },
+                error: function (errMsg, errStack) {
+                    context.showErrors(errMsg, errStack);
+                }
+            });
+        },
+
         //  init this page
         init: function (params) {
             if (this.initalized)
                 return;
 
+	    if (this.inherited(arguments))
+                return;
+
             this.initalized = true;
             if (params.params.targets !== undefined)
                 this.initSelections(params.params.targets);
+            else
+                this.getSelections();
 
             this.editorControl = registry.byId(this.id + "Source");
             this.editorControl.init(params);

esp/src/eclwatch/templates/PackageMapDetailsWidget.html

@@ -6,7 +6,7 @@
                     <div id="${id}Activate" data-dojo-attach-event="onClick:_onActivate" data-dojo-type="dijit.form.Button">${i18n.Activate}</div>
                     <div id="${id}Deactivate" data-dojo-attach-event="onClick:_onDeactivate" data-dojo-type="dijit.form.Button">${i18n.Deactivate}</div>
                     <div id="${id}Delete" data-dojo-attach-event="onClick:_onDelete" data-dojo-type="dijit.form.Button">${i18n.Delete}</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">${i18n.OpenInNewPage}</div>
                 </div>
                 <div data-dojo-props="region: 'center'" data-dojo-type="dijit.layout.ContentPane">
                     <h2>

esp/src/eclwatch/templates/PackageMapQueryWidget.html

@@ -22,6 +22,7 @@
                     <div id="${id}Activate" data-dojo-attach-event="onClick:_onActivate" data-dojo-type="dijit.form.Button">${i18n.Activate}</div>
                     <div id="${id}Deactivate" data-dojo-attach-event="onClick:_onDeactivate" data-dojo-type="dijit.form.Button">${i18n.Deactivate}</div>
                     <div id="${id}Delete" data-dojo-attach-event="onClick:_onDelete" data-dojo-type="dijit.form.Button">${i18n.Delete}</div>
+                    <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">${i18n.OpenInNewPage}</div>
                 </div>
                 <div id="${id}PackagesGrid" data-dojo-props="region: 'center', plugins: { pagination: { pageSizes: [25, 50, 100, 'All'], defaultPageSize: 50, description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, maxPageStep: 4, position: 'bottom' }
                     , indirectSelection: {

esp/src/eclwatch/templates/PackageMapValidateContentWidget.html

@@ -1,21 +1,26 @@
 <div class="${baseClass}">
     <div id="${id}BorderContainer" class="${baseClass}BorderContainer" style="width: 100%; height: 100%" data-dojo-type="dijit.layout.BorderContainer">
-        <div id="${id}SubmitPane" class="topPanel" data-dojo-props="region: 'top'" data-dojo-type="dijit.layout.ContentPane">
-            <div style="display: inline-block; vertical-align: middle">
-                <label for="${id}TargetSelect">${i18n.Target}</label>
-                <div id="${id}TargetSelect" name="TargetSelect" style="width: 8em;" data-dojo-attach-event="onChange:_onChangeTarget" data-dojo-type="dijit.form.Select">
+        <div id="${id}TabContainer" data-dojo-props="region: 'center', tabPosition: 'top'" style="width: 100%; height: 100%" data-dojo-type="dijit.layout.TabContainer">
+            <div id="${id}_ValidatePackageContentMap" style="width: 100%; height: 100%" data-dojo-props="title:'${i18n.ValidatePackageContent}'" data-dojo-type="dijit.layout.BorderContainer">
+                <div id="${id}SubmitPane" class="topPanel" data-dojo-props="region: 'top'" data-dojo-type="dijit.layout.ContentPane">
+                    <div style="display: inline-block; vertical-align: middle">
+                        <label for="${id}TargetSelect">${i18n.Target}</label>
+                        <div id="${id}TargetSelect" name="TargetSelect" style="width: 8em;" data-dojo-attach-event="onChange:_onChangeTarget" data-dojo-type="dijit.form.Select">
+                        </div>
+                        <label for="${id}ProcessSelect">${i18n.Process}</label>
+                        <div id="${id}ProcessSelect" name="ProcessSelect" style="width: 8em;" data-dojo-type="dijit.form.Select">
+                        </div>
+                        <button id="${id}LoadBtn" data-dojo-attach-event="onClick:_onLoadBtnClicked" data-dojo-type="dijit.form.Button">${i18n.LoadPackageFromFile}</button>
+                        <button id="${id}ValidateBtn" data-dojo-attach-event="onClick:_onValidate" data-dojo-type="dijit.form.Button">${i18n.Validate}</button>                
+                        <div style='height: 0px;width:0px; overflow:hidden;'><input id="${id}SelectFile" type="file"/></div>                
+                    </div>
+                    <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">${i18n.OpenInNewPage}</div>
                 </div>
-                <label for="${id}ProcessSelect">${i18n.Process}</label>
-                <div id="${id}ProcessSelect" name="ProcessSelect" style="width: 8em;" data-dojo-type="dijit.form.Select">
+                <div id="${id}Source" class="centerPanel" data-dojo-props="region: 'center'" data-dojo-type="ECLSourceWidget">
+                </div>
+                <div id="${id}Result" title="${i18n.Results}" style="width: 480px;" data-dojo-props="minSize:120, region: 'right', splitter:true" data-dojo-type="ECLSourceWidget">
                 </div>
-                <button id="${id}LoadBtn" data-dojo-attach-event="onClick:_onLoadBtnClicked" data-dojo-type="dijit.form.Button">${i18n.LoadPackageFromFile}</button>
-                <button id="${id}ValidateBtn" data-dojo-attach-event="onClick:_onValidate" data-dojo-type="dijit.form.Button">${i18n.Validate}</button>
-                <div style='height: 0px;width:0px; overflow:hidden;'><input id="${id}SelectFile" type="file"/></div>
             </div>
         </div>
-        <div id="${id}Source" class="centerPanel" data-dojo-props="region: 'center'" data-dojo-type="ECLSourceWidget">
-        </div>
-        <div id="${id}Result" title="${i18n.Results}" style="width: 480px;" data-dojo-props="minSize:120, region: 'right', splitter:true" data-dojo-type="ECLSourceWidget">
-        </div>
     </div>
 </div>

esp/src/eclwatch/templates/PackageMapValidateWidget.html

@@ -12,6 +12,7 @@
                         </div>
                         <button id="${id}ValidateBtn" data-dojo-attach-event="onClick:_onValidate" data-dojo-type="dijit.form.Button">${i18n.Validate}</button>
                     </div>
+                    <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">${i18n.OpenInNewPage}</div>
                 </div>
                 <div id="${id}Source" class="centerPanel" data-dojo-props="region: 'center'" data-dojo-type="ECLSourceWidget">
                 </div>