@localstack/appinspector-ui 1.0.10 → 1.0.12

package/dist/index.js

@@ -2816,7 +2816,7 @@ var SpansDataGrid = ({
 // src/components/spans-list/spans-list.tsx
 import { jsx as jsx125, jsxs as jsxs121 } from "react/jsx-runtime";
 var SpansList = (props) => {
-  return /* @__PURE__ */ jsxs121(Box4, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2 }, children: [
+  return /* @__PURE__ */ jsxs121(Box4, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
     props.spans.error && /* @__PURE__ */ jsxs121(
       Alert,
       {
@@ -2927,7 +2927,7 @@ var StatusMessage = ({
                     fontSize: "0.875rem",
                     p: 1
                   },
-                  children: "APPINSPECTOR=1"
+                  children: "LOCALSTACK_APPINSPECTOR_ENABLE=1"
                 }
               ),
               /* @__PURE__ */ jsxs122(Typography3, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
@@ -2938,9 +2938,24 @@ var StatusMessage = ({
                   "/status"
                 ] }),
                 ". For persistent default state across restarts, adjust the",
-                /* @__PURE__ */ jsx126("code", { children: "APPINSPECTOR" }),
                 " ",
-                "environment variable."
+                /* @__PURE__ */ jsx126("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
+                " ",
+                "environment variable in your",
+                " ",
+                /* @__PURE__ */ jsx126("code", { children: "~/.localstack" }),
+                " ",
+                "profile files.",
+                " ",
+                /* @__PURE__ */ jsx126(
+                  Link,
+                  {
+                    href: "https://docs.localstack.cloud/aws/capabilities/config/configuration/#profiles",
+                    rel: "noopener noreferrer",
+                    target: "_blank",
+                    children: "Learn more about LocalStack profiles"
+                  }
+                )
               ] }),
               /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "For more information:" }) }),
               /* @__PURE__ */ jsx126(
@@ -3339,7 +3354,6 @@ var useStatus = () => {
 
 // src/pages/spans-list-page.tsx
 import { jsx as jsx128 } from "react/jsx-runtime";
-var MAX_WIDTH = 1400;
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = useState5();
@@ -3412,46 +3426,34 @@ var SpansListPage = () => {
         flexGrow: 1,
         width: "100%"
       },
-      children: /* @__PURE__ */ jsx128(
-        Box6,
+      children: shouldShowStatusMessage ? /* @__PURE__ */ jsx128(
+        StatusMessage,
         {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            flexGrow: 1,
-            maxWidth: MAX_WIDTH,
-            width: "100%"
+          error: statusError,
+          onRetry: handleRetry,
+          status
+        }
+      ) : /* @__PURE__ */ jsx128(
+        SpansList,
+        {
+          filterWriteOperations,
+          onClearSpans: () => {
+            void clearSpans();
           },
-          children: shouldShowStatusMessage ? /* @__PURE__ */ jsx128(
-            StatusMessage,
-            {
-              error: statusError,
-              onRetry: handleRetry,
-              status
-            }
-          ) : /* @__PURE__ */ jsx128(
-            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
+          }
         }
       )
     }
@@ -3542,12 +3544,12 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
 
 // src/components/event-details/event-details.tsx
 import { Fragment as Fragment3, jsx as jsx131, jsxs as jsxs125 } from "react/jsx-runtime";
-var EventDetails = ({ selectedEvent }) => {
+var EventDetails = ({ onClose, selectedEvent }) => {
   if (!selectedEvent) {
     return /* @__PURE__ */ jsx131(Box9, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
   return /* @__PURE__ */ jsxs125(Box9, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx131(EventDetailsHeader, { event: selectedEvent }),
+    /* @__PURE__ */ jsx131(EventDetailsHeader, { event: selectedEvent, onClose }),
     /* @__PURE__ */ jsx131(Box9, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs125(Stack, { spacing: 2, children: [
       /* @__PURE__ */ jsx131(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs125(Stack, { spacing: 1, children: [
         /* @__PURE__ */ jsxs125(Box9, { children: [
@@ -4278,7 +4280,9 @@ var TraceGraphPage = () => {
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx136(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx136(EventDetails, { selectedEvent }) })
+              /* @__PURE__ */ jsx136(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx136(EventDetails, { onClose: () => {
+                setOpen(false);
+              }, selectedEvent }) })
             ] })
           }
         )