@localstack/appinspector-ui 1.0.12 → 1.0.14

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: {
@@ -3764,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,
@@ -4189,72 +4196,23 @@ var StyledDrawer = (0, import_styles.styled)(import_material15.Drawer)(() => ({
   "position": "relative",
   "width": DRAWER_WIDTH
 }));
-var TraceGraphPage = () => {
-  const { traceId } = (0, import_react_router_dom2.useParams)();
-  const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
-  const spanId = searchParameters.get("spanId");
-  const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react19.useState)();
-  const [loading, setLoading] = (0, import_react19.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react19.useState)();
-  const fetchSpans = (0, import_react19.useCallback)(async () => {
-    setLoading(true);
-    try {
-      const response = await api.getSpans({
-        trace_id: traceId
-      });
-      setSpans(response.spans);
-      setFetchError(void 0);
-    } catch (error) {
-      console.error(error);
-      setFetchError(error instanceof Error ? error : new Error("Unknown error", { cause: error }));
-    } finally {
-      setLoading(false);
-    }
-  }, [api, traceId]);
-  (0, import_react19.useEffect)(() => {
-    void fetchSpans();
-  }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react19.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react19.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react19.useState)(0);
-  const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react19.useCallback)(() => {
-    const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
-    if (percentageMatch && open) {
-      const percentage = Number.parseInt(percentageMatch[1], 10);
-      return window.innerWidth * percentage / 100;
-    }
-    return 0;
-  }, [open]);
-  (0, import_react19.useEffect)(() => {
-    const updateViewportWidth = () => {
-      const totalWidth = window.innerWidth;
-      const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
-      setViewPortPixelWidth(totalWidth - drawerPixelWidth);
-    };
-    updateViewportWidth();
-    const timeoutId = setTimeout(updateViewportWidth, 50);
-    window.addEventListener("resize", updateViewportWidth);
-    return () => {
-      window.removeEventListener("resize", updateViewportWidth);
-      clearTimeout(timeoutId);
-    };
-  }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react19.useCallback)((event) => {
-    setSelectedEvent(event);
-    setOpen(true);
-  }, []);
-  const handleRetry = (0, import_react19.useCallback)(() => {
-    void checkStatus();
-  }, [checkStatus]);
+var TraceGraphView = ({
+  fetchError,
+  fetchSpans,
+  handleEventSelect,
+  handleRetry,
+  loading,
+  navigateToSpansList,
+  open,
+  selectedEvent,
+  spanId,
+  spans,
+  status,
+  statusError,
+  traceId,
+  viewPortPixelWidth
+}) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  const navigate = (0, import_react_router_dom2.useNavigate)();
-  const { resolveLink } = useAppInspector();
-  const navigateToSpansList = (0, import_react19.useCallback)(() => {
-    const url = resolveLink({ to: "spans-list" });
-    navigate(url);
-  }, [navigate, resolveLink]);
   return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
     import_material15.Box,
     {
@@ -4305,7 +4263,7 @@ var TraceGraphPage = () => {
                       initialFocusEventId: spanId,
                       onEventSelect: handleEventSelect,
                       onRefresh: () => {
-                        void fetchSpans();
+                        fetchSpans();
                       },
                       spans: {
                         data: spans,
@@ -4317,9 +4275,7 @@ var TraceGraphPage = () => {
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EventDetails, { onClose: () => {
-                setOpen(false);
-              }, selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EventDetails, { selectedEvent }) })
             ] })
           }
         )
@@ -4327,6 +4283,91 @@ var TraceGraphPage = () => {
     }
   );
 };
+var TraceGraphPage = () => {
+  const { traceId } = (0, import_react_router_dom2.useParams)();
+  const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
+  const spanId = searchParameters.get("spanId");
+  const api = useAppInspectorApi();
+  const [spans, setSpans] = (0, import_react19.useState)();
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react19.useState)();
+  const fetchSpans = (0, import_react19.useCallback)(async () => {
+    setLoading(true);
+    try {
+      const response = await api.getSpans({
+        trace_id: traceId
+      });
+      setSpans(response.spans);
+      setFetchError(void 0);
+    } catch (error) {
+      console.error(error);
+      setFetchError(error instanceof Error ? error : new Error("Unknown error", { cause: error }));
+    } finally {
+      setLoading(false);
+    }
+  }, [api, traceId]);
+  (0, import_react19.useEffect)(() => {
+    void fetchSpans();
+  }, [fetchSpans]);
+  const [open, setOpen] = (0, import_react19.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react19.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react19.useState)(0);
+  const { checkStatus, error: statusError, status } = useStatus();
+  const calculateDrawerWidth = (0, import_react19.useCallback)(() => {
+    const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
+    if (percentageMatch && open) {
+      const percentage = Number.parseInt(percentageMatch[1], 10);
+      return window.innerWidth * percentage / 100;
+    }
+    return 0;
+  }, [open]);
+  (0, import_react19.useEffect)(() => {
+    const updateViewportWidth = () => {
+      const totalWidth = window.innerWidth;
+      const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
+      setViewPortPixelWidth(totalWidth - drawerPixelWidth);
+    };
+    updateViewportWidth();
+    const timeoutId = setTimeout(updateViewportWidth, 50);
+    window.addEventListener("resize", updateViewportWidth);
+    return () => {
+      window.removeEventListener("resize", updateViewportWidth);
+      clearTimeout(timeoutId);
+    };
+  }, [open, calculateDrawerWidth]);
+  const handleEventSelect = (0, import_react19.useCallback)((event) => {
+    setSelectedEvent(event);
+    setOpen(true);
+  }, []);
+  const handleRetry = (0, import_react19.useCallback)(() => {
+    void checkStatus();
+  }, [checkStatus]);
+  const navigate = (0, import_react_router_dom2.useNavigate)();
+  const { resolveLink } = useAppInspector();
+  const navigateToSpansList = (0, import_react19.useCallback)(() => {
+    const url = resolveLink({ to: "spans-list" });
+    navigate(url);
+  }, [navigate, resolveLink]);
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    TraceGraphView,
+    {
+      fetchError,
+      fetchSpans: () => void fetchSpans(),
+      handleEventSelect,
+      handleRetry,
+      loading,
+      navigateToSpansList,
+      open,
+      selectedEvent,
+      spanId: spanId ?? void 0,
+      spans,
+      status,
+      statusError,
+      traceId,
+      viewPortPixelWidth
+    }
+  );
+};
 
 // src/routes.ts
 var routes = {