@localstack/appinspector-ui 1.0.106 → 1.0.108

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 {
@@ -2480,7 +2480,8 @@ var EVENT_DETAILS_REQUEST_PAYLOAD = "event-details-request-payload";
 var EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID = "event-details-response-payload";
 var EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID = "event-details-exception-payload";
 var EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID = "event-details-iam-errors-suppressed";
-var IAM_ERROR_COUNT_TEST_ID = "iam-error-count";
+var ERROR_COUNT_TEST_ID = "error-count";
+var WARNING_COUNT_TEST_ID = "warning-count";
 var SERVICE_NODE_TEST_ID = "service-node";
 var SERVICE_NODE_SERVICE_NAME_TEST_ID = "service-node-service-name";
 var SERVICE_NODE_OPERATION_NAME_TEST_ID = "service-node-operation-name";
@@ -12251,7 +12252,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 +14885,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 }),
@@ -14944,11 +14946,11 @@ var SpansDataGridRow = memo8(
 );
 var SpansDataGrid = ({
   clearingSpans,
+  errorCount,
   fetchingBackward,
   fetchingForward,
   hasMoreBackward,
   hasMoreForward,
-  iamErrorCount,
   licenseLimit,
   onClearSpans,
   onFetchBackward,
@@ -14960,7 +14962,8 @@ var SpansDataGrid = ({
   spans,
   streamPaused,
   systemLimit,
-  totalCount
+  totalCount,
+  warningCount
 }) => {
   const columns = useMemo5(() => [
     columnHelper.accessor("startTime", {
@@ -15042,23 +15045,55 @@ 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 }),
-      iamErrorCount !== void 0 && iamErrorCount > 0 && /* @__PURE__ */ jsxs121(Fragment5, { children: [
+      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ jsxs121(Fragment5, { children: [
         /* @__PURE__ */ jsx127(Typography3, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ jsx127(Tooltip3, { title: "Number of IAM permission errors detected across all operations", children: /* @__PURE__ */ jsxs121(
+        /* @__PURE__ */ jsx127(Tooltip3, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs121(
           Box4,
           {
-            "data-testid": IAM_ERROR_COUNT_TEST_ID,
+            "data-testid": ERROR_COUNT_TEST_ID,
             sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "error.main", cursor: "default", display: "flex", gap: 0.5, mb: "-1px" },
             children: [
-              /* @__PURE__ */ jsx127(Typography3, { color: "error", variant: "body2", children: iamErrorCount.toLocaleString() }),
-              /* @__PURE__ */ jsxs121(Typography3, { color: "error", variant: "caption", children: [
-                "IAM",
-                " ",
-                iamErrorCount === 1 ? "error" : "errors"
-              ] })
+              /* @__PURE__ */ jsx127(Typography3, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
+              /* @__PURE__ */ jsx127(Typography3, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
+            ]
+          }
+        ) })
+      ] }),
+      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs121(Fragment5, { children: [
+        /* @__PURE__ */ jsx127(Typography3, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ jsx127(Tooltip3, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs121(
+          Box4,
+          {
+            "data-testid": WARNING_COUNT_TEST_ID,
+            sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "warning.main", cursor: "default", display: "flex", gap: 0.5, mb: "-1px" },
+            children: [
+              /* @__PURE__ */ jsx127(Typography3, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
+              /* @__PURE__ */ jsx127(Typography3, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
             ]
           }
         ) })
@@ -15099,6 +15134,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,
@@ -15190,11 +15227,11 @@ var SpansList = (props) => {
       SpansDataGrid,
       {
         clearingSpans: props.clearingSpans,
+        errorCount: props.errorCount,
         fetchingBackward: props.fetchingBackward,
         fetchingForward: props.fetchingForward,
         hasMoreBackward: props.hasMoreBackward,
         hasMoreForward: props.hasMoreForward,
-        iamErrorCount: props.iamErrorCount,
         licenseLimit: props.licenseLimit,
         onClearSpans: props.onClearSpans,
         onFetchBackward: props.onFetchBackward,
@@ -15206,7 +15243,8 @@ var SpansList = (props) => {
         spans: props.spans,
         streamPaused: props.streamPaused,
         systemLimit: props.systemLimit,
-        totalCount: props.totalCount
+        totalCount: props.totalCount,
+        warningCount: props.warningCount
       }
     )
   ] });
@@ -15462,15 +15500,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 +15561,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 +15572,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 +15606,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 +15787,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 +15817,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 +16064,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 +17946,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 +17985,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 +18016,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 +18067,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 +18168,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,
@@ -18139,7 +18177,8 @@ var useSpans = () => {
       setTotalCount(response.pagination.total_count);
       setLicenseLimit(response.limits.span_count_limit_license);
       setSystemLimit(response.limits.span_count_limit_system);
-      setIamErrorCount(response.iam_error_count);
+      setErrorCount(response.error_count);
+      setWarningCount(response.warning_count);
       return {
         hasMoreBackward: response.pagination.has_prev,
         hasMoreForward: response.pagination.has_next,
@@ -18171,20 +18210,21 @@ var useSpans = () => {
   const [totalCount, setTotalCount] = useState10();
   const [licenseLimit, setLicenseLimit] = useState10();
   const [systemLimit, setSystemLimit] = useState10();
-  const [iamErrorCount, setIamErrorCount] = useState10();
+  const [errorCount, setErrorCount] = useState10();
+  const [warningCount, setWarningCount] = 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 +18242,7 @@ var useSpans = () => {
     }
   }, [clearingSpans, api]);
   const [streamPaused, setStreamPaused] = useState10(false);
-  const toggleStream = useCallback7(() => {
+  const toggleStream = useCallback8(() => {
     setStreamPaused((previous) => !previous);
   }, []);
   useEffect16(() => {
@@ -18227,6 +18267,7 @@ var useSpans = () => {
   return {
     clearingSpans,
     clearSpans,
+    errorCount,
     fetchBackward,
     fetchError,
     fetchForward,
@@ -18234,13 +18275,13 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    iamErrorCount,
     licenseLimit,
     spans: throttledSpans.items,
     streamPaused,
     systemLimit,
     toggleStream,
-    totalCount
+    totalCount,
+    warningCount
   };
 };
 
@@ -18249,7 +18290,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 +18494,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 +18661,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 +18906,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 +18918,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 +18939,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = useCallback8(() => {
+  const reset = useCallback9(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -18957,7 +18998,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 +19075,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 +19089,7 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = useCallback8((event) => {
+    const handleChange = useCallback9((event) => {
       setValue(event.target.value);
     }, [
       setValue
@@ -19940,7 +19981,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 +20002,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 +20010,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 +20153,7 @@ var DataKeyPair = (props) => {
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: useCallback8(() => setHover(path, nestedIndex), [
+    onMouseEnter: useCallback9(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
@@ -20127,7 +20168,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: useCallback8((event) => {
+        onClick: useCallback9((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -20315,7 +20356,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 +20384,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 +20501,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 +30296,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 +30328,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 +31216,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 +31234,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 +31242,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(
@@ -31248,6 +31289,7 @@ var SpansListPage = () => {
   const {
     clearingSpans,
     clearSpans,
+    errorCount,
     fetchBackward,
     fetchError,
     fetchForward,
@@ -31255,16 +31297,16 @@ var SpansListPage = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    iamErrorCount,
     licenseLimit,
     spans,
     streamPaused,
     systemLimit,
     toggleStream,
-    totalCount
+    totalCount,
+    warningCount
   } = 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 +31315,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]);
@@ -31326,12 +31368,12 @@ var SpansListPage = () => {
             SpansList,
             {
               clearingSpans,
+              errorCount,
               fetchError,
               fetchingBackward,
               fetchingForward,
               hasMoreBackward,
               hasMoreForward,
-              iamErrorCount,
               licenseLimit,
               onClearSpans: clearSpansSync,
               onFetchBackward: fetchBackward,
@@ -31343,7 +31385,8 @@ var SpansListPage = () => {
               spans,
               streamPaused,
               systemLimit,
-              totalCount
+              totalCount,
+              warningCount
             }
           )
         ]