@localstack/appinspector-ui 1.0.185 → 1.0.186

package/dist/index.js

@@ -2422,7 +2422,7 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box22, Paper as Paper2 } from "@mui/material";
-import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo14, useRef as useRef19, useState as useState22 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo13, useRef as useRef19, useState as useState22 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -13116,7 +13116,7 @@ var ResponsiveTimestampCell = memo3(({ date }) => {
 
 // src/dev-settings.tsx
 import * as React5 from "react";
-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);
 
@@ -15368,22 +15368,6 @@ ServiceCell.displayName = "ServiceCell";
 import { Cancel as Cancel2, Error as Error2, GppBad } from "@mui/icons-material";
 import { Box as Box3, Divider, Tooltip as Tooltip3, Typography as Typography3 } from "@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) {
@@ -15482,58 +15466,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
 import { Fragment as Fragment2, jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
-var StatusIcon = ({ errorLevel, operationStatus, spanStatusCode }) => {
-  switch (errorLevel) {
-    case ErrorLevel.ERROR: {
-      return /* @__PURE__ */ jsx125(Cancel2, { sx: { color: "red" } });
-    }
-    case ErrorLevel.IAM_PERMISSION: {
-      const isDenial = operationStatus ? operationStatus === "iam_explicit_deny" || operationStatus === "iam_implicit_deny" : spanStatusCode === 2;
-      return /* @__PURE__ */ jsx125(GppBad, { sx: { color: isDenial ? "red" : "warning.main" } });
-    }
-    case ErrorLevel.WARNING: {
-      return /* @__PURE__ */ jsx125(Error2, { sx: { color: "orange" } });
-    }
-    default: {
-      return /* @__PURE__ */ jsx125(Fragment2, {});
-    }
-  }
-};
 var SPAN_STATUS_LABELS = {
   0: "Unset",
   1: "OK",
@@ -15561,9 +15527,14 @@ var buildTooltipContent = (span) => {
   ] });
 };
 var StatusIconWithTooltip = ({ span }) => {
-  const errorLevel = calculateHighestErrorLevel(span);
-  if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ jsx125(Fragment2, {});
-  return /* @__PURE__ */ jsx125(Tooltip3, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsx125(Box3, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ jsx125(StatusIcon, { errorLevel, operationStatus: span.operation_status, spanStatusCode: span.status_code }) }) });
+  const { warningIcon } = useDevSettings();
+  const { error, warning: warning2 } = getSpanIssues(span);
+  if (!error && !warning2) return /* @__PURE__ */ jsx125(Fragment2, {});
+  const iamLevel = getIamSummary(span).level;
+  return /* @__PURE__ */ jsx125(Tooltip3, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: [
+    error && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ jsx125(GppBad, { sx: { color: "error.main" } }) : /* @__PURE__ */ jsx125(Cancel2, { sx: { color: "error.main" } }) }),
+    warning2 && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ jsx125(GppBad, { sx: { color: "warning.main" } }) : /* @__PURE__ */ jsx125(Error2, { sx: { color: "warning.main" } }) })
+  ] }) });
 };
 
 // src/components/spans-list/span-count-badge.tsx
@@ -16780,38 +16751,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);
@@ -16860,7 +16799,7 @@ import { useEffect as useEffect12, useMemo as useMemo7, useRef as useRef8, useSt
 import { Cancel as Cancel4, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
 import { Box as Box9 } from "@mui/material";
 import { jsx as jsx132 } from "react/jsx-runtime";
-var StatusIcon2 = ({ errorLevel }) => {
+var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
       return /* @__PURE__ */ jsx132(Cancel4, { sx: { color: "red" } });
@@ -18961,7 +18900,7 @@ var EventDetail = ({
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ jsxs129(Box14, { children: [
     /* @__PURE__ */ jsxs129(Box14, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx137(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ jsx137(StatusIcon, { errorLevel: eventLevel }),
       /* @__PURE__ */ jsx137(Typography10, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
     /* @__PURE__ */ jsx137(Box14, { children: events.map((event) => /* @__PURE__ */ jsx137(Box14, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx137(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
@@ -31598,20 +31537,21 @@ import { Background, MarkerType, MiniMap, Position as Position2, ReactFlow, useE
 import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef13, useState as useState15 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Cancel as Cancel6, GppBad as GppBad2 } from "@mui/icons-material";
+import { Cancel as Cancel6, Error as ErrorIcon4, GppBad as GppBad2 } from "@mui/icons-material";
 import { Box as Box17, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography13, useTheme as useTheme4 } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
-import { memo as memo11, useMemo as useMemo11, useRef as useRef12, useState as useState14 } from "react";
+import { memo as memo11, useRef as useRef12, useState as useState14 } from "react";
 import { Fragment as Fragment11, jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
-var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
+var NodeContent = ({ event, expanded, iamLevel, issues }) => {
   const theme = useTheme4();
+  const { warningIcon } = useDevSettings();
   return /* @__PURE__ */ jsxs132(Fragment11, { children: [
     /* @__PURE__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
     /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
@@ -31666,8 +31606,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx143(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
-                isError && !hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx143(Cancel6, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                issues.error && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ jsx143(GppBad2, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) : /* @__PURE__ */ jsx143(Cancel6, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
+                issues.warning && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ jsx143(GppBad2, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) : /* @__PURE__ */ jsx143(ErrorIcon4, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
               ]
             }
           ),
@@ -31690,17 +31630,9 @@ var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
   const [isHovered, setIsHovered] = useState14(false);
   const nodeRef = useRef12(null);
-  const { operation_status } = data.event;
-  const hasPermissionEventsLegacy = useMemo11(
-    () => 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"}`,
@@ -31709,7 +31641,7 @@ var ServiceNode = memo11(({ 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");
@@ -32298,7 +32230,7 @@ var getTraceBounds = (spans) => {
 };
 
 // src/components/trace-panel/waterfall.tsx
-import { AccountTreeOutlined, Cancel as Cancel7, Error as ErrorIcon4, FormatListBulleted, KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
+import { AccountTreeOutlined, Cancel as Cancel7, Error as ErrorIcon5, FormatListBulleted, KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box19, ButtonBase, ToggleButton as ToggleButton2, ToggleButtonGroup as ToggleButtonGroup2, Typography as Typography14 } from "@mui/material";
 import { alpha as alpha5 } from "@mui/material/styles";
 import * as React124 from "react";
@@ -32382,7 +32314,7 @@ var flatten = (nodes2, collapsed, depth = 0, branches = [], parent) => nodes2.fl
 var flattenAll = (nodes2) => flatten(nodes2, /* @__PURE__ */ new Set()).map((row) => ({ ...row, branches: [], depth: 0, last: true })).toSorted((left, right) => compareNano(left.node.span.start_time_unix_nano, right.node.span.start_time_unix_nano));
 var StatusIcons = ({ error, warning: warning2 }) => /* @__PURE__ */ jsxs136(Fragment13, { children: [
   error && /* @__PURE__ */ jsx147(Cancel7, { sx: { color: "error.main", fontSize: 14 } }),
-  warning2 && /* @__PURE__ */ jsx147(ErrorIcon4, { sx: { color: "warning.main", fontSize: 14 } })
+  warning2 && /* @__PURE__ */ jsx147(ErrorIcon5, { sx: { color: "warning.main", fontSize: 14 } })
 ] });
 var Line = ({ height, left, top = 0, width = 1 }) => /* @__PURE__ */ jsx147(
   Box19,
@@ -33603,11 +33535,11 @@ var SpansListPage = () => {
     setSelectedSpanId(void 0);
   }, []);
   const rootSpanId = selectedSpanId === void 0 ? void 0 : compute.rows[selectedSpanId]?.rootSpanId;
-  const treeSpans = useMemo14(() => {
+  const treeSpans = useMemo13(() => {
     if (rootSpanId === void 0) return [];
     return Object.entries(compute.rows).filter(([, row]) => row.rootSpanId === rootSpanId).map(([spanId]) => getSpan(spanId)).filter((span) => span !== void 0);
   }, [compute.rows, getSpan, rootSpanId]);
-  const spanMatches = useMemo14(
+  const spanMatches = useMemo13(
     () => compute.queryActive ? (spanId) => compute.rows[spanId]?.matches ?? false : void 0,
     [compute]
   );