@localstack/appinspector-ui 1.0.89 → 1.0.91

package/dist/index.js

@@ -26527,12 +26527,13 @@ var EventDetails = ({ onClose, selectedEvent }) => {
       requestPayload.MessageBody = tryParseJson(requestPayload.MessageBody);
     }
   }
+  const isResponseSuppressed = selectedEvent.attributes?.["localstack.aws.service.response_suppressed"] === true;
   const responsePayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.response"]);
   if (parseNestedJson && isLambdaInvoke && responsePayload && typeof responsePayload === "object" && "Payload" in responsePayload) {
     responsePayload.Payload = tryParseJson(responsePayload.Payload);
   }
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
-  const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0;
+  const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0 || isResponseSuppressed;
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
   return /* @__PURE__ */ jsxs130(Box14, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
     /* @__PURE__ */ jsxs130(
@@ -26638,9 +26639,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
                 /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
                 /* @__PURE__ */ jsx137(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
-              responsePayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
+              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs130(Box14, { children: [
                 /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
-                /* @__PURE__ */ jsx137(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
+                isResponseSuppressed ? /* @__PURE__ */ jsx137(Box14, { sx: { py: 1 }, children: /* @__PURE__ */ jsx137(Alert3, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx137(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
               exceptionPayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
                 /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
@@ -26684,7 +26685,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 };
 var PayloadViewer = memo10(({ testId, value }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx137(Box14, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx137(Box14, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", py: 1 }, children: /* @__PURE__ */ jsx137(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -26853,19 +26854,44 @@ var ServiceNode = memo11(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 import dagre from "@dagrejs/dagre";
-var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
+var getLayoutedNodesAndEdges = (inputNodes, inputEdges, order2 = "oldest_first") => {
   const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   const direction = "LR";
   const nodeWidth = 200;
   const nodeHeight = 70;
   dagreGraph.setGraph({ rankdir: direction });
+  const timestampMap = new Map(
+    inputNodes.map((n2) => [n2.id, n2.data.event.start_time_unix_nano])
+  );
   for (const node of inputNodes) {
     dagreGraph.setNode(node.id, { height: nodeHeight, width: nodeWidth });
   }
   for (const edge of inputEdges) {
     dagreGraph.setEdge(edge.source, edge.target);
   }
-  dagre.layout(dagreGraph);
+  dagre.layout(dagreGraph, {
+    customOrder: (g2) => {
+      const rankMap = /* @__PURE__ */ new Map();
+      for (const nodeId of g2.nodes()) {
+        const rank = g2.node(nodeId).rank;
+        if (rank === void 0) continue;
+        const group4 = rankMap.get(rank) ?? [];
+        group4.push(nodeId);
+        rankMap.set(rank, group4);
+      }
+      for (const nodeIds of rankMap.values()) {
+        nodeIds.sort((a3, b3) => {
+          const tsA = timestampMap.get(a3) ?? "";
+          const tsB = timestampMap.get(b3) ?? "";
+          return order2 === "newest_first" ? tsB.localeCompare(tsA) : tsA.localeCompare(tsB);
+        });
+        for (const [index, nodeId] of nodeIds.entries()) {
+          ;
+          g2.node(nodeId).order = index;
+        }
+      }
+    }
+  });
   const layoutedNodes = inputNodes.map((node) => {
     const nodeWithPosition = dagreGraph.node(node.id);
     return {
@@ -26961,6 +26987,7 @@ var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
   onRefresh,
+  order: order2 = "oldest_first",
   spans
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -27006,7 +27033,7 @@ var TraceGraph = ({
         });
       }
     }
-    const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
+    const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges, order2);
     for (const node of layoutedNodes) {
       if (node.id === initialFocusEventId) {
         node.selected = true;
@@ -27014,7 +27041,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId, setNodes, setEdges]);
+  }, [spans.data, initialFocusEventId, order2, setNodes, setEdges]);
   const theme = useTheme4();
   return /* @__PURE__ */ jsxs133(Fragment9, { children: [
     spans.error && /* @__PURE__ */ jsxs133(
@@ -27105,6 +27132,7 @@ var TraceGraphView = ({
   loading,
   navigateToSpansList,
   open,
+  order: order2,
   selectedEvent,
   spanId,
   spans,
@@ -27166,6 +27194,7 @@ var TraceGraphView = ({
                       onRefresh: () => {
                         fetchSpans();
                       },
+                      order: order2,
                       spans: {
                         data: spans,
                         error: fetchError,
@@ -27217,7 +27246,7 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
   }
   return [...allSpans.values()];
 }
-var TraceGraphPage = ({ onClose, spanId, traceId }) => {
+var TraceGraphPage = ({ onClose, order: order2 = "oldest_first", spanId, traceId }) => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = useState17();
   const [loading, setLoading] = useState17(false);
@@ -27277,6 +27306,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       loading,
       navigateToSpansList,
       open,
+      order: order2,
       selectedEvent,
       spanId: spanId ?? void 0,
       spans,
@@ -27380,7 +27410,7 @@ var SpansListPage = () => {
     ),
     selectedTraceId !== void 0 && /* @__PURE__ */ jsx143(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
-    }, spanId: selectedSpanId, traceId: selectedTraceId })
+    }, order: order2, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });
 };