@localstack/appinspector-ui 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -2883,8 +2883,7 @@ var SpansList = (props) => {
 };
 
 // src/components/status-message/status-message.tsx
-var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"), 1);
-var import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"), 1);
+var import_icons_material2 = require("@mui/icons-material");
 var import_material6 = require("@mui/material");
 
 // src/api/errors.ts
@@ -2947,7 +2946,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
           import_material6.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -3020,7 +3019,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
           import_material6.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -3070,7 +3069,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
           import_material6.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_InfoOutlined.default, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material2.InfoOutlined, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -3139,7 +3138,7 @@ var StatusMessage = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
           import_material6.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
@@ -3160,7 +3159,7 @@ var StatusMessage = ({
       }
     );
   }
-  return;
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, {});
 };
 
 // src/context.tsx
@@ -3497,6 +3496,7 @@ var SpansListPage = () => {
 };
 
 // src/pages/trace-graph-page.tsx
+var import_icons_material6 = require("@mui/icons-material");
 var import_material14 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
 var import_react16 = require("@xyflow/react");
@@ -3507,7 +3507,7 @@ var import_react_router_dom2 = require("react-router-dom");
 var import_material10 = require("@mui/material");
 
 // src/components/event-details/event-details-header.tsx
-var import_icons_material2 = require("@mui/icons-material");
+var import_icons_material3 = require("@mui/icons-material");
 var import_material8 = require("@mui/material");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 var EventDetailsHeader = ({ event, onClose }) => {
@@ -3532,14 +3532,14 @@ var EventDetailsHeader = ({ event, onClose }) => {
             event.operation_name
           ] })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material2.Close, {}) })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.Close, {}) })
       ]
     }
   );
 };
 
 // src/components/event-details/toggle-section.tsx
-var import_icons_material3 = require("@mui/icons-material");
+var import_icons_material4 = require("@mui/icons-material");
 var import_material9 = require("@mui/material");
 var import_react9 = require("react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
@@ -3567,7 +3567,7 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material3.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material3.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
             ]
           }
         )
@@ -3663,7 +3663,7 @@ var import_react11 = require("@xyflow/react");
 var import_react12 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
-var import_icons_material4 = require("@mui/icons-material");
+var import_icons_material5 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
 var import_react10 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
@@ -3671,13 +3671,13 @@ var ProblemIndicator = ({ error }) => {
   const icon = (0, import_react10.useMemo)(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
@@ -4128,7 +4128,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 +4142,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_material6.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 }) })
+            ] })
+          }
+        )
+      ]
     }
   );
 };