@localstack/appinspector-ui 1.0.30 → 1.0.31

package/dist/index.cjs

@@ -37,8 +37,8 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material8 = require("@mui/material");
-var import_react9 = require("react");
-var import_react_router_dom = require("react-router-dom");
+var import_react10 = require("react");
+var import_react_router_dom2 = require("react-router-dom");
 
 // src/api/use-api.tsx
 var import_react = require("react");
@@ -3513,29 +3513,71 @@ var useStatus = () => {
   return { checking, checkStatus, error, status };
 };
 
+// src/utils/use-search-param-codec.ts
+var import_react9 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var useSearchParamCodec = (key, codec) => {
+  const [searchParams, setSearchParams] = (0, import_react_router_dom.useSearchParams)();
+  const raw = searchParams.get(key) ?? void 0;
+  const value = (0, import_react9.useMemo)(() => {
+    return codec.decode(raw);
+  }, [raw, codec]);
+  const setValue = (0, import_react9.useCallback)(
+    (next) => {
+      setSearchParams((previous) => {
+        const nextParams = new URLSearchParams(previous);
+        nextParams.set(key, codec.encode(next));
+        return nextParams;
+      });
+    },
+    [key, codec, setSearchParams]
+  );
+  return [value, setValue];
+};
+
 // src/pages/spans-list-page.tsx
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var spansPerPageOptions = [25, 50, 100];
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react9.useState)();
-  const [loading, setLoading] = (0, import_react9.useState)(false);
-  const hasFetched = (0, import_react9.useRef)(false);
+  const [spans, setSpans] = (0, import_react10.useState)();
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const hasFetched = (0, import_react10.useRef)(false);
   const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
-  const mapPageToNextCursor = (0, import_react9.useRef)({});
-  const [page, setPage] = (0, import_react9.useState)(0);
-  const [pageSize, setPageSize] = (0, import_react9.useState)(100);
-  const [spanCount, setSpanCount] = (0, import_react9.useState)(0);
-  const queryOptions = (0, import_react9.useMemo)(() => {
+  const mapPageToNextCursor = (0, import_react10.useRef)({});
+  const [page, setPage] = useSearchParamCodec("page", {
+    decode: (raw) => {
+      const defaultPage = 0;
+      if (!raw) {
+        return defaultPage;
+      }
+      const parsed = Number.parseInt(raw, 10);
+      return Number.isNaN(parsed) || parsed < 0 ? defaultPage : parsed;
+    },
+    encode: (value) => value.toString()
+  });
+  const [pageSize, setPageSize] = useSearchParamCodec("pageSize", {
+    decode: (raw) => {
+      const defaultPageSize = 100;
+      if (!raw) {
+        return defaultPageSize;
+      }
+      const parsed = Number.parseInt(raw, 10);
+      return spansPerPageOptions.includes(parsed) ? parsed : defaultPageSize;
+    },
+    encode: (value) => value.toString()
+  });
+  const [spanCount, setSpanCount] = (0, import_react10.useState)(0);
+  const queryOptions = (0, import_react10.useMemo)(() => {
     return {
       is_write_operation: filterWriteOperations ? true : void 0,
       limit: pageSize,
       pagination_token: mapPageToNextCursor.current[page - 1]
     };
   }, [filterWriteOperations, pageSize, page]);
-  const [fetchError, setFetchError] = (0, import_react9.useState)();
+  const [fetchError, setFetchError] = (0, import_react10.useState)();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = (0, import_react9.useCallback)(async () => {
+  const fetchSpans = (0, import_react10.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans(queryOptions);
@@ -3552,26 +3594,31 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, page, queryOptions]);
-  const fetchSpansSync = (0, import_react9.useCallback)(() => {
+  const fetchSpansSync = (0, import_react10.useCallback)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (hasFetched.current) return;
     if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
   }, [fetchSpans, status]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
-  const navigate = (0, import_react_router_dom.useNavigate)();
+  const navigate = (0, import_react_router_dom2.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpan = (0, import_react9.useCallback)((span) => {
+  const navigateToSpan = (0, import_react10.useCallback)((span) => {
     const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
-    navigate(`${url}?spanId=${span.span_id}`);
-  }, [navigate, resolveLink]);
-  const clearSpans = (0, import_react9.useCallback)(async () => {
+    const searchParams = new URLSearchParams({
+      page: String(page),
+      pageSize: String(pageSize),
+      spanId: span.span_id
+    });
+    navigate(`${url}?${searchParams.toString()}`);
+  }, [navigate, resolveLink, page, pageSize]);
+  const clearSpans = (0, import_react10.useCallback)(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -3585,7 +3632,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = (0, import_react9.useCallback)(() => {
+  const handleRetry = (0, import_react10.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -3644,13 +3691,13 @@ var SpansListPage = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material21 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react22 = require("@xyflow/react");
-var import_react23 = require("react");
-var import_react_router_dom2 = require("react-router-dom");
+var import_react23 = require("@xyflow/react");
+var import_react24 = require("react");
+var import_react_router_dom3 = require("react-router-dom");
 
 // src/components/event-details/event-details.tsx
 var import_material16 = require("@mui/material");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3884,7 +3931,7 @@ var import_material15 = require("@mui/material");
 // src/components/event-details/event-detail.tsx
 var import_icons_material7 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material4 = require("@mui/icons-material");
@@ -4035,7 +4082,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -4045,8 +4092,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const parsedData = (0, import_react10.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const parsedData = (0, import_react11.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -4116,15 +4163,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react11.useState)(false);
-  const textReference = (0, import_react11.useRef)(null);
-  const parsedMessage = (0, import_react11.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react11.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react12.useState)(false);
+  const textReference = (0, import_react12.useRef)(null);
+  const parsedMessage = (0, import_react12.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react12.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -4137,11 +4184,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react11.useMemo)(
+  const hasAdditionalContent = (0, import_react12.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react11.useMemo)(
+  const shouldShowToggle = (0, import_react12.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -4283,10 +4330,10 @@ var EventDetail = ({
 // src/components/event-details/toggle-section.tsx
 var import_icons_material8 = require("@mui/icons-material");
 var import_material14 = require("@mui/material");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime136 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material14.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       import_material14.Box,
@@ -4362,7 +4409,7 @@ var EventSection = ({
 // src/components/event-details/event-details.tsx
 var import_jsx_runtime138 = require("react/jsx-runtime");
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = (0, import_react13.useMemo)(() => {
+  const attributes = (0, import_react14.useMemo)(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
   }, [selectedEvent?.attributes]);
@@ -4461,22 +4508,22 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material20 = require("@mui/material");
-var import_react20 = require("@xyflow/react");
-var import_react21 = require("react");
+var import_react21 = require("@xyflow/react");
+var import_react22 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material18 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react15 = require("@xyflow/react");
-var import_react16 = require("react");
+var import_react16 = require("@xyflow/react");
+var import_react17 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime139 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react14.useMemo)(() => {
+  const icon = (0, import_react15.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -4489,7 +4536,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = (0, import_react14.useMemo)(() => {
+  const color = (0, import_react15.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4528,7 +4575,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react16.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
@@ -4552,8 +4599,8 @@ var ServiceNode = (0, import_react16.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react15.Handle, { position: import_react15.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react15.Handle, { position: import_react15.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react16.Handle, { position: import_react16.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react16.Handle, { position: import_react16.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
             ServiceCell,
             {
@@ -4613,7 +4660,7 @@ var ServiceNode = (0, import_react16.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react17 = require("@xyflow/react");
+var import_react18 = require("@xyflow/react");
 var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
@@ -4629,8 +4676,8 @@ var generateNodesAndEdges = (event, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react17.Position.Right,
-    targetPosition: import_react17.Position.Left,
+    sourcePosition: import_react18.Position.Right,
+    targetPosition: import_react18.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -4640,7 +4687,7 @@ var generateNodesAndEdges = (event, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react17.MarkerType.Arrow,
+        type: import_react18.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -4708,8 +4755,8 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
-var import_react18 = require("@xyflow/react");
-var import_react19 = require("react");
+var import_react19 = require("@xyflow/react");
+var import_react20 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4756,9 +4803,9 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react19.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react18.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react18.useReactFlow)();
+var Controls = (0, import_react20.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react19.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react19.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -4828,17 +4875,17 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react21.useState)([]);
-  const [edges, setEdges] = (0, import_react21.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react21.useState)(false);
-  const { fitView, setCenter } = (0, import_react20.useReactFlow)();
-  const updateSelectedNode = (0, import_react21.useCallback)((nodeId) => {
+  const [nodes, setNodes] = (0, import_react22.useState)([]);
+  const [edges, setEdges] = (0, import_react22.useState)([]);
+  const [initialViewSet, setInitialViewSet] = (0, import_react22.useState)(false);
+  const { fitView, setCenter } = (0, import_react21.useReactFlow)();
+  const updateSelectedNode = (0, import_react22.useCallback)((nodeId) => {
     const toSelect = new Set(nodeId ? [nodeId] : []);
     setNodes((previousNodes) => {
       return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
     });
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4873,7 +4920,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -4893,12 +4940,12 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react21.useCallback)((_event, node) => {
+  const onNodeClick = (0, import_react22.useCallback)((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
@@ -4919,7 +4966,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
-      import_react20.ReactFlow,
+      import_react21.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -4934,7 +4981,7 @@ var TraceGraph = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-            import_react20.Background,
+            import_react21.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -5040,7 +5087,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react22.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react23.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -5067,14 +5114,14 @@ var TraceGraphView = ({
   );
 };
 var TraceGraphPage = () => {
-  const { traceId } = (0, import_react_router_dom2.useParams)();
-  const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
+  const { traceId } = (0, import_react_router_dom3.useParams)();
+  const [searchParameters] = (0, import_react_router_dom3.useSearchParams)();
   const spanId = searchParameters.get("spanId");
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react23.useState)();
-  const [loading, setLoading] = (0, import_react23.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react23.useState)();
-  const fetchSpans = (0, import_react23.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react24.useState)();
+  const [loading, setLoading] = (0, import_react24.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react24.useState)();
+  const fetchSpans = (0, import_react24.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -5089,14 +5136,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react23.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react23.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react23.useState)(0);
+  const [open, setOpen] = (0, import_react24.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react24.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react24.useState)(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react23.useCallback)(() => {
+  const calculateDrawerWidth = (0, import_react24.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -5104,7 +5151,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -5118,19 +5165,23 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react23.useCallback)((event) => {
+  const handleEventSelect = (0, import_react24.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = (0, import_react23.useCallback)(() => {
+  const handleRetry = (0, import_react24.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigate = (0, import_react_router_dom2.useNavigate)();
+  const navigate = (0, import_react_router_dom3.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpansList = (0, import_react23.useCallback)(() => {
+  const navigateToSpansList = (0, import_react24.useCallback)(() => {
     const url = resolveLink({ to: "spans-list" });
-    navigate(url);
-  }, [navigate, resolveLink]);
+    const searchParams = new URLSearchParams({
+      page: searchParameters.get("page") ?? "",
+      pageSize: searchParameters.get("pageSize") ?? ""
+    });
+    navigate(`${url}?${searchParams.toString()}`);
+  }, [navigate, resolveLink, searchParameters]);
   return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     TraceGraphView,
     {