@localstack/appinspector-ui 1.0.89 → 1.0.91

package/dist/index.cjs

@@ -26515,12 +26515,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__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
@@ -26626,9 +26627,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
-              responsePayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
+              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
+                isResponseSuppressed ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { py: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Alert, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
               exceptionPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
@@ -26672,7 +26673,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 };
 var PayloadViewer = (0, import_react56.memo)(({ testId, value }) => {
   const theme = (0, import_material15.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", py: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -26841,19 +26842,44 @@ var ServiceNode = (0, import_react59.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
+var getLayoutedNodesAndEdges = (inputNodes, inputEdges, order2 = "oldest_first") => {
   const dagreGraph = new import_dagre.default.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);
   }
-  import_dagre.default.layout(dagreGraph);
+  import_dagre.default.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 {
@@ -26949,6 +26975,7 @@ var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
   onRefresh,
+  order: order2 = "oldest_first",
   spans
 }) => {
   const [nodes, setNodes, onNodesChange] = (0, import_react62.useNodesState)([]);
@@ -26994,7 +27021,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;
@@ -27002,7 +27029,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId, setNodes, setEdges]);
+  }, [spans.data, initialFocusEventId, order2, 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)(
@@ -27093,6 +27120,7 @@ var TraceGraphView = ({
   loading,
   navigateToSpansList,
   open,
+  order: order2,
   selectedEvent,
   spanId,
   spans,
@@ -27154,6 +27182,7 @@ var TraceGraphView = ({
                       onRefresh: () => {
                         fetchSpans();
                       },
+                      order: order2,
                       spans: {
                         data: spans,
                         error: fetchError,
@@ -27205,7 +27234,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] = (0, import_react65.useState)();
   const [loading, setLoading] = (0, import_react65.useState)(false);
@@ -27265,6 +27294,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       loading,
       navigateToSpansList,
       open,
+      order: order2,
       selectedEvent,
       spanId: spanId ?? void 0,
       spans,
@@ -27368,7 +27398,7 @@ var SpansListPage = () => {
     ),
     selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
-    }, spanId: selectedSpanId, traceId: selectedTraceId })
+    }, order: order2, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });
 };