HPCC-28947 ECL Watch v9 make UI log viewer sortable

makes ECL Watch v9's global "Error/Warning(s)" list sortable, and sets the default to the "Time" column (newest first) Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
hpcc-systems · Nov 7, 2024 · dc51c83 · dc51c83
1 parent 0594b5f
commit dc51c83
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/esp/src/src-react/components/LogViewer.tsx b/esp/src/src-react/components/LogViewer.tsx
@@ -3,14 +3,19 @@ import { Checkbox, CommandBar, ICommandBarItemProps } from "@fluentui/react";
 import { Level } from "@hpcc-js/util";
 import { logColor } from "src/Utility";
 import nlsHPCC from "src/nlsHPCC";
+import { QuerySortItem } from "src/store/Store";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { useECLWatchLogger } from "../hooks/logging";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 
 interface LogViewerProps {
+    sort?: QuerySortItem;
 }
 
+export const defaultSort = { attribute: "dateTime", descending: true };
+
 export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
+    sort = defaultSort
 }) => {
 
     const [errorChecked, setErrorChecked] = React.useState(true);
@@ -36,19 +41,18 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
     //  Grid ---
     const columns = React.useMemo((): FluentColumns => {
         return {
-            dateTime: { label: nlsHPCC.Time, width: 160, sortable: false },
+            dateTime: { label: nlsHPCC.Time, width: 160, },
             level: {
                 label: nlsHPCC.Severity,
                 width: 112,
-                sortable: false,
                 formatter: level => {
                     const colors = logColor(level);
                     const styles = { backgroundColor: colors.background, padding: "2px 6px", color: colors.foreground };
                     return <span style={styles}>{Level[level].toUpperCase()}</span>;
                 },
                 csvFormatter: level => Level[level].toUpperCase()
             },
-            id: { label: nlsHPCC.Source, width: 212, sortable: false },
+            id: { label: nlsHPCC.Source, width: 212 },
             message: { label: nlsHPCC.Message, width: 720, sortable: false }
         };
     }, []);
@@ -92,8 +96,6 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
                 return false;
             }
             return true;
-        }).sort((l, r) => {
-            return l.level - r.level;
         });
         setData(filteredExceptions);
         setFilterCounts(filterCounts);
@@ -105,6 +107,7 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
             <FluentGrid
                 data={data}
                 primaryID={"dateTime"}
+                sort={sort}
                 columns={columns}
                 setSelection={setSelection}
                 setTotal={setTotal}

diff --git a/esp/src/src-react/routes.tsx b/esp/src/src-react/routes.tsx
@@ -537,7 +537,7 @@ export const routes: RoutesEx = [
     },
     {
         mainNav: [],
-        path: "/log", action: () => import("./components/LogViewer").then(_ => <_.LogViewer />)
+        path: "/log", action: (ctx) => import("./components/LogViewer").then(_ => <_.LogViewer sort={parseSort(ctx.search)} />)
     },
     //  Other
     {