@localstack/appinspector-ui 1.0.17 → 1.0.19

package/dist/index.js

@@ -149,7 +149,7 @@ var ResponsiveTimestampCell = ({ locale, value }) => {
 };
 
 // src/components/cells/service-cell.tsx
-import { Box as Box3, Typography } from "@mui/material";
+import { Box as Box3, Divider, Typography } from "@mui/material";
 
 // src/components/aws-service-icon/aws-service-icon.tsx
 import { Tooltip as Tooltip2 } from "@mui/material";
@@ -2498,11 +2498,9 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
 // src/components/cells/pill-cell.tsx
 import { Box as Box2 } from "@mui/material";
 import { jsx as jsx123 } from "react/jsx-runtime";
-var defaultBackgroundColor = "background.paper";
-var defaultBorderColor = "palette.divider";
 var PillCell = ({
-  backgroundColor = defaultBackgroundColor,
-  borderColor = defaultBorderColor,
+  backgroundColor,
+  borderColor,
   borderWidth = "1px",
   children,
   height = "24px",
@@ -2514,8 +2512,8 @@ var PillCell = ({
     {
       sx: {
         alignItems: "center",
-        backgroundColor,
-        borderColor,
+        backgroundColor: backgroundColor ?? ((theme) => theme.palette.background.paper),
+        borderColor: borderColor ?? ((theme) => theme.palette.divider),
         borderRadius: "16px",
         borderStyle: "solid",
         borderWidth,
@@ -2532,10 +2530,10 @@ var PillCell = ({
 };
 
 // src/components/cells/service-cell.tsx
-import { jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
 var truncateName = (inputString, truncateLength = 15) => inputString.length > truncateLength ? `${inputString.slice(0, truncateLength - 3)}...` : inputString;
 var ServiceCell = ({
-  borderColor = defaultBorderColor,
+  borderColor,
   borderWidth,
   height = "24px",
   resource,
@@ -2545,31 +2543,28 @@ var ServiceCell = ({
   width = "32px"
 }) => {
   return /* @__PURE__ */ jsx124(Box3, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs119(PillCell, { borderColor, borderWidth, height, children: [
-    showIcon ? /* @__PURE__ */ jsx124(
-      Box3,
-      {
-        sx: {
-          alignItems: "center",
-          borderRightColor: borderColor,
-          borderRightStyle: "solid",
-          borderRightWidth: `1px`,
-          display: "flex",
-          height,
-          justifyContent: "center",
-          overflow: "hidden",
-          padding: 0,
-          width
-        },
-        children: /* @__PURE__ */ jsx124(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
-      }
-    ) : void 0,
+    showIcon ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
+      /* @__PURE__ */ jsx124(
+        Box3,
+        {
+          sx: {
+            alignItems: "center",
+            display: "flex",
+            height,
+            justifyContent: "center",
+            overflow: "hidden",
+            padding: 0,
+            width
+          },
+          children: /* @__PURE__ */ jsx124(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
+        }
+      ),
+      /* @__PURE__ */ jsx124(Divider, { orientation: "vertical" })
+    ] }) : void 0,
     /* @__PURE__ */ jsx124(
       Typography,
       {
         sx: {
-          borderRightColor: resource ? borderColor : "none",
-          borderRightStyle: resource ? "solid" : "none",
-          borderRightWidth: resource ? "1px" : "none",
           fontWeight: "bold",
           overflow: "hidden",
           padding: "1px 8px",
@@ -2588,21 +2583,24 @@ var ServiceCell = ({
         children: service
       }
     ),
-    resource ? /* @__PURE__ */ jsx124(
-      Typography,
-      {
-        sx: {
-          borderBottomRightRadius: "15px",
-          borderTopRightRadius: "15px",
-          overflow: "hidden",
-          padding: "1px 8px",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        variant: "body2",
-        children: truncateName(resource, truncateLength)
-      }
-    ) : void 0
+    resource ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
+      /* @__PURE__ */ jsx124(Box3, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ jsx124(Divider, { orientation: "vertical" }) }),
+      /* @__PURE__ */ jsx124(
+        Typography,
+        {
+          sx: {
+            borderBottomRightRadius: "15px",
+            borderTopRightRadius: "15px",
+            overflow: "hidden",
+            padding: "1px 8px",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          variant: "body2",
+          children: truncateName(resource, truncateLength)
+        }
+      )
+    ] }) : void 0
   ] }) });
 };
 ServiceCell.displayName = "ServiceCell";
@@ -2677,7 +2675,7 @@ var searchInObject = (object, searchTerm, skipKeys = []) => {
 };
 
 // src/components/spans-list/spans-data-grid.tsx
-import { Fragment as Fragment2, jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
 var resourceNameComparator = (v1 = "", v2 = "") => {
   return v1.localeCompare(v2);
 };
@@ -2800,7 +2798,7 @@ var SpansDataGrid = ({
     () => rows.filter((row) => filtersToApply.every((filter) => filter(row))),
     [filtersToApply, rows]
   );
-  return /* @__PURE__ */ jsxs120(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs120(Fragment3, { children: [
     /* @__PURE__ */ jsx125(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ jsx125(
         TextField,
@@ -2965,7 +2963,7 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
 };
 
 // src/components/status-message/status-message.tsx
-import { Fragment as Fragment3, jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
 var StatusMessage = ({
   error,
   onRetry,
@@ -3214,7 +3212,7 @@ var StatusMessage = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx127(Fragment3, {});
+  return /* @__PURE__ */ jsx127(Fragment4, {});
 };
 
 // src/context.tsx
@@ -3596,7 +3594,7 @@ import { useCallback as useCallback8, useEffect as useEffect7, useState as useSt
 import { useNavigate as useNavigate2, useParams, useSearchParams } from "react-router-dom";
 
 // src/components/event-details/event-details.tsx
-import { Box as Box15, Chip as Chip3, Divider, Stack as Stack2, Typography as Typography9 } from "@mui/material";
+import { Box as Box15, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -4040,7 +4038,7 @@ var IAMPermissionItem = ({ event }) => {
 var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx133(Box11, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx133(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment4, jsx as jsx134, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx134, jsxs as jsxs126 } from "react/jsx-runtime";
 var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { container: true, spacing: 0, sx: { mb: 1 }, children: [
   /* @__PURE__ */ jsx134(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx134(
     Typography7,
@@ -4126,7 +4124,7 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx134(Box12, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx134(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment4, { children: [
+    isOpen && /* @__PURE__ */ jsx134(Box12, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx134(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment5, { children: [
       Boolean(parsedMessage.message) && /* @__PURE__ */ jsx134(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
       Boolean(parsedMessage.details) && /* @__PURE__ */ jsx134(DetailRow2, { content: parsedMessage.details, label: "Details:" })
     ] }) })
@@ -4311,7 +4309,7 @@ var EventSection = ({
 ] }) });
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment5, jsx as jsx137, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx137, jsxs as jsxs129 } from "react/jsx-runtime";
 var EventDetails = ({ onClose, selectedEvent }) => {
   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" }) });
@@ -4333,7 +4331,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx137(Divider, {}),
+      /* @__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" }),
@@ -4348,7 +4346,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx137(Divider, {}),
+      /* @__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" }),
@@ -4363,7 +4361,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx137(Divider, {}),
+      /* @__PURE__ */ jsx137(Divider2, {}),
       /* @__PURE__ */ jsx137(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs129(Stack2, { direction: "row", spacing: 1, children: [
         /* @__PURE__ */ jsx137(
           Chip3,
@@ -4375,8 +4373,8 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         ),
         Boolean(selectedEvent.status_message) && /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
-      selectedEvent.events.length > 0 && /* @__PURE__ */ jsxs129(Fragment5, { children: [
-        /* @__PURE__ */ jsx137(Divider, {}),
+      selectedEvent.events.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
+        /* @__PURE__ */ jsx137(Divider2, {}),
         /* @__PURE__ */ jsx137(
           EventSection,
           {
@@ -4385,8 +4383,8 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         )
       ] }),
-      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ jsxs129(Fragment5, { children: [
-        /* @__PURE__ */ jsx137(Divider, {}),
+      selectedEvent.attributes && Object.keys(selectedEvent.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) }) }) })
       ] })
     ] }) })
@@ -4699,13 +4697,12 @@ function shallow$1(objA, objB) {
 // src/components/trace-graph/xyflow/controls.tsx
 import { jsx as jsx140, jsxs as jsxs131 } from "react/jsx-runtime";
 var selector = (s) => ({
-  ariaLabelConfig: s.ariaLabelConfig,
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
 var Controls = memo2(() => {
-  const { ariaLabelConfig, maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
+  const { maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
   const { fitView, zoomIn, zoomOut } = useReactFlow();
   const onZoomInHandler = () => {
     void zoomIn();
@@ -4719,7 +4716,6 @@ var Controls = memo2(() => {
   return /* @__PURE__ */ jsxs131(
     Box18,
     {
-      "aria-label": ariaLabelConfig["controls.ariaLabel"],
       sx: {
         bottom: 0,
         display: "flex",
@@ -4734,35 +4730,29 @@ var Controls = memo2(() => {
         /* @__PURE__ */ jsx140(
           IconButton4,
           {
-            "aria-label": ariaLabelConfig["controls.zoomIn.ariaLabel"],
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            title: ariaLabelConfig["controls.zoomIn.ariaLabel"],
             children: /* @__PURE__ */ jsx140(Add, {})
           }
         ),
         /* @__PURE__ */ jsx140(
           IconButton4,
           {
-            "aria-label": ariaLabelConfig["controls.zoomOut.ariaLabel"],
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            title: ariaLabelConfig["controls.zoomOut.ariaLabel"],
             children: /* @__PURE__ */ jsx140(Remove, {})
           }
         ),
         /* @__PURE__ */ jsx140(
           IconButton4,
           {
-            "aria-label": ariaLabelConfig["controls.fitView.ariaLabel"],
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            title: ariaLabelConfig["controls.fitView.ariaLabel"],
             children: /* @__PURE__ */ jsx140(FitScreen, {})
           }
         )
@@ -4772,7 +4762,7 @@ var Controls = memo2(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment6, jsx as jsx141, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx141, jsxs as jsxs132 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -4861,7 +4851,7 @@ var TraceGraph = ({
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
-  return /* @__PURE__ */ jsxs132(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs132(Fragment7, { children: [
     spans.error && /* @__PURE__ */ jsxs132(
       Alert3,
       {
@@ -4899,7 +4889,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment7, jsx as jsx142, jsxs as jsxs133 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx142, jsxs as jsxs133 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -4933,6 +4923,7 @@ var StyledDrawer = styled(Drawer)(() => ({
 var TraceGraphView = ({
   fetchError,
   fetchSpans,
+  handleClose,
   handleEventSelect,
   handleRetry,
   loading,
@@ -4983,7 +4974,7 @@ var TraceGraphView = ({
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ jsxs133(Fragment7, { children: [
+            ) : /* @__PURE__ */ jsxs133(Fragment8, { children: [
               /* @__PURE__ */ jsx142(Main, { open, children: /* @__PURE__ */ jsx142(
                 Box19,
                 {
@@ -5009,7 +5000,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx142(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx142(EventDetails, { selectedEvent }) })
+              /* @__PURE__ */ jsx142(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx142(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -5087,6 +5078,9 @@ var TraceGraphPage = () => {
     {
       fetchError,
       fetchSpans: () => void fetchSpans(),
+      handleClose: () => {
+        setOpen(false);
+      },
       handleEventSelect,
       handleRetry,
       loading,