Merge pull request #11648 from GordonSmith/HPCC-16314

HPCC-16314 Show active graph on WU Details page

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

esp/src/.jshintrc

@@ -9,7 +9,8 @@
         "ActiveXObject",
         "CodeMirror",
         "d3",
-        "crossfilter"
+        "crossfilter",
+        "Promise"
     ],
     // JSHint Default Configuration File (as on JSHint website)
     // See http://jshint.com/docs/ for more details

esp/src/eclwatch/ActivityWidget.js

@@ -487,14 +487,14 @@ define([
                     if (lang.exists("OpenMode", params) && params.OpenMode === "Graph") {
                         return new DelayLoadWidget({
                             id: id,
-                            title: row.GraphName,
+                            title: row.GraphName + " - " + "sg" + row.GID,
                             closable: true,
-                            delayWidget: "GraphPageWidget",
+                            delayWidget: "GraphTree7Widget",
                             hpcc: {
                                 params: {
                                     Wuid: row.Wuid,
                                     GraphName: row.GraphName,
-                                    SubGraphId: row.GID
+                                    SubGraphId: "sg" + row.GID
                                 }
                             }
                         });

esp/src/eclwatch/DelayLoadWidget.js

@@ -1,6 +1,5 @@
 define([
     "dojo/_base/declare",
-    "dojo/_base/Deferred",
     "dojo/_base/lang",
     "dojo/dom",
     "dojo/dom-style",
@@ -8,11 +7,12 @@ define([
     "dijit/layout/ContentPane",
 
     "src/Utility"
-], function (declare, Deferred, lang, dom, domStyle,
+], function (declare, lang, dom, domStyle,
     ContentPane,
     Utility) {
         return declare("DelayLoadWidget", [ContentPane], {
-            __hpcc_initalized: false,
+            __ensurePromise: undefined,
+            __initPromise: undefined,
             refresh: null,
 
             style: {
@@ -37,57 +37,58 @@ define([
             },
 
             ensureWidget: function () {
-                if (this.deferred) {
-                    return this.deferred.promise;
-                }
-
-                this.deferred = new Deferred();
-                this.startLoading();
+                if (this.__ensurePromise) return this.__ensurePromise;
                 var context = this;
-                Utility.resolve(this.delayWidget, function (widget) {
-                    var widgetInstance = new widget(lang.mixin({
-                        id: context.childWidgetID,
-                        style: {
-                            margin: "0px",
-                            padding: "0px",
-                            width: "100%",
-                            height: "100%"
+                this.__ensurePromise = new Promise(function (resolve, reject) {
+                    context.startLoading();
+                    Utility.resolve(context.delayWidget, function (Widget) {
+                        var widgetInstance = new Widget(lang.mixin({
+                            id: context.childWidgetID,
+                            style: {
+                                margin: "0px",
+                                padding: "0px",
+                                width: "100%",
+                                height: "100%"
+                            }
+                        }, context.delayProps ? context.delayProps : {}));
+                        context.widget = {};
+                        context.widget[widgetInstance.id] = widgetInstance;
+                        context.containerNode.appendChild(widgetInstance.domNode);
+                        widgetInstance.startup();
+                        widgetInstance.resize();
+                        if (widgetInstance.refresh) {
+                            context.refresh = function (params) {
+                                widgetInstance.refresh(params);
+                            }
                         }
-                    }, context.delayProps ? context.delayProps : {}));
-                    context.widget = {};
-                    context.widget[widgetInstance.id] = widgetInstance;
-                    context.containerNode.appendChild(widgetInstance.domNode);
-                    widgetInstance.startup();
-                    widgetInstance.resize();
-                    if (widgetInstance.refresh) {
-                        context.refresh = function (params) {
-                            widgetInstance.refresh(params);
-                        }
-                    }
-                    context.stopLoading();
-                    context.deferred.resolve(widgetInstance);
+                        context.stopLoading();
+                        resolve(widgetInstance);
+                    });
                 });
-                return this.deferred.promise;
+                return this.__ensurePromise;
             },
 
             //  Implementation  ---
             init: function (params) {
-                if (this.__hpcc_initalized)
-                    return false;
-
+                if (this.__initPromise) return this.__initPromise;
                 this.childWidgetID = this.id + "-DL";
-                this.__hpcc_initalized = true;
-
                 var context = this;
-                this.ensureWidget().then(function (widget) {
-                    widget.init(params);
-                    if (context.__hpcc_hash) {
-                        context.doRestoreFromHash(context.__hpcc_hash);
-                        context.__hpcc_hash = null;
-                    }
+                this.__initPromise = new Promise(function (resolve, reject) {
+                    context.ensureWidget().then(function (widget) {
+                        widget.init(params);
+                        if (context.__hpcc_hash) {
+                            context.doRestoreFromHash(context.__hpcc_hash);
+                            context.__hpcc_hash = null;
+                        }
+                        //  Let page finish initial render ---
+                        setTimeout(function () {
+                            resolve(widget);
+                        }, 20);
+                    });
                 });
-                return true;
+                return this.__initPromise;
             },
+
             restoreFromHash: function (hash) {
                 if (this.widget && this.widget[this.childWidgetID]) {
                     this.doRestoreFromHash(hash);

esp/src/eclwatch/GraphsWidget.js

@@ -248,6 +248,10 @@ define([
                 return retVal;
             },
 
+            openGraph: function(graphName, subgraphID) {
+                this._onRowDblClick({ Name: graphName }, { SubGraphId: subgraphID });
+            },
+
             createDetail: function (id, row, params) {
                 params = params || {};
                 if (this.mode === "Query") {

esp/src/eclwatch/TpClusterInfoWidget.js

@@ -38,10 +38,23 @@ define([
                             selectorType: 'checkbox',
                             sortable: false
                         }),
-                        Name: { label: this.i18n.Name, width: 180, sortable: true },
+                        Name: {
+                            label: this.i18n.Name,
+                            width: 180,
+                            sortable: true,
+                            formatter: function (cell, row) {
+                                return "<a href='#' class='dgrid-row-url'>" + cell + "</a>";
+                            }
+                        },
                         WorkUnit: { label: this.i18n.WUID, sortable: true }
                     }
                 }, domID);
+                retVal.on(".dgrid-row-url:click", function (evt) {
+                    if (context._onRowDblClick) {
+                        var row = retVal.row(evt).data;
+                        context._onRowDblClick(row);
+                    }
+                });
                 return retVal;
             },
 

esp/src/eclwatch/TpThorStatusWidget.js

@@ -125,7 +125,7 @@ define([
                         var tab = context.ensurePane(newValue, {
                             Wuid: Wuid,
                             GraphName: GraphName,
-                            SubGraphId: SubGraphId
+                            SubGraphId: "sg" + SubGraphId
                         });
                         context.selectChild(tab);
                     });
@@ -144,7 +144,7 @@ define([
                             id: id,
                             title: _id,
                             closable: true,
-                            delayWidget: "GraphPageWidget",
+                            delayWidget: "GraphTree7Widget",
                             params: params
                         });
                     } else {

esp/src/eclwatch/WUDetailsWidget.js

@@ -25,6 +25,7 @@ define([
 
     "hpcc/_TabContainerWidget",
     "src/ESPWorkunit",
+    "src/ESPActivity",
     "src/ESPRequest",
     "hpcc/TargetSelectWidget",
     "hpcc/DelayLoadWidget",
@@ -59,7 +60,7 @@ define([
     registry,
     OnDemandGrid, Keyboard, Selection, selector, ColumnResizer, DijitRegistry,
     Clippy,
-    _TabContainerWidget, ESPWorkunit, ESPRequest, TargetSelectWidget, DelayLoadWidget, InfoGridWidget, WsWorkunits,
+    _TabContainerWidget, ESPWorkunit, ESPActivity, ESPRequest, TargetSelectWidget, DelayLoadWidget, InfoGridWidget, WsWorkunits,
     WUStatusModule,
     template) {
         return declare("WUDetailsWidget", [_TabContainerWidget], {
@@ -133,6 +134,7 @@ define([
 
             startup: function (args) {
                 this.inherited(arguments);
+                this.__globalActivities = ESPActivity.Get();
             },
 
             destroy: function (args) {
@@ -222,6 +224,16 @@ define([
                     );
                 }
             },
+            _onActiveGraph: function() {
+                this.graphsWidgetLoaded = true;
+                var context = this;
+                this.graphsWidget.init({
+                    Wuid: this.wu.Wuid
+                }).then(function(w) {
+                    w.openGraph(context.wu.GraphName, "sg" + context.wu.GID);
+                });
+                this.selectChild(this.graphsWidget.id);
+            },
 
             onZapReport: function (event) {
                 var context = this;
@@ -249,6 +261,8 @@ define([
                 if (this.inherited(arguments))
                     return;
 
+                this.graphLink = dom.byId(this.id + "ActiveGraph");
+
                 if (params.Wuid) {
                     this.summaryWidget.set("title", params.Wuid);
 
@@ -540,6 +554,8 @@ define([
                     this.refreshActionState();
                 } else if (name === "StateID") {
                     this.refreshActionState();
+                } else if (name === "GraphName" || name === "GID") {
+                    this.graphLink.innerText = this.wu.GraphName && this.wu.GID ? this.wu.GraphName + " - " + this.wu.GID : "";
                 } else if (name === "ActionEx") {
                     this.refreshActionState();
                 } else if (name === "EventSchedule") {

esp/src/eclwatch/templates/WUDetailsWidget.html

@@ -92,7 +92,7 @@
                             </li>
                             <li>
                                 <label class="Prompt" for="${id}State">${i18n.State}:</label>
-                                <div id="${id}State"></div>
+                                <div><span id="${id}State"></span>&nbsp;&nbsp;<a id="${id}ActiveGraph" href='#' data-dojo-attach-event="onClick:_onActiveGraph"></a></div>
                             </li>
                             <li>
                                 <label class="Prompt" for="${id}Owner">${i18n.Owner}:</label>