Merge pull request #18569 from GordonSmith/HPCC-31533-SYNC_COLS_PROPS

HPCC-31533 Sort metric properties to match scopes columns
hpcc-systems · Apr 26, 2024 · b4e6a79 · b4e6a79
2 parents d795c1f + 998c7a8
commit b4e6a79
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
@@ -637,7 +637,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                         />
                     </DockPanelItem>
                     <DockPanelItem key="propsTable" title={nlsHPCC.Properties} location="split-bottom" relativeTo="scopesTable" >
-                        <MetricsPropertiesTables scopes={selectedMetrics}></MetricsPropertiesTables>
+                        <MetricsPropertiesTables scopesTableColumns={scopesTable.columns()} scopes={selectedMetrics}></MetricsPropertiesTables>
                     </DockPanelItem>
                     <DockPanelItem key="propsTable2" title={nlsHPCC.CrossTab} location="tab-after" relativeTo="propsTable" >
                         <AutosizeHpccJSComponent widget={propsTable2}></AutosizeHpccJSComponent>

diff --git a/esp/src/src-react/components/MetricsPropertiesTables.tsx b/esp/src/src-react/components/MetricsPropertiesTables.tsx
@@ -6,13 +6,19 @@ import nlsHPCC from "src/nlsHPCC";
 import { AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
 
 interface MetricsPropertiesTablesProps {
+    scopesTableColumns?: string[];
     scopes?: IScope[];
 }
 
 export const MetricsPropertiesTables: React.FunctionComponent<MetricsPropertiesTablesProps> = ({
+    scopesTableColumns = [],
     scopes = []
 }) => {
 
+    const sortByColumns = React.useMemo(() => {
+        return ["id", "type", "name", ...scopesTableColumns];
+    }, [scopesTableColumns]);
+
     //  Props Table  ---
     const propsTable = useConst(() => new Table()
         .columns([nlsHPCC.Property, nlsHPCC.Value, "Avg", "Min", "Max", "Delta", "StdDev", "SkewMin", "SkewMax", "NodeMin", "NodeMax"])
@@ -22,19 +28,34 @@ export const MetricsPropertiesTables: React.FunctionComponent<MetricsPropertiesT
     React.useEffect(() => {
         const props = [];
         scopes.forEach((item, idx) => {
+            const scopeProps = [];
             for (const key in item.__groupedProps) {
                 const row = item.__groupedProps[key];
-                props.push([row.Key, row.Value, row.Avg, row.Min, row.Max, row.Delta, row.StdDev, row.SkewMin, row.SkewMax, row.NodeMin, row.NodeMax]);
+                scopeProps.push([row.Key, row.Value, row.Avg, row.Min, row.Max, row.Delta, row.StdDev, row.SkewMin, row.SkewMax, row.NodeMin, row.NodeMax]);
             }
+            scopeProps.sort((l, r) => {
+                const lIdx = sortByColumns.indexOf(l[0]);
+                const rIdx = sortByColumns.indexOf(r[0]);
+                if (lIdx >= 0 && rIdx >= 0) {
+                    return lIdx <= rIdx ? -1 : 1;
+                } else if (lIdx >= 0) {
+                    return -1;
+                } else if (rIdx >= 0) {
+                    return 1;
+                }
+                return 0;
+            });
             if (idx < scopes.length - 1) {
-                props.push(["------------------------------", "------------------------------"]);
+                scopeProps.push(["------------------------------", "------------------------------"]);
             }
+            props.push(...scopeProps);
         });
+
         propsTable
             ?.data(props)
             ?.lazyRender()
             ;
-    }, [propsTable, scopes]);
+    }, [propsTable, scopes, sortByColumns]);
 
     return <AutosizeHpccJSComponent widget={propsTable}></AutosizeHpccJSComponent>;
 };