@localstack/appinspector-ui 1.0.1 → 1.0.3

package/dist/index.js

@@ -2846,8 +2846,7 @@ var SpansList = (props) => {
 };
 
 // src/components/status-message/status-message.tsx
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { ErrorOutline, InfoOutlined } from "@mui/icons-material";
 import { Alert as Alert2, AlertTitle, Box as Box5, Button as Button3, Link, Typography as Typography3 } from "@mui/material";
 
 // src/api/errors.ts
@@ -2889,7 +2888,7 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
 };
 
 // src/components/status-message/status-message.tsx
-import { jsx as jsx126, jsxs as jsxs122 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx126, jsxs as jsxs122 } from "react/jsx-runtime";
 var StatusMessage = ({
   error,
   onRetry,
@@ -2910,7 +2909,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(ErrorOutlineIcon, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx126(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -2983,7 +2982,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(ErrorOutlineIcon, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx126(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -3033,7 +3032,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(InfoOutlinedIcon, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx126(InfoOutlined, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -3102,7 +3101,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(ErrorOutlineIcon, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx126(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -3123,7 +3122,7 @@ var StatusMessage = ({
       }
     );
   }
-  return;
+  return /* @__PURE__ */ jsx126(Fragment2, {});
 };
 
 // src/context.tsx
@@ -3460,11 +3459,12 @@ var SpansListPage = () => {
 };
 
 // src/pages/trace-graph-page.tsx
-import { Box as Box12, Drawer, Paper as Paper2 } from "@mui/material";
+import { ArrowBack } from "@mui/icons-material";
+import { Box as Box12, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback as useCallback8, useEffect as useEffect6, useState as useState8 } from "react";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useNavigate as useNavigate2, useParams, useSearchParams } from "react-router-dom";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box9, Chip, Divider, Stack, Typography as Typography6 } from "@mui/material";
@@ -3541,7 +3541,7 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment2, jsx as jsx131, jsxs as jsxs125 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx131, jsxs as jsxs125 } from "react/jsx-runtime";
 var EventDetails = ({ 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" }) });
@@ -3605,7 +3605,7 @@ var EventDetails = ({ selectedEvent }) => {
         ),
         selectedEvent.status_message && /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
-      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ jsxs125(Fragment2, { children: [
+      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ jsxs125(Fragment3, { children: [
         /* @__PURE__ */ jsx131(Divider, {}),
         /* @__PURE__ */ jsx131(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx131(Box9, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx131("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
       ] })
@@ -3873,7 +3873,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 };
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment3, jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -3962,7 +3962,7 @@ var TraceGraph = ({
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
-  return /* @__PURE__ */ jsxs127(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs127(Fragment4, { children: [
     spans.error && /* @__PURE__ */ jsxs127(
       Alert3,
       {
@@ -4000,7 +4000,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment4, jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -4091,7 +4091,13 @@ var TraceGraphPage = () => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsx135(
+  const navigate = useNavigate2();
+  const { resolveLink } = useAppInspector();
+  const navigateToSpansList = useCallback8(() => {
+    const url = resolveLink({ to: "spans-list" });
+    navigate(url);
+  }, [navigate, resolveLink]);
+  return /* @__PURE__ */ jsxs128(
     Box12,
     {
       "data-testid": "trace-graph-page",
@@ -4099,56 +4105,65 @@ var TraceGraphPage = () => {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
+        gap: 2,
         height: "100vh",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx135(
-        Paper2,
-        {
-          sx: {
-            display: "flex",
-            flexGrow: 1,
-            overflow: "hidden",
-            position: "relative",
-            width: "100%"
-          },
-          children: shouldShowStatusMessage ? /* @__PURE__ */ jsx135(
-            StatusMessage,
-            {
-              error: statusError,
-              onRetry: handleRetry,
-              status
-            }
-          ) : /* @__PURE__ */ jsxs128(Fragment4, { children: [
-            /* @__PURE__ */ jsx135(Main, { open, children: /* @__PURE__ */ jsx135(
-              Box12,
+      children: [
+        /* @__PURE__ */ jsxs128(Box12, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx135(Button5, { onClick: () => {
+            navigateToSpansList();
+          }, startIcon: /* @__PURE__ */ jsx135(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx135(Box12, { sx: { flexGrow: 1 } })
+        ] }),
+        /* @__PURE__ */ jsx135(
+          Paper2,
+          {
+            sx: {
+              display: "flex",
+              flexGrow: 1,
+              overflow: "hidden",
+              position: "relative",
+              width: "100%"
+            },
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx135(
+              StatusMessage,
               {
-                sx: {
-                  height: "100%",
-                  overflow: "auto"
-                },
-                children: traceId !== void 0 && /* @__PURE__ */ jsx135(ReactFlowProvider, { children: /* @__PURE__ */ jsx135(
-                  TraceGraph,
-                  {
-                    initialFocusEventId: spanId,
-                    onEventSelect: handleEventSelect,
-                    onRefresh: () => {
-                      void fetchSpans();
-                    },
-                    spans: {
-                      data: spans,
-                      error: fetchError,
-                      loading
-                    },
-                    viewPortPixelWidth
-                  }
-                ) })
+                error: statusError,
+                onRetry: handleRetry,
+                status
               }
-            ) }),
-            /* @__PURE__ */ jsx135(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx135(EventDetails, { selectedEvent }) })
-          ] })
-        }
-      )
+            ) : /* @__PURE__ */ jsxs128(Fragment5, { children: [
+              /* @__PURE__ */ jsx135(Main, { open, children: /* @__PURE__ */ jsx135(
+                Box12,
+                {
+                  sx: {
+                    height: "100%",
+                    overflow: "auto"
+                  },
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx135(ReactFlowProvider, { children: /* @__PURE__ */ jsx135(
+                    TraceGraph,
+                    {
+                      initialFocusEventId: spanId,
+                      onEventSelect: handleEventSelect,
+                      onRefresh: () => {
+                        void fetchSpans();
+                      },
+                      spans: {
+                        data: spans,
+                        error: fetchError,
+                        loading
+                      },
+                      viewPortPixelWidth
+                    }
+                  ) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx135(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx135(EventDetails, { selectedEvent }) })
+            ] })
+          }
+        )
+      ]
     }
   );
 };