@localstack/appinspector-ui 1.0.140 → 1.0.141
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +842 -913
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +565 -636
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2425,8 +2425,8 @@ __export(index_exports, {
|
|
|
2425
2425
|
module.exports = __toCommonJS(index_exports);
|
|
2426
2426
|
|
|
2427
2427
|
// src/pages/spans-list-page.tsx
|
|
2428
|
-
var
|
|
2429
|
-
var
|
|
2428
|
+
var import_material23 = require("@mui/material");
|
|
2429
|
+
var import_react63 = require("react");
|
|
2430
2430
|
|
|
2431
2431
|
// src/api/errors.ts
|
|
2432
2432
|
var AppInspectorDisabledError = class extends Error {
|
|
@@ -2587,11 +2587,11 @@ var EmulatorVersionBanner = ({
|
|
|
2587
2587
|
};
|
|
2588
2588
|
|
|
2589
2589
|
// src/components/spans-list/spans-list.tsx
|
|
2590
|
-
var
|
|
2590
|
+
var import_material7 = require("@mui/material");
|
|
2591
2591
|
|
|
2592
2592
|
// src/components/spans-list/spans-data-grid.tsx
|
|
2593
2593
|
var import_icons_material3 = require("@mui/icons-material");
|
|
2594
|
-
var
|
|
2594
|
+
var import_material6 = require("@mui/material");
|
|
2595
2595
|
|
|
2596
2596
|
// node_modules/.pnpm/@tanstack+react-table@8.21.3_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/@tanstack/react-table/build/lib/index.mjs
|
|
2597
2597
|
var React = __toESM(require("react"), 1);
|
|
@@ -13048,7 +13048,7 @@ var motion = /* @__PURE__ */ createMotionProxy(function(Component, config) {
|
|
|
13048
13048
|
});
|
|
13049
13049
|
|
|
13050
13050
|
// src/components/spans-list/spans-data-grid.tsx
|
|
13051
|
-
var
|
|
13051
|
+
var import_react37 = require("react");
|
|
13052
13052
|
|
|
13053
13053
|
// src/components/cells/responsive-timestamp-cell.tsx
|
|
13054
13054
|
var import_react31 = require("react");
|
|
@@ -13059,8 +13059,8 @@ var ResponsiveTimestampCell = (0, import_react31.memo)(({ date }) => {
|
|
|
13059
13059
|
});
|
|
13060
13060
|
|
|
13061
13061
|
// src/components/cells/service-cell.tsx
|
|
13062
|
-
var
|
|
13063
|
-
var
|
|
13062
|
+
var import_material3 = require("@mui/material");
|
|
13063
|
+
var import_react35 = require("react");
|
|
13064
13064
|
|
|
13065
13065
|
// src/utils/service-display-name.ts
|
|
13066
13066
|
var SERVICE_DISPLAY_NAME = {
|
|
@@ -15120,125 +15120,54 @@ var AwsServiceIcon = (0, import_react34.memo)(({ hideTooltip, service, size = "m
|
|
|
15120
15120
|
);
|
|
15121
15121
|
});
|
|
15122
15122
|
|
|
15123
|
-
// src/components/cells/
|
|
15124
|
-
var import_material3 = require("@mui/material");
|
|
15125
|
-
var import_react35 = require("react");
|
|
15123
|
+
// src/components/cells/service-cell.tsx
|
|
15126
15124
|
var import_jsx_runtime123 = require("react/jsx-runtime");
|
|
15127
|
-
var
|
|
15128
|
-
|
|
15129
|
-
|
|
15130
|
-
|
|
15131
|
-
|
|
15132
|
-
outlineWidth = "1px",
|
|
15133
|
-
paddingBottom,
|
|
15134
|
-
paddingTop
|
|
15125
|
+
var ServiceCell = (0, import_react35.memo)(({
|
|
15126
|
+
resource,
|
|
15127
|
+
selected,
|
|
15128
|
+
service,
|
|
15129
|
+
showIcon = true
|
|
15135
15130
|
}) => {
|
|
15136
|
-
|
|
15131
|
+
const theme = (0, import_material3.useTheme)();
|
|
15132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material3.Box, { sx: { ml: -1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
|
|
15137
15133
|
import_material3.Box,
|
|
15138
15134
|
{
|
|
15139
15135
|
sx: {
|
|
15140
15136
|
alignItems: "center",
|
|
15141
|
-
|
|
15142
|
-
borderRadius: "16px",
|
|
15137
|
+
borderRadius: 1,
|
|
15143
15138
|
display: "inline-flex",
|
|
15144
|
-
|
|
15139
|
+
gap: "8px",
|
|
15145
15140
|
maxWidth: "100%",
|
|
15146
|
-
|
|
15147
|
-
|
|
15148
|
-
|
|
15149
|
-
|
|
15150
|
-
...paddingBottom && { paddingBottom },
|
|
15151
|
-
overflow: "hidden"
|
|
15141
|
+
outline: selected ? `2px solid ${theme.palette.primary.main}` : "none",
|
|
15142
|
+
overflow: "hidden",
|
|
15143
|
+
px: "8px",
|
|
15144
|
+
py: "4px"
|
|
15152
15145
|
},
|
|
15153
|
-
children
|
|
15154
|
-
|
|
15155
|
-
|
|
15156
|
-
})
|
|
15157
|
-
|
|
15158
|
-
|
|
15159
|
-
|
|
15160
|
-
|
|
15161
|
-
|
|
15162
|
-
|
|
15163
|
-
|
|
15164
|
-
|
|
15165
|
-
|
|
15166
|
-
width = "32px"
|
|
15167
|
-
}) => {
|
|
15168
|
-
const theme = (0, import_material4.useTheme)();
|
|
15169
|
-
const outlineColor = selected ? theme.palette.primary.light : theme.palette.text.secondary;
|
|
15170
|
-
const outlineWidth = selected ? "2px" : void 0;
|
|
15171
|
-
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(PillCell, { height, outlineColor, outlineWidth, children: [
|
|
15172
|
-
showIcon ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
|
|
15173
|
-
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
15174
|
-
import_material4.Box,
|
|
15175
|
-
{
|
|
15176
|
-
sx: {
|
|
15177
|
-
alignItems: "center",
|
|
15178
|
-
display: "flex",
|
|
15179
|
-
flexShrink: 0,
|
|
15180
|
-
height,
|
|
15181
|
-
justifyContent: "center",
|
|
15182
|
-
overflow: "hidden",
|
|
15183
|
-
padding: 0,
|
|
15184
|
-
width
|
|
15185
|
-
},
|
|
15186
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
|
|
15187
|
-
}
|
|
15188
|
-
),
|
|
15189
|
-
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" })
|
|
15190
|
-
] }) : void 0,
|
|
15191
|
-
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
15192
|
-
import_material4.Typography,
|
|
15193
|
-
{
|
|
15194
|
-
sx: {
|
|
15195
|
-
flexShrink: 1,
|
|
15196
|
-
fontWeight: "bold",
|
|
15197
|
-
minWidth: 0,
|
|
15198
|
-
overflow: "hidden",
|
|
15199
|
-
padding: "1px 8px",
|
|
15200
|
-
textOverflow: "ellipsis",
|
|
15201
|
-
whiteSpace: "nowrap",
|
|
15202
|
-
...showIcon ? {} : {
|
|
15203
|
-
borderBottomLeftRadius: "15px",
|
|
15204
|
-
borderTopLeftRadius: "15px",
|
|
15205
|
-
...!resource && {
|
|
15206
|
-
borderBottomRightRadius: "15px",
|
|
15207
|
-
borderTopRightRadius: "15px"
|
|
15146
|
+
children: [
|
|
15147
|
+
showIcon && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material3.Box, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "medium" }) }),
|
|
15148
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material3.Stack, { sx: { minWidth: 0 }, children: [
|
|
15149
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material3.Typography, { noWrap: true, sx: { fontWeight: 700, lineHeight: 1.25 }, variant: "body2", children: getServiceDisplayName(service) }),
|
|
15150
|
+
resource ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
15151
|
+
import_material3.Typography,
|
|
15152
|
+
{
|
|
15153
|
+
color: "text.secondary",
|
|
15154
|
+
"data-testid": SERVICE_NODE_SERVICE_NAME_TEST_ID,
|
|
15155
|
+
noWrap: true,
|
|
15156
|
+
sx: { lineHeight: 1.2 },
|
|
15157
|
+
variant: "caption",
|
|
15158
|
+
children: resource
|
|
15208
15159
|
}
|
|
15209
|
-
|
|
15210
|
-
}
|
|
15211
|
-
|
|
15212
|
-
|
|
15213
|
-
|
|
15214
|
-
),
|
|
15215
|
-
resource ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
|
|
15216
|
-
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" }) }),
|
|
15217
|
-
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
15218
|
-
import_material4.Typography,
|
|
15219
|
-
{
|
|
15220
|
-
"data-testid": SERVICE_NODE_SERVICE_NAME_TEST_ID,
|
|
15221
|
-
sx: {
|
|
15222
|
-
borderBottomRightRadius: "15px",
|
|
15223
|
-
borderTopRightRadius: "15px",
|
|
15224
|
-
color: "text.secondary",
|
|
15225
|
-
overflow: "hidden",
|
|
15226
|
-
padding: "1px 8px",
|
|
15227
|
-
textOverflow: "ellipsis",
|
|
15228
|
-
whiteSpace: "nowrap"
|
|
15229
|
-
},
|
|
15230
|
-
variant: "caption",
|
|
15231
|
-
children: resource
|
|
15232
|
-
}
|
|
15233
|
-
)
|
|
15234
|
-
] }) : void 0
|
|
15235
|
-
] }) });
|
|
15160
|
+
) : void 0
|
|
15161
|
+
] })
|
|
15162
|
+
]
|
|
15163
|
+
}
|
|
15164
|
+
) });
|
|
15236
15165
|
});
|
|
15237
15166
|
ServiceCell.displayName = "ServiceCell";
|
|
15238
15167
|
|
|
15239
15168
|
// src/components/cells/status-cell.tsx
|
|
15240
15169
|
var import_icons_material = require("@mui/icons-material");
|
|
15241
|
-
var
|
|
15170
|
+
var import_material4 = require("@mui/material");
|
|
15242
15171
|
|
|
15243
15172
|
// src/types/error-levels.ts
|
|
15244
15173
|
var ErrorLevel = {
|
|
@@ -15343,20 +15272,20 @@ function parseIAMEvent(payloadString) {
|
|
|
15343
15272
|
}
|
|
15344
15273
|
|
|
15345
15274
|
// src/components/cells/status-cell.tsx
|
|
15346
|
-
var
|
|
15275
|
+
var import_jsx_runtime124 = require("react/jsx-runtime");
|
|
15347
15276
|
var StatusIcon = ({ errorLevel, spanStatusCode }) => {
|
|
15348
15277
|
switch (errorLevel) {
|
|
15349
15278
|
case ErrorLevel.ERROR: {
|
|
15350
|
-
return /* @__PURE__ */ (0,
|
|
15279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.Cancel, { sx: { color: "red" } });
|
|
15351
15280
|
}
|
|
15352
15281
|
case ErrorLevel.IAM_PERMISSION: {
|
|
15353
|
-
return /* @__PURE__ */ (0,
|
|
15282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.GppBad, { sx: { color: spanStatusCode === 2 ? "red" : "warning.main" } });
|
|
15354
15283
|
}
|
|
15355
15284
|
case ErrorLevel.WARNING: {
|
|
15356
|
-
return /* @__PURE__ */ (0,
|
|
15285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.Error, { sx: { color: "orange" } });
|
|
15357
15286
|
}
|
|
15358
15287
|
default: {
|
|
15359
|
-
return /* @__PURE__ */ (0,
|
|
15288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_jsx_runtime124.Fragment, {});
|
|
15360
15289
|
}
|
|
15361
15290
|
}
|
|
15362
15291
|
};
|
|
@@ -15388,30 +15317,30 @@ var buildTooltipContent = (span) => {
|
|
|
15388
15317
|
}
|
|
15389
15318
|
const spanStatusLabel = SPAN_STATUS_LABELS[span.status_code] ?? `Unknown (${span.status_code.toString()})`;
|
|
15390
15319
|
const iamDenials = span.events.filter((event) => event.event_type?.toLowerCase().includes("iam") && typeof event.attributes?.payload === "string").map((event) => parseIAMEvent(event.attributes.payload)).filter((parsed) => parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied").filter(Boolean);
|
|
15391
|
-
return /* @__PURE__ */ (0,
|
|
15392
|
-
/* @__PURE__ */ (0,
|
|
15320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { children: [
|
|
15321
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Typography, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: [
|
|
15393
15322
|
"Status: ",
|
|
15394
15323
|
spanStatusLabel
|
|
15395
15324
|
] }),
|
|
15396
|
-
messages.map((message, index) => /* @__PURE__ */ (0,
|
|
15397
|
-
iamDenials.length > 0 && /* @__PURE__ */ (0,
|
|
15398
|
-
/* @__PURE__ */ (0,
|
|
15399
|
-
/* @__PURE__ */ (0,
|
|
15400
|
-
iamDenials.map((denial, index) => denial !== void 0 && /* @__PURE__ */ (0,
|
|
15325
|
+
messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "inherit", display: "block", variant: "caption", children: message }, index)),
|
|
15326
|
+
iamDenials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
|
|
15327
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { sx: { borderColor: "rgba(255,255,255,0.2)", my: 0.5 } }),
|
|
15328
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: "Permissions" }),
|
|
15329
|
+
iamDenials.map((denial, index) => denial !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "inherit", display: "block", variant: "caption", children: `${formatPermissionStatus(denial.permission)}: ${denial.service}.${denial.operation}` }, index))
|
|
15401
15330
|
] })
|
|
15402
15331
|
] });
|
|
15403
15332
|
};
|
|
15404
15333
|
var StatusIconWithTooltip = ({ span }) => {
|
|
15405
15334
|
const errorLevel = calculateHighestErrorLevel(span);
|
|
15406
|
-
if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ (0,
|
|
15407
|
-
return /* @__PURE__ */ (0,
|
|
15335
|
+
if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_jsx_runtime124.Fragment, {});
|
|
15336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Tooltip, { title: buildTooltipContent(span), children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StatusIcon, { errorLevel, spanStatusCode: span.status_code }) }) });
|
|
15408
15337
|
};
|
|
15409
15338
|
|
|
15410
15339
|
// src/components/spans-list/span-count-badge.tsx
|
|
15411
15340
|
var import_icons_material2 = require("@mui/icons-material");
|
|
15412
|
-
var
|
|
15413
|
-
var
|
|
15414
|
-
var
|
|
15341
|
+
var import_material5 = require("@mui/material");
|
|
15342
|
+
var import_react36 = require("react");
|
|
15343
|
+
var import_jsx_runtime125 = require("react/jsx-runtime");
|
|
15415
15344
|
var resolveBindingLimit = (systemLimit, licenseLimit) => {
|
|
15416
15345
|
const numericLimits = [systemLimit, licenseLimit].filter((l2) => typeof l2 === "number");
|
|
15417
15346
|
if (numericLimits.length > 0) return Math.min(...numericLimits);
|
|
@@ -15424,29 +15353,29 @@ var fmtLimit = (value) => {
|
|
|
15424
15353
|
if (value === "unlimited") return "Unlimited";
|
|
15425
15354
|
return fmt(value);
|
|
15426
15355
|
};
|
|
15427
|
-
var StatRow = ({ label, value }) => /* @__PURE__ */ (0,
|
|
15428
|
-
/* @__PURE__ */ (0,
|
|
15429
|
-
/* @__PURE__ */ (0,
|
|
15356
|
+
var StatRow = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
|
|
15357
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
|
|
15358
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
|
|
15430
15359
|
] });
|
|
15431
15360
|
var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
|
|
15432
|
-
const [anchorElement, setAnchorElement] = (0,
|
|
15361
|
+
const [anchorElement, setAnchorElement] = (0, import_react36.useState)();
|
|
15433
15362
|
const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
|
|
15434
15363
|
if (totalCount === void 0 && bindingLimit === void 0) {
|
|
15435
|
-
return /* @__PURE__ */ (0,
|
|
15364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
|
|
15436
15365
|
}
|
|
15437
15366
|
if (visibleCount !== void 0) totalCount = Math.max(totalCount ?? 0, visibleCount);
|
|
15438
15367
|
const isLoading = totalCount === void 0;
|
|
15439
15368
|
const isOpen = anchorElement !== void 0;
|
|
15440
15369
|
const systemLimitReached = typeof systemLimit === "number" && totalCount !== void 0 && totalCount >= systemLimit;
|
|
15441
15370
|
const licenseLimitReached = typeof licenseLimit === "number" && totalCount !== void 0 && totalCount >= licenseLimit;
|
|
15442
|
-
return /* @__PURE__ */ (0,
|
|
15443
|
-
isLoading ? /* @__PURE__ */ (0,
|
|
15444
|
-
/* @__PURE__ */ (0,
|
|
15445
|
-
/* @__PURE__ */ (0,
|
|
15446
|
-
/* @__PURE__ */ (0,
|
|
15371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
|
|
15372
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
|
|
15373
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", variant: "caption", children: "Showing" }),
|
|
15374
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
|
|
15375
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
|
|
15447
15376
|
] }),
|
|
15448
|
-
/* @__PURE__ */ (0,
|
|
15449
|
-
|
|
15377
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { title: "Operation count details", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
15378
|
+
import_material5.IconButton,
|
|
15450
15379
|
{
|
|
15451
15380
|
"aria-describedby": isOpen ? "operation-count-popover" : void 0,
|
|
15452
15381
|
onClick: (event) => {
|
|
@@ -15454,11 +15383,11 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
|
|
|
15454
15383
|
},
|
|
15455
15384
|
size: "small",
|
|
15456
15385
|
sx: { color: systemLimitReached || licenseLimitReached ? "warning.main" : "text.disabled" },
|
|
15457
|
-
children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ (0,
|
|
15386
|
+
children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.InfoOutlined, { sx: { fontSize: 14 } })
|
|
15458
15387
|
}
|
|
15459
15388
|
) }),
|
|
15460
|
-
/* @__PURE__ */ (0,
|
|
15461
|
-
|
|
15389
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
15390
|
+
import_material5.Popover,
|
|
15462
15391
|
{
|
|
15463
15392
|
anchorEl: anchorElement,
|
|
15464
15393
|
anchorOrigin: { horizontal: "right", vertical: "bottom" },
|
|
@@ -15468,55 +15397,55 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
|
|
|
15468
15397
|
},
|
|
15469
15398
|
open: isOpen,
|
|
15470
15399
|
transformOrigin: { horizontal: "right", vertical: "top" },
|
|
15471
|
-
children: /* @__PURE__ */ (0,
|
|
15472
|
-
/* @__PURE__ */ (0,
|
|
15473
|
-
/* @__PURE__ */ (0,
|
|
15474
|
-
/* @__PURE__ */ (0,
|
|
15475
|
-
/* @__PURE__ */ (0,
|
|
15400
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { minWidth: 240, p: 2 }, children: [
|
|
15401
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { fontWeight: 700, variant: "body2", children: "Storage" }),
|
|
15402
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
|
|
15403
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
|
|
15404
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
15476
15405
|
StatRow,
|
|
15477
15406
|
{
|
|
15478
|
-
label: /* @__PURE__ */ (0,
|
|
15407
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
|
|
15479
15408
|
value: visibleCount
|
|
15480
15409
|
}
|
|
15481
15410
|
),
|
|
15482
|
-
/* @__PURE__ */ (0,
|
|
15411
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
15483
15412
|
StatRow,
|
|
15484
15413
|
{
|
|
15485
|
-
label: /* @__PURE__ */ (0,
|
|
15414
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
|
|
15486
15415
|
value: totalCount
|
|
15487
15416
|
}
|
|
15488
15417
|
)
|
|
15489
15418
|
] }),
|
|
15490
|
-
(systemLimitReached || licenseLimit !== void 0 && licenseLimit !== "unlimited") && /* @__PURE__ */ (0,
|
|
15491
|
-
/* @__PURE__ */ (0,
|
|
15492
|
-
/* @__PURE__ */ (0,
|
|
15493
|
-
/* @__PURE__ */ (0,
|
|
15494
|
-
/* @__PURE__ */ (0,
|
|
15495
|
-
licenseLimit !== void 0 && licenseLimit !== "unlimited" && /* @__PURE__ */ (0,
|
|
15419
|
+
(systemLimitReached || licenseLimit !== void 0 && licenseLimit !== "unlimited") && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
|
|
15420
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Divider, { sx: { my: 1.5 } }),
|
|
15421
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
|
|
15422
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", sx: { display: "block", mb: 1.5, mt: 0.25 }, variant: "caption", children: "Limits restrict the total number of operations that can be stored." }),
|
|
15423
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
|
|
15424
|
+
licenseLimit !== void 0 && licenseLimit !== "unlimited" && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
15496
15425
|
StatRow,
|
|
15497
15426
|
{
|
|
15498
|
-
label: /* @__PURE__ */ (0,
|
|
15427
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
|
|
15499
15428
|
value: licenseLimit
|
|
15500
15429
|
}
|
|
15501
15430
|
),
|
|
15502
|
-
systemLimitReached && /* @__PURE__ */ (0,
|
|
15431
|
+
systemLimitReached && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
15503
15432
|
StatRow,
|
|
15504
15433
|
{
|
|
15505
|
-
label: /* @__PURE__ */ (0,
|
|
15434
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
|
|
15506
15435
|
value: systemLimit
|
|
15507
15436
|
}
|
|
15508
15437
|
)
|
|
15509
15438
|
] })
|
|
15510
15439
|
] }),
|
|
15511
|
-
(systemLimitReached || licenseLimitReached) && /* @__PURE__ */ (0,
|
|
15512
|
-
licenseLimitReached && /* @__PURE__ */ (0,
|
|
15513
|
-
/* @__PURE__ */ (0,
|
|
15514
|
-
/* @__PURE__ */ (0,
|
|
15515
|
-
/* @__PURE__ */ (0,
|
|
15440
|
+
(systemLimitReached || licenseLimitReached) && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
|
|
15441
|
+
licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
|
|
15442
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
|
|
15443
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
|
|
15444
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
|
|
15516
15445
|
] }),
|
|
15517
|
-
/* @__PURE__ */ (0,
|
|
15518
|
-
/* @__PURE__ */ (0,
|
|
15519
|
-
|
|
15446
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "warning.contrastText", sx: { display: "block", mb: 1 }, variant: "caption", children: "Newer operations are being dropped. Upgrade your license to increase the retention limit." }),
|
|
15447
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
15448
|
+
import_material5.Button,
|
|
15520
15449
|
{
|
|
15521
15450
|
color: "inherit",
|
|
15522
15451
|
href: "https://localstack.cloud/pricing",
|
|
@@ -15528,9 +15457,9 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
|
|
|
15528
15457
|
}
|
|
15529
15458
|
)
|
|
15530
15459
|
] }),
|
|
15531
|
-
systemLimitReached && !licenseLimitReached && /* @__PURE__ */ (0,
|
|
15532
|
-
/* @__PURE__ */ (0,
|
|
15533
|
-
/* @__PURE__ */ (0,
|
|
15460
|
+
systemLimitReached && !licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
|
|
15461
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
|
|
15462
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
|
|
15534
15463
|
] })
|
|
15535
15464
|
] })
|
|
15536
15465
|
] })
|
|
@@ -15540,7 +15469,7 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
|
|
|
15540
15469
|
};
|
|
15541
15470
|
|
|
15542
15471
|
// src/components/spans-list/spans-data-grid.tsx
|
|
15543
|
-
var
|
|
15472
|
+
var import_jsx_runtime126 = require("react/jsx-runtime");
|
|
15544
15473
|
var columnHelper = createColumnHelper();
|
|
15545
15474
|
var newSpanBackgroundColor = {
|
|
15546
15475
|
dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
|
|
@@ -15550,13 +15479,13 @@ var LABEL_BEGINNING_OF_STREAM = "This is the beginning of the stream";
|
|
|
15550
15479
|
var LABEL_END_OF_STREAM = "This is the end of the stream";
|
|
15551
15480
|
var LABEL_NO_SPANS = "There are no operations";
|
|
15552
15481
|
var STICK_TO_EDGE_THRESHOLD_PX = 4;
|
|
15553
|
-
var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ (0,
|
|
15554
|
-
var LoadingRow = ({ colSpan }) => /* @__PURE__ */ (0,
|
|
15555
|
-
var SpansDataGridRow = (0,
|
|
15482
|
+
var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { children: label }) }) });
|
|
15483
|
+
var LoadingRow = ({ colSpan }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.CircularProgress, { size: 24, sx: { m: 2 } }) }) });
|
|
15484
|
+
var SpansDataGridRow = (0, import_react37.memo)(
|
|
15556
15485
|
({ isNew, onSpanClick, row }) => {
|
|
15557
|
-
const theme = (0,
|
|
15558
|
-
return /* @__PURE__ */ (0,
|
|
15559
|
-
|
|
15486
|
+
const theme = (0, import_material6.useTheme)();
|
|
15487
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15488
|
+
import_material6.TableRow,
|
|
15560
15489
|
{
|
|
15561
15490
|
animate: {
|
|
15562
15491
|
backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.to : newSpanBackgroundColor.dark.to
|
|
@@ -15574,16 +15503,16 @@ var SpansDataGridRow = (0, import_react38.memo)(
|
|
|
15574
15503
|
transition: "background-color 1200ms ease-in"
|
|
15575
15504
|
},
|
|
15576
15505
|
children: row.getVisibleCells().map((cell) => {
|
|
15577
|
-
return /* @__PURE__ */ (0,
|
|
15578
|
-
|
|
15506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15507
|
+
import_material6.TableCell,
|
|
15579
15508
|
{
|
|
15580
15509
|
sx: {
|
|
15581
|
-
height:
|
|
15510
|
+
height: 48,
|
|
15582
15511
|
maxWidth: `${cell.column.getSize().toString()}px`,
|
|
15583
15512
|
minWidth: `${cell.column.getSize().toString()}px`
|
|
15584
15513
|
},
|
|
15585
|
-
children: /* @__PURE__ */ (0,
|
|
15586
|
-
|
|
15514
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15515
|
+
import_material6.Box,
|
|
15587
15516
|
{
|
|
15588
15517
|
sx: {
|
|
15589
15518
|
"alignItems": "center",
|
|
@@ -15595,7 +15524,7 @@ var SpansDataGridRow = (0, import_react38.memo)(
|
|
|
15595
15524
|
},
|
|
15596
15525
|
"width": "100%"
|
|
15597
15526
|
},
|
|
15598
|
-
children: /* @__PURE__ */ (0,
|
|
15527
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
|
|
15599
15528
|
}
|
|
15600
15529
|
)
|
|
15601
15530
|
},
|
|
@@ -15626,11 +15555,11 @@ var SpansDataGrid = ({
|
|
|
15626
15555
|
totalCount,
|
|
15627
15556
|
warningCount
|
|
15628
15557
|
}) => {
|
|
15629
|
-
const columns = (0,
|
|
15558
|
+
const columns = (0, import_react37.useMemo)(() => [
|
|
15630
15559
|
columnHelper.accessor("startTime", {
|
|
15631
|
-
cell: (props) => /* @__PURE__ */ (0,
|
|
15632
|
-
header: () => /* @__PURE__ */ (0,
|
|
15633
|
-
|
|
15560
|
+
cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ResponsiveTimestampCell, { date: props.getValue() }),
|
|
15561
|
+
header: () => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15562
|
+
import_material6.TableSortLabel,
|
|
15634
15563
|
{
|
|
15635
15564
|
active: true,
|
|
15636
15565
|
direction: order2 === "newest_first" ? "asc" : "desc",
|
|
@@ -15646,23 +15575,23 @@ var SpansDataGrid = ({
|
|
|
15646
15575
|
columnHelper.display({
|
|
15647
15576
|
cell: (props) => {
|
|
15648
15577
|
if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
|
|
15649
|
-
return /* @__PURE__ */ (0,
|
|
15578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
|
|
15650
15579
|
}
|
|
15651
|
-
return /* @__PURE__ */ (0,
|
|
15580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
|
|
15652
15581
|
},
|
|
15653
15582
|
header: "Producer",
|
|
15654
15583
|
id: "producer",
|
|
15655
15584
|
size: 180
|
|
15656
15585
|
}),
|
|
15657
15586
|
columnHelper.accessor("operation_name", {
|
|
15658
|
-
cell: (props) => /* @__PURE__ */ (0,
|
|
15659
|
-
|
|
15587
|
+
cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15588
|
+
import_material6.Box,
|
|
15660
15589
|
{
|
|
15661
15590
|
sx: {
|
|
15662
15591
|
overflow: "hidden",
|
|
15663
15592
|
textOverflow: "ellipsis"
|
|
15664
15593
|
},
|
|
15665
|
-
children: /* @__PURE__ */ (0,
|
|
15594
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { title: props.getValue(), children: props.getValue() })
|
|
15666
15595
|
}
|
|
15667
15596
|
),
|
|
15668
15597
|
header: "Action",
|
|
@@ -15671,7 +15600,7 @@ var SpansDataGrid = ({
|
|
|
15671
15600
|
}),
|
|
15672
15601
|
columnHelper.display({
|
|
15673
15602
|
cell: (props) => {
|
|
15674
|
-
return /* @__PURE__ */ (0,
|
|
15603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
|
|
15675
15604
|
},
|
|
15676
15605
|
header: "Consumer",
|
|
15677
15606
|
id: "consumer",
|
|
@@ -15679,10 +15608,10 @@ var SpansDataGrid = ({
|
|
|
15679
15608
|
}),
|
|
15680
15609
|
columnHelper.display({
|
|
15681
15610
|
cell: (props) => {
|
|
15682
|
-
return /* @__PURE__ */ (0,
|
|
15683
|
-
/* @__PURE__ */ (0,
|
|
15684
|
-
/* @__PURE__ */ (0,
|
|
15685
|
-
|
|
15611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", gap: 0.5, justifyContent: "flex-end" }, children: [
|
|
15612
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StatusIconWithTooltip, { span: props.row.original }),
|
|
15613
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15614
|
+
import_material6.Button,
|
|
15686
15615
|
{
|
|
15687
15616
|
"data-testid": VIEW_SPAN_DETAILS_TEST_ID,
|
|
15688
15617
|
onClick: (event) => {
|
|
@@ -15709,13 +15638,13 @@ var SpansDataGrid = ({
|
|
|
15709
15638
|
const columnCount = table.getAllColumns().length;
|
|
15710
15639
|
const rows = table.getRowModel().rows;
|
|
15711
15640
|
const hasRows = rows.length > 0;
|
|
15712
|
-
const displayRows = (0,
|
|
15641
|
+
const displayRows = (0, import_react37.useMemo)(() => {
|
|
15713
15642
|
if (order2 === "newest_first") return rows.toReversed();
|
|
15714
15643
|
return rows;
|
|
15715
15644
|
}, [rows, order2]);
|
|
15716
|
-
const containerRef = (0,
|
|
15717
|
-
const isAtLiveEdgeRef = (0,
|
|
15718
|
-
const handleScroll = (0,
|
|
15645
|
+
const containerRef = (0, import_react37.useRef)(null);
|
|
15646
|
+
const isAtLiveEdgeRef = (0, import_react37.useRef)(true);
|
|
15647
|
+
const handleScroll = (0, import_react37.useCallback)(() => {
|
|
15719
15648
|
const element = containerRef.current;
|
|
15720
15649
|
if (!element) return;
|
|
15721
15650
|
if (order2 === "oldest_first") {
|
|
@@ -15736,68 +15665,68 @@ var SpansDataGrid = ({
|
|
|
15736
15665
|
const totalVirtualSize = virtualizer.getTotalSize();
|
|
15737
15666
|
const paddingTop = virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
|
|
15738
15667
|
const paddingBottom = virtualItems.length > 0 ? totalVirtualSize - (virtualItems.at(-1)?.end ?? 0) : 0;
|
|
15739
|
-
const seenSpanIdsRef = (0,
|
|
15668
|
+
const seenSpanIdsRef = (0, import_react37.useRef)(void 0);
|
|
15740
15669
|
seenSpanIdsRef.current ??= new Set((spans ?? []).map((s) => s.span_id));
|
|
15741
|
-
(0,
|
|
15670
|
+
(0, import_react37.useLayoutEffect)(() => {
|
|
15742
15671
|
for (const virtualItem of virtualItems) {
|
|
15743
15672
|
const row = displayRows[virtualItem.index];
|
|
15744
15673
|
if (row) seenSpanIdsRef.current?.add(row.original.span_id);
|
|
15745
15674
|
}
|
|
15746
15675
|
});
|
|
15747
|
-
(0,
|
|
15676
|
+
(0, import_react37.useEffect)(() => {
|
|
15748
15677
|
if (spans?.length === 0) seenSpanIdsRef.current = void 0;
|
|
15749
15678
|
}, [spans?.length]);
|
|
15750
15679
|
const lastSpanId = spans?.at(-1)?.span_id;
|
|
15751
|
-
(0,
|
|
15680
|
+
(0, import_react37.useLayoutEffect)(() => {
|
|
15752
15681
|
handleScroll();
|
|
15753
15682
|
}, [handleScroll]);
|
|
15754
|
-
(0,
|
|
15683
|
+
(0, import_react37.useLayoutEffect)(() => {
|
|
15755
15684
|
if (order2 !== "oldest_first") return;
|
|
15756
15685
|
const element = containerRef.current;
|
|
15757
15686
|
if (!element || !isAtLiveEdgeRef.current) return;
|
|
15758
15687
|
element.scrollTop = element.scrollHeight;
|
|
15759
15688
|
}, [order2, spans?.length, lastSpanId]);
|
|
15760
|
-
return /* @__PURE__ */ (0,
|
|
15761
|
-
/* @__PURE__ */ (0,
|
|
15762
|
-
/* @__PURE__ */ (0,
|
|
15763
|
-
errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ (0,
|
|
15764
|
-
/* @__PURE__ */ (0,
|
|
15765
|
-
/* @__PURE__ */ (0,
|
|
15766
|
-
|
|
15689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
|
|
15690
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
|
|
15691
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
|
|
15692
|
+
errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
|
|
15693
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
|
|
15694
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Tooltip, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
|
|
15695
|
+
import_material6.Box,
|
|
15767
15696
|
{
|
|
15768
15697
|
"data-testid": ERROR_COUNT_TEST_ID,
|
|
15769
15698
|
sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "error.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
|
|
15770
15699
|
children: [
|
|
15771
|
-
/* @__PURE__ */ (0,
|
|
15772
|
-
/* @__PURE__ */ (0,
|
|
15700
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
|
|
15701
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
|
|
15773
15702
|
]
|
|
15774
15703
|
}
|
|
15775
15704
|
) })
|
|
15776
15705
|
] }),
|
|
15777
|
-
warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ (0,
|
|
15778
|
-
/* @__PURE__ */ (0,
|
|
15779
|
-
/* @__PURE__ */ (0,
|
|
15780
|
-
|
|
15706
|
+
warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
|
|
15707
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
|
|
15708
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Tooltip, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
|
|
15709
|
+
import_material6.Box,
|
|
15781
15710
|
{
|
|
15782
15711
|
"data-testid": WARNING_COUNT_TEST_ID,
|
|
15783
15712
|
sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "warning.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
|
|
15784
15713
|
children: [
|
|
15785
|
-
/* @__PURE__ */ (0,
|
|
15786
|
-
/* @__PURE__ */ (0,
|
|
15714
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
|
|
15715
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
|
|
15787
15716
|
]
|
|
15788
15717
|
}
|
|
15789
15718
|
) })
|
|
15790
15719
|
] }),
|
|
15791
|
-
/* @__PURE__ */ (0,
|
|
15792
|
-
/* @__PURE__ */ (0,
|
|
15793
|
-
|
|
15720
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { flexGrow: 1 } }),
|
|
15721
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15722
|
+
import_material6.FormControlLabel,
|
|
15794
15723
|
{
|
|
15795
|
-
control: /* @__PURE__ */ (0,
|
|
15796
|
-
|
|
15724
|
+
control: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15725
|
+
import_material6.Button,
|
|
15797
15726
|
{
|
|
15798
15727
|
"data-testid": CLEAR_SPANS_TEST_ID,
|
|
15799
15728
|
onClick: onClearSpans,
|
|
15800
|
-
startIcon: /* @__PURE__ */ (0,
|
|
15729
|
+
startIcon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material3.DeleteForeverOutlined, {}),
|
|
15801
15730
|
children: "Clear Operations"
|
|
15802
15731
|
}
|
|
15803
15732
|
),
|
|
@@ -15807,8 +15736,8 @@ var SpansDataGrid = ({
|
|
|
15807
15736
|
}
|
|
15808
15737
|
)
|
|
15809
15738
|
] }) }),
|
|
15810
|
-
/* @__PURE__ */ (0,
|
|
15811
|
-
|
|
15739
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15740
|
+
import_material6.TableContainer,
|
|
15812
15741
|
{
|
|
15813
15742
|
onScroll: handleScroll,
|
|
15814
15743
|
ref: containerRef,
|
|
@@ -15820,8 +15749,8 @@ var SpansDataGrid = ({
|
|
|
15820
15749
|
right: 0,
|
|
15821
15750
|
top: 0
|
|
15822
15751
|
},
|
|
15823
|
-
children: /* @__PURE__ */ (0,
|
|
15824
|
-
|
|
15752
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
|
|
15753
|
+
import_material6.Table,
|
|
15825
15754
|
{
|
|
15826
15755
|
stickyHeader: true,
|
|
15827
15756
|
sx: {
|
|
@@ -15832,9 +15761,9 @@ var SpansDataGrid = ({
|
|
|
15832
15761
|
"th+th": { pl: "8px !important" }
|
|
15833
15762
|
},
|
|
15834
15763
|
children: [
|
|
15835
|
-
/* @__PURE__ */ (0,
|
|
15836
|
-
return /* @__PURE__ */ (0,
|
|
15837
|
-
|
|
15764
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
|
|
15765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
15766
|
+
import_material6.TableCell,
|
|
15838
15767
|
{
|
|
15839
15768
|
colSpan: header.colSpan,
|
|
15840
15769
|
sx: {
|
|
@@ -15848,34 +15777,34 @@ var SpansDataGrid = ({
|
|
|
15848
15777
|
header.id
|
|
15849
15778
|
)) }, headerGroup.id);
|
|
15850
15779
|
}) }),
|
|
15851
|
-
/* @__PURE__ */ (0,
|
|
15852
|
-
(spans === void 0 || clearingSpans) && /* @__PURE__ */ (0,
|
|
15853
|
-
!clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0,
|
|
15854
|
-
!clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0,
|
|
15855
|
-
hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0,
|
|
15856
|
-
hasRows && !hasMoreForward && /* @__PURE__ */ (0,
|
|
15857
|
-
hasRows && paddingTop > 0 && /* @__PURE__ */ (0,
|
|
15780
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.TableBody, { children: [
|
|
15781
|
+
(spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
|
|
15782
|
+
!clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
|
|
15783
|
+
!clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
|
|
15784
|
+
hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
|
|
15785
|
+
hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
|
|
15786
|
+
hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
|
|
15858
15787
|
hasRows && virtualItems.map((virtualItem) => {
|
|
15859
15788
|
const row = displayRows[virtualItem.index];
|
|
15860
15789
|
const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
|
|
15861
|
-
return /* @__PURE__ */ (0,
|
|
15790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
|
|
15862
15791
|
}),
|
|
15863
|
-
hasRows && paddingBottom > 0 && /* @__PURE__ */ (0,
|
|
15864
|
-
hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0,
|
|
15865
|
-
hasRows && !hasMoreBackward && /* @__PURE__ */ (0,
|
|
15792
|
+
hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
|
|
15793
|
+
hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
|
|
15794
|
+
hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
|
|
15866
15795
|
] }),
|
|
15867
|
-
!clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0,
|
|
15868
|
-
hasRows && !hasMoreBackward && /* @__PURE__ */ (0,
|
|
15869
|
-
hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0,
|
|
15870
|
-
hasRows && paddingTop > 0 && /* @__PURE__ */ (0,
|
|
15796
|
+
!clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
|
|
15797
|
+
hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
|
|
15798
|
+
hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
|
|
15799
|
+
hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
|
|
15871
15800
|
hasRows && virtualItems.map((virtualItem) => {
|
|
15872
15801
|
const row = displayRows[virtualItem.index];
|
|
15873
15802
|
const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
|
|
15874
|
-
return /* @__PURE__ */ (0,
|
|
15803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
|
|
15875
15804
|
}),
|
|
15876
|
-
hasRows && paddingBottom > 0 && /* @__PURE__ */ (0,
|
|
15877
|
-
hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0,
|
|
15878
|
-
hasRows && !hasMoreForward && /* @__PURE__ */ (0,
|
|
15805
|
+
hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
|
|
15806
|
+
hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
|
|
15807
|
+
hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
|
|
15879
15808
|
] })
|
|
15880
15809
|
] })
|
|
15881
15810
|
]
|
|
@@ -15887,13 +15816,13 @@ var SpansDataGrid = ({
|
|
|
15887
15816
|
};
|
|
15888
15817
|
|
|
15889
15818
|
// src/components/spans-list/spans-list.tsx
|
|
15890
|
-
var
|
|
15819
|
+
var import_jsx_runtime127 = require("react/jsx-runtime");
|
|
15891
15820
|
var SpansList = (props) => {
|
|
15892
|
-
return /* @__PURE__ */ (0,
|
|
15893
|
-
props.fetchError && /* @__PURE__ */ (0,
|
|
15894
|
-
|
|
15821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.Box, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
|
|
15822
|
+
props.fetchError && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
|
|
15823
|
+
import_material7.Alert,
|
|
15895
15824
|
{
|
|
15896
|
-
action: /* @__PURE__ */ (0,
|
|
15825
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Button, { onClick: props.onFetchForward, children: "Retry" }),
|
|
15897
15826
|
severity: "error",
|
|
15898
15827
|
children: [
|
|
15899
15828
|
"Unexpected error:",
|
|
@@ -15902,7 +15831,7 @@ var SpansList = (props) => {
|
|
|
15902
15831
|
]
|
|
15903
15832
|
}
|
|
15904
15833
|
),
|
|
15905
|
-
/* @__PURE__ */ (0,
|
|
15834
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
15906
15835
|
SpansDataGrid,
|
|
15907
15836
|
{
|
|
15908
15837
|
clearingSpans: props.clearingSpans,
|
|
@@ -15927,17 +15856,17 @@ var SpansList = (props) => {
|
|
|
15927
15856
|
|
|
15928
15857
|
// src/components/status-message/status-message.tsx
|
|
15929
15858
|
var import_icons_material4 = require("@mui/icons-material");
|
|
15930
|
-
var
|
|
15931
|
-
var
|
|
15932
|
-
var
|
|
15859
|
+
var import_material8 = require("@mui/material");
|
|
15860
|
+
var import_react38 = require("react");
|
|
15861
|
+
var import_jsx_runtime128 = require("react/jsx-runtime");
|
|
15933
15862
|
var StatusMessage = ({
|
|
15934
15863
|
localstackVersion,
|
|
15935
15864
|
onEnable,
|
|
15936
15865
|
onRetry,
|
|
15937
15866
|
phase
|
|
15938
15867
|
}) => {
|
|
15939
|
-
const [enabling, setEnabling] = (0,
|
|
15940
|
-
const [enableError, setEnableError] = (0,
|
|
15868
|
+
const [enabling, setEnabling] = (0, import_react38.useState)(false);
|
|
15869
|
+
const [enableError, setEnableError] = (0, import_react38.useState)();
|
|
15941
15870
|
const handleEnable = async () => {
|
|
15942
15871
|
if (!onEnable) return;
|
|
15943
15872
|
setEnabling(true);
|
|
@@ -15951,8 +15880,8 @@ var StatusMessage = ({
|
|
|
15951
15880
|
}
|
|
15952
15881
|
};
|
|
15953
15882
|
if (phase === "CHECKING_STATUS" || phase === "CONNECTING_WS") {
|
|
15954
|
-
return /* @__PURE__ */ (0,
|
|
15955
|
-
|
|
15883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15884
|
+
import_material8.Box,
|
|
15956
15885
|
{
|
|
15957
15886
|
sx: {
|
|
15958
15887
|
alignItems: "center",
|
|
@@ -15962,13 +15891,13 @@ var StatusMessage = ({
|
|
|
15962
15891
|
justifyContent: "center",
|
|
15963
15892
|
p: 4
|
|
15964
15893
|
},
|
|
15965
|
-
children: /* @__PURE__ */ (0,
|
|
15894
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.CircularProgress, { size: 32 })
|
|
15966
15895
|
}
|
|
15967
15896
|
);
|
|
15968
15897
|
}
|
|
15969
15898
|
if (phase === "INCOMPATIBLE") {
|
|
15970
|
-
return /* @__PURE__ */ (0,
|
|
15971
|
-
|
|
15899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15900
|
+
import_material8.Box,
|
|
15972
15901
|
{
|
|
15973
15902
|
sx: {
|
|
15974
15903
|
alignItems: "center",
|
|
@@ -15978,18 +15907,18 @@ var StatusMessage = ({
|
|
|
15978
15907
|
justifyContent: "center",
|
|
15979
15908
|
p: 4
|
|
15980
15909
|
},
|
|
15981
|
-
children: /* @__PURE__ */ (0,
|
|
15982
|
-
|
|
15910
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
|
|
15911
|
+
import_material8.Alert,
|
|
15983
15912
|
{
|
|
15984
|
-
icon: /* @__PURE__ */ (0,
|
|
15913
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material4.ErrorOutline, { fontSize: "large" }),
|
|
15985
15914
|
severity: "error",
|
|
15986
15915
|
sx: { maxWidth: 600, width: "100%" },
|
|
15987
15916
|
children: [
|
|
15988
|
-
/* @__PURE__ */ (0,
|
|
15989
|
-
/* @__PURE__ */ (0,
|
|
15990
|
-
/* @__PURE__ */ (0,
|
|
15991
|
-
/* @__PURE__ */ (0,
|
|
15992
|
-
|
|
15917
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
|
|
15918
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { sx: { mb: 2 }, variant: "body2", children: localstackVersion === void 0 ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. Please update LocalStack.` : `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` }),
|
|
15919
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: "Update LocalStack:" }) }),
|
|
15920
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15921
|
+
import_material8.Box,
|
|
15993
15922
|
{
|
|
15994
15923
|
component: "pre",
|
|
15995
15924
|
sx: {
|
|
@@ -16001,8 +15930,8 @@ var StatusMessage = ({
|
|
|
16001
15930
|
children: "localstack update docker-images"
|
|
16002
15931
|
}
|
|
16003
15932
|
),
|
|
16004
|
-
onRetry && /* @__PURE__ */ (0,
|
|
16005
|
-
|
|
15933
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { display: "flex", gap: 1, mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15934
|
+
import_material8.Button,
|
|
16006
15935
|
{
|
|
16007
15936
|
"aria-label": "Check App Inspector status again",
|
|
16008
15937
|
onClick: onRetry,
|
|
@@ -16017,8 +15946,8 @@ var StatusMessage = ({
|
|
|
16017
15946
|
);
|
|
16018
15947
|
}
|
|
16019
15948
|
if (phase === "UNREACHABLE") {
|
|
16020
|
-
return /* @__PURE__ */ (0,
|
|
16021
|
-
|
|
15949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15950
|
+
import_material8.Box,
|
|
16022
15951
|
{
|
|
16023
15952
|
sx: {
|
|
16024
15953
|
alignItems: "center",
|
|
@@ -16028,18 +15957,18 @@ var StatusMessage = ({
|
|
|
16028
15957
|
justifyContent: "center",
|
|
16029
15958
|
p: 4
|
|
16030
15959
|
},
|
|
16031
|
-
children: /* @__PURE__ */ (0,
|
|
16032
|
-
|
|
15960
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
|
|
15961
|
+
import_material8.Alert,
|
|
16033
15962
|
{
|
|
16034
|
-
icon: /* @__PURE__ */ (0,
|
|
15963
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material4.ErrorOutline, { fontSize: "large" }),
|
|
16035
15964
|
severity: "error",
|
|
16036
15965
|
sx: { maxWidth: 600, width: "100%" },
|
|
16037
15966
|
children: [
|
|
16038
|
-
/* @__PURE__ */ (0,
|
|
16039
|
-
/* @__PURE__ */ (0,
|
|
15967
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
|
|
15968
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material8.Typography, { sx: { mb: 2 }, variant: "body2", children: [
|
|
16040
15969
|
"Failed to connect to LocalStack. Ensure ",
|
|
16041
|
-
/* @__PURE__ */ (0,
|
|
16042
|
-
|
|
15970
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15971
|
+
import_material8.Link,
|
|
16043
15972
|
{
|
|
16044
15973
|
href: "https://docs.localstack.cloud/aws/getting-started/installation/",
|
|
16045
15974
|
rel: "noopener noreferrer",
|
|
@@ -16049,9 +15978,9 @@ var StatusMessage = ({
|
|
|
16049
15978
|
),
|
|
16050
15979
|
" is running and accessible."
|
|
16051
15980
|
] }),
|
|
16052
|
-
/* @__PURE__ */ (0,
|
|
16053
|
-
/* @__PURE__ */ (0,
|
|
16054
|
-
|
|
15981
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: "Start LocalStack:" }) }),
|
|
15982
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15983
|
+
import_material8.Box,
|
|
16055
15984
|
{
|
|
16056
15985
|
component: "pre",
|
|
16057
15986
|
sx: {
|
|
@@ -16063,8 +15992,8 @@ var StatusMessage = ({
|
|
|
16063
15992
|
children: "localstack start"
|
|
16064
15993
|
}
|
|
16065
15994
|
),
|
|
16066
|
-
onRetry && /* @__PURE__ */ (0,
|
|
16067
|
-
|
|
15995
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15996
|
+
import_material8.Button,
|
|
16068
15997
|
{
|
|
16069
15998
|
"aria-label": "Retry connection to LocalStack",
|
|
16070
15999
|
onClick: onRetry,
|
|
@@ -16079,8 +16008,8 @@ var StatusMessage = ({
|
|
|
16079
16008
|
);
|
|
16080
16009
|
}
|
|
16081
16010
|
if (phase === "DISABLED") {
|
|
16082
|
-
return /* @__PURE__ */ (0,
|
|
16083
|
-
|
|
16011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
16012
|
+
import_material8.Box,
|
|
16084
16013
|
{
|
|
16085
16014
|
sx: {
|
|
16086
16015
|
alignItems: "center",
|
|
@@ -16090,31 +16019,31 @@ var StatusMessage = ({
|
|
|
16090
16019
|
justifyContent: "center",
|
|
16091
16020
|
p: 4
|
|
16092
16021
|
},
|
|
16093
|
-
children: /* @__PURE__ */ (0,
|
|
16094
|
-
|
|
16022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
|
|
16023
|
+
import_material8.Alert,
|
|
16095
16024
|
{
|
|
16096
|
-
icon: /* @__PURE__ */ (0,
|
|
16025
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material4.InfoOutlined, { fontSize: "large" }),
|
|
16097
16026
|
severity: "warning",
|
|
16098
16027
|
sx: { maxWidth: 600, width: "100%" },
|
|
16099
16028
|
children: [
|
|
16100
|
-
/* @__PURE__ */ (0,
|
|
16101
|
-
/* @__PURE__ */ (0,
|
|
16102
|
-
/* @__PURE__ */ (0,
|
|
16103
|
-
|
|
16029
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
|
|
16030
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
|
|
16031
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Box, { sx: { display: "flex", gap: 1, mb: 2 }, children: onEnable && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
16032
|
+
import_material8.Button,
|
|
16104
16033
|
{
|
|
16105
16034
|
"aria-label": "Enable App Inspector Now",
|
|
16106
16035
|
disabled: enabling,
|
|
16107
16036
|
onClick: () => {
|
|
16108
16037
|
void handleEnable();
|
|
16109
16038
|
},
|
|
16110
|
-
startIcon: enabling ? /* @__PURE__ */ (0,
|
|
16039
|
+
startIcon: enabling ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.CircularProgress, { size: 16 }) : void 0,
|
|
16111
16040
|
variant: "contained",
|
|
16112
16041
|
children: "Enable App Inspector Now"
|
|
16113
16042
|
}
|
|
16114
16043
|
) }),
|
|
16115
|
-
/* @__PURE__ */ (0,
|
|
16116
|
-
/* @__PURE__ */ (0,
|
|
16117
|
-
|
|
16044
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
|
|
16045
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
16046
|
+
import_material8.Box,
|
|
16118
16047
|
{
|
|
16119
16048
|
component: "pre",
|
|
16120
16049
|
sx: {
|
|
@@ -16126,30 +16055,30 @@ var StatusMessage = ({
|
|
|
16126
16055
|
children: "LOCALSTACK_APP_INSPECTOR=1 localstack start"
|
|
16127
16056
|
}
|
|
16128
16057
|
),
|
|
16129
|
-
Boolean(enableError) && /* @__PURE__ */ (0,
|
|
16058
|
+
Boolean(enableError) && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material8.Typography, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
|
|
16130
16059
|
]
|
|
16131
16060
|
}
|
|
16132
16061
|
)
|
|
16133
16062
|
}
|
|
16134
16063
|
);
|
|
16135
16064
|
}
|
|
16136
|
-
return /* @__PURE__ */ (0,
|
|
16065
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_jsx_runtime128.Fragment, {});
|
|
16137
16066
|
};
|
|
16138
16067
|
|
|
16139
16068
|
// src/hooks/status-provider.tsx
|
|
16140
|
-
var
|
|
16069
|
+
var import_react40 = require("react");
|
|
16141
16070
|
|
|
16142
16071
|
// src/hooks/use-connection-state-machine.ts
|
|
16143
|
-
var
|
|
16072
|
+
var import_react39 = require("react");
|
|
16144
16073
|
var POLL_INTERVAL_MS = 5e3;
|
|
16145
16074
|
function useConnectionStateMachine() {
|
|
16146
16075
|
const api = useAppInspectorApi();
|
|
16147
|
-
const [phase, setPhase] = (0,
|
|
16148
|
-
const [checking, setChecking] = (0,
|
|
16149
|
-
const [status, setStatus] = (0,
|
|
16150
|
-
const [statusError, setStatusError] = (0,
|
|
16151
|
-
const abortControllerRef = (0,
|
|
16152
|
-
const dispatchStatus = (0,
|
|
16076
|
+
const [phase, setPhase] = (0, import_react39.useState)("CHECKING_STATUS");
|
|
16077
|
+
const [checking, setChecking] = (0, import_react39.useState)(true);
|
|
16078
|
+
const [status, setStatus] = (0, import_react39.useState)();
|
|
16079
|
+
const [statusError, setStatusError] = (0, import_react39.useState)();
|
|
16080
|
+
const abortControllerRef = (0, import_react39.useRef)(null);
|
|
16081
|
+
const dispatchStatus = (0, import_react39.useCallback)((result, error) => {
|
|
16153
16082
|
if (result === void 0) {
|
|
16154
16083
|
setStatus(void 0);
|
|
16155
16084
|
setStatusError(error);
|
|
@@ -16164,7 +16093,7 @@ function useConnectionStateMachine() {
|
|
|
16164
16093
|
}
|
|
16165
16094
|
setPhase(result.status === "ENABLED" ? "CONNECTING_WS" : "DISABLED");
|
|
16166
16095
|
}, []);
|
|
16167
|
-
const runCheck = (0,
|
|
16096
|
+
const runCheck = (0, import_react39.useCallback)(async () => {
|
|
16168
16097
|
if (abortControllerRef.current !== null) {
|
|
16169
16098
|
abortControllerRef.current.abort();
|
|
16170
16099
|
}
|
|
@@ -16186,10 +16115,10 @@ function useConnectionStateMachine() {
|
|
|
16186
16115
|
}
|
|
16187
16116
|
}
|
|
16188
16117
|
}, [api, dispatchStatus]);
|
|
16189
|
-
(0,
|
|
16118
|
+
(0, import_react39.useEffect)(() => {
|
|
16190
16119
|
void runCheck();
|
|
16191
16120
|
}, [runCheck]);
|
|
16192
|
-
(0,
|
|
16121
|
+
(0, import_react39.useEffect)(() => {
|
|
16193
16122
|
if (phase !== "UNREACHABLE" && phase !== "DISABLED") return;
|
|
16194
16123
|
const intervalId = globalThis.setInterval(() => {
|
|
16195
16124
|
void runCheck();
|
|
@@ -16198,13 +16127,13 @@ function useConnectionStateMachine() {
|
|
|
16198
16127
|
globalThis.clearInterval(intervalId);
|
|
16199
16128
|
};
|
|
16200
16129
|
}, [phase, runCheck]);
|
|
16201
|
-
const checkStatus = (0,
|
|
16130
|
+
const checkStatus = (0, import_react39.useCallback)(() => {
|
|
16202
16131
|
void runCheck();
|
|
16203
16132
|
}, [runCheck]);
|
|
16204
|
-
const onWsOpen = (0,
|
|
16133
|
+
const onWsOpen = (0, import_react39.useCallback)(() => {
|
|
16205
16134
|
setPhase("LIVE");
|
|
16206
16135
|
}, []);
|
|
16207
|
-
const onWsClose = (0,
|
|
16136
|
+
const onWsClose = (0, import_react39.useCallback)(() => {
|
|
16208
16137
|
setPhase("CHECKING_STATUS");
|
|
16209
16138
|
void runCheck();
|
|
16210
16139
|
}, [runCheck]);
|
|
@@ -16222,14 +16151,14 @@ function useConnectionStateMachine() {
|
|
|
16222
16151
|
}
|
|
16223
16152
|
|
|
16224
16153
|
// src/hooks/status-provider.tsx
|
|
16225
|
-
var
|
|
16226
|
-
var AppInspectorStatusContext = (0,
|
|
16154
|
+
var import_jsx_runtime129 = require("react/jsx-runtime");
|
|
16155
|
+
var AppInspectorStatusContext = (0, import_react40.createContext)(void 0);
|
|
16227
16156
|
var StatusProvider = ({ children }) => {
|
|
16228
16157
|
const value = useConnectionStateMachine();
|
|
16229
|
-
return /* @__PURE__ */ (0,
|
|
16158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(AppInspectorStatusContext.Provider, { value, children });
|
|
16230
16159
|
};
|
|
16231
16160
|
var useAppInspectorStatus = () => {
|
|
16232
|
-
const value = (0,
|
|
16161
|
+
const value = (0, import_react40.useContext)(AppInspectorStatusContext);
|
|
16233
16162
|
if (!value) {
|
|
16234
16163
|
throw new Error("@localstack-studio/ui: useAppInspectorStatus must be used within a <StatusProvider> (rendered internally by <AppInspectorContextProvider>)");
|
|
16235
16164
|
}
|
|
@@ -16237,9 +16166,9 @@ var useAppInspectorStatus = () => {
|
|
|
16237
16166
|
};
|
|
16238
16167
|
|
|
16239
16168
|
// src/hooks/use-local-storage.tsx
|
|
16240
|
-
var
|
|
16169
|
+
var import_react41 = require("react");
|
|
16241
16170
|
function useLocalStorage(key, initialValue) {
|
|
16242
|
-
const [storedValue, setStoredValue] = (0,
|
|
16171
|
+
const [storedValue, setStoredValue] = (0, import_react41.useState)(() => {
|
|
16243
16172
|
try {
|
|
16244
16173
|
const item = globalThis.localStorage.getItem(key);
|
|
16245
16174
|
return item ? JSON.parse(item) : initialValue;
|
|
@@ -16248,7 +16177,7 @@ function useLocalStorage(key, initialValue) {
|
|
|
16248
16177
|
return initialValue;
|
|
16249
16178
|
}
|
|
16250
16179
|
});
|
|
16251
|
-
const setValue = (0,
|
|
16180
|
+
const setValue = (0, import_react41.useCallback)((value) => {
|
|
16252
16181
|
try {
|
|
16253
16182
|
setStoredValue((previousState) => {
|
|
16254
16183
|
const next = typeof value === "function" ? value(previousState) : value;
|
|
@@ -16263,7 +16192,7 @@ function useLocalStorage(key, initialValue) {
|
|
|
16263
16192
|
console.error(`Error setting localStorage key "${key}":`, error);
|
|
16264
16193
|
}
|
|
16265
16194
|
}, [key]);
|
|
16266
|
-
(0,
|
|
16195
|
+
(0, import_react41.useEffect)(() => {
|
|
16267
16196
|
const handleStorageChange = (event) => {
|
|
16268
16197
|
if (event.key === key && event.newValue !== null) {
|
|
16269
16198
|
try {
|
|
@@ -16282,7 +16211,7 @@ function useLocalStorage(key, initialValue) {
|
|
|
16282
16211
|
}
|
|
16283
16212
|
|
|
16284
16213
|
// src/hooks/use-spans.ts
|
|
16285
|
-
var
|
|
16214
|
+
var import_react46 = require("react");
|
|
16286
16215
|
|
|
16287
16216
|
// src/utils/pagination-buffer.ts
|
|
16288
16217
|
var insertSorted = (array, item, compareFunction, hint = "back") => {
|
|
@@ -16463,7 +16392,7 @@ var createPaginationBuffer = (options) => {
|
|
|
16463
16392
|
};
|
|
16464
16393
|
|
|
16465
16394
|
// src/hooks/use-spans-ws.tsx
|
|
16466
|
-
var
|
|
16395
|
+
var import_react45 = require("react");
|
|
16467
16396
|
|
|
16468
16397
|
// src/config.ts
|
|
16469
16398
|
var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
|
|
@@ -16492,8 +16421,8 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
|
|
|
16492
16421
|
var LOCALSTACK_INFO_PATH = "/_localstack/info";
|
|
16493
16422
|
|
|
16494
16423
|
// src/context.tsx
|
|
16424
|
+
var import_react43 = require("react");
|
|
16495
16425
|
var import_react44 = require("react");
|
|
16496
|
-
var import_react45 = require("react");
|
|
16497
16426
|
|
|
16498
16427
|
// src/api/client.ts
|
|
16499
16428
|
var import_semver2 = __toESM(require_semver2(), 1);
|
|
@@ -16742,7 +16671,7 @@ var createApiClient = ({ localstackEndpoint }) => {
|
|
|
16742
16671
|
};
|
|
16743
16672
|
|
|
16744
16673
|
// src/hooks/use-appinspector-open-analytics.ts
|
|
16745
|
-
var
|
|
16674
|
+
var import_react42 = require("react");
|
|
16746
16675
|
|
|
16747
16676
|
// node_modules/.pnpm/ua-parser-js@2.0.9/node_modules/ua-parser-js/src/main/ua-parser.mjs
|
|
16748
16677
|
var LIBVERSION = "2.0.9";
|
|
@@ -18624,8 +18553,8 @@ var useAppInspectorOpenAnalytics = () => {
|
|
|
18624
18553
|
const api = useAppInspectorApi();
|
|
18625
18554
|
const { deploymentContainer } = useAppInspector();
|
|
18626
18555
|
const { status, statusError } = useAppInspectorStatus();
|
|
18627
|
-
const firedRef = (0,
|
|
18628
|
-
(0,
|
|
18556
|
+
const firedRef = (0, import_react42.useRef)(false);
|
|
18557
|
+
(0, import_react42.useEffect)(() => {
|
|
18629
18558
|
if (firedRef.current) {
|
|
18630
18559
|
return;
|
|
18631
18560
|
}
|
|
@@ -18645,10 +18574,10 @@ var useAppInspectorOpenAnalytics = () => {
|
|
|
18645
18574
|
};
|
|
18646
18575
|
|
|
18647
18576
|
// src/context.tsx
|
|
18648
|
-
var
|
|
18649
|
-
var AppInspectorContext = (0,
|
|
18577
|
+
var import_jsx_runtime130 = require("react/jsx-runtime");
|
|
18578
|
+
var AppInspectorContext = (0, import_react43.createContext)(void 0);
|
|
18650
18579
|
var useAppInspector = () => {
|
|
18651
|
-
const context = (0,
|
|
18580
|
+
const context = (0, import_react43.useContext)(AppInspectorContext);
|
|
18652
18581
|
if (!context) {
|
|
18653
18582
|
throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
|
|
18654
18583
|
}
|
|
@@ -18656,14 +18585,14 @@ var useAppInspector = () => {
|
|
|
18656
18585
|
};
|
|
18657
18586
|
var AppInspectorAnalyticsBoundary = ({ children }) => {
|
|
18658
18587
|
useAppInspectorOpenAnalytics();
|
|
18659
|
-
return /* @__PURE__ */ (0,
|
|
18588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, { children });
|
|
18660
18589
|
};
|
|
18661
18590
|
var AppInspectorContextProvider = (props) => {
|
|
18662
|
-
const api = (0,
|
|
18591
|
+
const api = (0, import_react44.useMemo)(
|
|
18663
18592
|
() => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
|
|
18664
18593
|
[props.localstackEndpoint]
|
|
18665
18594
|
);
|
|
18666
|
-
const resolveLink = (0,
|
|
18595
|
+
const resolveLink = (0, import_react44.useCallback)(
|
|
18667
18596
|
(options) => {
|
|
18668
18597
|
if (options.to === "settings") {
|
|
18669
18598
|
return `${props.routePrefix}/settings`;
|
|
@@ -18675,11 +18604,11 @@ var AppInspectorContextProvider = (props) => {
|
|
|
18675
18604
|
},
|
|
18676
18605
|
[props.routePrefix]
|
|
18677
18606
|
);
|
|
18678
|
-
const deploymentContainer = (0,
|
|
18607
|
+
const deploymentContainer = (0, import_react44.useMemo)(
|
|
18679
18608
|
() => props.deploymentContainer ?? { source: "web" },
|
|
18680
18609
|
[props.deploymentContainer]
|
|
18681
18610
|
);
|
|
18682
|
-
const contextValue = (0,
|
|
18611
|
+
const contextValue = (0, import_react44.useMemo)(
|
|
18683
18612
|
() => ({
|
|
18684
18613
|
deploymentContainer,
|
|
18685
18614
|
headerHeight: props.headerHeight ?? 0,
|
|
@@ -18689,28 +18618,28 @@ var AppInspectorContextProvider = (props) => {
|
|
|
18689
18618
|
}),
|
|
18690
18619
|
[deploymentContainer, props.headerHeight, props.linkComponent, props.localstackEndpoint, resolveLink]
|
|
18691
18620
|
);
|
|
18692
|
-
return /* @__PURE__ */ (0,
|
|
18621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(StatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
|
|
18693
18622
|
};
|
|
18694
18623
|
|
|
18695
18624
|
// src/hooks/use-spans-ws.tsx
|
|
18696
18625
|
function useSpansWebSocket(options) {
|
|
18697
18626
|
const { enabled, onClose, onMessage, onOpen } = options;
|
|
18698
|
-
const onMessageRef = (0,
|
|
18699
|
-
const onOpenRef = (0,
|
|
18700
|
-
const onCloseRef = (0,
|
|
18701
|
-
(0,
|
|
18627
|
+
const onMessageRef = (0, import_react45.useRef)(onMessage);
|
|
18628
|
+
const onOpenRef = (0, import_react45.useRef)(onOpen);
|
|
18629
|
+
const onCloseRef = (0, import_react45.useRef)(onClose);
|
|
18630
|
+
(0, import_react45.useEffect)(() => {
|
|
18702
18631
|
onMessageRef.current = onMessage;
|
|
18703
18632
|
}, [onMessage]);
|
|
18704
|
-
(0,
|
|
18633
|
+
(0, import_react45.useEffect)(() => {
|
|
18705
18634
|
onOpenRef.current = onOpen;
|
|
18706
18635
|
}, [onOpen]);
|
|
18707
|
-
(0,
|
|
18636
|
+
(0, import_react45.useEffect)(() => {
|
|
18708
18637
|
onCloseRef.current = onClose;
|
|
18709
18638
|
}, [onClose]);
|
|
18710
|
-
const [connected, setConnected] = (0,
|
|
18711
|
-
const wsRef = (0,
|
|
18639
|
+
const [connected, setConnected] = (0, import_react45.useState)(false);
|
|
18640
|
+
const wsRef = (0, import_react45.useRef)(void 0);
|
|
18712
18641
|
const { localstackEndpoint } = useAppInspector();
|
|
18713
|
-
const connect = (0,
|
|
18642
|
+
const connect = (0, import_react45.useCallback)(() => {
|
|
18714
18643
|
if (wsRef.current !== void 0) return;
|
|
18715
18644
|
const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
|
|
18716
18645
|
url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
|
|
@@ -18739,7 +18668,7 @@ function useSpansWebSocket(options) {
|
|
|
18739
18668
|
}
|
|
18740
18669
|
});
|
|
18741
18670
|
}, [localstackEndpoint]);
|
|
18742
|
-
(0,
|
|
18671
|
+
(0, import_react45.useEffect)(() => {
|
|
18743
18672
|
if (!enabled) {
|
|
18744
18673
|
if (wsRef.current !== void 0) {
|
|
18745
18674
|
wsRef.current.close();
|
|
@@ -18768,11 +18697,11 @@ var PAGE_SIZE = 100;
|
|
|
18768
18697
|
var useSpans = () => {
|
|
18769
18698
|
const api = useAppInspectorApi();
|
|
18770
18699
|
const { onWsClose, onWsOpen, wsEnabled } = useAppInspectorStatus();
|
|
18771
|
-
const [spans, setSpans] = (0,
|
|
18772
|
-
const [fetchError, setFetchError] = (0,
|
|
18773
|
-
const [fetchingForward, setFetchingForward] = (0,
|
|
18774
|
-
const [fetchingBackward, setFetchingBackward] = (0,
|
|
18775
|
-
const paginationBufferRef = (0,
|
|
18700
|
+
const [spans, setSpans] = (0, import_react46.useState)();
|
|
18701
|
+
const [fetchError, setFetchError] = (0, import_react46.useState)();
|
|
18702
|
+
const [fetchingForward, setFetchingForward] = (0, import_react46.useState)(false);
|
|
18703
|
+
const [fetchingBackward, setFetchingBackward] = (0, import_react46.useState)(false);
|
|
18704
|
+
const paginationBufferRef = (0, import_react46.useRef)(createPaginationBuffer({
|
|
18776
18705
|
async fetchPage(token) {
|
|
18777
18706
|
const response = await api.getSpans({
|
|
18778
18707
|
limit: PAGE_SIZE,
|
|
@@ -18811,24 +18740,24 @@ var useSpans = () => {
|
|
|
18811
18740
|
return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
|
|
18812
18741
|
}
|
|
18813
18742
|
}));
|
|
18814
|
-
const [totalCount, setTotalCount] = (0,
|
|
18815
|
-
const [licenseLimit, setLicenseLimit] = (0,
|
|
18816
|
-
const [systemLimit, setSystemLimit] = (0,
|
|
18817
|
-
const [errorCount, setErrorCount] = (0,
|
|
18818
|
-
const [warningCount, setWarningCount] = (0,
|
|
18819
|
-
const [hasMoreBackward, setHasMoreBackward] = (0,
|
|
18820
|
-
const [hasMoreForward, setHasMoreForward] = (0,
|
|
18821
|
-
const fetchForward = (0,
|
|
18743
|
+
const [totalCount, setTotalCount] = (0, import_react46.useState)();
|
|
18744
|
+
const [licenseLimit, setLicenseLimit] = (0, import_react46.useState)();
|
|
18745
|
+
const [systemLimit, setSystemLimit] = (0, import_react46.useState)();
|
|
18746
|
+
const [errorCount, setErrorCount] = (0, import_react46.useState)();
|
|
18747
|
+
const [warningCount, setWarningCount] = (0, import_react46.useState)();
|
|
18748
|
+
const [hasMoreBackward, setHasMoreBackward] = (0, import_react46.useState)();
|
|
18749
|
+
const [hasMoreForward, setHasMoreForward] = (0, import_react46.useState)();
|
|
18750
|
+
const fetchForward = (0, import_react46.useCallback)(() => {
|
|
18822
18751
|
void paginationBufferRef.current.fetchForward();
|
|
18823
18752
|
}, []);
|
|
18824
|
-
const fetchBackward = (0,
|
|
18753
|
+
const fetchBackward = (0, import_react46.useCallback)(() => {
|
|
18825
18754
|
void paginationBufferRef.current.fetchBackward();
|
|
18826
18755
|
}, []);
|
|
18827
|
-
(0,
|
|
18756
|
+
(0, import_react46.useEffect)(() => {
|
|
18828
18757
|
fetchForward();
|
|
18829
18758
|
}, [fetchForward]);
|
|
18830
|
-
const [clearingSpans, setClearingSpans] = (0,
|
|
18831
|
-
const clearSpans = (0,
|
|
18759
|
+
const [clearingSpans, setClearingSpans] = (0, import_react46.useState)(false);
|
|
18760
|
+
const clearSpans = (0, import_react46.useCallback)(async () => {
|
|
18832
18761
|
if (clearingSpans) {
|
|
18833
18762
|
return;
|
|
18834
18763
|
}
|
|
@@ -18845,12 +18774,12 @@ var useSpans = () => {
|
|
|
18845
18774
|
setClearingSpans(false);
|
|
18846
18775
|
}
|
|
18847
18776
|
}, [clearingSpans, api]);
|
|
18848
|
-
(0,
|
|
18777
|
+
(0, import_react46.useEffect)(() => {
|
|
18849
18778
|
if (hasMoreForward === true && !fetchingForward) {
|
|
18850
18779
|
void paginationBufferRef.current.fetchForward();
|
|
18851
18780
|
}
|
|
18852
18781
|
}, [hasMoreForward, fetchingForward]);
|
|
18853
|
-
(0,
|
|
18782
|
+
(0, import_react46.useEffect)(() => {
|
|
18854
18783
|
if (hasMoreBackward === true && !fetchingBackward && !fetchingForward) {
|
|
18855
18784
|
void paginationBufferRef.current.fetchBackward();
|
|
18856
18785
|
}
|
|
@@ -18871,7 +18800,7 @@ var useSpans = () => {
|
|
|
18871
18800
|
fetchForward();
|
|
18872
18801
|
}
|
|
18873
18802
|
});
|
|
18874
|
-
const clearFetchError = (0,
|
|
18803
|
+
const clearFetchError = (0, import_react46.useCallback)(() => {
|
|
18875
18804
|
setFetchError(void 0);
|
|
18876
18805
|
}, []);
|
|
18877
18806
|
return {
|
|
@@ -18896,15 +18825,15 @@ var useSpans = () => {
|
|
|
18896
18825
|
|
|
18897
18826
|
// src/pages/trace-graph-page.tsx
|
|
18898
18827
|
var import_icons_material13 = require("@mui/icons-material");
|
|
18899
|
-
var
|
|
18828
|
+
var import_material22 = require("@mui/material");
|
|
18900
18829
|
var import_styles = require("@mui/material/styles");
|
|
18901
|
-
var
|
|
18902
|
-
var
|
|
18830
|
+
var import_react61 = require("@xyflow/react");
|
|
18831
|
+
var import_react62 = require("react");
|
|
18903
18832
|
|
|
18904
18833
|
// src/components/event-details/event-details.tsx
|
|
18905
18834
|
var import_icons_material10 = require("@mui/icons-material");
|
|
18906
|
-
var
|
|
18907
|
-
var
|
|
18835
|
+
var import_material18 = require("@mui/material");
|
|
18836
|
+
var import_react54 = require("react");
|
|
18908
18837
|
|
|
18909
18838
|
// src/utils/event-utils.ts
|
|
18910
18839
|
var iamEventParser = (eventName, attributes) => {
|
|
@@ -19016,12 +18945,12 @@ var getEventGroupsByType = (events) => {
|
|
|
19016
18945
|
|
|
19017
18946
|
// src/components/event-details/copy-button.tsx
|
|
19018
18947
|
var import_icons_material5 = require("@mui/icons-material");
|
|
19019
|
-
var
|
|
19020
|
-
var
|
|
19021
|
-
var
|
|
18948
|
+
var import_material9 = require("@mui/material");
|
|
18949
|
+
var import_react47 = require("react");
|
|
18950
|
+
var import_jsx_runtime131 = require("react/jsx-runtime");
|
|
19022
18951
|
var CopyButton = ({ value }) => {
|
|
19023
|
-
const [copied, setCopied] = (0,
|
|
19024
|
-
const handleCopy = (0,
|
|
18952
|
+
const [copied, setCopied] = (0, import_react47.useState)(false);
|
|
18953
|
+
const handleCopy = (0, import_react47.useCallback)(() => {
|
|
19025
18954
|
const text2 = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
|
|
19026
18955
|
void navigator.clipboard.writeText(text2).then(() => {
|
|
19027
18956
|
setCopied(true);
|
|
@@ -19030,83 +18959,83 @@ var CopyButton = ({ value }) => {
|
|
|
19030
18959
|
}, 1500);
|
|
19031
18960
|
});
|
|
19032
18961
|
}, [value]);
|
|
19033
|
-
return /* @__PURE__ */ (0,
|
|
19034
|
-
|
|
18962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material9.Tooltip, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
18963
|
+
import_material9.IconButton,
|
|
19035
18964
|
{
|
|
19036
18965
|
className: "copy-btn",
|
|
19037
18966
|
onClick: handleCopy,
|
|
19038
18967
|
size: "small",
|
|
19039
18968
|
sx: { ml: 0.5, opacity: copied ? 1 : 0, p: 0.25, transition: "opacity 0.15s" },
|
|
19040
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
18969
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material5.Check, { sx: { fontSize: 14 } }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material5.ContentCopy, { sx: { fontSize: 14 } })
|
|
19041
18970
|
}
|
|
19042
18971
|
) });
|
|
19043
18972
|
};
|
|
19044
18973
|
|
|
19045
18974
|
// src/components/event-details/event-detail.tsx
|
|
19046
18975
|
var import_icons_material8 = require("@mui/icons-material");
|
|
19047
|
-
var
|
|
19048
|
-
var
|
|
18976
|
+
var import_material15 = require("@mui/material");
|
|
18977
|
+
var import_react51 = require("react");
|
|
19049
18978
|
|
|
19050
18979
|
// src/components/status-icon.tsx
|
|
19051
18980
|
var import_icons_material6 = require("@mui/icons-material");
|
|
19052
|
-
var
|
|
19053
|
-
var
|
|
18981
|
+
var import_material10 = require("@mui/material");
|
|
18982
|
+
var import_jsx_runtime132 = require("react/jsx-runtime");
|
|
19054
18983
|
var StatusIcon2 = ({ errorLevel }) => {
|
|
19055
18984
|
switch (errorLevel) {
|
|
19056
18985
|
case EventLevel.LevelError: {
|
|
19057
|
-
return /* @__PURE__ */ (0,
|
|
18986
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material6.Cancel, { sx: { color: "red" } });
|
|
19058
18987
|
}
|
|
19059
18988
|
case EventLevel.LevelInfo: {
|
|
19060
|
-
return /* @__PURE__ */ (0,
|
|
18989
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material6.Info, { sx: { color: "gray" } });
|
|
19061
18990
|
}
|
|
19062
18991
|
case EventLevel.LevelPermission: {
|
|
19063
|
-
return /* @__PURE__ */ (0,
|
|
18992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material6.RemoveCircle, { sx: { color: "blue" } });
|
|
19064
18993
|
}
|
|
19065
18994
|
case EventLevel.LevelWarning: {
|
|
19066
|
-
return /* @__PURE__ */ (0,
|
|
18995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material6.Error, { sx: { color: "orange" } });
|
|
19067
18996
|
}
|
|
19068
18997
|
default: {
|
|
19069
|
-
return /* @__PURE__ */ (0,
|
|
18998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material6.CheckCircle, { sx: { color: "lightgray" } });
|
|
19070
18999
|
}
|
|
19071
19000
|
}
|
|
19072
19001
|
};
|
|
19073
19002
|
|
|
19074
19003
|
// src/components/event-details/iam-event-detail.tsx
|
|
19075
19004
|
var import_icons_material7 = require("@mui/icons-material");
|
|
19076
|
-
var
|
|
19077
|
-
var
|
|
19078
|
-
var DetailRow = ({ content, label }) => /* @__PURE__ */ (0,
|
|
19079
|
-
/* @__PURE__ */ (0,
|
|
19080
|
-
/* @__PURE__ */ (0,
|
|
19005
|
+
var import_material11 = require("@mui/material");
|
|
19006
|
+
var import_jsx_runtime133 = require("react/jsx-runtime");
|
|
19007
|
+
var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
|
|
19008
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
|
|
19009
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
|
|
19081
19010
|
] });
|
|
19082
19011
|
var PermissionIcon = ({ status }) => {
|
|
19083
19012
|
switch (status) {
|
|
19084
19013
|
case "explicitly_allowed":
|
|
19085
19014
|
case "implicitly_allowed": {
|
|
19086
|
-
return /* @__PURE__ */ (0,
|
|
19015
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material7.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
|
|
19087
19016
|
}
|
|
19088
19017
|
case "explicitly_denied": {
|
|
19089
|
-
return /* @__PURE__ */ (0,
|
|
19018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material7.Error, { sx: { color: "error.main", fontSize: "1rem" } });
|
|
19090
19019
|
}
|
|
19091
19020
|
case "implicitly_denied": {
|
|
19092
|
-
return /* @__PURE__ */ (0,
|
|
19021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material7.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
|
|
19093
19022
|
}
|
|
19094
19023
|
}
|
|
19095
19024
|
};
|
|
19096
19025
|
var IAMEventDetail = ({ event }) => {
|
|
19097
19026
|
const payloadString = event.attributes?.payload;
|
|
19098
19027
|
if (!payloadString) {
|
|
19099
|
-
return /* @__PURE__ */ (0,
|
|
19028
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
|
|
19100
19029
|
}
|
|
19101
19030
|
const parsedIAM = parseIAMEvent(payloadString);
|
|
19102
19031
|
if (!parsedIAM) {
|
|
19103
|
-
return /* @__PURE__ */ (0,
|
|
19032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
|
|
19104
19033
|
}
|
|
19105
|
-
return /* @__PURE__ */ (0,
|
|
19106
|
-
/* @__PURE__ */ (0,
|
|
19107
|
-
|
|
19034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { children: [
|
|
19035
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { mb: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
19036
|
+
import_material11.Chip,
|
|
19108
19037
|
{
|
|
19109
|
-
icon: /* @__PURE__ */ (0,
|
|
19038
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(PermissionIcon, { status: parsedIAM.permission }),
|
|
19110
19039
|
label: formatPermissionStatus(parsedIAM.permission),
|
|
19111
19040
|
size: "small",
|
|
19112
19041
|
sx: {
|
|
@@ -19116,36 +19045,36 @@ var IAMEventDetail = ({ event }) => {
|
|
|
19116
19045
|
variant: "outlined"
|
|
19117
19046
|
}
|
|
19118
19047
|
) }),
|
|
19119
|
-
/* @__PURE__ */ (0,
|
|
19120
|
-
/* @__PURE__ */ (0,
|
|
19121
|
-
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0,
|
|
19048
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
|
|
19049
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
|
|
19050
|
+
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
19122
19051
|
DetailRow,
|
|
19123
19052
|
{
|
|
19124
|
-
content: /* @__PURE__ */ (0,
|
|
19053
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
|
|
19125
19054
|
label: "Actions"
|
|
19126
19055
|
}
|
|
19127
19056
|
),
|
|
19128
|
-
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0,
|
|
19057
|
+
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
19129
19058
|
DetailRow,
|
|
19130
19059
|
{
|
|
19131
|
-
content: /* @__PURE__ */ (0,
|
|
19060
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
|
|
19132
19061
|
label: "Resources"
|
|
19133
19062
|
}
|
|
19134
19063
|
),
|
|
19135
|
-
(parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ (0,
|
|
19136
|
-
/* @__PURE__ */ (0,
|
|
19137
|
-
/* @__PURE__ */ (0,
|
|
19138
|
-
parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0,
|
|
19139
|
-
/* @__PURE__ */ (0,
|
|
19140
|
-
/* @__PURE__ */ (0,
|
|
19064
|
+
(parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { mt: 1.5 }, children: [
|
|
19065
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
|
|
19066
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
|
|
19067
|
+
parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
|
|
19068
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
|
|
19069
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
|
|
19141
19070
|
] }),
|
|
19142
|
-
parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0,
|
|
19143
|
-
/* @__PURE__ */ (0,
|
|
19144
|
-
/* @__PURE__ */ (0,
|
|
19071
|
+
parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
|
|
19072
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
|
|
19073
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
|
|
19145
19074
|
] }),
|
|
19146
|
-
parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0,
|
|
19147
|
-
/* @__PURE__ */ (0,
|
|
19148
|
-
/* @__PURE__ */ (0,
|
|
19075
|
+
parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
|
|
19076
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
|
|
19077
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
|
|
19149
19078
|
] })
|
|
19150
19079
|
] })
|
|
19151
19080
|
] })
|
|
@@ -19153,16 +19082,16 @@ var IAMEventDetail = ({ event }) => {
|
|
|
19153
19082
|
};
|
|
19154
19083
|
|
|
19155
19084
|
// src/components/event-details/iam-permission-detail.tsx
|
|
19156
|
-
var
|
|
19157
|
-
var
|
|
19158
|
-
var
|
|
19085
|
+
var import_material12 = require("@mui/material");
|
|
19086
|
+
var import_react48 = require("react");
|
|
19087
|
+
var import_jsx_runtime134 = require("react/jsx-runtime");
|
|
19159
19088
|
var getChipColor = (isAllowed, spanStatusCode) => {
|
|
19160
19089
|
if (isAllowed) return "success.main";
|
|
19161
19090
|
if (spanStatusCode === 2) return "error.main";
|
|
19162
19091
|
return "warning.main";
|
|
19163
19092
|
};
|
|
19164
19093
|
var IAMPermissionItem = ({ event, spanStatusCode }) => {
|
|
19165
|
-
const parsedData = (0,
|
|
19094
|
+
const parsedData = (0, import_react48.useMemo)(() => {
|
|
19166
19095
|
const payloadString = event.attributes?.payload;
|
|
19167
19096
|
if (!payloadString) return;
|
|
19168
19097
|
const parsedIAM2 = parseIAMEvent(payloadString);
|
|
@@ -19175,42 +19104,42 @@ var IAMPermissionItem = ({ event, spanStatusCode }) => {
|
|
|
19175
19104
|
const { parsedIAM } = parsedData;
|
|
19176
19105
|
const isAllowed = parsedIAM.permission === "explicitly_allowed" || parsedIAM.permission === "implicitly_allowed";
|
|
19177
19106
|
const chipColors = { backgroundColor: getChipColor(isAllowed, spanStatusCode), color: "white" };
|
|
19178
|
-
return /* @__PURE__ */ (0,
|
|
19179
|
-
/* @__PURE__ */ (0,
|
|
19180
|
-
/* @__PURE__ */ (0,
|
|
19181
|
-
/* @__PURE__ */ (0,
|
|
19182
|
-
/* @__PURE__ */ (0,
|
|
19183
|
-
/* @__PURE__ */ (0,
|
|
19184
|
-
/* @__PURE__ */ (0,
|
|
19185
|
-
/* @__PURE__ */ (0,
|
|
19107
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { mb: 0.5 }, children: [
|
|
19108
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Chip, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
|
|
19109
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Stack, { spacing: 1, children: [
|
|
19110
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
|
|
19111
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
|
|
19112
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
19113
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
|
|
19114
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CopyButton, { value: parsedIAM.principal })
|
|
19186
19115
|
] })
|
|
19187
19116
|
] }),
|
|
19188
|
-
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0,
|
|
19189
|
-
/* @__PURE__ */ (0,
|
|
19190
|
-
parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0,
|
|
19191
|
-
/* @__PURE__ */ (0,
|
|
19192
|
-
/* @__PURE__ */ (0,
|
|
19117
|
+
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
|
|
19118
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
|
|
19119
|
+
parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
19120
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { display: "block" }, variant: "body2", children: action }),
|
|
19121
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CopyButton, { value: action })
|
|
19193
19122
|
] }, action))
|
|
19194
19123
|
] }),
|
|
19195
|
-
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0,
|
|
19196
|
-
/* @__PURE__ */ (0,
|
|
19197
|
-
parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0,
|
|
19198
|
-
/* @__PURE__ */ (0,
|
|
19199
|
-
/* @__PURE__ */ (0,
|
|
19124
|
+
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
|
|
19125
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
|
|
19126
|
+
parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
19127
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
|
|
19128
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CopyButton, { value: resource })
|
|
19200
19129
|
] }, resource))
|
|
19201
19130
|
] })
|
|
19202
19131
|
] })
|
|
19203
19132
|
] });
|
|
19204
19133
|
};
|
|
19205
|
-
var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ (0,
|
|
19134
|
+
var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
|
|
19206
19135
|
|
|
19207
19136
|
// src/components/event-details/payload-viewer.tsx
|
|
19208
|
-
var
|
|
19137
|
+
var import_material14 = require("@mui/material");
|
|
19209
19138
|
|
|
19210
19139
|
// node_modules/.pnpm/@textea+json-viewer@3.5.0_@emotion+react@11.14.0_@types+react@17.0.91_react@17.0.2__@em_040507e953752247cb848fd3f764690c/node_modules/@textea/json-viewer/dist/index.mjs
|
|
19211
|
-
var
|
|
19212
|
-
var
|
|
19213
|
-
var
|
|
19140
|
+
var import_jsx_runtime135 = require("react/jsx-runtime");
|
|
19141
|
+
var import_material13 = require("@mui/material");
|
|
19142
|
+
var import_react49 = require("react");
|
|
19214
19143
|
var import_zustand = require("zustand");
|
|
19215
19144
|
var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
|
|
19216
19145
|
function r(e2) {
|
|
@@ -19327,10 +19256,10 @@ var createJsonViewerStore = (props) => {
|
|
|
19327
19256
|
};
|
|
19328
19257
|
});
|
|
19329
19258
|
};
|
|
19330
|
-
var JsonViewerStoreContext = (0,
|
|
19259
|
+
var JsonViewerStoreContext = (0, import_react49.createContext)(void 0);
|
|
19331
19260
|
JsonViewerStoreContext.Provider;
|
|
19332
19261
|
var useJsonViewerStore = (selector2, equalityFn) => {
|
|
19333
|
-
const store = (0,
|
|
19262
|
+
const store = (0, import_react49.useContext)(JsonViewerStoreContext);
|
|
19334
19263
|
return (0, import_zustand.useStore)(store, selector2, equalityFn);
|
|
19335
19264
|
};
|
|
19336
19265
|
var useTextColor = () => {
|
|
@@ -19455,9 +19384,9 @@ async function copyString(value) {
|
|
|
19455
19384
|
}
|
|
19456
19385
|
function useClipboard() {
|
|
19457
19386
|
let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
19458
|
-
const [copied, setCopied] = (0,
|
|
19459
|
-
const copyTimeout = (0,
|
|
19460
|
-
const handleCopyResult = (0,
|
|
19387
|
+
const [copied, setCopied] = (0, import_react49.useState)(false);
|
|
19388
|
+
const copyTimeout = (0, import_react49.useRef)(null);
|
|
19389
|
+
const handleCopyResult = (0, import_react49.useCallback)((value) => {
|
|
19461
19390
|
const current = copyTimeout.current;
|
|
19462
19391
|
if (current) {
|
|
19463
19392
|
window.clearTimeout(current);
|
|
@@ -19468,7 +19397,7 @@ function useClipboard() {
|
|
|
19468
19397
|
timeout
|
|
19469
19398
|
]);
|
|
19470
19399
|
const onCopy = useJsonViewerStore((store) => store.onCopy);
|
|
19471
|
-
const copy = (0,
|
|
19400
|
+
const copy = (0, import_react49.useCallback)(async (path, value) => {
|
|
19472
19401
|
if (typeof onCopy === "function") {
|
|
19473
19402
|
try {
|
|
19474
19403
|
await onCopy(path, value, copyString);
|
|
@@ -19489,7 +19418,7 @@ function useClipboard() {
|
|
|
19489
19418
|
handleCopyResult,
|
|
19490
19419
|
onCopy
|
|
19491
19420
|
]);
|
|
19492
|
-
const reset = (0,
|
|
19421
|
+
const reset = (0, import_react49.useCallback)(() => {
|
|
19493
19422
|
setCopied(false);
|
|
19494
19423
|
if (copyTimeout.current) {
|
|
19495
19424
|
clearTimeout(copyTimeout.current);
|
|
@@ -19503,7 +19432,7 @@ function useClipboard() {
|
|
|
19503
19432
|
}
|
|
19504
19433
|
function useIsCycleReference(path, value) {
|
|
19505
19434
|
const rootValue = useJsonViewerStore((store) => store.value);
|
|
19506
|
-
return (0,
|
|
19435
|
+
return (0, import_react49.useMemo)(() => isCycleReference(rootValue, path, value), [
|
|
19507
19436
|
path,
|
|
19508
19437
|
value,
|
|
19509
19438
|
rootValue
|
|
@@ -19516,7 +19445,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
19516
19445
|
const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
|
|
19517
19446
|
const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
|
|
19518
19447
|
const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
|
|
19519
|
-
(0,
|
|
19448
|
+
(0, import_react49.useEffect)(() => {
|
|
19520
19449
|
const inspect2 = getInspectCache(path, nestedIndex);
|
|
19521
19450
|
if (inspect2 !== void 0) {
|
|
19522
19451
|
return;
|
|
@@ -19538,7 +19467,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
19538
19467
|
value,
|
|
19539
19468
|
setInspectCache
|
|
19540
19469
|
]);
|
|
19541
|
-
const [inspect, set] = (0,
|
|
19470
|
+
const [inspect, set] = (0, import_react49.useState)(() => {
|
|
19542
19471
|
const shouldInspect = getInspectCache(path, nestedIndex);
|
|
19543
19472
|
if (shouldInspect !== void 0) {
|
|
19544
19473
|
return shouldInspect;
|
|
@@ -19548,7 +19477,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
19548
19477
|
}
|
|
19549
19478
|
return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
|
|
19550
19479
|
});
|
|
19551
|
-
const setInspect = (0,
|
|
19480
|
+
const setInspect = (0, import_react49.useCallback)((apply) => {
|
|
19552
19481
|
set((oldState) => {
|
|
19553
19482
|
const newState = typeof apply === "boolean" ? apply : apply(oldState);
|
|
19554
19483
|
setInspectCache(path, newState, nestedIndex);
|
|
@@ -19564,7 +19493,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
19564
19493
|
setInspect
|
|
19565
19494
|
];
|
|
19566
19495
|
}
|
|
19567
|
-
var DataBox = (props) => /* @__PURE__ */ (0,
|
|
19496
|
+
var DataBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
19568
19497
|
component: "div",
|
|
19569
19498
|
...props,
|
|
19570
19499
|
sx: {
|
|
@@ -19575,7 +19504,7 @@ var DataBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_m
|
|
|
19575
19504
|
var DataTypeLabel = (param) => {
|
|
19576
19505
|
let { dataType, enable = true } = param;
|
|
19577
19506
|
if (!enable) return null;
|
|
19578
|
-
return /* @__PURE__ */ (0,
|
|
19507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
|
|
19579
19508
|
className: "data-type-label",
|
|
19580
19509
|
sx: {
|
|
19581
19510
|
mx: 0.5,
|
|
@@ -19588,23 +19517,23 @@ var DataTypeLabel = (param) => {
|
|
|
19588
19517
|
};
|
|
19589
19518
|
function defineEasyType(param) {
|
|
19590
19519
|
let { is, serialize, deserialize, type, colorKey, displayTypeLabel = true, Renderer } = param;
|
|
19591
|
-
const Render = /* @__PURE__ */ (0,
|
|
19520
|
+
const Render = /* @__PURE__ */ (0, import_react49.memo)(Renderer);
|
|
19592
19521
|
const EasyType = (props) => {
|
|
19593
19522
|
const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
|
|
19594
19523
|
const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
|
|
19595
19524
|
const onSelect = useJsonViewerStore((store) => store.onSelect);
|
|
19596
|
-
return /* @__PURE__ */ (0,
|
|
19525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
|
|
19597
19526
|
onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
|
|
19598
19527
|
sx: {
|
|
19599
19528
|
color: color2
|
|
19600
19529
|
},
|
|
19601
19530
|
children: [
|
|
19602
|
-
displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ (0,
|
|
19531
|
+
displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataTypeLabel, {
|
|
19603
19532
|
dataType: type
|
|
19604
19533
|
}),
|
|
19605
|
-
/* @__PURE__ */ (0,
|
|
19534
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
|
|
19606
19535
|
className: "".concat(type, "-value"),
|
|
19607
|
-
children: /* @__PURE__ */ (0,
|
|
19536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Render, {
|
|
19608
19537
|
path: props.path,
|
|
19609
19538
|
inspect: props.inspect,
|
|
19610
19539
|
setInspect: props.setInspect,
|
|
@@ -19625,7 +19554,7 @@ function defineEasyType(param) {
|
|
|
19625
19554
|
const EasyTypeEditor = (param2) => {
|
|
19626
19555
|
let { value, setValue, abortEditing, commitEditing } = param2;
|
|
19627
19556
|
const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
|
|
19628
|
-
const handleKeyDown = (0,
|
|
19557
|
+
const handleKeyDown = (0, import_react49.useCallback)((event) => {
|
|
19629
19558
|
if (event.key === "Enter") {
|
|
19630
19559
|
event.preventDefault();
|
|
19631
19560
|
commitEditing(value);
|
|
@@ -19639,12 +19568,12 @@ function defineEasyType(param) {
|
|
|
19639
19568
|
commitEditing,
|
|
19640
19569
|
value
|
|
19641
19570
|
]);
|
|
19642
|
-
const handleChange = (0,
|
|
19571
|
+
const handleChange = (0, import_react49.useCallback)((event) => {
|
|
19643
19572
|
setValue(event.target.value);
|
|
19644
19573
|
}, [
|
|
19645
19574
|
setValue
|
|
19646
19575
|
]);
|
|
19647
|
-
return /* @__PURE__ */ (0,
|
|
19576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.InputBase, {
|
|
19648
19577
|
autoFocus: true,
|
|
19649
19578
|
value,
|
|
19650
19579
|
onChange: handleChange,
|
|
@@ -19684,7 +19613,7 @@ var booleanType = defineEasyType({
|
|
|
19684
19613
|
},
|
|
19685
19614
|
Renderer: (param) => {
|
|
19686
19615
|
let { value } = param;
|
|
19687
|
-
return /* @__PURE__ */ (0,
|
|
19616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
|
|
19688
19617
|
children: value ? "true" : "false"
|
|
19689
19618
|
});
|
|
19690
19619
|
}
|
|
@@ -19703,7 +19632,7 @@ var dateType = defineEasyType({
|
|
|
19703
19632
|
colorKey: "base0D",
|
|
19704
19633
|
Renderer: (param) => {
|
|
19705
19634
|
let { value } = param;
|
|
19706
|
-
return /* @__PURE__ */ (0,
|
|
19635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
|
|
19707
19636
|
children: value.toLocaleTimeString("en-us", displayOptions)
|
|
19708
19637
|
});
|
|
19709
19638
|
}
|
|
@@ -19732,12 +19661,12 @@ var functionName = (func) => {
|
|
|
19732
19661
|
var lb = "{";
|
|
19733
19662
|
var rb = "}";
|
|
19734
19663
|
var PreFunctionType = (props) => {
|
|
19735
|
-
return /* @__PURE__ */ (0,
|
|
19664
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.NoSsr, {
|
|
19736
19665
|
children: [
|
|
19737
|
-
/* @__PURE__ */ (0,
|
|
19666
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataTypeLabel, {
|
|
19738
19667
|
dataType: "function"
|
|
19739
19668
|
}),
|
|
19740
|
-
/* @__PURE__ */ (0,
|
|
19669
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, {
|
|
19741
19670
|
component: "span",
|
|
19742
19671
|
className: "data-function-start",
|
|
19743
19672
|
sx: {
|
|
@@ -19753,8 +19682,8 @@ var PreFunctionType = (props) => {
|
|
|
19753
19682
|
});
|
|
19754
19683
|
};
|
|
19755
19684
|
var PostFunctionType = () => {
|
|
19756
|
-
return /* @__PURE__ */ (0,
|
|
19757
|
-
children: /* @__PURE__ */ (0,
|
|
19685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.NoSsr, {
|
|
19686
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
19758
19687
|
component: "span",
|
|
19759
19688
|
className: "data-function-end",
|
|
19760
19689
|
children: rb
|
|
@@ -19763,15 +19692,15 @@ var PostFunctionType = () => {
|
|
|
19763
19692
|
};
|
|
19764
19693
|
var FunctionType = (props) => {
|
|
19765
19694
|
const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
|
|
19766
|
-
return /* @__PURE__ */ (0,
|
|
19767
|
-
children: /* @__PURE__ */ (0,
|
|
19695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.NoSsr, {
|
|
19696
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
19768
19697
|
className: "data-function",
|
|
19769
19698
|
sx: {
|
|
19770
19699
|
display: props.inspect ? "block" : "inline-block",
|
|
19771
19700
|
pl: props.inspect ? 2 : 0,
|
|
19772
19701
|
color: functionColor
|
|
19773
19702
|
},
|
|
19774
|
-
children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ (0,
|
|
19703
|
+
children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
19775
19704
|
component: "span",
|
|
19776
19705
|
className: "data-function-body",
|
|
19777
19706
|
onClick: () => props.setInspect(true),
|
|
@@ -19799,7 +19728,7 @@ var nullType = defineEasyType({
|
|
|
19799
19728
|
displayTypeLabel: false,
|
|
19800
19729
|
Renderer: () => {
|
|
19801
19730
|
const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
19802
|
-
return /* @__PURE__ */ (0,
|
|
19731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
19803
19732
|
sx: {
|
|
19804
19733
|
fontSize: "0.8rem",
|
|
19805
19734
|
backgroundColor,
|
|
@@ -19822,7 +19751,7 @@ var nanType = defineEasyType({
|
|
|
19822
19751
|
deserialize: (value) => parseFloat(value),
|
|
19823
19752
|
Renderer: () => {
|
|
19824
19753
|
const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
19825
|
-
return /* @__PURE__ */ (0,
|
|
19754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
19826
19755
|
sx: {
|
|
19827
19756
|
backgroundColor,
|
|
19828
19757
|
fontSize: "0.8rem",
|
|
@@ -19842,7 +19771,7 @@ var floatType = defineEasyType({
|
|
|
19842
19771
|
deserialize: (value) => parseFloat(value),
|
|
19843
19772
|
Renderer: (param) => {
|
|
19844
19773
|
let { value } = param;
|
|
19845
|
-
return /* @__PURE__ */ (0,
|
|
19774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
|
|
19846
19775
|
children: value
|
|
19847
19776
|
});
|
|
19848
19777
|
}
|
|
@@ -19856,7 +19785,7 @@ var intType = defineEasyType({
|
|
|
19856
19785
|
deserialize: (value) => parseFloat(value),
|
|
19857
19786
|
Renderer: (param) => {
|
|
19858
19787
|
let { value } = param;
|
|
19859
|
-
return /* @__PURE__ */ (0,
|
|
19788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
|
|
19860
19789
|
children: value
|
|
19861
19790
|
});
|
|
19862
19791
|
}
|
|
@@ -19869,16 +19798,16 @@ var bigIntType = defineEasyType({
|
|
|
19869
19798
|
deserialize: (value) => BigInt(value.replace(/\D/g, "")),
|
|
19870
19799
|
Renderer: (param) => {
|
|
19871
19800
|
let { value } = param;
|
|
19872
|
-
return /* @__PURE__ */ (0,
|
|
19801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
|
|
19873
19802
|
children: "".concat(value, "n")
|
|
19874
19803
|
});
|
|
19875
19804
|
}
|
|
19876
19805
|
});
|
|
19877
19806
|
var BaseIcon = (param) => {
|
|
19878
19807
|
let { d: d2, ...props } = param;
|
|
19879
|
-
return /* @__PURE__ */ (0,
|
|
19808
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.SvgIcon, {
|
|
19880
19809
|
...props,
|
|
19881
|
-
children: /* @__PURE__ */ (0,
|
|
19810
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("path", {
|
|
19882
19811
|
d: d2
|
|
19883
19812
|
})
|
|
19884
19813
|
});
|
|
@@ -19893,55 +19822,55 @@ var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.3
|
|
|
19893
19822
|
var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
|
|
19894
19823
|
var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
|
|
19895
19824
|
var AddBoxIcon = (props) => {
|
|
19896
|
-
return /* @__PURE__ */ (0,
|
|
19825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19897
19826
|
d: AddBox,
|
|
19898
19827
|
...props
|
|
19899
19828
|
});
|
|
19900
19829
|
};
|
|
19901
19830
|
var CheckIcon = (props) => {
|
|
19902
|
-
return /* @__PURE__ */ (0,
|
|
19831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19903
19832
|
d: Check2,
|
|
19904
19833
|
...props
|
|
19905
19834
|
});
|
|
19906
19835
|
};
|
|
19907
19836
|
var ChevronRightIcon = (props) => {
|
|
19908
|
-
return /* @__PURE__ */ (0,
|
|
19837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19909
19838
|
d: ChevronRight,
|
|
19910
19839
|
...props
|
|
19911
19840
|
});
|
|
19912
19841
|
};
|
|
19913
19842
|
var CircularArrowsIcon = (props) => {
|
|
19914
|
-
return /* @__PURE__ */ (0,
|
|
19843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19915
19844
|
d: CircularArrows,
|
|
19916
19845
|
...props
|
|
19917
19846
|
});
|
|
19918
19847
|
};
|
|
19919
19848
|
var CloseIcon = (props) => {
|
|
19920
|
-
return /* @__PURE__ */ (0,
|
|
19849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19921
19850
|
d: Close,
|
|
19922
19851
|
...props
|
|
19923
19852
|
});
|
|
19924
19853
|
};
|
|
19925
19854
|
var ContentCopyIcon = (props) => {
|
|
19926
|
-
return /* @__PURE__ */ (0,
|
|
19855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19927
19856
|
d: ContentCopy2,
|
|
19928
19857
|
...props
|
|
19929
19858
|
});
|
|
19930
19859
|
};
|
|
19931
19860
|
var EditIcon = (props) => {
|
|
19932
|
-
return /* @__PURE__ */ (0,
|
|
19861
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19933
19862
|
d: Edit,
|
|
19934
19863
|
...props
|
|
19935
19864
|
});
|
|
19936
19865
|
};
|
|
19937
19866
|
var ExpandMoreIcon = (props) => {
|
|
19938
|
-
return /* @__PURE__ */ (0,
|
|
19867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19939
19868
|
d: ExpandMore,
|
|
19940
19869
|
...props
|
|
19941
19870
|
});
|
|
19942
19871
|
};
|
|
19943
19872
|
var DeleteIcon = (props) => {
|
|
19944
|
-
return /* @__PURE__ */ (0,
|
|
19873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
|
|
19945
19874
|
d: Delete,
|
|
19946
19875
|
...props
|
|
19947
19876
|
});
|
|
@@ -19964,23 +19893,23 @@ function inspectMetadata(value) {
|
|
|
19964
19893
|
var PreObjectType = (props) => {
|
|
19965
19894
|
const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
|
|
19966
19895
|
const textColor = useTextColor();
|
|
19967
|
-
const isArrayLike = (0,
|
|
19896
|
+
const isArrayLike = (0, import_react49.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
|
|
19968
19897
|
props.value
|
|
19969
19898
|
]);
|
|
19970
|
-
const isEmptyValue = (0,
|
|
19899
|
+
const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
|
|
19971
19900
|
props.value
|
|
19972
19901
|
]);
|
|
19973
|
-
const sizeOfValue = (0,
|
|
19902
|
+
const sizeOfValue = (0, import_react49.useMemo)(() => inspectMetadata(props.value), [
|
|
19974
19903
|
props.value
|
|
19975
19904
|
]);
|
|
19976
19905
|
const displaySize = useJsonViewerStore((store) => store.displaySize);
|
|
19977
|
-
const shouldDisplaySize = (0,
|
|
19906
|
+
const shouldDisplaySize = (0, import_react49.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
|
|
19978
19907
|
displaySize,
|
|
19979
19908
|
props.path,
|
|
19980
19909
|
props.value
|
|
19981
19910
|
]);
|
|
19982
19911
|
const isTrap = useIsCycleReference(props.path, props.value);
|
|
19983
|
-
return /* @__PURE__ */ (0,
|
|
19912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, {
|
|
19984
19913
|
component: "span",
|
|
19985
19914
|
className: "data-object-start",
|
|
19986
19915
|
sx: {
|
|
@@ -19988,7 +19917,7 @@ var PreObjectType = (props) => {
|
|
|
19988
19917
|
},
|
|
19989
19918
|
children: [
|
|
19990
19919
|
isArrayLike ? arrayLb : objectLb,
|
|
19991
|
-
shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ (0,
|
|
19920
|
+
shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
19992
19921
|
component: "span",
|
|
19993
19922
|
sx: {
|
|
19994
19923
|
pl: 0.5,
|
|
@@ -19998,16 +19927,16 @@ var PreObjectType = (props) => {
|
|
|
19998
19927
|
},
|
|
19999
19928
|
children: sizeOfValue
|
|
20000
19929
|
}),
|
|
20001
|
-
isTrap && !props.inspect && /* @__PURE__ */ (0,
|
|
19930
|
+
isTrap && !props.inspect && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
|
|
20002
19931
|
children: [
|
|
20003
|
-
/* @__PURE__ */ (0,
|
|
19932
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CircularArrowsIcon, {
|
|
20004
19933
|
sx: {
|
|
20005
19934
|
fontSize: 12,
|
|
20006
19935
|
color: textColor,
|
|
20007
19936
|
mx: 0.5
|
|
20008
19937
|
}
|
|
20009
19938
|
}),
|
|
20010
|
-
/* @__PURE__ */ (0,
|
|
19939
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
|
|
20011
19940
|
sx: {
|
|
20012
19941
|
cursor: "pointer",
|
|
20013
19942
|
userSelect: "none"
|
|
@@ -20022,22 +19951,22 @@ var PreObjectType = (props) => {
|
|
|
20022
19951
|
var PostObjectType = (props) => {
|
|
20023
19952
|
const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
|
|
20024
19953
|
const textColor = useTextColor();
|
|
20025
|
-
const isArrayLike = (0,
|
|
19954
|
+
const isArrayLike = (0, import_react49.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
|
|
20026
19955
|
props.value
|
|
20027
19956
|
]);
|
|
20028
|
-
const isEmptyValue = (0,
|
|
19957
|
+
const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
|
|
20029
19958
|
props.value
|
|
20030
19959
|
]);
|
|
20031
|
-
const sizeOfValue = (0,
|
|
19960
|
+
const sizeOfValue = (0, import_react49.useMemo)(() => inspectMetadata(props.value), [
|
|
20032
19961
|
props.value
|
|
20033
19962
|
]);
|
|
20034
19963
|
const displaySize = useJsonViewerStore((store) => store.displaySize);
|
|
20035
|
-
const shouldDisplaySize = (0,
|
|
19964
|
+
const shouldDisplaySize = (0, import_react49.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
|
|
20036
19965
|
displaySize,
|
|
20037
19966
|
props.path,
|
|
20038
19967
|
props.value
|
|
20039
19968
|
]);
|
|
20040
|
-
return /* @__PURE__ */ (0,
|
|
19969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, {
|
|
20041
19970
|
component: "span",
|
|
20042
19971
|
className: "data-object-end",
|
|
20043
19972
|
sx: {
|
|
@@ -20048,7 +19977,7 @@ var PostObjectType = (props) => {
|
|
|
20048
19977
|
},
|
|
20049
19978
|
children: [
|
|
20050
19979
|
isArrayLike ? arrayRb : objectRb,
|
|
20051
|
-
shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ (0,
|
|
19980
|
+
shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20052
19981
|
component: "span",
|
|
20053
19982
|
sx: {
|
|
20054
19983
|
pl: 0.5,
|
|
@@ -20069,9 +19998,9 @@ var ObjectType = (props) => {
|
|
|
20069
19998
|
const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
20070
19999
|
const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
|
|
20071
20000
|
const isTrap = useIsCycleReference(props.path, props.value);
|
|
20072
|
-
const [displayLength, setDisplayLength] = (0,
|
|
20001
|
+
const [displayLength, setDisplayLength] = (0, import_react49.useState)(useJsonViewerStore((store) => store.maxDisplayLength));
|
|
20073
20002
|
const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
|
|
20074
|
-
const elements = (0,
|
|
20003
|
+
const elements = (0, import_react49.useMemo)(() => {
|
|
20075
20004
|
if (!props.inspect) {
|
|
20076
20005
|
return null;
|
|
20077
20006
|
}
|
|
@@ -20088,7 +20017,7 @@ var ObjectType = (props) => {
|
|
|
20088
20017
|
...props.path,
|
|
20089
20018
|
key
|
|
20090
20019
|
];
|
|
20091
|
-
elements3.push(/* @__PURE__ */ (0,
|
|
20020
|
+
elements3.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
|
|
20092
20021
|
path,
|
|
20093
20022
|
value: value2,
|
|
20094
20023
|
prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
|
|
@@ -20104,7 +20033,7 @@ var ObjectType = (props) => {
|
|
|
20104
20033
|
while (true) {
|
|
20105
20034
|
const nextResult = iterator2.next();
|
|
20106
20035
|
var _nextResult_done;
|
|
20107
|
-
elements3.push(/* @__PURE__ */ (0,
|
|
20036
|
+
elements3.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
|
|
20108
20037
|
path: [
|
|
20109
20038
|
...props.path,
|
|
20110
20039
|
"iterator:".concat(count2)
|
|
@@ -20132,7 +20061,7 @@ var ObjectType = (props) => {
|
|
|
20132
20061
|
...props.path,
|
|
20133
20062
|
index
|
|
20134
20063
|
];
|
|
20135
|
-
return /* @__PURE__ */ (0,
|
|
20064
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
|
|
20136
20065
|
path,
|
|
20137
20066
|
value: value2,
|
|
20138
20067
|
prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
|
|
@@ -20141,7 +20070,7 @@ var ObjectType = (props) => {
|
|
|
20141
20070
|
});
|
|
20142
20071
|
if (value.length > displayLength) {
|
|
20143
20072
|
const rest = value.length - displayLength;
|
|
20144
|
-
elements4.push(/* @__PURE__ */ (0,
|
|
20073
|
+
elements4.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
|
|
20145
20074
|
sx: {
|
|
20146
20075
|
cursor: "pointer",
|
|
20147
20076
|
lineHeight: 1.5,
|
|
@@ -20164,7 +20093,7 @@ var ObjectType = (props) => {
|
|
|
20164
20093
|
const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
|
|
20165
20094
|
const elementsLastIndex = elements3.length - 1;
|
|
20166
20095
|
return elements3.map((list, index) => {
|
|
20167
|
-
return /* @__PURE__ */ (0,
|
|
20096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
|
|
20168
20097
|
path: props.path,
|
|
20169
20098
|
value: list,
|
|
20170
20099
|
nestedIndex: index,
|
|
@@ -20191,7 +20120,7 @@ var ObjectType = (props) => {
|
|
|
20191
20120
|
...props.path,
|
|
20192
20121
|
key
|
|
20193
20122
|
];
|
|
20194
|
-
return /* @__PURE__ */ (0,
|
|
20123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
|
|
20195
20124
|
path,
|
|
20196
20125
|
value: value2,
|
|
20197
20126
|
prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
|
|
@@ -20200,7 +20129,7 @@ var ObjectType = (props) => {
|
|
|
20200
20129
|
});
|
|
20201
20130
|
if (entries.length > displayLength) {
|
|
20202
20131
|
const rest = entries.length - displayLength;
|
|
20203
|
-
elements2.push(/* @__PURE__ */ (0,
|
|
20132
|
+
elements2.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
|
|
20204
20133
|
sx: {
|
|
20205
20134
|
cursor: "pointer",
|
|
20206
20135
|
lineHeight: 1.5,
|
|
@@ -20232,13 +20161,13 @@ var ObjectType = (props) => {
|
|
|
20232
20161
|
const marginLeft = props.inspect ? 0.6 : 0;
|
|
20233
20162
|
const width = useJsonViewerStore((store) => store.indentWidth);
|
|
20234
20163
|
const indentWidth = props.inspect ? width - marginLeft : width;
|
|
20235
|
-
const isEmptyValue = (0,
|
|
20164
|
+
const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
|
|
20236
20165
|
props.value
|
|
20237
20166
|
]);
|
|
20238
20167
|
if (isEmptyValue) {
|
|
20239
20168
|
return null;
|
|
20240
20169
|
}
|
|
20241
|
-
return /* @__PURE__ */ (0,
|
|
20170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20242
20171
|
className: "data-object",
|
|
20243
20172
|
sx: {
|
|
20244
20173
|
display: props.inspect ? "block" : "inline-block",
|
|
@@ -20247,7 +20176,7 @@ var ObjectType = (props) => {
|
|
|
20247
20176
|
color: keyColor,
|
|
20248
20177
|
borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
|
|
20249
20178
|
},
|
|
20250
|
-
children: props.inspect ? elements : !isTrap && /* @__PURE__ */ (0,
|
|
20179
|
+
children: props.inspect ? elements : !isTrap && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20251
20180
|
component: "span",
|
|
20252
20181
|
className: "data-object-body",
|
|
20253
20182
|
onClick: () => props.setInspect(true),
|
|
@@ -20275,11 +20204,11 @@ var stringType = defineEasyType({
|
|
|
20275
20204
|
serialize: (value) => value,
|
|
20276
20205
|
deserialize: (value) => value,
|
|
20277
20206
|
Renderer: (props) => {
|
|
20278
|
-
const [showRest, setShowRest] = (0,
|
|
20207
|
+
const [showRest, setShowRest] = (0, import_react49.useState)(false);
|
|
20279
20208
|
const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
|
|
20280
20209
|
const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
|
|
20281
20210
|
const hasRest = props.value.length > collapseStringsAfterLength;
|
|
20282
|
-
return /* @__PURE__ */ (0,
|
|
20211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, {
|
|
20283
20212
|
component: "span",
|
|
20284
20213
|
sx: {
|
|
20285
20214
|
overflowWrap: "anywhere",
|
|
@@ -20297,7 +20226,7 @@ var stringType = defineEasyType({
|
|
|
20297
20226
|
children: [
|
|
20298
20227
|
'"',
|
|
20299
20228
|
value,
|
|
20300
|
-
hasRest && !showRest && /* @__PURE__ */ (0,
|
|
20229
|
+
hasRest && !showRest && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20301
20230
|
component: "span",
|
|
20302
20231
|
sx: {
|
|
20303
20232
|
padding: 0.5
|
|
@@ -20316,7 +20245,7 @@ var undefinedType = defineEasyType({
|
|
|
20316
20245
|
displayTypeLabel: false,
|
|
20317
20246
|
Renderer: () => {
|
|
20318
20247
|
const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
20319
|
-
return /* @__PURE__ */ (0,
|
|
20248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20320
20249
|
sx: {
|
|
20321
20250
|
fontSize: "0.7rem",
|
|
20322
20251
|
backgroundColor,
|
|
@@ -20332,17 +20261,17 @@ function memorizeDataType(dataType) {
|
|
|
20332
20261
|
var _prevProps_path, _nextProps_path;
|
|
20333
20262
|
return Object.is(prevProps.value, nextProps.value) && prevProps.inspect && nextProps.inspect && ((_prevProps_path = prevProps.path) === null || _prevProps_path === void 0 ? void 0 : _prevProps_path.join(".")) === ((_nextProps_path = nextProps.path) === null || _nextProps_path === void 0 ? void 0 : _nextProps_path.join("."));
|
|
20334
20263
|
}
|
|
20335
|
-
dataType.Component = /* @__PURE__ */ (0,
|
|
20264
|
+
dataType.Component = /* @__PURE__ */ (0, import_react49.memo)(dataType.Component, compare);
|
|
20336
20265
|
if (dataType.Editor) {
|
|
20337
|
-
dataType.Editor = /* @__PURE__ */ (0,
|
|
20266
|
+
dataType.Editor = /* @__PURE__ */ (0, import_react49.memo)(dataType.Editor, function compare2(prevProps, nextProps) {
|
|
20338
20267
|
return Object.is(prevProps.value, nextProps.value);
|
|
20339
20268
|
});
|
|
20340
20269
|
}
|
|
20341
20270
|
if (dataType.PreComponent) {
|
|
20342
|
-
dataType.PreComponent = /* @__PURE__ */ (0,
|
|
20271
|
+
dataType.PreComponent = /* @__PURE__ */ (0, import_react49.memo)(dataType.PreComponent, compare);
|
|
20343
20272
|
}
|
|
20344
20273
|
if (dataType.PostComponent) {
|
|
20345
|
-
dataType.PostComponent = /* @__PURE__ */ (0,
|
|
20274
|
+
dataType.PostComponent = /* @__PURE__ */ (0, import_react49.memo)(dataType.PostComponent, compare);
|
|
20346
20275
|
}
|
|
20347
20276
|
return dataType;
|
|
20348
20277
|
}
|
|
@@ -20368,10 +20297,10 @@ var createTypeRegistryStore = () => {
|
|
|
20368
20297
|
}
|
|
20369
20298
|
}));
|
|
20370
20299
|
};
|
|
20371
|
-
var TypeRegistryStoreContext = /* @__PURE__ */ (0,
|
|
20300
|
+
var TypeRegistryStoreContext = /* @__PURE__ */ (0, import_react49.createContext)(void 0);
|
|
20372
20301
|
TypeRegistryStoreContext.Provider;
|
|
20373
20302
|
var useTypeRegistryStore = (selector2, equalityFn) => {
|
|
20374
|
-
const store = (0,
|
|
20303
|
+
const store = (0, import_react49.useContext)(TypeRegistryStoreContext);
|
|
20375
20304
|
return (0, import_zustand.useStore)(store, selector2, equalityFn);
|
|
20376
20305
|
};
|
|
20377
20306
|
function matchTypeComponents(value, path, registry) {
|
|
@@ -20391,13 +20320,13 @@ function matchTypeComponents(value, path, registry) {
|
|
|
20391
20320
|
}
|
|
20392
20321
|
function useTypeComponents(value, path) {
|
|
20393
20322
|
const registry = useTypeRegistryStore((store) => store.registry);
|
|
20394
|
-
return (0,
|
|
20323
|
+
return (0, import_react49.useMemo)(() => matchTypeComponents(value, path, registry), [
|
|
20395
20324
|
value,
|
|
20396
20325
|
path,
|
|
20397
20326
|
registry
|
|
20398
20327
|
]);
|
|
20399
20328
|
}
|
|
20400
|
-
var IconBox = (props) => /* @__PURE__ */ (0,
|
|
20329
|
+
var IconBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20401
20330
|
component: "span",
|
|
20402
20331
|
...props,
|
|
20403
20332
|
sx: {
|
|
@@ -20412,7 +20341,7 @@ var DataKeyPair = (props) => {
|
|
|
20412
20341
|
var _props_editable;
|
|
20413
20342
|
const propsEditable = (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : void 0;
|
|
20414
20343
|
const storeEditable = useJsonViewerStore((store) => store.editable);
|
|
20415
|
-
const editable = (0,
|
|
20344
|
+
const editable = (0, import_react49.useMemo)(() => {
|
|
20416
20345
|
if (storeEditable === false) {
|
|
20417
20346
|
return false;
|
|
20418
20347
|
}
|
|
@@ -20429,11 +20358,11 @@ var DataKeyPair = (props) => {
|
|
|
20429
20358
|
storeEditable,
|
|
20430
20359
|
value
|
|
20431
20360
|
]);
|
|
20432
|
-
const [tempValue, setTempValue] = (0,
|
|
20361
|
+
const [tempValue, setTempValue] = (0, import_react49.useState)("");
|
|
20433
20362
|
const depth = path.length;
|
|
20434
20363
|
const key = path[depth - 1];
|
|
20435
20364
|
const hoverPath = useJsonViewerStore((store) => store.hoverPath);
|
|
20436
|
-
const isHover = (0,
|
|
20365
|
+
const isHover = (0, import_react49.useMemo)(() => {
|
|
20437
20366
|
return hoverPath && path.every((value2, index) => value2 === hoverPath.path[index] && nestedIndex === hoverPath.nestedIndex);
|
|
20438
20367
|
}, [
|
|
20439
20368
|
hoverPath,
|
|
@@ -20443,7 +20372,7 @@ var DataKeyPair = (props) => {
|
|
|
20443
20372
|
const setHover = useJsonViewerStore((store) => store.setHover);
|
|
20444
20373
|
const root2 = useJsonViewerStore((store) => store.value);
|
|
20445
20374
|
const [inspect, setInspect] = useInspect(path, value, nestedIndex);
|
|
20446
|
-
const [editing, setEditing] = (0,
|
|
20375
|
+
const [editing, setEditing] = (0, import_react49.useState)(false);
|
|
20447
20376
|
const onChange = useJsonViewerStore((store) => store.onChange);
|
|
20448
20377
|
const keyColor = useTextColor();
|
|
20449
20378
|
const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
|
|
@@ -20455,7 +20384,7 @@ var DataKeyPair = (props) => {
|
|
|
20455
20384
|
const isNumberKey = Number.isInteger(Number(key));
|
|
20456
20385
|
const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
|
|
20457
20386
|
const onAdd = useJsonViewerStore((store) => store.onAdd);
|
|
20458
|
-
const enableAdd = (0,
|
|
20387
|
+
const enableAdd = (0, import_react49.useMemo)(() => {
|
|
20459
20388
|
if (!onAdd || nestedIndex !== void 0) return false;
|
|
20460
20389
|
if (storeEnableAdd === false) {
|
|
20461
20390
|
return false;
|
|
@@ -20480,7 +20409,7 @@ var DataKeyPair = (props) => {
|
|
|
20480
20409
|
]);
|
|
20481
20410
|
const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
|
|
20482
20411
|
const onDelete = useJsonViewerStore((store) => store.onDelete);
|
|
20483
|
-
const enableDelete = (0,
|
|
20412
|
+
const enableDelete = (0, import_react49.useMemo)(() => {
|
|
20484
20413
|
if (!onDelete || nestedIndex !== void 0) return false;
|
|
20485
20414
|
if (isRoot) {
|
|
20486
20415
|
return false;
|
|
@@ -20507,7 +20436,7 @@ var DataKeyPair = (props) => {
|
|
|
20507
20436
|
const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
|
|
20508
20437
|
const { copy, copied } = useClipboard();
|
|
20509
20438
|
const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
|
|
20510
|
-
const isHighlight = (0,
|
|
20439
|
+
const isHighlight = (0, import_react49.useMemo)(() => {
|
|
20511
20440
|
if (!highlightUpdates || prevValue === void 0) return false;
|
|
20512
20441
|
if (typeof value !== typeof prevValue) {
|
|
20513
20442
|
return true;
|
|
@@ -20531,8 +20460,8 @@ var DataKeyPair = (props) => {
|
|
|
20531
20460
|
prevValue,
|
|
20532
20461
|
value
|
|
20533
20462
|
]);
|
|
20534
|
-
const highlightContainer = (0,
|
|
20535
|
-
(0,
|
|
20463
|
+
const highlightContainer = (0, import_react49.useRef)();
|
|
20464
|
+
(0, import_react49.useEffect)(() => {
|
|
20536
20465
|
if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
|
|
20537
20466
|
highlightContainer.current.animate([
|
|
20538
20467
|
{
|
|
@@ -20552,7 +20481,7 @@ var DataKeyPair = (props) => {
|
|
|
20552
20481
|
prevValue,
|
|
20553
20482
|
value
|
|
20554
20483
|
]);
|
|
20555
|
-
const startEditing = (0,
|
|
20484
|
+
const startEditing = (0, import_react49.useCallback)((event) => {
|
|
20556
20485
|
event.preventDefault();
|
|
20557
20486
|
if (serialize) setTempValue(serialize(value));
|
|
20558
20487
|
setEditing(true);
|
|
@@ -20560,14 +20489,14 @@ var DataKeyPair = (props) => {
|
|
|
20560
20489
|
serialize,
|
|
20561
20490
|
value
|
|
20562
20491
|
]);
|
|
20563
|
-
const abortEditing = (0,
|
|
20492
|
+
const abortEditing = (0, import_react49.useCallback)(() => {
|
|
20564
20493
|
setEditing(false);
|
|
20565
20494
|
setTempValue("");
|
|
20566
20495
|
}, [
|
|
20567
20496
|
setEditing,
|
|
20568
20497
|
setTempValue
|
|
20569
20498
|
]);
|
|
20570
|
-
const commitEditing = (0,
|
|
20499
|
+
const commitEditing = (0, import_react49.useCallback)((newValue) => {
|
|
20571
20500
|
setEditing(false);
|
|
20572
20501
|
if (!deserialize) return;
|
|
20573
20502
|
try {
|
|
@@ -20581,20 +20510,20 @@ var DataKeyPair = (props) => {
|
|
|
20581
20510
|
path,
|
|
20582
20511
|
value
|
|
20583
20512
|
]);
|
|
20584
|
-
const actionIcons = (0,
|
|
20513
|
+
const actionIcons = (0, import_react49.useMemo)(() => {
|
|
20585
20514
|
if (editing) {
|
|
20586
|
-
return /* @__PURE__ */ (0,
|
|
20515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
|
|
20587
20516
|
children: [
|
|
20588
|
-
/* @__PURE__ */ (0,
|
|
20589
|
-
children: /* @__PURE__ */ (0,
|
|
20517
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
|
|
20518
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CloseIcon, {
|
|
20590
20519
|
sx: {
|
|
20591
20520
|
fontSize: ".8rem"
|
|
20592
20521
|
},
|
|
20593
20522
|
onClick: abortEditing
|
|
20594
20523
|
})
|
|
20595
20524
|
}),
|
|
20596
|
-
/* @__PURE__ */ (0,
|
|
20597
|
-
children: /* @__PURE__ */ (0,
|
|
20525
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
|
|
20526
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CheckIcon, {
|
|
20598
20527
|
sx: {
|
|
20599
20528
|
fontSize: ".8rem"
|
|
20600
20529
|
},
|
|
@@ -20604,9 +20533,9 @@ var DataKeyPair = (props) => {
|
|
|
20604
20533
|
]
|
|
20605
20534
|
});
|
|
20606
20535
|
}
|
|
20607
|
-
return /* @__PURE__ */ (0,
|
|
20536
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
|
|
20608
20537
|
children: [
|
|
20609
|
-
enableClipboard && /* @__PURE__ */ (0,
|
|
20538
|
+
enableClipboard && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
|
|
20610
20539
|
onClick: (event) => {
|
|
20611
20540
|
event.preventDefault();
|
|
20612
20541
|
try {
|
|
@@ -20615,41 +20544,41 @@ var DataKeyPair = (props) => {
|
|
|
20615
20544
|
console.error(e2);
|
|
20616
20545
|
}
|
|
20617
20546
|
},
|
|
20618
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
20547
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CheckIcon, {
|
|
20619
20548
|
sx: {
|
|
20620
20549
|
fontSize: ".8rem"
|
|
20621
20550
|
}
|
|
20622
|
-
}) : /* @__PURE__ */ (0,
|
|
20551
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ContentCopyIcon, {
|
|
20623
20552
|
sx: {
|
|
20624
20553
|
fontSize: ".8rem"
|
|
20625
20554
|
}
|
|
20626
20555
|
})
|
|
20627
20556
|
}),
|
|
20628
|
-
Editor && editable && serialize && deserialize && /* @__PURE__ */ (0,
|
|
20557
|
+
Editor && editable && serialize && deserialize && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
|
|
20629
20558
|
onClick: startEditing,
|
|
20630
|
-
children: /* @__PURE__ */ (0,
|
|
20559
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EditIcon, {
|
|
20631
20560
|
sx: {
|
|
20632
20561
|
fontSize: ".8rem"
|
|
20633
20562
|
}
|
|
20634
20563
|
})
|
|
20635
20564
|
}),
|
|
20636
|
-
enableAdd && /* @__PURE__ */ (0,
|
|
20565
|
+
enableAdd && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
|
|
20637
20566
|
onClick: (event) => {
|
|
20638
20567
|
event.preventDefault();
|
|
20639
20568
|
onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
|
|
20640
20569
|
},
|
|
20641
|
-
children: /* @__PURE__ */ (0,
|
|
20570
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(AddBoxIcon, {
|
|
20642
20571
|
sx: {
|
|
20643
20572
|
fontSize: ".8rem"
|
|
20644
20573
|
}
|
|
20645
20574
|
})
|
|
20646
20575
|
}),
|
|
20647
|
-
enableDelete && /* @__PURE__ */ (0,
|
|
20576
|
+
enableDelete && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
|
|
20648
20577
|
onClick: (event) => {
|
|
20649
20578
|
event.preventDefault();
|
|
20650
20579
|
onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
|
|
20651
20580
|
},
|
|
20652
|
-
children: /* @__PURE__ */ (0,
|
|
20581
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DeleteIcon, {
|
|
20653
20582
|
sx: {
|
|
20654
20583
|
fontSize: ".9rem"
|
|
20655
20584
|
}
|
|
@@ -20677,12 +20606,12 @@ var DataKeyPair = (props) => {
|
|
|
20677
20606
|
abortEditing,
|
|
20678
20607
|
commitEditing
|
|
20679
20608
|
]);
|
|
20680
|
-
const isEmptyValue = (0,
|
|
20609
|
+
const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(value) === 0, [
|
|
20681
20610
|
value
|
|
20682
20611
|
]);
|
|
20683
20612
|
const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
|
|
20684
20613
|
const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
|
|
20685
|
-
const downstreamProps = (0,
|
|
20614
|
+
const downstreamProps = (0, import_react49.useMemo)(() => ({
|
|
20686
20615
|
path,
|
|
20687
20616
|
inspect,
|
|
20688
20617
|
setInspect,
|
|
@@ -20697,19 +20626,19 @@ var DataKeyPair = (props) => {
|
|
|
20697
20626
|
prevValue,
|
|
20698
20627
|
nestedIndex
|
|
20699
20628
|
]);
|
|
20700
|
-
return /* @__PURE__ */ (0,
|
|
20629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, {
|
|
20701
20630
|
className: "data-key-pair",
|
|
20702
20631
|
"data-testid": "data-key-pair" + path.join("."),
|
|
20703
20632
|
sx: {
|
|
20704
20633
|
userSelect: "text"
|
|
20705
20634
|
},
|
|
20706
|
-
onMouseEnter: (0,
|
|
20635
|
+
onMouseEnter: (0, import_react49.useCallback)(() => setHover(path, nestedIndex), [
|
|
20707
20636
|
setHover,
|
|
20708
20637
|
path,
|
|
20709
20638
|
nestedIndex
|
|
20710
20639
|
]),
|
|
20711
20640
|
children: [
|
|
20712
|
-
/* @__PURE__ */ (0,
|
|
20641
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
|
|
20713
20642
|
component: "span",
|
|
20714
20643
|
className: "data-key",
|
|
20715
20644
|
sx: {
|
|
@@ -20718,7 +20647,7 @@ var DataKeyPair = (props) => {
|
|
|
20718
20647
|
letterSpacing: 0.5,
|
|
20719
20648
|
opacity: 0.8
|
|
20720
20649
|
},
|
|
20721
|
-
onClick: (0,
|
|
20650
|
+
onClick: (0, import_react49.useCallback)((event) => {
|
|
20722
20651
|
if (event.isDefaultPrevented()) {
|
|
20723
20652
|
return;
|
|
20724
20653
|
}
|
|
@@ -20730,7 +20659,7 @@ var DataKeyPair = (props) => {
|
|
|
20730
20659
|
setInspect
|
|
20731
20660
|
]),
|
|
20732
20661
|
children: [
|
|
20733
|
-
expandable ? inspect ? /* @__PURE__ */ (0,
|
|
20662
|
+
expandable ? inspect ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ExpandMoreIcon, {
|
|
20734
20663
|
className: "data-key-toggle-expanded",
|
|
20735
20664
|
sx: {
|
|
20736
20665
|
fontSize: ".8rem",
|
|
@@ -20738,7 +20667,7 @@ var DataKeyPair = (props) => {
|
|
|
20738
20667
|
cursor: "pointer"
|
|
20739
20668
|
}
|
|
20740
20669
|
}
|
|
20741
|
-
}) : /* @__PURE__ */ (0,
|
|
20670
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ChevronRightIcon, {
|
|
20742
20671
|
className: "data-key-toggle-collapsed",
|
|
20743
20672
|
sx: {
|
|
20744
20673
|
fontSize: ".8rem",
|
|
@@ -20747,44 +20676,44 @@ var DataKeyPair = (props) => {
|
|
|
20747
20676
|
}
|
|
20748
20677
|
}
|
|
20749
20678
|
}) : null,
|
|
20750
|
-
/* @__PURE__ */ (0,
|
|
20679
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20751
20680
|
ref: highlightContainer,
|
|
20752
20681
|
className: "data-key-key",
|
|
20753
20682
|
component: "span",
|
|
20754
|
-
children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ (0,
|
|
20683
|
+
children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
|
|
20755
20684
|
children: [
|
|
20756
20685
|
'"',
|
|
20757
20686
|
rootName,
|
|
20758
20687
|
'"'
|
|
20759
20688
|
]
|
|
20760
|
-
}) : /* @__PURE__ */ (0,
|
|
20689
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
|
|
20761
20690
|
children: rootName
|
|
20762
|
-
}) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ (0,
|
|
20691
|
+
}) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(KeyRenderer, {
|
|
20763
20692
|
...downstreamProps
|
|
20764
|
-
}) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ (0,
|
|
20693
|
+
}) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20765
20694
|
component: "span",
|
|
20766
20695
|
style: {
|
|
20767
20696
|
color: numberKeyColor,
|
|
20768
20697
|
userSelect: isNumberKey ? "none" : "auto"
|
|
20769
20698
|
},
|
|
20770
20699
|
children: key
|
|
20771
|
-
}) : quotesOnKeys ? /* @__PURE__ */ (0,
|
|
20700
|
+
}) : quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
|
|
20772
20701
|
children: [
|
|
20773
20702
|
'"',
|
|
20774
20703
|
key,
|
|
20775
20704
|
'"'
|
|
20776
20705
|
]
|
|
20777
|
-
}) : /* @__PURE__ */ (0,
|
|
20706
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
|
|
20778
20707
|
children: key
|
|
20779
20708
|
}))
|
|
20780
20709
|
}),
|
|
20781
|
-
isRoot ? rootName !== false && /* @__PURE__ */ (0,
|
|
20710
|
+
isRoot ? rootName !== false && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
|
|
20782
20711
|
className: "data-key-colon",
|
|
20783
20712
|
sx: {
|
|
20784
20713
|
mr: 0.5
|
|
20785
20714
|
},
|
|
20786
20715
|
children: ":"
|
|
20787
|
-
}) : nestedIndex === void 0 && /* @__PURE__ */ (0,
|
|
20716
|
+
}) : nestedIndex === void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
|
|
20788
20717
|
className: "data-key-colon",
|
|
20789
20718
|
sx: {
|
|
20790
20719
|
mr: 0.5,
|
|
@@ -20795,29 +20724,29 @@ var DataKeyPair = (props) => {
|
|
|
20795
20724
|
},
|
|
20796
20725
|
children: ":"
|
|
20797
20726
|
}),
|
|
20798
|
-
PreComponent && /* @__PURE__ */ (0,
|
|
20727
|
+
PreComponent && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(PreComponent, {
|
|
20799
20728
|
...downstreamProps
|
|
20800
20729
|
}),
|
|
20801
20730
|
isHover && expandable && inspect && actionIcons
|
|
20802
20731
|
]
|
|
20803
20732
|
}),
|
|
20804
|
-
editing && editable ? Editor && /* @__PURE__ */ (0,
|
|
20733
|
+
editing && editable ? Editor && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Editor, {
|
|
20805
20734
|
path,
|
|
20806
20735
|
value: tempValue,
|
|
20807
20736
|
setValue: setTempValue,
|
|
20808
20737
|
abortEditing,
|
|
20809
20738
|
commitEditing
|
|
20810
|
-
}) : Component ? /* @__PURE__ */ (0,
|
|
20739
|
+
}) : Component ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Component, {
|
|
20811
20740
|
...downstreamProps
|
|
20812
|
-
}) : /* @__PURE__ */ (0,
|
|
20741
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, {
|
|
20813
20742
|
component: "span",
|
|
20814
20743
|
className: "data-value-fallback",
|
|
20815
20744
|
children: "fallback: ".concat(value)
|
|
20816
20745
|
}),
|
|
20817
|
-
PostComponent && /* @__PURE__ */ (0,
|
|
20746
|
+
PostComponent && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(PostComponent, {
|
|
20818
20747
|
...downstreamProps
|
|
20819
20748
|
}),
|
|
20820
|
-
!last && displayComma && /* @__PURE__ */ (0,
|
|
20749
|
+
!last && displayComma && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
|
|
20821
20750
|
children: ","
|
|
20822
20751
|
}),
|
|
20823
20752
|
isHover && expandable && !inspect && actionIcons,
|
|
@@ -20828,8 +20757,8 @@ var DataKeyPair = (props) => {
|
|
|
20828
20757
|
};
|
|
20829
20758
|
var query = "(prefers-color-scheme: dark)";
|
|
20830
20759
|
function useThemeDetector() {
|
|
20831
|
-
const [isDark, setIsDark] = (0,
|
|
20832
|
-
(0,
|
|
20760
|
+
const [isDark, setIsDark] = (0, import_react49.useState)(false);
|
|
20761
|
+
(0, import_react49.useEffect)(() => {
|
|
20833
20762
|
const listener = (e2) => setIsDark(e2.matches);
|
|
20834
20763
|
setIsDark(window.matchMedia(query).matches);
|
|
20835
20764
|
const queryMedia = window.matchMedia(query);
|
|
@@ -20839,8 +20768,8 @@ function useThemeDetector() {
|
|
|
20839
20768
|
return isDark;
|
|
20840
20769
|
}
|
|
20841
20770
|
function useSetIfNotUndefinedEffect(key, value) {
|
|
20842
|
-
const { setState } = (0,
|
|
20843
|
-
(0,
|
|
20771
|
+
const { setState } = (0, import_react49.useContext)(JsonViewerStoreContext);
|
|
20772
|
+
(0, import_react49.useEffect)(() => {
|
|
20844
20773
|
if (value !== void 0) {
|
|
20845
20774
|
setState({
|
|
20846
20775
|
[key]: value
|
|
@@ -20853,8 +20782,8 @@ function useSetIfNotUndefinedEffect(key, value) {
|
|
|
20853
20782
|
]);
|
|
20854
20783
|
}
|
|
20855
20784
|
var JsonViewerInner = (props) => {
|
|
20856
|
-
const { setState } = (0,
|
|
20857
|
-
(0,
|
|
20785
|
+
const { setState } = (0, import_react49.useContext)(JsonViewerStoreContext);
|
|
20786
|
+
(0, import_react49.useEffect)(() => {
|
|
20858
20787
|
setState((state) => ({
|
|
20859
20788
|
prevValue: state.value,
|
|
20860
20789
|
value: props.value
|
|
@@ -20882,7 +20811,7 @@ var JsonViewerInner = (props) => {
|
|
|
20882
20811
|
useSetIfNotUndefinedEffect("displaySize", props.displaySize);
|
|
20883
20812
|
useSetIfNotUndefinedEffect("displayComma", props.displayComma);
|
|
20884
20813
|
useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
|
|
20885
|
-
(0,
|
|
20814
|
+
(0, import_react49.useEffect)(() => {
|
|
20886
20815
|
if (props.theme === "light") {
|
|
20887
20816
|
setState({
|
|
20888
20817
|
colorspace: lightColorspace
|
|
@@ -20900,13 +20829,13 @@ var JsonViewerInner = (props) => {
|
|
|
20900
20829
|
setState,
|
|
20901
20830
|
props.theme
|
|
20902
20831
|
]);
|
|
20903
|
-
const themeCls = (0,
|
|
20832
|
+
const themeCls = (0, import_react49.useMemo)(() => {
|
|
20904
20833
|
if (typeof props.theme === "object") return "json-viewer-theme-custom";
|
|
20905
20834
|
return props.theme === "dark" ? "json-viewer-theme-dark" : "json-viewer-theme-light";
|
|
20906
20835
|
}, [
|
|
20907
20836
|
props.theme
|
|
20908
20837
|
]);
|
|
20909
|
-
const onceRef = (0,
|
|
20838
|
+
const onceRef = (0, import_react49.useRef)(true);
|
|
20910
20839
|
const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
|
|
20911
20840
|
if (onceRef.current) {
|
|
20912
20841
|
const allTypes = props.valueTypes ? [
|
|
@@ -20918,7 +20847,7 @@ var JsonViewerInner = (props) => {
|
|
|
20918
20847
|
registerTypes(allTypes);
|
|
20919
20848
|
onceRef.current = false;
|
|
20920
20849
|
}
|
|
20921
|
-
(0,
|
|
20850
|
+
(0, import_react49.useEffect)(() => {
|
|
20922
20851
|
const allTypes = props.valueTypes ? [
|
|
20923
20852
|
...predefinedTypes,
|
|
20924
20853
|
...props.valueTypes
|
|
@@ -20932,12 +20861,12 @@ var JsonViewerInner = (props) => {
|
|
|
20932
20861
|
]);
|
|
20933
20862
|
const value = useJsonViewerStore((store) => store.value);
|
|
20934
20863
|
const prevValue = useJsonViewerStore((store) => store.prevValue);
|
|
20935
|
-
const emptyPath = (0,
|
|
20864
|
+
const emptyPath = (0, import_react49.useMemo)(() => [], []);
|
|
20936
20865
|
const setHover = useJsonViewerStore((store) => store.setHover);
|
|
20937
|
-
const onMouseLeave = (0,
|
|
20866
|
+
const onMouseLeave = (0, import_react49.useCallback)(() => setHover(null), [
|
|
20938
20867
|
setHover
|
|
20939
20868
|
]);
|
|
20940
|
-
return /* @__PURE__ */ (0,
|
|
20869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Paper, {
|
|
20941
20870
|
elevation: 0,
|
|
20942
20871
|
className: clsx(themeCls, props.className),
|
|
20943
20872
|
style: props.style,
|
|
@@ -20948,7 +20877,7 @@ var JsonViewerInner = (props) => {
|
|
|
20948
20877
|
...props.sx
|
|
20949
20878
|
},
|
|
20950
20879
|
onMouseLeave,
|
|
20951
|
-
children: /* @__PURE__ */ (0,
|
|
20880
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
|
|
20952
20881
|
value,
|
|
20953
20882
|
prevValue,
|
|
20954
20883
|
path: emptyPath,
|
|
@@ -20963,17 +20892,17 @@ var JsonViewer = function JsonViewer2(props) {
|
|
|
20963
20892
|
}
|
|
20964
20893
|
}
|
|
20965
20894
|
const isAutoDarkTheme = useThemeDetector();
|
|
20966
|
-
const themeType = (0,
|
|
20895
|
+
const themeType = (0, import_react49.useMemo)(() => {
|
|
20967
20896
|
var _props_theme;
|
|
20968
20897
|
return props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : "light";
|
|
20969
20898
|
}, [
|
|
20970
20899
|
isAutoDarkTheme,
|
|
20971
20900
|
props.theme
|
|
20972
20901
|
]);
|
|
20973
|
-
const theme = (0,
|
|
20902
|
+
const theme = (0, import_react49.useMemo)(() => {
|
|
20974
20903
|
const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
|
|
20975
20904
|
const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
|
|
20976
|
-
return (0,
|
|
20905
|
+
return (0, import_material13.createTheme)({
|
|
20977
20906
|
components: {
|
|
20978
20907
|
MuiPaper: {
|
|
20979
20908
|
styleOverrides: {
|
|
@@ -20998,15 +20927,15 @@ var JsonViewer = function JsonViewer2(props) {
|
|
|
20998
20927
|
...props,
|
|
20999
20928
|
theme: themeType
|
|
21000
20929
|
};
|
|
21001
|
-
const jsonViewerStore = (0,
|
|
21002
|
-
const typeRegistryStore = (0,
|
|
21003
|
-
return /* @__PURE__ */ (0,
|
|
20930
|
+
const jsonViewerStore = (0, import_react49.useMemo)(() => createJsonViewerStore(props), []);
|
|
20931
|
+
const typeRegistryStore = (0, import_react49.useMemo)(() => createTypeRegistryStore(), []);
|
|
20932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.ThemeProvider, {
|
|
21004
20933
|
theme,
|
|
21005
|
-
children: /* @__PURE__ */ (0,
|
|
20934
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(TypeRegistryStoreContext.Provider, {
|
|
21006
20935
|
value: typeRegistryStore,
|
|
21007
|
-
children: /* @__PURE__ */ (0,
|
|
20936
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(JsonViewerStoreContext.Provider, {
|
|
21008
20937
|
value: jsonViewerStore,
|
|
21009
|
-
children: /* @__PURE__ */ (0,
|
|
20938
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(JsonViewerInner, {
|
|
21010
20939
|
...mixedProps
|
|
21011
20940
|
})
|
|
21012
20941
|
})
|
|
@@ -21015,8 +20944,8 @@ var JsonViewer = function JsonViewer2(props) {
|
|
|
21015
20944
|
};
|
|
21016
20945
|
|
|
21017
20946
|
// src/components/event-details/payload-viewer.tsx
|
|
21018
|
-
var
|
|
21019
|
-
var
|
|
20947
|
+
var import_react50 = require("react");
|
|
20948
|
+
var import_jsx_runtime136 = require("react/jsx-runtime");
|
|
21020
20949
|
function tryParseJson(value) {
|
|
21021
20950
|
if (typeof value !== "string") {
|
|
21022
20951
|
return value;
|
|
@@ -21027,9 +20956,9 @@ function tryParseJson(value) {
|
|
|
21027
20956
|
return value;
|
|
21028
20957
|
}
|
|
21029
20958
|
}
|
|
21030
|
-
var PayloadViewer = (0,
|
|
21031
|
-
const theme = (0,
|
|
21032
|
-
return /* @__PURE__ */ (0,
|
|
20959
|
+
var PayloadViewer = (0, import_react50.memo)(({ sx, testId, value }) => {
|
|
20960
|
+
const theme = (0, import_material14.useTheme)();
|
|
20961
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
21033
20962
|
JsonViewer,
|
|
21034
20963
|
{
|
|
21035
20964
|
displayDataTypes: false,
|
|
@@ -21043,21 +20972,21 @@ var PayloadViewer = (0, import_react51.memo)(({ sx, testId, value }) => {
|
|
|
21043
20972
|
});
|
|
21044
20973
|
|
|
21045
20974
|
// src/components/event-details/event-detail.tsx
|
|
21046
|
-
var
|
|
21047
|
-
var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0,
|
|
21048
|
-
/* @__PURE__ */ (0,
|
|
21049
|
-
/* @__PURE__ */ (0,
|
|
20975
|
+
var import_jsx_runtime137 = require("react/jsx-runtime");
|
|
20976
|
+
var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
|
|
20977
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
|
|
20978
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
|
|
21050
20979
|
] });
|
|
21051
20980
|
var EventMessage = ({ event }) => {
|
|
21052
|
-
const [isOpen, setIsOpen] = (0,
|
|
21053
|
-
const [isOverflowing, setIsOverflowing] = (0,
|
|
21054
|
-
const textReference = (0,
|
|
21055
|
-
const parsedMessage = (0,
|
|
21056
|
-
const isIAMPolicyEvent = (0,
|
|
20981
|
+
const [isOpen, setIsOpen] = (0, import_react51.useState)(false);
|
|
20982
|
+
const [isOverflowing, setIsOverflowing] = (0, import_react51.useState)(false);
|
|
20983
|
+
const textReference = (0, import_react51.useRef)(null);
|
|
20984
|
+
const parsedMessage = (0, import_react51.useMemo)(() => parseEventMessage(event), [event]);
|
|
20985
|
+
const isIAMPolicyEvent = (0, import_react51.useMemo)(
|
|
21057
20986
|
() => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
|
|
21058
20987
|
[event]
|
|
21059
20988
|
);
|
|
21060
|
-
(0,
|
|
20989
|
+
(0, import_react51.useEffect)(() => {
|
|
21061
20990
|
const checkOverflow = () => {
|
|
21062
20991
|
const element = textReference.current;
|
|
21063
20992
|
if (element) {
|
|
@@ -21070,29 +20999,29 @@ var EventMessage = ({ event }) => {
|
|
|
21070
20999
|
window.removeEventListener("resize", checkOverflow);
|
|
21071
21000
|
};
|
|
21072
21001
|
}, [parsedMessage.headline]);
|
|
21073
|
-
const hasAdditionalContent = (0,
|
|
21002
|
+
const hasAdditionalContent = (0, import_react51.useMemo)(
|
|
21074
21003
|
() => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
|
|
21075
21004
|
[parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
|
|
21076
21005
|
);
|
|
21077
|
-
const shouldShowToggle = (0,
|
|
21006
|
+
const shouldShowToggle = (0, import_react51.useMemo)(
|
|
21078
21007
|
() => isOverflowing || hasAdditionalContent,
|
|
21079
21008
|
[isOverflowing, hasAdditionalContent]
|
|
21080
21009
|
);
|
|
21081
|
-
return /* @__PURE__ */ (0,
|
|
21082
|
-
/* @__PURE__ */ (0,
|
|
21083
|
-
Boolean(shouldShowToggle) && /* @__PURE__ */ (0,
|
|
21084
|
-
|
|
21010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
|
|
21011
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { alignItems: "center", display: "flex" }, children: [
|
|
21012
|
+
Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
21013
|
+
import_material15.IconButton,
|
|
21085
21014
|
{
|
|
21086
21015
|
onClick: () => {
|
|
21087
21016
|
setIsOpen(!isOpen);
|
|
21088
21017
|
},
|
|
21089
21018
|
size: "small",
|
|
21090
21019
|
sx: { mr: 1, p: 0 },
|
|
21091
|
-
children: isOpen ? /* @__PURE__ */ (0,
|
|
21020
|
+
children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { fontSize: 16 } })
|
|
21092
21021
|
}
|
|
21093
21022
|
),
|
|
21094
|
-
/* @__PURE__ */ (0,
|
|
21095
|
-
|
|
21023
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
21024
|
+
import_material15.Typography,
|
|
21096
21025
|
{
|
|
21097
21026
|
ref: textReference,
|
|
21098
21027
|
sx: {
|
|
@@ -21109,12 +21038,12 @@ var EventMessage = ({ event }) => {
|
|
|
21109
21038
|
}
|
|
21110
21039
|
)
|
|
21111
21040
|
] }),
|
|
21112
|
-
isOpen && /* @__PURE__ */ (0,
|
|
21113
|
-
Boolean(parsedMessage.message) && /* @__PURE__ */ (0,
|
|
21114
|
-
Boolean(parsedMessage.details) && /* @__PURE__ */ (0,
|
|
21041
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
|
|
21042
|
+
Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message" }),
|
|
21043
|
+
Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
21115
21044
|
DetailRow2,
|
|
21116
21045
|
{
|
|
21117
|
-
content: /* @__PURE__ */ (0,
|
|
21046
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
|
|
21118
21047
|
label: "Details"
|
|
21119
21048
|
}
|
|
21120
21049
|
)
|
|
@@ -21147,15 +21076,15 @@ var EventDetail = ({
|
|
|
21147
21076
|
type
|
|
21148
21077
|
}) => {
|
|
21149
21078
|
if (type === "permission") {
|
|
21150
|
-
return /* @__PURE__ */ (0,
|
|
21079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IAMPermissionDetail, { events, spanStatusCode });
|
|
21151
21080
|
}
|
|
21152
21081
|
const eventLevel = getEventLevelFromGroup(type);
|
|
21153
|
-
return /* @__PURE__ */ (0,
|
|
21154
|
-
/* @__PURE__ */ (0,
|
|
21155
|
-
/* @__PURE__ */ (0,
|
|
21156
|
-
/* @__PURE__ */ (0,
|
|
21082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
21083
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
|
|
21084
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(StatusIcon2, { errorLevel: eventLevel }),
|
|
21085
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
|
|
21157
21086
|
] }),
|
|
21158
|
-
/* @__PURE__ */ (0,
|
|
21087
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
|
|
21159
21088
|
] });
|
|
21160
21089
|
};
|
|
21161
21090
|
|
|
@@ -31112,9 +31041,9 @@ var QueryStatus = {
|
|
|
31112
31041
|
};
|
|
31113
31042
|
|
|
31114
31043
|
// src/components/event-details/lambda-invoke-logs-section.tsx
|
|
31115
|
-
var
|
|
31116
|
-
var
|
|
31117
|
-
var
|
|
31044
|
+
var import_material16 = require("@mui/material");
|
|
31045
|
+
var import_react52 = require("react");
|
|
31046
|
+
var import_jsx_runtime138 = require("react/jsx-runtime");
|
|
31118
31047
|
var POLL_INTERVAL_MS2 = 1e3;
|
|
31119
31048
|
async function pollQueryResults(client, queryId) {
|
|
31120
31049
|
return client.send(new GetQueryResultsCommand({ queryId }));
|
|
@@ -31131,7 +31060,7 @@ async function startLambdaLogsQuery(client, functionName2, requestId, startTimeS
|
|
|
31131
31060
|
}
|
|
31132
31061
|
function useCloudWatchLogsClient(region) {
|
|
31133
31062
|
const { localstackEndpoint } = useAppInspector();
|
|
31134
|
-
const client = (0,
|
|
31063
|
+
const client = (0, import_react52.useMemo)(() => new CloudWatchLogsClient({
|
|
31135
31064
|
credentials: {
|
|
31136
31065
|
accessKeyId: "test",
|
|
31137
31066
|
secretAccessKey: "test"
|
|
@@ -31142,12 +31071,12 @@ function useCloudWatchLogsClient(region) {
|
|
|
31142
31071
|
return client;
|
|
31143
31072
|
}
|
|
31144
31073
|
function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
|
|
31145
|
-
const [loading, setLoading] = (0,
|
|
31146
|
-
const [logs, setLogs] = (0,
|
|
31147
|
-
const [error, setError] = (0,
|
|
31148
|
-
const pollTimerRef = (0,
|
|
31074
|
+
const [loading, setLoading] = (0, import_react52.useState)(true);
|
|
31075
|
+
const [logs, setLogs] = (0, import_react52.useState)([]);
|
|
31076
|
+
const [error, setError] = (0, import_react52.useState)();
|
|
31077
|
+
const pollTimerRef = (0, import_react52.useRef)(null);
|
|
31149
31078
|
const cloudWatchLogs = useCloudWatchLogsClient(region);
|
|
31150
|
-
(0,
|
|
31079
|
+
(0, import_react52.useEffect)(() => {
|
|
31151
31080
|
let cancelled = false;
|
|
31152
31081
|
const startTimeSec = Math.floor(Number(BigInt(startTimeNano) / BigInt(1e9)));
|
|
31153
31082
|
const endTimeSec = Math.ceil(Number(BigInt(endTimeNano) / BigInt(1e9)));
|
|
@@ -31204,30 +31133,30 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
|
|
|
31204
31133
|
var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, region, requestId, startTimeNano }) => {
|
|
31205
31134
|
const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
|
|
31206
31135
|
if (loading) {
|
|
31207
|
-
return /* @__PURE__ */ (0,
|
|
31208
|
-
/* @__PURE__ */ (0,
|
|
31209
|
-
/* @__PURE__ */ (0,
|
|
31136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
|
|
31137
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.CircularProgress, { size: 14 }),
|
|
31138
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
|
|
31210
31139
|
] });
|
|
31211
31140
|
}
|
|
31212
31141
|
if (error !== void 0) {
|
|
31213
|
-
return /* @__PURE__ */ (0,
|
|
31142
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { color: "error", variant: "body2", children: error.message });
|
|
31214
31143
|
}
|
|
31215
31144
|
if (logs.length === 0) {
|
|
31216
|
-
return /* @__PURE__ */ (0,
|
|
31145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
|
|
31217
31146
|
}
|
|
31218
|
-
return /* @__PURE__ */ (0,
|
|
31147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
|
|
31219
31148
|
};
|
|
31220
31149
|
|
|
31221
31150
|
// src/components/event-details/toggle-section.tsx
|
|
31222
31151
|
var import_icons_material9 = require("@mui/icons-material");
|
|
31223
|
-
var
|
|
31224
|
-
var
|
|
31225
|
-
var
|
|
31152
|
+
var import_material17 = require("@mui/material");
|
|
31153
|
+
var import_react53 = require("react");
|
|
31154
|
+
var import_jsx_runtime139 = require("react/jsx-runtime");
|
|
31226
31155
|
var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
|
|
31227
|
-
const [isOpen, setIsOpen] = (0,
|
|
31228
|
-
return /* @__PURE__ */ (0,
|
|
31229
|
-
/* @__PURE__ */ (0,
|
|
31230
|
-
|
|
31156
|
+
const [isOpen, setIsOpen] = (0, import_react53.useState)(initialOpen);
|
|
31157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_material17.Box, { sx: { mt: 4 }, children: [
|
|
31158
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
31159
|
+
import_material17.Box,
|
|
31231
31160
|
{
|
|
31232
31161
|
onClick: () => {
|
|
31233
31162
|
setIsOpen(!isOpen);
|
|
@@ -31240,8 +31169,8 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
|
|
|
31240
31169
|
mb: 1
|
|
31241
31170
|
},
|
|
31242
31171
|
children: [
|
|
31243
|
-
/* @__PURE__ */ (0,
|
|
31244
|
-
|
|
31172
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
31173
|
+
import_material17.Box,
|
|
31245
31174
|
{
|
|
31246
31175
|
role: "button",
|
|
31247
31176
|
sx: {
|
|
@@ -31250,23 +31179,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
|
|
|
31250
31179
|
gap: 1
|
|
31251
31180
|
},
|
|
31252
31181
|
children: [
|
|
31253
|
-
/* @__PURE__ */ (0,
|
|
31254
|
-
isOpen ? /* @__PURE__ */ (0,
|
|
31182
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
|
|
31183
|
+
isOpen ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
|
|
31255
31184
|
]
|
|
31256
31185
|
}
|
|
31257
31186
|
),
|
|
31258
|
-
action !== false && /* @__PURE__ */ (0,
|
|
31187
|
+
action !== false && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material17.Box, { onClick: (event) => {
|
|
31259
31188
|
event.stopPropagation();
|
|
31260
31189
|
}, children: action })
|
|
31261
31190
|
]
|
|
31262
31191
|
}
|
|
31263
31192
|
),
|
|
31264
|
-
isOpen && /* @__PURE__ */ (0,
|
|
31193
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material17.Box, { children })
|
|
31265
31194
|
] });
|
|
31266
31195
|
};
|
|
31267
31196
|
|
|
31268
31197
|
// src/components/event-details/event-details.tsx
|
|
31269
|
-
var
|
|
31198
|
+
var import_jsx_runtime140 = require("react/jsx-runtime");
|
|
31270
31199
|
var checkIsLambdaInvoke = (span) => {
|
|
31271
31200
|
if (span.service_name !== "lambda") {
|
|
31272
31201
|
return false;
|
|
@@ -31281,13 +31210,13 @@ var checkIsSqsSendMessage = (span) => {
|
|
|
31281
31210
|
return span.operation_name.startsWith("SendMessage");
|
|
31282
31211
|
};
|
|
31283
31212
|
var EventDetails = ({ onClose, selectedEvent }) => {
|
|
31284
|
-
const eventGroups = (0,
|
|
31213
|
+
const eventGroups = (0, import_react54.useMemo)(
|
|
31285
31214
|
() => getEventGroupsByType(selectedEvent?.events ?? []),
|
|
31286
31215
|
[selectedEvent?.events]
|
|
31287
31216
|
);
|
|
31288
|
-
const [parseNestedJson, setParseNestedJson] = (0,
|
|
31217
|
+
const [parseNestedJson, setParseNestedJson] = (0, import_react54.useState)(true);
|
|
31289
31218
|
if (!selectedEvent) {
|
|
31290
|
-
return /* @__PURE__ */ (0,
|
|
31219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
|
|
31291
31220
|
}
|
|
31292
31221
|
const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
|
|
31293
31222
|
const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
|
|
@@ -31313,9 +31242,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
31313
31242
|
const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
|
|
31314
31243
|
const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0 || isResponseSuppressed;
|
|
31315
31244
|
const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
|
|
31316
|
-
return /* @__PURE__ */ (0,
|
|
31317
|
-
/* @__PURE__ */ (0,
|
|
31318
|
-
|
|
31245
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
|
|
31246
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
|
|
31247
|
+
import_material18.Box,
|
|
31319
31248
|
{
|
|
31320
31249
|
sx: {
|
|
31321
31250
|
alignItems: "center",
|
|
@@ -31327,91 +31256,91 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
31327
31256
|
py: 1
|
|
31328
31257
|
},
|
|
31329
31258
|
children: [
|
|
31330
|
-
/* @__PURE__ */ (0,
|
|
31331
|
-
onClose && /* @__PURE__ */ (0,
|
|
31259
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
|
|
31260
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material10.Close, {}) })
|
|
31332
31261
|
]
|
|
31333
31262
|
}
|
|
31334
31263
|
),
|
|
31335
|
-
/* @__PURE__ */ (0,
|
|
31336
|
-
/* @__PURE__ */ (0,
|
|
31337
|
-
/* @__PURE__ */ (0,
|
|
31338
|
-
/* @__PURE__ */ (0,
|
|
31339
|
-
/* @__PURE__ */ (0,
|
|
31340
|
-
/* @__PURE__ */ (0,
|
|
31341
|
-
/* @__PURE__ */ (0,
|
|
31342
|
-
/* @__PURE__ */ (0,
|
|
31264
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { spacing: 2, children: [
|
|
31265
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
|
|
31266
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
|
|
31267
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31268
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
|
|
31269
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31270
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
|
|
31271
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
|
|
31343
31272
|
] })
|
|
31344
31273
|
] }),
|
|
31345
|
-
/* @__PURE__ */ (0,
|
|
31346
|
-
/* @__PURE__ */ (0,
|
|
31347
|
-
/* @__PURE__ */ (0,
|
|
31348
|
-
/* @__PURE__ */ (0,
|
|
31349
|
-
/* @__PURE__ */ (0,
|
|
31274
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31275
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
|
|
31276
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31277
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
|
|
31278
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: selectedEvent.operation_name })
|
|
31350
31279
|
] })
|
|
31351
31280
|
] })
|
|
31352
31281
|
] }),
|
|
31353
|
-
/* @__PURE__ */ (0,
|
|
31354
|
-
/* @__PURE__ */ (0,
|
|
31355
|
-
/* @__PURE__ */ (0,
|
|
31356
|
-
/* @__PURE__ */ (0,
|
|
31357
|
-
/* @__PURE__ */ (0,
|
|
31358
|
-
/* @__PURE__ */ (0,
|
|
31282
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
|
|
31283
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31284
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
|
|
31285
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31286
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { variant: "body2", children: selectedEvent.resource_name }),
|
|
31287
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: selectedEvent.resource_name })
|
|
31359
31288
|
] })
|
|
31360
31289
|
] }),
|
|
31361
|
-
Boolean(cfnResourceType) && /* @__PURE__ */ (0,
|
|
31362
|
-
/* @__PURE__ */ (0,
|
|
31363
|
-
/* @__PURE__ */ (0,
|
|
31364
|
-
/* @__PURE__ */ (0,
|
|
31365
|
-
/* @__PURE__ */ (0,
|
|
31290
|
+
Boolean(cfnResourceType) && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31291
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
|
|
31292
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31293
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
|
|
31294
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: cfnResourceType })
|
|
31366
31295
|
] })
|
|
31367
31296
|
] })
|
|
31368
31297
|
] }),
|
|
31369
|
-
Boolean(resourceArn) && /* @__PURE__ */ (0,
|
|
31370
|
-
/* @__PURE__ */ (0,
|
|
31371
|
-
/* @__PURE__ */ (0,
|
|
31372
|
-
/* @__PURE__ */ (0,
|
|
31373
|
-
/* @__PURE__ */ (0,
|
|
31298
|
+
Boolean(resourceArn) && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31299
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
|
|
31300
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31301
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { variant: "body2", children: resourceArn }),
|
|
31302
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: resourceArn })
|
|
31374
31303
|
] })
|
|
31375
31304
|
] }),
|
|
31376
|
-
/* @__PURE__ */ (0,
|
|
31377
|
-
/* @__PURE__ */ (0,
|
|
31378
|
-
/* @__PURE__ */ (0,
|
|
31379
|
-
/* @__PURE__ */ (0,
|
|
31380
|
-
/* @__PURE__ */ (0,
|
|
31381
|
-
/* @__PURE__ */ (0,
|
|
31305
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
|
|
31306
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31307
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
|
|
31308
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31309
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
|
|
31310
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: selectedEvent.account_id })
|
|
31382
31311
|
] })
|
|
31383
31312
|
] }),
|
|
31384
|
-
/* @__PURE__ */ (0,
|
|
31385
|
-
/* @__PURE__ */ (0,
|
|
31386
|
-
/* @__PURE__ */ (0,
|
|
31387
|
-
/* @__PURE__ */ (0,
|
|
31388
|
-
/* @__PURE__ */ (0,
|
|
31313
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31314
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
|
|
31315
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31316
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
|
|
31317
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: selectedEvent.region })
|
|
31389
31318
|
] })
|
|
31390
31319
|
] })
|
|
31391
31320
|
] }),
|
|
31392
|
-
/* @__PURE__ */ (0,
|
|
31393
|
-
/* @__PURE__ */ (0,
|
|
31394
|
-
/* @__PURE__ */ (0,
|
|
31395
|
-
/* @__PURE__ */ (0,
|
|
31396
|
-
/* @__PURE__ */ (0,
|
|
31397
|
-
/* @__PURE__ */ (0,
|
|
31321
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
|
|
31322
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31323
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
|
|
31324
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31325
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ResponsiveTimestampCell, { date: unixNanoToDate(selectedEvent.start_time_unix_nano) }) }),
|
|
31326
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
|
|
31398
31327
|
] })
|
|
31399
31328
|
] }),
|
|
31400
|
-
duration !== void 0 && /* @__PURE__ */ (0,
|
|
31401
|
-
/* @__PURE__ */ (0,
|
|
31402
|
-
/* @__PURE__ */ (0,
|
|
31403
|
-
/* @__PURE__ */ (0,
|
|
31329
|
+
duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31330
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
|
|
31331
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31332
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Typography, { variant: "body2", children: [
|
|
31404
31333
|
duration,
|
|
31405
31334
|
"ms"
|
|
31406
31335
|
] }),
|
|
31407
|
-
/* @__PURE__ */ (0,
|
|
31336
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: `${duration}ms` })
|
|
31408
31337
|
] })
|
|
31409
31338
|
] })
|
|
31410
31339
|
] }),
|
|
31411
|
-
/* @__PURE__ */ (0,
|
|
31412
|
-
/* @__PURE__ */ (0,
|
|
31413
|
-
/* @__PURE__ */ (0,
|
|
31414
|
-
|
|
31340
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31341
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
|
|
31342
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Stack, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
31343
|
+
import_material18.Chip,
|
|
31415
31344
|
{
|
|
31416
31345
|
color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
|
|
31417
31346
|
"data-testid": EVENT_DETAILS_STATUS_TEST_ID,
|
|
@@ -31421,50 +31350,50 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
31421
31350
|
) })
|
|
31422
31351
|
] })
|
|
31423
31352
|
] }) }),
|
|
31424
|
-
/* @__PURE__ */ (0,
|
|
31425
|
-
/* @__PURE__ */ (0,
|
|
31426
|
-
selectedEvent.iam_errors_suppressed && /* @__PURE__ */ (0,
|
|
31427
|
-
!selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ (0,
|
|
31428
|
-
eventGroups.permissions && /* @__PURE__ */ (0,
|
|
31429
|
-
eventGroups.errors && /* @__PURE__ */ (0,
|
|
31430
|
-
eventGroups.warnings && /* @__PURE__ */ (0,
|
|
31353
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Divider, {}),
|
|
31354
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(ToggleSection, { headline: "Permissions", children: [
|
|
31355
|
+
selectedEvent.iam_errors_suppressed && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Alert, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
|
|
31356
|
+
!selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
|
|
31357
|
+
eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
|
|
31358
|
+
eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
|
|
31359
|
+
eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
|
|
31431
31360
|
] }),
|
|
31432
|
-
hasPayloads && /* @__PURE__ */ (0,
|
|
31433
|
-
/* @__PURE__ */ (0,
|
|
31434
|
-
/* @__PURE__ */ (0,
|
|
31361
|
+
hasPayloads && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
|
|
31362
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Divider, {}),
|
|
31363
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
31435
31364
|
ToggleSection,
|
|
31436
31365
|
{
|
|
31437
|
-
action: /* @__PURE__ */ (0,
|
|
31438
|
-
|
|
31366
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
31367
|
+
import_material18.FormControlLabel,
|
|
31439
31368
|
{
|
|
31440
|
-
control: /* @__PURE__ */ (0,
|
|
31369
|
+
control: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Switch, { checked: !parseNestedJson, onChange: (event) => {
|
|
31441
31370
|
setParseNestedJson(!event.target.checked);
|
|
31442
31371
|
}, size: "small" }),
|
|
31443
|
-
label: /* @__PURE__ */ (0,
|
|
31372
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { variant: "caption", children: "View raw data" }),
|
|
31444
31373
|
sx: { mr: 0 }
|
|
31445
31374
|
}
|
|
31446
31375
|
),
|
|
31447
31376
|
headline: "Payloads",
|
|
31448
|
-
children: /* @__PURE__ */ (0,
|
|
31449
|
-
requestPayload !== void 0 && /* @__PURE__ */ (0,
|
|
31450
|
-
/* @__PURE__ */ (0,
|
|
31451
|
-
/* @__PURE__ */ (0,
|
|
31377
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { spacing: 2, children: [
|
|
31378
|
+
requestPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31379
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
|
|
31380
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
|
|
31452
31381
|
] }),
|
|
31453
|
-
(responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ (0,
|
|
31454
|
-
/* @__PURE__ */ (0,
|
|
31455
|
-
isResponseSuppressed ? /* @__PURE__ */ (0,
|
|
31382
|
+
(responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31383
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Response" }),
|
|
31384
|
+
isResponseSuppressed ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Box, { sx: { py: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Alert, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
|
|
31456
31385
|
] }),
|
|
31457
|
-
exceptionPayload !== void 0 && /* @__PURE__ */ (0,
|
|
31458
|
-
/* @__PURE__ */ (0,
|
|
31459
|
-
/* @__PURE__ */ (0,
|
|
31386
|
+
exceptionPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31387
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Exception" }),
|
|
31388
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
|
|
31460
31389
|
] })
|
|
31461
31390
|
] })
|
|
31462
31391
|
}
|
|
31463
31392
|
)
|
|
31464
31393
|
] }),
|
|
31465
|
-
isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ (0,
|
|
31466
|
-
/* @__PURE__ */ (0,
|
|
31467
|
-
/* @__PURE__ */ (0,
|
|
31394
|
+
isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
|
|
31395
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Divider, {}),
|
|
31396
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
31468
31397
|
LambdaInvokeLogsSection,
|
|
31469
31398
|
{
|
|
31470
31399
|
endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
|
|
@@ -31475,30 +31404,30 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
31475
31404
|
}
|
|
31476
31405
|
) })
|
|
31477
31406
|
] }),
|
|
31478
|
-
/* @__PURE__ */ (0,
|
|
31479
|
-
/* @__PURE__ */ (0,
|
|
31480
|
-
/* @__PURE__ */ (0,
|
|
31481
|
-
/* @__PURE__ */ (0,
|
|
31482
|
-
/* @__PURE__ */ (0,
|
|
31483
|
-
/* @__PURE__ */ (0,
|
|
31484
|
-
/* @__PURE__ */ (0,
|
|
31407
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Divider, {}),
|
|
31408
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { spacing: 1, children: [
|
|
31409
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31410
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
|
|
31411
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31412
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
|
|
31413
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: selectedEvent.span_id })
|
|
31485
31414
|
] })
|
|
31486
31415
|
] }),
|
|
31487
|
-
/* @__PURE__ */ (0,
|
|
31488
|
-
/* @__PURE__ */ (0,
|
|
31489
|
-
/* @__PURE__ */ (0,
|
|
31490
|
-
/* @__PURE__ */ (0,
|
|
31491
|
-
/* @__PURE__ */ (0,
|
|
31416
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31417
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
|
|
31418
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31419
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
|
|
31420
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: selectedEvent.trace_id })
|
|
31492
31421
|
] })
|
|
31493
31422
|
] }),
|
|
31494
|
-
requestId !== void 0 && /* @__PURE__ */ (0,
|
|
31495
|
-
/* @__PURE__ */ (0,
|
|
31496
|
-
/* @__PURE__ */ (0,
|
|
31497
|
-
/* @__PURE__ */ (0,
|
|
31498
|
-
/* @__PURE__ */ (0,
|
|
31423
|
+
requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { children: [
|
|
31424
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
|
|
31425
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
|
|
31426
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
|
|
31427
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CopyButton, { value: requestId })
|
|
31499
31428
|
] })
|
|
31500
31429
|
] }),
|
|
31501
|
-
eventGroups.info && /* @__PURE__ */ (0,
|
|
31430
|
+
eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
|
|
31502
31431
|
] }) })
|
|
31503
31432
|
] }) })
|
|
31504
31433
|
] });
|
|
@@ -31506,39 +31435,39 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
31506
31435
|
|
|
31507
31436
|
// src/components/trace-graph/trace-graph.tsx
|
|
31508
31437
|
var import_base = require("@xyflow/react/dist/base.css");
|
|
31509
|
-
var
|
|
31510
|
-
var
|
|
31511
|
-
var
|
|
31438
|
+
var import_material21 = require("@mui/material");
|
|
31439
|
+
var import_react59 = require("@xyflow/react");
|
|
31440
|
+
var import_react60 = require("react");
|
|
31512
31441
|
|
|
31513
31442
|
// src/components/trace-graph/service-node.tsx
|
|
31514
31443
|
var import_icons_material11 = require("@mui/icons-material");
|
|
31515
|
-
var
|
|
31516
|
-
var
|
|
31444
|
+
var import_material19 = require("@mui/material");
|
|
31445
|
+
var import_react55 = require("@xyflow/react");
|
|
31517
31446
|
var import_style = require("@xyflow/react/dist/style.css");
|
|
31518
31447
|
var React122 = require("react");
|
|
31519
|
-
var
|
|
31520
|
-
var
|
|
31448
|
+
var import_react56 = require("react");
|
|
31449
|
+
var import_jsx_runtime141 = require("react/jsx-runtime");
|
|
31521
31450
|
var handleStyle = {
|
|
31522
31451
|
backgroundColor: "white",
|
|
31523
31452
|
borderColor: "lightgray",
|
|
31524
31453
|
opacity: 0
|
|
31525
31454
|
};
|
|
31526
31455
|
var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
|
|
31527
|
-
const theme = (0,
|
|
31528
|
-
return /* @__PURE__ */ (0,
|
|
31529
|
-
/* @__PURE__ */ (0,
|
|
31530
|
-
/* @__PURE__ */ (0,
|
|
31531
|
-
/* @__PURE__ */ (0,
|
|
31532
|
-
|
|
31456
|
+
const theme = (0, import_material19.useTheme)();
|
|
31457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
|
|
31458
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react55.Handle, { position: import_react55.Position.Left, style: handleStyle, type: "target" }),
|
|
31459
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react55.Handle, { position: import_react55.Position.Right, style: handleStyle, type: "source" }),
|
|
31460
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
31461
|
+
import_material19.Stack,
|
|
31533
31462
|
{
|
|
31534
31463
|
alignItems: "center",
|
|
31535
31464
|
direction: "row",
|
|
31536
31465
|
sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
|
|
31537
31466
|
children: [
|
|
31538
|
-
/* @__PURE__ */ (0,
|
|
31539
|
-
/* @__PURE__ */ (0,
|
|
31540
|
-
/* @__PURE__ */ (0,
|
|
31541
|
-
|
|
31467
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material19.Box, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(AwsServiceIcon, { hideTooltip: true, service: event.service_name, size: "medium" }) }),
|
|
31468
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material19.Stack, { sx: expanded ? void 0 : { minWidth: 0 }, children: [
|
|
31469
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
31470
|
+
import_material19.Typography,
|
|
31542
31471
|
{
|
|
31543
31472
|
noWrap: !expanded,
|
|
31544
31473
|
sx: { fontWeight: 700, lineHeight: 1.25, ...expanded && { whiteSpace: "nowrap" } },
|
|
@@ -31546,8 +31475,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
|
|
|
31546
31475
|
children: getServiceDisplayName(event.service_name)
|
|
31547
31476
|
}
|
|
31548
31477
|
),
|
|
31549
|
-
event.resource_name != "" && /* @__PURE__ */ (0,
|
|
31550
|
-
|
|
31478
|
+
event.resource_name != "" && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
31479
|
+
import_material19.Typography,
|
|
31551
31480
|
{
|
|
31552
31481
|
color: "text.secondary",
|
|
31553
31482
|
noWrap: !expanded,
|
|
@@ -31560,16 +31489,16 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
|
|
|
31560
31489
|
]
|
|
31561
31490
|
}
|
|
31562
31491
|
),
|
|
31563
|
-
/* @__PURE__ */ (0,
|
|
31564
|
-
/* @__PURE__ */ (0,
|
|
31565
|
-
|
|
31492
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material19.Divider, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
|
|
31493
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
31494
|
+
import_material19.Stack,
|
|
31566
31495
|
{
|
|
31567
31496
|
alignItems: "center",
|
|
31568
31497
|
direction: "row",
|
|
31569
31498
|
sx: expanded ? { pb: "5px", pr: "8px", pt: "1px" } : { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
|
|
31570
31499
|
children: [
|
|
31571
|
-
/* @__PURE__ */ (0,
|
|
31572
|
-
|
|
31500
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
31501
|
+
import_material19.Box,
|
|
31573
31502
|
{
|
|
31574
31503
|
sx: {
|
|
31575
31504
|
alignItems: "center",
|
|
@@ -31579,13 +31508,13 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
|
|
|
31579
31508
|
width: "38px"
|
|
31580
31509
|
},
|
|
31581
31510
|
children: [
|
|
31582
|
-
(isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ (0,
|
|
31583
|
-
isError && !hasPermissionEvents && /* @__PURE__ */ (0,
|
|
31511
|
+
(isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material19.Tooltip, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material11.GppBad, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
|
|
31512
|
+
isError && !hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material19.Tooltip, { arrow: true, title: "Error", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material11.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
|
|
31584
31513
|
]
|
|
31585
31514
|
}
|
|
31586
31515
|
),
|
|
31587
|
-
/* @__PURE__ */ (0,
|
|
31588
|
-
|
|
31516
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
31517
|
+
import_material19.Typography,
|
|
31589
31518
|
{
|
|
31590
31519
|
"data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
|
|
31591
31520
|
noWrap: !expanded,
|
|
@@ -31599,12 +31528,12 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
|
|
|
31599
31528
|
)
|
|
31600
31529
|
] });
|
|
31601
31530
|
};
|
|
31602
|
-
var ServiceNode = (0,
|
|
31603
|
-
const theme = (0,
|
|
31604
|
-
const [isHovered, setIsHovered] = (0,
|
|
31605
|
-
const nodeRef = (0,
|
|
31531
|
+
var ServiceNode = (0, import_react56.memo)(({ data, selected }) => {
|
|
31532
|
+
const theme = (0, import_material19.useTheme)();
|
|
31533
|
+
const [isHovered, setIsHovered] = (0, import_react56.useState)(false);
|
|
31534
|
+
const nodeRef = (0, import_react56.useRef)(null);
|
|
31606
31535
|
const isError = data.event.status_code === 2;
|
|
31607
|
-
const hasPermissionEvents = (0,
|
|
31536
|
+
const hasPermissionEvents = (0, import_react56.useMemo)(
|
|
31608
31537
|
() => data.event.events.some(
|
|
31609
31538
|
(event) => event.event_type === "iam.policy_evaluation" && event.name === "iam.policy.denied"
|
|
31610
31539
|
),
|
|
@@ -31633,8 +31562,8 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
31633
31562
|
const xyNode = nodeRef.current?.closest(".react-flow__node");
|
|
31634
31563
|
if (xyNode) xyNode.style.zIndex = "";
|
|
31635
31564
|
};
|
|
31636
|
-
return /* @__PURE__ */ (0,
|
|
31637
|
-
|
|
31565
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
31566
|
+
import_material19.Box,
|
|
31638
31567
|
{
|
|
31639
31568
|
"data-testid": SERVICE_NODE_TEST_ID,
|
|
31640
31569
|
onMouseEnter: handleMouseEnter,
|
|
@@ -31644,8 +31573,8 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
31644
31573
|
sx: { display: "inline-block", position: "relative" },
|
|
31645
31574
|
tabIndex: 0,
|
|
31646
31575
|
children: [
|
|
31647
|
-
/* @__PURE__ */ (0,
|
|
31648
|
-
|
|
31576
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
31577
|
+
import_material19.Box,
|
|
31649
31578
|
{
|
|
31650
31579
|
sx: {
|
|
31651
31580
|
...sharedBoxSx,
|
|
@@ -31653,11 +31582,11 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
31653
31582
|
maxWidth: 220,
|
|
31654
31583
|
overflow: "hidden"
|
|
31655
31584
|
},
|
|
31656
|
-
children: /* @__PURE__ */ (0,
|
|
31585
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(NodeContent, { ...contentProps, expanded: false })
|
|
31657
31586
|
}
|
|
31658
31587
|
),
|
|
31659
|
-
/* @__PURE__ */ (0,
|
|
31660
|
-
|
|
31588
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
31589
|
+
import_material19.Box,
|
|
31661
31590
|
{
|
|
31662
31591
|
onMouseLeave: handleMouseLeave,
|
|
31663
31592
|
sx: {
|
|
@@ -31671,7 +31600,7 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
31671
31600
|
width: "max-content",
|
|
31672
31601
|
zIndex: 10
|
|
31673
31602
|
},
|
|
31674
|
-
children: /* @__PURE__ */ (0,
|
|
31603
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(NodeContent, { ...contentProps, expanded: true })
|
|
31675
31604
|
}
|
|
31676
31605
|
)
|
|
31677
31606
|
]
|
|
@@ -31766,19 +31695,19 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
|
|
|
31766
31695
|
|
|
31767
31696
|
// src/components/trace-graph/xyflow/controls.tsx
|
|
31768
31697
|
var import_icons_material12 = require("@mui/icons-material");
|
|
31769
|
-
var
|
|
31770
|
-
var
|
|
31771
|
-
var
|
|
31698
|
+
var import_material20 = require("@mui/material");
|
|
31699
|
+
var import_react57 = require("@xyflow/react");
|
|
31700
|
+
var import_react58 = require("react");
|
|
31772
31701
|
var import_shallow = require("zustand/shallow");
|
|
31773
|
-
var
|
|
31702
|
+
var import_jsx_runtime142 = require("react/jsx-runtime");
|
|
31774
31703
|
var selector = (s) => ({
|
|
31775
31704
|
isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
|
|
31776
31705
|
maxZoomReached: s.transform[2] >= s.maxZoom,
|
|
31777
31706
|
minZoomReached: s.transform[2] <= s.minZoom
|
|
31778
31707
|
});
|
|
31779
|
-
var Controls = (0,
|
|
31780
|
-
const { maxZoomReached, minZoomReached } = (0,
|
|
31781
|
-
const { fitView, zoomIn, zoomOut } = (0,
|
|
31708
|
+
var Controls = (0, import_react58.memo)(() => {
|
|
31709
|
+
const { maxZoomReached, minZoomReached } = (0, import_react57.useStore)(selector, import_shallow.shallow);
|
|
31710
|
+
const { fitView, zoomIn, zoomOut } = (0, import_react57.useReactFlow)();
|
|
31782
31711
|
const onZoomInHandler = () => {
|
|
31783
31712
|
void zoomIn();
|
|
31784
31713
|
};
|
|
@@ -31788,8 +31717,8 @@ var Controls = (0, import_react59.memo)(() => {
|
|
|
31788
31717
|
const onFitViewHandler = () => {
|
|
31789
31718
|
void fitView();
|
|
31790
31719
|
};
|
|
31791
|
-
return /* @__PURE__ */ (0,
|
|
31792
|
-
|
|
31720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
|
|
31721
|
+
import_material20.Box,
|
|
31793
31722
|
{
|
|
31794
31723
|
sx: {
|
|
31795
31724
|
bottom: 0,
|
|
@@ -31802,33 +31731,33 @@ var Controls = (0, import_react59.memo)(() => {
|
|
|
31802
31731
|
zIndex: 5
|
|
31803
31732
|
},
|
|
31804
31733
|
children: [
|
|
31805
|
-
/* @__PURE__ */ (0,
|
|
31806
|
-
|
|
31734
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
31735
|
+
import_material20.IconButton,
|
|
31807
31736
|
{
|
|
31808
31737
|
className: "react-flow__controls-zoomin",
|
|
31809
31738
|
disabled: maxZoomReached,
|
|
31810
31739
|
onClick: onZoomInHandler,
|
|
31811
31740
|
size: "small",
|
|
31812
|
-
children: /* @__PURE__ */ (0,
|
|
31741
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material12.Add, {})
|
|
31813
31742
|
}
|
|
31814
31743
|
),
|
|
31815
|
-
/* @__PURE__ */ (0,
|
|
31816
|
-
|
|
31744
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
31745
|
+
import_material20.IconButton,
|
|
31817
31746
|
{
|
|
31818
31747
|
className: "react-flow__controls-zoomout",
|
|
31819
31748
|
disabled: minZoomReached,
|
|
31820
31749
|
onClick: onZoomOutHandler,
|
|
31821
31750
|
size: "small",
|
|
31822
|
-
children: /* @__PURE__ */ (0,
|
|
31751
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material12.Remove, {})
|
|
31823
31752
|
}
|
|
31824
31753
|
),
|
|
31825
|
-
/* @__PURE__ */ (0,
|
|
31826
|
-
|
|
31754
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
31755
|
+
import_material20.IconButton,
|
|
31827
31756
|
{
|
|
31828
31757
|
className: "react-flow__controls-fitview",
|
|
31829
31758
|
onClick: onFitViewHandler,
|
|
31830
31759
|
size: "small",
|
|
31831
|
-
children: /* @__PURE__ */ (0,
|
|
31760
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material12.FitScreen, {})
|
|
31832
31761
|
}
|
|
31833
31762
|
)
|
|
31834
31763
|
]
|
|
@@ -31837,7 +31766,7 @@ var Controls = (0, import_react59.memo)(() => {
|
|
|
31837
31766
|
});
|
|
31838
31767
|
|
|
31839
31768
|
// src/components/trace-graph/trace-graph.tsx
|
|
31840
|
-
var
|
|
31769
|
+
var import_jsx_runtime143 = require("react/jsx-runtime");
|
|
31841
31770
|
var nodeTypes = {
|
|
31842
31771
|
service: ServiceNode
|
|
31843
31772
|
};
|
|
@@ -31847,9 +31776,9 @@ var TraceGraph = ({
|
|
|
31847
31776
|
onRefresh,
|
|
31848
31777
|
spans
|
|
31849
31778
|
}) => {
|
|
31850
|
-
const [nodes2, setNodes, onNodesChange] = (0,
|
|
31851
|
-
const [edges, setEdges] = (0,
|
|
31852
|
-
(0,
|
|
31779
|
+
const [nodes2, setNodes, onNodesChange] = (0, import_react59.useNodesState)([]);
|
|
31780
|
+
const [edges, setEdges] = (0, import_react59.useEdgesState)([]);
|
|
31781
|
+
(0, import_react60.useEffect)(() => {
|
|
31853
31782
|
const allNodes = [];
|
|
31854
31783
|
const allEdges = [];
|
|
31855
31784
|
for (const span of spans.data ?? []) {
|
|
@@ -31864,15 +31793,15 @@ var TraceGraph = ({
|
|
|
31864
31793
|
},
|
|
31865
31794
|
id: span.span_id,
|
|
31866
31795
|
position: { x: 0, y: 0 },
|
|
31867
|
-
sourcePosition:
|
|
31868
|
-
targetPosition:
|
|
31796
|
+
sourcePosition: import_react59.Position.Right,
|
|
31797
|
+
targetPosition: import_react59.Position.Left,
|
|
31869
31798
|
type: "service"
|
|
31870
31799
|
});
|
|
31871
31800
|
if (span.parent_span_id !== null) {
|
|
31872
31801
|
allEdges.push({
|
|
31873
31802
|
animated: false,
|
|
31874
31803
|
id: `e-${span.parent_span_id}-${span.span_id}`,
|
|
31875
|
-
markerEnd: { color: "lightgray", height: 16, type:
|
|
31804
|
+
markerEnd: { color: "lightgray", height: 16, type: import_react59.MarkerType.Arrow, width: 16 },
|
|
31876
31805
|
source: span.parent_span_id,
|
|
31877
31806
|
style: { stroke: "lightgray", strokeWidth: 1 },
|
|
31878
31807
|
target: span.span_id
|
|
@@ -31881,7 +31810,7 @@ var TraceGraph = ({
|
|
|
31881
31810
|
for (const outgoingLinkSpanId of span.outgoing_link_span_ids ?? []) {
|
|
31882
31811
|
allEdges.push({
|
|
31883
31812
|
id: `e-link-${outgoingLinkSpanId}-${span.span_id}`,
|
|
31884
|
-
markerEnd: { color: "lightgray", height: 16, type:
|
|
31813
|
+
markerEnd: { color: "lightgray", height: 16, type: import_react59.MarkerType.Arrow, width: 16 },
|
|
31885
31814
|
source: outgoingLinkSpanId,
|
|
31886
31815
|
style: { stroke: "lightgray", strokeWidth: 1 },
|
|
31887
31816
|
// animated: true,
|
|
@@ -31903,12 +31832,12 @@ var TraceGraph = ({
|
|
|
31903
31832
|
setNodes(layoutedNodes);
|
|
31904
31833
|
setEdges(layoutedEdges);
|
|
31905
31834
|
}, [spans.data, initialFocusEventId, setNodes, setEdges]);
|
|
31906
|
-
const theme = (0,
|
|
31907
|
-
return /* @__PURE__ */ (0,
|
|
31908
|
-
spans.error && /* @__PURE__ */ (0,
|
|
31909
|
-
|
|
31835
|
+
const theme = (0, import_material21.useTheme)();
|
|
31836
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
|
|
31837
|
+
spans.error && /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
|
|
31838
|
+
import_material21.Alert,
|
|
31910
31839
|
{
|
|
31911
|
-
action: /* @__PURE__ */ (0,
|
|
31840
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material21.Button, { onClick: () => {
|
|
31912
31841
|
onRefresh();
|
|
31913
31842
|
}, children: "Retry" }),
|
|
31914
31843
|
severity: "error",
|
|
@@ -31919,8 +31848,8 @@ var TraceGraph = ({
|
|
|
31919
31848
|
]
|
|
31920
31849
|
}
|
|
31921
31850
|
),
|
|
31922
|
-
/* @__PURE__ */ (0,
|
|
31923
|
-
|
|
31851
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
|
|
31852
|
+
import_react59.ReactFlow,
|
|
31924
31853
|
{
|
|
31925
31854
|
"data-testid": TRACE_GRAPH_TEST_ID,
|
|
31926
31855
|
edges,
|
|
@@ -31937,9 +31866,9 @@ var TraceGraph = ({
|
|
|
31937
31866
|
onNodesChange,
|
|
31938
31867
|
selectNodesOnDrag: false,
|
|
31939
31868
|
children: [
|
|
31940
|
-
/* @__PURE__ */ (0,
|
|
31941
|
-
/* @__PURE__ */ (0,
|
|
31942
|
-
|
|
31869
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Controls, {}),
|
|
31870
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
31871
|
+
import_react59.Background,
|
|
31943
31872
|
{
|
|
31944
31873
|
bgColor: theme.palette.background.default,
|
|
31945
31874
|
color: theme.palette.text.disabled
|
|
@@ -31952,7 +31881,7 @@ var TraceGraph = ({
|
|
|
31952
31881
|
};
|
|
31953
31882
|
|
|
31954
31883
|
// src/pages/trace-graph-page.tsx
|
|
31955
|
-
var
|
|
31884
|
+
var import_jsx_runtime144 = require("react/jsx-runtime");
|
|
31956
31885
|
var DRAWER_WIDTH = "35%";
|
|
31957
31886
|
var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
|
|
31958
31887
|
flexGrow: 1,
|
|
@@ -31969,7 +31898,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
|
|
|
31969
31898
|
})
|
|
31970
31899
|
}
|
|
31971
31900
|
}));
|
|
31972
|
-
var StyledDrawer = (0, import_styles.styled)(
|
|
31901
|
+
var StyledDrawer = (0, import_styles.styled)(import_material22.Drawer)(({ headerHeight }) => ({
|
|
31973
31902
|
"& .MuiDrawer-paper": {
|
|
31974
31903
|
bottom: 0,
|
|
31975
31904
|
boxSizing: "border-box",
|
|
@@ -31995,8 +31924,8 @@ var TraceGraphView = ({
|
|
|
31995
31924
|
spanId,
|
|
31996
31925
|
spans,
|
|
31997
31926
|
traceId
|
|
31998
|
-
}) => /* @__PURE__ */ (0,
|
|
31999
|
-
|
|
31927
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
31928
|
+
import_material22.Box,
|
|
32000
31929
|
{
|
|
32001
31930
|
"data-testid": TRACE_GRAPH_PAGE_TEST_ID,
|
|
32002
31931
|
sx: {
|
|
@@ -32008,14 +31937,14 @@ var TraceGraphView = ({
|
|
|
32008
31937
|
overflow: "hidden"
|
|
32009
31938
|
},
|
|
32010
31939
|
children: [
|
|
32011
|
-
/* @__PURE__ */ (0,
|
|
32012
|
-
/* @__PURE__ */ (0,
|
|
31940
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_material22.Box, { sx: { display: "flex", width: "100%" }, children: [
|
|
31941
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_material22.Button, { onClick: () => {
|
|
32013
31942
|
navigateToSpansList();
|
|
32014
|
-
}, startIcon: /* @__PURE__ */ (0,
|
|
32015
|
-
/* @__PURE__ */ (0,
|
|
31943
|
+
}, startIcon: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material13.ArrowBack, {}), children: "Go back" }),
|
|
31944
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_material22.Box, { sx: { flexGrow: 1 } })
|
|
32016
31945
|
] }),
|
|
32017
|
-
/* @__PURE__ */ (0,
|
|
32018
|
-
|
|
31946
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
31947
|
+
import_material22.Paper,
|
|
32019
31948
|
{
|
|
32020
31949
|
sx: {
|
|
32021
31950
|
display: "flex",
|
|
@@ -32025,14 +31954,14 @@ var TraceGraphView = ({
|
|
|
32025
31954
|
width: "100%"
|
|
32026
31955
|
},
|
|
32027
31956
|
children: [
|
|
32028
|
-
/* @__PURE__ */ (0,
|
|
32029
|
-
|
|
31957
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
31958
|
+
import_material22.Box,
|
|
32030
31959
|
{
|
|
32031
31960
|
sx: {
|
|
32032
31961
|
height: "100%",
|
|
32033
31962
|
overflow: "auto"
|
|
32034
31963
|
},
|
|
32035
|
-
children: traceId !== void 0 && /* @__PURE__ */ (0,
|
|
31964
|
+
children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
32036
31965
|
TraceGraph,
|
|
32037
31966
|
{
|
|
32038
31967
|
initialFocusEventId: spanId,
|
|
@@ -32049,7 +31978,7 @@ var TraceGraphView = ({
|
|
|
32049
31978
|
) })
|
|
32050
31979
|
}
|
|
32051
31980
|
) }),
|
|
32052
|
-
/* @__PURE__ */ (0,
|
|
31981
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
|
|
32053
31982
|
]
|
|
32054
31983
|
}
|
|
32055
31984
|
)
|
|
@@ -32093,10 +32022,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
|
|
|
32093
32022
|
var TraceGraphPage = ({ onClose, spanId, traceId }) => {
|
|
32094
32023
|
const api = useAppInspectorApi();
|
|
32095
32024
|
const { headerHeight } = useAppInspector();
|
|
32096
|
-
const [spans, setSpans] = (0,
|
|
32097
|
-
const [loading, setLoading] = (0,
|
|
32098
|
-
const [fetchError, setFetchError] = (0,
|
|
32099
|
-
const fetchSpans = (0,
|
|
32025
|
+
const [spans, setSpans] = (0, import_react62.useState)();
|
|
32026
|
+
const [loading, setLoading] = (0, import_react62.useState)(false);
|
|
32027
|
+
const [fetchError, setFetchError] = (0, import_react62.useState)();
|
|
32028
|
+
const fetchSpans = (0, import_react62.useCallback)(async () => {
|
|
32100
32029
|
setLoading(true);
|
|
32101
32030
|
try {
|
|
32102
32031
|
const spans2 = await fetchConnectedTraces(api, [traceId]);
|
|
@@ -32109,27 +32038,27 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
|
|
|
32109
32038
|
setLoading(false);
|
|
32110
32039
|
}
|
|
32111
32040
|
}, [api, traceId]);
|
|
32112
|
-
(0,
|
|
32041
|
+
(0, import_react62.useEffect)(() => {
|
|
32113
32042
|
void fetchSpans();
|
|
32114
32043
|
}, [fetchSpans]);
|
|
32115
|
-
const [open, setOpen] = (0,
|
|
32116
|
-
const [selectedEvent, setSelectedEvent] = (0,
|
|
32117
|
-
const spansReference = (0,
|
|
32118
|
-
(0,
|
|
32044
|
+
const [open, setOpen] = (0, import_react62.useState)(true);
|
|
32045
|
+
const [selectedEvent, setSelectedEvent] = (0, import_react62.useState)(() => spans?.find((span) => span.span_id === spanId));
|
|
32046
|
+
const spansReference = (0, import_react62.useRef)();
|
|
32047
|
+
(0, import_react62.useEffect)(() => {
|
|
32119
32048
|
if (!spansReference.current && spans) {
|
|
32120
32049
|
setSelectedEvent(spans.find((span) => span.span_id === spanId));
|
|
32121
32050
|
spansReference.current = spans;
|
|
32122
32051
|
}
|
|
32123
32052
|
}, [spans, setSelectedEvent, spanId]);
|
|
32124
|
-
const handleEventSelect = (0,
|
|
32053
|
+
const handleEventSelect = (0, import_react62.useCallback)((spanId2) => {
|
|
32125
32054
|
const span = spans?.find((s) => s.span_id === spanId2);
|
|
32126
32055
|
setSelectedEvent(span);
|
|
32127
32056
|
setOpen(true);
|
|
32128
32057
|
}, [spans]);
|
|
32129
|
-
const navigateToSpansList = (0,
|
|
32058
|
+
const navigateToSpansList = (0, import_react62.useCallback)(() => {
|
|
32130
32059
|
onClose?.();
|
|
32131
32060
|
}, [onClose]);
|
|
32132
|
-
return /* @__PURE__ */ (0,
|
|
32061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
32133
32062
|
TraceGraphView,
|
|
32134
32063
|
{
|
|
32135
32064
|
fetchError,
|
|
@@ -32151,7 +32080,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
|
|
|
32151
32080
|
};
|
|
32152
32081
|
|
|
32153
32082
|
// src/pages/spans-list-page.tsx
|
|
32154
|
-
var
|
|
32083
|
+
var import_jsx_runtime145 = require("react/jsx-runtime");
|
|
32155
32084
|
var SpansListPage = () => {
|
|
32156
32085
|
const api = useAppInspectorApi();
|
|
32157
32086
|
const {
|
|
@@ -32172,32 +32101,32 @@ var SpansListPage = () => {
|
|
|
32172
32101
|
warningCount
|
|
32173
32102
|
} = useSpans();
|
|
32174
32103
|
const { checkStatus, phase, status, statusError } = useAppInspectorStatus();
|
|
32175
|
-
const clearSpansSync = (0,
|
|
32104
|
+
const clearSpansSync = (0, import_react63.useCallback)(() => {
|
|
32176
32105
|
void clearSpans();
|
|
32177
32106
|
}, [clearSpans]);
|
|
32178
32107
|
const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
|
|
32179
32108
|
const versionCompatibility = checkEmulatorVersion(localstackVersion);
|
|
32180
|
-
const [bannerDismissed, setBannerDismissed] = (0,
|
|
32109
|
+
const [bannerDismissed, setBannerDismissed] = (0, import_react63.useState)(false);
|
|
32181
32110
|
const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
|
|
32182
|
-
const [selectedTraceId, setSelectedTraceId] = (0,
|
|
32183
|
-
const [selectedSpanId, setSelectedSpanId] = (0,
|
|
32184
|
-
const navigateToSpan = (0,
|
|
32111
|
+
const [selectedTraceId, setSelectedTraceId] = (0, import_react63.useState)();
|
|
32112
|
+
const [selectedSpanId, setSelectedSpanId] = (0, import_react63.useState)();
|
|
32113
|
+
const navigateToSpan = (0, import_react63.useCallback)((span) => {
|
|
32185
32114
|
setSelectedTraceId(span.trace_id);
|
|
32186
32115
|
setSelectedSpanId(span.span_id);
|
|
32187
32116
|
}, []);
|
|
32188
|
-
const handleRetry = (0,
|
|
32117
|
+
const handleRetry = (0, import_react63.useCallback)(() => {
|
|
32189
32118
|
checkStatus();
|
|
32190
32119
|
fetchForward();
|
|
32191
32120
|
}, [checkStatus, fetchForward]);
|
|
32192
|
-
const handleEnable = (0,
|
|
32121
|
+
const handleEnable = (0, import_react63.useCallback)(async () => {
|
|
32193
32122
|
await api.setStatus({ status: "ENABLED" });
|
|
32194
32123
|
clearFetchError();
|
|
32195
32124
|
checkStatus();
|
|
32196
32125
|
}, [api, checkStatus, clearFetchError]);
|
|
32197
|
-
const isDelayedRefetchRef = (0,
|
|
32198
|
-
const delayedRefetchTimerRef = (0,
|
|
32199
|
-
const prevFetchingForwardRef = (0,
|
|
32200
|
-
(0,
|
|
32126
|
+
const isDelayedRefetchRef = (0, import_react63.useRef)(false);
|
|
32127
|
+
const delayedRefetchTimerRef = (0, import_react63.useRef)();
|
|
32128
|
+
const prevFetchingForwardRef = (0, import_react63.useRef)(false);
|
|
32129
|
+
(0, import_react63.useEffect)(() => {
|
|
32201
32130
|
const wasFetching = prevFetchingForwardRef.current;
|
|
32202
32131
|
prevFetchingForwardRef.current = fetchingForward;
|
|
32203
32132
|
if (wasFetching && !fetchingForward) {
|
|
@@ -32218,10 +32147,10 @@ var SpansListPage = () => {
|
|
|
32218
32147
|
switch (phase) {
|
|
32219
32148
|
case "CHECKING_STATUS":
|
|
32220
32149
|
case "CONNECTING_WS": {
|
|
32221
|
-
return /* @__PURE__ */ (0,
|
|
32150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StatusMessage, { phase });
|
|
32222
32151
|
}
|
|
32223
32152
|
case "DISABLED": {
|
|
32224
|
-
return /* @__PURE__ */ (0,
|
|
32153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
32225
32154
|
StatusMessage,
|
|
32226
32155
|
{
|
|
32227
32156
|
onEnable: handleEnable,
|
|
@@ -32230,7 +32159,7 @@ var SpansListPage = () => {
|
|
|
32230
32159
|
);
|
|
32231
32160
|
}
|
|
32232
32161
|
case "INCOMPATIBLE": {
|
|
32233
|
-
return /* @__PURE__ */ (0,
|
|
32162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
32234
32163
|
StatusMessage,
|
|
32235
32164
|
{
|
|
32236
32165
|
localstackVersion,
|
|
@@ -32243,7 +32172,7 @@ var SpansListPage = () => {
|
|
|
32243
32172
|
break;
|
|
32244
32173
|
}
|
|
32245
32174
|
case "UNREACHABLE": {
|
|
32246
|
-
return /* @__PURE__ */ (0,
|
|
32175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
32247
32176
|
StatusMessage,
|
|
32248
32177
|
{
|
|
32249
32178
|
onRetry: handleRetry,
|
|
@@ -32252,9 +32181,9 @@ var SpansListPage = () => {
|
|
|
32252
32181
|
);
|
|
32253
32182
|
}
|
|
32254
32183
|
}
|
|
32255
|
-
return /* @__PURE__ */ (0,
|
|
32256
|
-
/* @__PURE__ */ (0,
|
|
32257
|
-
|
|
32184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
|
|
32185
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
|
|
32186
|
+
import_material23.Box,
|
|
32258
32187
|
{
|
|
32259
32188
|
"data-testid": SPANS_LIST_PAGE_TEST_ID,
|
|
32260
32189
|
sx: {
|
|
@@ -32269,7 +32198,7 @@ var SpansListPage = () => {
|
|
|
32269
32198
|
width: "100%"
|
|
32270
32199
|
},
|
|
32271
32200
|
children: [
|
|
32272
|
-
/* @__PURE__ */ (0,
|
|
32201
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
32273
32202
|
EmulatorVersionBanner,
|
|
32274
32203
|
{
|
|
32275
32204
|
compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
|
|
@@ -32279,7 +32208,7 @@ var SpansListPage = () => {
|
|
|
32279
32208
|
} : void 0
|
|
32280
32209
|
}
|
|
32281
32210
|
),
|
|
32282
|
-
/* @__PURE__ */ (0,
|
|
32211
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
32283
32212
|
SpansList,
|
|
32284
32213
|
{
|
|
32285
32214
|
clearingSpans,
|
|
@@ -32304,7 +32233,7 @@ var SpansListPage = () => {
|
|
|
32304
32233
|
]
|
|
32305
32234
|
}
|
|
32306
32235
|
),
|
|
32307
|
-
selectedTraceId !== void 0 && /* @__PURE__ */ (0,
|
|
32236
|
+
selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(TraceGraphPage, { onClose: () => {
|
|
32308
32237
|
setSelectedTraceId(void 0);
|
|
32309
32238
|
}, spanId: selectedSpanId, traceId: selectedTraceId })
|
|
32310
32239
|
] });
|