@localstack/appinspector-ui 1.0.182 → 1.0.183

package/dist/index.cjs

@@ -2519,7 +2519,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";
@@ -15684,20 +15684,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 +15767,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 +15810,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 +15863,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 +16055,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 +16172,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 +16183,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 +16201,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 +16235,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" })
-              ]
-            }
-          ) })
         ] })
       ] })
     ] }) }),