@localstack/appinspector-ui 1.0.112 → 1.0.114

package/dist/index.js

@@ -2414,9 +2414,16 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box20 } from "@mui/material";
-import { useCallback as useCallback11, useState as useState18 } from "react";
+import { useCallback as useCallback12, useState as useState18 } from "react";
 
 // src/api/errors.ts
+var AppInspectorDisabledError = class extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.name = "AppInspectorDisabledError";
+    this.cause = cause;
+  }
+};
 var AppInspectorNotFoundError = class extends Error {
   localstackVersion;
   constructor(message, cause, localstackVersion) {
@@ -15025,7 +15032,7 @@ var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ js
   fetching && /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } })
 ] }) });
 var SpansDataGridRow = memo8(
-  ({ row }) => {
+  ({ onSpanClick, row }) => {
     const theme = useTheme2();
     return /* @__PURE__ */ jsx127(
       TableRow,
@@ -15038,7 +15045,11 @@ var SpansDataGridRow = memo8(
         initial: {
           backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.from : newSpanBackgroundColor.dark.from
         },
+        onClick: () => {
+          onSpanClick(row.original);
+        },
         sx: {
+          cursor: "pointer",
           transition: "background-color 1200ms ease-in"
         },
         children: row.getVisibleCells().map((cell) => {
@@ -15155,7 +15166,8 @@ var SpansDataGrid = ({
           Button2,
           {
             "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
-            onClick: () => {
+            onClick: (event) => {
+              event.stopPropagation();
               onSpanClick(props.row.original);
             },
             size: "small",
@@ -15316,7 +15328,7 @@ var SpansDataGrid = ({
                     for (let index = rows.length - 1; index >= 0; index--) {
                       const row = rows.at(index);
                       reversed.push(
-                        /* @__PURE__ */ jsx127(SpansDataGridRow, { row }, row.original.span_id)
+                        /* @__PURE__ */ jsx127(SpansDataGridRow, { onSpanClick, row }, row.original.span_id)
                       );
                     }
                     return reversed;
@@ -15327,7 +15339,7 @@ var SpansDataGrid = ({
                 !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment5, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
                   hasRows && hasMoreBackward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
-                  hasRows && /* @__PURE__ */ jsx127(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx127(SpansDataGridRow, { row }, row.original.span_id)) }),
+                  hasRows && /* @__PURE__ */ jsx127(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx127(SpansDataGridRow, { onSpanClick, row }, row.original.span_id)) }),
                   hasRows && hasMoreForward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
@@ -15523,7 +15535,7 @@ var StatusMessage = ({
       }
     );
   }
-  if (status?.status === "DISABLED") {
+  if (error instanceof AppInspectorDisabledError || status?.status === "DISABLED") {
     return /* @__PURE__ */ jsx129(
       Box6,
       {
@@ -15630,7 +15642,7 @@ var StatusMessage = ({
 };
 
 // src/hooks/status-provider.tsx
-import { createContext as createContext8, useContext as useContext15, useMemo as useMemo6 } from "react";
+import { createContext as createContext8, useCallback as useCallback5, useContext as useContext15, useMemo as useMemo6 } from "react";
 
 // src/hooks/use-status.tsx
 import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef9, useState as useState6 } from "react";
@@ -15679,9 +15691,12 @@ import { jsx as jsx130 } from "react/jsx-runtime";
 var AppInspectorStatusContext = createContext8(void 0);
 var StatusProvider = ({ children }) => {
   const { checking, checkStatus, error, status } = useStatus();
+  const reportDisabled = useCallback5(() => {
+    void checkStatus();
+  }, [checkStatus]);
   const value = useMemo6(
-    () => ({ checking, checkStatus, status, statusError: error }),
-    [checking, checkStatus, status, error]
+    () => ({ checking, checkStatus, reportDisabled, status, statusError: error }),
+    [checking, checkStatus, reportDisabled, status, error]
   );
   return /* @__PURE__ */ jsx130(AppInspectorStatusContext.Provider, { value, children });
 };
@@ -15694,7 +15709,7 @@ var useAppInspectorStatus = () => {
 };
 
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback5, useEffect as useEffect12, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect12, useState as useState7 } from "react";
 function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState7(() => {
     try {
@@ -15705,7 +15720,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = useCallback5((value) => {
+  const setValue = useCallback6((value) => {
     try {
       setStoredValue((previousState) => {
         const next = typeof value === "function" ? value(previousState) : value;
@@ -15739,7 +15754,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef13, useState as useState10 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef13, useState as useState10 } from "react";
 
 // src/utils/pagination-buffer.ts
 var insertSorted = (array, item, compareFunction, hint = "back") => {
@@ -15920,7 +15935,7 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback7, useEffect as useEffect14, useRef as useRef11, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef11, useState as useState8 } from "react";
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -15950,7 +15965,7 @@ var LOCALSTACK_INFO_PATH = "/_localstack/info";
 
 // src/context.tsx
 import { createContext as createContext9, useContext as useContext16 } from "react";
-import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo7 } from "react";
 
 // src/api/client.ts
 var import_semver2 = __toESM(require_semver2(), 1);
@@ -16039,17 +16054,19 @@ var makeRequest = async (options) => {
           new Error(`404 from ${url}: ${response.statusText}`)
         );
       }
+      if (response.status === 503) {
+        throw new AppInspectorDisabledError(
+          ERROR_MESSAGES.APP_INSPECTOR_DISABLED,
+          new Error(`503 from ${url}: ${response.statusText}`)
+        );
+      }
       throw new Error(`API request failed: ${response.status.toString()} ${response.statusText}`);
     }
     options.captureHeaders?.(response.headers);
     return await response.json();
   } catch (error) {
     if (error instanceof TypeError) {
-      const message = error.message.toLowerCase();
-      const isNetworkError = message.includes("fetch") || message.includes("network") || message.includes("failed to fetch");
-      if (isNetworkError) {
-        throw new ConnectionError(ERROR_MESSAGES.CONNECTION_FAILED, error);
-      }
+      throw new ConnectionError(ERROR_MESSAGES.CONNECTION_FAILED, error);
     }
     if (error instanceof Error) {
       throw error;
@@ -18118,7 +18135,7 @@ var AppInspectorContextProvider = (props) => {
     () => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
     [props.localstackEndpoint]
   );
-  const resolveLink = useCallback6(
+  const resolveLink = useCallback7(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -18157,7 +18174,7 @@ function useSpansWebSocket(options) {
   const wsRef = useRef11(void 0);
   const reconnectRef = useRef11(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = useCallback7(() => {
+  const connect = useCallback8(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
@@ -18296,6 +18313,7 @@ function useThrottledItems(items, getId, catchUpIncrement = 10) {
 var PAGE_SIZE = 30;
 var useSpans = () => {
   const api = useAppInspectorApi();
+  const { reportDisabled } = useAppInspectorStatus();
   const [spans, setSpans] = useState10();
   const throttledSpans = useThrottledItems(spans, (span) => span.span_id);
   const [fetchError, setFetchError] = useState10();
@@ -18347,17 +18365,17 @@ var useSpans = () => {
   const [warningCount, setWarningCount] = useState10();
   const [hasMoreBackward, setHasMoreBackward] = useState10();
   const [hasMoreForward, setHasMoreForward] = useState10();
-  const fetchForward = useCallback8(() => {
+  const fetchForward = useCallback9(() => {
     void paginationBufferRef.current.fetchForward();
   }, []);
-  const fetchBackward = useCallback8(() => {
+  const fetchBackward = useCallback9(() => {
     void paginationBufferRef.current.fetchBackward();
   }, []);
   useEffect16(() => {
     fetchForward();
   }, [fetchForward]);
   const [clearingSpans, setClearingSpans] = useState10(false);
-  const clearSpans = useCallback8(async () => {
+  const clearSpans = useCallback9(async () => {
     if (clearingSpans) {
       return;
     }
@@ -18375,7 +18393,7 @@ var useSpans = () => {
     }
   }, [clearingSpans, api]);
   const [streamPaused, setStreamPaused] = useState10(false);
-  const toggleStream = useCallback8(() => {
+  const toggleStream = useCallback9(() => {
     setStreamPaused((previous) => !previous);
   }, []);
   useEffect16(() => {
@@ -18397,9 +18415,14 @@ var useSpans = () => {
       }
     }
   });
-  const clearFetchError = useCallback8(() => {
+  const clearFetchError = useCallback9(() => {
     setFetchError(void 0);
   }, []);
+  useEffect16(() => {
+    if (fetchError instanceof AppInspectorDisabledError || fetchError instanceof ConnectionError) {
+      reportDisabled();
+    }
+  }, [fetchError, reportDisabled]);
   return {
     clearFetchError,
     clearingSpans,
@@ -18427,7 +18450,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box19, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback10, useEffect as useEffect21, useRef as useRef17, useState as useState17 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef17, useState as useState17 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close2 } from "@mui/icons-material";
@@ -18798,7 +18821,7 @@ import { Box as Box11, useTheme as useTheme3 } from "@mui/material";
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 import { jsx as jsx135, jsxs as jsxs126, Fragment as Fragment8 } from "react/jsx-runtime";
 import { Box as Box10, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext10, useContext as useContext17, useState as useState12, useRef as useRef14, useCallback as useCallback9, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
+import { createContext as createContext10, useContext as useContext17, useState as useState12, useRef as useRef14, useCallback as useCallback10, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t2, f2, n2 = "";
@@ -19044,7 +19067,7 @@ function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
   const [copied, setCopied] = useState12(false);
   const copyTimeout = useRef14(null);
-  const handleCopyResult = useCallback9((value) => {
+  const handleCopyResult = useCallback10((value) => {
     const current = copyTimeout.current;
     if (current) {
       window.clearTimeout(current);
@@ -19055,7 +19078,7 @@ function useClipboard() {
     timeout
   ]);
   const onCopy = useJsonViewerStore((store) => store.onCopy);
-  const copy = useCallback9(async (path, value) => {
+  const copy = useCallback10(async (path, value) => {
     if (typeof onCopy === "function") {
       try {
         await onCopy(path, value, copyString);
@@ -19076,7 +19099,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = useCallback9(() => {
+  const reset = useCallback10(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -19135,7 +19158,7 @@ function useInspect(path, value, nestedIndex) {
     }
     return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
   });
-  const setInspect = useCallback9((apply) => {
+  const setInspect = useCallback10((apply) => {
     set((oldState) => {
       const newState = typeof apply === "boolean" ? apply : apply(oldState);
       setInspectCache(path, newState, nestedIndex);
@@ -19212,7 +19235,7 @@ function defineEasyType(param) {
   const EasyTypeEditor = (param2) => {
     let { value, setValue, abortEditing, commitEditing } = param2;
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
-    const handleKeyDown = useCallback9((event) => {
+    const handleKeyDown = useCallback10((event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         commitEditing(value);
@@ -19226,7 +19249,7 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = useCallback9((event) => {
+    const handleChange = useCallback10((event) => {
       setValue(event.target.value);
     }, [
       setValue
@@ -20139,7 +20162,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const startEditing = useCallback9((event) => {
+  const startEditing = useCallback10((event) => {
     event.preventDefault();
     if (serialize) setTempValue(serialize(value));
     setEditing(true);
@@ -20147,14 +20170,14 @@ var DataKeyPair = (props) => {
     serialize,
     value
   ]);
-  const abortEditing = useCallback9(() => {
+  const abortEditing = useCallback10(() => {
     setEditing(false);
     setTempValue("");
   }, [
     setEditing,
     setTempValue
   ]);
-  const commitEditing = useCallback9((newValue) => {
+  const commitEditing = useCallback10((newValue) => {
     setEditing(false);
     if (!deserialize) return;
     try {
@@ -20290,7 +20313,7 @@ var DataKeyPair = (props) => {
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: useCallback9(() => setHover(path, nestedIndex), [
+    onMouseEnter: useCallback10(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
@@ -20305,7 +20328,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: useCallback9((event) => {
+        onClick: useCallback10((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -20521,7 +20544,7 @@ var JsonViewerInner = (props) => {
   const prevValue = useJsonViewerStore((store) => store.prevValue);
   const emptyPath = useMemo9(() => [], []);
   const setHover = useJsonViewerStore((store) => store.setHover);
-  const onMouseLeave = useCallback9(() => setHover(null), [
+  const onMouseLeave = useCallback10(() => setHover(null), [
     setHover
   ]);
   return /* @__PURE__ */ jsx135(Paper2, {
@@ -31350,7 +31373,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const [spans, setSpans] = useState17();
   const [loading, setLoading] = useState17(false);
   const [fetchError, setFetchError] = useState17();
-  const fetchSpans = useCallback10(async () => {
+  const fetchSpans = useCallback11(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -31375,20 +31398,25 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
-  const { checkStatus, status, statusError } = useAppInspectorStatus();
-  const handleEnable = useCallback10(async () => {
+  const { checkStatus, reportDisabled, status, statusError } = useAppInspectorStatus();
+  useEffect21(() => {
+    if (fetchError instanceof AppInspectorDisabledError || fetchError instanceof ConnectionError) {
+      reportDisabled();
+    }
+  }, [fetchError, reportDisabled]);
+  const handleEnable = useCallback11(async () => {
     await api.setStatus({ status: "ENABLED" });
     void checkStatus();
   }, [api, checkStatus]);
-  const handleEventSelect = useCallback10((spanId2) => {
+  const handleEventSelect = useCallback11((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = useCallback10(() => {
+  const handleRetry = useCallback11(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback10(() => {
+  const navigateToSpansList = useCallback11(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ jsx145(
@@ -31440,7 +31468,7 @@ var SpansListPage = () => {
     warningCount
   } = useSpans();
   const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
-  const clearSpansSync = useCallback11(() => {
+  const clearSpansSync = useCallback12(() => {
     void clearSpans();
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
@@ -31449,15 +31477,15 @@ var SpansListPage = () => {
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
   const [selectedTraceId, setSelectedTraceId] = useState18();
   const [selectedSpanId, setSelectedSpanId] = useState18();
-  const navigateToSpan = useCallback11((span) => {
+  const navigateToSpan = useCallback12((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback11(() => {
+  const handleRetry = useCallback12(() => {
     void checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
-  const handleEnable = useCallback11(async () => {
+  const handleEnable = useCallback12(async () => {
     await api.setStatus({ status: "ENABLED" });
     clearFetchError();
     void checkStatus();