@localstack/appinspector-ui 1.0.70 → 1.0.72

package/dist/index.cjs

@@ -386,7 +386,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material21 = require("@mui/material");
-var import_react63 = require("react");
+var import_react62 = require("react");
 
 // src/components/spans-list/spans-list.tsx
 var import_material5 = require("@mui/material");
@@ -12649,7 +12649,17 @@ var SpansDataGrid = ({
     }),
     columnHelper.accessor("startTime", {
       cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ResponsiveTimestampCell, { date: props.getValue() }),
-      header: "Time",
+      header: () => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.TableSortLabel,
+        {
+          active: true,
+          direction: order2 === "newest_first" ? "asc" : "desc",
+          onClick: () => {
+            onOrderChange(order2 === "newest_first" ? "oldest_first" : "newest_first");
+          },
+          children: "Time"
+        }
+      ),
       id: "startTime",
       size: 120
     }),
@@ -12706,7 +12716,7 @@ var SpansDataGrid = ({
       // The actions column doesn't need more space
       size: 96
     })
-  ], [onSpanClick]);
+  ], [onSpanClick, onOrderChange, order2]);
   const table = useReactTable({
     columns,
     data: spans ?? [],
@@ -12733,23 +12743,6 @@ var SpansDataGrid = ({
           label: ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-        import_material4.FormControlLabel,
-        {
-          control: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-            import_material4.Button,
-            {
-              onClick: () => {
-                onOrderChange(order2 === "newest_first" ? "oldest_first" : "newest_first");
-              },
-              startIcon: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.SwapVertOutlined, {}),
-              variant: "text",
-              children: order2 === "newest_first" ? "Newest First" : "Oldest First"
-            }
-          ),
-          label: ""
-        }
-      ),
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
         import_material4.FormControlLabel,
         {
@@ -13854,8 +13847,8 @@ var useSpans = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material20 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react61 = require("@xyflow/react");
-var import_react62 = require("react");
+var import_react60 = require("@xyflow/react");
+var import_react61 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_material15 = require("@mui/material");
@@ -24508,8 +24501,8 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material19 = require("@mui/material");
-var import_react59 = require("@xyflow/react");
-var import_react60 = require("react");
+var import_react58 = require("@xyflow/react");
+var import_react59 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material17 = require("@mui/material");
@@ -24660,56 +24653,6 @@ var ServiceNode = (0, import_react55.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react56 = require("@xyflow/react");
-var generateNodesAndEdges = (event, parentId) => {
-  const nodes = [];
-  const edges = [];
-  nodes.push({
-    data: {
-      data: { [event.span_id]: event },
-      event,
-      height: 28,
-      id: event.span_id,
-      position: { x: 0, y: 0 },
-      width: 28
-    },
-    id: event.span_id,
-    position: { x: 0, y: 0 },
-    // Will be set by layout
-    sourcePosition: import_react56.Position.Right,
-    targetPosition: import_react56.Position.Left,
-    type: "service"
-  });
-  if (parentId) {
-    edges.push({
-      animated: false,
-      id: `e-${parentId}-${event.span_id}`,
-      markerEnd: {
-        color: "lightgray",
-        height: 16,
-        type: import_react56.MarkerType.Arrow,
-        width: 16
-      },
-      source: parentId,
-      style: {
-        stroke: "lightgray",
-        strokeWidth: 1
-      },
-      target: event.span_id
-    });
-  }
-  if (event.children && event.children.length > 0) {
-    for (const child of event.children) {
-      const { edges: childEdges, nodes: childNodes } = generateNodesAndEdges(
-        child,
-        event.span_id
-      );
-      nodes.push(...childNodes);
-      edges.push(...childEdges);
-    }
-  }
-  return { edges, nodes };
-};
 var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
   const dagreGraph = new import_dagre.default.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   const direction = "LR";
@@ -24740,8 +24683,8 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material18 = require("@mui/material");
-var import_react57 = require("@xyflow/react");
-var import_react58 = require("react");
+var import_react56 = require("@xyflow/react");
+var import_react57 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -24788,9 +24731,9 @@ var selector = (s2) => ({
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
   minZoomReached: s2.transform[2] <= s2.minZoom
 });
-var Controls = (0, import_react58.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react57.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react57.useReactFlow)();
+var Controls = (0, import_react57.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react56.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react56.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -24859,41 +24802,49 @@ var TraceGraph = ({
   onRefresh,
   spans
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react59.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react60.useState)([]);
-  (0, import_react60.useEffect)(() => {
-    const spansMap = /* @__PURE__ */ new Map();
-    const rootSpans = [];
-    for (const span of spans.data ?? []) {
-      spansMap.set(span.span_id, { ...span, children: [] });
-    }
+  const [nodes, setNodes, onNodesChange] = (0, import_react58.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react58.useEdgesState)([]);
+  (0, import_react59.useEffect)(() => {
+    const allNodes = [];
+    const allEdges = [];
     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);
+      allNodes.push({
+        data: {
+          data: { [span.span_id]: span },
+          event: span,
+          height: 28,
+          id: span.span_id,
+          position: { x: 0, y: 0 },
+          width: 28
+        },
+        id: span.span_id,
+        position: { x: 0, y: 0 },
+        sourcePosition: import_react58.Position.Right,
+        targetPosition: import_react58.Position.Left,
+        type: "service"
+      });
+      if (span.parent_span_id !== null) {
+        allEdges.push({
+          animated: false,
+          id: `e-${span.parent_span_id}-${span.span_id}`,
+          markerEnd: { color: "lightgray", height: 16, type: import_react58.MarkerType.Arrow, width: 16 },
+          source: span.parent_span_id,
+          style: { stroke: "lightgray", strokeWidth: 1 },
+          target: span.span_id
+        });
       }
       for (const linkedSpanId of span.linked_span_ids ?? []) {
-        const linkedSpan = spansMap.get(linkedSpanId);
-        if (linkedSpan) {
-          linkedSpan.children ??= [];
-          linkedSpan.children.push(currentSpan);
-        }
+        allEdges.push({
+          id: `e-link-${linkedSpanId}-${span.span_id}`,
+          markerEnd: { color: "lightgray", height: 16, type: import_react58.MarkerType.Arrow, width: 16 },
+          source: linkedSpanId,
+          style: { stroke: "lightgray", strokeWidth: 1 },
+          // animated: true,
+          // style: { stroke: 'lightgray', strokeDasharray: '4 2', strokeWidth: 1 },
+          target: span.span_id
+        });
       }
     }
-    let allNodes = [];
-    let allEdges = [];
-    for (const rootSpan of rootSpans) {
-      const { edges: newEdges, nodes: newNodes } = generateNodesAndEdges(rootSpan);
-      allNodes = [...allNodes, ...newNodes];
-      allEdges = [...allEdges, ...newEdges];
-    }
     const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
     for (const node of layoutedNodes) {
       if (node.id === initialFocusEventId) {
@@ -24902,7 +24853,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId, setNodes]);
+  }, [spans.data, initialFocusEventId, setNodes, setEdges]);
   const theme = (0, import_material19.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
     spans.error && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
@@ -24920,7 +24871,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
-      import_react59.ReactFlow,
+      import_react58.ReactFlow,
       {
         "data-testid": "trace-graph",
         edges,
@@ -24939,7 +24890,7 @@ var TraceGraph = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
-            import_react59.Background,
+            import_react58.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -25044,7 +24995,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react60.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -25105,10 +25056,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react62.useState)();
-  const [loading, setLoading] = (0, import_react62.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react62.useState)();
-  const fetchSpans = (0, import_react62.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react61.useState)();
+  const [loading, setLoading] = (0, import_react61.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react61.useState)();
+  const fetchSpans = (0, import_react61.useCallback)(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -25121,28 +25072,28 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react62.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react62.useState)(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = (0, import_react62.useRef)();
-  (0, import_react62.useEffect)(() => {
+  const [open, setOpen] = (0, import_react61.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react61.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react61.useRef)();
+  (0, import_react61.useEffect)(() => {
     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 = (0, import_react62.useCallback)((spanId2) => {
+  const handleEventSelect = (0, import_react61.useCallback)((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = (0, import_react62.useCallback)(() => {
+  const handleRetry = (0, import_react61.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react62.useCallback)(() => {
+  const navigateToSpansList = (0, import_react61.useCallback)(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
@@ -25188,17 +25139,17 @@ var SpansListPage = () => {
     streamPaused,
     toggleStream
   } = useSpans();
-  const clearSpansSync = (0, import_react63.useCallback)(() => {
+  const clearSpansSync = (0, import_react62.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react63.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react63.useState)();
-  const navigateToSpan = (0, import_react63.useCallback)((span) => {
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react62.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react62.useState)();
+  const navigateToSpan = (0, import_react62.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = (0, import_react63.useCallback)(() => {
+  const handleRetry = (0, import_react62.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";