@localstack/appinspector-ui 1.0.29 → 1.0.31

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
 import { Box as Box7 } from "@mui/material";
-import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState5 } from "react";
 import { useNavigate } from "react-router-dom";
 
 // src/api/use-api.tsx
@@ -3476,6 +3476,28 @@ var useStatus = () => {
   return { checking, checkStatus, error, status };
 };
 
+// src/utils/use-search-param-codec.ts
+import { useCallback as useCallback5, useMemo as useMemo4 } from "react";
+import { useSearchParams } from "react-router-dom";
+var useSearchParamCodec = (key, codec) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const raw = searchParams.get(key) ?? void 0;
+  const value = useMemo4(() => {
+    return codec.decode(raw);
+  }, [raw, codec]);
+  const setValue = useCallback5(
+    (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
 import { jsx as jsx130 } from "react/jsx-runtime";
 var spansPerPageOptions = [25, 50, 100];
@@ -3486,10 +3508,30 @@ var SpansListPage = () => {
   const hasFetched = useRef3(false);
   const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
   const mapPageToNextCursor = useRef3({});
-  const [page, setPage] = useState5(0);
-  const [pageSize, setPageSize] = useState5(100);
+  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] = useState5(0);
-  const queryOptions = useMemo4(() => {
+  const queryOptions = useMemo5(() => {
     return {
       is_write_operation: filterWriteOperations ? true : void 0,
       limit: pageSize,
@@ -3498,7 +3540,7 @@ var SpansListPage = () => {
   }, [filterWriteOperations, pageSize, page]);
   const [fetchError, setFetchError] = useState5();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = useCallback5(async () => {
+  const fetchSpans = useCallback6(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans(queryOptions);
@@ -3515,7 +3557,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, page, queryOptions]);
-  const fetchSpansSync = useCallback5(() => {
+  const fetchSpansSync = useCallback6(() => {
     void fetchSpans();
   }, [fetchSpans]);
   useEffect4(() => {
@@ -3530,11 +3572,16 @@ var SpansListPage = () => {
   }, [fetchSpans]);
   const navigate = useNavigate();
   const { resolveLink } = useAppInspector();
-  const navigateToSpan = useCallback5((span) => {
+  const navigateToSpan = useCallback6((span) => {
     const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
-    navigate(`${url}?spanId=${span.span_id}`);
-  }, [navigate, resolveLink]);
-  const clearSpans = useCallback5(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 = useCallback6(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -3548,7 +3595,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = useCallback5(() => {
+  const handleRetry = useCallback6(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -3608,12 +3655,12 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box19, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback7, useEffect as useEffect7, useState as useState10 } from "react";
-import { useNavigate as useNavigate2, useParams, useSearchParams } from "react-router-dom";
+import { useCallback as useCallback8, useEffect as useEffect7, useState as useState10 } from "react";
+import { useNavigate as useNavigate2, useParams, useSearchParams as useSearchParams2 } from "react-router-dom";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box15, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3847,7 +3894,7 @@ import { Box as Box14 } from "@mui/material";
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box12, Grid as Grid3, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect5, useMemo as useMemo6, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo7, useRef as useRef4, useState as useState7 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
@@ -3998,7 +4045,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
 import { Box as Box11, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
-import { useMemo as useMemo5, useState as useState6 } from "react";
+import { useMemo as useMemo6, useState as useState6 } from "react";
 import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -4009,7 +4056,7 @@ var getChipColors = (status) => {
 };
 var IAMPermissionItem = ({ event }) => {
   const [isOpen, setIsOpen] = useState6(false);
-  const parsedData = useMemo5(() => {
+  const parsedData = useMemo6(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -4082,8 +4129,8 @@ var EventMessage = ({ event }) => {
   const [isOpen, setIsOpen] = useState7(false);
   const [isOverflowing, setIsOverflowing] = useState7(false);
   const textReference = useRef4(null);
-  const parsedMessage = useMemo6(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = useMemo6(
+  const parsedMessage = useMemo7(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = useMemo7(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
@@ -4100,11 +4147,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = useMemo6(
+  const hasAdditionalContent = useMemo7(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = useMemo6(
+  const shouldShowToggle = useMemo7(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -4325,7 +4372,7 @@ var EventSection = ({
 // src/components/event-details/event-details.tsx
 import { Fragment as Fragment6, jsx as jsx138, jsxs as jsxs129 } from "react/jsx-runtime";
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = useMemo7(() => {
+  const attributes = useMemo8(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
   }, [selectedEvent?.attributes]);
@@ -4425,7 +4472,7 @@ function renderKeyValue(key, value) {
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme2 } from "@mui/material";
 import { Background, ReactFlow, useReactFlow as useReactFlow2 } from "@xyflow/react";
-import { useCallback as useCallback6, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect6, useState as useState9 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box17, Stack as Stack3, Typography as Typography10 } from "@mui/material";
@@ -4436,10 +4483,10 @@ import { memo as memo2 } from "react";
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
 import { Box as Box16, Tooltip as Tooltip4 } from "@mui/material";
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { jsx as jsx139 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
-  const icon = useMemo8(() => {
+  const icon = useMemo9(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ jsx139(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -4452,7 +4499,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = useMemo8(() => {
+  const color = useMemo9(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4795,7 +4842,7 @@ var TraceGraph = ({
   const [edges, setEdges] = useState9([]);
   const [initialViewSet, setInitialViewSet] = useState9(false);
   const { fitView, setCenter } = useReactFlow2();
-  const updateSelectedNode = useCallback6((nodeId) => {
+  const updateSelectedNode = useCallback7((nodeId) => {
     const toSelect = new Set(nodeId ? [nodeId] : []);
     setNodes((previousNodes) => {
       return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
@@ -4861,7 +4908,7 @@ var TraceGraph = ({
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = useCallback6((_event, node) => {
+  const onNodeClick = useCallback7((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
@@ -5031,13 +5078,13 @@ var TraceGraphView = ({
 };
 var TraceGraphPage = () => {
   const { traceId } = useParams();
-  const [searchParameters] = useSearchParams();
+  const [searchParameters] = useSearchParams2();
   const spanId = searchParameters.get("spanId");
   const api = useAppInspectorApi();
   const [spans, setSpans] = useState10();
   const [loading, setLoading] = useState10(false);
   const [fetchError, setFetchError] = useState10();
-  const fetchSpans = useCallback7(async () => {
+  const fetchSpans = useCallback8(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -5059,7 +5106,7 @@ var TraceGraphPage = () => {
   const [selectedEvent, setSelectedEvent] = useState10();
   const [viewPortPixelWidth, setViewPortPixelWidth] = useState10(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = useCallback7(() => {
+  const calculateDrawerWidth = useCallback8(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -5081,19 +5128,23 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = useCallback7((event) => {
+  const handleEventSelect = useCallback8((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = useCallback7(() => {
+  const handleRetry = useCallback8(() => {
     void checkStatus();
   }, [checkStatus]);
   const navigate = useNavigate2();
   const { resolveLink } = useAppInspector();
-  const navigateToSpansList = useCallback7(() => {
+  const navigateToSpansList = useCallback8(() => {
     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__ */ jsx143(
     TraceGraphView,
     {