@localstack/appinspector-ui 1.0.116 → 1.0.117

package/dist/index.cjs

@@ -2491,6 +2491,9 @@ var EVENT_DETAILS_REQUEST_PAYLOAD = "event-details-request-payload";
 var EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID = "event-details-response-payload";
 var EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID = "event-details-exception-payload";
 var EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID = "event-details-iam-errors-suppressed";
+var EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID = "event-details-iam-principal";
+var EVENT_DETAILS_IAM_ACTIONS_TEST_ID = "event-details-iam-actions";
+var EVENT_DETAILS_IAM_RESOURCES_TEST_ID = "event-details-iam-resources";
 var ERROR_COUNT_TEST_ID = "error-count";
 var WARNING_COUNT_TEST_ID = "warning-count";
 var SERVICE_NODE_TEST_ID = "service-node";
@@ -18594,14 +18597,14 @@ var useSpans = () => {
 };
 
 // src/pages/trace-graph-page.tsx
-var import_icons_material13 = require("@mui/icons-material");
+var import_icons_material12 = require("@mui/icons-material");
 var import_material23 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
 var import_react67 = require("@xyflow/react");
 var import_react68 = require("react");
 
 // src/components/event-details/event-details.tsx
-var import_icons_material10 = require("@mui/icons-material");
+var import_icons_material9 = require("@mui/icons-material");
 var import_material18 = require("@mui/material");
 var import_react59 = require("react");
 
@@ -18714,7 +18717,7 @@ var getEventGroupsByType = (events) => {
 };
 
 // src/components/event-details/event-detail.tsx
-var import_icons_material8 = require("@mui/icons-material");
+var import_icons_material7 = require("@mui/icons-material");
 var import_material15 = require("@mui/material");
 var import_react56 = require("react");
 
@@ -18824,57 +18827,48 @@ var IAMEventDetail = ({ event }) => {
 };
 
 // src/components/event-details/iam-permission-detail.tsx
-var import_icons_material7 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
 var import_react53 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
-var getChipColors = (status) => ({
-  backgroundColor: getPermissionStatusColor(status),
-  color: "white"
-});
-var LabelValue = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { wordBreak: "break-all" }, variant: "caption", children: value })
+var getChipColor = (isAllowed, spanStatusCode) => {
+  if (isAllowed) return "success.main";
+  if (spanStatusCode === 2) return "error.main";
+  return "warning.main";
+};
+var LabelValue = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { wordBreak: "break-all" }, variant: "body2", children: value })
 ] });
-var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react53.useState)(false);
+var IAMPermissionItem = ({ event, spanStatusCode }) => {
   const parsedData = (0, import_react53.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) return;
     const parsedIAM2 = parseIAMEvent(payloadString);
     if (!parsedIAM2) return;
-    return { chipColors: getChipColors(parsedIAM2.permission), parsedIAM: parsedIAM2 };
+    return { parsedIAM: parsedIAM2 };
   }, [event.attributes?.payload]);
   if (!parsedData) {
     return null;
   }
-  const { chipColors, parsedIAM } = parsedData;
+  const { parsedIAM } = parsedData;
+  const isAllowed = parsedIAM.permission === "explicitly_allowed" || parsedIAM.permission === "implicitly_allowed";
+  const chipColors = { backgroundColor: getChipColor(isAllowed, spanStatusCode), color: "white" };
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { mb: 0.5 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.IconButton, { onClick: () => {
-        setIsOpen(!isOpen);
-      }, size: "small", sx: { p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowRight, { sx: { fontSize: 16 } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Chip, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Typography, { color: "text.secondary", noWrap: true, sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, variant: "caption", children: [
-        parsedIAM.service,
-        ":",
-        parsedIAM.operation
-      ] })
-    ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LabelValue, { label: "Principal", value: parsedIAM.principal }),
-      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Actions" }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block" }, variant: "caption", children: action }, action)) })
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Chip, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Stack, { spacing: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LabelValue, { label: "Principal", value: parsedIAM.principal }) }),
+      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block" }, variant: "body2", children: action }, action))
       ] }),
-      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }, resource))
       ] })
     ] })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/payload-viewer.tsx
 var import_material14 = require("@mui/material");
@@ -20760,7 +20754,7 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { fontSize: 16 } })
+          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material7.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material7.KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
@@ -20815,10 +20809,11 @@ var getEventLevelFromGroup = (group4) => {
 var EventDetail = ({
   displayText,
   events,
+  spanStatusCode,
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IAMPermissionDetail, { events });
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IAMPermissionDetail, { events, spanStatusCode });
   }
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Box, { children: [
@@ -30624,7 +30619,7 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
 };
 
 // src/components/event-details/toggle-section.tsx
-var import_icons_material9 = require("@mui/icons-material");
+var import_icons_material8 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
 var import_react58 = require("react");
 var import_jsx_runtime140 = require("react/jsx-runtime");
@@ -30656,7 +30651,7 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-                isOpen ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material9.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material9.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
+                isOpen ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
@@ -30730,7 +30725,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Close, {}) })
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material9.Close, {}) })
         ]
       }
     ),
@@ -30800,7 +30795,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
       /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(ToggleSection, { headline: "Permissions", children: [
         selectedEvent.iam_errors_suppressed && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Alert, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
         !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
-        eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
+        eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
         eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
         eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
@@ -30883,7 +30878,7 @@ var import_react61 = require("@xyflow/react");
 var import_react62 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
-var import_icons_material11 = require("@mui/icons-material");
+var import_icons_material10 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
 var import_react60 = require("react");
 var import_jsx_runtime142 = require("react/jsx-runtime");
@@ -30891,13 +30886,13 @@ var ProblemIndicator = ({ error }) => {
   const icon = (0, import_react60.useMemo)(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material10.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material10.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material10.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
@@ -31094,7 +31089,7 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 };
 
 // src/components/trace-graph/xyflow/controls.tsx
-var import_icons_material12 = require("@mui/icons-material");
+var import_icons_material11 = require("@mui/icons-material");
 var import_material21 = require("@mui/material");
 var import_react63 = require("@xyflow/react");
 var import_react64 = require("react");
@@ -31138,7 +31133,7 @@ var Controls = (0, import_react64.memo)(() => {
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.Add, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material11.Add, {})
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
@@ -31148,7 +31143,7 @@ var Controls = (0, import_react64.memo)(() => {
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.Remove, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material11.Remove, {})
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
@@ -31157,7 +31152,7 @@ var Controls = (0, import_react64.memo)(() => {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.FitScreen, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material11.FitScreen, {})
           }
         )
       ]
@@ -31342,7 +31337,7 @@ var TraceGraphView = ({
         /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_material23.Box, { sx: { display: "flex", width: "100%" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_material23.Button, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_icons_material13.ArrowBack, {}), children: "Go back" }),
+          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_icons_material12.ArrowBack, {}), children: "Go back" }),
           /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_material23.Box, { sx: { flexGrow: 1 } })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(