Merge remote-tracking branch 'origin/candidate-9.4.x' into candidate-…

…9.6.x Signed-off-by: Gordon Smith <[email protected]> # Conflicts: # helm/hpcc/Chart.yaml # helm/hpcc/templates/_helpers.tpl # helm/hpcc/templates/dafilesrv.yaml # helm/hpcc/templates/dali.yaml # helm/hpcc/templates/dfuserver.yaml # helm/hpcc/templates/eclagent.yaml # helm/hpcc/templates/eclccserver.yaml # helm/hpcc/templates/eclscheduler.yaml # helm/hpcc/templates/esp.yaml # helm/hpcc/templates/localroxie.yaml # helm/hpcc/templates/roxie.yaml # helm/hpcc/templates/sasha.yaml # helm/hpcc/templates/thor.yaml # version.cmake
hpcc-systems · Jun 28, 2024 · 910c3b8 · 910c3b8
2 parents 95bfaee + 3e6c813
commit 910c3b8
Show file tree

Hide file tree

Showing 25 changed files with 850 additions and 292 deletions.
diff --git a/esp/src/package-lock.json b/esp/src/package-lock.json
diff --git a/esp/src/package.json b/esp/src/package.json
@@ -42,11 +42,11 @@
     "@fluentui/react-icons-mdl2": "1.3.59",
     "@fluentui/react-migration-v8-v9": "9.6.3",
     "@hpcc-js/chart": "2.83.3",
-    "@hpcc-js/codemirror": "2.61.4",
+    "@hpcc-js/codemirror": "2.62.0",
     "@hpcc-js/common": "2.71.17",
     "@hpcc-js/comms": "2.92.2",
     "@hpcc-js/dataflow": "8.1.6",
-    "@hpcc-js/eclwatch": "2.74.3",
+    "@hpcc-js/eclwatch": "2.74.5",
     "@hpcc-js/graph": "2.85.15",
     "@hpcc-js/html": "2.42.20",
     "@hpcc-js/layout": "2.49.22",
@@ -56,6 +56,7 @@
     "@hpcc-js/react": "2.53.16",
     "@hpcc-js/tree": "2.40.17",
     "@hpcc-js/util": "2.51.0",
+    "@hpcc-js/wasm": "2.17.1",
     "@kubernetes/client-node": "0.20.0",
     "clipboard": "2.0.11",
     "d3-dsv": "3.0.1",
@@ -67,9 +68,9 @@
     "es6-promise": "4.2.8",
     "font-awesome": "4.7.0",
     "formik": "2.4.5",
+    "octokit": "3.1.2",
     "put-selector": "0.3.6",
     "query-string": "7.1.3",
-    "octokit": "3.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "7.51.2",

diff --git a/esp/src/src-react/components/ECLPlayground.tsx b/esp/src/src-react/components/ECLPlayground.tsx
@@ -512,18 +512,18 @@ export const ECLPlayground: React.FunctionComponent<ECLPlaygroundProps> = (props
                 </ReflexContainer>
             </ReflexElement>
             <ReflexSplitter />
-            <ReflexElement propagateDimensions={true} minSize={100}>
-                {outputMode === OutputMode.ERRORS ? (
-                    <InfoGrid wuid={workunit?.Wuid} syntaxErrors={syntaxErrors} />
+            <ReflexElement propagateDimensions={true} minSize={100} style={{ overflow: "hidden" }}>
+                <div style={{ height: "calc(100% - 44px)" }}>
+                    {outputMode === OutputMode.ERRORS ? (
+                        <InfoGrid wuid={workunit?.Wuid} syntaxErrors={syntaxErrors} />
 
-                ) : outputMode === OutputMode.RESULTS ? (
-                    <TabbedResults wuid={workunit?.Wuid} filter={filter} />
+                    ) : outputMode === OutputMode.RESULTS ? (
+                        <TabbedResults wuid={workunit?.Wuid} filter={filter} />
 
-                ) : outputMode === OutputMode.VIS ? (
-                    <div style={{ height: "calc(100% - 25px)" }}>
+                    ) : outputMode === OutputMode.VIS ? (
                         <DojoAdapter widgetClassID="VizWidget" params={{ Wuid: workunit?.Wuid, Sequence: 0 }} />
-                    </div>
-                ) : null}
+                    ) : null}
+                </div>
             </ReflexElement>
         </ReflexContainer>
     </div>;

diff --git a/esp/src/src-react/components/InfoGrid.tsx b/esp/src/src-react/components/InfoGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Checkbox, CommandBar, ICommandBarItemProps, Link } from "@fluentui/react";
+import { Checkbox, CommandBar, ICommandBarItemProps, Link, SelectionMode } from "@fluentui/react";
 import { SizeMe } from "react-sizeme";
 import { formatCost, formatTwoDigits } from "src/Session";
 import nlsHPCC from "src/nlsHPCC";
@@ -123,6 +123,11 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
                         return <><span>{info?.prefix}<Link style={{ marginRight: 3 }} href={`#/workunits/${wuid}/metrics/sg${info.subgraphID}`}>{txt}</Link>{info?.message}</span></>;
                     }
                     return Message;
+                },
+                fluentColumn: {
+                    flexGrow: 1,
+                    minWidth: 320,
+                    isResizable: true
                 }
             },
             Column: { label: nlsHPCC.Col, width: 36 },
@@ -133,7 +138,14 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
                     return activityId ? <Link href={`#/workunits/${wuid}/metrics/a${activityId}`}>a{activityId}</Link> : "";
                 }
             },
-            FileName: { label: nlsHPCC.FileName, width: 360 }
+            FileName: {
+                label: nlsHPCC.FileName,
+                fluentColumn: {
+                    flexGrow: 2,
+                    minWidth: 320,
+                    isResizable: true
+                }
+            }
         };
     }, [wuid]);
 
@@ -210,7 +222,8 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
         });
         setData(filteredExceptions);
         setFilterCounts(filterCounts);
-    }, [costChecked, errorChecked, errors, infoChecked, otherChecked, warningChecked]);
+        setSelection(filteredExceptions);
+    }, [costChecked, errorChecked, errors, infoChecked, otherChecked, setSelection, warningChecked]);
 
     React.useEffect(() => {
         if (data.length) {
@@ -224,19 +237,23 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
         }
     }, [data.length]);
 
-    return <SizeMe monitorHeight>{({ size }) =>
-        <div style={{ height: "100%" }}>
-            <CommandBar items={buttons} farItems={copyButtons} />
-            <div style={pivotItemStyle(size)}>
-                <FluentGrid
-                    data={data}
-                    primaryID={"id"}
-                    columns={columns}
-                    setSelection={setSelection}
-                    setTotal={setTotal}
-                    refresh={refreshTable}
-                ></FluentGrid>
+    return <div style={{ height: "100%", overflowY: "hidden" }}>
+        <CommandBar items={buttons} farItems={copyButtons} />
+        <SizeMe monitorHeight >{({ size }) =>
+            <div style={{ height: "100%", overflowY: "hidden" }}>
+                <div style={{ ...pivotItemStyle(size), overflowY: "hidden" }}>
+                    <FluentGrid
+                        data={data}
+                        primaryID={"id"}
+                        columns={columns}
+                        setSelection={_ => { }}
+                        setTotal={setTotal}
+                        refresh={refreshTable}
+                        height={`${size.height - (44 + 8 + 45 + 12)}px`}
+                        selectionMode={SelectionMode.none}
+                    ></FluentGrid>
+                </div>
             </div>
-        </div>
-    }</SizeMe>;
+        }</SizeMe>
+    </div>;
 };
diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
@@ -23,6 +23,7 @@ import { ShortVerticalDivider } from "./Common";
 import { MetricsOptions } from "./MetricsOptions";
 import { BreadcrumbInfo, OverflowBreadcrumb } from "./controls/OverflowBreadcrumb";
 import { MetricsPropertiesTables } from "./MetricsPropertiesTables";
+import { MetricsSQL } from "./MetricsSQL";
 
 const logger = scopedLogger("src-react/components/Metrics.tsx");
 
@@ -77,29 +78,34 @@ class TableEx extends Table {
 
     _rawDataMap: { [id: number]: string } = {};
     metrics(metrics: any[], options: MetricsOptionsT, timelineFilter: string, scopeFilter: string): this {
-        this.columns(["##", nlsHPCC.Type, nlsHPCC.Scope, ...options.properties]);
-        this.data(metrics.filter(m => this.scopeFilterFunc(m, scopeFilter)).filter(row => {
-            return (timelineFilter === "" || row.name?.indexOf(timelineFilter) === 0) &&
-                (options.scopeTypes.indexOf(row.type) >= 0);
-        }).map((row, idx) => {
-            if (idx === 0) {
-                this._rawDataMap = {
-                    0: "##", 1: "type", 2: "name"
-                };
-                options.properties.forEach((p, idx2) => {
-                    this._rawDataMap[3 + idx2] = p;
-                });
-            }
-            row.__hpcc_id = row.name;
-            return [idx, row.type, row.name, ...options.properties.map(p => {
-                return row.__groupedProps[p]?.Value ??
-                    row.__groupedProps[p]?.Max ??
-                    row.__groupedProps[p]?.Avg ??
-                    row.__formattedProps[p] ??
-                    row[p] ??
-                    "";
-            }), row];
-        }));
+        this
+            .columns(["##"])    //  Reset hash to force recalculation of default widths
+            .columns(["##", nlsHPCC.Type, nlsHPCC.Scope, ...options.properties])
+            .data(metrics
+                .filter(m => this.scopeFilterFunc(m, scopeFilter))
+                .filter(row => {
+                    return (timelineFilter === "" || row.name?.indexOf(timelineFilter) === 0) &&
+                        (options.scopeTypes.indexOf(row.type) >= 0);
+                }).map((row, idx) => {
+                    if (idx === 0) {
+                        this._rawDataMap = {
+                            0: "##", 1: "type", 2: "name"
+                        };
+                        options.properties.forEach((p, idx2) => {
+                            this._rawDataMap[3 + idx2] = p;
+                        });
+                    }
+                    row.__hpcc_id = row.name;
+                    return [idx, row.type, row.name, ...options.properties.map(p => {
+                        return row.__groupedProps[p]?.Value ??
+                            row.__groupedProps[p]?.Max ??
+                            row.__groupedProps[p]?.Avg ??
+                            row.__formattedProps[p] ??
+                            row[p] ??
+                            "";
+                    }), row];
+                }))
+            ;
         return this;
     }
 
@@ -129,6 +135,8 @@ class TableEx extends Table {
     }
 }
 
+type SelectedMetricsSource = "" | "scopesTable" | "scopesSqlTable" | "metricGraphWidget" | "hotspot" | "reset";
+
 interface MetricsProps {
     wuid: string;
     querySet?: string;
@@ -146,7 +154,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
 }) => {
     const [_uiState, _setUIState] = React.useState({ ...defaultUIState });
     const [timelineFilter, setTimelineFilter] = React.useState("");
-    const [selectedMetricsSource, setSelectedMetricsSource] = React.useState<"" | "scopesTable" | "metricGraphWidget" | "hotspot" | "reset">("");
+    const [selectedMetricsSource, setSelectedMetricsSource] = React.useState<SelectedMetricsSource>("");
     const [selectedMetrics, setSelectedMetrics] = React.useState<IScope[]>([]);
     const [selectedMetricsPtr, setSelectedMetricsPtr] = React.useState<number>(-1);
     const [metrics, columns, _activities, _properties, _measures, _scopeTypes, fetchStatus, refresh] = useWUQueryMetrics(wuid, querySet, queryId);
@@ -243,15 +251,18 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         setScopeFilter(newValue || "");
     }, []);
 
+    const scopesSelectionChanged = React.useCallback((source: SelectedMetricsSource, selection: IScope[]) => {
+        setSelectedMetricsSource(source);
+        pushUrl(`${parentUrl}/${selection.map(row => row.__lparam?.id ?? row.id).join(",")}`);
+    }, [parentUrl]);
+
     const scopesTable = useConst(() => new TableEx()
         .multiSelect(true)
         .metrics([], options, timelineFilter, scopeFilter)
         .sortable(true)
         .on("click", debounce((row, col, sel) => {
             if (sel) {
-                const selection = scopesTable.selection();
-                setSelectedMetricsSource("scopesTable");
-                pushUrl(`${parentUrl}/${selection.map(row => row.__lparam.id).join(",")}`);
+                scopesSelectionChanged("scopesTable", scopesTable.selection());
             }
         }, 100))
     );
@@ -617,6 +628,9 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                             main={<AutosizeHpccJSComponent widget={scopesTable} ></AutosizeHpccJSComponent>}
                         />
                     </DockPanelItem>
+                    <DockPanelItem key="metricsSql" title={nlsHPCC.MetricsSQL} location="tab-after" relativeTo="scopesTable">
+                        <MetricsSQL defaultSql={options.sql} scopes={metrics} onSelectionChanged={selection => scopesSelectionChanged("scopesSqlTable", selection)}></MetricsSQL>
+                    </DockPanelItem>
                     <DockPanelItem key="metricGraph" title={nlsHPCC.Graph} location="split-right" relativeTo="scopesTable" >
                         <HolyGrail
                             header={<>

diff --git a/esp/src/src-react/components/MetricsOptions.tsx b/esp/src/src-react/components/MetricsOptions.tsx
@@ -3,7 +3,7 @@ import { DefaultButton, PrimaryButton, Checkbox, Pivot, PivotItem, TextField } f
 import nlsHPCC from "src/nlsHPCC";
 import { useMetricMeta, useMetricsOptions } from "../hooks/metrics";
 import { MessageBox } from "../layouts/MessageBox";
-import { JSONSourceEditor } from "./SourceEditor";
+import { JSONSourceEditor, SourceEditor } from "./SourceEditor";
 
 const width = 640;
 const innerHeight = 400;
@@ -51,7 +51,7 @@ export const MetricsOptions: React.FunctionComponent<MetricsOptionsProps> = ({
             />
         </>} >
         <Pivot>
-            <PivotItem headerText={nlsHPCC.Metrics}>
+            <PivotItem key="metrics" headerText={nlsHPCC.Metrics}>
                 <div style={{ height: innerHeight, overflow: "auto" }}>
                     <Checkbox key="all" label={nlsHPCC.All} checked={allChecked} onChange={(ev, checked) => {
                         if (checked) {
@@ -71,7 +71,7 @@ export const MetricsOptions: React.FunctionComponent<MetricsOptionsProps> = ({
                     })}
                 </div>
             </PivotItem>
-            <PivotItem headerText={nlsHPCC.Columns}>
+            <PivotItem key="columns" headerText={nlsHPCC.Columns}>
                 <div style={{ height: innerHeight, overflow: "auto" }}>
                     {properties.map(p => {
                         return <Checkbox key={p} label={p} checked={options.properties.indexOf(p) >= 0} onChange={(ev, checked) => {
@@ -84,7 +84,14 @@ export const MetricsOptions: React.FunctionComponent<MetricsOptionsProps> = ({
                     })}
                 </div>
             </PivotItem>
-            <PivotItem headerText={nlsHPCC.Graph}>
+            <PivotItem key="sql" headerText={nlsHPCC.SQL} >
+                <div style={{ height: innerHeight }}>
+                    <SourceEditor mode="sql" text={options.sql} onTextChange={sql => {
+                        setOptions({ ...options, sql });
+                    }} />
+                </div>
+            </PivotItem>
+            <PivotItem key="graph" headerText={nlsHPCC.Graph}>
                 <div style={{ height: innerHeight, overflow: "auto" }}>
                     <Checkbox label={nlsHPCC.IgnoreGlobalStoreOutEdges} checked={options.ignoreGlobalStoreOutEdges} onChange={(ev, checked) => {
                         setOptions({ ...options, ignoreGlobalStoreOutEdges: !!checked });
@@ -100,7 +107,7 @@ export const MetricsOptions: React.FunctionComponent<MetricsOptionsProps> = ({
                     }} />
                 </div>
             </PivotItem>
-            <PivotItem headerText={nlsHPCC.Layout} >
+            <PivotItem key="layout" headerText={nlsHPCC.Layout} >
                 <div style={{ height: innerHeight }}>
                     <JSONSourceEditor json={options.layout} onChange={obj => {
                         if (obj) {
@@ -110,5 +117,5 @@ export const MetricsOptions: React.FunctionComponent<MetricsOptionsProps> = ({
                 </div>
             </PivotItem>
         </Pivot>
-    </MessageBox>;
+    </MessageBox >;
 };