@localstack/appinspector-ui 1.0.14 → 1.0.16

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
 import { Box as Box6 } from "@mui/material";
-import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState5 } from "react";
 import { useNavigate } from "react-router-dom";
 
 // src/api/use-api.tsx
@@ -2524,7 +2524,7 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
 import { Box } from "@mui/material";
 import { jsx as jsx122 } from "react/jsx-runtime";
 var defaultBackgroundColor = "background.paper";
-var defaultBorderColor = "text.secondary";
+var defaultBorderColor = "palette.divider";
 var PillCell = ({
   backgroundColor = defaultBackgroundColor,
   borderColor = defaultBorderColor,
@@ -2592,7 +2592,9 @@ var ServiceCell = ({
       Typography,
       {
         sx: {
-          borderRight: resource ? `1px solid ${borderColor}` : "none",
+          borderRightColor: resource ? borderColor : "none",
+          borderRightStyle: resource ? "solid" : "none",
+          borderRightWidth: resource ? "1px" : "none",
           fontWeight: "bold",
           overflow: "hidden",
           padding: "1px 8px",
@@ -2701,9 +2703,15 @@ var SpansDataGrid = ({
   loading,
   onClearSpans,
   onFilterWriteOperationsChange,
+  onPageChange,
+  onPageSizeChange,
   onRefresh,
   onSpanClick,
+  page,
+  pageSize,
+  rowCount,
   rows,
+  rowsPerPageOptions,
   // setRows,
   sortingOption = defaultSortingOption
 }) => {
@@ -2802,15 +2810,26 @@ var SpansDataGrid = ({
             getRowId: (row) => row.span_id,
             initialState: {
               pagination: {
-                page: 0,
-                pageSize: 50
+                page,
+                pageSize
               }
             },
             loading,
+            onPageChange: (newPage) => {
+              onPageChange(newPage);
+            },
+            onPageSizeChange: (newPageSize) => {
+              onPageSizeChange(newPageSize);
+            },
             onRowClick: handleRowClick,
             onSortModelChange: handleSortModelChange,
+            page,
+            pageSize,
+            paginationMode: "server",
+            rowCount,
             rowHeight: 40,
             rows: filteredRows,
+            rowsPerPageOptions,
             sortModel,
             sx: { flexGrow: 1 }
           }
@@ -2843,9 +2862,15 @@ var SpansList = (props) => {
         loading: props.spans.loading,
         onClearSpans: props.onClearSpans,
         onFilterWriteOperationsChange: props.onFilterWriteOperationsChange,
+        onPageChange: props.onPageChange,
+        onPageSizeChange: props.onPageSizeChange,
         onRefresh: props.onRefresh,
         onSpanClick: props.onSpanClick,
+        page: props.page,
+        pageSize: props.pageSize,
+        rowCount: props.spanCount,
         rows: props.spans.data ?? [],
+        rowsPerPageOptions: props.spansPerPageOptions,
         sortingOption: { field: "start_time_unix_nano", sort: "asc" }
       }
     )
@@ -3367,24 +3392,37 @@ var SpansListPage = () => {
   const [loading, setLoading] = useState5(false);
   const hasFetched = useRef3(false);
   const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
+  const mapPageToNextCursor = useRef3({});
+  const [page, setPage] = useState5(0);
+  const [pageSize, setPageSize] = useState5(100);
+  const [spansPerPageOptions] = useState5(() => [25, 50, 100]);
+  const [spanCount, setSpanCount] = useState5();
+  const queryOptions = useMemo4(() => {
+    return {
+      is_write_operation: filterWriteOperations ? true : void 0,
+      limit: pageSize,
+      pagination_token: mapPageToNextCursor.current[page - 1]
+    };
+  }, [filterWriteOperations, pageSize, page]);
   const [fetchError, setFetchError] = useState5();
   const { checkStatus, error: statusError, status } = useStatus();
   const fetchSpans = useCallback5(async () => {
     setLoading(true);
     try {
-      const response = await api.getSpans({
-        is_write_operation: filterWriteOperations ? true : void 0,
-        limit: 100
-      });
+      const response = await api.getSpans(queryOptions);
       setSpans(response.spans);
+      setSpanCount(response.pagination.total_count);
       setFetchError(void 0);
+      if (response.pagination.cursor) {
+        mapPageToNextCursor.current[page] = response.pagination.cursor;
+      }
     } catch (error) {
       console.error(error);
       setFetchError(error instanceof Error ? error : new Error("Unknown error", { cause: error }));
     } finally {
       setLoading(false);
     }
-  }, [api, filterWriteOperations]);
+  }, [api, page, queryOptions]);
   const fetchSpansSync = useCallback5(() => {
     void fetchSpans();
   }, [fetchSpans]);
@@ -3450,17 +3488,23 @@ var SpansListPage = () => {
           onFilterWriteOperationsChange: (value) => {
             setFilterWriteOperations(value);
           },
+          onPageChange: setPage,
+          onPageSizeChange: setPageSize,
           onRefresh: () => {
             fetchSpansSync();
           },
           onSpanClick: (span) => {
             navigateToSpan(span);
           },
+          page,
+          pageSize,
+          spanCount,
           spans: {
             data: spans,
             error: fetchError,
             loading
-          }
+          },
+          spansPerPageOptions
         }
       )
     }
@@ -3637,10 +3681,10 @@ import { memo, useCallback as useCallback6 } from "react";
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon, Info, Warning } from "@mui/icons-material";
 import { Box as Box10, Tooltip as Tooltip2 } from "@mui/material";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
-  const icon = useMemo4(() => {
+  const icon = useMemo5(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ jsx132(ErrorIcon, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -3653,7 +3697,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = useMemo4(() => {
+  const color = useMemo5(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -3734,8 +3778,8 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
           /* @__PURE__ */ jsx133(
             ServiceCell,
             {
-              borderColor: selected ? "text.primary" : "text.secondary",
-              borderWidth: selected ? "1.5px" : "1px",
+              borderColor: selected ? "text.primary" : void 0,
+              borderWidth: selected ? "1.5px" : void 0,
               height: "32px",
               resource: data.event.resource_name,
               service: data.event.service_name,