@localstack/appinspector-ui 1.0.61 → 1.0.63

package/dist/index.cjs

@@ -12145,8 +12145,8 @@ ServiceCell.displayName = "ServiceCell";
 var import_jsx_runtime124 = require("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";
@@ -12165,11 +12165,11 @@ var SpansDataGridRow = (0, import_react40.memo)(
       import_material4.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"
@@ -12221,8 +12221,10 @@ var SpansDataGrid = ({
   onFetchForward,
   onOrderChange,
   onSpanClick,
+  onToggleStream,
   order: order2,
-  spans
+  spans,
+  streamPaused
 }) => {
   const columns = (0, import_react40.useMemo)(() => [
     columnHelper.accessor("trace_id", {
@@ -12311,6 +12313,21 @@ var SpansDataGrid = ({
   return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.FormControlLabel,
+        {
+          control: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+            import_material4.Button,
+            {
+              onClick: onToggleStream,
+              startIcon: streamPaused ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.PlayArrowOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.PauseOutlined, {}),
+              variant: "text",
+              children: streamPaused ? "Resume Stream" : "Pause Stream"
+            }
+          ),
+          label: ""
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
         import_material4.FormControlLabel,
         {
@@ -12447,9 +12464,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
       }
     )
   ] });
@@ -12899,7 +12917,6 @@ var createPaginationBuffer = (options) => {
   let hasMoreBackward = void 0;
   let fetchingForward = false;
   let fetchingBackward = false;
-  const refetching = false;
   const reportDataChange = () => {
     options.onDataChange({
       hasMoreBackward: hasMoreBackward ?? false,
@@ -12910,8 +12927,7 @@ var createPaginationBuffer = (options) => {
   const reportStatusChange = () => {
     options.onStatusChange?.({
       fetchingBackward,
-      fetchingForward,
-      refetching
+      fetchingForward
     });
   };
   const reportError = (error) => {
@@ -12919,6 +12935,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();
@@ -12982,8 +13017,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;
@@ -13299,7 +13345,6 @@ var useSpans = () => {
   const [fetchError, setFetchError] = (0, import_react47.useState)();
   const [fetchingForward, setFetchingForward] = (0, import_react47.useState)(false);
   const [fetchingBackward, setFetchingBackward] = (0, import_react47.useState)(false);
-  const [refetching, setRefetching] = (0, import_react47.useState)(false);
   const paginationBuffer = (0, import_react47.useRef)(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
@@ -13326,7 +13371,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
@@ -13360,9 +13404,19 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [paginationBuffer, api]);
+  const [streamPaused, setStreamPaused] = (0, import_react47.useState)(false);
+  const toggleStream = (0, import_react47.useCallback)(() => {
+    setStreamPaused((previous) => !previous);
+  }, []);
   useSpansWebSocket({
     onMessage: () => {
-      paginationBuffer.current.fetchForward();
+      if (!hasMoreForward) {
+        if (streamPaused) {
+          paginationBuffer.current.checkIfThereAreMoreItemsForward();
+        } else {
+          paginationBuffer.current.fetchForward();
+        }
+      }
     }
   });
   return {
@@ -13376,10 +13430,11 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   };
 };
 
@@ -14901,10 +14956,11 @@ var SpansListPage = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   } = useSpans();
   const clearSpansSync = (0, import_react62.useCallback)(() => {
     void clearSpans();
@@ -14957,9 +15013,10 @@ var SpansListPage = () => {
             onFetchForward: fetchForward,
             onOrderChange: setOrder,
             onSpanClick: navigateToSpan,
+            onToggleStream: toggleStream,
             order: order2,
-            refetching,
-            spans
+            spans,
+            streamPaused
           }
         )
       }