@dexteel/mesf-core 7.22.0 → 7.22.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.22.0"
+  ".": "7.22.1"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [7.22.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.22.0...@dexteel/mesf-core-v7.22.1) (2026-05-11)
+
+
+### Bug Fixes
+
+* **logs:** improve large log filtering performance ([80eaa0a](https://github.com/dexteel/mesf-core-frontend/commit/80eaa0a0f0535e0e3f67397d85b97efaa7b8659b))
+
 ## [7.22.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.21.0...@dexteel/mesf-core-v7.22.0) (2026-05-09)
 
 

package/dist/configuration/pages/log/components/LogsTable/customHooks/useLogTableData.d.ts

@@ -1,4 +1,4 @@
 import { ColDef } from "ag-grid-community";
-export declare const useLogTableData: () => {
+export declare const useLogTableData: (timezone: "UTC" | "Server") => {
     columnDefs: ColDef<any, any>[];
 };

package/dist/index.esm.js

@@ -7853,14 +7853,14 @@ const TagFilter = ({ tagFilters, setTagFilters, filterContext, }) => {
         startDate: filterContext.startDate,
         endDate: filterContext.endDate,
         logTypeCode: filterContext.logTypeCode,
-        tagFilters,
+        tagFilters: filterContext.tagFilters,
     });
     const { data: tagValues, isLoading: isLoadingValues, error: valuesError, isError: isValuesError, } = useSearchLogTagValues({
         tagName: selectedTag ? selectedTag.TagName : "",
         startDate: filterContext.startDate,
         endDate: filterContext.endDate,
         logTypeCode: filterContext.logTypeCode,
-        tagFilters,
+        tagFilters: filterContext.tagFilters,
     });
     const handleOpenPopover = (event) => {
         setAnchorEl(event.currentTarget);
@@ -8056,17 +8056,24 @@ const SearchFilter = ({ search, setSearch }) => {
             }, label: "Search", variant: "outlined", size: "small", value: search, onChange: (e) => setSearch(e.target.value), autoComplete: "off" })));
 };
 
-const useLogTableData = () => {
+const useLogTableData = (timezone) => {
     const backgroundColor = (logTypeCode) => {
         return get(LOG_TYPE_CODES, `${logTypeCode[0]}.color`, "#BBBBBB");
     };
-    const [columnDefs] = useState([
+    const columnDefs = useMemo(() => [
         {
             field: "Timestamp",
             headerName: "Time",
             minWidth: 220,
             flex: 1,
             headerClass: "ag-header-cell-centered",
+            valueFormatter: ({ value }) => {
+                if (!value)
+                    return "";
+                return timezone === "UTC"
+                    ? moment$g(value).utc().format("YYYY-MM-DD HH:mm:ss z")
+                    : dxtToLocalServerTime(value, "yyyy-MM-dd HH:mm:ss z");
+            },
         },
         {
             field: "Source",
@@ -8126,7 +8133,7 @@ const useLogTableData = () => {
             valueFormatter: ({ value }) => value || " ",
             headerClass: "ag-header-cell-centered",
         },
-    ]);
+    ], [timezone]);
     return { columnDefs };
 };
 
@@ -8148,7 +8155,7 @@ const getLogs = (params, signal) => __awaiter(void 0, void 0, void 0, function*
         },
         { name: "TagFilters", value: tagFiltersJson },
     ];
-    const resp = yield apiService.callV2("[MES].[GetLogs]", parameters);
+    const resp = yield apiService.callV2("[MES].[GetLogs]", parameters, signal);
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
         rows = rows.map((log) => (Object.assign(Object.assign({}, log), { Timestamp: log.Timestamp ? moment$g.utc(log["Timestamp"]).toDate() : null })));
@@ -8271,48 +8278,55 @@ const useSearchLogs = ({ startDate, endDate, logTypeCode, autoRefresh, tagFilter
             endDate,
             logTypeCode,
             tagFilters,
-        }),
+        }, signal),
         refetchInterval: autoRefresh ? 5000 : false,
         enabled: !!startDate && (!!endDate || autoRefresh),
+        keepPreviousData: true,
         staleTime: 10000,
     });
 };
 const getLogTypeByCodeId = (logTypeCodeId) => {
     return get(LOG_TYPE_CODES, `${logTypeCodeId}.description`, " -");
 };
+const getDefaultFilters = () => ({
+    startDate: moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+    endDate: moment$g().hour(23).minute(59).second(59).toDate(),
+    logTypeCode: ["I", "W", "E"],
+    autoRefresh: false,
+    tagFilters: [],
+});
+const copyFilters = (filters) => (Object.assign(Object.assign({}, filters), { logTypeCode: [...filters.logTypeCode], tagFilters: [...filters.tagFilters] }));
 const TableLogs = () => {
-    const [startDate, setStartDate] = useState(moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate());
-    const [endDate, setEndDate] = useState(moment$g().hour(23).minute(59).second(59).toDate());
+    var _a;
+    const [draftFilters, setDraftFilters] = useState(() => getDefaultFilters());
+    const [appliedFilters, setAppliedFilters] = useState(() => getDefaultFilters());
+    const [isApplyingFilters, setIsApplyingFilters] = useState(false);
+    const hasMountedRef = useRef(false);
     const [timezone, setTimezone] = useState("UTC");
     const [search, setSearch] = useState("");
-    const [logTypeCode, setLogTypeCode] = useState(["I", "W", "E"]);
-    const [autoRefresh, setAutoRefresh] = useState(false);
-    const [tagFilters, setTagFilters] = useState([]);
     const [gridAPI, setGridAPI] = useState(null);
     const [error, setError] = useState("");
     const [showLogModal, setShowLogModal] = useState(false);
     const [selectedLog, setSelectedLog] = useState(undefined);
-    const { data: rows, isLoading, refetch, isError, error: e, } = useSearchLogs({
-        startDate,
-        endDate,
-        logTypeCode: logTypeCode.join(","),
-        autoRefresh,
-        tagFilters,
+    const { data: rows, isLoading, isFetching, isError, error: e, } = useSearchLogs({
+        startDate: appliedFilters.startDate,
+        endDate: appliedFilters.endDate,
+        logTypeCode: appliedFilters.logTypeCode.join(","),
+        autoRefresh: appliedFilters.autoRefresh,
+        tagFilters: appliedFilters.tagFilters,
     });
     const onGridReady = (params) => {
         setGridAPI(params.api);
     };
-    const formattedRows = rows === null || rows === void 0 ? void 0 : rows.map(({ LogId, Timestamp, Source, Message, LogTypeCode, User }) => ({
+    const formattedRows = useMemo(() => rows === null || rows === void 0 ? void 0 : rows.map(({ LogId, Timestamp, Source, Message, LogTypeCode, User }) => ({
         id: LogId,
-        Timestamp: timezone === "UTC"
-            ? moment$g(Timestamp).utc().format("YYYY-MM-DD HH:mm:ss z")
-            : dxtToLocalServerTime(Timestamp, "yyyy-MM-dd HH:mm:ss z"),
+        Timestamp,
         Source,
         Message: isNil(Message) ? "" : Message.replaceAll("Added", " Added"),
         LogTypeCode: getLogTypeByCodeId(LogTypeCode),
         User,
-    }));
-    const { columnDefs } = useLogTableData();
+    })), [rows]);
+    const { columnDefs } = useLogTableData(timezone);
     const defaultColDef = useMemo(() => {
         return {
             sortable: true,
@@ -8328,16 +8342,17 @@ const TableLogs = () => {
         };
     }, []);
     const { showContextMenu, registerConfig } = useContextMenuMESF();
+    const handleAutoRefreshChange = (checked) => {
+        const nextFilters = checked
+            ? Object.assign(Object.assign({}, draftFilters), { startDate: moment$g().add(-15, "minutes").toDate(), endDate: null, autoRefresh: true }) : Object.assign(Object.assign({}, draftFilters), { endDate: moment$g().hour(23).minute(59).second(59).toDate(), autoRefresh: false });
+        setDraftFilters(copyFilters(nextFilters));
+    };
     const handleResetButtonClick = () => {
-        setStartDate(moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate());
-        setEndDate(moment$g().hour(23).minute(59).second(59).toDate());
+        const filters = getDefaultFilters();
+        setDraftFilters(copyFilters(filters));
         setSearch("");
-        gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
-        setLogTypeCode(["I", "W", "E"]);
-        setTagFilters([]);
         setSelectedLog(undefined);
         setError("");
-        refetch();
     };
     const rowClicked = (rowClickedEvent) => {
         let data = rowClickedEvent.data;
@@ -8360,11 +8375,11 @@ const TableLogs = () => {
         handleResetButtonClick,
     });
     const filterContext = useMemo(() => ({
-        startDate,
-        endDate,
-        logTypeCode: logTypeCode.join(","),
-        tagFilters,
-    }), [startDate, endDate, logTypeCode, tagFilters]);
+        startDate: appliedFilters.startDate,
+        endDate: appliedFilters.endDate,
+        logTypeCode: appliedFilters.logTypeCode.join(","),
+        tagFilters: appliedFilters.tagFilters,
+    }), [appliedFilters]);
     useEffect(() => {
         registerConfig({
             id: "TableLogs",
@@ -8376,6 +8391,24 @@ const TableLogs = () => {
             setError(e.message);
         }
     }, [isError, e]);
+    useEffect(() => {
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return;
+        }
+        setIsApplyingFilters(true);
+        const timeout = window.setTimeout(() => {
+            setAppliedFilters(copyFilters(draftFilters));
+            setIsApplyingFilters(false);
+        }, 100);
+        return () => window.clearTimeout(timeout);
+    }, [draftFilters]);
+    useEffect(() => {
+        const timeout = window.setTimeout(() => {
+            gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", search);
+        }, 350);
+        return () => window.clearTimeout(timeout);
+    }, [gridAPI, search]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Grid2, { container: true, justifyContent: "flex-start", p: 1, spacing: 1 },
             React.createElement(Grid2, { size: { md: 12, xs: 12 } },
@@ -8402,43 +8435,32 @@ const TableLogs = () => {
                         React.createElement(CardContent, { sx: { width: "100%" } },
                             React.createElement(Grid2, { container: true, alignItems: "center", direction: "row", spacing: 2 },
                                 React.createElement(Grid2, { size: { md: 1.5 } },
-                                    React.createElement(DateFilter, { label: "From", date: startDate, setDate: (date) => setStartDate(date || new Date()), maxDate: endDate !== null && endDate !== void 0 ? endDate : undefined })),
+                                    React.createElement(DateFilter, { label: "From", date: draftFilters.startDate, setDate: (date) => setDraftFilters(Object.assign(Object.assign({}, draftFilters), { startDate: date || new Date() })), maxDate: (_a = draftFilters.endDate) !== null && _a !== void 0 ? _a : undefined })),
                                 React.createElement(Grid2, { size: { md: 1.5 } },
-                                    React.createElement(DateFilter, { label: "To", date: endDate, setDate: (date) => {
+                                    React.createElement(DateFilter, { label: "To", date: draftFilters.endDate, setDate: (date) => {
                                             if (date) {
-                                                setEndDate(date);
-                                                setAutoRefresh(false);
+                                                setDraftFilters(Object.assign(Object.assign({}, draftFilters), { endDate: date, autoRefresh: false }));
                                             }
-                                        }, minDate: startDate })),
+                                        }, minDate: draftFilters.startDate })),
                                 React.createElement(Grid2, { size: { md: 2, xs: 12 } },
-                                    React.createElement(CodeFilter, { LogTypeCode: logTypeCode, setLogTypeCodeFilter: (logTypeCodes) => setLogTypeCode(logTypeCodes) })),
+                                    React.createElement(CodeFilter, { LogTypeCode: draftFilters.logTypeCode, setLogTypeCodeFilter: (logTypeCodes) => setDraftFilters(Object.assign(Object.assign({}, draftFilters), { logTypeCode: logTypeCodes })) })),
                                 React.createElement(Grid2, { size: { md: 1, xs: 12 } },
                                     React.createElement(TimezoneSelector, { value: timezone, onChange: setTimezone })),
                                 React.createElement(Grid2, { size: { md: 1.5, xs: 12 } },
-                                    React.createElement(FormControlLabel, { checked: autoRefresh, control: React.createElement(Switch, { color: "primary" }), label: "Auto Refresh", onChange: (e, checked) => {
-                                            if (checked) {
-                                                setEndDate(null);
-                                            }
-                                            else {
-                                                setEndDate(moment$g().hour(23).minute(59).second(59).toDate());
-                                            }
-                                            setAutoRefresh(checked);
-                                        } })),
+                                    React.createElement(FormControlLabel, { checked: draftFilters.autoRefresh, control: React.createElement(Switch, { color: "primary" }), label: "Auto Refresh", onChange: (e, checked) => handleAutoRefreshChange(checked) })),
                                 React.createElement(Grid2, { size: { md: 3.5, xs: 12 } },
-                                    React.createElement(SearchFilter, { search: search, setSearch: (search) => {
-                                            setSearch(search);
-                                            gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", search);
-                                        } })),
+                                    React.createElement(SearchFilter, { search: search, setSearch: setSearch })),
                                 React.createElement(Grid2, { size: { md: 1, xs: 12 }, style: { paddingTop: 8 } },
                                     React.createElement(Button, { variant: "contained", color: "inherit", onClick: handleResetButtonClick, fullWidth: true }, "Reset")),
                                 React.createElement(Grid2, { size: { md: 12, xs: 12 }, sx: { mt: 1 } },
-                                    React.createElement(TagFilter, { tagFilters: tagFilters, setTagFilters: setTagFilters, filterContext: filterContext })))))),
+                                    React.createElement(TagFilter, { tagFilters: draftFilters.tagFilters, setTagFilters: (tagFilters) => setDraftFilters(Object.assign(Object.assign({}, draftFilters), { tagFilters })), filterContext: filterContext })))))),
                 React.createElement(Grid2, { size: { md: 12, xs: 12 }, style: {
                         height: "70vh",
                     } },
                     React.createElement(Paper, { style: { height: "100%", width: "100%" } },
-                        React.createElement(AgGridReact, { loading: isLoading, gridOptions: {
+                        React.createElement(AgGridReact, { loading: isLoading || isApplyingFilters || isFetching, gridOptions: {
                                 theme: themeDXT,
+                                cacheQuickFilter: true,
                             }, rowData: formattedRows, columnDefs: columnDefs, defaultColDef: defaultColDef, onGridReady: onGridReady, getRowId: (params) => params.data.id, rowHeight: 34, headerHeight: 40, animateRows: true, loadingOverlayComponent: CenteredLazyLoading, getContextMenuItems: (e) => getContextMenuItems(e), rowSelection: "single", onRowDoubleClicked: (e) => {
                                 rowClicked(e);
                             } })))),