@localstack/appinspector-ui 1.0.117 → 1.0.119

package/dist/index.js

@@ -2413,7 +2413,7 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box21 } from "@mui/material";
+import { Box as Box20 } from "@mui/material";
 import { useCallback as useCallback12, useState as useState17 } from "react";
 
 // src/api/errors.ts
@@ -15349,7 +15349,7 @@ var SpansDataGrid = ({
               size: "small",
               sx: { px: 1 },
               variant: "text",
-              children: "View Details"
+              children: "View Graph"
             }
           )
         ] });
@@ -18611,7 +18611,7 @@ var useSpans = () => {
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box20, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
+import { Box as Box19, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef17, useState as useState16 } from "react";
@@ -30700,7 +30700,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   );
   const [parseNestedJson, setParseNestedJson] = useState15(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -30885,64 +30885,12 @@ import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState
 import { useEffect as useEffect20 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box18, Divider as Divider5, Stack as Stack4, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
+import { Cancel as Cancel3, GppBad as GppBad2 } from "@mui/icons-material";
+import { Box as Box17, Divider as Divider5, Stack as Stack4, Tooltip as Tooltip5, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo as memo11 } from "react";
-
-// src/components/trace-graph/problem-indicator.tsx
-import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
-import { Box as Box17, Tooltip as Tooltip5 } from "@mui/material";
-import { useMemo as useMemo13 } from "react";
-import { jsx as jsx142 } from "react/jsx-runtime";
-var ProblemIndicator = ({ error }) => {
-  const icon = useMemo13(() => {
-    switch (error.level) {
-      case "error": {
-        return /* @__PURE__ */ jsx142(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
-      }
-      case "warning": {
-        return /* @__PURE__ */ jsx142(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
-      }
-      default: {
-        return /* @__PURE__ */ jsx142(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
-      }
-    }
-  }, [error.level]);
-  const color2 = useMemo13(() => {
-    switch (error.level) {
-      case "error": {
-        return "#d32f2f";
-      }
-      case "warning": {
-        return "#ff9800";
-      }
-      default: {
-        return "#2196f3";
-      }
-    }
-  }, [error.level]);
-  return /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx142(
-    Box17,
-    {
-      sx: {
-        alignItems: "center",
-        backgroundColor: `${color2}15`,
-        border: `1px solid ${color2}`,
-        borderRadius: "50%",
-        cursor: "pointer",
-        display: "inline-flex",
-        height: "18px",
-        justifyContent: "center",
-        width: "18px"
-      },
-      children: icon
-    }
-  ) });
-};
-
-// src/components/trace-graph/service-node.tsx
-import { jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
+import { memo as memo11, useMemo as useMemo13 } from "react";
+import { jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -30950,9 +30898,17 @@ var handleStyle = {
 };
 var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
-  const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
+  const isError = data.event.status_code === 2;
+  const hasPermissionEvents = useMemo13(
+    () => data.event.events.some(
+      (event) => event.event_type === "iam.policy_evaluation" && event.name === "iam.policy.denied"
+    ),
+    [data.event.events]
+  );
+  const isWarning = !isError && data.event.status_code === 1 && hasPermissionEvents;
+  const outlineColor = isError ? theme.palette.error.main : isWarning ? theme.palette.warning.main : void 0;
   return /* @__PURE__ */ jsxs132(
-    Box18,
+    Box17,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       role: "button",
@@ -30961,21 +30917,21 @@ var ServiceNode = memo11(({ data, selected }) => {
           boxShadow: theme.palette.mode === "dark" ? "0 4px 12px rgba(0,0,0,0.6)" : "0 4px 12px rgba(0,0,0,0.22)"
         },
         "backgroundColor": theme.palette.background.paper,
-        "borderLeft": `3px solid ${hasErrors ? theme.palette.error.main : "transparent"}`,
+        "borderLeft": `3px solid ${outlineColor ?? "transparent"}`,
         "borderRadius": 1,
         "boxShadow": theme.palette.mode === "dark" ? "0 1px 4px rgba(0,0,0,0.5)" : "0 1px 4px rgba(0,0,0,0.13)",
         "cursor": "pointer",
         "maxWidth": 220,
         "minWidth": 140,
-        "outline": selected ? `2px solid ${hasErrors ? theme.palette.error.main : theme.palette.primary.main}` : hasErrors ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+        "outline": selected ? `2px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
         "overflow": "hidden",
         "position": "relative",
         "transition": "all 0.3s ease"
       },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-        /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ jsx142(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ jsx142(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
         /* @__PURE__ */ jsxs132(
           Stack4,
           {
@@ -30983,9 +30939,9 @@ var ServiceNode = memo11(({ data, selected }) => {
             direction: "row",
             sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
             children: [
-              /* @__PURE__ */ jsx143(Box18, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx143(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
+              /* @__PURE__ */ jsx142(Box17, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx142(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
               /* @__PURE__ */ jsxs132(Stack4, { sx: { minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx143(
+                /* @__PURE__ */ jsx142(
                   Typography12,
                   {
                     noWrap: true,
@@ -30994,7 +30950,7 @@ var ServiceNode = memo11(({ data, selected }) => {
                     children: getServiceDisplayName(data.event.service_name)
                   }
                 ),
-                data.event.resource_name != "" && /* @__PURE__ */ jsx143(
+                data.event.resource_name != "" && /* @__PURE__ */ jsx142(
                   Typography12,
                   {
                     color: "text.secondary",
@@ -31008,7 +30964,7 @@ var ServiceNode = memo11(({ data, selected }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx143(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+        /* @__PURE__ */ jsx142(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
         /* @__PURE__ */ jsxs132(
           Stack4,
           {
@@ -31016,8 +30972,8 @@ var ServiceNode = memo11(({ data, selected }) => {
             direction: "row",
             sx: { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
             children: [
-              /* @__PURE__ */ jsx143(
-                Box18,
+              /* @__PURE__ */ jsxs132(
+                Box17,
                 {
                   sx: {
                     alignItems: "center",
@@ -31026,10 +30982,13 @@ var ServiceNode = memo11(({ data, selected }) => {
                     justifyContent: "center",
                     width: "38px"
                   },
-                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ jsx143(ProblemIndicator, { error }, error.span_id))
+                  children: [
+                    (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx142(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
+                    isError && !hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx142(Cancel3, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx143(
+              /* @__PURE__ */ jsx142(
                 Typography12,
                 {
                   "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
@@ -31103,11 +31062,11 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box19, IconButton as IconButton4 } from "@mui/material";
+import { Box as Box18, IconButton as IconButton4 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
 import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
-import { jsx as jsx144, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
@@ -31126,7 +31085,7 @@ var Controls = memo12(() => {
     void fitView();
   };
   return /* @__PURE__ */ jsxs133(
-    Box19,
+    Box18,
     {
       sx: {
         bottom: 0,
@@ -31139,33 +31098,33 @@ var Controls = memo12(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx143(
           IconButton4,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx144(Add, {})
+            children: /* @__PURE__ */ jsx143(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx143(
           IconButton4,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx144(Remove, {})
+            children: /* @__PURE__ */ jsx143(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx143(
           IconButton4,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx144(FitScreen, {})
+            children: /* @__PURE__ */ jsx143(FitScreen, {})
           }
         )
       ]
@@ -31174,7 +31133,7 @@ var Controls = memo12(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -31241,7 +31200,7 @@ var TraceGraph = ({
     spans.error && /* @__PURE__ */ jsxs134(
       Alert5,
       {
-        action: /* @__PURE__ */ jsx145(Button5, { onClick: () => {
+        action: /* @__PURE__ */ jsx144(Button5, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -31270,8 +31229,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx145(Controls, {}),
-          /* @__PURE__ */ jsx145(
+          /* @__PURE__ */ jsx144(Controls, {}),
+          /* @__PURE__ */ jsx144(
             Background,
             {
               bgColor: theme.palette.background.default,
@@ -31285,7 +31244,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment13, jsx as jsx146, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -31335,7 +31294,7 @@ var TraceGraphView = ({
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ jsxs135(
-    Box20,
+    Box19,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
@@ -31347,13 +31306,13 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs135(Box20, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx146(Button6, { onClick: () => {
+        /* @__PURE__ */ jsxs135(Box19, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx145(Button6, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx146(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx146(Box20, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx145(Box19, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx146(
+        /* @__PURE__ */ jsx145(
           Paper3,
           {
             sx: {
@@ -31363,7 +31322,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx146(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx145(
               StatusMessage,
               {
                 error: statusError,
@@ -31372,14 +31331,14 @@ var TraceGraphView = ({
                 status
               }
             ) : /* @__PURE__ */ jsxs135(Fragment13, { children: [
-              /* @__PURE__ */ jsx146(Main, { open, children: /* @__PURE__ */ jsx146(
-                Box20,
+              /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsx145(
+                Box19,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx146(ReactFlowProvider, { children: /* @__PURE__ */ jsx146(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -31396,7 +31355,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx146(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx146(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -31489,7 +31448,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const navigateToSpansList = useCallback11(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx146(
+  return /* @__PURE__ */ jsx145(
     TraceGraphView,
     {
       fetchError,
@@ -31514,7 +31473,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { Fragment as Fragment14, jsx as jsx147, jsxs as jsxs136 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx146, jsxs as jsxs136 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -31563,7 +31522,7 @@ var SpansListPage = () => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ jsxs136(Fragment14, { children: [
     /* @__PURE__ */ jsxs136(
-      Box21,
+      Box20,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -31578,7 +31537,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && !shouldShowStatusMessage && /* @__PURE__ */ jsx147(
+          !checking && !shouldShowStatusMessage && /* @__PURE__ */ jsx146(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -31588,7 +31547,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          shouldShowStatusMessage ? /* @__PURE__ */ jsx147(
+          shouldShowStatusMessage ? /* @__PURE__ */ jsx146(
             StatusMessage,
             {
               error: statusError,
@@ -31597,7 +31556,7 @@ var SpansListPage = () => {
               onRetry: handleRetry,
               status
             }
-          ) : /* @__PURE__ */ jsx147(
+          ) : /* @__PURE__ */ jsx146(
             SpansList,
             {
               clearingSpans,
@@ -31625,7 +31584,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx147(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx146(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });