HPCC-10095 Help Icon Issues

Changed Icon from a (?).
Added About dialog.

Fixes HPCC-10095

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

esp/files/css/hpcc.css

@@ -369,6 +369,13 @@ hr.dashedLine {
     cursor: pointer;
 }
 
+.iconAdvanced{
+    background-image: url("../img/Info.png");
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+}
+
 /*###############################*/
 #appLayout {
     height: 100%;

esp/files/scripts/ECLPlaygroundWidget.js

@@ -154,6 +154,10 @@ define([
             };
         },
 
+        getGraph: function () {
+            return registry.byId(this.id + "GraphControl");
+        },
+
         resetPage: function () {
             this.editorControl.clearErrors();
             this.editorControl.clearHighlightLines();

esp/files/scripts/GraphWidget.js

@@ -103,6 +103,15 @@ require([
             },
 
             //  Plugin wrapper  ---
+            showToolbar: function (show) {
+                if (show) {
+                    domClass.remove(this.id + "Toolbar", "hidden");
+                } else {
+                    domClass.add(this.id + "Toolbar", "hidden");
+                }
+                this.resize();
+            },
+
             clear: function () {
                 if (this._plugin) {
                     this.xgmml = "";
@@ -141,12 +150,12 @@ require([
 
             load: function (dot, layout) {
                 this.registerEvents();
-                if (this._plugin && this.xgmml != xgmml) {
+                if (this._plugin && this.dot != dot) {
                     this.setMessage("Loading Data...");
                     this._plugin.loadDOT(dot);
                     this.setMessage("Performing Layout...");
                     this._plugin.startLayout(layout);
-                    this.xgmml = xgmml;
+                    this.dot = dot;
                 }
             },
 
@@ -167,6 +176,7 @@ require([
             },
 
             getVersion: function () {
+                this.registerEvents();
                 if (this._plugin) {
                     return this._plugin.version;
                 }

esp/files/scripts/HPCCPlatformWidget.js

@@ -24,6 +24,8 @@ define([
     "hpcc/_TabContainerWidget",
     "hpcc/ESPRequest",
     "hpcc/WsAccount",
+    "hpcc/WsSMC",
+    "hpcc/GraphWidget",
 
     "dojo/text!../templates/HPCCPlatformWidget.html",
 
@@ -48,7 +50,7 @@ define([
 
 ], function (declare, lang, dom,
                 registry, Tooltip,
-                _TabContainerWidget, ESPRequest, WsAccount,
+                _TabContainerWidget, ESPRequest, WsAccount, WsSMC, GraphWidget,
                 template) {
     return declare("HPCCPlatformWidget", [_TabContainerWidget], {
         templateString: template,
@@ -57,6 +59,7 @@ define([
         postCreate: function (args) {
             this.inherited(arguments);
             this.searchText = registry.byId(this.id + "FindText");
+            this.aboutDialog = registry.byId(this.id + "AboutDialog");
             this.searchPage = registry.byId(this.id + "_Main" + "_Search");
             this.stackContainer = registry.byId(this.id + "TabContainer");
             this.mainPage = registry.byId(this.id + "_Main");
@@ -84,7 +87,25 @@ define([
             win.focus();
         },
 
+        _onAboutLoaded: false,
         _onAbout: function (evt) {
+            if (!this._onAboutLoaded) {
+                this._onAboutLoaded = true;
+                var context = this;
+                WsSMC.Activity({
+                }).then(function (response) {
+                    if (lang.exists("ActivityResponse.Build", response)) {
+                        dom.byId(context.id + "ServerVersion").value = response.ActivityResponse.Build;
+                    }
+                    var gc = registry.byId(context.id + "GraphControl");
+                    dom.byId(context.id + "GraphControlVersion").value = gc.getVersion();
+                });
+            }
+            this.aboutDialog.show();
+        },
+
+        _onAboutClose: function (evt) {
+            this.aboutDialog.hide();
         },
 
         createStackControllerTooltip: function (widgetID, text) {
@@ -107,8 +128,6 @@ define([
                 if (lang.exists("MyAccountResponse.username", response)) {
                     dom.byId(context.id + "UserID").innerHTML = response.MyAccountResponse.username;
                 }
-            },
-            function (error) {
             });
 
             this.createStackControllerTooltip(this.id + "_ECL", "ECL");

esp/files/templates/GraphWidget.html

@@ -1,7 +1,7 @@
 <div class="${baseClass}">
     <div id="${id}BorderContainer" class="${baseClass}BorderContainer" style="width: 100%; height: 100%; padding: 0px; overflow: hidden" data-dojo-props="splitter: false, gutters:false" data-dojo-type="dijit.layout.BorderContainer">
         <div id="${id}ToolbarContentPane" class="${baseClass}ToolbarContentPane" style="padding: 0px; overflow: hidden" data-dojo-props="region: 'top'" data-dojo-type="dijit.layout.ContentPane">
-            <div class="topPanel dijit dijitToolbar" role="toolbar">
+            <div id="${id}Toolbar" class="topPanel dijit dijitToolbar" role="toolbar">
                 <div data-dojo-attach-event="onClick:_onClickRefresh" data-dojo-props="iconClass:'iconRefresh', showLabel:false" data-dojo-type="dijit.form.Button">Refresh</div>
                 <div data-dojo-attach-event="onClick:_onClickZoomOrig" data-dojo-props="iconClass:'iconZoomOrig', showLabel:false" data-dojo-type="dijit.form.Button">Zoom 100%</div>
                 <div data-dojo-attach-event="onClick:_onClickZoomAll" data-dojo-props="iconClass:'iconZoomAll', showLabel:false" data-dojo-type="dijit.form.Button">Zoom All</div>

esp/files/templates/HPCCPlatformECLWidget.html

@@ -6,7 +6,7 @@
         <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="WUQueryWidget">
             </div>
-            <div id="${id}_Resources" title="Playground" data-dojo-type="ECLPlaygroundWidget">
+            <div id="${id}_Playground" title="Playground" data-dojo-type="ECLPlaygroundWidget">
             </div>
         </div>
     </div>

esp/files/templates/HPCCPlatformWidget.html

@@ -14,10 +14,8 @@
                     <a id="${id}UserID" href="#"></a>
                 </div>
                 <div class="seperator grey"></div>
-                <div id="${id}More" class="left glow" data-dojo-type="dijit.form.DropDownButton">
-                    <span>
-                        <img src="img/Info.png" alt="User" />
-                    </span>
+                <div id="${id}More" class="left glow" data-dojo-props="iconClass:'iconAdvanced', showLabel:false" data-dojo-type="dijit.form.DropDownButton">
+                    <span>Advanced</span>
                     <div data-dojo-type="dijit.DropDownMenu">
                         <div id="${id}Legacy" data-dojo-attach-event="onClick:_onOpenLegacy" data-dojo-type="dijit.MenuItem">Open Legacy ECL Watch</div>
                         <span data-dojo-type="dijit.MenuSeparator"></span>
@@ -39,4 +37,17 @@
             </div>
         </div>
     </div>
+    <div id="${id}AboutDialog" title="About HPCC Platform" style="width: 480px;" data-dojo-type="dijit/Dialog">
+        <div class="dijitDialogPaneContentArea">
+            <div data-dojo-props="cols:2" data-dojo-type="dojox.layout.TableContainer">
+                <input id="${id}ServerVersion" title="Server:" name="ServerVersion" colspan="2" style="width:100%;" data-dojo-props="trim: true, readonly: true" data-dojo-type="dijit.form.Textarea" />
+                <input id="${id}GraphControlVersion" title="Graph&nbsp;Control:" name="GraphControlVersion" colspan="2" style="width:100%;" data-dojo-props="trim: true, readonly: true" data-dojo-type="dijit.form.Textarea" />
+            </div>
+            <div id="${id}GraphControl" style="width: 1px; height: 1px" data-dojo-props="minSize:120, region: 'right', splitter:true" data-dojo-type="GraphWidget">
+            </div>
+        </div>
+        <div class="dijitDialogPaneActionBar">
+            <button id="${id}Close" type="submit" data-dojo-attach-event="onClick:_onAboutClose" data-dojo-type="dijit/form/Button">Close</button>
+        </div>
+    </div>
 </div>