@localstack/appinspector-ui 1.0.182 → 1.0.184

package/dist/index.cjs

@@ -2494,6 +2494,8 @@ var EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID = "event-details-section-bas
 var EVENT_DETAILS_SERVICE_NAME_TEST_ID = "event-details-service-name";
 var EVENT_DETAILS_OPERATION_NAME_TEST_ID = "event-details-operation-name";
 var EVENT_DETAILS_CLOSE_BUTTON_TEST_ID = "event-details-close-button";
+var EVENT_DETAILS_HEADING_TEST_ID = "event-details-heading";
+var EVENT_DETAILS_HEADING_DURATION_TEST_ID = "event-details-heading-duration";
 var EVENT_DETAILS_STATUS_TEST_ID = "event-details-status";
 var EVENT_DETAILS_RESOURCE_NAME_TEST_ID = "event-details-resource-name";
 var EVENT_DETAILS_RESOURCE_ARN_TEST_ID = "event-details-resource-arn";
@@ -2519,7 +2521,7 @@ var SERVICE_NODE_SERVICE_NAME_TEST_ID = "service-node-service-name";
 var SERVICE_NODE_OPERATION_NAME_TEST_ID = "service-node-operation-name";
 var EMULATOR_VERSION_BANNER_TEST_ID = "emulator-version-banner";
 var SPANS_FILTER_NO_MATCH_TEST_ID = "spans-filter-no-match";
-var FILTER_ISSUES_TEST_ID = "filter-issues";
+var FILTER_STATUS_TEST_ID = "filter-status";
 var FILTER_PRODUCER_TEST_ID = "filter-producer";
 var FILTER_CONSUMER_TEST_ID = "filter-consumer";
 var HIDDEN_OPS_NOTE_TEST_ID = "hidden-ops-note";
@@ -2527,6 +2529,7 @@ var TRACE_SIDEBAR_TEST_ID = "trace-sidebar";
 var TRACE_SIDEBAR_RESIZE_HANDLE_TEST_ID = "trace-sidebar-resize-handle";
 var TRACE_SIDEBAR_WATERFALL_BUTTON_TEST_ID = "trace-sidebar-waterfall-button";
 var TRACE_SIDEBAR_MAP_BUTTON_TEST_ID = "trace-sidebar-map-button";
+var TRACE_SIDEBAR_ROOT_HEADING_TEST_ID = "trace-sidebar-root-heading";
 var WATERFALL_TEST_ID = "waterfall";
 var WATERFALL_ROW_TEST_ID = "waterfall-row";
 var WATERFALL_ROW_TOGGLE_TEST_ID = "waterfall-row-toggle";
@@ -15684,20 +15687,6 @@ var NATIVE_SCROLLBARS = {
 var import_jsx_runtime127 = require("react/jsx-runtime");
 var SHOW_EXCLUSIONS = false;
 var toggle = (list, item) => list.includes(item) ? list.filter((other) => other !== item) : [...list, item];
-var ISSUE_LABELS = { error: "Errors", ok: "No issues", warning: "Warnings" };
-var issueOptionIcon = (value) => {
-  switch (value) {
-    case "error": {
-      return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material4.Cancel, { sx: { color: "error.main", fontSize: 16 } });
-    }
-    case "warning": {
-      return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material4.Error, { sx: { color: "warning.main", fontSize: 16 } });
-    }
-    default: {
-      return void 0;
-    }
-  }
-};
 var FilterDropdown = ({ "data-testid": testId, label, onChange, options, value }) => {
   const [anchorElement, setAnchorElement] = (0, import_react37.useState)();
   const open = Boolean(anchorElement);
@@ -15781,7 +15770,6 @@ var FilterDropdown = ({ "data-testid": testId, label, onChange, options, value }
                   }
                 ),
                 !!option.serviceCode && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, mr: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(AwsServiceIcon, { hideTooltip: true, service: option.serviceCode, size: "medium" }) }),
-                !!option.icon && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { alignItems: "center", display: "flex", flexShrink: 0, mr: 1 }, children: option.icon }),
                 /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
                   import_material7.ListItemText,
                   {
@@ -15825,7 +15813,42 @@ var FilterDropdown = ({ "data-testid": testId, label, onChange, options, value }
     )
   ] });
 };
-var SpansFilterBar = ({ facets, onQueryChange, query: query2 }) => {
+var StatusCount = ({ count: count2, "data-testid": testId }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { color: "text.secondary", component: "span", "data-testid": testId, variant: "caption", children: count2.toLocaleString() });
+var StatusFilter = ({ counts, onChange, value }) => {
+  const selected = value.included.length === 0 ? "all" : value.included.length === 1 ? value.included[0] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+    import_material7.ToggleButtonGroup,
+    {
+      "aria-label": "Status",
+      "data-testid": FILTER_STATUS_TEST_ID,
+      exclusive: true,
+      onChange: (_event, next) => {
+        if (next) onChange({ excluded: [], included: next === "all" ? [] : [next] });
+      },
+      size: "small",
+      sx: { "& .MuiToggleButton-root": { gap: 0.5, lineHeight: 1.5, px: 1.25, py: 0.5, textTransform: "none" }, "flexShrink": 0 },
+      value: selected,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.ToggleButton, { value: "all", children: [
+          "All",
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StatusCount, { count: counts.all })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.ToggleButton, { value: "error", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material4.Cancel, { sx: { color: "error.main", fontSize: 16 } }),
+          "Errors",
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StatusCount, { count: counts.error, "data-testid": ERROR_COUNT_TEST_ID })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.ToggleButton, { value: "warning", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material4.Error, { sx: { color: "warning.main", fontSize: 16 } }),
+          "Warnings",
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StatusCount, { count: counts.warning, "data-testid": WARNING_COUNT_TEST_ID })
+        ] })
+      ]
+    }
+  );
+};
+var SpansFilterBar = ({ facets, onQueryChange, query: query2, totalCount }) => {
+  const issueCount = (value) => facets.issues.find((facet) => facet.value === value)?.count ?? 0;
   const dropdown = (key, label, facetValues, toOption, testId) => {
     const value = getQueryValues(query2, key);
     const loaded = new Set(facetValues.map((facet) => facet.value));
@@ -15843,17 +15866,29 @@ var SpansFilterBar = ({ facets, onQueryChange, query: query2 }) => {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.Box, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
-    dropdown("producer", "Producer", facets.producer, (facet) => facet.value === EXTERNAL_PRODUCER ? { label: "External producer" } : { label: getServiceDisplayName(facet.value), serviceCode: facet.value }, FILTER_PRODUCER_TEST_ID),
-    dropdown("service", "Consumer", facets.service, (facet) => ({ label: getServiceDisplayName(facet.value), serviceCode: facet.value }), FILTER_CONSUMER_TEST_ID),
-    dropdown("status", "Issues", facets.issues, (facet) => ({ icon: issueOptionIcon(facet.value), label: ISSUE_LABELS[facet.value] ?? facet.value }), FILTER_ISSUES_TEST_ID)
-  ] });
+  return (
+    // Its controls wrap as items of the parent's controls row.
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.Box, { sx: { display: "contents" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+        StatusFilter,
+        {
+          counts: { all: totalCount, error: issueCount("error"), warning: issueCount("warning") },
+          onChange: (next) => {
+            onQueryChange(setQueryValues(query2, "status", next));
+          },
+          value: getQueryValues(query2, "status")
+        }
+      ),
+      dropdown("producer", "Producer", facets.producer, (facet) => facet.value === EXTERNAL_PRODUCER ? { label: "External producer" } : { label: getServiceDisplayName(facet.value), serviceCode: facet.value }, FILTER_PRODUCER_TEST_ID),
+      dropdown("service", "Consumer", facets.service, (facet) => ({ label: getServiceDisplayName(facet.value), serviceCode: facet.value }), FILTER_CONSUMER_TEST_ID)
+    ] })
+  );
 };
 
 // src/components/spans-list/spans-data-grid.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var SHOW_FILTERS_IN_SEARCH = false;
-var FILTER_NAMES = [["producer", "Producer"], ["service", "Consumer"], ["status", "Issues"]];
+var FILTER_NAMES = [["producer", "Producer"], ["service", "Consumer"], ["status", "Status"]];
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
   dark: { from: "rgba(255, 193, 7, 0.14)", to: "rgba(255, 193, 7, 0)" },
@@ -16023,8 +16058,6 @@ var SpansDataGrid = ({
     if (!spansLoaded) return;
     return compute.topLevelIds.map((spanId) => getSpan(spanId)).filter((span) => span !== void 0);
   }, [compute.topLevelIds, getSpan, spansLoaded]);
-  const errorCount = compute.allIds.filter((spanId) => compute.rows[spanId]?.error).length;
-  const warningCount = compute.allIds.filter((spanId) => compute.rows[spanId]?.warning).length;
   const downstreamOf = (0, import_react38.useCallback)((spanId) => compute.rows[spanId]?.downstream, [compute.rows]);
   const columns = (0, import_react38.useMemo)(() => [
     columnHelper.display({
@@ -16142,8 +16175,8 @@ var SpansDataGrid = ({
   }, [order2, spans?.length, lastSpanId]);
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material8.Box, { sx: { display: "flex", flexDirection: "column", gap: "0.5rem", pt: 1, px: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material8.Box, { sx: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { flex: 1, maxWidth: 220, minWidth: 96, order: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material8.Box, { sx: { alignItems: "center", containerType: "inline-size", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { flex: "1 1 160px", maxWidth: 220, order: -1 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           SpansSearchField,
           {
             onChange: (value) => {
@@ -16153,16 +16186,16 @@ var SpansDataGrid = ({
             value: searchText
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { order: { md: 2, xs: 4 }, width: { md: "auto", xs: "100%" } }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           SpansFilterBar,
           {
             facets: compute.facets,
             onQueryChange: updateDropdownQuery,
-            query: dropdownQuery
+            query: dropdownQuery,
+            totalCount: compute.totalCount
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { flex: 1, order: { md: 3, xs: 2 } } }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { flexShrink: 0, order: { md: 4, xs: 3 } }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { "@container (min-width: 960px)": { order: 1 }, "flexShrink": 0, "ml": "auto", "order": -1 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           import_material8.Button,
           {
             "data-testid": CLEAR_SPANS_TEST_ID,
@@ -16171,7 +16204,8 @@ var SpansDataGrid = ({
             startIcon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material5.DeleteForeverOutlined, {}),
             children: "Clear Operations"
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { "@container (min-width: 960px)": { display: "none" }, "flexBasis": "100%", "mt": "-0.5rem", "order": -1 } })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material8.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem", pl: 0.5 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
@@ -16204,50 +16238,6 @@ var SpansDataGrid = ({
               }
             )
           ] })
-        ] }),
-        errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { color: "text.secondary", variant: "caption", children: "\xB7" }),
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Tooltip, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
-            import_material8.Box,
-            {
-              "data-testid": ERROR_COUNT_TEST_ID,
-              sx: {
-                alignItems: "center",
-                borderBottom: "1px dotted",
-                borderColor: "error.main",
-                cursor: "help",
-                display: "flex",
-                gap: 0.5,
-                mb: "-1px"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
-              ]
-            }
-          ) })
-        ] }),
-        warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { color: "text.secondary", variant: "caption", children: "\xB7" }),
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Tooltip, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
-            import_material8.Box,
-            {
-              "data-testid": WARNING_COUNT_TEST_ID,
-              sx: {
-                alignItems: "center",
-                borderBottom: "1px dotted",
-                borderColor: "warning.main",
-                cursor: "help",
-                display: "flex",
-                gap: 0.5,
-                mb: "-1px"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
-              ]
-            }
-          ) })
         ] })
       ] })
     ] }) }),
@@ -31410,6 +31400,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   }
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
+  const resource = shortResourceName(selectedEvent.resource_name, selectedEvent.arn);
   const showError = issues.error;
   const showPermissions = selectedEvent.iam_errors_suppressed === true || eventGroups.permissions !== void 0;
   const showLogs = isLambdaInvoke && requestId !== void 0;
@@ -31435,12 +31426,21 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           borderBottom: "1px solid",
           borderColor: "divider",
           display: "flex",
-          justifyContent: "space-between",
+          gap: 1.5,
           px: 2,
           py: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material19.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { color: "text.secondary", component: "div", sx: { lineHeight: 1.5 }, variant: "overline", children: "Selected operation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material19.Box, { "data-testid": EVENT_DETAILS_HEADING_TEST_ID, sx: { alignItems: "center", display: "flex", gap: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(AwsServiceIcon, { hideTooltip: true, service: selectedEvent.service_name, size: "small" }),
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { noWrap: true, sx: { flex: "0 1 auto", fontWeight: 600, minWidth: 0 }, title: selectedEvent.operation_name, variant: "subtitle1", children: selectedEvent.operation_name }),
+              resource !== "" && resource !== "*" && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { color: "text.secondary", noWrap: true, sx: { flex: "1 1 0", minWidth: 0 }, title: resource, variant: "body2", children: resource }),
+              duration !== void 0 && // A fixed box, so a screenshot can mask the varying value without the mask edge moving.
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Typography, { color: "text.secondary", "data-testid": EVENT_DETAILS_HEADING_DURATION_TEST_ID, sx: { flex: "none", ml: "auto", textAlign: "right", width: 64 }, variant: "body2", children: formatDuration(Number(duration)) })
+            ] })
+          ] }),
           onClose && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Close, {}) })
         ]
       }
@@ -32706,6 +32706,7 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
       }
     };
   }, [spans, selectedSpanId]);
+  const rootResource = root2 ? shortResourceName(root2.resource_name, root2.arn) : "";
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
     import_material25.Box,
     {
@@ -32759,9 +32760,11 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
         ),
         /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { sx: { alignItems: "center", borderBottom: 1, borderColor: "divider", display: "flex", gap: 1.5, px: 2, py: 1 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { sx: { flex: 1, minWidth: 0 }, children: [
-            root2 && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { color: "text.secondary", component: "div", sx: { lineHeight: 1.5 }, variant: "overline", children: "Trace root" }),
+            root2 && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_material25.Box, { "data-testid": TRACE_SIDEBAR_ROOT_HEADING_TEST_ID, sx: { alignItems: "center", display: "flex", gap: 1, minWidth: 0 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(AwsServiceIcon, { hideTooltip: true, service: root2.service_name, size: "small" }),
-              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { noWrap: true, sx: { fontWeight: 600 }, title: root2.operation_name, variant: "subtitle1", children: root2.operation_name })
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { noWrap: true, sx: { flex: "0 1 auto", fontWeight: 600, minWidth: 0 }, title: root2.operation_name, variant: "subtitle1", children: root2.operation_name }),
+              rootResource !== "" && rootResource !== "*" && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { color: "text.secondary", noWrap: true, sx: { flex: "1 1 0", minWidth: 0 }, title: rootResource, variant: "body2", children: rootResource })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { color: "text.secondary", variant: "caption", children: [
               formatDuration(stats.durationMs),