Merge pull request #19173 from jeclrsg/hpcc-32747-log-grids-no-paging

HPCC-32747 ECL Watch v9 Log grids no pagination
hpcc-systems · Oct 3, 2024 · a22fd9c · a22fd9c
2 parents 2c551a4 + 00d177a
commit a22fd9c
Showing 1 changed file with 57 additions and 49 deletions.
diff --git a/esp/src/src-react/components/Logs.tsx b/esp/src/src-react/components/Logs.tsx
@@ -1,18 +1,20 @@
 import * as React from "react";
 import { CommandBar, ContextualMenuItemType, ICommandBarItemProps } from "@fluentui/react";
-import { useConst } from "@fluentui/react-hooks";
-import { GetLogsExRequest, TargetAudience, LogType } from "@hpcc-js/comms";
-import { Level } from "@hpcc-js/util";
-import { CreateLogsQueryStore } from "src/ESPLog";
+import { GetLogsExRequest, LogaccessService, TargetAudience, LogType } from "@hpcc-js/comms";
+import { Level, scopedLogger } from "@hpcc-js/util";
 import nlsHPCC from "src/nlsHPCC";
 import { logColor, wuidToDate, wuidToTime } from "src/Utility";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { pushParams } from "../util/history";
-import { FluentPagedGrid, FluentPagedFooter, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
+import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { Filter } from "./forms/Filter";
 import { Fields } from "./forms/Fields";
 import { ShortVerticalDivider } from "./Common";
 
+export const service = new LogaccessService({ baseUrl: "" });
+
+const logger = scopedLogger("src-react/components/Logs.tsx");
+
 const eightHours = 8 * 60 * 60 * 1000;
 const startTimeOffset = 1 * 60 * 60 * 1000;
 const endTimeOffset = 23 * 60 * 60 * 1000;
@@ -42,6 +44,14 @@ const FilterFields: Fields = {
     processid: { type: "string", label: nlsHPCC.ProcessID },
     threadid: { type: "string", label: nlsHPCC.ThreadID },
     message: { type: "string", label: nlsHPCC.Message },
+    LogLineLimit: {
+        type: "dropdown", label: nlsHPCC.LogLineLimit, options: [
+            { key: 100, text: "100" },
+            { key: 250, text: "250" },
+            { key: 500, text: "500" },
+            { key: 1000, text: "1000" },
+        ]
+    },
     StartDate: { type: "datetime", label: nlsHPCC.FromDate },
     EndDate: { type: "datetime", label: nlsHPCC.ToDate },
 };
@@ -91,17 +101,37 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
 
     const hasFilter = React.useMemo(() => Object.keys(filter).length > 0, [filter]);
     const [showFilter, setShowFilter] = React.useState(false);
+    const [data, setData] = React.useState<any[]>([]);
     const {
         selection, setSelection,
-        pageNum, setPageNum,
-        pageSize, setPageSize,
-        total, setTotal,
+        setTotal,
         refreshTable } = useFluentStoreState({ page });
 
     const now = React.useMemo(() => new Date(), []);
 
     //  Grid ---
-    const gridStore = useConst(() => CreateLogsQueryStore());
+    const columns = React.useMemo((): FluentColumns => {
+        return {
+            timestamp: { label: nlsHPCC.TimeStamp, width: 140, sortable: false, },
+            message: { label: nlsHPCC.Message, width: 600, sortable: false, },
+            components: { label: nlsHPCC.ContainerName, width: 150, sortable: false },
+            audience: { label: nlsHPCC.Audience, width: 60, sortable: false, },
+            class: {
+                label: nlsHPCC.Class, width: 40, sortable: false,
+                formatter: level => {
+                    const colors = logColor(levelMap(level));
+                    const styles = { backgroundColor: colors.background, padding: "2px 6px", color: colors.foreground };
+                    return <span style={styles}>{level}</span>;
+                }
+            },
+            workunits: { label: nlsHPCC.JobID, width: 50, sortable: false, hidden: wuid !== undefined, },
+            processid: { label: nlsHPCC.ProcessID, width: 75, sortable: false, },
+            logid: { label: nlsHPCC.Sequence, width: 70, sortable: false, },
+            threadid: { label: nlsHPCC.ThreadID, width: 60, sortable: false, },
+        };
+    }, [wuid]);
+
+    const copyButtons = useCopyButtons(columns, selection, "logaccess");
 
     const query = React.useMemo(() => {
         if (wuid !== undefined) {
@@ -119,41 +149,27 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
                 //assign a reasonable default start date if one isn't set
                 filter.StartDate = new Date(now.getTime() - eightHours);
             }
+            if (typeof filter.EndDate === "string") {
+                filter.EndDate = new Date(filter.EndDate + ":00Z");
+            }
             if (!filter.EndDate) {
                 filter.EndDate = new Date(now.getTime() + endTimeOffset);
             }
         }
         return formatQuery(filter);
     }, [filter, now, wuid]);
 
-    const columns = React.useMemo((): FluentColumns => {
-        return {
-            timestamp: { label: nlsHPCC.TimeStamp, width: 140, sortable: false, },
-            message: { label: nlsHPCC.Message, sortable: false, },
-            components: { label: nlsHPCC.ContainerName, width: 150, sortable: false },
-            audience: { label: nlsHPCC.Audience, width: 60, sortable: false, },
-            class: {
-                label: nlsHPCC.Class, width: 40, sortable: false,
-                formatter: level => {
-                    const colors = logColor(levelMap(level));
-                    const styles = { backgroundColor: colors.background, padding: "2px 6px", color: colors.foreground };
-                    return <span style={styles}>{level}</span>;
-                }
-            },
-            workunits: { label: nlsHPCC.JobID, width: 50, sortable: false, hidden: wuid !== undefined, },
-            processid: { label: nlsHPCC.ProcessID, width: 75, sortable: false, },
-            logid: { label: nlsHPCC.Sequence, width: 70, sortable: false, },
-            threadid: { label: nlsHPCC.ThreadID, width: 60, sortable: false, },
-        };
-    }, [wuid]);
-
-    const copyButtons = useCopyButtons(columns, selection, "logaccess");
+    const refreshData = React.useCallback(() => {
+        service.GetLogsEx(query as any).then(response => {
+            setData(response.lines);
+        }).catch(err => logger.error(err));
+    }, [query]);
 
     //  Command Bar  ---
     const buttons = React.useMemo((): ICommandBarItemProps[] => [
         {
             key: "refresh", text: nlsHPCC.Refresh, iconProps: { iconName: "Refresh" },
-            onClick: () => refreshTable.call()
+            onClick: () => refreshData()
         },
         { key: "divider_1", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
         {
@@ -162,7 +178,11 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
                 setShowFilter(true);
             }
         },
-    ], [hasFilter, refreshTable]);
+    ], [hasFilter, refreshData]);
+
+    React.useEffect(() => {
+        refreshData();
+    }, [refreshData]);
 
     //  Filter  ---
     const filterFields: Fields = React.useMemo(() => {
@@ -181,12 +201,9 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
             <div style={{ position: "relative", height: "100%" }}>
-                <FluentPagedGrid
-                    store={gridStore}
-                    query={query}
-                    pageNum={pageNum}
-                    pageSize={pageSize}
-                    total={total}
+                <FluentGrid
+                    data={data}
+                    primaryID={""}
                     columns={columns}
                     setSelection={setSelection}
                     setTotal={(total) => {
@@ -196,18 +213,9 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
                         }
                     }}
                     refresh={refreshTable}
-                ></FluentPagedGrid>
+                ></FluentGrid>
                 <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
             </div>
         }
-        footer={<FluentPagedFooter
-            persistID={"cloudlogs"}
-            pageNum={pageNum}
-            selectionCount={selection.length}
-            setPageNum={setPageNum}
-            setPageSize={setPageSize}
-            total={total}
-        ></FluentPagedFooter>}
-        footerStyles={{}}
     />;
 };