From 2330feb4cba0ca9eb7c6e785c123bdc295f530a3 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Thu, 5 Sep 2024 17:01:07 -0400
Subject: [PATCH 1/7] HPCC-32603 prevent Grid network races

adds AbortController signals to the Grid's queries, so that subsequent
requests will properly abort any pending request

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/package-lock.json                      |  9 ++++-----
 esp/src/package.json                           |  2 +-
 esp/src/src-react/components/controls/Grid.tsx | 11 ++++++++++-
 esp/src/src/ESPWorkunit.ts                     |  4 ++--
 esp/src/src/store/Deferred.ts                  |  2 +-
 esp/src/src/store/Paged.ts                     |  6 +++---
 esp/src/src/store/Store.ts                     | 11 ++++++++---
 7 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/esp/src/package-lock.json b/esp/src/package-lock.json
index 3391efbb526..d38e8aecddd 100644
--- a/esp/src/package-lock.json
+++ b/esp/src/package-lock.json
@@ -18,7 +18,7 @@
         "@hpcc-js/chart": "2.84.1",
         "@hpcc-js/codemirror": "2.63.0",
         "@hpcc-js/common": "2.72.0",
-        "@hpcc-js/comms": "2.95.0",
+        "@hpcc-js/comms": "2.96.0",
         "@hpcc-js/dataflow": "8.1.7",
         "@hpcc-js/eclwatch": "2.75.3",
         "@hpcc-js/graph": "2.86.0",
@@ -2082,10 +2082,9 @@
       }
     },
     "node_modules/@hpcc-js/comms": {
-      "version": "2.95.0",
-      "resolved": "https://registry.npmjs.org/@hpcc-js/comms/-/comms-2.95.0.tgz",
-      "integrity": "sha512-kzEyDxf1Msus5rhU0yO826JxgIl2kh/bI7yNTxHAlCfLKp4SU//zrj/MK5SuEDs2lUHvmTkfx1jbfGUAK3RGFg==",
-      "license": "Apache-2.0",
+      "version": "2.96.0",
+      "resolved": "https://registry.npmjs.org/@hpcc-js/comms/-/comms-2.96.0.tgz",
+      "integrity": "sha512-8faDDSBvH22lN1LHhD6xtoT/FSV3YGu7hZahuRtKp4JG27ai73AFcNOJNxyqUZ9SLN7R3oNrujqp04xpyQ6nIA==",
       "dependencies": {
         "@hpcc-js/ddl-shim": "^2.21.0",
         "@hpcc-js/util": "^2.52.0",
diff --git a/esp/src/package.json b/esp/src/package.json
index de3511485ec..9c023a0d207 100644
--- a/esp/src/package.json
+++ b/esp/src/package.json
@@ -44,7 +44,7 @@
     "@hpcc-js/chart": "2.84.1",
     "@hpcc-js/codemirror": "2.63.0",
     "@hpcc-js/common": "2.72.0",
-    "@hpcc-js/comms": "2.95.0",
+    "@hpcc-js/comms": "2.96.0",
     "@hpcc-js/dataflow": "8.1.7",
     "@hpcc-js/eclwatch": "2.75.3",
     "@hpcc-js/graph": "2.86.0",
diff --git a/esp/src/src-react/components/controls/Grid.tsx b/esp/src/src-react/components/controls/Grid.tsx
index 129271d47b3..277e1ad261b 100644
--- a/esp/src/src-react/components/controls/Grid.tsx
+++ b/esp/src/src-react/components/controls/Grid.tsx
@@ -237,12 +237,21 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
         });
     });
 
+    const abortController = React.useRef<AbortController>();
+
+    React.useEffect(() => {
+        if (abortController.current) {
+            abortController.current.abort({ message: "Grid aborting stale request" });
+        }
+        abortController.current = new AbortController();
+    }, [query]);
+
     const refreshTable = useDeepCallback((clearSelection = false) => {
         if (isNaN(start) || isNaN(count)) return;
         if (clearSelection) {
             selectionHandler.setItems([], true);
         }
-        const storeQuery = store.query({ ...query }, { start, count, sort: sorted ? [sorted] : undefined });
+        const storeQuery = store.query({ ...query }, { start, count, sort: sorted ? [sorted] : undefined }, abortController.current.signal);
         storeQuery.total.then(total => {
             setTotal(total);
         });
diff --git a/esp/src/src/ESPWorkunit.ts b/esp/src/src/ESPWorkunit.ts
index 1efadc5afc1..5cb9b91aeb5 100644
--- a/esp/src/src/ESPWorkunit.ts
+++ b/esp/src/src/ESPWorkunit.ts
@@ -1082,11 +1082,11 @@ export function CreateWUQueryStore(): BaseStore<WsWorkunitsNS.WUQuery, typeof Wo
         count: "PageSize",
         sortBy: "Sortby",
         descending: "Descending"
-    }, "Wuid", request => {
+    }, "Wuid", (request, abortSignal) => {
         if (request.Sortby && request.Sortby === "TotalClusterTime") {
             request.Sortby = "ClusterTime";
         }
-        return service.WUQuery(request).then(response => {
+        return service.WUQuery(request, abortSignal).then(response => {
             const page = {
                 start: undefined,
                 end: undefined
diff --git a/esp/src/src/store/Deferred.ts b/esp/src/src/store/Deferred.ts
index db7c3288666..a0f4d0c65ce 100644
--- a/esp/src/src/store/Deferred.ts
+++ b/esp/src/src/store/Deferred.ts
@@ -68,7 +68,7 @@ export class Deferred<T> implements Thenable<T> {
     }
 }
 
-export class DeferredResponse<T> extends Deferred<T[]>  {
+export class DeferredResponse<T> extends Deferred<T[]> {
 
     //  --- Legacy Dojo Support (fake QeuryResults) ---
     forEach(callback) {
diff --git a/esp/src/src/store/Paged.ts b/esp/src/src/store/Paged.ts
index eb57375376a..b4c1025e8db 100644
--- a/esp/src/src/store/Paged.ts
+++ b/esp/src/src/store/Paged.ts
@@ -16,7 +16,7 @@ function dataPage<T>(array: T[], start: number, size: number, total: number): Pa
     return retVal;
 }
 
-type FetchData<R, T> = (query: QueryRequest<R>) => Thenable<{ data: T[], total: number }>;
+type FetchData<R, T> = (query: QueryRequest<R>, abortSignal?: AbortSignal) => Thenable<{ data: T[], total: number }>;
 
 export interface RequestFields<T extends BaseRow> {
     start: keyof T;
@@ -43,7 +43,7 @@ export class Paged<R extends BaseRow = BaseRow, T extends BaseRow = BaseRow> ext
         this._fetchData = fetchData;
     }
 
-    fetchData(request: QueryRequest<R>, options: QueryOptions<T>): ThenableResponse<T> {
+    fetchData(request: QueryRequest<R>, options: QueryOptions<T>, abortSignal?: AbortSignal): ThenableResponse<T> {
         if (options.start !== undefined && options.count !== undefined) {
             request[this._requestFields.start] = options.start as any;
             request[this._requestFields.count] = options.count as any;
@@ -52,7 +52,7 @@ export class Paged<R extends BaseRow = BaseRow, T extends BaseRow = BaseRow> ext
             request[this._requestFields.sortBy] = options.sort[0].attribute as any;
             request[this._requestFields.descending] = options.sort[0].descending as any;
         }
-        return this._fetchData(request).then(response => {
+        return this._fetchData(request, abortSignal).then(response => {
             response.data.forEach(row => {
                 this.index[this.getIdentity(row)] = row;
             });
diff --git a/esp/src/src/store/Store.ts b/esp/src/src/store/Store.ts
index d41d24e893c..9e8aab02b15 100644
--- a/esp/src/src/store/Store.ts
+++ b/esp/src/src/store/Store.ts
@@ -1,5 +1,8 @@
 import * as QueryResults from "dojo/store/util/QueryResults";
 import { DeferredResponse, Thenable } from "./Deferred";
+import { scopedLogger } from "@hpcc-js/util";
+
+const logger = scopedLogger("src/store/Store.ts");
 
 //  Query  ---
 export type Key = string | number | symbol;
@@ -32,7 +35,7 @@ export abstract class BaseStore<R extends BaseRow, T extends BaseRow> {
         this.responseIDField = responseIDField;
     }
 
-    protected abstract fetchData(request: QueryRequest<R>, options: QueryOptions<T>): ThenableResponse<T>;
+    protected abstract fetchData(request: QueryRequest<R>, options: QueryOptions<T>, abortSignal?: AbortSignal): ThenableResponse<T>;
 
     abstract get(id: string | number): T;
 
@@ -40,11 +43,13 @@ export abstract class BaseStore<R extends BaseRow, T extends BaseRow> {
         return object[this.responseIDField];
     }
 
-    protected query(request: QueryRequest<R>, options: QueryOptions<T>): DeferredResponse<T> {
+    protected query(request: QueryRequest<R>, options: QueryOptions<T>, abortSignal?: AbortSignal): DeferredResponse<T> {
         const retVal = new DeferredResponse<T>();
-        this.fetchData(request, options).then((data: QueryResponse<T>) => {
+        this.fetchData(request, options, abortSignal).then((data: QueryResponse<T>) => {
             retVal.total.resolve(data.total);
             retVal.resolve(data);
+        }, (err) => {
+            logger.debug(err);
         });
         return QueryResults(retVal);
     }

From 3b27444f99b7d2a21d835750ead11bf9d977facf Mon Sep 17 00:00:00 2001
From: Jake Smith <jake.smith@lexisnexisrisk.com>
Date: Fri, 13 Sep 2024 15:44:48 +0100
Subject: [PATCH 2/7] Split off 9.2.122

Signed-off-by: Jake Smith <jake.smith@lexisnexisrisk.com>
---
 helm/hpcc/Chart.yaml             | 4 ++--
 helm/hpcc/templates/_helpers.tpl | 2 +-
 version.cmake                    | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/helm/hpcc/Chart.yaml b/helm/hpcc/Chart.yaml
index ebfbe3c60c4..bbf494b7028 100644
--- a/helm/hpcc/Chart.yaml
+++ b/helm/hpcc/Chart.yaml
@@ -6,9 +6,9 @@ type: application
 
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
-version: 9.2.121-closedown0
+version: 9.2.123-closedown0
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application.
 
-appVersion: 9.2.121-closedown0
+appVersion: 9.2.123-closedown0
diff --git a/helm/hpcc/templates/_helpers.tpl b/helm/hpcc/templates/_helpers.tpl
index a59efa7c3dd..496bda4e36f 100644
--- a/helm/hpcc/templates/_helpers.tpl
+++ b/helm/hpcc/templates/_helpers.tpl
@@ -1361,7 +1361,7 @@ Pass in dict with .root, .visibility defined
 {{- end -}}
 
 {{- define "hpcc.generateHelmVersion" -}}
-helmVersion: 9.2.121-closedown0
+helmVersion: 9.2.123-closedown0
 {{- end -}}
 
 {{/*
diff --git a/version.cmake b/version.cmake
index 1fa7a287d76..7095875c96e 100644
--- a/version.cmake
+++ b/version.cmake
@@ -5,8 +5,8 @@ set ( HPCC_NAME "Community Edition" )
 set ( HPCC_PROJECT "community" )
 set ( HPCC_MAJOR 9 )
 set ( HPCC_MINOR 2 )
-set ( HPCC_POINT 121 )
+set ( HPCC_POINT 123 )
 set ( HPCC_MATURITY "closedown" )
 set ( HPCC_SEQUENCE 0 )
-set ( HPCC_TAG_TIMESTAMP "2024-09-05T16:41:58Z" )
+set ( HPCC_TAG_TIMESTAMP "2024-09-13T14:44:48Z" )
 ###

From 81e878937a28c110480cc3b4ec8532233bd0c427 Mon Sep 17 00:00:00 2001
From: Gordon Smith <GordonJSmith@gmail.com>
Date: Mon, 16 Sep 2024 14:39:37 +0100
Subject: [PATCH 3/7] HPCC-32641 Metrics occasionally shows a blank page

Removed lazy loading of metrics page.

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
---
 esp/src/src-react/components/WorkunitDetails.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
index 8e595bf7b16..f30bbf974ae 100644
--- a/esp/src/src-react/components/WorkunitDetails.tsx
+++ b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -27,8 +27,7 @@ import { Workflows } from "./Workflows";
 import { WorkunitSummary } from "./WorkunitSummary";
 import { TabInfo, DelayLoadedPanel, OverflowTabList } from "./controls/TabbedPanes/index";
 import { ECLArchive } from "./ECLArchive";
-
-const Metrics = React.lazy(() => import("./Metrics").then(mod => ({ default: mod.Metrics })));
+import { Metrics } from "./Metrics";
 
 const logger = scopedLogger("src-react/components/WorkunitDetails.tsx");
 

From 2e65a77954391f51af2dc232b68d25f4ee144c57 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Mon, 16 Sep 2024 10:30:46 -0400
Subject: [PATCH 4/7] HPCC-32669 ECL Watch v9 fix grids missing command bars

fixes an issue where the CommandBar components for some WU and File
details tabs were hidden by the contents of the grid contents

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/src-react/components/Helpers.tsx      | 31 +++++++--------
 esp/src/src-react/components/InfoGrid.tsx     |  2 +-
 esp/src/src-react/components/LogViewer.tsx    | 18 ++++-----
 .../src-react/components/MetricsOptions.tsx   | 22 ++++++-----
 esp/src/src-react/components/Resources.tsx    | 37 +++++++++---------
 esp/src/src-react/components/Results.tsx      | 33 ++++++++--------
 esp/src/src-react/components/SourceFiles.tsx  | 37 +++++++++---------
 esp/src/src-react/components/SubFiles.tsx     | 37 +++++++++---------
 esp/src/src-react/components/SuperFiles.tsx   | 31 +++++++--------
 esp/src/src-react/components/Variables.tsx    | 33 ++++++++--------
 esp/src/src-react/components/Workflows.tsx    | 33 ++++++++--------
 .../src-react/components/controls/Grid.tsx    | 38 ++++++++++---------
 12 files changed, 182 insertions(+), 170 deletions(-)

diff --git a/esp/src/src-react/components/Helpers.tsx b/esp/src/src-react/components/Helpers.tsx
index 458308debd8..73fed185eca 100644
--- a/esp/src/src-react/components/Helpers.tsx
+++ b/esp/src/src-react/components/Helpers.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
 import * as ESPRequest from "src/ESPRequest";
 import nlsHPCC from "src/nlsHPCC";
 import { HelperRow, useWorkunitHelpers } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -223,18 +224,18 @@ export const Helpers: React.FunctionComponent<HelpersProps> = ({
         setData(helpers);
     }, [helpers]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"id"}
-            alphaNumColumns={{ Value: true }}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"id"}
+                alphaNumColumns={{ Value: true }}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/InfoGrid.tsx b/esp/src/src-react/components/InfoGrid.tsx
index ec028305d8b..5860ef755bc 100644
--- a/esp/src/src-react/components/InfoGrid.tsx
+++ b/esp/src/src-react/components/InfoGrid.tsx
@@ -236,7 +236,7 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
         }
     }, [data.length]);
 
-    return <div style={{ height: "100%" }}>
+    return <div style={{ height: "100%", overflow: "hidden" }}>
         <CommandBar items={buttons} farItems={copyButtons} />
         <SizeMe monitorHeight >{({ size }) =>
             <FluentGrid
diff --git a/esp/src/src-react/components/LogViewer.tsx b/esp/src/src-react/components/LogViewer.tsx
index 2e44c369051..4f5e5cdcf41 100644
--- a/esp/src/src-react/components/LogViewer.tsx
+++ b/esp/src/src-react/components/LogViewer.tsx
@@ -102,16 +102,14 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
-            <div style={{ position: "relative", height: "100%" }}>
-                <FluentGrid
-                    data={data}
-                    primaryID={"dateTime"}
-                    columns={columns}
-                    setSelection={setSelection}
-                    setTotal={setTotal}
-                    refresh={refreshTable}
-                ></FluentGrid>
-            </div>
+            <FluentGrid
+                data={data}
+                primaryID={"dateTime"}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
         }
     />;
 };
diff --git a/esp/src/src-react/components/MetricsOptions.tsx b/esp/src/src-react/components/MetricsOptions.tsx
index ce48f07513e..aa0d20a108f 100644
--- a/esp/src/src-react/components/MetricsOptions.tsx
+++ b/esp/src/src-react/components/MetricsOptions.tsx
@@ -67,16 +67,18 @@ const GridOptions: React.FunctionComponent<GridOptionsProps> = ({
         }
     }, [selectionHandler, strSelection]);
 
-    return <FluentGrid
-        data={data}
-        primaryID={"id"}
-        columns={columns}
-        selectionMode={SelectionMode.multiple}
-        setSelection={selectionHandler}
-        setTotal={setTotal}
-        refresh={refreshTable}
-        height={`${innerHeight}px`}
-    ></FluentGrid>;
+    return <div style={{ position: "relative", height: 400 }}>
+        <FluentGrid
+            data={data}
+            primaryID={"id"}
+            columns={columns}
+            selectionMode={SelectionMode.multiple}
+            setSelection={selectionHandler}
+            setTotal={setTotal}
+            refresh={refreshTable}
+            height={`${innerHeight}px`}
+        ></FluentGrid>
+    </div>;
 };
 
 interface AddLabelProps {
diff --git a/esp/src/src-react/components/Resources.tsx b/esp/src/src-react/components/Resources.tsx
index d3cb0a73a53..ccae64dfa5e 100644
--- a/esp/src/src-react/components/Resources.tsx
+++ b/esp/src/src-react/components/Resources.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResources } from "../hooks/workunit";
 import { updateParam } from "../util/history";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 import { IFrame } from "./IFrame";
@@ -108,21 +109,21 @@ export const Resources: React.FunctionComponent<ResourcesProps> = ({
         }));
     }, [resources, wuid]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        {preview && webUrl ?
-            <IFrame src={webUrl} /> :
-            <FluentGrid
-                data={data}
-                primaryID={"DisplayPath"}
-                alphaNumColumns={{ Value: true }}
-                sort={sort}
-                columns={columns}
-                setSelection={setSelection}
-                setTotal={setTotal}
-                refresh={refreshTable}
-            ></FluentGrid>}
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            preview && webUrl ?
+                <IFrame src={webUrl} /> :
+                <FluentGrid
+                    data={data}
+                    primaryID={"DisplayPath"}
+                    alphaNumColumns={{ Value: true }}
+                    sort={sort}
+                    columns={columns}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/Results.tsx b/esp/src/src-react/components/Results.tsx
index 02595519fd9..1343c84268d 100644
--- a/esp/src/src-react/components/Results.tsx
+++ b/esp/src/src-react/components/Results.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, Pivot, PivotItem, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, Pivot, PivotItem } from "@fluentui/react";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResults } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { pivotItemStyle } from "../layouts/pivot";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
@@ -141,21 +142,21 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
         }));
     }, [results]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"__hpcc_id"}
-            alphaNumColumns={{ Name: true, Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane >;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"__hpcc_id"}
+                alphaNumColumns={{ Name: true, Value: true }}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
 
 interface TabbedResultsProps {
diff --git a/esp/src/src-react/components/SourceFiles.tsx b/esp/src/src-react/components/SourceFiles.tsx
index cda748e8845..2c1b1c6578b 100644
--- a/esp/src/src-react/components/SourceFiles.tsx
+++ b/esp/src/src-react/components/SourceFiles.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Image, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Image, Link } from "@fluentui/react";
 import * as Utility from "src/Utility";
 import { QuerySortItem } from "src/store/Store";
 import nlsHPCC from "src/nlsHPCC";
 import { useWorkunitSourceFiles } from "../hooks/workunit";
 import { pushParams } from "../util/history";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { Fields } from "./forms/Fields";
 import { Filter } from "./forms/Filter";
@@ -131,20 +132,22 @@ export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
         setData(files);
     }, [filter, sourceFiles]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"Name"}
-            alphaNumColumns={{ Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-        <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <div style={{ position: "relative", height: "100%" }}>
+                <FluentGrid
+                    data={data}
+                    primaryID={"Name"}
+                    alphaNumColumns={{ Value: true }}
+                    sort={sort}
+                    columns={columns}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
+                <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
+            </div>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/SubFiles.tsx b/esp/src/src-react/components/SubFiles.tsx
index e7088869472..5b1e2f3a0c7 100644
--- a/esp/src/src-react/components/SubFiles.tsx
+++ b/esp/src/src-react/components/SubFiles.tsx
@@ -1,11 +1,12 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, FontIcon, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, FontIcon, ICommandBarItemProps, Link } from "@fluentui/react";
 import * as ESPLogicalFile from "src/ESPLogicalFile";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import * as WsDfu from "src/WsDfu";
 import { useConfirm } from "../hooks/confirm";
 import { useFile, useSubfiles } from "../hooks/file";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 import { pushUrl } from "../util/history";
@@ -159,21 +160,21 @@ export const SubFiles: React.FunctionComponent<SubFilesProps> = ({
         setUIState(state);
     }, [selection]);
 
-    return <>
-        <ScrollablePane>
-            <Sticky>
-                <CommandBar items={buttons} farItems={copyButtons} />
-            </Sticky>
-            <FluentGrid
-                data={data}
-                primaryID={"Name"}
-                columns={columns}
-                alphaNumColumns={{ RecordCount: true, Totalsize: true }}
-                setSelection={setSelection}
-                setTotal={setTotal}
-                refresh={refreshTable}
-            ></FluentGrid>
-        </ScrollablePane >
-        <DeleteSubfilesConfirm />
-    </>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <div style={{ position: "relative", height: "100%" }}>
+                <FluentGrid
+                    data={data}
+                    primaryID={"Name"}
+                    columns={columns}
+                    alphaNumColumns={{ RecordCount: true, Totalsize: true }}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
+                <DeleteSubfilesConfirm />
+            </div>
+        }
+    />;
 };
\ No newline at end of file
diff --git a/esp/src/src-react/components/SuperFiles.tsx b/esp/src/src-react/components/SuperFiles.tsx
index b9cb69e99e4..49e83e1a68b 100644
--- a/esp/src/src-react/components/SuperFiles.tsx
+++ b/esp/src/src-react/components/SuperFiles.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useFile } from "../hooks/file";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -88,18 +89,18 @@ export const SuperFiles: React.FunctionComponent<SuperFilesProps> = ({
         }
     }, [file]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"Name"}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"Name"}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/Variables.tsx b/esp/src/src-react/components/Variables.tsx
index 35c3231f328..6cb7f193df6 100644
--- a/esp/src/src-react/components/Variables.tsx
+++ b/esp/src/src-react/components/Variables.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitVariables } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -54,19 +55,19 @@ export const Variables: React.FunctionComponent<VariablesProps> = ({
 
     const copyButtons = useCopyButtons(columns, selection, "variables");
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"__hpcc_id"}
-            alphaNumColumns={{ Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"__hpcc_id"}
+                alphaNumColumns={{ Value: true }}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/Workflows.tsx b/esp/src/src-react/components/Workflows.tsx
index 7c12d4415f8..c372e2e3c81 100644
--- a/esp/src/src-react/components/Workflows.tsx
+++ b/esp/src/src-react/components/Workflows.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitWorkflows } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -73,19 +74,19 @@ export const Workflows: React.FunctionComponent<WorkflowsProps> = ({
 
     const copyButtons = useCopyButtons(columns, selection, "workflows");
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"__hpcc_id"}
-            alphaNumColumns={{ Name: true, Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"__hpcc_id"}
+                alphaNumColumns={{ Name: true, Value: true }}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/controls/Grid.tsx b/esp/src/src-react/components/controls/Grid.tsx
index 129271d47b3..dcf7d4945d4 100644
--- a/esp/src/src-react/components/controls/Grid.tsx
+++ b/esp/src/src-react/components/controls/Grid.tsx
@@ -308,24 +308,26 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
         columnWidths.set(column.key, newWidth);
     }, [columnWidths]);
 
-    return <ScrollablePane>
-        <DetailsList
-            compact={true}
-            items={items}
-            columns={fluentColumns}
-            layoutMode={DetailsListLayoutMode.fixedColumns}
-            constrainMode={ConstrainMode.unconstrained}
-            selection={selectionHandler}
-            isSelectedOnFocus={false}
-            selectionPreservedOnEmptyClick={true}
-            onColumnHeaderClick={onColumnClick}
-            onRenderDetailsHeader={renderDetailsHeader}
-            onColumnResize={columnResize}
-            onRenderRow={onRenderRow}
-            styles={gridStyles(height)}
-            selectionMode={selectionMode}
-        />
-    </ScrollablePane>;
+    return <div style={{ position: "relative", height: "100%" }}>
+        <ScrollablePane>
+            <DetailsList
+                compact={true}
+                items={items}
+                columns={fluentColumns}
+                layoutMode={DetailsListLayoutMode.fixedColumns}
+                constrainMode={ConstrainMode.unconstrained}
+                selection={selectionHandler}
+                isSelectedOnFocus={false}
+                selectionPreservedOnEmptyClick={true}
+                onColumnHeaderClick={onColumnClick}
+                onRenderDetailsHeader={renderDetailsHeader}
+                onColumnResize={columnResize}
+                onRenderRow={onRenderRow}
+                styles={gridStyles(height)}
+                selectionMode={selectionMode}
+            />
+        </ScrollablePane>
+    </div>;
 };
 
 interface FluentGridProps {

From 78651bfb3c1c5973355d381abd2549e8f15a28a1 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Fri, 13 Sep 2024 09:37:22 -0400
Subject: [PATCH 5/7] HPCC-32594 ECL Watch v9 viewing deleted files

fixes an issue where viewing a deleted file in the v9 UI was different
than v5, properly handles the thrown ESP exception(s) and displays the
file has been deleted

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/package-lock.json | 8 ++++----
 esp/src/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/esp/src/package-lock.json b/esp/src/package-lock.json
index d38e8aecddd..4fcce04e973 100644
--- a/esp/src/package-lock.json
+++ b/esp/src/package-lock.json
@@ -18,7 +18,7 @@
         "@hpcc-js/chart": "2.84.1",
         "@hpcc-js/codemirror": "2.63.0",
         "@hpcc-js/common": "2.72.0",
-        "@hpcc-js/comms": "2.96.0",
+        "@hpcc-js/comms": "2.96.1",
         "@hpcc-js/dataflow": "8.1.7",
         "@hpcc-js/eclwatch": "2.75.3",
         "@hpcc-js/graph": "2.86.0",
@@ -2082,9 +2082,9 @@
       }
     },
     "node_modules/@hpcc-js/comms": {
-      "version": "2.96.0",
-      "resolved": "https://registry.npmjs.org/@hpcc-js/comms/-/comms-2.96.0.tgz",
-      "integrity": "sha512-8faDDSBvH22lN1LHhD6xtoT/FSV3YGu7hZahuRtKp4JG27ai73AFcNOJNxyqUZ9SLN7R3oNrujqp04xpyQ6nIA==",
+      "version": "2.96.1",
+      "resolved": "https://registry.npmjs.org/@hpcc-js/comms/-/comms-2.96.1.tgz",
+      "integrity": "sha512-38vIe8foZa5fYtrj65oeWyYWUDZmQTbKetHG5HXWZWMu0Lfmln8uG5/J7mO0ilw3ls2oZj7xOk5T/4xvg7v43w==",
       "dependencies": {
         "@hpcc-js/ddl-shim": "^2.21.0",
         "@hpcc-js/util": "^2.52.0",
diff --git a/esp/src/package.json b/esp/src/package.json
index 9c023a0d207..db7708ef45d 100644
--- a/esp/src/package.json
+++ b/esp/src/package.json
@@ -44,7 +44,7 @@
     "@hpcc-js/chart": "2.84.1",
     "@hpcc-js/codemirror": "2.63.0",
     "@hpcc-js/common": "2.72.0",
-    "@hpcc-js/comms": "2.96.0",
+    "@hpcc-js/comms": "2.96.1",
     "@hpcc-js/dataflow": "8.1.7",
     "@hpcc-js/eclwatch": "2.75.3",
     "@hpcc-js/graph": "2.86.0",

From 98cd3c1d550901e40601481df0d81b0ad67bc5d4 Mon Sep 17 00:00:00 2001
From: Gavin Halliday <gavin.halliday@lexisnexis.com>
Date: Thu, 12 Sep 2024 12:48:38 +0100
Subject: [PATCH 6/7] HPCC-32654 Fix crash in eclcc for mismatched functions in
 PROJECT(module, interface)

Signed-off-by: Gavin Halliday <gavin.halliday@lexisnexis.com>
---
 ecl/hql/hqlexpr.cpp          |  4 ++-
 ecl/hql/hqlgram2.cpp         | 24 +++++++++++++++++
 ecl/regress/iproject.ecl     | 50 ++++++++++++++++++++++++++++++++++++
 ecl/regress/iproject_err.ecl | 50 ++++++++++++++++++++++++++++++++++++
 4 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 ecl/regress/iproject.ecl
 create mode 100644 ecl/regress/iproject_err.ecl

diff --git a/ecl/hql/hqlexpr.cpp b/ecl/hql/hqlexpr.cpp
index 57529bce0ae..5d5da00fec7 100644
--- a/ecl/hql/hqlexpr.cpp
+++ b/ecl/hql/hqlexpr.cpp
@@ -11028,7 +11028,9 @@ IHqlExpression *CHqlDelayedCall::clone(HqlExprArray &newkids)
 
 IHqlExpression * CHqlDelayedCall::makeDelayedCall(IHqlExpression * _funcdef, HqlExprArray &operands)
 {
-    ITypeInfo * returnType = _funcdef->queryType()->queryChildType();
+    ITypeInfo * funcType = _funcdef->queryType();
+    assertex(funcType->getTypeCode() == type_function);
+    ITypeInfo * returnType = funcType->queryChildType();
     CHqlDelayedCall * ret;
     switch (returnType->getTypeCode())
     {
diff --git a/ecl/hql/hqlgram2.cpp b/ecl/hql/hqlgram2.cpp
index 6692f19502e..37c0f2ce3f4 100644
--- a/ecl/hql/hqlgram2.cpp
+++ b/ecl/hql/hqlgram2.cpp
@@ -3638,6 +3638,30 @@ IHqlExpression * HqlGram::implementInterfaceFromModule(const attribute & modpos,
             {
                 HqlExprArray parameters;
                 bool isParametered = extractSymbolParameters(parameters, &baseSym);
+                if (baseSym.isFunction() != match->isFunction())
+                {
+                    if (isParametered)
+                    {
+                        //Convert the value to a function definition - the parameters will be ignored
+                        IHqlExpression * formals = queryFunctionParameters(&baseSym);
+                        IHqlExpression * defaults = queryFunctionDefaults(&baseSym);
+                        OwnedHqlExpr funcdef = createFunctionDefinition(id, LINK(match->queryBody()), LINK(formals), LINK(defaults), NULL);
+                        match.setown(match->cloneAllAnnotations(funcdef));
+                    }
+                    else
+                    {
+                        //Convert a function into a value - possible if all parameters (including none) have default values
+                        if (!allParametersHaveDefaults(match))
+                        {
+                            reportError(ERR_EXPECTED_ATTRIBUTE, ipos, "Symbol %s is defined as a value in the base scope, but a function with non-default parameters in the interface", str(id));
+                        }
+                        else
+                        {
+                            HqlExprArray actuals;
+                            match.setown(createBoundFunction(nullptr, match, actuals, nullptr, false));
+                        }
+                    }
+                }
 
                 checkDerivedCompatible(id, newScopeExpr, match, isParametered, parameters, modpos);
                 newScope->defineSymbol(LINK(match));
diff --git a/ecl/regress/iproject.ecl b/ecl/regress/iproject.ecl
new file mode 100644
index 00000000000..3822182065d
--- /dev/null
+++ b/ecl/regress/iproject.ecl
@@ -0,0 +1,50 @@
+/*##############################################################################
+
+    HPCC SYSTEMS software Copyright (C) 2024 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.
+############################################################################## */
+
+myModule := MODULE
+
+    EXPORT value1 := 100;
+    EXPORT value2 := 200;
+    EXPORT value3(unsigned x = 10) := 300;
+    EXPORT value4() := 400;
+
+END;
+
+myInterface := INTERFACE
+
+    EXPORT value1 := 0;
+    EXPORT value2(unsigned unknown) := 0;
+    EXPORT value3 := 0;
+    EXPORT value4() := 0;
+
+END;
+
+
+
+display(myInterface x) := FUNCTION
+    RETURN
+        ORDERED(
+            OUTPUT(x.value1);
+            OUTPUT(x.value2(99999));
+            OUTPUT(x.value3);
+            OUTPUT(x.value4());
+        );
+END;
+
+
+mappedModule := PROJECT(myModule, myInterface);
+display(mappedModule);
\ No newline at end of file
diff --git a/ecl/regress/iproject_err.ecl b/ecl/regress/iproject_err.ecl
new file mode 100644
index 00000000000..cb4d64b7c74
--- /dev/null
+++ b/ecl/regress/iproject_err.ecl
@@ -0,0 +1,50 @@
+/*##############################################################################
+
+    HPCC SYSTEMS software Copyright (C) 2024 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.
+############################################################################## */
+
+myModule := MODULE
+
+    EXPORT value1 := 100;
+    EXPORT value2 := 200;
+    EXPORT value3(unsigned i) := 300;   // invalid - no default value supplied
+    EXPORT value4() := 400;
+
+END;
+
+myInterface := INTERFACE
+
+    EXPORT value1 := 0;
+    EXPORT value2() := 0;
+    EXPORT value3 := 0;
+    EXPORT value4() := 0;
+
+END;
+
+
+
+display(myInterface x) := FUNCTION
+    RETURN
+        ORDERED(
+            OUTPUT(x.value1);
+            OUTPUT(x.value2());
+            OUTPUT(x.value3);
+            OUTPUT(x.value4());
+        );
+END;
+
+
+mappedModule := PROJECT(myModule, myInterface);
+display(mappedModule);
\ No newline at end of file

From e667ca83e7fd723f59ebb961c3acc865cfc247e9 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:34:05 -0400
Subject: [PATCH 7/7] HPCC-32692 ECL Watch v9 fix /topology/logs grid display

fixes an issue with the FluentUI grid on /topology/logs, where it was
incorrectly rendering on the page

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/src-react/components/Logs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/esp/src/src-react/components/Logs.tsx b/esp/src/src-react/components/Logs.tsx
index 911cf63b236..a04b845f6db 100644
--- a/esp/src/src-react/components/Logs.tsx
+++ b/esp/src/src-react/components/Logs.tsx
@@ -180,7 +180,7 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
-            <>
+            <div style={{ position: "relative", height: "100%" }}>
                 <FluentPagedGrid
                     store={gridStore}
                     query={query}
@@ -198,7 +198,7 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
                     refresh={refreshTable}
                 ></FluentPagedGrid>
                 <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
-            </>
+            </div>
         }
         footer={<FluentPagedFooter
             persistID={"cloudlogs"}