HPCC-32424 ECL Watch v9 Source Files default sorting

changes the default sorting of files listed on the Source Files tab of the Workunit Details page, such that subfiles immediately follow their respective superfiles Signed-off-by: Jeremy Clements <[email protected]>
hpcc-systems · Aug 20, 2024 · 17785c9 · 17785c9
1 parent 44f7563
commit 17785c9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/esp/src/src-react/components/SourceFiles.tsx b/esp/src/src-react/components/SourceFiles.tsx
@@ -25,7 +25,7 @@ interface SourceFilesProps {
 }
 
 const emptyFilter: { [id: string]: any } = {};
-const defaultSort = { attribute: "Name", descending: false };
+const defaultSort = { attribute: undefined, descending: false };
 
 export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
     wuid,
@@ -52,7 +52,7 @@ export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
                 selectorType: "checkbox"
             },
             Name: {
-                label: "Name", sortable: true,
+                label: "Name", width: 400, sortable: true,
                 formatter: (Name, row) => {
                     let fileUrl = `#/files/${Name}`;
                     if (row?.FileCluster) {
@@ -65,11 +65,8 @@ export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
                     </>;
                 }
             },
-            FileCluster: { label: nlsHPCC.FileCluster, width: 300, sortable: false },
-            Count: {
-                label: nlsHPCC.Usage, width: 72, sortable: true,
-                justify: "right"
-            }
+            FileCluster: { label: nlsHPCC.FileCluster, width: 200, sortable: false },
+            Count: { label: nlsHPCC.Usage, width: 72, sortable: true, justify: "right" }
         };
     }, []);
 

diff --git a/esp/src/src-react/hooks/workunit.ts b/esp/src/src-react/hooks/workunit.ts
@@ -132,6 +132,29 @@ export function useWorkunitSourceFiles(wuid: string): [SourceFile[], Workunit, W
     const [sourceFiles, setSourceFiles] = React.useState<SourceFile[]>([]);
     const [count, inc] = useCounter();
 
+    // sorts the WU source files alphabetically by parent name, then name
+    // with children immediately following parents
+    const sortFiles = React.useCallback(files => {
+        const sortedFiles = [];
+        const parents = files.filter(item => item.__hpcc_parentName === "");
+        const children = files.filter(item => item.__hpcc_parentName !== "");
+
+        parents.sort((a, b) => a.Name.localeCompare(b.Name));
+        children.sort((a, b) => {
+            const indexA = parents.findIndex(parent => parent.Name === a.__hpcc_parentName);
+            const indexB = parents.findIndex(parent => parent.Name === b.__hpcc_parentName);
+            return indexA - indexB;
+        });
+
+        parents.forEach(parent => {
+            sortedFiles.push(parent);
+            const relatedChildren = children.filter(child => child.__hpcc_parentName === parent.Name);
+            sortedFiles.push(...relatedChildren);
+        });
+
+        return sortedFiles;
+    }, []);
+
     React.useEffect(() => {
         if (workunit) {
             const fetchInfo = singletonDebounce(workunit, "fetchInfo");
@@ -151,10 +174,10 @@ export function useWorkunitSourceFiles(wuid: string): [SourceFile[], Workunit, W
                         });
                     });
                 });
-                setSourceFiles(sourceFiles);
+                setSourceFiles(sortFiles(sourceFiles));
             }).catch(err => logger.error(err));
         }
-    }, [workunit, state, count]);
+    }, [count, sortFiles, state, workunit]);
 
     return [sourceFiles, workunit, state, inc];
 }