From dc51c83e78bc363e93afd5ec5dca9d092063e0b8 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:27:09 -0500
Subject: [PATCH] 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>
---
 esp/src/src-react/components/LogViewer.tsx | 13 ++++++++-----
 esp/src/src-react/routes.tsx               |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/esp/src/src-react/components/LogViewer.tsx b/esp/src/src-react/components/LogViewer.tsx
index 4f5e5cdcf41..cdb736a787e 100644
--- 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,11 +41,10 @@ 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 };
@@ -48,7 +52,7 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
                 },
                 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
index e73d78d9823..30515917107 100644
--- 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
     {