@localstack/appinspector-ui 1.0.52 → 1.0.53

package/dist/index.js

@@ -58,7 +58,7 @@ var init_is_prop_valid_esm = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box18 } from "@mui/material";
-import { useCallback as useCallback9, useState as useState13 } from "react";
+import { useCallback as useCallback8, useState as useState12 } from "react";
 
 // src/components/spans-list/spans-list.tsx
 import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
@@ -72,7 +72,6 @@ import {
   FormControlLabel,
   Grid,
   Paper,
-  Switch,
   Table,
   TableBody,
   TableCell,
@@ -12152,11 +12151,9 @@ var SpansDataGrid = ({
   fetchingForward,
   hasMoreBackward,
   hasMoreForward,
-  includeReadOperations = false,
   onClearSpans,
   onFetchBackward,
   onFetchForward,
-  onIncludeReadOperationsChange,
   onSpanClick,
   spans
 }) => {
@@ -12238,22 +12235,6 @@ var SpansDataGrid = ({
   return /* @__PURE__ */ jsxs120(Fragment3, { children: [
     /* @__PURE__ */ jsx124(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ jsx124(Box3, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx124(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx124(
-            Switch,
-            {
-              checked: includeReadOperations,
-              onChange: (event) => {
-                onIncludeReadOperationsChange(event.target.checked);
-              },
-              size: "small"
-            }
-          ),
-          label: "Include Read Operations"
-        }
-      ),
       /* @__PURE__ */ jsx124(
         FormControlLabel,
         {
@@ -12413,11 +12394,9 @@ var SpansList = (props) => {
         fetchingForward: props.fetchingForward,
         hasMoreBackward: props.hasMoreBackward,
         hasMoreForward: props.hasMoreForward,
-        includeReadOperations: props.includeReadOperations,
         onClearSpans: props.onClearSpans,
         onFetchBackward: props.onFetchBackward,
         onFetchForward: props.onFetchForward,
-        onIncludeReadOperationsChange: props.onIncludeReadOperationsChange,
         onRefresh: props.onRefresh,
         onSpanClick: props.onSpanClick,
         refetching: props.refetching,
@@ -12724,59 +12703,8 @@ var StatusMessage = ({
   return /* @__PURE__ */ jsx126(Fragment4, {});
 };
 
-// src/hooks/use-local-storage.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useState as useState4 } from "react";
-function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState4(() => {
-    try {
-      const item = globalThis.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      console.error(`Error reading localStorage key "${key}":`, error);
-      return initialValue;
-    }
-  });
-  const setValue = useCallback3((value) => {
-    try {
-      setStoredValue(value);
-      globalThis.localStorage.setItem(key, JSON.stringify(value));
-      globalThis.dispatchEvent(new StorageEvent("storage", {
-        key,
-        newValue: JSON.stringify(value)
-      }));
-    } catch (error) {
-      console.error(`Error setting localStorage key "${key}":`, error);
-    }
-  }, [key]);
-  useEffect11(() => {
-    const handleStorageChange = (event) => {
-      if (event.key === key && event.newValue !== null) {
-        try {
-          setStoredValue(JSON.parse(event.newValue));
-        } catch (error) {
-          console.error(`Error parsing localStorage key "${key}":`, error);
-        }
-      }
-    };
-    globalThis.addEventListener("storage", handleStorageChange);
-    return () => {
-      globalThis.removeEventListener("storage", handleStorageChange);
-    };
-  }, [key]);
-  return [storedValue, setValue];
-}
-
-// src/hooks/use-include-read-operations.tsx
-var useIncludeReadOperations = () => {
-  const [includeReadOperations, setIncludeReadOperations] = useLocalStorage("includeReadOperations", false);
-  return {
-    includeReadOperations,
-    setIncludeReadOperations
-  };
-};
-
 // src/hooks/use-spans.ts
-import { useCallback as useCallback7, useEffect as useEffect14, useRef as useRef10, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect13, useRef as useRef10, useState as useState6 } from "react";
 
 // src/api/use-api.tsx
 import { createContext as createContext7, useContext as useContext14 } from "react";
@@ -12794,15 +12722,15 @@ var useAppInspectorApi = () => {
 };
 
 // src/hooks/use-status.tsx
-import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef8, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect11, useRef as useRef8, useState as useState4 } from "react";
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = useState5(true);
-  const [status, setStatus] = useState5();
-  const [error, setError] = useState5();
+  const [checking, setChecking] = useState4(true);
+  const [status, setStatus] = useState4();
+  const [error, setError] = useState4();
   const hasFetchedReference = useRef8(false);
   const abortControllerReference = useRef8(null);
-  const checkStatus = useCallback4(async () => {
+  const checkStatus = useCallback3(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -12826,7 +12754,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -13052,11 +12980,11 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback6, useEffect as useEffect13, useRef as useRef9, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef9, useState as useState5 } from "react";
 
 // src/context.tsx
 import { createContext as createContext8, useContext as useContext15 } from "react";
-import { useCallback as useCallback5, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo6 } from "react";
 
 // src/utils/time.ts
 function unixNanoToDate(unixNanoString) {
@@ -13255,7 +13183,7 @@ var AppInspectorContextProvider = (props) => {
   const api = useMemo6(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = useCallback5(
+  const resolveLink = useCallback4(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -13282,14 +13210,14 @@ var AppInspectorContextProvider = (props) => {
 function useSpansWebSocket(options) {
   const { onMessage } = options;
   const onMessageRef = useRef9(onMessage);
-  useEffect13(() => {
+  useEffect12(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
-  const [connected, setConnected] = useState6(false);
+  const [connected, setConnected] = useState5(false);
   const wsRef = useRef9(void 0);
   const reconnectRef = useRef9(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = useCallback6(() => {
+  const connect = useCallback5(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
@@ -13315,7 +13243,7 @@ function useSpansWebSocket(options) {
       }
     });
   }, [localstackEndpoint]);
-  useEffect13(() => {
+  useEffect12(() => {
     connect();
     return () => {
       if (reconnectRef.current !== void 0) clearTimeout(reconnectRef.current);
@@ -13333,19 +13261,16 @@ function useSpansWebSocket(options) {
 
 // src/hooks/use-spans.ts
 var PAGE_SIZE = 50;
-var useSpans = (options) => {
+var useSpans = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState7();
-  const includeReadOperationsRef = useRef10(options.includeReadOperations);
-  includeReadOperationsRef.current = options.includeReadOperations;
-  const [fetchError, setFetchError] = useState7();
-  const [fetchingForward, setFetchingForward] = useState7(false);
-  const [fetchingBackward, setFetchingBackward] = useState7(false);
-  const [refetching, setRefetching] = useState7(false);
+  const [spans, setSpans] = useState6();
+  const [fetchError, setFetchError] = useState6();
+  const [fetchingForward, setFetchingForward] = useState6(false);
+  const [fetchingBackward, setFetchingBackward] = useState6(false);
+  const [refetching, setRefetching] = useState6(false);
   const paginationBuffer = useRef10(createPaginationBuffer({
     async fetchPage(token, limit) {
       const response = await api.getSpans({
-        is_write_operation: includeReadOperationsRef.current ? void 0 : true,
         limit,
         pagination_token: token
       });
@@ -13372,26 +13297,26 @@ var useSpans = (options) => {
     },
     pageSize: PAGE_SIZE
   }));
-  const [hasMoreBackward, setHasMoreBackward] = useState7();
-  const [hasMoreForward, setHasMoreForward] = useState7();
-  const fetchForward = useCallback7(() => {
+  const [hasMoreBackward, setHasMoreBackward] = useState6();
+  const [hasMoreForward, setHasMoreForward] = useState6();
+  const fetchForward = useCallback6(() => {
     paginationBuffer.current.fetchForward();
   }, []);
-  const fetchBackward = useCallback7(() => {
+  const fetchBackward = useCallback6(() => {
     paginationBuffer.current.fetchBackward();
   }, []);
-  useEffect14(() => {
+  useEffect13(() => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const refreshSpans = useCallback7(() => {
+  const refreshSpans = useCallback6(() => {
     paginationBuffer.current.refetchCurrent();
   }, []);
-  useEffect14(() => {
+  useEffect13(() => {
     refreshSpans();
-  }, [options.includeReadOperations, refreshSpans]);
-  const [clearingSpans, setClearingSpans] = useState7(false);
-  const clearSpans = useCallback7(async () => {
+  }, [refreshSpans]);
+  const [clearingSpans, setClearingSpans] = useState6(false);
+  const clearSpans = useCallback6(async () => {
     setClearingSpans(true);
     try {
       await api.deleteSpans();
@@ -13432,7 +13357,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box17, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback8, useEffect as useEffect17, useRef as useRef12, useState as useState12 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef12, useState as useState11 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box13, Chip as Chip3, Divider as Divider2, Stack, Typography as Typography9 } from "@mui/material";
@@ -13670,7 +13595,7 @@ import { Box as Box12 } from "@mui/material";
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box10, Grid as Grid3, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect15, useMemo as useMemo8, useRef as useRef11, useState as useState9 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo8, useRef as useRef11, useState as useState8 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
@@ -13821,7 +13746,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
 import { Box as Box9, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
-import { useMemo as useMemo7, useState as useState8 } from "react";
+import { useMemo as useMemo7, useState as useState7 } from "react";
 import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -13831,7 +13756,7 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState8(false);
+  const [isOpen, setIsOpen] = useState7(false);
   const parsedData = useMemo7(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
@@ -13902,15 +13827,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState9(false);
-  const [isOverflowing, setIsOverflowing] = useState9(false);
+  const [isOpen, setIsOpen] = useState8(false);
+  const [isOverflowing, setIsOverflowing] = useState8(false);
   const textReference = useRef11(null);
   const parsedMessage = useMemo8(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo8(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  useEffect15(() => {
+  useEffect14(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -14069,10 +13994,10 @@ var EventDetail = ({
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
 import { Box as Box11, Typography as Typography8 } from "@mui/material";
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState10(initialOpen);
+  const [isOpen, setIsOpen] = useState9(initialOpen);
   return /* @__PURE__ */ jsxs127(Box11, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsx134(
       Box11,
@@ -14272,7 +14197,7 @@ function renderKeyValue(key, value) {
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme3 } from "@mui/material";
 import { Background, ReactFlow, useNodesState } from "@xyflow/react";
-import { useEffect as useEffect16, useState as useState11 } from "react";
+import { useEffect as useEffect15, useState as useState10 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box15, Stack as Stack2, Typography as Typography10 } from "@mui/material";
@@ -14623,8 +14548,8 @@ var TraceGraph = ({
   spans
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges] = useState11([]);
-  useEffect16(() => {
+  const [edges, setEdges] = useState10([]);
+  useEffect15(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -14827,15 +14752,13 @@ var TraceGraphView = ({
 };
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState12();
-  const [loading, setLoading] = useState12(false);
-  const { includeReadOperations } = useIncludeReadOperations();
-  const [fetchError, setFetchError] = useState12();
-  const fetchSpans = useCallback8(async () => {
+  const [spans, setSpans] = useState11();
+  const [loading, setLoading] = useState11(false);
+  const [fetchError, setFetchError] = useState11();
+  const fetchSpans = useCallback7(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
-        is_write_operation: includeReadOperations ? void 0 : true,
         trace_id: traceId
       });
       setSpans(response.spans);
@@ -14846,29 +14769,29 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     } finally {
       setLoading(false);
     }
-  }, [api, includeReadOperations, traceId]);
-  useEffect17(() => {
+  }, [api, traceId]);
+  useEffect16(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState12(true);
-  const [selectedEvent, setSelectedEvent] = useState12(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState11(true);
+  const [selectedEvent, setSelectedEvent] = useState11(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef12();
-  useEffect17(() => {
+  useEffect16(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const handleEventSelect = useCallback8((spanId2) => {
+  const handleEventSelect = useCallback7((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = useCallback8(() => {
+  const handleRetry = useCallback7(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback8(() => {
+  const navigateToSpansList = useCallback7(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ jsx141(
@@ -14897,7 +14820,6 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 // src/pages/spans-list-page.tsx
 import { Fragment as Fragment9, jsx as jsx142, jsxs as jsxs134 } from "react/jsx-runtime";
 var SpansListPage = () => {
-  const { includeReadOperations, setIncludeReadOperations } = useIncludeReadOperations();
   const {
     checkStatus,
     clearingSpans,
@@ -14914,19 +14836,17 @@ var SpansListPage = () => {
     spans,
     status,
     statusError
-  } = useSpans({
-    includeReadOperations
-  });
-  const clearSpansSync = useCallback9(() => {
+  } = useSpans();
+  const clearSpansSync = useCallback8(() => {
     void clearSpans();
   }, [clearSpans]);
-  const [selectedTraceId, setSelectedTraceId] = useState13();
-  const [selectedSpanId, setSelectedSpanId] = useState13();
-  const navigateToSpan = useCallback9((span) => {
+  const [selectedTraceId, setSelectedTraceId] = useState12();
+  const [selectedSpanId, setSelectedSpanId] = useState12();
+  const navigateToSpan = useCallback8((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback9(() => {
+  const handleRetry = useCallback8(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -14962,11 +14882,9 @@ var SpansListPage = () => {
             fetchingForward,
             hasMoreBackward,
             hasMoreForward,
-            includeReadOperations,
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
-            onIncludeReadOperationsChange: setIncludeReadOperations,
             onRefresh: refreshSpans,
             onSpanClick: navigateToSpan,
             refetching,