@localstack/appinspector-ui 1.0.106 → 1.0.107

package/dist/index.js

@@ -2414,7 +2414,7 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box20 } from "@mui/material";
-import { useCallback as useCallback10, useState as useState18 } from "react";
+import { useCallback as useCallback11, useState as useState18 } from "react";
 
 // src/api/errors.ts
 var AppInspectorNotFoundError = class extends Error {
@@ -12251,7 +12251,7 @@ var AnimatePresence = function(_a2) {
 };
 
 // src/components/spans-list/spans-data-grid.tsx
-import { memo as memo8, useMemo as useMemo5 } from "react";
+import { memo as memo8, useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo5, useRef as useRef8 } from "react";
 
 // src/components/cells/responsive-timestamp-cell.tsx
 import { memo as memo2 } from "react";
@@ -14884,6 +14884,7 @@ var LABEL_END_OF_STREAM = "This is the end of the stream";
 var LABEL_NO_SPANS = "There are no operations";
 var LABEL_LOAD_OLDER = "Load older operations";
 var LABEL_LOAD_NEWER = "Load newer operations";
+var STICK_TO_EDGE_THRESHOLD_PX = 4;
 var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127("span", { children: label }) }) });
 var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsxs121(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
   !fetching && /* @__PURE__ */ jsx127(Button2, { onClick: onFetch, sx: { my: 1 }, children: label }),
@@ -15042,6 +15043,28 @@ var SpansDataGrid = ({
   const columnCount = table.getAllColumns().length;
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
+  const containerRef = useRef8(null);
+  const isAtLiveEdgeRef = useRef8(true);
+  const handleScroll = useCallback3(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    if (order2 === "oldest_first") {
+      const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+      isAtLiveEdgeRef.current = distanceFromBottom <= STICK_TO_EDGE_THRESHOLD_PX;
+      return;
+    }
+    isAtLiveEdgeRef.current = element.scrollTop <= STICK_TO_EDGE_THRESHOLD_PX;
+  }, [order2]);
+  const lastSpanId = spans?.at(-1)?.span_id;
+  useLayoutEffect2(() => {
+    handleScroll();
+  }, [handleScroll]);
+  useLayoutEffect2(() => {
+    if (order2 !== "oldest_first") return;
+    const element = containerRef.current;
+    if (!element || !isAtLiveEdgeRef.current) return;
+    element.scrollTop = element.scrollHeight;
+  }, [order2, spans?.length, lastSpanId]);
   return /* @__PURE__ */ jsxs121(Fragment5, { children: [
     /* @__PURE__ */ jsx127(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ jsx127(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
@@ -15099,6 +15122,8 @@ var SpansDataGrid = ({
     /* @__PURE__ */ jsx127(Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx127(
       TableContainer,
       {
+        onScroll: handleScroll,
+        ref: containerRef,
         sx: {
           bottom: 0,
           flexGrow: 1,
@@ -15462,15 +15487,15 @@ var StatusMessage = ({
 import { createContext as createContext8, useContext as useContext15, useMemo as useMemo6 } from "react";
 
 // src/hooks/use-status.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useRef as useRef8, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef9, useState as useState6 } from "react";
 var useStatus = () => {
   const api = useAppInspectorApi();
   const [checking, setChecking] = useState6(true);
   const [status, setStatus] = useState6();
   const [error, setError] = useState6();
-  const hasFetchedReference = useRef8(false);
-  const abortControllerReference = useRef8(null);
-  const checkStatus = useCallback3(async () => {
+  const hasFetchedReference = useRef9(false);
+  const abortControllerReference = useRef9(null);
+  const checkStatus = useCallback4(async () => {
     if (abortControllerReference.current !== null) {
       abortControllerReference.current.abort();
     }
@@ -15523,7 +15548,7 @@ var useAppInspectorStatus = () => {
 };
 
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback4, useEffect as useEffect12, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useState as useState7 } from "react";
 function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState7(() => {
     try {
@@ -15534,7 +15559,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = useCallback4((value) => {
+  const setValue = useCallback5((value) => {
     try {
       setStoredValue((previousState) => {
         const next = typeof value === "function" ? value(previousState) : value;
@@ -15568,7 +15593,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef12, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef13, useState as useState10 } from "react";
 
 // src/utils/pagination-buffer.ts
 var insertSorted = (array, item, compareFunction, hint = "back") => {
@@ -15749,7 +15774,7 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback6, useEffect as useEffect14, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect14, useRef as useRef11, useState as useState8 } from "react";
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -15779,7 +15804,7 @@ var LOCALSTACK_INFO_PATH = "/_localstack/info";
 
 // src/context.tsx
 import { createContext as createContext9, useContext as useContext16 } from "react";
-import { useCallback as useCallback5, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
 
 // src/api/client.ts
 var import_semver2 = __toESM(require_semver2(), 1);
@@ -16026,7 +16051,7 @@ var createApiClient = ({ localstackEndpoint }) => {
 };
 
 // src/hooks/use-appinspector-open-analytics.ts
-import { useEffect as useEffect13, useRef as useRef9 } from "react";
+import { useEffect as useEffect13, useRef as useRef10 } from "react";
 
 // node_modules/ua-parser-js/src/main/ua-parser.mjs
 var LIBVERSION = "2.0.9";
@@ -17908,7 +17933,7 @@ var useAppInspectorOpenAnalytics = () => {
   const api = useAppInspectorApi();
   const { deploymentContainer } = useAppInspector();
   const { status, statusError } = useAppInspectorStatus();
-  const firedRef = useRef9(false);
+  const firedRef = useRef10(false);
   useEffect13(() => {
     if (firedRef.current) {
       return;
@@ -17947,7 +17972,7 @@ var AppInspectorContextProvider = (props) => {
     () => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
     [props.localstackEndpoint]
   );
-  const resolveLink = useCallback5(
+  const resolveLink = useCallback6(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -17978,15 +18003,15 @@ var AppInspectorContextProvider = (props) => {
 // src/hooks/use-spans-ws.tsx
 function useSpansWebSocket(options) {
   const { onMessage } = options;
-  const onMessageRef = useRef10(onMessage);
+  const onMessageRef = useRef11(onMessage);
   useEffect14(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
   const [connected, setConnected] = useState8(false);
-  const wsRef = useRef10(void 0);
-  const reconnectRef = useRef10(void 0);
+  const wsRef = useRef11(void 0);
+  const reconnectRef = useRef11(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = useCallback6(() => {
+  const connect = useCallback7(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
@@ -18029,16 +18054,16 @@ function useSpansWebSocket(options) {
 }
 
 // src/hooks/use-throttled-items.ts
-import { useEffect as useEffect15, useRef as useRef11, useState as useState9 } from "react";
+import { useEffect as useEffect15, useRef as useRef12, useState as useState9 } from "react";
 function useThrottledItems(items, getId, catchUpIncrement = 10) {
   const [displayedItems, setDisplayedItems] = useState9([]);
   const [isCatchingUpForward, setIsCatchingUpForward] = useState9(false);
   const [isCatchingUpBackward, setIsCatchingUpBackward] = useState9(false);
-  const targetRef = useRef11([]);
-  const rafRef = useRef11(void 0);
-  const leftHiddenRef = useRef11(0);
-  const rightHiddenRef = useRef11(0);
-  const shrinkRafPendingRef = useRef11(false);
+  const targetRef = useRef12([]);
+  const rafRef = useRef12(void 0);
+  const leftHiddenRef = useRef12(0);
+  const rightHiddenRef = useRef12(0);
+  const shrinkRafPendingRef = useRef12(false);
   useEffect15(() => {
     const previousTarget = targetRef.current;
     const target = items ?? [];
@@ -18130,7 +18155,7 @@ var useSpans = () => {
   const [fetchError, setFetchError] = useState10();
   const [fetchingForward, setFetchingForward] = useState10(false);
   const [fetchingBackward, setFetchingBackward] = useState10(false);
-  const paginationBufferRef = useRef12(createPaginationBuffer({
+  const paginationBufferRef = useRef13(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
         limit: PAGE_SIZE,
@@ -18174,17 +18199,17 @@ var useSpans = () => {
   const [iamErrorCount, setIamErrorCount] = useState10();
   const [hasMoreBackward, setHasMoreBackward] = useState10();
   const [hasMoreForward, setHasMoreForward] = useState10();
-  const fetchForward = useCallback7(() => {
+  const fetchForward = useCallback8(() => {
     void paginationBufferRef.current.fetchForward();
   }, []);
-  const fetchBackward = useCallback7(() => {
+  const fetchBackward = useCallback8(() => {
     void paginationBufferRef.current.fetchBackward();
   }, []);
   useEffect16(() => {
     fetchForward();
   }, [fetchForward]);
   const [clearingSpans, setClearingSpans] = useState10(false);
-  const clearSpans = useCallback7(async () => {
+  const clearSpans = useCallback8(async () => {
     if (clearingSpans) {
       return;
     }
@@ -18202,7 +18227,7 @@ var useSpans = () => {
     }
   }, [clearingSpans, api]);
   const [streamPaused, setStreamPaused] = useState10(false);
-  const toggleStream = useCallback7(() => {
+  const toggleStream = useCallback8(() => {
     setStreamPaused((previous) => !previous);
   }, []);
   useEffect16(() => {
@@ -18249,7 +18274,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 useCallback9, useEffect as useEffect21, useRef as useRef16, useState as useState17 } from "react";
+import { useCallback as useCallback10, 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";
@@ -18453,7 +18478,7 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box12, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef14, useState as useState13 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef15, useState as useState13 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
@@ -18620,7 +18645,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 useRef13, useCallback as useCallback8, 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 useCallback9, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t2, f2, n2 = "";
@@ -18865,8 +18890,8 @@ async function copyString(value) {
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
   const [copied, setCopied] = useState12(false);
-  const copyTimeout = useRef13(null);
-  const handleCopyResult = useCallback8((value) => {
+  const copyTimeout = useRef14(null);
+  const handleCopyResult = useCallback9((value) => {
     const current = copyTimeout.current;
     if (current) {
       window.clearTimeout(current);
@@ -18877,7 +18902,7 @@ function useClipboard() {
     timeout
   ]);
   const onCopy = useJsonViewerStore((store) => store.onCopy);
-  const copy = useCallback8(async (path, value) => {
+  const copy = useCallback9(async (path, value) => {
     if (typeof onCopy === "function") {
       try {
         await onCopy(path, value, copyString);
@@ -18898,7 +18923,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = useCallback8(() => {
+  const reset = useCallback9(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -18957,7 +18982,7 @@ function useInspect(path, value, nestedIndex) {
     }
     return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
   });
-  const setInspect = useCallback8((apply) => {
+  const setInspect = useCallback9((apply) => {
     set((oldState) => {
       const newState = typeof apply === "boolean" ? apply : apply(oldState);
       setInspectCache(path, newState, nestedIndex);
@@ -19034,7 +19059,7 @@ function defineEasyType(param) {
   const EasyTypeEditor = (param2) => {
     let { value, setValue, abortEditing, commitEditing } = param2;
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
-    const handleKeyDown = useCallback8((event) => {
+    const handleKeyDown = useCallback9((event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         commitEditing(value);
@@ -19048,7 +19073,7 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = useCallback8((event) => {
+    const handleChange = useCallback9((event) => {
       setValue(event.target.value);
     }, [
       setValue
@@ -19940,7 +19965,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const highlightContainer = useRef13();
+  const highlightContainer = useRef14();
   useEffect17(() => {
     if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
       highlightContainer.current.animate([
@@ -19961,7 +19986,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const startEditing = useCallback8((event) => {
+  const startEditing = useCallback9((event) => {
     event.preventDefault();
     if (serialize) setTempValue(serialize(value));
     setEditing(true);
@@ -19969,14 +19994,14 @@ var DataKeyPair = (props) => {
     serialize,
     value
   ]);
-  const abortEditing = useCallback8(() => {
+  const abortEditing = useCallback9(() => {
     setEditing(false);
     setTempValue("");
   }, [
     setEditing,
     setTempValue
   ]);
-  const commitEditing = useCallback8((newValue) => {
+  const commitEditing = useCallback9((newValue) => {
     setEditing(false);
     if (!deserialize) return;
     try {
@@ -20112,7 +20137,7 @@ var DataKeyPair = (props) => {
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: useCallback8(() => setHover(path, nestedIndex), [
+    onMouseEnter: useCallback9(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
@@ -20127,7 +20152,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: useCallback8((event) => {
+        onClick: useCallback9((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -20315,7 +20340,7 @@ var JsonViewerInner = (props) => {
   }, [
     props.theme
   ]);
-  const onceRef = useRef13(true);
+  const onceRef = useRef14(true);
   const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
   if (onceRef.current) {
     const allTypes = props.valueTypes ? [
@@ -20343,7 +20368,7 @@ var JsonViewerInner = (props) => {
   const prevValue = useJsonViewerStore((store) => store.prevValue);
   const emptyPath = useMemo9(() => [], []);
   const setHover = useJsonViewerStore((store) => store.setHover);
-  const onMouseLeave = useCallback8(() => setHover(null), [
+  const onMouseLeave = useCallback9(() => setHover(null), [
     setHover
   ]);
   return /* @__PURE__ */ jsx135(Paper2, {
@@ -20460,7 +20485,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs127(Box12, { sx: {
 var EventMessage = ({ event }) => {
   const [isOpen, setIsOpen] = useState13(false);
   const [isOverflowing, setIsOverflowing] = useState13(false);
-  const textReference = useRef14(null);
+  const textReference = useRef15(null);
   const parsedMessage = useMemo10(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo10(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
@@ -30255,7 +30280,7 @@ var QueryStatus = {
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
 import { Box as Box13, CircularProgress as CircularProgress3, Stack, Typography as Typography8 } from "@mui/material";
-import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef15, useState as useState14 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef16, useState as useState14 } from "react";
 import { jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
@@ -30287,7 +30312,7 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
   const [loading, setLoading] = useState14(true);
   const [logs, setLogs] = useState14([]);
   const [error, setError] = useState14();
-  const pollTimerRef = useRef15(null);
+  const pollTimerRef = useRef16(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
   useEffect19(() => {
     let cancelled = false;
@@ -31175,7 +31200,7 @@ var TraceGraphPage = ({ onClose, order: order2 = "oldest_first", spanId, traceId
   const [spans, setSpans] = useState17();
   const [loading, setLoading] = useState17(false);
   const [fetchError, setFetchError] = useState17();
-  const fetchSpans = useCallback9(async () => {
+  const fetchSpans = useCallback10(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -31193,7 +31218,7 @@ var TraceGraphPage = ({ onClose, order: order2 = "oldest_first", spanId, traceId
   }, [fetchSpans]);
   const [open, setOpen] = useState17(true);
   const [selectedEvent, setSelectedEvent] = useState17(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = useRef16();
+  const spansReference = useRef17();
   useEffect21(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
@@ -31201,19 +31226,19 @@ var TraceGraphPage = ({ onClose, order: order2 = "oldest_first", spanId, traceId
     }
   }, [spans, setSelectedEvent, spanId]);
   const { checkStatus, status, statusError } = useAppInspectorStatus();
-  const handleEnable = useCallback9(async () => {
+  const handleEnable = useCallback10(async () => {
     await api.setStatus({ status: "ENABLED" });
     void checkStatus();
   }, [api, checkStatus]);
-  const handleEventSelect = useCallback9((spanId2) => {
+  const handleEventSelect = useCallback10((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = useCallback9(() => {
+  const handleRetry = useCallback10(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback9(() => {
+  const navigateToSpansList = useCallback10(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ jsx145(
@@ -31264,7 +31289,7 @@ var SpansListPage = () => {
     totalCount
   } = useSpans();
   const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
-  const clearSpansSync = useCallback10(() => {
+  const clearSpansSync = useCallback11(() => {
     void clearSpans();
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
@@ -31273,15 +31298,15 @@ var SpansListPage = () => {
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
   const [selectedTraceId, setSelectedTraceId] = useState18();
   const [selectedSpanId, setSelectedSpanId] = useState18();
-  const navigateToSpan = useCallback10((span) => {
+  const navigateToSpan = useCallback11((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback10(() => {
+  const handleRetry = useCallback11(() => {
     void checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
-  const handleEnable = useCallback10(async () => {
+  const handleEnable = useCallback11(async () => {
     await api.setStatus({ status: "ENABLED" });
     void checkStatus();
   }, [api, checkStatus]);