Merge pull request #18855 from GordonSmith/HPCC-32210-WU_NEXT_PREV_ME…

…TRICS_ISSUE_II HPCC-32210 WU Next/Previous + Metrics shows incorrect graph
hpcc-systems · Jul 5, 2024 · f11a6d1 · f11a6d1
2 parents 49d2e83 + 7e2727c
commit f11a6d1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
@@ -202,15 +202,20 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     //  Timeline ---
     const timeline = useConst(() => new WUTimelineNoFetch()
         .maxZoom(Number.MAX_SAFE_INTEGER)
-        .on("click", (row, col, sel) => {
-            setTimelineFilter(sel ? row[7].__hpcc_id : "");
-            if (sel) {
-                setSelectedMetricsSource("scopesTable");
-                pushUrl(`${parentUrl}/${row[7].Id}`);
-            }
-        })
     );
 
+    React.useEffect(() => {
+        timeline
+            .on("click", (row, col, sel) => {
+                setTimelineFilter(sel ? row[7].__hpcc_id : "");
+                if (sel) {
+                    setSelectedMetricsSource("scopesTable");
+                    pushUrl(`${parentUrl}/${row[7].Id}`);
+                }
+            }, true)
+            ;
+    }, [parentUrl, timeline]);
+
     React.useEffect(() => {
         timeline
             .scopes(metrics)
@@ -233,13 +238,18 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         .multiSelect(true)
         .metrics([], options, timelineFilter, scopeFilter)
         .sortable(true)
-        .on("click", debounce((row, col, sel) => {
-            if (sel) {
-                scopesSelectionChanged("scopesTable", scopesTable.selection());
-            }
-        }, 100))
     );
 
+    React.useEffect(() => {
+        scopesTable
+            .on("click", debounce((row, col, sel) => {
+                if (sel) {
+                    scopesSelectionChanged("scopesTable", scopesTable.selection());
+                }
+            }), true)
+            ;
+    }, [scopesSelectionChanged, scopesTable]);
+
     React.useEffect(() => {
         scopesTable
             .metrics(metrics, options, timelineFilter, scopeFilter)
@@ -265,13 +275,18 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     const metricGraphWidget = useConst(() => new MetricGraphWidget()
         .zoomToFitLimit(1)
         .selectionGlowColor("DodgerBlue")
-        .on("selectionChanged", () => {
-            const selection = metricGraphWidget.selection().filter(id => metricGraph.item(id)).map(id => metricGraph.item(id).id);
-            setSelectedMetricsSource("metricGraphWidget");
-            pushUrl(`${parentUrl}/${selection.join(",")}`);
-        })
     );
 
+    React.useEffect(() => {
+        metricGraphWidget
+            .on("selectionChanged", () => {
+                const selection = metricGraphWidget.selection().filter(id => metricGraph.item(id)).map(id => metricGraph.item(id).id);
+                setSelectedMetricsSource("metricGraphWidget");
+                pushUrl(`${parentUrl}/${selection.join(",")}`);
+            }, true)
+            ;
+    }, [metricGraph, metricGraphWidget, parentUrl]);
+
     React.useEffect(() => {
         metricGraph.load(metrics);
     }, [metrics, metricGraph]);

diff --git a/esp/src/src-react/components/MetricsSQL.tsx b/esp/src/src-react/components/MetricsSQL.tsx
@@ -54,13 +54,18 @@ export const MetricsSQL: React.FunctionComponent<MetricsDataProps> = ({
         .multiSelect(true)
         .sortable(true)
         .noDataMessage(nlsHPCC.loadingMessage)
-        .on("click", debounce((row, col, sel) => {
-            if (sel) {
-                onSelectionChanged(scopesTable.selection());
-            }
-        }, 100))
     );
 
+    React.useEffect(() => {
+        scopesTable
+            .on("click", debounce((row, col, sel) => {
+                if (sel) {
+                    onSelectionChanged(scopesTable.selection());
+                }
+            }, 100), true)
+            ;
+    }, [onSelectionChanged, scopesTable]);
+
     React.useEffect(() => {
         if (columns.length === 0 && data.length === 0 && sqlError) {
             scopesTable

diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -206,7 +206,7 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
                         <Shimmer />
                     </>
                 }>
-                    <Metrics wuid={wuid} selection={state?.metrics} />
+                    <Metrics wuid={wuid} parentUrl={`${parentUrl}/${wuid}/metrics`} selection={state?.metrics} />
                 </React.Suspense>
             </DelayLoadedPanel>
             <DelayLoadedPanel visible={tab === "workflows"} size={size}>