quidproquo-web-admin 0.0.252 → 0.0.254

package/lib/commonjs/LogViewer/AdminLogs/AdminLogSearchBar/AdminLogSearchBar.d.ts

@@ -1,7 +1,4 @@
-import { LogLogSearchParams } from '../hooks/types';
 export interface AdminLogSearchBarProps {
-    searchParams: LogLogSearchParams;
-    setLogLogSearchParams: (setter: (searchParams: LogLogSearchParams) => LogLogSearchParams) => void;
     onSearch: () => Promise<any>;
 }
-export declare function AdminLogSearchBar({ searchParams, setLogLogSearchParams, onSearch }: AdminLogSearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminLogSearchBar({ onSearch }: AdminLogSearchBarProps): import("react/jsx-runtime").JSX.Element;

package/lib/commonjs/LogViewer/AdminLogs/AdminLogSearchBar/AdminLogSearchBar.js

@@ -19,50 +19,30 @@ const system_1 = require("@mui/system");
 const x_date_pickers_1 = require("@mui/x-date-pickers");
 const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
 const components_1 = require("../../../components");
+const queryParams_1 = require("../../../queryParams");
 const hooks_1 = require("../../hooks");
-function AdminLogSearchBar({ searchParams, setLogLogSearchParams, onSearch }) {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+function AdminLogSearchBar({ onSearch }) {
     const serviceOptions = (0, hooks_1.useServiceNames)();
-    const handleRuntimeTypeChange = (event) => {
-        setLogLogSearchParams((prevLogLogSearchParams) => (Object.assign(Object.assign({}, prevLogLogSearchParams), { logLevelLookup: event.target.value })));
-    };
-    const handleStartDateChange = (value) => {
-        if (value) {
-            setLogLogSearchParams((prevLogLogSearchParams) => (Object.assign(Object.assign({}, prevLogLogSearchParams), { startIsoDateTime: value.toISOString() })));
-        }
-    };
-    const handleEndDateChange = (value) => {
-        if (value) {
-            setLogLogSearchParams((prevLogLogSearchParams) => (Object.assign(Object.assign({}, prevLogLogSearchParams), { endIsoDateTime: value.toISOString() })));
-        }
-    };
-    const handleReasonFilterChange = (event) => {
-        setLogLogSearchParams((prev) => (Object.assign(Object.assign({}, prev), { reasonFilter: event.target.value })));
-    };
-    const handleQuickTimeSelect = (minutes) => {
-        const now = new Date();
-        const startDate = new Date(now.getTime() - minutes * 60000);
-        const endDate = new Date(now.getTime() + 7 * 24 * 60 * 60000);
-        setLogLogSearchParams((prevLogLogSearchParams) => (Object.assign(Object.assign({}, prevLogLogSearchParams), { startIsoDateTime: startDate.toISOString(), endIsoDateTime: endDate.toISOString() })));
-        setAnchorEl(null);
-    };
+    const { service, handleServiceOnChange, startDate, handleStartDateChange, endDate, handleEndDateChange, msg, handleMsgOnChange, updateStartAndEndTimeSpan, logLevel, handleLogLevelOnChange, } = (0, queryParams_1.useUrlFields)();
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const handleQuickTimeClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
     const handleQuickTimeClose = () => {
         setAnchorEl(null);
     };
-    const handleServiceChange = (event, value) => {
-        setLogLogSearchParams((prevLogLogSearchParams) => (Object.assign(Object.assign({}, prevLogLogSearchParams), { serviceFilter: value ? value.value : '' })));
+    const handleQuickTimeSelect = (minutes) => {
+        updateStartAndEndTimeSpan(minutes);
+        handleQuickTimeClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns }, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, Object.assign({ container: true, columns: 12, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsxs)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, Object.assign({ id: "runtime-select-label" }, { children: "Runtime Type" })), (0, jsx_runtime_1.jsx)(Select_1.default, Object.assign({ labelId: "runtime-select-label", id: "demo-simple-select", value: searchParams.logLevelLookup, label: "Log Level", onChange: handleRuntimeTypeChange }, { children: quidproquo_core_1.logLevelEnumLookups.map((key) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ value: key }, { children: key }), key))) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { options: serviceOptions, getOptionLabel: (option) => option.label, onChange: handleServiceChange, renderInput: (params) => ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, { label: "Service Name", InputLabelProps: {
+    return ((0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns }, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, Object.assign({ container: true, columns: 12, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsxs)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, Object.assign({ id: "runtime-select-label" }, { children: "Log Level" })), (0, jsx_runtime_1.jsx)(Select_1.default, Object.assign({ labelId: "runtime-select-label", id: "demo-simple-select", value: logLevel, label: "Log Level", onChange: handleLogLevelOnChange }, { children: quidproquo_core_1.logLevelEnumLookups.map((key) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ value: key }, { children: key }), key))) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { getOptionLabel: (option) => option.label, options: serviceOptions, value: serviceOptions.find((o) => o.value === service) || null, onChange: handleServiceOnChange, renderInput: (params) => ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, { label: "Service Name", InputLabelProps: {
                                         shrink: true,
-                                    } }))) }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "Start DateTime", value: new Date(searchParams.startIsoDateTime), onChange: handleStartDateChange }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
+                                    } }))) }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "Start DateTime", value: startDate, onChange: handleStartDateChange }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
                                         position: 'absolute',
                                         right: '-28px',
                                         top: '50%',
                                         transform: 'translateY(-50%)',
-                                    } }, { children: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "End DateTime", value: new Date(searchParams.endIsoDateTime), onChange: handleEndDateChange }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 10 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Message", value: searchParams.reasonFilter, onChange: handleReasonFilterChange, InputLabelProps: {
+                                    } }, { children: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 3 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "End DateTime", value: endDate, onChange: handleEndDateChange }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 10 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Message", value: msg, onChange: handleMsgOnChange, InputLabelProps: {
                                     shrink: true,
                                 } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, Object.assign({ onClick: () => onSearch() }, { children: "Search" })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Menu, Object.assign({ id: "quick-time-menu", anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleQuickTimeClose }, { children: [(0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(5) }, { children: "Last 5 minutes" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(30) }, { children: "Last 30 minutes" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(1 * 60) }, { children: "Last hour" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(3 * 60) }, { children: "Last 3 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(8 * 60) }, { children: "Last 8 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(16 * 60) }, { children: "Last 16 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(24 * 60) }, { children: "Last 24 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(7 * 24 * 60) }, { children: "Last 7 days" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(30 * 24 * 60) }, { children: "Last month" }))] }))] })));
 }

package/lib/commonjs/LogViewer/AdminLogs/AdminLogs.js

@@ -8,8 +8,8 @@ const AdminLogGrid_1 = require("./AdminLogGrid");
 const AdminLogSearchBar_1 = require("./AdminLogSearchBar");
 const hooks_1 = require("./hooks");
 const AdminLogs = () => {
-    const { logLogs, searchParams, setSearchParams, searchProgress, onSearch } = (0, hooks_1.useLogLogSearch)();
+    const { logLogs, searchProgress, onSearch } = (0, hooks_1.useLogLogSearch)();
     const isLoading = (0, view_1.useIsLoading)();
-    return ((0, jsx_runtime_1.jsx)(components_1.TabViewBox, { header: () => (0, jsx_runtime_1.jsx)(AdminLogSearchBar_1.AdminLogSearchBar, { onSearch: onSearch, searchParams: searchParams, setLogLogSearchParams: setSearchParams }), body: () => (0, jsx_runtime_1.jsx)(AdminLogGrid_1.AdminLogGrid, { logs: logLogs, isLoading: isLoading, searchProgress: searchProgress }) }));
+    return ((0, jsx_runtime_1.jsx)(components_1.TabViewBox, { header: () => (0, jsx_runtime_1.jsx)(AdminLogSearchBar_1.AdminLogSearchBar, { onSearch: onSearch }), body: () => (0, jsx_runtime_1.jsx)(AdminLogGrid_1.AdminLogGrid, { logs: logLogs, isLoading: isLoading, searchProgress: searchProgress }) }));
 };
 exports.AdminLogs = AdminLogs;

package/lib/commonjs/LogViewer/AdminLogs/hooks/useLogLogSearch/useLogLogSearch.d.ts

@@ -1,10 +1,6 @@
-/// <reference types="react" />
 import { LogLog } from 'quidproquo-webserver';
-import { LogLogSearchParams } from '../types';
 export declare const useLogLogSearch: () => {
     logLogs: LogLog[];
-    searchParams: LogLogSearchParams;
-    setSearchParams: import("react").Dispatch<import("react").SetStateAction<LogLogSearchParams>>;
     searchProgress: number;
-    onSearch: (newSearchParams?: LogLogSearchParams | undefined) => Promise<any[]>;
+    onSearch: (newSearchParams?: import("../types").LogLogSearchParams | undefined) => Promise<any[]>;
 };

package/lib/commonjs/LogViewer/AdminLogs/hooks/useLogLogSearch/useLogLogSearch.js

@@ -2,28 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogLogSearch = void 0;
 const react_1 = require("react");
+const queryParams_1 = require("../../../../queryParams");
 const useLogLogSearchRequest_1 = require("../useLogLogSearchRequest/useLogLogSearchRequest");
 const useLogLogSearch = () => {
     const [logLogs, setLogLogs] = (0, react_1.useState)([]);
-    const [searchParamsState, setSearchParamsState] = (0, react_1.useState)(() => {
-        const currentDate = new Date();
-        const threeHoursAgo = new Date(currentDate.getTime() - 3 * 60 * 60 * 1000);
-        const isoDateThreeHoursAgo = threeHoursAgo.toISOString();
-        const tomorrow = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
-        const isoDateTomorrow = tomorrow.toISOString();
-        return {
-            logLevelLookup: 'All',
-            startIsoDateTime: isoDateThreeHoursAgo,
-            endIsoDateTime: isoDateTomorrow,
-            reasonFilter: '',
-            serviceFilter: '',
-        };
-    });
-    const [searchProgress, onSearch] = (0, useLogLogSearchRequest_1.useLogLogSearchRequest)(searchParamsState, setLogLogs);
+    const { service, startDate, endDate, msg, logLevel } = (0, queryParams_1.useUrlFields)();
+    const [searchProgress, onSearch] = (0, useLogLogSearchRequest_1.useLogLogSearchRequest)({
+        logLevelLookup: logLevel,
+        startIsoDateTime: startDate.toISOString(),
+        endIsoDateTime: endDate.toISOString(),
+        reasonFilter: msg,
+        serviceFilter: service,
+    }, setLogLogs);
     return {
         logLogs,
-        searchParams: searchParamsState,
-        setSearchParams: setSearchParamsState,
         searchProgress,
         onSearch,
     };

package/lib/commonjs/LogViewer/LogSearch.js

@@ -8,8 +8,8 @@ const hooks_1 = require("./hooks");
 const LogMetadataGrid_1 = require("./LogMetadataGrid");
 const TopSection_1 = require("./TopSection");
 const LogSearch = () => {
-    const { searchParams, setSearchParams, onSearch, logs } = (0, hooks_1.useLogSearch)();
+    const { onSearch, logs } = (0, hooks_1.useLogSearch)();
     const isLoading = (0, view_1.useIsLoading)();
-    return ((0, jsx_runtime_1.jsx)(components_1.TabViewBox, { header: () => (0, jsx_runtime_1.jsx)(TopSection_1.TopSection, { searchParams: searchParams, setSearchParams: setSearchParams, onSearch: onSearch }), body: () => (0, jsx_runtime_1.jsx)(LogMetadataGrid_1.LogMetadataGrid, { logs: logs, isLoading: isLoading }) }));
+    return (0, jsx_runtime_1.jsx)(components_1.TabViewBox, { header: () => (0, jsx_runtime_1.jsx)(TopSection_1.TopSection, { onSearch: onSearch }), body: () => (0, jsx_runtime_1.jsx)(LogMetadataGrid_1.LogMetadataGrid, { logs: logs, isLoading: isLoading }) });
 };
 exports.LogSearch = LogSearch;

package/lib/commonjs/LogViewer/LogSummaryDetails.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogSummaryDetails = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const quidproquo_core_1 = require("quidproquo-core");
 const material_1 = require("@mui/material");
 const AnyVariableView_1 = require("./actionComponents/genericActionRenderer/AnyVariableView");
 const LogSummaryDetails = ({ log }) => {
     const totalRuntime = new Date(log.finishedAt).getTime() - new Date(log.startedAt).getTime();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5", gutterBottom: true }, { children: [log.runtimeType, " - ", log.moduleName] })) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("pre", Object.assign({ style: AnyVariableView_1.genericFunctionRendererStyles.pre }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: AnyVariableView_1.genericFunctionRendererStyles.commentBlock }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "// //////////////////////////////////////////////////////" }), (0, jsx_runtime_1.jsxs)("div", { children: ["// src: ", log.tags.join(', ')] }), log.fromCorrelation && (0, jsx_runtime_1.jsxs)("div", { children: ["// Caller: ", log.fromCorrelation] }), (0, jsx_runtime_1.jsxs)("div", { children: ["// Total Runtime: ", (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: AnyVariableView_1.genericFunctionRendererStyles.highlightComment }, { children: [totalRuntime, " ms"] }))] }), (0, jsx_runtime_1.jsx)("div", { children: "// //////////////////////////////////////////////////////" })] })), (0, jsx_runtime_1.jsx)(AnyVariableView_1.GenericFunctionRenderer, { functionName: log.tags.join('::').split('::').pop() || 'unknown', args: log.input, expanded: true })] })) })] }));
+    const functionKey = log.qpqFunctionRuntimeInfo ? (0, quidproquo_core_1.getUniqueKeyFromQpqFunctionRuntime)(log.qpqFunctionRuntimeInfo) : 'unknownMahLord';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5", gutterBottom: true }, { children: [log.runtimeType, " - ", log.moduleName] })) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("pre", Object.assign({ style: AnyVariableView_1.genericFunctionRendererStyles.pre }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: AnyVariableView_1.genericFunctionRendererStyles.commentBlock }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "// //////////////////////////////////////////////////////" }), (0, jsx_runtime_1.jsxs)("div", { children: ["// src: ", functionKey] }), log.fromCorrelation && (0, jsx_runtime_1.jsxs)("div", { children: ["// Caller: ", log.fromCorrelation] }), (0, jsx_runtime_1.jsxs)("div", { children: ["// Total Runtime: ", (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: AnyVariableView_1.genericFunctionRendererStyles.highlightComment }, { children: [totalRuntime, " ms"] }))] }), (0, jsx_runtime_1.jsx)("div", { children: "// //////////////////////////////////////////////////////" })] })), (0, jsx_runtime_1.jsx)(AnyVariableView_1.GenericFunctionRenderer, { functionName: functionKey.split('::').pop() || 'unknown', args: log.input, expanded: true })] })) })] }));
 };
 exports.LogSummaryDetails = LogSummaryDetails;

package/lib/commonjs/LogViewer/LogViewer.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogViewer = exports.useTabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const Box_1 = __importDefault(require("@mui/material/Box"));
+const queryParams_1 = require("../queryParams");
 const useFederatedAddon_1 = require("../useFederatedAddon");
 const AdminLogs_1 = require("./AdminLogs");
 const Dashboard_1 = require("./Dashboard");
@@ -40,18 +40,15 @@ function useTabs() {
 }
 exports.useTabs = useTabs;
 function LogViewer() {
-    const [selectedTab, setSelectedTab] = react_1.default.useState(0);
     const { tabs, loading } = useTabs();
-    const handleTabChange = (event, newValue) => {
-        setSelectedTab(newValue);
-    };
+    const { tab, handleTabOnChange } = (0, queryParams_1.useUrlFields)();
     return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ sx: {
             display: 'flex',
             flexDirection: 'column',
             height: '100vh',
             width: '100%',
         } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ sx: { flexGrow: 1, overflow: 'auto' } }, { children: tabs
-                    .filter((tab, index) => index === selectedTab)
+                    .filter((t, index) => index === tab)
                     .map((tab) => ((0, jsx_runtime_1.jsx)(tab.View, {}, tab.name))) })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ sx: {
                     borderTop: 1,
                     borderColor: 'divider',
@@ -59,6 +56,6 @@ function LogViewer() {
                     bottom: 0,
                     bgcolor: 'background.paper',
                     zIndex: 1,
-                } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: selectedTab, onChange: handleTabChange, centered: true }, { children: [tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: tab.name }, tab.name))), loading && (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 }) })] })) }))] })));
+                } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabOnChange, centered: true }, { children: [tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: tab.name }, tab.name))), loading && (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 }) })] })) }))] })));
 }
 exports.LogViewer = LogViewer;

package/lib/commonjs/LogViewer/TopSection.d.ts

@@ -1,7 +1,4 @@
-import { SearchParams } from './types';
 export interface TopSectionProps {
-    searchParams: SearchParams;
-    setSearchParams: (setter: (searchParams: SearchParams) => SearchParams) => void;
     onSearch: () => Promise<any>;
 }
-export declare function TopSection({ searchParams, setSearchParams, onSearch }: TopSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TopSection({ onSearch }: TopSectionProps): import("react/jsx-runtime").JSX.Element;

package/lib/commonjs/LogViewer/TopSection.js

@@ -18,66 +18,37 @@ const system_1 = require("@mui/system");
 const x_date_pickers_1 = require("@mui/x-date-pickers");
 const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
 const components_1 = require("../components");
+const queryParams_1 = require("../queryParams");
 const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
-function TopSection({ searchParams, setSearchParams, onSearch }) {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+function TopSection({ onSearch }) {
     const serviceOptions = (0, hooks_1.useServiceNames)();
-    const handleRuntimeTypeChange = (event) => {
-        setSearchParams((prevSearchParams) => (Object.assign(Object.assign({}, prevSearchParams), { runtimeType: event.target.value })));
-    };
-    const handleStartDateChange = (value) => {
-        if (value) {
-            setSearchParams((prevSearchParams) => (Object.assign(Object.assign({}, prevSearchParams), { startIsoDateTime: value.toISOString() })));
-        }
-    };
-    const handleEndDateChange = (value) => {
-        if (value) {
-            setSearchParams((prevSearchParams) => (Object.assign(Object.assign({}, prevSearchParams), { endIsoDateTime: value.toISOString() })));
-        }
-    };
-    const handleErrorFilterChange = (event) => {
-        setSearchParams((prevSearchParams) => (Object.assign(Object.assign({}, prevSearchParams), { errorFilter: event.target.value })));
-    };
-    const handleUserFilterChange = (event) => {
-        setSearchParams((prevSearchParams) => (Object.assign(Object.assign({}, prevSearchParams), { userFilter: event.target.value })));
-    };
-    const handleInfoFilterChange = (event) => {
-        setSearchParams((prev) => (Object.assign(Object.assign({}, prev), { infoFilter: event.target.value })));
-    };
-    const handleDeepSearchChange = (event) => {
-        setSearchParams((prev) => (Object.assign(Object.assign({}, prev), { deep: event.target.value })));
-    };
-    const handleQuickTimeSelect = (minutes) => {
-        const now = new Date();
-        const startDate = new Date(now.getTime() - minutes * 60000);
-        const endDate = new Date(now.getTime() + 7 * 24 * 60 * 60000);
-        setSearchParams((prevSearchParams) => (Object.assign(Object.assign({}, prevSearchParams), { startIsoDateTime: startDate.toISOString(), endIsoDateTime: endDate.toISOString() })));
-        setAnchorEl(null);
-    };
+    const { runtimeType, handleRuntimeTypeOnChange, service, handleServiceOnChange, startDate, handleStartDateChange, endDate, handleEndDateChange, user, handleUserOnChange, info, handleInfoOnChange, deep, handleDeepOnChange, error, handleErrorOnChange, updateStartAndEndTimeSpan, } = (0, queryParams_1.useUrlFields)();
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const handleQuickTimeClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
     const handleQuickTimeClose = () => {
         setAnchorEl(null);
     };
-    const handleServiceChange = (event, value) => {
-        setSearchParams((prevSearchParams) => (Object.assign(Object.assign({}, prevSearchParams), { serviceFilter: value ? value.value : '' })));
+    const handleQuickTimeSelect = (minutes) => {
+        updateStartAndEndTimeSpan(minutes);
+        handleQuickTimeClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns }, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, Object.assign({ container: true, columns: 12, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsxs)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, Object.assign({ id: "runtime-select-label" }, { children: "Runtime Type" })), (0, jsx_runtime_1.jsx)(Select_1.default, Object.assign({ labelId: "runtime-select-label", id: "demo-simple-select", value: searchParams.runtimeType, label: "Runtime Type", onChange: handleRuntimeTypeChange }, { children: constants_1.RuntimeTypes.map((key) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ value: key }, { children: key }), key))) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { options: serviceOptions, getOptionLabel: (option) => option.label, onChange: handleServiceChange, renderInput: (params) => ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, { label: "Service Name", InputLabelProps: {
+    return ((0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns }, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, Object.assign({ container: true, columns: 12, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsxs)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, Object.assign({ id: "runtime-select-label" }, { children: "Runtime Type" })), (0, jsx_runtime_1.jsx)(Select_1.default, Object.assign({ labelId: "runtime-select-label", id: "demo-simple-select", value: runtimeType, label: "Runtime Type", onChange: handleRuntimeTypeOnChange }, { children: constants_1.RuntimeTypes.map((key) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ value: key }, { children: key }), key))) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { getOptionLabel: (option) => option.label, options: serviceOptions, value: serviceOptions.find((o) => o.value === service) || null, onChange: handleServiceOnChange, renderInput: (params) => ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, { label: "Service Name", InputLabelProps: {
                                         shrink: true,
-                                    } }))) }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "Start DateTime", value: new Date(searchParams.startIsoDateTime), onChange: handleStartDateChange }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
+                                    } }))) }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "Start DateTime", value: startDate, onChange: handleStartDateChange }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
                                         position: 'absolute',
                                         right: '-28px',
                                         top: '50%',
                                         transform: 'translateY(-50%)',
-                                    } }, { children: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "End DateTime", value: new Date(searchParams.endIsoDateTime), onChange: handleEndDateChange }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "User", value: searchParams.userFilter, onChange: handleUserFilterChange, InputLabelProps: {
+                                    } }, { children: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }))] })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "End DateTime", value: endDate, onChange: handleEndDateChange }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "User", value: user, onChange: handleUserOnChange, InputLabelProps: {
                                     shrink: true,
-                                } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Info", value: searchParams.infoFilter, onChange: handleInfoFilterChange, InputLabelProps: {
+                                } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Info", value: info, onChange: handleInfoOnChange, InputLabelProps: {
                                     shrink: true,
-                                } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Error Filter", value: searchParams.errorFilter, onChange: handleErrorFilterChange, InputLabelProps: {
+                                } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Error Filter", value: error, onChange: handleErrorOnChange, InputLabelProps: {
                                     shrink: true,
-                                } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 10 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Deep Search", value: searchParams.deep, onChange: handleDeepSearchChange, placeholder: "Use with caution, reduce results with above fields first, this is a contains search on the log JSON, so it will be slow.", InputLabelProps: {
+                                } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 10 }, { children: (0, jsx_runtime_1.jsx)(FormControl_1.default, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Deep Search", value: deep, onChange: handleDeepOnChange, placeholder: "Use with caution, reduce results with above fields first, this is a contains search on the log JSON, so it will be slow.", InputLabelProps: {
                                     shrink: true,
                                 } }) })) })), (0, jsx_runtime_1.jsx)(Grid_1.default, Object.assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, Object.assign({ onClick: () => onSearch() }, { children: "Search" })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Menu, Object.assign({ id: "quick-time-menu", anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleQuickTimeClose }, { children: [(0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(5) }, { children: "Last 5 minutes" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(30) }, { children: "Last 30 minutes" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(1 * 60) }, { children: "Last hour" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(3 * 60) }, { children: "Last 3 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(8 * 60) }, { children: "Last 8 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(16 * 60) }, { children: "Last 16 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(24 * 60) }, { children: "Last 24 hours" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(7 * 24 * 60) }, { children: "Last 7 days" })), (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({ onClick: () => handleQuickTimeSelect(30 * 24 * 60) }, { children: "Last month" }))] }))] })));
 }

package/lib/commonjs/LogViewer/hooks/useLogManagement.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SearchParams } from '../types';
 declare global {
     interface Window {
@@ -9,12 +8,10 @@ declare global {
 export declare const useLogManagement: () => {
     selectedLogCorrelation: string;
     logs: any;
-    searchParams: SearchParams;
-    setSearchParams: import("react").Dispatch<import("react").SetStateAction<SearchParams>>;
     onSearch: (newSearchParams?: SearchParams | undefined) => Promise<any[]>;
     filteredLogs: any[];
     onRowClick: ({ row: logStory }: any) => void;
-    clearSelectedLogCorrelation: () => void;
-    setSelectedLogCorrelation: (correlation: string) => void;
+    clearSelectedLogCorrelation: () => Promise<void>;
+    setSelectedLogCorrelation: (correlation: string) => Promise<void>;
     searchProgress: number;
 };

package/lib/commonjs/LogViewer/hooks/useLogManagement.js

@@ -2,62 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogManagement = void 0;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const queryParams_1 = require("../../queryParams");
 const logic_1 = require("../logic");
 const useOnSearch_1 = require("./useOnSearch");
 const useLogManagement = () => {
-    const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
-    const selectedLogCorrelation = searchParams.get('correlation') || '';
-    const setSelectedLogCorrelation = (correlation) => {
-        if (correlation) {
-            setSearchParams({ correlation });
-        }
-        else {
-            setSearchParams({});
-        }
-    };
+    const { runtimeType, service, startDate, endDate, user, info, deep, error, correlation, setCorrelation, clearCorrelation } = (0, queryParams_1.useUrlFields)();
     const [logs, setLogs] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         window.logs = logs;
         window.viewLog = (log) => {
-            setSelectedLogCorrelation(log.correlation);
+            setCorrelation(log.correlation);
         };
     }, [logs]);
     (0, react_1.useEffect)(() => {
         console.log('logs attached to window, try: viewLog(logs[0])');
     }, []);
-    const [searchParamsState, setSearchParamsState] = (0, react_1.useState)(() => {
-        const currentDate = new Date();
-        const threeHoursAgo = new Date(currentDate.getTime() - 3 * 60 * 60 * 1000);
-        const isoDateThreeHoursAgo = threeHoursAgo.toISOString();
-        const tomorrow = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
-        const isoDateTomorrow = tomorrow.toISOString();
-        return {
-            runtimeType: 'EXECUTE_STORY',
-            startIsoDateTime: isoDateThreeHoursAgo,
-            endIsoDateTime: isoDateTomorrow,
-            errorFilter: '',
-            infoFilter: '',
-            serviceFilter: '',
-            userFilter: '',
-            deep: '',
-            onlyErrors: false,
-        };
-    });
-    const [searchProgress, onSearch] = (0, useOnSearch_1.useOnSearch)(searchParamsState, setLogs);
-    const filteredLogs = (0, react_1.useMemo)(() => (0, logic_1.filterLogs)(searchParamsState.errorFilter, logs), [searchParamsState.errorFilter, logs]);
-    const onRowClick = (0, logic_1.getOnRowClick)(setSelectedLogCorrelation);
-    const clearSelectedLogCorrelation = () => setSelectedLogCorrelation('');
+    const searchParams = (0, react_1.useMemo)(() => ({
+        runtimeType,
+        startIsoDateTime: startDate.toISOString(),
+        endIsoDateTime: endDate.toISOString(),
+        errorFilter: error,
+        infoFilter: info,
+        serviceFilter: service,
+        userFilter: user,
+        deep: deep,
+        onlyErrors: false,
+    }), [runtimeType, startDate, endDate, error, info, service, user, deep]);
+    const [searchProgress, onSearch] = (0, useOnSearch_1.useOnSearch)(searchParams, setLogs);
+    const filteredLogs = (0, react_1.useMemo)(() => (0, logic_1.filterLogs)(error, logs), [error, logs]);
+    const onRowClick = (0, logic_1.getOnRowClick)(setCorrelation);
     return {
-        selectedLogCorrelation,
+        selectedLogCorrelation: correlation,
         logs,
-        searchParams: searchParamsState,
-        setSearchParams: setSearchParamsState,
         onSearch,
         filteredLogs,
         onRowClick,
-        clearSelectedLogCorrelation,
-        setSelectedLogCorrelation,
+        clearSelectedLogCorrelation: clearCorrelation,
+        setSelectedLogCorrelation: setCorrelation,
         searchProgress,
     };
 };

package/lib/commonjs/LogViewer/hooks/useLogSearch.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { SearchParams } from '../types';
 declare global {
     interface Window {
         logs: any;
@@ -7,8 +5,6 @@ declare global {
 }
 export declare const useLogSearch: () => {
     logs: any;
-    searchParams: SearchParams;
-    setSearchParams: import("react").Dispatch<import("react").SetStateAction<SearchParams>>;
     searchProgress: number;
-    onSearch: (newSearchParams?: SearchParams | undefined) => Promise<any[]>;
+    onSearch: (newSearchParams?: import("../types").SearchParams | undefined) => Promise<any[]>;
 };

package/lib/commonjs/LogViewer/hooks/useLogSearch.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogSearch = void 0;
 const react_1 = require("react");
+const queryParams_1 = require("../../queryParams");
 const useOnSearch_1 = require("./useOnSearch");
 const useLogSearch = () => {
+    const { runtimeType, service, startDate, endDate, user, info, deep, error } = (0, queryParams_1.useUrlFields)();
     const [logs, setLogs] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         window.logs = logs;
@@ -11,29 +13,19 @@ const useLogSearch = () => {
     (0, react_1.useEffect)(() => {
         console.log('logs attached to window, try: viewLog(logs[0])');
     }, []);
-    const [searchParamsState, setSearchParamsState] = (0, react_1.useState)(() => {
-        const currentDate = new Date();
-        const threeHoursAgo = new Date(currentDate.getTime() - 3 * 60 * 60 * 1000);
-        const isoDateThreeHoursAgo = threeHoursAgo.toISOString();
-        const tomorrow = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
-        const isoDateTomorrow = tomorrow.toISOString();
-        return {
-            runtimeType: 'EXECUTE_STORY',
-            startIsoDateTime: isoDateThreeHoursAgo,
-            endIsoDateTime: isoDateTomorrow,
-            errorFilter: '',
-            infoFilter: '',
-            serviceFilter: '',
-            userFilter: '',
-            deep: '',
-            onlyErrors: false,
-        };
-    });
-    const [searchProgress, onSearch] = (0, useOnSearch_1.useOnSearch)(searchParamsState, setLogs);
+    const [searchProgress, onSearch] = (0, useOnSearch_1.useOnSearch)({
+        runtimeType,
+        startIsoDateTime: startDate.toISOString(),
+        endIsoDateTime: endDate.toISOString(),
+        errorFilter: error,
+        infoFilter: info,
+        serviceFilter: service,
+        userFilter: user,
+        deep: deep,
+        onlyErrors: false,
+    }, setLogs);
     return {
         logs,
-        searchParams: searchParamsState,
-        setSearchParams: setSearchParamsState,
         searchProgress,
         onSearch,
     };

package/lib/commonjs/LogViewer/hooks/useServiceNames.d.ts

@@ -1,6 +1,5 @@
-type AutoCompleteOption = {
+export type AutoCompleteOption = {
     label: string;
     value: string;
 };
 export declare const useServiceNames: () => AutoCompleteOption[];
-export {};

package/lib/commonjs/queryParams/index.d.ts

@@ -0,0 +1,2 @@
+export * from './searchQueryParams';
+export * from './useUrlFields';

package/lib/commonjs/queryParams/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./searchQueryParams"), exports);
+__exportStar(require("./useUrlFields"), exports);

package/lib/commonjs/queryParams/searchQueryParams.d.ts

@@ -0,0 +1,14 @@
+import { LogLevelEnumLookup } from 'quidproquo-core';
+export declare const infoFilterQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string[] | "">;
+export declare const runtimeTypeQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const userQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const infoQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const msgQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const errorQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const deepQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const correlationQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const tabQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, number>;
+export declare const logLevelQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, LogLevelEnumLookup>;
+export declare const serviceQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, string>;
+export declare const startDateQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, Date>;
+export declare const endDateQueryParamComputed: import("quidproquo-web-react").QpqRuntimeComputed<import("quidproquo-web-react").SharedQueryParamsState, Date>;

package/lib/commonjs/queryParams/searchQueryParams.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.endDateQueryParamComputed = exports.startDateQueryParamComputed = exports.serviceQueryParamComputed = exports.logLevelQueryParamComputed = exports.tabQueryParamComputed = exports.correlationQueryParamComputed = exports.deepQueryParamComputed = exports.errorQueryParamComputed = exports.msgQueryParamComputed = exports.infoQueryParamComputed = exports.userQueryParamComputed = exports.runtimeTypeQueryParamComputed = exports.infoFilterQueryParamComputed = void 0;
+const quidproquo_core_1 = require("quidproquo-core");
+const quidproquo_web_react_1 = require("quidproquo-web-react");
+exports.infoFilterQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => state.infoFilter || '');
+exports.runtimeTypeQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.runtimeType) === null || _a === void 0 ? void 0 : _a[0]) || quidproquo_core_1.QpqRuntimeType.EXECUTE_STORY; });
+exports.userQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.user) === null || _a === void 0 ? void 0 : _a[0]) || ''; });
+exports.infoQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.info) === null || _a === void 0 ? void 0 : _a[0]) || ''; });
+exports.msgQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.msg) === null || _a === void 0 ? void 0 : _a[0]) || ''; });
+exports.errorQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.error) === null || _a === void 0 ? void 0 : _a[0]) || ''; });
+exports.deepQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.deep) === null || _a === void 0 ? void 0 : _a[0]) || ''; });
+exports.correlationQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.correlation) === null || _a === void 0 ? void 0 : _a[0]) || ''; });
+exports.tabQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return parseInt(((_a = state.tab) === null || _a === void 0 ? void 0 : _a[0]) || '0'); });
+exports.logLevelQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return (((_a = state.logLevel) === null || _a === void 0 ? void 0 : _a[0]) || 'All'); });
+exports.serviceQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => { var _a; return ((_a = state.service) === null || _a === void 0 ? void 0 : _a[0]) || ''; });
+exports.startDateQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => {
+    var _a;
+    const dateStr = (_a = state.startIsoDateTime) === null || _a === void 0 ? void 0 : _a[0];
+    return dateStr ? new Date(dateStr) : new Date();
+});
+exports.endDateQueryParamComputed = (0, quidproquo_web_react_1.createQpqRuntimeComputed)(quidproquo_web_react_1.sharedQueryParamsRuntime, (state) => {
+    var _a;
+    const dateStr = (_a = state.endIsoDateTime) === null || _a === void 0 ? void 0 : _a[0];
+    return dateStr ? new Date(dateStr) : new Date();
+});