@localstack/appinspector-ui 1.0.185 → 1.0.186

package/dist/index.cjs

@@ -13103,7 +13103,7 @@ var ResponsiveTimestampCell = (0, import_react31.memo)(({ date }) => {
 
 // src/dev-settings.tsx
 var React5 = __toESM(require("react"), 1);
-var DEFAULT_DEV_SETTINGS = { requestTerms: "on", waterfallIssueBackgrounds: "on", waterfallLayout: "tree", waterfallStatusIcons: "first column" };
+var DEFAULT_DEV_SETTINGS = { requestTerms: "on", warningIcon: "iam shield", waterfallIssueBackgrounds: "on", waterfallLayout: "tree", waterfallStatusIcons: "first column" };
 var DevSettingsContext = React5.createContext(DEFAULT_DEV_SETTINGS);
 var useDevSettings = () => React5.useContext(DevSettingsContext);
 
@@ -15355,22 +15355,6 @@ ServiceCell.displayName = "ServiceCell";
 var import_icons_material2 = require("@mui/icons-material");
 var import_material5 = require("@mui/material");
 
-// src/types/error-levels.ts
-var ErrorLevel = {
-  ERROR: 3,
-  // General error
-  IAM_PERMISSION: 5,
-  // IAM permission issues
-  OK: 2,
-  // OK
-  // Standard OTEL status codes
-  UNSET: 1,
-  // Unset
-  // Extended custom levels
-  WARNING: 4
-  // Warning
-};
-
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
   if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
@@ -15469,58 +15453,40 @@ var getIamSummary = (span) => {
   return { denials, level: void 0 };
 };
 
-// src/utils/error-level.ts
-var calculateHighestErrorLevel = (span) => {
-  if (span.operation_status) {
-    switch (span.operation_status) {
-      case "error": {
-        return ErrorLevel.ERROR;
-      }
-      case "iam_explicit_deny":
-      case "iam_explicit_warn":
-      case "iam_implicit_deny":
-      case "iam_implicit_warn": {
-        return ErrorLevel.IAM_PERMISSION;
-      }
-      default: {
-        return ErrorLevel.OK;
-      }
-    }
+// src/utils/span-issues.ts
+var firstText = (...values) => values.find((value) => !!value) ?? void 0;
+var OTEL_STATUS_ERROR = 2;
+var getIamDenials = (span) => span.events.flatMap((event) => {
+  if (!event.event_type?.toLowerCase().includes("iam") || typeof event.attributes?.payload !== "string") {
+    return [];
   }
-  const hasIamDenial = span.events.some((event) => {
-    if (!event.event_type?.toLowerCase().includes("iam")) return false;
-    if (typeof event.attributes?.payload !== "string") return false;
-    const parsed = parseIAMEvent(event.attributes.payload);
-    return parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied";
-  });
-  if (hasIamDenial) return ErrorLevel.IAM_PERMISSION;
-  if (span.status_code === 2) return ErrorLevel.ERROR;
-  const hasErrorInErrors = span.errors?.some((error) => error.level === "error");
-  if (hasErrorInErrors) return ErrorLevel.ERROR;
-  const hasWarning = span.errors?.some((error) => error.level === "warning");
-  if (hasWarning) return ErrorLevel.WARNING;
-  return span.status_code || ErrorLevel.UNSET;
+  const permission = parseIAMEvent(event.attributes.payload)?.permission;
+  if (permission === "explicitly_denied") return ["explicit"];
+  if (permission === "implicitly_denied") return ["implicit"];
+  return [];
+});
+var getSpanIssues = (span) => {
+  const status = span.operation_status;
+  const iamDenied = status === "iam_explicit_deny" || status === "iam_implicit_deny";
+  const iamWarned = status === "iam_explicit_warn" || status === "iam_implicit_warn";
+  const errorMessages = (span.errors ?? []).filter((item) => item.level === "error");
+  const warningMessages = (span.errors ?? []).filter((item) => item.level === "warning");
+  const denials = getIamDenials(span);
+  const unenforcedDenial = !iamDenied && (denials.length > 0 || span.attributes?.["localstack.has_iam_deny_event"] === true);
+  const error = status === "error" || iamDenied || span.status_code === OTEL_STATUS_ERROR || errorMessages.length > 0;
+  const warning2 = iamWarned || warningMessages.length > 0 || unenforcedDenial;
+  const denialCount = unenforcedDenial ? Math.max(1, denials.length) : 0;
+  return {
+    error,
+    errorType: error ? firstText(span.status_message, errorMessages[0]?.message) ?? (iamDenied ? "AccessDenied" : "Error") : void 0,
+    warning: warning2,
+    warningCount: warning2 ? Math.max(1, warningMessages.length + denialCount) : 0,
+    warningType: warning2 ? firstText(warningMessages[0]?.message) ?? (unenforcedDenial ? `IAM ${denials[0] ?? "implicit"} deny` : iamWarned ? "IAM permission warning" : "Warning") : void 0
+  };
 };
 
 // src/components/cells/status-cell.tsx
 var import_jsx_runtime125 = require("react/jsx-runtime");
-var StatusIcon = ({ errorLevel, operationStatus, spanStatusCode }) => {
-  switch (errorLevel) {
-    case ErrorLevel.ERROR: {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Cancel, { sx: { color: "red" } });
-    }
-    case ErrorLevel.IAM_PERMISSION: {
-      const isDenial = operationStatus ? operationStatus === "iam_explicit_deny" || operationStatus === "iam_implicit_deny" : spanStatusCode === 2;
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: isDenial ? "red" : "warning.main" } });
-    }
-    case ErrorLevel.WARNING: {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Error, { sx: { color: "orange" } });
-    }
-    default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
-    }
-  }
-};
 var SPAN_STATUS_LABELS = {
   0: "Unset",
   1: "OK",
@@ -15548,9 +15514,14 @@ var buildTooltipContent = (span) => {
   ] });
 };
 var StatusIconWithTooltip = ({ span }) => {
-  const errorLevel = calculateHighestErrorLevel(span);
-  if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { title: buildTooltipContent(span), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StatusIcon, { errorLevel, operationStatus: span.operation_status, spanStatusCode: span.status_code }) }) });
+  const { warningIcon } = useDevSettings();
+  const { error, warning: warning2 } = getSpanIssues(span);
+  if (!error && !warning2) return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
+  const iamLevel = getIamSummary(span).level;
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { title: buildTooltipContent(span), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: "error.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Cancel, { sx: { color: "error.main" } }) }),
+    warning2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: "warning.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Error, { sx: { color: "warning.main" } }) })
+  ] }) });
 };
 
 // src/components/spans-list/span-count-badge.tsx
@@ -16754,38 +16725,6 @@ var getEventGroupsByType = (events) => {
   return groups;
 };
 
-// src/utils/span-issues.ts
-var firstText = (...values) => values.find((value) => !!value) ?? void 0;
-var OTEL_STATUS_ERROR = 2;
-var getIamDenials = (span) => span.events.flatMap((event) => {
-  if (!event.event_type?.toLowerCase().includes("iam") || typeof event.attributes?.payload !== "string") {
-    return [];
-  }
-  const permission = parseIAMEvent(event.attributes.payload)?.permission;
-  if (permission === "explicitly_denied") return ["explicit"];
-  if (permission === "implicitly_denied") return ["implicit"];
-  return [];
-});
-var getSpanIssues = (span) => {
-  const status = span.operation_status;
-  const iamDenied = status === "iam_explicit_deny" || status === "iam_implicit_deny";
-  const iamWarned = status === "iam_explicit_warn" || status === "iam_implicit_warn";
-  const errorMessages = (span.errors ?? []).filter((item) => item.level === "error");
-  const warningMessages = (span.errors ?? []).filter((item) => item.level === "warning");
-  const denials = getIamDenials(span);
-  const unenforcedDenial = !iamDenied && (denials.length > 0 || span.attributes?.["localstack.has_iam_deny_event"] === true);
-  const error = status === "error" || iamDenied || span.status_code === OTEL_STATUS_ERROR || errorMessages.length > 0;
-  const warning2 = iamWarned || warningMessages.length > 0 || unenforcedDenial;
-  const denialCount = unenforcedDenial ? Math.max(1, denials.length) : 0;
-  return {
-    error,
-    errorType: error ? firstText(span.status_message, errorMessages[0]?.message) ?? (iamDenied ? "AccessDenied" : "Error") : void 0,
-    warning: warning2,
-    warningCount: warning2 ? Math.max(1, warningMessages.length + denialCount) : 0,
-    warningType: warning2 ? firstText(warningMessages[0]?.message) ?? (unenforcedDenial ? `IAM ${denials[0] ?? "implicit"} deny` : iamWarned ? "IAM permission warning" : "Warning") : void 0
-  };
-};
-
 // src/utils/time.ts
 function unixNanoToDate(unixNanoString) {
   const milliseconds = unixNanoToMilliseconds(unixNanoString);
@@ -16834,7 +16773,7 @@ var import_react44 = require("react");
 var import_icons_material8 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
 var import_jsx_runtime132 = require("react/jsx-runtime");
-var StatusIcon2 = ({ errorLevel }) => {
+var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
       return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material8.Cancel, { sx: { color: "red" } });
@@ -18935,7 +18874,7 @@ var EventDetail = ({
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material17.Box, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material17.Box, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(StatusIcon, { errorLevel: eventLevel }),
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material17.Typography, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material17.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material17.Box, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
@@ -31584,8 +31523,9 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
+var NodeContent = ({ event, expanded, iamLevel, issues }) => {
   const theme = (0, import_material20.useTheme)();
+  const { warningIcon } = useDevSettings();
   return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react52.Handle, { position: import_react52.Position.Left, style: handleStyle, type: "target" }),
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react52.Handle, { position: import_react52.Position.Right, style: handleStyle, type: "source" }),
@@ -31640,8 +31580,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
-                isError && !hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: "Error", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                issues.error && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) : /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
+                issues.warning && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) : /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Error, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
               ]
             }
           ),
@@ -31664,17 +31604,9 @@ var ServiceNode = (0, import_react53.memo)(({ data, selected }) => {
   const theme = (0, import_material20.useTheme)();
   const [isHovered, setIsHovered] = (0, import_react53.useState)(false);
   const nodeRef = (0, import_react53.useRef)(null);
-  const { operation_status } = data.event;
-  const hasPermissionEventsLegacy = (0, import_react53.useMemo)(
-    () => data.event.events.some(
-      (event) => event.event_type === "iam.policy_evaluation" && event.name === "iam.policy.denied"
-    ),
-    [data.event.events]
-  );
-  const isError = operation_status ? operation_status === "error" || operation_status === "iam_explicit_deny" || operation_status === "iam_implicit_deny" : data.event.status_code === 2;
-  const isWarning = operation_status ? operation_status === "iam_explicit_warn" || operation_status === "iam_implicit_warn" : !isError && data.event.status_code === 1 && hasPermissionEventsLegacy;
-  const hasPermissionEvents = operation_status ? operation_status.startsWith("iam_") : hasPermissionEventsLegacy;
-  const outlineColor = isError ? theme.palette.error.main : isWarning ? theme.palette.warning.main : void 0;
+  const issues = getSpanIssues(data.event);
+  const iamLevel = getIamSummary(data.event).level;
+  const outlineColor = issues.error ? theme.palette.error.main : issues.warning ? theme.palette.warning.main : void 0;
   const sharedBoxSx = {
     backgroundColor: theme.palette.background.paper,
     borderLeft: `3px solid ${outlineColor ?? "transparent"}`,
@@ -31683,7 +31615,7 @@ var ServiceNode = (0, import_react53.memo)(({ data, selected }) => {
     minWidth: 140,
     outline: selected ? `2px solid ${outlineColor ?? theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
   };
-  const contentProps = { event: data.event, hasPermissionEvents, isError, isWarning };
+  const contentProps = { event: data.event, iamLevel, issues };
   const handleMouseEnter = () => {
     setIsHovered(true);
     const xyNode = nodeRef.current?.closest(".react-flow__node");