@localstack/appinspector-ui 1.0.61 → 1.0.63

package/dist/index.js

@@ -64,7 +64,7 @@ import { useCallback as useCallback9, useState as useState13 } from "react";
 import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
-import { DeleteForeverOutlined, SwapVertOutlined } from "@mui/icons-material";
+import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined, SwapVertOutlined } from "@mui/icons-material";
 import {
   Box as Box3,
   Button,
@@ -12142,8 +12142,8 @@ ServiceCell.displayName = "ServiceCell";
 import { Fragment as Fragment3, jsx as jsx124, jsxs as jsxs120 } from "react/jsx-runtime";
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
-  dark: "#887b02",
-  light: "#ffde7b"
+  dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
+  light: { from: "rgba(255, 222, 123, 1)", to: "rgba(255, 222, 123, 0)" }
 };
 var LABEL_BEGINNING_OF_STREAM = "This is the beginning of the stream";
 var LABEL_END_OF_STREAM = "This is the end of the stream";
@@ -12162,11 +12162,11 @@ var SpansDataGridRow = memo8(
       TableRow,
       {
         animate: {
-          backgroundColor: "transparent"
+          backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.to : newSpanBackgroundColor.dark.to
         },
         component: motion.tr,
         initial: {
-          backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light : newSpanBackgroundColor.dark
+          backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.from : newSpanBackgroundColor.dark.from
         },
         sx: {
           transition: "background-color 1200ms ease-in"
@@ -12218,8 +12218,10 @@ var SpansDataGrid = ({
   onFetchForward,
   onOrderChange,
   onSpanClick,
+  onToggleStream,
   order: order2,
-  spans
+  spans,
+  streamPaused
 }) => {
   const columns = useMemo5(() => [
     columnHelper.accessor("trace_id", {
@@ -12308,6 +12310,21 @@ var SpansDataGrid = ({
   return /* @__PURE__ */ jsxs120(Fragment3, { children: [
     /* @__PURE__ */ jsx124(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ jsx124(Box3, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ jsx124(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx124(
+            Button,
+            {
+              onClick: onToggleStream,
+              startIcon: streamPaused ? /* @__PURE__ */ jsx124(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx124(PauseOutlined, {}),
+              variant: "text",
+              children: streamPaused ? "Resume Stream" : "Pause Stream"
+            }
+          ),
+          label: ""
+        }
+      ),
       /* @__PURE__ */ jsx124(
         FormControlLabel,
         {
@@ -12444,9 +12461,10 @@ var SpansList = (props) => {
         onFetchForward: props.onFetchForward,
         onOrderChange: props.onOrderChange,
         onSpanClick: props.onSpanClick,
+        onToggleStream: props.onToggleStream,
         order: props.order,
-        refetching: props.refetching,
-        spans: props.spans
+        spans: props.spans,
+        streamPaused: props.streamPaused
       }
     )
   ] });
@@ -12896,7 +12914,6 @@ var createPaginationBuffer = (options) => {
   let hasMoreBackward = void 0;
   let fetchingForward = false;
   let fetchingBackward = false;
-  const refetching = false;
   const reportDataChange = () => {
     options.onDataChange({
       hasMoreBackward: hasMoreBackward ?? false,
@@ -12907,8 +12924,7 @@ var createPaginationBuffer = (options) => {
   const reportStatusChange = () => {
     options.onStatusChange?.({
       fetchingBackward,
-      fetchingForward,
-      refetching
+      fetchingForward
     });
   };
   const reportError = (error) => {
@@ -12916,6 +12932,25 @@ var createPaginationBuffer = (options) => {
   };
   let fetchForwardLater = false;
   let fetchBackwardLater = false;
+  let fetchForwardSilentlyLater = false;
+  const checkIfThereAreMoreItemsForward = async () => {
+    if (hasMoreForward === true) {
+      return;
+    }
+    fetchingForward = true;
+    reportStatusChange();
+    try {
+      const newPage = await fetchPage(nextForwardToken);
+      hasMoreForward = newPage.items.length > 0;
+      reportDataChange();
+    } catch (error) {
+      reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
+    } finally {
+      fetchingForward = false;
+      reportStatusChange();
+    }
+    runPostFetchActions();
+  };
   const fetchForward = async () => {
     fetchingForward = true;
     reportStatusChange();
@@ -12979,8 +13014,19 @@ var createPaginationBuffer = (options) => {
       fetchForwardLater = false;
       void fetchForward();
     }
+    if (fetchForwardSilentlyLater) {
+      fetchForwardSilentlyLater = false;
+      void checkIfThereAreMoreItemsForward();
+    }
   };
   return {
+    checkIfThereAreMoreItemsForward: () => {
+      if (fetchingForward || fetchingBackward) {
+        fetchForwardSilentlyLater = true;
+        return;
+      }
+      void checkIfThereAreMoreItemsForward();
+    },
     clear: () => {
       if (items !== void 0) {
         items.length = 0;
@@ -13296,7 +13342,6 @@ var useSpans = () => {
   const [fetchError, setFetchError] = useState7();
   const [fetchingForward, setFetchingForward] = useState7(false);
   const [fetchingBackward, setFetchingBackward] = useState7(false);
-  const [refetching, setRefetching] = useState7(false);
   const paginationBuffer = useRef10(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
@@ -13323,7 +13368,6 @@ var useSpans = () => {
     onStatusChange(status2) {
       setFetchingBackward(status2.fetchingBackward);
       setFetchingForward(status2.fetchingForward);
-      setRefetching(status2.refetching);
     },
     // The spans endpoint is sorted by span ingestion time, which might differ from
     // the span timestamp. In order to accomodate for this, we will sort the spans
@@ -13357,9 +13401,19 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [paginationBuffer, api]);
+  const [streamPaused, setStreamPaused] = useState7(false);
+  const toggleStream = useCallback7(() => {
+    setStreamPaused((previous) => !previous);
+  }, []);
   useSpansWebSocket({
     onMessage: () => {
-      paginationBuffer.current.fetchForward();
+      if (!hasMoreForward) {
+        if (streamPaused) {
+          paginationBuffer.current.checkIfThereAreMoreItemsForward();
+        } else {
+          paginationBuffer.current.fetchForward();
+        }
+      }
     }
   });
   return {
@@ -13373,10 +13427,11 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   };
 };
 
@@ -14898,10 +14953,11 @@ var SpansListPage = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   } = useSpans();
   const clearSpansSync = useCallback9(() => {
     void clearSpans();
@@ -14954,9 +15010,10 @@ var SpansListPage = () => {
             onFetchForward: fetchForward,
             onOrderChange: setOrder,
             onSpanClick: navigateToSpan,
+            onToggleStream: toggleStream,
             order: order2,
-            refetching,
-            spans
+            spans,
+            streamPaused
           }
         )
       }