@localstack/appinspector-ui 1.0.11 → 1.0.13

package/dist/index.cjs

@@ -2552,7 +2552,7 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
     {
       wrap: !hideTooltip,
       wrapperFn: (child) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material.Tooltip, { placement: "top", title: title ?? service, children: child }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { height, style: { borderRadius: 6, display: "block" }, width })
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { height, style: { display: "block" }, width })
     }
   );
 };
@@ -2560,37 +2560,44 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
 // src/components/cells/pill-cell.tsx
 var import_material2 = require("@mui/material");
 var import_jsx_runtime122 = require("react/jsx-runtime");
+var defaultBackgroundColor = "background.paper";
+var defaultBorderColor = "text.secondary";
 var PillCell = ({
-  backgroundColor = "transparent",
-  borderColor = "lightgray",
+  backgroundColor = defaultBackgroundColor,
+  borderColor = defaultBorderColor,
   borderWidth = "1px",
   children,
   height = "24px",
   paddingBottom,
   paddingTop
-}) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-  import_material2.Box,
-  {
-    sx: {
-      alignItems: "center",
-      backgroundColor,
-      border: `${borderWidth} solid ${borderColor}`,
-      borderRadius: "16px",
-      display: "inline-flex",
-      height: paddingTop || paddingBottom ? "auto" : height,
-      maxWidth: "100%",
-      ...paddingTop && { paddingTop },
-      ...paddingBottom && { paddingBottom }
-    },
-    children
-  }
-);
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_material2.Box,
+    {
+      sx: {
+        alignItems: "center",
+        backgroundColor,
+        borderColor,
+        borderRadius: "16px",
+        borderStyle: "solid",
+        borderWidth,
+        display: "inline-flex",
+        height: paddingTop || paddingBottom ? "auto" : height,
+        maxWidth: "100%",
+        ...paddingTop && { paddingTop },
+        ...paddingBottom && { paddingBottom },
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
 
 // src/components/cells/service-cell.tsx
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var truncateName = (inputString, truncateLength = 15) => inputString.length > truncateLength ? `${inputString.slice(0, truncateLength - 3)}...` : inputString;
 var ServiceCell = ({
-  borderColor,
+  borderColor = defaultBorderColor,
   borderWidth,
   height = "24px",
   resource,
@@ -2605,9 +2612,9 @@ var ServiceCell = ({
       {
         sx: {
           alignItems: "center",
-          borderBottomLeftRadius: "15px",
-          borderRight: "1px solid #e0e0e0",
-          borderTopLeftRadius: "15px",
+          borderRightColor: borderColor,
+          borderRightStyle: "solid",
+          borderRightWidth: `1px`,
           display: "flex",
           height,
           justifyContent: "center",
@@ -2622,7 +2629,7 @@ var ServiceCell = ({
       import_material3.Typography,
       {
         sx: {
-          borderRight: resource ? "1px solid #e0e0e0" : "none",
+          borderRight: resource ? `1px solid ${borderColor}` : "none",
           fontWeight: "bold",
           overflow: "hidden",
           padding: "1px 8px",
@@ -2641,7 +2648,7 @@ var ServiceCell = ({
         children: service
       }
     ),
-    resource && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+    resource !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       import_material3.Typography,
       {
         sx: {
@@ -2853,7 +2860,7 @@ var SpansDataGrid = ({
 // src/components/spans-list/spans-list.tsx
 var import_jsx_runtime125 = require("react/jsx-runtime");
 var SpansList = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
     props.spans.error && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
       import_material5.Alert,
       {
@@ -3391,7 +3398,6 @@ var useStatus = () => {
 
 // src/pages/spans-list-page.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var MAX_WIDTH = 1400;
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = (0, import_react8.useState)();
@@ -3464,46 +3470,34 @@ var SpansListPage = () => {
         flexGrow: 1,
         width: "100%"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-        import_material7.Box,
+      children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        StatusMessage,
+        {
+          error: statusError,
+          onRetry: handleRetry,
+          status
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        SpansList,
         {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            flexGrow: 1,
-            maxWidth: MAX_WIDTH,
-            width: "100%"
+          filterWriteOperations,
+          onClearSpans: () => {
+            void clearSpans();
           },
-          children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-            StatusMessage,
-            {
-              error: statusError,
-              onRetry: handleRetry,
-              status
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-            SpansList,
-            {
-              filterWriteOperations,
-              onClearSpans: () => {
-                void clearSpans();
-              },
-              onFilterWriteOperationsChange: (value) => {
-                setFilterWriteOperations(value);
-              },
-              onRefresh: () => {
-                fetchSpansSync();
-              },
-              onSpanClick: (span) => {
-                navigateToSpan(span);
-              },
-              spans: {
-                data: spans,
-                error: fetchError,
-                loading
-              }
-            }
-          )
+          onFilterWriteOperationsChange: (value) => {
+            setFilterWriteOperations(value);
+          },
+          onRefresh: () => {
+            fetchSpansSync();
+          },
+          onSpanClick: (span) => {
+            navigateToSpan(span);
+          },
+          spans: {
+            data: spans,
+            error: fetchError,
+            loading
+          }
         }
       )
     }
@@ -3594,12 +3588,12 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
 
 // src/components/event-details/event-details.tsx
 var import_jsx_runtime131 = require("react/jsx-runtime");
-var EventDetails = ({ selectedEvent }) => {
+var EventDetails = ({ onClose, selectedEvent }) => {
   if (!selectedEvent) {
     return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(EventDetailsHeader, { event: selectedEvent }),
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(EventDetailsHeader, { event: selectedEvent, onClose }),
     /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
@@ -3777,7 +3771,7 @@ var ServiceNode = (0, import_react12.memo)(function ServiceNode2({ data, selecte
           /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             ServiceCell,
             {
-              borderColor: selected ? "black" : "lightgray",
+              borderColor: selected ? "text.primary" : "text.secondary",
               borderWidth: selected ? "1.5px" : "1px",
               height: "32px",
               resource: data.event.resource_name,
@@ -4330,7 +4324,9 @@ var TraceGraphPage = () => {
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EventDetails, { selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EventDetails, { onClose: () => {
+                setOpen(false);
+              }, selectedEvent }) })
             ] })
           }
         )