@localstack/appinspector-ui 1.0.70 → 1.0.72

package/dist/index.js

@@ -367,13 +367,13 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box19 } from "@mui/material";
-import { useCallback as useCallback9, useState as useState14 } from "react";
+import { useCallback as useCallback9, useState as useState13 } from "react";
 
 // src/components/spans-list/spans-list.tsx
 import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
-import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined, SwapVertOutlined } from "@mui/icons-material";
+import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined } from "@mui/icons-material";
 import {
   Box as Box3,
   Button,
@@ -387,6 +387,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  TableSortLabel,
   Tooltip as Tooltip2,
   Typography as Typography2,
   useTheme as useTheme2
@@ -12646,7 +12647,17 @@ var SpansDataGrid = ({
     }),
     columnHelper.accessor("startTime", {
       cell: (props) => /* @__PURE__ */ jsx124(ResponsiveTimestampCell, { date: props.getValue() }),
-      header: "Time",
+      header: () => /* @__PURE__ */ jsx124(
+        TableSortLabel,
+        {
+          active: true,
+          direction: order2 === "newest_first" ? "asc" : "desc",
+          onClick: () => {
+            onOrderChange(order2 === "newest_first" ? "oldest_first" : "newest_first");
+          },
+          children: "Time"
+        }
+      ),
       id: "startTime",
       size: 120
     }),
@@ -12703,7 +12714,7 @@ var SpansDataGrid = ({
       // The actions column doesn't need more space
       size: 96
     })
-  ], [onSpanClick]);
+  ], [onSpanClick, onOrderChange, order2]);
   const table = useReactTable({
     columns,
     data: spans ?? [],
@@ -12730,23 +12741,6 @@ var SpansDataGrid = ({
           label: ""
         }
       ),
-      /* @__PURE__ */ jsx124(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx124(
-            Button,
-            {
-              onClick: () => {
-                onOrderChange(order2 === "newest_first" ? "oldest_first" : "newest_first");
-              },
-              startIcon: /* @__PURE__ */ jsx124(SwapVertOutlined, {}),
-              variant: "text",
-              children: order2 === "newest_first" ? "Newest First" : "Oldest First"
-            }
-          ),
-          label: ""
-        }
-      ),
       /* @__PURE__ */ jsx124(
         FormControlLabel,
         {
@@ -13852,7 +13846,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box18, 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 useEffect18, useRef as useRef13, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect18, useRef as useRef13, useState as useState12 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box14, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography10 } from "@mui/material";
@@ -24505,8 +24499,8 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 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 useEffect17, useState as useState12 } from "react";
+import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
+import { useEffect as useEffect17 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box16, Stack as Stack3, Typography as Typography11 } from "@mui/material";
@@ -24657,56 +24651,6 @@ var ServiceNode = memo9(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 import dagre from "@dagrejs/dagre";
-import { MarkerType, Position as Position2 } from "@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: Position2.Right,
-    targetPosition: Position2.Left,
-    type: "service"
-  });
-  if (parentId) {
-    edges.push({
-      animated: false,
-      id: `e-${parentId}-${event.span_id}`,
-      markerEnd: {
-        color: "lightgray",
-        height: 16,
-        type: 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 dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   const direction = "LR";
@@ -24857,40 +24801,48 @@ var TraceGraph = ({
   spans
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges] = useState12([]);
+  const [edges, setEdges] = useEdgesState([]);
   useEffect17(() => {
-    const spansMap = /* @__PURE__ */ new Map();
-    const rootSpans = [];
+    const allNodes = [];
+    const allEdges = [];
     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);
+      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: Position2.Right,
+        targetPosition: Position2.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: 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: 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) {
@@ -24899,7 +24851,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId, setNodes]);
+  }, [spans.data, initialFocusEventId, setNodes, setEdges]);
   const theme = useTheme3();
   return /* @__PURE__ */ jsxs133(Fragment7, { children: [
     spans.error && /* @__PURE__ */ jsxs133(
@@ -25102,9 +25054,9 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState13();
-  const [loading, setLoading] = useState13(false);
-  const [fetchError, setFetchError] = useState13();
+  const [spans, setSpans] = useState12();
+  const [loading, setLoading] = useState12(false);
+  const [fetchError, setFetchError] = useState12();
   const fetchSpans = useCallback8(async () => {
     setLoading(true);
     try {
@@ -25121,8 +25073,8 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   useEffect18(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState13(true);
-  const [selectedEvent, setSelectedEvent] = useState13(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState12(true);
+  const [selectedEvent, setSelectedEvent] = useState12(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef13();
   useEffect18(() => {
     if (!spansReference.current && spans) {
@@ -25189,8 +25141,8 @@ var SpansListPage = () => {
     void clearSpans();
   }, [clearSpans]);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState14();
-  const [selectedSpanId, setSelectedSpanId] = useState14();
+  const [selectedTraceId, setSelectedTraceId] = useState13();
+  const [selectedSpanId, setSelectedSpanId] = useState13();
   const navigateToSpan = useCallback9((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);