@qpqjs/web-admin 0.0.0-stage → 0.2.1

package/lib/esm/LogViewer/LogDialog/tabs/TraceTab/TraceTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TraceTab.js","sourceRoot":"","sources":["../../../../../../src/LogViewer/LogDialog/tabs/TraceTab/TraceTab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { QpqExecutionTrace, QpqRuntimeType } from '@qpqjs/core';\nimport { WebSocketQueueQpqAdminServerEventMessageTraceDone, WebSocketQueueQpqAdminServerMessageEventType } from '@qpqjs/features';\nimport { useAuthAccessToken, useBaseUrlResolvers, useSubscribeToWebSocketEvent } from '@qpqjs/web-react';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport TroubleshootIcon from '@mui/icons-material/Troubleshoot';\nimport { Alert, Box, Button, Checkbox, FormControlLabel, LinearProgress, Tooltip, Typography } from '@mui/material';\n\nimport { getLogTrace } from '../../../logic';\nimport { TraceViewer } from '../../../TraceViewer';\nimport { AsyncStoryState } from '../../hooks';\nimport { MovedToColdStorage } from '../../MovedToColdStorage';\n\ninterface TraceTabProps {\n  log: AsyncStoryState;\n  isVisible: boolean;\n}\n\n// Backstop for a missed TraceDone websocket message (reconnect gaps, dev servers\n// without the admin socket). checkOnly polls never trigger trace runs.\nconst PENDING_POLL_MS = 15_000;\n\n// Async trace flow: the first open only checks for a stored trace — found ones load\n// immediately, otherwise an explainer with a Begin Trace button is shown. Beginning a\n// trace kicks off a fire-and-forget run in the owning service and this tab waits for\n// its TraceDone websocket push (with a slow checkOnly poll as a fallback). See\n// trace-replay-plan.md.\nexport const TraceTab: React.FC<TraceTabProps> = ({ log, isVisible }) => {\n  const urlResolvers = useBaseUrlResolvers();\n  const accessToken = useAuthAccessToken();\n\n  const [trace, setTrace] = useState<QpqExecutionTrace | undefined>(undefined);\n  const [isWaiting, setIsWaiting] = useState(false);\n  const [traceError, setTraceError] = useState<string | undefined>(undefined);\n  const [hasRequested, setHasRequested] = useState(false);\n  const [hasCheckedForStoredTrace, setHasCheckedForStoredTrace] = useState(false);\n\n  // \"My code only\" — held here so Begin Trace / Re-run Trace can send it: a trace with\n  // it on sets no breakpoints outside the user's own code. Every step pause freezes the\n  // replay for several inspector round trips, so full traces of real bundles burn the\n  // whole wall-clock budget on framework glue — own-code-only is the sane default.\n  const [hideExternalSteps, setHideExternalSteps] = useState(true);\n\n  // The request a stale async response must not clobber (rapid re-runs, dialog reuse)\n  const requestVersionRef = useRef(0);\n\n  const requestTrace = async (options: { refresh?: boolean; checkOnly?: boolean; onlyOwnCode?: boolean }) => {\n    const requestVersion = ++requestVersionRef.current;\n    if (!options.checkOnly) {\n      setIsWaiting(true);\n      setTraceError(undefined);\n    }\n\n    try {\n      const result = await getLogTrace(urlResolvers.getApiUrl(), log.logCorrelation, options, accessToken);\n      if (requestVersion !== requestVersionRef.current) {\n        return;\n      }\n\n      if (result.trace) {\n        setTrace(result.trace);\n        setIsWaiting(false);\n      } else if (result.pending && !options.checkOnly) {\n        // check=true reports pending whenever no trace is stored — the server can't\n        // tell idle from in-flight — so only a real trace request may start waiting\n        setIsWaiting(true);\n      } else if (!options.checkOnly) {\n        setTraceError('No trace was produced for this log');\n        setIsWaiting(false);\n      }\n    } catch (error) {\n      if (requestVersion !== requestVersionRef.current) {\n        return;\n      }\n      setTraceError(error instanceof Error ? error.message : String(error));\n      setIsWaiting(false);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible && !hasRequested && !log.isLoading && !log.isLogInColdStorage) {\n      setHasRequested(true);\n      // First open never starts a trace — it only loads a stored one; starting one is\n      // the explicit Begin Trace action below\n      requestTrace({ checkOnly: true }).finally(() => setHasCheckedForStoredTrace(true));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible, hasRequested, log.isLoading, log.isLogInColdStorage]);\n\n  // The owning service finished tracing — the log service pushed the result\n  useSubscribeToWebSocketEvent(\n    WebSocketQueueQpqAdminServerMessageEventType.TraceDone,\n    (webSocketService, message: WebSocketQueueQpqAdminServerEventMessageTraceDone) => {\n      if (message.payload.correlation !== log.logCorrelation || !isWaiting) {\n        return;\n      }\n\n      if (message.payload.succeeded) {\n        requestTrace({ checkOnly: true });\n      } else {\n        setTraceError(message.payload.errorText || 'Trace failed');\n        setIsWaiting(false);\n      }\n    },\n  );\n\n  // Poll fallback while waiting — checkOnly, so it can never stack trace runs\n  useEffect(() => {\n    if (!isWaiting) {\n      return;\n    }\n    const pollTimer = setInterval(() => requestTrace({ checkOnly: true }), PENDING_POLL_MS);\n    return () => clearInterval(pollTimer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isWaiting]);\n\n  if (log.isLoading) {\n    return <div>Loading...</div>;\n  }\n\n  if (log.isLogInColdStorage) {\n    return <MovedToColdStorage guid={log.logCorrelation} />;\n  }\n\n  if (isWaiting) {\n    return (\n      <Box sx={{ p: 2 }}>\n        <Typography sx={{ mb: 1 }} variant=\"body2\">\n          Tracing in {log.log?.moduleName ? `the ${log.log.moduleName} service` : 'the owning service'} — replaying the log and recording every\n          statement. This can take a minute; the result appears here when it lands.\n        </Typography>\n        <LinearProgress />\n      </Box>\n    );\n  }\n\n  if (traceError) {\n    return (\n      <Box sx={{ p: 2 }}>\n        <Alert\n          action={\n            <Button color=\"inherit\" onClick={() => requestTrace({ refresh: true, onlyOwnCode: hideExternalSteps })} size=\"small\">\n              Retry\n            </Button>\n          }\n          severity=\"error\"\n        >\n          {traceError}\n        </Alert>\n      </Box>\n    );\n  }\n\n  if (!trace) {\n    if (!hasCheckedForStoredTrace) {\n      return null;\n    }\n\n    // No stored trace — explain what tracing is and let the user start one explicitly.\n    // Begin Trace deliberately leaves refresh false so a trace that landed since the\n    // check is served straight from storage instead of re-running.\n    const isTraceable = log.log?.runtimeType === QpqRuntimeType.EXECUTE_STORY;\n\n    return (\n      <Box sx={{ alignItems: 'center', display: 'flex', height: '100%', justifyContent: 'center', p: 3 }}>\n        <Box sx={{ maxWidth: 560, textAlign: 'center' }}>\n          <TroubleshootIcon color=\"primary\" sx={{ fontSize: 56, mb: 1 }} />\n          <Typography gutterBottom variant=\"h6\">\n            Step-through execution trace\n          </Typography>\n          <Typography color=\"text.secondary\" sx={{ mb: 3 }} variant=\"body2\">\n            A trace replays this log inside the service that ran it, recording every statement it executes and the local variables at each step — then\n            you can scrub through the run line by line, like a time-travel debugger for exactly what happened.\n          </Typography>\n          {!isTraceable && (\n            <Alert severity=\"warning\" sx={{ mb: 3, textAlign: 'left' }}>\n              Only {QpqRuntimeType.EXECUTE_STORY} logs can be traced — this is a {log.log?.runtimeType || 'different'} log. Use the Tree tab to walk\n              down to the {QpqRuntimeType.EXECUTE_STORY} runs it triggered and trace those instead.\n            </Alert>\n          )}\n          {isTraceable && (\n            <Box sx={{ mb: 1 }}>\n              <FormControlLabel\n                control={<Checkbox checked={hideExternalSteps} onChange={(event) => setHideExternalSteps(event.target.checked)} size=\"small\" />}\n                label={\n                  <Typography variant=\"body2\">\n                    My code only — trace just this service&apos;s own source (much faster; framework internals get no steps)\n                  </Typography>\n                }\n              />\n            </Box>\n          )}\n          <Button disabled={!isTraceable} onClick={() => requestTrace({ onlyOwnCode: hideExternalSteps })} variant=\"contained\">\n            Begin Trace\n          </Button>\n          {isTraceable && (\n            <Typography color=\"text.secondary\" display=\"block\" sx={{ mt: 1.5 }} variant=\"caption\">\n              Runs in {log.log?.moduleName ? `the ${log.log.moduleName} service` : 'the owning service'} and can take a minute.\n            </Typography>\n          )}\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box sx={{ height: '100%' }}>\n      <TraceViewer\n        actions={\n          <Tooltip\n            title={hideExternalSteps ? 'Re-traces with breakpoints only in your own code — the whole step budget goes to your statements' : ''}\n          >\n            <Button onClick={() => requestTrace({ refresh: true, onlyOwnCode: hideExternalSteps })} size=\"small\" sx={{ flexShrink: 0 }}>\n              Re-run Trace{hideExternalSteps ? ' (my code only)' : ''}\n            </Button>\n          </Tooltip>\n        }\n        hideExternalSteps={hideExternalSteps}\n        onHideExternalStepsChange={setHideExternalSteps}\n        trace={trace}\n      />\n    </Box>\n  );\n};\n"]}

package/lib/esm/LogViewer/LogDialog/tabs/TraceTab/index.d.ts

@@ -0,0 +1 @@
+export * from './TraceTab';

package/lib/esm/LogViewer/LogDialog/tabs/TraceTab/index.js

@@ -0,0 +1,2 @@
+export * from './TraceTab';
+//# sourceMappingURL=index.js.map

package/lib/esm/LogViewer/LogDialog/tabs/TraceTab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/LogViewer/LogDialog/tabs/TraceTab/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './TraceTab';\n"]}

package/lib/esm/LogViewer/LogDialog/tabs/TreeTab/TreeTab.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TreeApi } from '../../../hooks';
+import { AsyncStoryState } from '../../hooks';
+interface TreeTabProps {
+    log: AsyncStoryState;
+    isVisible: boolean;
+    setSelectedLogCorrelation: (correlation: string) => void;
+    treeApi: TreeApi;
+}
+export declare const TreeTab: React.FC<TreeTabProps>;
+export {};

package/lib/esm/LogViewer/LogDialog/tabs/TreeTab/TreeTab.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LogCorrelations } from '../../../LogCorrelations';
+export const TreeTab = ({ log, isVisible, setSelectedLogCorrelation, treeApi, }) => {
+    if (log.isLoading) {
+        return _jsx("div", { children: "Loading..." });
+    }
+    return (_jsx(LogCorrelations, { isVisible: isVisible, logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }));
+};
+//# sourceMappingURL=TreeTab.js.map

package/lib/esm/LogViewer/LogDialog/tabs/TreeTab/TreeTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeTab.js","sourceRoot":"","sources":["../../../../../../src/LogViewer/LogDialog/tabs/TreeTab/TreeTab.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAY3D,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,GAAG,EAEH,SAAS,EACT,yBAAyB,EAEzB,OAAO,GACR,EAAE,EAAE;IACH,IAAI,GAAG,CAAC,SAAS,EAAE,CAAC;QAClB,OAAO,uCAAqB,CAAC;IAC/B,CAAC;IAED,OAAO,CACL,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,GAAG,CAAC,cAAc,EAClC,yBAAyB,EAAE,yBAAyB,EACpD,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { TreeApi } from '../../../hooks';\nimport { LogCorrelations } from '../../../LogCorrelations';\nimport { AsyncStoryState } from '../../hooks';\n\ninterface TreeTabProps {\n  log: AsyncStoryState;\n\n  isVisible: boolean;\n  setSelectedLogCorrelation: (correlation: string) => void;\n\n  treeApi: TreeApi;\n}\n\nexport const TreeTab: React.FC<TreeTabProps> = ({\n  log,\n\n  isVisible,\n  setSelectedLogCorrelation,\n\n  treeApi,\n}) => {\n  if (log.isLoading) {\n    return <div>Loading...</div>;\n  }\n\n  return (\n    <LogCorrelations\n      isVisible={isVisible}\n      logCorrelation={log.logCorrelation}\n      setSelectedLogCorrelation={setSelectedLogCorrelation}\n      treeApi={treeApi}\n    />\n  );\n};\n"]}

package/lib/esm/LogViewer/LogDialog/tabs/TreeTab/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeTab';

package/lib/esm/LogViewer/LogDialog/tabs/TreeTab/index.js

@@ -0,0 +1,2 @@
+export * from './TreeTab';
+//# sourceMappingURL=index.js.map

package/lib/esm/LogViewer/LogDialog/tabs/TreeTab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/LogViewer/LogDialog/tabs/TreeTab/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './TreeTab';\n"]}

package/lib/esm/LogViewer/LogDialog/tabs/index.d.ts

@@ -0,0 +1,7 @@
+export * from './HelpTab';
+export * from './LogDetailsTab';
+export * from './NotesTab';
+export * from './RawTab';
+export * from './TimelineTab';
+export * from './TraceTab';
+export * from './TreeTab';

package/lib/esm/LogViewer/LogDialog/tabs/index.js

@@ -0,0 +1,8 @@
+export * from './HelpTab';
+export * from './LogDetailsTab';
+export * from './NotesTab';
+export * from './RawTab';
+export * from './TimelineTab';
+export * from './TraceTab';
+export * from './TreeTab';
+//# sourceMappingURL=index.js.map

package/lib/esm/LogViewer/LogDialog/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/LogViewer/LogDialog/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC","sourcesContent":["export * from './HelpTab';\nexport * from './LogDetailsTab';\nexport * from './NotesTab';\nexport * from './RawTab';\nexport * from './TimelineTab';\nexport * from './TraceTab';\nexport * from './TreeTab';\n"]}

package/lib/esm/LogViewer/LogMetadataGrid.d.ts

@@ -0,0 +1,7 @@
+import { LogMetadata } from '@qpqjs/features';
+type LogMetadataGridProps = {
+    logs: LogMetadata[];
+    isLoading: boolean;
+};
+export declare const LogMetadataGrid: ({ logs, isLoading }: LogMetadataGridProps) => import("react").JSX.Element;
+export {};

package/lib/esm/LogViewer/LogMetadataGrid.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import LinearProgress from '@mui/material/LinearProgress';
+import { DataGrid } from '@mui/x-data-grid';
+import { CorrelationOpenSource, getSearchProgress, logSearchKey, useAdminApp, useSessionState, useVolatileState } from '../adminApp';
+import { DataGridPagination } from '../components/DataGridPagination/DataGridPagination';
+import { DateCell } from '../components/DateCell/DateCell';
+import { LogDialog } from './LogDialog';
+const formatTime = (ms) => {
+    if (ms < 1000)
+        return `${ms}ms`;
+    const sec = ms / 1000;
+    if (sec < 60)
+        return `${sec.toFixed(1)}s`;
+    const min = sec / 60;
+    if (min < 60)
+        return `${min.toFixed(1)}m`;
+    const hr = min / 60;
+    if (hr < 24)
+        return `${hr.toFixed(1)}h`;
+    const day = hr / 24;
+    return `${day.toFixed(1)}d`;
+};
+const columns = [
+    {
+        field: 'startedAt',
+        headerName: 'Started at',
+        flex: 1,
+        renderCell: (params) => _jsx(DateCell, { isoDateTime: params.value }),
+    },
+    { field: 'moduleName', headerName: 'Service', flex: 1 },
+    { field: 'runtimeType', headerName: 'Type', flex: 1 },
+    { field: 'generic', headerName: 'Info', flex: 3 },
+    { field: 'error', headerName: 'Error', flex: 4 },
+    { field: 'userInfo', headerName: 'User', flex: 1.5 },
+    {
+        field: 'executionTimeMs',
+        headerName: 'Execution Time',
+        flex: 1,
+        renderCell: (params) => _jsx(_Fragment, { children: formatTime(params.value) }),
+        sortComparator: (v1, v2) => Number(v1) - Number(v2),
+    },
+];
+export const LogMetadataGrid = ({ logs, isLoading }) => {
+    const [api] = useAdminApp();
+    const session = useSessionState();
+    const volatile = useVolatileState();
+    const searchProgress = getSearchProgress(volatile.logResults[logSearchKey(session.search)]);
+    const selectedLogCorrelation = session.openCorrelation ?? '';
+    const onRowClick = ({ row }) => api.applyCorrelationOpened(row.correlation, CorrelationOpenSource.grid);
+    const clearSelectedLogCorrelation = () => api.applyCorrelationClosed();
+    const setSelectedLogCorrelation = (correlation) => api.applyCorrelationOpened(correlation, CorrelationOpenSource.tree);
+    const getRowClassName = (params) => {
+        return params.row.checked ? 'greenRow' : '';
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+          .greenRow {
+            background-color: #eaffea;
+          }
+        ` }), _jsx(DataGrid, { autoPageSize: true, columns: columns, components: {
+                    Pagination: DataGridPagination,
+                    LoadingOverlay: () => _jsx(LinearProgress, { value: searchProgress, variant: "determinate" }),
+                }, getRowClassName: getRowClassName, loading: isLoading, onRowClick: onRowClick, rows: logs.map((log) => ({ ...log, id: log.correlation })) }), _jsx(LogDialog, { handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, open: !!selectedLogCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, storyResultMetadatas: logs })] }));
+};
+//# sourceMappingURL=LogMetadataGrid.js.map

package/lib/esm/LogViewer/LogMetadataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogMetadataGrid.js","sourceRoot":"","sources":["../../../src/LogViewer/LogMetadataGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { LogMetadata } from '@qpqjs/features';\n\nimport LinearProgress from '@mui/material/LinearProgress';\nimport { DataGrid, GridColDef, GridRenderCellParams, GridRowClassNameParams } from '@mui/x-data-grid';\n\nimport { CorrelationOpenSource, getSearchProgress, logSearchKey, useAdminApp, useSessionState, useVolatileState } from '../adminApp';\nimport { DataGridPagination } from '../components/DataGridPagination/DataGridPagination';\nimport { DateCell } from '../components/DateCell/DateCell';\nimport { LogDialog } from './LogDialog';\n\nconst formatTime = (ms: number) => {\n  if (ms < 1000) return `${ms}ms`;\n  const sec = ms / 1000;\n  if (sec < 60) return `${sec.toFixed(1)}s`;\n  const min = sec / 60;\n  if (min < 60) return `${min.toFixed(1)}m`;\n  const hr = min / 60;\n  if (hr < 24) return `${hr.toFixed(1)}h`;\n  const day = hr / 24;\n  return `${day.toFixed(1)}d`;\n};\n\nconst columns: GridColDef[] = [\n  {\n    field: 'startedAt',\n    headerName: 'Started at',\n    flex: 1,\n    renderCell: (params: GridRenderCellParams) => <DateCell isoDateTime={params.value} />,\n  },\n  { field: 'moduleName', headerName: 'Service', flex: 1 },\n  { field: 'runtimeType', headerName: 'Type', flex: 1 },\n  { field: 'generic', headerName: 'Info', flex: 3 },\n  { field: 'error', headerName: 'Error', flex: 4 },\n  { field: 'userInfo', headerName: 'User', flex: 1.5 },\n  {\n    field: 'executionTimeMs',\n    headerName: 'Execution Time',\n    flex: 1,\n    renderCell: (params: GridRenderCellParams) => <>{formatTime(params.value)}</>,\n    sortComparator: (v1, v2) => Number(v1) - Number(v2),\n  },\n];\n\ntype LogMetadataGridProps = {\n  logs: LogMetadata[];\n  isLoading: boolean;\n};\n\nexport const LogMetadataGrid = ({ logs, isLoading }: LogMetadataGridProps) => {\n  const [api] = useAdminApp();\n  const session = useSessionState();\n  const volatile = useVolatileState();\n\n  const searchProgress = getSearchProgress(volatile.logResults[logSearchKey(session.search)]);\n  const selectedLogCorrelation = session.openCorrelation ?? '';\n\n  const onRowClick = ({ row }: { row: { correlation: string } }) => api.applyCorrelationOpened(row.correlation, CorrelationOpenSource.grid);\n  const clearSelectedLogCorrelation = () => api.applyCorrelationClosed();\n  const setSelectedLogCorrelation = (correlation: string) => api.applyCorrelationOpened(correlation, CorrelationOpenSource.tree);\n\n  const getRowClassName = (params: GridRowClassNameParams) => {\n    return params.row.checked ? 'greenRow' : '';\n  };\n\n  return (\n    <>\n      <style>\n        {`\n          .greenRow {\n            background-color: #eaffea;\n          }\n        `}\n      </style>\n      <DataGrid\n        autoPageSize\n        columns={columns}\n        components={{\n          Pagination: DataGridPagination,\n          LoadingOverlay: () => <LinearProgress value={searchProgress} variant=\"determinate\" />,\n        }}\n        getRowClassName={getRowClassName}\n        loading={isLoading}\n        onRowClick={onRowClick}\n        rows={logs.map((log) => ({ ...log, id: log.correlation }))}\n      />\n      <LogDialog\n        handleClose={clearSelectedLogCorrelation}\n        logCorrelation={selectedLogCorrelation}\n        open={!!selectedLogCorrelation}\n        setSelectedLogCorrelation={setSelectedLogCorrelation}\n        storyResultMetadatas={logs}\n      />\n    </>\n  );\n};\n"]}

package/lib/esm/LogViewer/LogRawJson.d.ts

@@ -0,0 +1,6 @@
+import { StoryResult } from '@qpqjs/core';
+interface LogRawJsonProps {
+    log: StoryResult<any>;
+}
+export declare const LogRawJson: ({ log }: LogRawJsonProps) => import("react").JSX.Element;
+export {};

package/lib/esm/LogViewer/LogRawJson.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+export const LogRawJson = ({ log }) => {
+    return (_jsxs(Box, { sx: { width: 1, p: 2 }, children: [_jsx(Typography, { gutterBottom: true, variant: "h6", children: "Raw JSON" }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: JSON.stringify(log, null, 2) })] }));
+};
+//# sourceMappingURL=LogRawJson.js.map

package/lib/esm/LogViewer/LogRawJson.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogRawJson.js","sourceRoot":"","sources":["../../../src/LogViewer/LogRawJson.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAMhD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;IACrD,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,aACzB,KAAC,UAAU,IAAC,YAAY,QAAC,OAAO,EAAC,IAAI,yBAExB,EACb,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,YAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,IACjG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { StoryResult } from '@qpqjs/core';\n\nimport { Box, Typography } from '@mui/material';\n\ninterface LogRawJsonProps {\n  log: StoryResult<any>;\n}\n\nexport const LogRawJson = ({ log }: LogRawJsonProps) => {\n  return (\n    <Box sx={{ width: 1, p: 2 }}>\n      <Typography gutterBottom variant=\"h6\">\n        Raw JSON\n      </Typography>\n      <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{JSON.stringify(log, null, 2)}</pre>\n    </Box>\n  );\n};\n"]}

package/lib/esm/LogViewer/LogSearch.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        logs: any;
+        viewLog: any;
+    }
+}
+export declare const LogSearch: () => import("react").JSX.Element;

package/lib/esm/LogViewer/LogSearch.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { CorrelationOpenSource, logSearchKey, useAdminApp, useSessionState, useVolatileState } from '../adminApp';
+import { TabViewBox } from '../components/TabViewBox';
+import { useIsLoading } from '../view/Loading/hooks/useIsLoading';
+import { LogMetadataGrid } from './LogMetadataGrid';
+import { TopSection } from './TopSection';
+export const LogSearch = () => {
+    const [api] = useAdminApp();
+    const session = useSessionState();
+    const volatile = useVolatileState();
+    const isLoading = useIsLoading();
+    const results = volatile.logResults[logSearchKey(session.search)];
+    const logs = useMemo(() => results?.logs ?? [], [results?.logs]);
+    useEffect(() => {
+        window.logs = logs;
+        window.viewLog = (log) => api.applyCorrelationOpened(log.correlation, CorrelationOpenSource.grid);
+    }, [logs, api]);
+    useEffect(() => {
+        console.log('logs attached to window, try: viewLog(logs[0])');
+    }, []);
+    return (_jsx(TabViewBox, { body: () => _jsx(LogMetadataGrid, { isLoading: isLoading || !!results?.isSearching, logs: logs }), header: () => _jsx(TopSection, { onSearch: () => api.runLogSearch() }) }));
+};
+//# sourceMappingURL=LogSearch.js.map

package/lib/esm/LogViewer/LogSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSearch.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSearch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAClH,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,GAAG,CAAC,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;IACpC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,IAAI,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,MAAM,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,sBAAsB,CAAC,GAAG,CAAC,WAAW,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACzG,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,GAAG,CAAC,gDAAgD,CAAC,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,GAAG,EAAE,CAAC,KAAC,eAAe,IAAC,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,EAC3F,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,GAAI,GAChE,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useMemo } from 'react';\n\nimport { CorrelationOpenSource, logSearchKey, useAdminApp, useSessionState, useVolatileState } from '../adminApp';\nimport { TabViewBox } from '../components/TabViewBox';\nimport { useIsLoading } from '../view/Loading/hooks/useIsLoading';\nimport { LogMetadataGrid } from './LogMetadataGrid';\nimport { TopSection } from './TopSection';\n\ndeclare global {\n  interface Window {\n    logs: any;\n    viewLog: any;\n  }\n}\n\nexport const LogSearch = () => {\n  const [api] = useAdminApp();\n  const session = useSessionState();\n  const volatile = useVolatileState();\n  const isLoading = useIsLoading();\n\n  const results = volatile.logResults[logSearchKey(session.search)];\n  const logs = useMemo(() => results?.logs ?? [], [results?.logs]);\n\n  useEffect(() => {\n    window.logs = logs;\n    window.viewLog = (log: any) => api.applyCorrelationOpened(log.correlation, CorrelationOpenSource.grid);\n  }, [logs, api]);\n\n  useEffect(() => {\n    console.log('logs attached to window, try: viewLog(logs[0])');\n  }, []);\n\n  return (\n    <TabViewBox\n      body={() => <LogMetadataGrid isLoading={isLoading || !!results?.isSearching} logs={logs} />}\n      header={() => <TopSection onSearch={() => api.runLogSearch()} />}\n    />\n  );\n};\n"]}

package/lib/esm/LogViewer/LogSummary.d.ts

@@ -0,0 +1,6 @@
+import { StoryResult } from '@qpqjs/core';
+interface LogSummaryProps {
+    log: StoryResult<any>;
+}
+export declare const LogSummary: ({ log }: LogSummaryProps) => import("react").JSX.Element;
+export {};

package/lib/esm/LogViewer/LogSummary.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WebsocketAdminClientMessageEventType, WebSocketQueueQpqAdminServerMessageEventType, } from '@qpqjs/features';
+import { useSubscribeToWebSocketEvent, useWebsocketSendEvent } from '@qpqjs/web-react';
+import { useEffect, useState } from 'react';
+import { Box, Checkbox, CircularProgress, FormControlLabel, Typography } from '@mui/material';
+import { useAdminApp } from '../adminApp';
+export const LogSummary = ({ log }) => {
+    const [checkedLoading, setCheckedLoading] = useState(true);
+    const [logMetadata, setLogMetadata] = useState(null);
+    const [adminApi] = useAdminApp();
+    const sendMessage = useWebsocketSendEvent();
+    const handleCheckboxChange = (event) => {
+        setCheckedLoading(true);
+        const checkEvent = {
+            type: WebsocketAdminClientMessageEventType.MarkLogChecked,
+            payload: {
+                correlationId: log.correlation,
+                checked: event.target.checked,
+            },
+        };
+        adminApi.applyLogCheckToggled(log.correlation, event.target.checked);
+        sendMessage(checkEvent);
+    };
+    useSubscribeToWebSocketEvent(WebSocketQueueQpqAdminServerMessageEventType.LogMetadata, (_webSocketService, message) => {
+        if (message.payload.log.correlation !== log.correlation) {
+            return;
+        }
+        setCheckedLoading(false);
+        setLogMetadata(message.payload.log);
+    });
+    useEffect(() => {
+        const refreshEvent = {
+            type: WebsocketAdminClientMessageEventType.RefreshLogMetadata,
+            payload: {
+                correlationId: log.correlation,
+            },
+        };
+        sendMessage(refreshEvent);
+    }, [log.correlation, sendMessage]);
+    return (_jsxs(Box, { sx: { width: 1, p: 2 }, children: [_jsx(Typography, { gutterBottom: true, variant: "h6", children: "Log Summary" }), _jsxs(Typography, { children: ["Correlation ID: ", log.correlation] }), _jsx(FormControlLabel, { control: checkedLoading ? _jsx(CircularProgress, { size: 24 }) : _jsx(Checkbox, { checked: !!logMetadata?.checked, onChange: handleCheckboxChange }), label: "Mark as done" })] }));
+};
+//# sourceMappingURL=LogSummary.js.map

package/lib/esm/LogViewer/LogSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSummary.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSummary.tsx"],"names":[],"mappings":";AACA,OAAO,EAEL,oCAAoC,EAIpC,4CAA4C,GAC7C,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,4BAA4B,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEvF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM1C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;IACrD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEzE,MAAM,CAAC,QAAQ,CAAC,GAAG,WAAW,EAAE,CAAC;IACjC,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;IAE5C,MAAM,oBAAoB,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC1E,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAExB,MAAM,UAAU,GAA2D;YACzE,IAAI,EAAE,oCAAoC,CAAC,cAAc;YACzD,OAAO,EAAE;gBACP,aAAa,EAAE,GAAG,CAAC,WAAW;gBAC9B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;aAC9B;SACF,CAAC;QAEF,QAAQ,CAAC,oBAAoB,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACrE,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,4BAA4B,CAC1B,4CAA4C,CAAC,WAAW,EACxD,CAAC,iBAAiB,EAAE,OAA4D,EAAE,EAAE;QAClF,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,KAAK,GAAG,CAAC,WAAW,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,CACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAA+D;YAC/E,IAAI,EAAE,oCAAoC,CAAC,kBAAkB;YAC7D,OAAO,EAAE;gBACP,aAAa,EAAE,GAAG,CAAC,WAAW;aAC/B;SACF,CAAC;QAEF,WAAW,CAAC,YAAY,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,aACzB,KAAC,UAAU,IAAC,YAAY,QAAC,OAAO,EAAC,IAAI,4BAExB,EACb,MAAC,UAAU,mCAAkB,GAAG,CAAC,WAAW,IAAc,EAC1D,KAAC,gBAAgB,IACf,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,CAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,oBAAoB,GAAI,EACxI,KAAK,EAAC,cAAc,GACpB,IACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { StoryResult } from '@qpqjs/core';\nimport {\n  LogMetadata,\n  WebsocketAdminClientMessageEventType,\n  WebSocketQueueClientEventMessageQpqAdminMarkLogChecked,\n  WebSocketQueueClientEventMessageQpqAdminRefreshLogMetadata,\n  WebSocketQueueQpqAdminServerEventMessageLogMetadata,\n  WebSocketQueueQpqAdminServerMessageEventType,\n} from '@qpqjs/features';\nimport { useSubscribeToWebSocketEvent, useWebsocketSendEvent } from '@qpqjs/web-react';\n\nimport { useEffect, useState } from 'react';\nimport { Box, Checkbox, CircularProgress, FormControlLabel, Typography } from '@mui/material';\n\nimport { useAdminApp } from '../adminApp';\n\ninterface LogSummaryProps {\n  log: StoryResult<any>;\n}\n\nexport const LogSummary = ({ log }: LogSummaryProps) => {\n  const [checkedLoading, setCheckedLoading] = useState(true);\n  const [logMetadata, setLogMetadata] = useState<LogMetadata | null>(null);\n\n  const [adminApi] = useAdminApp();\n  const sendMessage = useWebsocketSendEvent();\n\n  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setCheckedLoading(true);\n\n    const checkEvent: WebSocketQueueClientEventMessageQpqAdminMarkLogChecked = {\n      type: WebsocketAdminClientMessageEventType.MarkLogChecked,\n      payload: {\n        correlationId: log.correlation,\n        checked: event.target.checked,\n      },\n    };\n\n    adminApi.applyLogCheckToggled(log.correlation, event.target.checked);\n    sendMessage(checkEvent);\n  };\n\n  useSubscribeToWebSocketEvent(\n    WebSocketQueueQpqAdminServerMessageEventType.LogMetadata,\n    (_webSocketService, message: WebSocketQueueQpqAdminServerEventMessageLogMetadata) => {\n      if (message.payload.log.correlation !== log.correlation) {\n        return;\n      }\n\n      setCheckedLoading(false);\n      setLogMetadata(message.payload.log);\n    },\n  );\n\n  useEffect(() => {\n    const refreshEvent: WebSocketQueueClientEventMessageQpqAdminRefreshLogMetadata = {\n      type: WebsocketAdminClientMessageEventType.RefreshLogMetadata,\n      payload: {\n        correlationId: log.correlation,\n      },\n    };\n\n    sendMessage(refreshEvent);\n  }, [log.correlation, sendMessage]);\n\n  return (\n    <Box sx={{ width: 1, p: 2 }}>\n      <Typography gutterBottom variant=\"h6\">\n        Log Summary\n      </Typography>\n      <Typography>Correlation ID: {log.correlation}</Typography>\n      <FormControlLabel\n        control={checkedLoading ? <CircularProgress size={24} /> : <Checkbox checked={!!logMetadata?.checked} onChange={handleCheckboxChange} />}\n        label=\"Mark as done\"\n      />\n    </Box>\n  );\n};\n"]}

package/lib/esm/LogViewer/LogSummaryDetails.d.ts

@@ -0,0 +1,6 @@
+import { StoryResult } from '@qpqjs/core';
+interface LogSummaryDetailsProps {
+    log: StoryResult<any>;
+}
+export declare const LogSummaryDetails: ({ log }: LogSummaryDetailsProps) => import("react").JSX.Element;
+export {};

package/lib/esm/LogViewer/LogSummaryDetails.js

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getFederatedKeyFromQpqFunctionRuntime, isQpqFunctionRuntimeAdvanced } from '@qpqjs/core';
+import { useState } from 'react';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
+import { GenericFunctionRenderer, genericFunctionRendererStyles } from './actionComponents/genericActionRenderer/AnyVariableView';
+const runtimeTypeToCamelCase = (runtimeType) => runtimeType.toLowerCase().replace(/_(\w)/g, (_, char) => char.toUpperCase());
+export const LogSummaryDetails = ({ log }) => {
+    const [expanded, setExpanded] = useState(false);
+    const totalRuntime = new Date(log.finishedAt).getTime() - new Date(log.startedAt).getTime();
+    const functionKey = log.qpqFunctionRuntimeInfo
+        ? getFederatedKeyFromQpqFunctionRuntime(log.qpqFunctionRuntimeInfo)
+        : runtimeTypeToCamelCase(log.runtimeType);
+    const basePath = log.qpqFunctionRuntimeInfo && isQpqFunctionRuntimeAdvanced(log.qpqFunctionRuntimeInfo) ? log.qpqFunctionRuntimeInfo.basePath : undefined;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { alignItems: "center", display: "flex", children: [_jsxs(Typography, { gutterBottom: true, variant: "h5", children: [log.runtimeType, " - ", log.moduleName] }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { onClick: () => setExpanded(!expanded), size: "small", children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) })] }), _jsx("div", { children: _jsxs("pre", { style: genericFunctionRendererStyles.pre, children: [_jsxs("div", { style: genericFunctionRendererStyles.commentBlock, children: [_jsx("div", { children: '// //////////////////////////////////////////////////////' }), _jsxs("div", { children: ['// src: ', functionKey] }), basePath && (_jsxs("div", { children: ['// basePath: ', basePath] })), log.fromCorrelation && (_jsxs("div", { children: ['// Caller: ', log.fromCorrelation] })), _jsxs("div", { children: ['// Total Runtime: ', _jsxs("span", { style: genericFunctionRendererStyles.highlightComment, children: [totalRuntime, " ms"] })] }), _jsx("div", { children: '// //////////////////////////////////////////////////////' })] }), _jsx(GenericFunctionRenderer, { args: log.input, expanded: expanded, functionName: functionKey.split('::').pop() || 'unknown' })] }) })] }));
+};
+//# sourceMappingURL=LogSummaryDetails.js.map

package/lib/esm/LogViewer/LogSummaryDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSummaryDetails.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSummaryDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qCAAqC,EAAE,4BAA4B,EAAe,MAAM,aAAa,CAAC;AAE/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,6BAA6B,EAAE,MAAM,0DAA0D,CAAC;AAMlI,MAAM,sBAAsB,GAAG,CAAC,WAAmB,EAAU,EAAE,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AAE7I,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,GAAG,EAA0B,EAAE,EAAE;IACnE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;IAC5F,MAAM,WAAW,GAAG,GAAG,CAAC,sBAAsB;QAC5C,CAAC,CAAC,qCAAqC,CAAC,GAAG,CAAC,sBAAsB,CAAC;QACnE,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC5C,MAAM,QAAQ,GACZ,GAAG,CAAC,sBAAsB,IAAI,4BAA4B,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3I,OAAO,CACL,8BACE,MAAC,GAAG,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,aACrC,MAAC,UAAU,IAAC,YAAY,QAAC,OAAO,EAAC,IAAI,aAClC,GAAG,CAAC,WAAW,SAAK,GAAG,CAAC,UAAU,IACxB,EACb,KAAC,OAAO,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,YAC9C,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,OAAO,YAC5D,QAAQ,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,GACxC,GACL,IACN,EACN,wBACE,eAAK,KAAK,EAAE,6BAA6B,CAAC,GAAG,aAC3C,eAAK,KAAK,EAAE,6BAA6B,CAAC,YAAY,aACpD,wBAAM,2DAA2D,GAAO,EACxE,0BACG,UAAU,EACV,WAAW,IACR,EACL,QAAQ,IAAI,CACX,0BACG,eAAe,EACf,QAAQ,IACL,CACP,EACA,GAAG,CAAC,eAAe,IAAI,CACtB,0BACG,aAAa,EACb,GAAG,CAAC,eAAe,IAChB,CACP,EACD,0BACG,oBAAoB,EACrB,gBAAM,KAAK,EAAE,6BAA6B,CAAC,gBAAgB,aAAG,YAAY,WAAW,IACjF,EACN,wBAAM,2DAA2D,GAAO,IACpE,EACN,KAAC,uBAAuB,IAAC,IAAI,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,IAAI,SAAS,GAAI,IACtH,GACF,IACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { getFederatedKeyFromQpqFunctionRuntime, isQpqFunctionRuntimeAdvanced, StoryResult } from '@qpqjs/core';\n\nimport { useState } from 'react';\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport { Box, IconButton, Tooltip, Typography } from '@mui/material';\n\nimport { GenericFunctionRenderer, genericFunctionRendererStyles } from './actionComponents/genericActionRenderer/AnyVariableView';\n\ninterface LogSummaryDetailsProps {\n  log: StoryResult<any>;\n}\n\nconst runtimeTypeToCamelCase = (runtimeType: string): string => runtimeType.toLowerCase().replace(/_(\\w)/g, (_, char) => char.toUpperCase());\n\nexport const LogSummaryDetails = ({ log }: LogSummaryDetailsProps) => {\n  const [expanded, setExpanded] = useState(false);\n\n  const totalRuntime = new Date(log.finishedAt).getTime() - new Date(log.startedAt).getTime();\n  const functionKey = log.qpqFunctionRuntimeInfo\n    ? getFederatedKeyFromQpqFunctionRuntime(log.qpqFunctionRuntimeInfo)\n    : runtimeTypeToCamelCase(log.runtimeType);\n  const basePath =\n    log.qpqFunctionRuntimeInfo && isQpqFunctionRuntimeAdvanced(log.qpqFunctionRuntimeInfo) ? log.qpqFunctionRuntimeInfo.basePath : undefined;\n\n  return (\n    <>\n      <Box alignItems=\"center\" display=\"flex\">\n        <Typography gutterBottom variant=\"h5\">\n          {log.runtimeType} - {log.moduleName}\n        </Typography>\n        <Tooltip title={expanded ? 'Collapse' : 'Expand'}>\n          <IconButton onClick={() => setExpanded(!expanded)} size=\"small\">\n            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}\n          </IconButton>\n        </Tooltip>\n      </Box>\n      <div>\n        <pre style={genericFunctionRendererStyles.pre}>\n          <div style={genericFunctionRendererStyles.commentBlock}>\n            <div>{'// //////////////////////////////////////////////////////'}</div>\n            <div>\n              {'// src: '}\n              {functionKey}\n            </div>\n            {basePath && (\n              <div>\n                {'// basePath: '}\n                {basePath}\n              </div>\n            )}\n            {log.fromCorrelation && (\n              <div>\n                {'// Caller: '}\n                {log.fromCorrelation}\n              </div>\n            )}\n            <div>\n              {'// Total Runtime: '}\n              <span style={genericFunctionRendererStyles.highlightComment}>{totalRuntime} ms</span>\n            </div>\n            <div>{'// //////////////////////////////////////////////////////'}</div>\n          </div>\n          <GenericFunctionRenderer args={log.input} expanded={expanded} functionName={functionKey.split('::').pop() || 'unknown'} />\n        </pre>\n      </div>\n    </>\n  );\n};\n"]}

package/lib/esm/LogViewer/LogSummaryReturn.d.ts

@@ -0,0 +1,6 @@
+import { StoryResult } from '@qpqjs/core';
+interface LogSummaryReturnProps {
+    log: StoryResult<any>;
+}
+export declare const LogSummaryReturn: ({ log }: LogSummaryReturnProps) => import("react").JSX.Element;
+export {};

package/lib/esm/LogViewer/LogSummaryReturn.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
+import { AnyVariableView, genericFunctionRendererStyles } from './actionComponents';
+export const LogSummaryReturn = ({ log }) => {
+    const [expanded, setExpanded] = useState(false);
+    return (_jsxs("div", { children: [_jsxs(Box, { alignItems: "center", display: "flex", children: [_jsx(Typography, { gutterBottom: true, variant: "h6", children: log.error ? 'Thrown Error' : 'Returned' }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { onClick: () => setExpanded(!expanded), size: "small", children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) })] }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: _jsx("pre", { style: genericFunctionRendererStyles.pre, children: log.error ? _jsx(AnyVariableView, { expanded: expanded, value: log.error }) : _jsx(AnyVariableView, { expanded: expanded, value: log.result }) }) })] }));
+};
+//# sourceMappingURL=LogSummaryReturn.js.map

package/lib/esm/LogViewer/LogSummaryReturn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSummaryReturn.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSummaryReturn.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AAMpF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAyB,EAAE,EAAE;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,CACL,0BACE,MAAC,GAAG,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,aACrC,KAAC,UAAU,IAAC,YAAY,QAAC,OAAO,EAAC,IAAI,YAClC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,GAC7B,EACb,KAAC,OAAO,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,YAC9C,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,OAAO,YAC5D,QAAQ,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,GACxC,GACL,IACN,EACN,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,YAC7D,cAAK,KAAK,EAAE,6BAA6B,CAAC,GAAG,YAC1C,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,GAAI,GAC/H,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { StoryResult } from '@qpqjs/core';\n\nimport { useState } from 'react';\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport { Box, IconButton, Tooltip, Typography } from '@mui/material';\n\nimport { AnyVariableView, genericFunctionRendererStyles } from './actionComponents';\n\ninterface LogSummaryReturnProps {\n  log: StoryResult<any>;\n}\n\nexport const LogSummaryReturn = ({ log }: LogSummaryReturnProps) => {\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <div>\n      <Box alignItems=\"center\" display=\"flex\">\n        <Typography gutterBottom variant=\"h6\">\n          {log.error ? 'Thrown Error' : 'Returned'}\n        </Typography>\n        <Tooltip title={expanded ? 'Collapse' : 'Expand'}>\n          <IconButton onClick={() => setExpanded(!expanded)} size=\"small\">\n            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}\n          </IconButton>\n        </Tooltip>\n      </Box>\n      <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>\n        <pre style={genericFunctionRendererStyles.pre}>\n          {log.error ? <AnyVariableView expanded={expanded} value={log.error} /> : <AnyVariableView expanded={expanded} value={log.result} />}\n        </pre>\n      </pre>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,4 @@
+export interface TopSectionProps {
+    onSearch: () => Promise<any>;
+}
+export declare function TopSection({ onSearch }: TopSectionProps): import("react").JSX.Element;

package/lib/esm/LogViewer/TopSection.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Autocomplete, IconButton, Menu } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import Grid from '@mui/material/Grid';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import { Box } from '@mui/system';
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { useSearchFields } from '../adminApp';
+import { AsyncButton } from '../components/AsyncButton';
+import { RuntimeTypes } from './constants';
+import { useServiceNames } from './hooks';
+export function TopSection({ onSearch }) {
+    const serviceOptions = useServiceNames();
+    const { runtimeType, handleRuntimeTypeOnChange, service, handleServiceOnChange, startDate, handleStartDateChange, endDate, handleEndDateChange, user, handleUserOnChange, info, handleInfoOnChange, deep, handleDeepOnChange, error, handleErrorOnChange, updateStartAndEndTimeSpan, } = useSearchFields();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleQuickTimeClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleQuickTimeClose = () => {
+        setAnchorEl(null);
+    };
+    const handleQuickTimeSelect = (minutes) => {
+        updateStartAndEndTimeSpan(minutes);
+        handleQuickTimeClose();
+    };
+    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { columns: 12, container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 2, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "runtime-select-label", children: "Runtime Type" }), _jsx(Select, { id: "demo-simple-select", label: "Runtime Type", labelId: "runtime-select-label", onChange: handleRuntimeTypeOnChange, value: runtimeType, children: RuntimeTypes.map((key) => (_jsx(MenuItem, { value: key, children: key }, key))) })] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(FormControl, { fullWidth: true, children: _jsx(Autocomplete, { getOptionLabel: (option) => option.label, onChange: handleServiceOnChange, options: serviceOptions, renderInput: (params) => (_jsx(TextField, { ...params, InputLabelProps: {
+                                        shrink: true,
+                                    }, label: "Service Name" })), value: serviceOptions.find((o) => o.value === service) || null }) }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Box, { position: "relative", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "Start DateTime", onChange: handleStartDateChange, value: startDate }) }), _jsx(IconButton, { "aria-controls": "quick-time-menu", "aria-haspopup": "true", "aria-label": "quick time select", onClick: handleQuickTimeClick, sx: {
+                                        position: 'absolute',
+                                        right: '-28px',
+                                        top: '50%',
+                                        transform: 'translateY(-50%)',
+                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", onChange: handleEndDateChange, value: endDate }) }) }), _jsx(Grid, { item: true, xs: 4, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
+                                    shrink: true,
+                                }, label: "User", onChange: handleUserOnChange, value: user }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
+                                    shrink: true,
+                                }, label: "Info", onChange: handleInfoOnChange, value: info }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
+                                    shrink: true,
+                                }, label: "Error Filter", onChange: handleErrorOnChange, value: error }) }) }), _jsx(Grid, { item: true, xs: 10, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
+                                    shrink: true,
+                                }, label: "Deep Search", 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.", value: deep }) }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(AsyncButton, { onClick: () => onSearch(), children: "Search" }) })] }), _jsxs(Menu, { anchorEl: anchorEl, id: "quick-time-menu", keepMounted: true, onClose: handleQuickTimeClose, open: Boolean(anchorEl), children: [_jsx(MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
+}
+//# sourceMappingURL=TopSection.js.map

package/lib/esm/LogViewer/TopSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopSection.js","sourceRoot":"","sources":["../../../src/LogViewer/TopSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport { Autocomplete, IconButton, Menu } from '@mui/material';\nimport FormControl from '@mui/material/FormControl';\nimport Grid from '@mui/material/Grid';\nimport InputLabel from '@mui/material/InputLabel';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport TextField from '@mui/material/TextField';\nimport { Box } from '@mui/system';\nimport { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\n\nimport { useSearchFields } from '../adminApp';\nimport { AsyncButton } from '../components/AsyncButton';\nimport { RuntimeTypes } from './constants';\nimport { useServiceNames } from './hooks';\n\nexport interface TopSectionProps {\n  onSearch: () => Promise<any>;\n}\n\nexport function TopSection({ onSearch }: TopSectionProps) {\n  const serviceOptions = useServiceNames();\n\n  const {\n    runtimeType,\n    handleRuntimeTypeOnChange,\n    service,\n    handleServiceOnChange,\n    startDate,\n    handleStartDateChange,\n    endDate,\n    handleEndDateChange,\n    user,\n    handleUserOnChange,\n    info,\n    handleInfoOnChange,\n    deep,\n    handleDeepOnChange,\n    error,\n    handleErrorOnChange,\n    updateStartAndEndTimeSpan,\n  } = useSearchFields();\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleQuickTimeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleQuickTimeClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleQuickTimeSelect = (minutes: number) => {\n    updateStartAndEndTimeSpan(minutes);\n    handleQuickTimeClose();\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Grid columns={12} container spacing={2}>\n        <Grid item xs={2}>\n          <FormControl fullWidth>\n            <InputLabel id=\"runtime-select-label\">Runtime Type</InputLabel>\n            <Select\n              id=\"demo-simple-select\"\n              label=\"Runtime Type\"\n              labelId=\"runtime-select-label\"\n              onChange={handleRuntimeTypeOnChange}\n              value={runtimeType}\n            >\n              {RuntimeTypes.map((key) => (\n                <MenuItem key={key} value={key}>\n                  {key}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={2}>\n          <FormControl fullWidth>\n            <Autocomplete\n              getOptionLabel={(option) => option.label}\n              onChange={handleServiceOnChange}\n              options={serviceOptions}\n              renderInput={(params) => (\n                <TextField\n                  {...params}\n                  InputLabelProps={{\n                    shrink: true,\n                  }}\n                  label=\"Service Name\"\n                />\n              )}\n              value={serviceOptions.find((o) => o.value === service) || null}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={2}>\n          <Box position=\"relative\">\n            <FormControl fullWidth>\n              <DateTimePicker label=\"Start DateTime\" onChange={handleStartDateChange} value={startDate} />\n            </FormControl>\n            <IconButton\n              aria-controls=\"quick-time-menu\"\n              aria-haspopup=\"true\"\n              aria-label=\"quick time select\"\n              onClick={handleQuickTimeClick}\n              sx={{\n                position: 'absolute',\n                right: '-28px',\n                top: '50%',\n                transform: 'translateY(-50%)',\n              }}\n            >\n              <ExpandMoreIcon />\n            </IconButton>\n          </Box>\n        </Grid>\n        <Grid item xs={2}>\n          <FormControl fullWidth>\n            <DateTimePicker label=\"End DateTime\" onChange={handleEndDateChange} value={endDate} />\n          </FormControl>\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"User\"\n              onChange={handleUserOnChange}\n              value={user}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"Info\"\n              onChange={handleInfoOnChange}\n              value={info}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"Error Filter\"\n              onChange={handleErrorOnChange}\n              value={error}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={10}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"Deep Search\"\n              onChange={handleDeepOnChange}\n              placeholder=\"Use with caution, reduce results with above fields first, this is a contains search on the log JSON, so it will be slow.\"\n              value={deep}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={2}>\n          <AsyncButton onClick={() => onSearch()}>Search</AsyncButton>\n        </Grid>\n      </Grid>\n      <Menu anchorEl={anchorEl} id=\"quick-time-menu\" keepMounted onClose={handleQuickTimeClose} open={Boolean(anchorEl)}>\n        <MenuItem onClick={() => handleQuickTimeSelect(5)}>Last 5 minutes</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(30)}>Last 30 minutes</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(1 * 60)}>Last hour</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(3 * 60)}>Last 3 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(8 * 60)}>Last 8 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(16 * 60)}>Last 16 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(24 * 60)}>Last 24 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(7 * 24 * 60)}>Last 7 days</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(30 * 24 * 60)}>Last month</MenuItem>\n      </Menu>\n    </LocalizationProvider>\n  );\n}\n"]}

package/lib/esm/LogViewer/TraceViewer/LocalValueTree.d.ts

@@ -0,0 +1,8 @@
+import { QpqExecutionTraceValue } from '@qpqjs/core';
+import React from 'react';
+interface LocalValueTreeProps {
+    name: string;
+    value: QpqExecutionTraceValue;
+}
+export declare const LocalValueTree: React.FC<LocalValueTreeProps>;
+export {};

package/lib/esm/LogViewer/TraceViewer/LocalValueTree.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+const primitiveStyle = { color: 'rgba(70, 140, 200, 1)' };
+const markerStyle = { color: 'rgba(150, 150, 150, 1)', fontStyle: 'italic' };
+const nameStyle = { fontWeight: 600 };
+const branchStyle = { paddingLeft: 20 };
+// Capture-time placeholders («circular», «function fn», «+3 more», …) come through as
+// strings — render them dim/italic so they read as markers, not data.
+const isMarkerString = (value) => value.startsWith('«') && value.endsWith('»');
+const renderPrimitive = (value) => {
+    if (typeof value === 'string') {
+        return isMarkerString(value) ? _jsx("span", { style: markerStyle, children: value.slice(1, -1) }) : _jsx("span", { style: primitiveStyle, children: `'${value}'` });
+    }
+    return _jsx("span", { style: primitiveStyle, children: String(value) });
+};
+const RenderNode = ({ label, node }) => {
+    if (node === null || typeof node !== 'object') {
+        return (_jsxs("div", { style: branchStyle, children: [_jsx("span", { style: nameStyle, children: label }), ": ", renderPrimitive(node)] }));
+    }
+    const isArray = Array.isArray(node);
+    const entries = Object.entries(node);
+    const summary = isArray ? `[${entries.length}]` : `{${entries.length}}`;
+    return (_jsxs("details", { style: branchStyle, children: [_jsxs("summary", { style: { cursor: 'pointer' }, children: [_jsx("span", { style: nameStyle, children: label }), " ", _jsx("span", { style: markerStyle, children: summary })] }), entries.map(([key, child]) => (_jsx(RenderNode, { label: key, node: child }, key)))] }));
+};
+export const LocalValueTree = ({ name, value }) => {
+    const parsed = useMemo(() => {
+        if (!value.json) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(value.json);
+        }
+        catch {
+            return undefined;
+        }
+    }, [value.json]);
+    if (parsed === undefined || parsed === null || typeof parsed !== 'object') {
+        return (_jsxs("div", { children: [_jsx("span", { style: nameStyle, children: name }), " = ", value.preview] }));
+    }
+    return (_jsxs("details", { children: [_jsxs("summary", { style: { cursor: 'pointer' }, children: [_jsx("span", { style: nameStyle, children: name }), " = ", value.preview] }), Object.entries(parsed).map(([key, child]) => (_jsx(RenderNode, { label: key, node: child }, key)))] }));
+};
+//# sourceMappingURL=LocalValueTree.js.map

package/lib/esm/LogViewer/TraceViewer/LocalValueTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalValueTree.js","sourceRoot":"","sources":["../../../../src/LogViewer/TraceViewer/LocalValueTree.tsx"],"names":[],"mappings":"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","sourcesContent":["import { QpqExecutionTraceValue } from '@qpqjs/core';\n\nimport React, { useMemo } from 'react';\n\n// Expandable rendering of one captured local. Values with a deep json capture render as\n// a collapsible tree (native <details>, so state survives without bookkeeping); values\n// without one fall back to their preview string.\n\ninterface LocalValueTreeProps {\n  name: string;\n  value: QpqExecutionTraceValue;\n}\n\nconst primitiveStyle: React.CSSProperties = { color: 'rgba(70, 140, 200, 1)' };\nconst markerStyle: React.CSSProperties = { color: 'rgba(150, 150, 150, 1)', fontStyle: 'italic' };\nconst nameStyle: React.CSSProperties = { fontWeight: 600 };\nconst branchStyle: React.CSSProperties = { paddingLeft: 20 };\n\n// Capture-time placeholders («circular», «function fn», «+3 more», …) come through as\n// strings — render them dim/italic so they read as markers, not data.\nconst isMarkerString = (value: string): boolean => value.startsWith('«') && value.endsWith('»');\n\nconst renderPrimitive = (value: unknown): React.ReactNode => {\n  if (typeof value === 'string') {\n    return isMarkerString(value) ? <span style={markerStyle}>{value.slice(1, -1)}</span> : <span style={primitiveStyle}>{`'${value}'`}</span>;\n  }\n  return <span style={primitiveStyle}>{String(value)}</span>;\n};\n\nconst RenderNode: React.FC<{ label: string; node: unknown }> = ({ label, node }) => {\n  if (node === null || typeof node !== 'object') {\n    return (\n      <div style={branchStyle}>\n        <span style={nameStyle}>{label}</span>: {renderPrimitive(node)}\n      </div>\n    );\n  }\n\n  const isArray = Array.isArray(node);\n  const entries = Object.entries(node as Record<string, unknown>);\n  const summary = isArray ? `[${entries.length}]` : `{${entries.length}}`;\n\n  return (\n    <details style={branchStyle}>\n      <summary style={{ cursor: 'pointer' }}>\n        <span style={nameStyle}>{label}</span> <span style={markerStyle}>{summary}</span>\n      </summary>\n      {entries.map(([key, child]) => (\n        <RenderNode key={key} label={key} node={child} />\n      ))}\n    </details>\n  );\n};\n\nexport const LocalValueTree: React.FC<LocalValueTreeProps> = ({ name, value }) => {\n  const parsed = useMemo(() => {\n    if (!value.json) {\n      return undefined;\n    }\n    try {\n      return JSON.parse(value.json);\n    } catch {\n      return undefined;\n    }\n  }, [value.json]);\n\n  if (parsed === undefined || parsed === null || typeof parsed !== 'object') {\n    return (\n      <div>\n        <span style={nameStyle}>{name}</span> = {value.preview}\n      </div>\n    );\n  }\n\n  return (\n    <details>\n      <summary style={{ cursor: 'pointer' }}>\n        <span style={nameStyle}>{name}</span> = {value.preview}\n      </summary>\n      {Object.entries(parsed as Record<string, unknown>).map(([key, child]) => (\n        <RenderNode key={key} label={key} node={child} />\n      ))}\n    </details>\n  );\n};\n"]}

package/lib/esm/LogViewer/TraceViewer/TraceViewer.d.ts

@@ -0,0 +1,10 @@
+import { QpqExecutionTrace } from '@qpqjs/core';
+import React from 'react';
+interface TraceViewerProps {
+    trace: QpqExecutionTrace;
+    hideExternalSteps: boolean;
+    onHideExternalStepsChange: (hideExternalSteps: boolean) => void;
+    actions?: React.ReactNode;
+}
+export declare const TraceViewer: React.FC<TraceViewerProps>;
+export {};