@localstack/appinspector-ui 1.0.0-dev-37c5a6b8 → 1.0.2

package/dist/index.js

@@ -3460,11 +3460,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";
@@ -4091,7 +4092,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 +4106,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(Fragment4, { 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 }) })
+            ] })
+          }
+        )
+      ]
     }
   );
 };