@localstack/appinspector-ui 1.0.1 → 1.0.2

package/dist/index.cjs

@@ -3497,6 +3497,7 @@ var SpansListPage = () => {
 };
 
 // src/pages/trace-graph-page.tsx
+var import_icons_material5 = require("@mui/icons-material");
 var import_material14 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
 var import_react16 = require("@xyflow/react");
@@ -4128,7 +4129,13 @@ var TraceGraphPage = () => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  const navigate = (0, import_react_router_dom2.useNavigate)();
+  const { resolveLink } = useAppInspector();
+  const navigateToSpansList = (0, import_react17.useCallback)(() => {
+    const url = resolveLink({ to: "spans-list" });
+    navigate(url);
+  }, [navigate, resolveLink]);
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
     import_material14.Box,
     {
       "data-testid": "trace-graph-page",
@@ -4136,56 +4143,65 @@ var TraceGraphPage = () => {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
+        gap: 2,
         height: "100vh",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-        import_material14.Paper,
-        {
-          sx: {
-            display: "flex",
-            flexGrow: 1,
-            overflow: "hidden",
-            position: "relative",
-            width: "100%"
-          },
-          children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-            StatusMessage,
-            {
-              error: statusError,
-              onRetry: handleRetry,
-              status
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-              import_material14.Box,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material14.Box, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material14.Button, { onClick: () => {
+            navigateToSpansList();
+          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material5.ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material14.Box, { sx: { flexGrow: 1 } })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+          import_material14.Paper,
+          {
+            sx: {
+              display: "flex",
+              flexGrow: 1,
+              overflow: "hidden",
+              position: "relative",
+              width: "100%"
+            },
+            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+              StatusMessage,
               {
-                sx: {
-                  height: "100%",
-                  overflow: "auto"
-                },
-                children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react16.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-                  TraceGraph,
-                  {
-                    initialFocusEventId: spanId,
-                    onEventSelect: handleEventSelect,
-                    onRefresh: () => {
-                      void fetchSpans();
-                    },
-                    spans: {
-                      data: spans,
-                      error: fetchError,
-                      loading
-                    },
-                    viewPortPixelWidth
-                  }
-                ) })
+                error: statusError,
+                onRetry: handleRetry,
+                status
               }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EventDetails, { selectedEvent }) })
-          ] })
-        }
-      )
+            ) : /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                import_material14.Box,
+                {
+                  sx: {
+                    height: "100%",
+                    overflow: "auto"
+                  },
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react16.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                    TraceGraph,
+                    {
+                      initialFocusEventId: spanId,
+                      onEventSelect: handleEventSelect,
+                      onRefresh: () => {
+                        void fetchSpans();
+                      },
+                      spans: {
+                        data: spans,
+                        error: fetchError,
+                        loading
+                      },
+                      viewPortPixelWidth
+                    }
+                  ) })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EventDetails, { selectedEvent }) })
+            ] })
+          }
+        )
+      ]
     }
   );
 };