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

package/dist/index.cjs

@@ -3454,7 +3454,7 @@ var SpansListPage = () => {
   );
 };
 
-// src/pages/trace-graph.tsx
+// 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");
@@ -3875,17 +3875,15 @@ var nodeTypes = {
 var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
-  traceId,
+  onRefresh,
+  spans,
   viewPortPixelWidth
 }) => {
   const [nodes, setNodes] = (0, import_react14.useState)([]);
   const [edges, setEdges] = (0, import_react14.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
   const [initialViewSet, setInitialViewSet] = (0, import_react14.useState)(false);
   const { fitView, setCenter } = (0, import_react13.useReactFlow)();
   const store = (0, import_react13.useStoreApi)();
-  const api = useAppInspectorApi();
-  const [fetchError, setFetchError] = (0, import_react14.useState)();
   const updateSelectedNode = (0, import_react14.useCallback)(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
@@ -3898,57 +3896,40 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  const fetchTrace = (0, import_react14.useCallback)(async () => {
-    setIsLoading(true);
-    try {
-      const response = await api.getSpans({ trace_id: traceId });
-      const spansMap = /* @__PURE__ */ new Map();
-      const rootSpans = [];
-      for (const span of response.spans) {
-        spansMap.set(span.span_id, { ...span, children: [] });
-      }
-      for (const span of response.spans) {
-        const currentSpan = spansMap.get(span.span_id);
-        if (!currentSpan) continue;
-        if (span.parent_span_id && spansMap.has(span.parent_span_id)) {
-          const parentSpan = spansMap.get(span.parent_span_id);
-          if (parentSpan) {
-            parentSpan.children ??= [];
-            parentSpan.children.push(currentSpan);
-          }
-        } else {
-          rootSpans.push(currentSpan);
+  (0, import_react14.useEffect)(() => {
+    const spansMap = /* @__PURE__ */ new Map();
+    const rootSpans = [];
+    for (const span of spans.data ?? []) {
+      spansMap.set(span.span_id, { ...span, children: [] });
+    }
+    for (const span of spans.data ?? []) {
+      const currentSpan = spansMap.get(span.span_id);
+      if (!currentSpan) continue;
+      if (span.parent_span_id && spansMap.has(span.parent_span_id)) {
+        const parentSpan = spansMap.get(span.parent_span_id);
+        if (parentSpan) {
+          parentSpan.children ??= [];
+          parentSpan.children.push(currentSpan);
         }
+      } else {
+        rootSpans.push(currentSpan);
       }
-      let allNodes = [];
-      let allEdges = [];
-      for (const rootSpan of rootSpans) {
-        const { edges: newEdges, nodes: newNodes } = generateNodesAndEdges(rootSpan, (event) => {
-          onEventSelect(event);
-        });
-        allNodes = [...allNodes, ...newNodes];
-        allEdges = [...allEdges, ...newEdges];
-      }
-      const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
-      setNodes(layoutedNodes);
-      setEdges(layoutedEdges);
-      setIsLoading(false);
-      setFetchError(void 0);
-    } catch (error) {
-      console.error("Error fetching trace:", error);
-      setFetchError(error instanceof Error ? error : new Error("Unknown error", { cause: error }));
-    } finally {
-      setIsLoading(false);
     }
-  }, [api, traceId, onEventSelect]);
-  const fetchTraceSync = (0, import_react14.useCallback)(() => {
-    void fetchTrace();
-  }, [fetchTrace]);
-  (0, import_react14.useEffect)(() => {
-    fetchTraceSync();
-  }, [fetchTraceSync]);
+    let allNodes = [];
+    let allEdges = [];
+    for (const rootSpan of rootSpans) {
+      const { edges: newEdges, nodes: newNodes } = generateNodesAndEdges(rootSpan, (event) => {
+        onEventSelect(event);
+      });
+      allNodes = [...allNodes, ...newNodes];
+      allEdges = [...allEdges, ...newEdges];
+    }
+    const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
+    setNodes(layoutedNodes);
+    setEdges(layoutedEdges);
+  }, [onEventSelect, spans.data]);
   (0, import_react14.useEffect)(() => {
-    const shouldSetInitialView = !isLoading && nodes.length > 0 && !initialViewSet;
+    const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
         const focusNode = nodes.find((node) => node.id === initialFocusEventId);
@@ -3966,7 +3947,7 @@ var TraceGraph = ({
       }
       setInitialViewSet(true);
     }
-  }, [isLoading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
+  }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
   (0, import_react14.useEffect)(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
@@ -3977,15 +3958,17 @@ var TraceGraph = ({
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
   return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
-    fetchError && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+    spans.error && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
       import_material13.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Button, { onClick: fetchTraceSync, children: "Retry" }),
+        action: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Button, { onClick: () => {
+          onRefresh();
+        }, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
           " ",
-          fetchError.message
+          spans.error.message
         ]
       }
     ),
@@ -4011,7 +3994,7 @@ var TraceGraph = ({
   ] });
 };
 
-// src/pages/trace-graph.tsx
+// src/pages/trace-graph-page.tsx
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
@@ -4032,7 +4015,6 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
 }));
 var StyledDrawer = (0, import_styles.styled)(import_material14.Drawer)(() => ({
   "& .MuiDrawer-paper": {
-    backgroundColor: "#ffffff",
     bottom: 0,
     boxSizing: "border-box",
     height: `calc(100% - ${HEADER_HEIGHT.toString()}px)`,
@@ -4048,6 +4030,28 @@ var TraceGraphPage = () => {
   const { traceId } = (0, import_react_router_dom2.useParams)();
   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 () => {
+    setLoading(true);
+    try {
+      const response = await api.getSpans({
+        trace_id: traceId
+      });
+      setSpans(response.spans);
+      setFetchError(void 0);
+    } catch (error) {
+      console.error(error);
+      setFetchError(error instanceof Error ? error : new Error("Unknown error", { cause: error }));
+    } finally {
+      setLoading(false);
+    }
+  }, [api, traceId]);
+  (0, import_react16.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);
@@ -4123,7 +4127,14 @@ var TraceGraphPage = () => {
                   {
                     initialFocusEventId: spanId,
                     onEventSelect: handleEventSelect,
-                    traceId,
+                    onRefresh: () => {
+                      void fetchSpans();
+                    },
+                    spans: {
+                      data: spans,
+                      error: fetchError,
+                      loading
+                    },
                     viewPortPixelWidth
                   }
                 ) })