@localstack/appinspector-ui 1.0.0-dev-c7a4c87a → 1.0.1

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
 import { Box as Box6 } from "@mui/material";
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 import { useNavigate } from "react-router-dom";
 
 // src/api/use-api.tsx
@@ -3254,16 +3254,58 @@ var AppInspectorContextProvider = (props) => {
   ) });
 };
 
+// src/hooks/use-local-storage.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState3(() => {
+    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]);
+  useEffect2(() => {
+    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-status.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = useState3(true);
-  const [status, setStatus] = useState3();
-  const [error, setError] = useState3();
+  const [checking, setChecking] = useState4(true);
+  const [status, setStatus] = useState4();
+  const [error, setError] = useState4();
   const hasFetchedReference = useRef2(false);
   const abortControllerReference = useRef2(null);
-  const checkStatus = useCallback3(async () => {
+  const checkStatus = useCallback4(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -3287,7 +3329,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -3301,13 +3343,13 @@ import { jsx as jsx128 } from "react/jsx-runtime";
 var MAX_WIDTH = 1400;
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState4();
-  const [loading, setLoading] = useState4(false);
+  const [spans, setSpans] = useState5();
+  const [loading, setLoading] = useState5(false);
   const hasFetched = useRef3(false);
-  const [filterWriteOperations, setFilterWriteOperations] = useState4(true);
-  const [fetchError, setFetchError] = useState4();
+  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
+  const [fetchError, setFetchError] = useState5();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = useCallback4(async () => {
+  const fetchSpans = useCallback5(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -3323,26 +3365,26 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, filterWriteOperations]);
-  const fetchSpansSync = useCallback4(() => {
+  const fetchSpansSync = useCallback5(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (hasFetched.current) return;
     if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
   }, [fetchSpans, status]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
   const navigate = useNavigate();
   const { resolveLink } = useAppInspector();
-  const navigateToSpan = useCallback4((span) => {
+  const navigateToSpan = useCallback5((span) => {
     const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
     navigate(`${url}?spanId=${span.span_id}`);
   }, [navigate, resolveLink]);
-  const clearSpans = useCallback4(async () => {
+  const clearSpans = useCallback5(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -3356,7 +3398,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = useCallback4(() => {
+  const handleRetry = useCallback5(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -3421,7 +3463,7 @@ var SpansListPage = () => {
 import { Box as Box12, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback7, useEffect as useEffect5, useState as useState7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect6, useState as useState8 } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 
 // src/components/event-details/event-details.tsx
@@ -3462,10 +3504,10 @@ var EventDetailsHeader = ({ event, onClose }) => {
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
 import { Box as Box8, Typography as Typography5 } from "@mui/material";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx130, jsxs as jsxs124 } from "react/jsx-runtime";
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState5(initialOpen);
+  const [isOpen, setIsOpen] = useState6(initialOpen);
   return /* @__PURE__ */ jsxs124(Box8, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsx130(
       Box8,
@@ -3575,13 +3617,13 @@ var EventDetails = ({ selectedEvent }) => {
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4 } from "@mui/material";
 import { Background, Controls, ReactFlow, useReactFlow, useStoreApi } from "@xyflow/react";
-import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useState as useState7 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box11, Stack as Stack2, Typography as Typography7 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo, useCallback as useCallback5 } from "react";
+import { memo, useCallback as useCallback6 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon, Info, Warning } from "@mui/icons-material";
@@ -3642,10 +3684,10 @@ var handleStyle = {
   opacity: 0
 };
 var ServiceNode = memo(function ServiceNode2({ data, selected }) {
-  const handleClick = useCallback5(() => {
+  const handleClick = useCallback6(() => {
     data.onEventSelect(data.event);
   }, [data]);
-  const handleKeyPress = useCallback5(
+  const handleKeyPress = useCallback6(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         handleClick();
@@ -3842,12 +3884,12 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = useState6([]);
-  const [edges, setEdges] = useState6([]);
-  const [initialViewSet, setInitialViewSet] = useState6(false);
+  const [nodes, setNodes] = useState7([]);
+  const [edges, setEdges] = useState7([]);
+  const [initialViewSet, setInitialViewSet] = useState7(false);
   const { fitView, setCenter } = useReactFlow();
   const store = useStoreApi();
-  const updateSelectedNode = useCallback6(
+  const updateSelectedNode = useCallback7(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
       if (nodeId) {
@@ -3859,7 +3901,7 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -3891,7 +3933,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [onEventSelect, spans.data]);
-  useEffect4(() => {
+  useEffect5(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -3911,12 +3953,12 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = useCallback6((_event, node) => {
+  const onNodeClick = useCallback7((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
@@ -3994,10 +4036,10 @@ var TraceGraphPage = () => {
   const [searchParameters] = useSearchParams();
   const spanId = searchParameters.get("spanId");
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState7();
-  const [loading, setLoading] = useState7(false);
-  const [fetchError, setFetchError] = useState7();
-  const fetchSpans = useCallback7(async () => {
+  const [spans, setSpans] = useState8();
+  const [loading, setLoading] = useState8(false);
+  const [fetchError, setFetchError] = useState8();
+  const fetchSpans = useCallback8(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -4012,14 +4054,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  useEffect5(() => {
+  useEffect6(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState7(true);
-  const [selectedEvent, setSelectedEvent] = useState7();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = useState7(0);
+  const [open, setOpen] = useState8(true);
+  const [selectedEvent, setSelectedEvent] = useState8();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = useState8(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);
@@ -4027,7 +4069,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  useEffect5(() => {
+  useEffect6(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -4041,11 +4083,11 @@ 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 shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";