@localstack/appinspector-ui 1.0.19 → 1.0.21

package/dist/index.js

@@ -23,7 +23,7 @@ import { Alert, Box as Box5, Button as Button2 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
 import { Cached, DeleteForeverOutlined, Search } from "@mui/icons-material";
-import { Box as Box4, Button, FormControlLabel, Grid, Paper, Switch, TextField, Typography as Typography2 } from "@mui/material";
+import { Box as Box4, Button, FormControlLabel, Grid, Paper, Switch, TextField, Tooltip as Tooltip3, Typography as Typography2 } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
 import { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
 
@@ -2690,16 +2690,28 @@ var columns = [
     field: "trace_id",
     headerName: "Trace",
     renderCell: (parameters) => {
-      return /* @__PURE__ */ jsx125("span", { children: parameters.value });
+      return /* @__PURE__ */ jsx125(Tooltip3, { arrow: true, title: String(parameters.value), children: /* @__PURE__ */ jsx125(
+        "span",
+        {
+          style: {
+            maxWidth: "100%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: parameters.value
+        }
+      ) });
     },
-    width: 300
+    type: "string",
+    width: 120
   },
   {
     field: "start_time_unix_nano",
     headerName: "Time",
     renderCell: (parameters) => /* @__PURE__ */ jsx125(ResponsiveTimestampCell, { value: parameters.value }),
     type: "string",
-    width: 200
+    width: 180
   },
   {
     field: "producer",
@@ -2712,19 +2724,19 @@ var columns = [
     },
     sortable: true,
     sortComparator: resourceNameComparator,
-    width: 320
+    width: 260
   },
   {
     field: "operation_name",
     headerName: "Action",
     type: "string",
-    width: 150
+    width: 130
   },
   {
     field: "consumer",
     flex: 1,
     headerName: "Consumer",
-    minWidth: 280,
+    maxWidth: 260,
     renderCell: (parameters) => {
       return /* @__PURE__ */ jsx125(ServiceCell, { resource: parameters.row.resource_name, service: parameters.row.service_name });
     },
@@ -3595,6 +3607,7 @@ import { useNavigate as useNavigate2, useParams, useSearchParams } from "react-r
 
 // src/components/event-details/event-details.tsx
 import { Box as Box15, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
+import { useMemo as useMemo7 } from "react";
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3864,7 +3877,7 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { contain
     {
       sx: {
         color: "text.secondary",
-        fontWeight: 500
+        fontWeight: 600
       },
       variant: "body2",
       children: label
@@ -3899,11 +3912,11 @@ var PermissionIcon = ({ status }) => {
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx132(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { color: "text.secondary", variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ jsx132(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx132(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { color: "text.secondary", variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ jsx132(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
   return /* @__PURE__ */ jsxs124(Box10, { sx: { p: 2 }, children: [
     /* @__PURE__ */ jsx132(Box10, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx132(
@@ -3928,9 +3941,7 @@ var IAMEventDetail = ({ event }) => {
           Typography5,
           {
             sx: {
-              color: "text.primary",
-              fontFamily: "monospace",
-              fontSize: "0.85rem"
+              color: "text.primary"
             },
             variant: "body2",
             children: action
@@ -3948,8 +3959,6 @@ var IAMEventDetail = ({ event }) => {
           {
             sx: {
               color: "text.primary",
-              fontFamily: "monospace",
-              fontSize: "0.85rem",
               wordBreak: "break-all"
             },
             variant: "body2",
@@ -3961,19 +3970,19 @@ var IAMEventDetail = ({ event }) => {
       }
     ),
     /* @__PURE__ */ jsxs124(Box10, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ jsx132(Typography5, { color: "text.secondary", sx: { mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
       /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 2, children: [
         parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsx132(Typography5, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx132(Typography5, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+          /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
         ] }) }),
         parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsx132(Typography5, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx132(Typography5, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+          /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
         ] }) }),
         parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsx132(Typography5, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx132(Typography5, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+          /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
         ] }) })
       ] })
     ] })
@@ -4030,8 +4039,8 @@ var IAMPermissionItem = ({ event }) => {
       )
     ] }),
     isOpen && /* @__PURE__ */ jsx133(Box11, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box11, { children: [
-      /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ jsx133(Typography6, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: parsedIAM.principal })
+      /* @__PURE__ */ jsx133(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ jsx133(Typography6, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
@@ -4045,7 +4054,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
     {
       sx: {
         color: "text.primary",
-        fontWeight: 500
+        fontWeight: 600
       },
       variant: "body1",
       children: label
@@ -4112,7 +4121,7 @@ var EventMessage = ({ event }) => {
           ref: textReference,
           sx: {
             color: "text.primary",
-            fontWeight: 500,
+            fontWeight: 600,
             maxWidth: "100%",
             ml: shouldShowToggle ? 0 : 4,
             overflow: "hidden",
@@ -4169,10 +4178,9 @@ var EventDetail = ({
             {
               sx: {
                 alignItems: "left",
-                color: "text.secondary",
                 display: "flex",
                 flexGrow: 1,
-                fontWeight: 500
+                fontWeight: 600
               },
               variant: "subtitle1",
               children: displayText
@@ -4204,7 +4212,7 @@ var EventDetail = ({
                 color: "text.secondary",
                 display: "flex",
                 flexGrow: 1,
-                fontWeight: 500,
+                fontWeight: 600,
                 ml: 1,
                 mr: 2
               },
@@ -4311,6 +4319,10 @@ var EventSection = ({
 // src/components/event-details/event-details.tsx
 import { Fragment as Fragment6, jsx as jsx137, jsxs as jsxs129 } from "react/jsx-runtime";
 var EventDetails = ({ onClose, selectedEvent }) => {
+  const attributes = useMemo7(() => {
+    const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
+    return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
+  }, [selectedEvent?.attributes]);
   if (!selectedEvent) {
     return /* @__PURE__ */ jsx137(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
@@ -4319,41 +4331,41 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     /* @__PURE__ */ jsx137(Box15, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
       /* @__PURE__ */ jsx137(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.span_id })
         ] }),
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.trace_id })
         ] }),
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
       /* @__PURE__ */ jsx137(Divider2, {}),
       /* @__PURE__ */ jsx137(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Service" }),
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.service_name })
         ] }),
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
         Boolean(selectedEvent.region) && /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Region" }),
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
       /* @__PURE__ */ jsx137(Divider2, {}),
       /* @__PURE__ */ jsx137(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
         Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "caption", children: "Duration" }),
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
           /* @__PURE__ */ jsxs129(Typography9, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
@@ -4383,13 +4395,25 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         )
       ] }),
-      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
+      attributes.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
         /* @__PURE__ */ jsx137(Divider2, {}),
-        /* @__PURE__ */ jsx137(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx137(Box15, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx137("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
+        /* @__PURE__ */ jsx137(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx137(Stack2, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs129(Box15, { children: [
+          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
+          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: renderKeyValue(key, value) })
+        ] }, key)) }) })
       ] })
     ] }) })
   ] });
 };
+function renderKeyValue(key, value) {
+  if (typeof value === "string" && (key === "localstack.aws.service.request" || key === "localstack.aws.service.response" || key === "localstack.aws.service.exception")) {
+    return /* @__PURE__ */ jsx137(Box15, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx137("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: value ? "yes" : "no" });
+  }
+  return /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: value });
+}
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
@@ -4405,11 +4429,11 @@ import { memo, useCallback as useCallback6 } 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 Box16, Tooltip as Tooltip3 } from "@mui/material";
-import { useMemo as useMemo7 } from "react";
+import { Box as Box16, Tooltip as Tooltip4 } from "@mui/material";
+import { useMemo as useMemo8 } from "react";
 import { jsx as jsx138 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
-  const icon = useMemo7(() => {
+  const icon = useMemo8(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ jsx138(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -4422,7 +4446,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = useMemo7(() => {
+  const color = useMemo8(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4435,7 +4459,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ jsx138(Tooltip3, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx138(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx138(
     Box16,
     {
       sx: {