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

package/dist/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material7 = require("@mui/material");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_router_dom = require("react-router-dom");
 
 // src/api/use-api.tsx
@@ -3291,16 +3291,58 @@ var AppInspectorContextProvider = (props) => {
   ) });
 };
 
-// src/hooks/use-status.tsx
+// src/hooks/use-local-storage.tsx
 var import_react6 = require("react");
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = (0, import_react6.useState)(() => {
+    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 = (0, import_react6.useCallback)((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]);
+  (0, import_react6.useEffect)(() => {
+    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
+var import_react7 = require("react");
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = (0, import_react6.useState)(true);
-  const [status, setStatus] = (0, import_react6.useState)();
-  const [error, setError] = (0, import_react6.useState)();
-  const hasFetchedReference = (0, import_react6.useRef)(false);
-  const abortControllerReference = (0, import_react6.useRef)(null);
-  const checkStatus = (0, import_react6.useCallback)(async () => {
+  const [checking, setChecking] = (0, import_react7.useState)(true);
+  const [status, setStatus] = (0, import_react7.useState)();
+  const [error, setError] = (0, import_react7.useState)();
+  const hasFetchedReference = (0, import_react7.useRef)(false);
+  const abortControllerReference = (0, import_react7.useRef)(null);
+  const checkStatus = (0, import_react7.useCallback)(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -3324,7 +3366,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -3338,13 +3380,13 @@ var import_jsx_runtime128 = require("react/jsx-runtime");
 var MAX_WIDTH = 1400;
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react7.useState)();
-  const [loading, setLoading] = (0, import_react7.useState)(false);
-  const hasFetched = (0, import_react7.useRef)(false);
-  const [filterWriteOperations, setFilterWriteOperations] = (0, import_react7.useState)(true);
-  const [fetchError, setFetchError] = (0, import_react7.useState)();
+  const [spans, setSpans] = (0, import_react8.useState)();
+  const [loading, setLoading] = (0, import_react8.useState)(false);
+  const hasFetched = (0, import_react8.useRef)(false);
+  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
+  const [fetchError, setFetchError] = (0, import_react8.useState)();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = (0, import_react7.useCallback)(async () => {
+  const fetchSpans = (0, import_react8.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -3360,26 +3402,26 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, filterWriteOperations]);
-  const fetchSpansSync = (0, import_react7.useCallback)(() => {
+  const fetchSpansSync = (0, import_react8.useCallback)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (hasFetched.current) return;
     if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
   }, [fetchSpans, status]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
   const navigate = (0, import_react_router_dom.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpan = (0, import_react7.useCallback)((span) => {
+  const navigateToSpan = (0, import_react8.useCallback)((span) => {
     const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
     navigate(`${url}?spanId=${span.span_id}`);
   }, [navigate, resolveLink]);
-  const clearSpans = (0, import_react7.useCallback)(async () => {
+  const clearSpans = (0, import_react8.useCallback)(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -3393,7 +3435,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = (0, import_react7.useCallback)(() => {
+  const handleRetry = (0, import_react8.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -3457,8 +3499,8 @@ var SpansListPage = () => {
 // src/pages/trace-graph-page.tsx
 var import_material14 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react15 = require("@xyflow/react");
-var import_react16 = require("react");
+var import_react16 = require("@xyflow/react");
+var import_react17 = require("react");
 var import_react_router_dom2 = require("react-router-dom");
 
 // src/components/event-details/event-details.tsx
@@ -3499,10 +3541,10 @@ var EventDetailsHeader = ({ event, onClose }) => {
 // src/components/event-details/toggle-section.tsx
 var import_icons_material3 = require("@mui/icons-material");
 var import_material9 = require("@mui/material");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       import_material9.Box,
@@ -3611,22 +3653,22 @@ var EventDetails = ({ selectedEvent }) => {
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material13 = require("@mui/material");
-var import_react13 = require("@xyflow/react");
-var import_react14 = require("react");
+var import_react14 = require("@xyflow/react");
+var import_react15 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material12 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react10 = require("@xyflow/react");
-var import_react11 = require("react");
+var import_react11 = require("@xyflow/react");
+var import_react12 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material4 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react9.useMemo)(() => {
+  const icon = (0, import_react10.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -3639,7 +3681,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = (0, import_react9.useMemo)(() => {
+  const color = (0, import_react10.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -3678,11 +3720,11 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react11.memo)(function ServiceNode2({ data, selected }) {
-  const handleClick = (0, import_react11.useCallback)(() => {
+var ServiceNode = (0, import_react12.memo)(function ServiceNode2({ data, selected }) {
+  const handleClick = (0, import_react12.useCallback)(() => {
     data.onEventSelect(data.event);
   }, [data]);
-  const handleKeyPress = (0, import_react11.useCallback)(
+  const handleKeyPress = (0, import_react12.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         handleClick();
@@ -3715,8 +3757,8 @@ var ServiceNode = (0, import_react11.memo)(function ServiceNode2({ data, selecte
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react10.Handle, { position: import_react10.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react10.Handle, { position: import_react10.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react11.Handle, { position: import_react11.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react11.Handle, { position: import_react11.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             ServiceCell,
             {
@@ -3777,7 +3819,7 @@ var ServiceNode = (0, import_react11.memo)(function ServiceNode2({ data, selecte
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react12 = require("@xyflow/react");
+var import_react13 = require("@xyflow/react");
 var generateNodesAndEdges = (event, onEventSelect, parentId) => {
   const nodes = [];
   const edges = [];
@@ -3794,8 +3836,8 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react12.Position.Right,
-    targetPosition: import_react12.Position.Left,
+    sourcePosition: import_react13.Position.Right,
+    targetPosition: import_react13.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -3805,7 +3847,7 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react12.MarkerType.Arrow,
+        type: import_react13.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -3879,12 +3921,12 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react14.useState)([]);
-  const [edges, setEdges] = (0, import_react14.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react14.useState)(false);
-  const { fitView, setCenter } = (0, import_react13.useReactFlow)();
-  const store = (0, import_react13.useStoreApi)();
-  const updateSelectedNode = (0, import_react14.useCallback)(
+  const [nodes, setNodes] = (0, import_react15.useState)([]);
+  const [edges, setEdges] = (0, import_react15.useState)([]);
+  const [initialViewSet, setInitialViewSet] = (0, import_react15.useState)(false);
+  const { fitView, setCenter } = (0, import_react14.useReactFlow)();
+  const store = (0, import_react14.useStoreApi)();
+  const updateSelectedNode = (0, import_react15.useCallback)(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
       if (nodeId) {
@@ -3896,7 +3938,7 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -3928,7 +3970,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [onEventSelect, spans.data]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -3948,12 +3990,12 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react14.useCallback)((_event, node) => {
+  const onNodeClick = (0, import_react15.useCallback)((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
@@ -3973,7 +4015,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-      import_react13.ReactFlow,
+      import_react14.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -3986,8 +4028,8 @@ var TraceGraph = ({
         onNodeClick,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react13.Controls, { showInteractive: false }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react13.Background, {})
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react14.Controls, { showInteractive: false }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react14.Background, {})
         ]
       }
     )
@@ -4031,10 +4073,10 @@ var TraceGraphPage = () => {
   const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
   const spanId = searchParameters.get("spanId");
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react16.useState)();
-  const [loading, setLoading] = (0, import_react16.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react16.useState)();
-  const fetchSpans = (0, import_react16.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react17.useState)();
+  const [loading, setLoading] = (0, import_react17.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react17.useState)();
+  const fetchSpans = (0, import_react17.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -4049,14 +4091,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react16.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react16.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react16.useState)(0);
+  const [open, setOpen] = (0, import_react17.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react17.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react17.useState)(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react16.useCallback)(() => {
+  const calculateDrawerWidth = (0, import_react17.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -4064,7 +4106,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -4078,11 +4120,11 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react16.useCallback)((event) => {
+  const handleEventSelect = (0, import_react17.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = (0, import_react16.useCallback)(() => {
+  const handleRetry = (0, import_react17.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -4122,7 +4164,7 @@ var TraceGraphPage = () => {
                   height: "100%",
                   overflow: "auto"
                 },
-                children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react15.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react16.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                   TraceGraph,
                   {
                     initialFocusEventId: spanId,