@localstack/appinspector-ui 1.0.106 → 1.0.108

package/dist/index.cjs

@@ -2484,7 +2484,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";
@@ -14871,6 +14872,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__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: label }) }) });
 var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
   !fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
@@ -14931,11 +14933,11 @@ var SpansDataGridRow = (0, import_react42.memo)(
 );
 var SpansDataGrid = ({
   clearingSpans,
+  errorCount,
   fetchingBackward,
   fetchingForward,
   hasMoreBackward,
   hasMoreForward,
-  iamErrorCount,
   licenseLimit,
   onClearSpans,
   onFetchBackward,
@@ -14947,7 +14949,8 @@ var SpansDataGrid = ({
   spans,
   streamPaused,
   systemLimit,
-  totalCount
+  totalCount,
+  warningCount
 }) => {
   const columns = (0, import_react42.useMemo)(() => [
     columnHelper.accessor("startTime", {
@@ -15029,23 +15032,55 @@ var SpansDataGrid = ({
   const columnCount = table.getAllColumns().length;
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
+  const containerRef = (0, import_react42.useRef)(null);
+  const isAtLiveEdgeRef = (0, import_react42.useRef)(true);
+  const handleScroll = (0, import_react42.useCallback)(() => {
+    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;
+  (0, import_react42.useLayoutEffect)(() => {
+    handleScroll();
+  }, [handleScroll]);
+  (0, import_react42.useLayoutEffect)(() => {
+    if (order2 !== "oldest_first") return;
+    const element = containerRef.current;
+    if (!element || !isAtLiveEdgeRef.current) return;
+    element.scrollTop = element.scrollHeight;
+  }, [order2, spans?.length, lastSpanId]);
   return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
-      iamErrorCount !== void 0 && iamErrorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { title: "Number of IAM permission errors detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
           import_material6.Box,
           {
-            "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__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "error", variant: "body2", children: iamErrorCount.toLocaleString() }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Typography, { color: "error", variant: "caption", children: [
-                "IAM",
-                " ",
-                iamErrorCount === 1 ? "error" : "errors"
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
+            ]
+          }
+        ) })
+      ] }),
+      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+          import_material6.Box,
+          {
+            "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__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
             ]
           }
         ) })
@@ -15086,6 +15121,8 @@ var SpansDataGrid = ({
     /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
       import_material6.TableContainer,
       {
+        onScroll: handleScroll,
+        ref: containerRef,
         sx: {
           bottom: 0,
           flexGrow: 1,
@@ -15177,11 +15214,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,
@@ -15193,7 +15230,8 @@ var SpansList = (props) => {
         spans: props.spans,
         streamPaused: props.streamPaused,
         systemLimit: props.systemLimit,
-        totalCount: props.totalCount
+        totalCount: props.totalCount,
+        warningCount: props.warningCount
       }
     )
   ] });
@@ -18126,7 +18164,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,
@@ -18158,7 +18197,8 @@ var useSpans = () => {
   const [totalCount, setTotalCount] = (0, import_react52.useState)();
   const [licenseLimit, setLicenseLimit] = (0, import_react52.useState)();
   const [systemLimit, setSystemLimit] = (0, import_react52.useState)();
-  const [iamErrorCount, setIamErrorCount] = (0, import_react52.useState)();
+  const [errorCount, setErrorCount] = (0, import_react52.useState)();
+  const [warningCount, setWarningCount] = (0, import_react52.useState)();
   const [hasMoreBackward, setHasMoreBackward] = (0, import_react52.useState)();
   const [hasMoreForward, setHasMoreForward] = (0, import_react52.useState)();
   const fetchForward = (0, import_react52.useCallback)(() => {
@@ -18214,6 +18254,7 @@ var useSpans = () => {
   return {
     clearingSpans,
     clearSpans,
+    errorCount,
     fetchBackward,
     fetchError,
     fetchForward,
@@ -18221,13 +18262,13 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    iamErrorCount,
     licenseLimit,
     spans: throttledSpans.items,
     streamPaused,
     systemLimit,
     toggleStream,
-    totalCount
+    totalCount,
+    warningCount
   };
 };
 
@@ -31235,6 +31276,7 @@ var SpansListPage = () => {
   const {
     clearingSpans,
     clearSpans,
+    errorCount,
     fetchBackward,
     fetchError,
     fetchForward,
@@ -31242,13 +31284,13 @@ var SpansListPage = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    iamErrorCount,
     licenseLimit,
     spans,
     streamPaused,
     systemLimit,
     toggleStream,
-    totalCount
+    totalCount,
+    warningCount
   } = useSpans();
   const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
   const clearSpansSync = (0, import_react69.useCallback)(() => {
@@ -31313,12 +31355,12 @@ var SpansListPage = () => {
             SpansList,
             {
               clearingSpans,
+              errorCount,
               fetchError,
               fetchingBackward,
               fetchingForward,
               hasMoreBackward,
               hasMoreForward,
-              iamErrorCount,
               licenseLimit,
               onClearSpans: clearSpansSync,
               onFetchBackward: fetchBackward,
@@ -31330,7 +31372,8 @@ var SpansListPage = () => {
               spans,
               streamPaused,
               systemLimit,
-              totalCount
+              totalCount,
+              warningCount
             }
           )
         ]