@localstack/appinspector-ui 1.0.82 → 1.0.84

package/dist/index.cjs

@@ -10196,6 +10196,36 @@ var ResponsiveTimestampCell = (0, import_react35.memo)(({ date, locale }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "100%" }, children: formattedTime });
 });
 
+// src/constants/test-ids.ts
+var EVENT_DETAILS_TEST_ID = "event-details";
+var CLEAR_SPANS_TEST_ID = "clear-spans";
+var SPANS_DATA_GRID_TEST_ID = "spans-data-grid";
+var TRACE_GRAPH_TEST_ID = "trace-graph";
+var SPANS_LIST_PAGE_TEST_ID = "spans-list-page";
+var TRACE_GRAPH_PAGE_TEST_ID = "trace-graph-page";
+var VIEW_SPAN_DETAILS_TEST_ID = "view-span-details";
+var SPANS_DATA_GRID_ROW_TEST_ID = "spans-data-grid-row";
+var EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID = "event-details-section-basic-information";
+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_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";
+var EVENT_DETAILS_ACCOUNT_TEST_ID = "event-details-account";
+var EVENT_DETAILS_REGION_TEST_ID = "event-details-region";
+var EVENT_DETAILS_START_TIME_TEST_ID = "event-details-start-time";
+var EVENT_DETAILS_DURATION_TEST_ID = "event-details-duration";
+var EVENT_DETAILS_SPAN_ID_TEST_ID = "event-details-span-id";
+var EVENT_DETAILS_TRACE_ID_TEST_ID = "event-details-trace-id";
+var EVENT_DETAILS_REQUEST_ID_TEST_ID = "event-details-request-id";
+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 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";
+
 // src/components/cells/service-cell.tsx
 var import_material3 = require("@mui/material");
 var import_react40 = require("react");
@@ -12646,6 +12676,7 @@ var ServiceCell = (0, import_react40.memo)(({
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
         import_material3.Typography,
         {
+          "data-testid": SERVICE_NODE_SERVICE_NAME_TEST_ID,
           sx: {
             borderBottomRightRadius: "15px",
             borderTopRightRadius: "15px",
@@ -12822,6 +12853,7 @@ var SpansDataGridRow = (0, import_react42.memo)(
           backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.to : newSpanBackgroundColor.dark.to
         },
         component: motion.tr,
+        "data-testid": SPANS_DATA_GRID_ROW_TEST_ID,
         initial: {
           backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.from : newSpanBackgroundColor.dark.from
         },
@@ -12954,6 +12986,7 @@ var SpansDataGrid = ({
         return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
           import_material5.Button,
           {
+            "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
             onClick: () => {
               onSpanClick(props.row.original);
             },
@@ -13002,9 +13035,10 @@ var SpansDataGrid = ({
           control: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
             import_material5.Button,
             {
+              "data-testid": CLEAR_SPANS_TEST_ID,
               onClick: onClearSpans,
               startIcon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material2.DeleteForeverOutlined, {}),
-              children: "Clear Spans"
+              children: "Clear Events"
             }
           ),
           disabled: clearingSpans,
@@ -13089,7 +13123,7 @@ var SpansDataGrid = ({
 // src/components/spans-list/spans-list.tsx
 var import_jsx_runtime127 = require("react/jsx-runtime");
 var SpansList = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
     props.fetchError && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
       import_material6.Alert,
       {
@@ -26502,7 +26536,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0;
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
       import_material15.Box,
       {
@@ -26517,48 +26551,48 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Close, {}) })
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Close, {}) })
         ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.service_name })
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: selectedEvent.service_name })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.operation_name })
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.resource_name })
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, variant: "body2", children: selectedEvent.resource_name })
         ] }),
         Boolean(resourceArn) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: resourceArn })
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, variant: "body2", children: resourceArn })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.account_id })
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.region })
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
           ] }),
           duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Typography, { variant: "body2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Typography, { "data-testid": EVENT_DETAILS_DURATION_TEST_ID, variant: "body2", children: [
               duration,
               "ms"
             ] })
@@ -26570,6 +26604,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
             import_material15.Chip,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
+              "data-testid": EVENT_DETAILS_STATUS_TEST_ID,
               label: selectedEvent.status_code === 2 ? "Error" : selectedEvent.status_code === 1 ? "OK" : "Unset",
               size: "small"
             }
@@ -26602,15 +26637,15 @@ var EventDetails = ({ onClose, selectedEvent }) => {
             children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 2, children: [
               requestPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { value: requestPayload })
+                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
               responsePayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { value: responsePayload })
+                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
               exceptionPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { value: exceptionPayload })
+                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
@@ -26633,24 +26668,24 @@ var EventDetails = ({ onClose, selectedEvent }) => {
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.span_id })
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.trace_id })
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id })
         ] }),
         requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: requestId })
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId })
         ] }),
         eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
 };
-var PayloadViewer = (0, import_react56.memo)(({ value }) => {
+var PayloadViewer = (0, import_react56.memo)(({ testId, value }) => {
   const theme = (0, import_material15.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -26735,7 +26770,7 @@ var handleStyle = {
 };
 var ServiceNode = (0, import_react59.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_material17.Box, { sx: { maxWidth: 200 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_material17.Box, { "data-testid": SERVICE_NODE_TEST_ID, sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
       import_material17.Box,
       {
@@ -26798,6 +26833,7 @@ var ServiceNode = (0, import_react59.memo)(({ data, selected }) => {
           /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
             import_material17.Typography,
             {
+              "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
               sx: {
                 fontSize: "0.9rem",
                 maxWidth: "100%",
@@ -26999,7 +27035,7 @@ var TraceGraph = ({
     /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
       import_react62.ReactFlow,
       {
-        "data-testid": "trace-graph",
+        "data-testid": TRACE_GRAPH_TEST_ID,
         edges,
         fitView: true,
         fitViewOptions: initialFocusEventId ? { maxZoom: 1, nodes: [{ id: initialFocusEventId }], padding: 0.2 } : void 0,
@@ -27081,7 +27117,7 @@ var TraceGraphView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
     import_material20.Box,
     {
-      "data-testid": "trace-graph-page",
+      "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
         alignItems: "center",
         display: "flex",
@@ -27298,7 +27334,7 @@ var SpansListPage = () => {
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       import_material21.Box,
       {
-        "data-testid": "spans-list-page",
+        "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
           alignItems: "center",
           display: "flex",