@localstack/appinspector-ui 1.0.183 → 1.0.184

package/dist/index.cjs

@@ -2494,6 +2494,8 @@ var EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID = "event-details-section-bas
 var EVENT_DETAILS_SERVICE_NAME_TEST_ID = "event-details-service-name";
 var EVENT_DETAILS_OPERATION_NAME_TEST_ID = "event-details-operation-name";
 var EVENT_DETAILS_CLOSE_BUTTON_TEST_ID = "event-details-close-button";
+var EVENT_DETAILS_HEADING_TEST_ID = "event-details-heading";
+var EVENT_DETAILS_HEADING_DURATION_TEST_ID = "event-details-heading-duration";
 var EVENT_DETAILS_STATUS_TEST_ID = "event-details-status";
 var EVENT_DETAILS_RESOURCE_NAME_TEST_ID = "event-details-resource-name";
 var EVENT_DETAILS_RESOURCE_ARN_TEST_ID = "event-details-resource-arn";
@@ -2527,6 +2529,7 @@ var TRACE_SIDEBAR_TEST_ID = "trace-sidebar";
 var TRACE_SIDEBAR_RESIZE_HANDLE_TEST_ID = "trace-sidebar-resize-handle";
 var TRACE_SIDEBAR_WATERFALL_BUTTON_TEST_ID = "trace-sidebar-waterfall-button";
 var TRACE_SIDEBAR_MAP_BUTTON_TEST_ID = "trace-sidebar-map-button";
+var TRACE_SIDEBAR_ROOT_HEADING_TEST_ID = "trace-sidebar-root-heading";
 var WATERFALL_TEST_ID = "waterfall";
 var WATERFALL_ROW_TEST_ID = "waterfall-row";
 var WATERFALL_ROW_TOGGLE_TEST_ID = "waterfall-row-toggle";
@@ -31397,6 +31400,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   }
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
+  const resource = shortResourceName(selectedEvent.resource_name, selectedEvent.arn);
   const showError = issues.error;
   const showPermissions = selectedEvent.iam_errors_suppressed === true || eventGroups.permissions !== void 0;
   const showLogs = isLambdaInvoke && requestId !== void 0;
@@ -31422,12 +31426,21 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           borderBottom: "1px solid",
           borderColor: "divider",
           display: "flex",
-          justifyContent: "space-between",
+          gap: 1.5,
           px: 2,
           py: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material19.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { color: "text.secondary", component: "div", sx: { lineHeight: 1.5 }, variant: "overline", children: "Selected operation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material19.Box, { "data-testid": EVENT_DETAILS_HEADING_TEST_ID, sx: { alignItems: "center", display: "flex", gap: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(AwsServiceIcon, { hideTooltip: true, service: selectedEvent.service_name, size: "small" }),
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { noWrap: true, sx: { flex: "0 1 auto", fontWeight: 600, minWidth: 0 }, title: selectedEvent.operation_name, variant: "subtitle1", children: selectedEvent.operation_name }),
+              resource !== "" && resource !== "*" && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { color: "text.secondary", noWrap: true, sx: { flex: "1 1 0", minWidth: 0 }, title: resource, variant: "body2", children: resource }),
+              duration !== void 0 && // A fixed box, so a screenshot can mask the varying value without the mask edge moving.
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { color: "text.secondary", "data-testid": EVENT_DETAILS_HEADING_DURATION_TEST_ID, sx: { flex: "none", ml: "auto", textAlign: "right", width: 64 }, variant: "body2", children: formatDuration(Number(duration)) })
+            ] })
+          ] }),
           onClose && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Close, {}) })
         ]
       }
@@ -32693,6 +32706,7 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
       }
     };
   }, [spans, selectedSpanId]);
+  const rootResource = root2 ? shortResourceName(root2.resource_name, root2.arn) : "";
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
     import_material25.Box,
     {
@@ -32746,9 +32760,11 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
         ),
         /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { sx: { alignItems: "center", borderBottom: 1, borderColor: "divider", display: "flex", gap: 1.5, px: 2, py: 1 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { sx: { flex: 1, minWidth: 0 }, children: [
-            root2 && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { color: "text.secondary", component: "div", sx: { lineHeight: 1.5 }, variant: "overline", children: "Trace root" }),
+            root2 && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { "data-testid": TRACE_SIDEBAR_ROOT_HEADING_TEST_ID, sx: { alignItems: "center", display: "flex", gap: 1, minWidth: 0 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(AwsServiceIcon, { hideTooltip: true, service: root2.service_name, size: "small" }),
-              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { noWrap: true, sx: { fontWeight: 600 }, title: root2.operation_name, variant: "subtitle1", children: root2.operation_name })
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { noWrap: true, sx: { flex: "0 1 auto", fontWeight: 600, minWidth: 0 }, title: root2.operation_name, variant: "subtitle1", children: root2.operation_name }),
+              rootResource !== "" && rootResource !== "*" && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { color: "text.secondary", noWrap: true, sx: { flex: "1 1 0", minWidth: 0 }, title: rootResource, variant: "body2", children: rootResource })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { color: "text.secondary", variant: "caption", children: [
               formatDuration(stats.durationMs),