@localstack/appinspector-ui 1.0.80 → 1.0.81
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 +856 -701
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +679 -524
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -487,15 +487,15 @@ __export(index_exports, {
|
|
|
487
487
|
module.exports = __toCommonJS(index_exports);
|
|
488
488
|
|
|
489
489
|
// src/pages/spans-list-page.tsx
|
|
490
|
-
var
|
|
491
|
-
var
|
|
490
|
+
var import_material21 = require("@mui/material");
|
|
491
|
+
var import_react65 = require("react");
|
|
492
492
|
|
|
493
493
|
// src/components/spans-list/spans-list.tsx
|
|
494
|
-
var
|
|
494
|
+
var import_material6 = require("@mui/material");
|
|
495
495
|
|
|
496
496
|
// src/components/spans-list/spans-data-grid.tsx
|
|
497
|
-
var
|
|
498
|
-
var
|
|
497
|
+
var import_icons_material2 = require("@mui/icons-material");
|
|
498
|
+
var import_material5 = require("@mui/material");
|
|
499
499
|
|
|
500
500
|
// node_modules/@tanstack/react-table/build/lib/index.mjs
|
|
501
501
|
var React = __toESM(require("react"), 1);
|
|
@@ -10161,7 +10161,7 @@ var AnimatePresence = function(_a2) {
|
|
|
10161
10161
|
};
|
|
10162
10162
|
|
|
10163
10163
|
// src/components/spans-list/spans-data-grid.tsx
|
|
10164
|
-
var
|
|
10164
|
+
var import_react41 = require("react");
|
|
10165
10165
|
|
|
10166
10166
|
// src/components/cells/responsive-timestamp-cell.tsx
|
|
10167
10167
|
var import_react34 = require("react");
|
|
@@ -12648,8 +12648,140 @@ var ServiceCell = (0, import_react39.memo)(({
|
|
|
12648
12648
|
});
|
|
12649
12649
|
ServiceCell.displayName = "ServiceCell";
|
|
12650
12650
|
|
|
12651
|
-
// src/components/spans-list/
|
|
12651
|
+
// src/components/spans-list/span-count-badge.tsx
|
|
12652
|
+
var import_icons_material = require("@mui/icons-material");
|
|
12653
|
+
var import_material4 = require("@mui/material");
|
|
12654
|
+
var import_react40 = require("react");
|
|
12652
12655
|
var import_jsx_runtime124 = require("react/jsx-runtime");
|
|
12656
|
+
var resolveBindingLimit = (systemLimit, licenseLimit) => {
|
|
12657
|
+
const numericLimits = [systemLimit, licenseLimit].filter((l2) => typeof l2 === "number");
|
|
12658
|
+
if (numericLimits.length > 0) return Math.min(...numericLimits);
|
|
12659
|
+
if (systemLimit === "unlimited" || licenseLimit === "unlimited") return "unlimited";
|
|
12660
|
+
return void 0;
|
|
12661
|
+
};
|
|
12662
|
+
var fmt = (n2) => n2.toLocaleString();
|
|
12663
|
+
var fmtLimit = (value) => {
|
|
12664
|
+
if (value === void 0) return "\u2014";
|
|
12665
|
+
if (value === "unlimited") return "Unlimited";
|
|
12666
|
+
return fmt(value);
|
|
12667
|
+
};
|
|
12668
|
+
var StatRow = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
|
|
12669
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
|
|
12670
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
|
|
12671
|
+
] });
|
|
12672
|
+
var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
|
|
12673
|
+
const [anchorElement, setAnchorElement] = (0, import_react40.useState)();
|
|
12674
|
+
const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
|
|
12675
|
+
if (totalCount === void 0 && bindingLimit === void 0) {
|
|
12676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_jsx_runtime124.Fragment, {});
|
|
12677
|
+
}
|
|
12678
|
+
if (visibleCount !== void 0) totalCount = Math.max(totalCount ?? 0, visibleCount);
|
|
12679
|
+
const isLoading = totalCount === void 0;
|
|
12680
|
+
const isOpen = anchorElement !== void 0;
|
|
12681
|
+
const systemLimitReached = typeof systemLimit === "number" && totalCount !== void 0 && totalCount >= systemLimit;
|
|
12682
|
+
const licenseLimitReached = typeof licenseLimit === "number" && totalCount !== void 0 && totalCount >= licenseLimit;
|
|
12683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
|
|
12684
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
|
|
12685
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "text.secondary", variant: "caption", children: "Showing" }),
|
|
12686
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
|
|
12687
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
|
|
12688
|
+
] }),
|
|
12689
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Tooltip, { title: "Operation count details", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
12690
|
+
import_material4.IconButton,
|
|
12691
|
+
{
|
|
12692
|
+
"aria-describedby": isOpen ? "operation-count-popover" : void 0,
|
|
12693
|
+
onClick: (event) => {
|
|
12694
|
+
setAnchorElement(isOpen ? void 0 : event.currentTarget);
|
|
12695
|
+
},
|
|
12696
|
+
size: "small",
|
|
12697
|
+
sx: { color: systemLimitReached || licenseLimitReached ? "warning.main" : "text.disabled" },
|
|
12698
|
+
children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.InfoOutlined, { sx: { fontSize: 14 } })
|
|
12699
|
+
}
|
|
12700
|
+
) }),
|
|
12701
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
12702
|
+
import_material4.Popover,
|
|
12703
|
+
{
|
|
12704
|
+
anchorEl: anchorElement,
|
|
12705
|
+
anchorOrigin: { horizontal: "right", vertical: "bottom" },
|
|
12706
|
+
id: "operation-count-popover",
|
|
12707
|
+
onClose: () => {
|
|
12708
|
+
setAnchorElement(void 0);
|
|
12709
|
+
},
|
|
12710
|
+
open: isOpen,
|
|
12711
|
+
transformOrigin: { horizontal: "right", vertical: "top" },
|
|
12712
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { minWidth: 240, p: 2 }, children: [
|
|
12713
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { fontWeight: 700, variant: "body2", children: "Storage" }),
|
|
12714
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
|
|
12715
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
|
|
12716
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
12717
|
+
StatRow,
|
|
12718
|
+
{
|
|
12719
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Tooltip, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
|
|
12720
|
+
value: visibleCount
|
|
12721
|
+
}
|
|
12722
|
+
),
|
|
12723
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
12724
|
+
StatRow,
|
|
12725
|
+
{
|
|
12726
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Tooltip, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
|
|
12727
|
+
value: totalCount
|
|
12728
|
+
}
|
|
12729
|
+
)
|
|
12730
|
+
] }),
|
|
12731
|
+
(systemLimit !== void 0 || licenseLimit !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
|
|
12732
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { sx: { my: 1.5 } }),
|
|
12733
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
|
|
12734
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.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." }),
|
|
12735
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
|
|
12736
|
+
licenseLimit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
12737
|
+
StatRow,
|
|
12738
|
+
{
|
|
12739
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Tooltip, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
|
|
12740
|
+
value: licenseLimit
|
|
12741
|
+
}
|
|
12742
|
+
),
|
|
12743
|
+
systemLimit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
12744
|
+
StatRow,
|
|
12745
|
+
{
|
|
12746
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Tooltip, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
|
|
12747
|
+
value: systemLimit
|
|
12748
|
+
}
|
|
12749
|
+
)
|
|
12750
|
+
] })
|
|
12751
|
+
] }),
|
|
12752
|
+
(systemLimitReached || licenseLimitReached) && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
|
|
12753
|
+
licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
|
|
12754
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
|
|
12755
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
|
|
12756
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
|
|
12757
|
+
] }),
|
|
12758
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.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." }),
|
|
12759
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
12760
|
+
import_material4.Button,
|
|
12761
|
+
{
|
|
12762
|
+
color: "inherit",
|
|
12763
|
+
href: "https://localstack.cloud/pricing",
|
|
12764
|
+
size: "small",
|
|
12765
|
+
sx: { color: "warning.contrastText", fontWeight: 600, p: 0, textDecoration: "underline" },
|
|
12766
|
+
target: "_blank",
|
|
12767
|
+
variant: "text",
|
|
12768
|
+
children: "Upgrade license \u2192"
|
|
12769
|
+
}
|
|
12770
|
+
)
|
|
12771
|
+
] }),
|
|
12772
|
+
systemLimitReached && !licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
|
|
12773
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
|
|
12774
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Typography, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
|
|
12775
|
+
] })
|
|
12776
|
+
] })
|
|
12777
|
+
] })
|
|
12778
|
+
}
|
|
12779
|
+
)
|
|
12780
|
+
] });
|
|
12781
|
+
};
|
|
12782
|
+
|
|
12783
|
+
// src/components/spans-list/spans-data-grid.tsx
|
|
12784
|
+
var import_jsx_runtime125 = require("react/jsx-runtime");
|
|
12653
12785
|
var columnHelper = createColumnHelper();
|
|
12654
12786
|
var newSpanBackgroundColor = {
|
|
12655
12787
|
dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
|
|
@@ -12660,16 +12792,16 @@ var LABEL_END_OF_STREAM = "This is the end of the stream";
|
|
|
12660
12792
|
var LABEL_NO_SPANS = "There are no spans";
|
|
12661
12793
|
var LABEL_LOAD_OLDER = "Load older spans";
|
|
12662
12794
|
var LABEL_LOAD_NEWER = "Load newer spans";
|
|
12663
|
-
var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ (0,
|
|
12664
|
-
var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0,
|
|
12665
|
-
!fetching && /* @__PURE__ */ (0,
|
|
12666
|
-
fetching && /* @__PURE__ */ (0,
|
|
12795
|
+
var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { children: label }) }) });
|
|
12796
|
+
var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
|
|
12797
|
+
!fetching && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
|
|
12798
|
+
fetching && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.CircularProgress, { size: 24, sx: { m: 2 } })
|
|
12667
12799
|
] }) });
|
|
12668
|
-
var SpansDataGridRow = (0,
|
|
12800
|
+
var SpansDataGridRow = (0, import_react41.memo)(
|
|
12669
12801
|
({ row }) => {
|
|
12670
|
-
const theme = (0,
|
|
12671
|
-
return /* @__PURE__ */ (0,
|
|
12672
|
-
|
|
12802
|
+
const theme = (0, import_material5.useTheme)();
|
|
12803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12804
|
+
import_material5.TableRow,
|
|
12673
12805
|
{
|
|
12674
12806
|
animate: {
|
|
12675
12807
|
backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.to : newSpanBackgroundColor.dark.to
|
|
@@ -12682,16 +12814,16 @@ var SpansDataGridRow = (0, import_react40.memo)(
|
|
|
12682
12814
|
transition: "background-color 1200ms ease-in"
|
|
12683
12815
|
},
|
|
12684
12816
|
children: row.getVisibleCells().map((cell) => {
|
|
12685
|
-
return /* @__PURE__ */ (0,
|
|
12686
|
-
|
|
12817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12818
|
+
import_material5.TableCell,
|
|
12687
12819
|
{
|
|
12688
12820
|
sx: {
|
|
12689
12821
|
height: 36,
|
|
12690
12822
|
maxWidth: `${cell.column.getSize().toString()}px`,
|
|
12691
12823
|
minWidth: `${cell.column.getSize().toString()}px`
|
|
12692
12824
|
},
|
|
12693
|
-
children: /* @__PURE__ */ (0,
|
|
12694
|
-
|
|
12825
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12826
|
+
import_material5.Box,
|
|
12695
12827
|
{
|
|
12696
12828
|
sx: {
|
|
12697
12829
|
"alignItems": "center",
|
|
@@ -12703,7 +12835,7 @@ var SpansDataGridRow = (0, import_react40.memo)(
|
|
|
12703
12835
|
},
|
|
12704
12836
|
"width": "100%"
|
|
12705
12837
|
},
|
|
12706
|
-
children: /* @__PURE__ */ (0,
|
|
12838
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
|
|
12707
12839
|
}
|
|
12708
12840
|
)
|
|
12709
12841
|
},
|
|
@@ -12723,6 +12855,7 @@ var SpansDataGrid = ({
|
|
|
12723
12855
|
fetchingForward,
|
|
12724
12856
|
hasMoreBackward,
|
|
12725
12857
|
hasMoreForward,
|
|
12858
|
+
licenseLimit,
|
|
12726
12859
|
onClearSpans,
|
|
12727
12860
|
onFetchBackward,
|
|
12728
12861
|
onFetchForward,
|
|
@@ -12731,18 +12864,20 @@ var SpansDataGrid = ({
|
|
|
12731
12864
|
onToggleStream,
|
|
12732
12865
|
order: order2,
|
|
12733
12866
|
spans,
|
|
12734
|
-
streamPaused
|
|
12867
|
+
streamPaused,
|
|
12868
|
+
systemLimit,
|
|
12869
|
+
totalCount
|
|
12735
12870
|
}) => {
|
|
12736
|
-
const columns = (0,
|
|
12871
|
+
const columns = (0, import_react41.useMemo)(() => [
|
|
12737
12872
|
columnHelper.accessor("trace_id", {
|
|
12738
|
-
cell: (props) => /* @__PURE__ */ (0,
|
|
12739
|
-
|
|
12873
|
+
cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12874
|
+
import_material5.Box,
|
|
12740
12875
|
{
|
|
12741
12876
|
sx: {
|
|
12742
12877
|
overflow: "hidden",
|
|
12743
12878
|
textOverflow: "ellipsis"
|
|
12744
12879
|
},
|
|
12745
|
-
children: /* @__PURE__ */ (0,
|
|
12880
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { arrow: true, title: props.getValue(), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { children: props.getValue() }) })
|
|
12746
12881
|
}
|
|
12747
12882
|
),
|
|
12748
12883
|
header: "Trace",
|
|
@@ -12750,9 +12885,9 @@ var SpansDataGrid = ({
|
|
|
12750
12885
|
maxSize: 120
|
|
12751
12886
|
}),
|
|
12752
12887
|
columnHelper.accessor("startTime", {
|
|
12753
|
-
cell: (props) => /* @__PURE__ */ (0,
|
|
12754
|
-
header: () => /* @__PURE__ */ (0,
|
|
12755
|
-
|
|
12888
|
+
cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ResponsiveTimestampCell, { date: props.getValue() }),
|
|
12889
|
+
header: () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12890
|
+
import_material5.TableSortLabel,
|
|
12756
12891
|
{
|
|
12757
12892
|
active: true,
|
|
12758
12893
|
direction: order2 === "newest_first" ? "asc" : "desc",
|
|
@@ -12768,23 +12903,23 @@ var SpansDataGrid = ({
|
|
|
12768
12903
|
columnHelper.display({
|
|
12769
12904
|
cell: (props) => {
|
|
12770
12905
|
if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
|
|
12771
|
-
return /* @__PURE__ */ (0,
|
|
12906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
|
|
12772
12907
|
}
|
|
12773
|
-
return /* @__PURE__ */ (0,
|
|
12908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
|
|
12774
12909
|
},
|
|
12775
12910
|
header: "Producer",
|
|
12776
12911
|
id: "producer",
|
|
12777
12912
|
size: 180
|
|
12778
12913
|
}),
|
|
12779
12914
|
columnHelper.accessor("operation_name", {
|
|
12780
|
-
cell: (props) => /* @__PURE__ */ (0,
|
|
12781
|
-
|
|
12915
|
+
cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12916
|
+
import_material5.Box,
|
|
12782
12917
|
{
|
|
12783
12918
|
sx: {
|
|
12784
12919
|
overflow: "hidden",
|
|
12785
12920
|
textOverflow: "ellipsis"
|
|
12786
12921
|
},
|
|
12787
|
-
children: /* @__PURE__ */ (0,
|
|
12922
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { title: props.getValue(), children: props.getValue() })
|
|
12788
12923
|
}
|
|
12789
12924
|
),
|
|
12790
12925
|
header: "Action",
|
|
@@ -12793,7 +12928,7 @@ var SpansDataGrid = ({
|
|
|
12793
12928
|
}),
|
|
12794
12929
|
columnHelper.display({
|
|
12795
12930
|
cell: (props) => {
|
|
12796
|
-
return /* @__PURE__ */ (0,
|
|
12931
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
|
|
12797
12932
|
},
|
|
12798
12933
|
header: "Consumer",
|
|
12799
12934
|
id: "consumer",
|
|
@@ -12801,8 +12936,8 @@ var SpansDataGrid = ({
|
|
|
12801
12936
|
}),
|
|
12802
12937
|
columnHelper.display({
|
|
12803
12938
|
cell: (props) => {
|
|
12804
|
-
return /* @__PURE__ */ (0,
|
|
12805
|
-
|
|
12939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12940
|
+
import_material5.Button,
|
|
12806
12941
|
{
|
|
12807
12942
|
onClick: () => {
|
|
12808
12943
|
onSpanClick(props.row.original);
|
|
@@ -12827,17 +12962,18 @@ var SpansDataGrid = ({
|
|
|
12827
12962
|
const columnCount = table.getAllColumns().length;
|
|
12828
12963
|
const rows = table.getRowModel().rows;
|
|
12829
12964
|
const hasRows = rows.length > 0;
|
|
12830
|
-
return /* @__PURE__ */ (0,
|
|
12831
|
-
/* @__PURE__ */ (0,
|
|
12832
|
-
/* @__PURE__ */ (0,
|
|
12833
|
-
/* @__PURE__ */ (0,
|
|
12834
|
-
|
|
12965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
|
|
12966
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
|
|
12967
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
|
|
12968
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { sx: { flexGrow: 1 } }),
|
|
12969
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12970
|
+
import_material5.FormControlLabel,
|
|
12835
12971
|
{
|
|
12836
|
-
control: /* @__PURE__ */ (0,
|
|
12837
|
-
|
|
12972
|
+
control: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12973
|
+
import_material5.Button,
|
|
12838
12974
|
{
|
|
12839
12975
|
onClick: onToggleStream,
|
|
12840
|
-
startIcon: streamPaused ? /* @__PURE__ */ (0,
|
|
12976
|
+
startIcon: streamPaused ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.PlayArrowOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.PauseOutlined, {}),
|
|
12841
12977
|
variant: "text",
|
|
12842
12978
|
children: streamPaused ? "Resume Stream" : "Pause Stream"
|
|
12843
12979
|
}
|
|
@@ -12845,14 +12981,14 @@ var SpansDataGrid = ({
|
|
|
12845
12981
|
label: ""
|
|
12846
12982
|
}
|
|
12847
12983
|
),
|
|
12848
|
-
/* @__PURE__ */ (0,
|
|
12849
|
-
|
|
12984
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12985
|
+
import_material5.FormControlLabel,
|
|
12850
12986
|
{
|
|
12851
|
-
control: /* @__PURE__ */ (0,
|
|
12852
|
-
|
|
12987
|
+
control: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
12988
|
+
import_material5.Button,
|
|
12853
12989
|
{
|
|
12854
12990
|
onClick: onClearSpans,
|
|
12855
|
-
startIcon: /* @__PURE__ */ (0,
|
|
12991
|
+
startIcon: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.DeleteForeverOutlined, {}),
|
|
12856
12992
|
children: "Clear Spans"
|
|
12857
12993
|
}
|
|
12858
12994
|
),
|
|
@@ -12861,8 +12997,8 @@ var SpansDataGrid = ({
|
|
|
12861
12997
|
}
|
|
12862
12998
|
)
|
|
12863
12999
|
] }) }),
|
|
12864
|
-
/* @__PURE__ */ (0,
|
|
12865
|
-
|
|
13000
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
13001
|
+
import_material5.TableContainer,
|
|
12866
13002
|
{
|
|
12867
13003
|
sx: {
|
|
12868
13004
|
bottom: 0,
|
|
@@ -12872,8 +13008,8 @@ var SpansDataGrid = ({
|
|
|
12872
13008
|
right: 0,
|
|
12873
13009
|
top: 0
|
|
12874
13010
|
},
|
|
12875
|
-
children: /* @__PURE__ */ (0,
|
|
12876
|
-
|
|
13011
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
|
|
13012
|
+
import_material5.Table,
|
|
12877
13013
|
{
|
|
12878
13014
|
stickyHeader: true,
|
|
12879
13015
|
sx: {
|
|
@@ -12884,9 +13020,9 @@ var SpansDataGrid = ({
|
|
|
12884
13020
|
"th+th": { pl: "8px !important" }
|
|
12885
13021
|
},
|
|
12886
13022
|
children: [
|
|
12887
|
-
/* @__PURE__ */ (0,
|
|
12888
|
-
return /* @__PURE__ */ (0,
|
|
12889
|
-
|
|
13023
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
|
|
13024
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
13025
|
+
import_material5.TableCell,
|
|
12890
13026
|
{
|
|
12891
13027
|
colSpan: header.colSpan,
|
|
12892
13028
|
sx: {
|
|
@@ -12900,31 +13036,31 @@ var SpansDataGrid = ({
|
|
|
12900
13036
|
header.id
|
|
12901
13037
|
)) }, headerGroup.id);
|
|
12902
13038
|
}) }),
|
|
12903
|
-
/* @__PURE__ */ (0,
|
|
12904
|
-
(spans === void 0 || clearingSpans) && /* @__PURE__ */ (0,
|
|
12905
|
-
!clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0,
|
|
12906
|
-
!clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0,
|
|
12907
|
-
hasRows && hasMoreForward && /* @__PURE__ */ (0,
|
|
12908
|
-
hasRows && !hasMoreForward && /* @__PURE__ */ (0,
|
|
12909
|
-
hasRows && /* @__PURE__ */ (0,
|
|
13039
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.TableBody, { children: [
|
|
13040
|
+
(spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
|
|
13041
|
+
!clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
|
|
13042
|
+
!clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
|
|
13043
|
+
hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
|
|
13044
|
+
hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
|
|
13045
|
+
hasRows && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(AnimatePresence, { initial: false, children: (() => {
|
|
12910
13046
|
const reversed = [];
|
|
12911
13047
|
for (let index = rows.length - 1; index >= 0; index--) {
|
|
12912
13048
|
const row = rows.at(index);
|
|
12913
13049
|
reversed.push(
|
|
12914
|
-
/* @__PURE__ */ (0,
|
|
13050
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SpansDataGridRow, { row }, row.original.span_id)
|
|
12915
13051
|
);
|
|
12916
13052
|
}
|
|
12917
13053
|
return reversed;
|
|
12918
13054
|
})() }),
|
|
12919
|
-
hasRows && hasMoreBackward && /* @__PURE__ */ (0,
|
|
12920
|
-
hasRows && !hasMoreBackward && /* @__PURE__ */ (0,
|
|
13055
|
+
hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
|
|
13056
|
+
hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
|
|
12921
13057
|
] }),
|
|
12922
|
-
!clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0,
|
|
12923
|
-
hasRows && !hasMoreBackward && /* @__PURE__ */ (0,
|
|
12924
|
-
hasRows && hasMoreBackward && /* @__PURE__ */ (0,
|
|
12925
|
-
hasRows && /* @__PURE__ */ (0,
|
|
12926
|
-
hasRows && hasMoreForward && /* @__PURE__ */ (0,
|
|
12927
|
-
hasRows && !hasMoreForward && /* @__PURE__ */ (0,
|
|
13058
|
+
!clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
|
|
13059
|
+
hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
|
|
13060
|
+
hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
|
|
13061
|
+
hasRows && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SpansDataGridRow, { row }, row.original.span_id)) }),
|
|
13062
|
+
hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
|
|
13063
|
+
hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
|
|
12928
13064
|
] })
|
|
12929
13065
|
] })
|
|
12930
13066
|
]
|
|
@@ -12936,13 +13072,13 @@ var SpansDataGrid = ({
|
|
|
12936
13072
|
};
|
|
12937
13073
|
|
|
12938
13074
|
// src/components/spans-list/spans-list.tsx
|
|
12939
|
-
var
|
|
13075
|
+
var import_jsx_runtime126 = require("react/jsx-runtime");
|
|
12940
13076
|
var SpansList = (props) => {
|
|
12941
|
-
return /* @__PURE__ */ (0,
|
|
12942
|
-
props.fetchError && /* @__PURE__ */ (0,
|
|
12943
|
-
|
|
13077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Box, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
|
|
13078
|
+
props.fetchError && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
|
|
13079
|
+
import_material6.Alert,
|
|
12944
13080
|
{
|
|
12945
|
-
action: /* @__PURE__ */ (0,
|
|
13081
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Button, { onClick: props.onFetchForward, children: "Retry" }),
|
|
12946
13082
|
severity: "error",
|
|
12947
13083
|
children: [
|
|
12948
13084
|
"Unexpected error:",
|
|
@@ -12951,7 +13087,7 @@ var SpansList = (props) => {
|
|
|
12951
13087
|
]
|
|
12952
13088
|
}
|
|
12953
13089
|
),
|
|
12954
|
-
/* @__PURE__ */ (0,
|
|
13090
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
12955
13091
|
SpansDataGrid,
|
|
12956
13092
|
{
|
|
12957
13093
|
clearingSpans: props.clearingSpans,
|
|
@@ -12959,6 +13095,7 @@ var SpansList = (props) => {
|
|
|
12959
13095
|
fetchingForward: props.fetchingForward,
|
|
12960
13096
|
hasMoreBackward: props.hasMoreBackward,
|
|
12961
13097
|
hasMoreForward: props.hasMoreForward,
|
|
13098
|
+
licenseLimit: props.licenseLimit,
|
|
12962
13099
|
onClearSpans: props.onClearSpans,
|
|
12963
13100
|
onFetchBackward: props.onFetchBackward,
|
|
12964
13101
|
onFetchForward: props.onFetchForward,
|
|
@@ -12967,15 +13104,17 @@ var SpansList = (props) => {
|
|
|
12967
13104
|
onToggleStream: props.onToggleStream,
|
|
12968
13105
|
order: props.order,
|
|
12969
13106
|
spans: props.spans,
|
|
12970
|
-
streamPaused: props.streamPaused
|
|
13107
|
+
streamPaused: props.streamPaused,
|
|
13108
|
+
systemLimit: props.systemLimit,
|
|
13109
|
+
totalCount: props.totalCount
|
|
12971
13110
|
}
|
|
12972
13111
|
)
|
|
12973
13112
|
] });
|
|
12974
13113
|
};
|
|
12975
13114
|
|
|
12976
13115
|
// src/components/status-message/status-message.tsx
|
|
12977
|
-
var
|
|
12978
|
-
var
|
|
13116
|
+
var import_icons_material3 = require("@mui/icons-material");
|
|
13117
|
+
var import_material7 = require("@mui/material");
|
|
12979
13118
|
|
|
12980
13119
|
// src/api/errors.ts
|
|
12981
13120
|
var AppInspectorNotFoundError = class extends Error {
|
|
@@ -13018,15 +13157,15 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
|
|
|
13018
13157
|
};
|
|
13019
13158
|
|
|
13020
13159
|
// src/components/status-message/status-message.tsx
|
|
13021
|
-
var
|
|
13160
|
+
var import_jsx_runtime127 = require("react/jsx-runtime");
|
|
13022
13161
|
var StatusMessage = ({
|
|
13023
13162
|
error,
|
|
13024
13163
|
onRetry,
|
|
13025
13164
|
status
|
|
13026
13165
|
}) => {
|
|
13027
13166
|
if (error instanceof AppInspectorNotFoundError) {
|
|
13028
|
-
return /* @__PURE__ */ (0,
|
|
13029
|
-
|
|
13167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13168
|
+
import_material7.Box,
|
|
13030
13169
|
{
|
|
13031
13170
|
sx: {
|
|
13032
13171
|
alignItems: "center",
|
|
@@ -13036,19 +13175,19 @@ var StatusMessage = ({
|
|
|
13036
13175
|
justifyContent: "center",
|
|
13037
13176
|
p: 4
|
|
13038
13177
|
},
|
|
13039
|
-
children: /* @__PURE__ */ (0,
|
|
13040
|
-
|
|
13178
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
|
|
13179
|
+
import_material7.Alert,
|
|
13041
13180
|
{
|
|
13042
|
-
icon: /* @__PURE__ */ (0,
|
|
13181
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.ErrorOutline, { fontSize: "large" }),
|
|
13043
13182
|
severity: "error",
|
|
13044
13183
|
sx: { maxWidth: 600, width: "100%" },
|
|
13045
13184
|
children: [
|
|
13046
|
-
/* @__PURE__ */ (0,
|
|
13047
|
-
/* @__PURE__ */ (0,
|
|
13048
|
-
/* @__PURE__ */ (0,
|
|
13049
|
-
/* @__PURE__ */ (0,
|
|
13050
|
-
/* @__PURE__ */ (0,
|
|
13051
|
-
|
|
13185
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
|
|
13186
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
|
|
13187
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To enable App Inspector:" }) }),
|
|
13188
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
|
|
13189
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13190
|
+
import_material7.Box,
|
|
13052
13191
|
{
|
|
13053
13192
|
component: "pre",
|
|
13054
13193
|
sx: {
|
|
@@ -13060,25 +13199,25 @@ var StatusMessage = ({
|
|
|
13060
13199
|
children: "LOCALSTACK_APPINSPECTOR_ENABLE=1"
|
|
13061
13200
|
}
|
|
13062
13201
|
),
|
|
13063
|
-
/* @__PURE__ */ (0,
|
|
13202
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.Typography, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
|
|
13064
13203
|
"Runtime changes can be made via endpoint",
|
|
13065
13204
|
" ",
|
|
13066
|
-
/* @__PURE__ */ (0,
|
|
13205
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("code", { children: [
|
|
13067
13206
|
APPINSPECTOR_API_PREFIX,
|
|
13068
13207
|
"/status"
|
|
13069
13208
|
] }),
|
|
13070
13209
|
". For persistent default state across restarts, adjust the",
|
|
13071
13210
|
" ",
|
|
13072
|
-
/* @__PURE__ */ (0,
|
|
13211
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
|
|
13073
13212
|
" ",
|
|
13074
13213
|
"environment variable in your",
|
|
13075
13214
|
" ",
|
|
13076
|
-
/* @__PURE__ */ (0,
|
|
13215
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)("code", { children: "~/.localstack" }),
|
|
13077
13216
|
" ",
|
|
13078
13217
|
"profile files.",
|
|
13079
13218
|
" ",
|
|
13080
|
-
/* @__PURE__ */ (0,
|
|
13081
|
-
|
|
13219
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13220
|
+
import_material7.Link,
|
|
13082
13221
|
{
|
|
13083
13222
|
href: "https://docs.localstack.cloud/aws/capabilities/config/configuration/#profiles",
|
|
13084
13223
|
rel: "noopener noreferrer",
|
|
@@ -13087,9 +13226,9 @@ var StatusMessage = ({
|
|
|
13087
13226
|
}
|
|
13088
13227
|
)
|
|
13089
13228
|
] }),
|
|
13090
|
-
/* @__PURE__ */ (0,
|
|
13091
|
-
/* @__PURE__ */ (0,
|
|
13092
|
-
|
|
13229
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "For more information:" }) }),
|
|
13230
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13231
|
+
import_material7.Link,
|
|
13093
13232
|
{
|
|
13094
13233
|
href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
|
|
13095
13234
|
rel: "noopener noreferrer",
|
|
@@ -13097,8 +13236,8 @@ var StatusMessage = ({
|
|
|
13097
13236
|
children: "App Inspector Documentation"
|
|
13098
13237
|
}
|
|
13099
13238
|
),
|
|
13100
|
-
onRetry && /* @__PURE__ */ (0,
|
|
13101
|
-
|
|
13239
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13240
|
+
import_material7.Button,
|
|
13102
13241
|
{
|
|
13103
13242
|
"aria-label": "Check App Inspector status again",
|
|
13104
13243
|
onClick: onRetry,
|
|
@@ -13113,8 +13252,8 @@ var StatusMessage = ({
|
|
|
13113
13252
|
);
|
|
13114
13253
|
}
|
|
13115
13254
|
if (error instanceof ConnectionError) {
|
|
13116
|
-
return /* @__PURE__ */ (0,
|
|
13117
|
-
|
|
13255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13256
|
+
import_material7.Box,
|
|
13118
13257
|
{
|
|
13119
13258
|
sx: {
|
|
13120
13259
|
alignItems: "center",
|
|
@@ -13124,18 +13263,18 @@ var StatusMessage = ({
|
|
|
13124
13263
|
justifyContent: "center",
|
|
13125
13264
|
p: 4
|
|
13126
13265
|
},
|
|
13127
|
-
children: /* @__PURE__ */ (0,
|
|
13128
|
-
|
|
13266
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
|
|
13267
|
+
import_material7.Alert,
|
|
13129
13268
|
{
|
|
13130
|
-
icon: /* @__PURE__ */ (0,
|
|
13269
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.ErrorOutline, { fontSize: "large" }),
|
|
13131
13270
|
severity: "error",
|
|
13132
13271
|
sx: { maxWidth: 600, width: "100%" },
|
|
13133
13272
|
children: [
|
|
13134
|
-
/* @__PURE__ */ (0,
|
|
13135
|
-
/* @__PURE__ */ (0,
|
|
13136
|
-
/* @__PURE__ */ (0,
|
|
13137
|
-
/* @__PURE__ */ (0,
|
|
13138
|
-
|
|
13273
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
|
|
13274
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
|
|
13275
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To start LocalStack:" }) }),
|
|
13276
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13277
|
+
import_material7.Box,
|
|
13139
13278
|
{
|
|
13140
13279
|
component: "pre",
|
|
13141
13280
|
sx: {
|
|
@@ -13147,8 +13286,8 @@ var StatusMessage = ({
|
|
|
13147
13286
|
children: "localstack start"
|
|
13148
13287
|
}
|
|
13149
13288
|
),
|
|
13150
|
-
onRetry && /* @__PURE__ */ (0,
|
|
13151
|
-
|
|
13289
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13290
|
+
import_material7.Button,
|
|
13152
13291
|
{
|
|
13153
13292
|
"aria-label": "Retry connection to LocalStack",
|
|
13154
13293
|
onClick: onRetry,
|
|
@@ -13163,8 +13302,8 @@ var StatusMessage = ({
|
|
|
13163
13302
|
);
|
|
13164
13303
|
}
|
|
13165
13304
|
if (status?.status === "DISABLED") {
|
|
13166
|
-
return /* @__PURE__ */ (0,
|
|
13167
|
-
|
|
13305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13306
|
+
import_material7.Box,
|
|
13168
13307
|
{
|
|
13169
13308
|
sx: {
|
|
13170
13309
|
alignItems: "center",
|
|
@@ -13174,18 +13313,18 @@ var StatusMessage = ({
|
|
|
13174
13313
|
justifyContent: "center",
|
|
13175
13314
|
p: 4
|
|
13176
13315
|
},
|
|
13177
|
-
children: /* @__PURE__ */ (0,
|
|
13178
|
-
|
|
13316
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
|
|
13317
|
+
import_material7.Alert,
|
|
13179
13318
|
{
|
|
13180
|
-
icon: /* @__PURE__ */ (0,
|
|
13319
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.InfoOutlined, { fontSize: "large" }),
|
|
13181
13320
|
severity: "warning",
|
|
13182
13321
|
sx: { maxWidth: 600, width: "100%" },
|
|
13183
13322
|
children: [
|
|
13184
|
-
/* @__PURE__ */ (0,
|
|
13185
|
-
/* @__PURE__ */ (0,
|
|
13186
|
-
/* @__PURE__ */ (0,
|
|
13187
|
-
/* @__PURE__ */ (0,
|
|
13188
|
-
|
|
13323
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
|
|
13324
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
|
|
13325
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To enable App Inspector at runtime:" }) }),
|
|
13326
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13327
|
+
import_material7.Box,
|
|
13189
13328
|
{
|
|
13190
13329
|
component: "pre",
|
|
13191
13330
|
sx: {
|
|
@@ -13200,10 +13339,10 @@ var StatusMessage = ({
|
|
|
13200
13339
|
-d '{"status": "ENABLED"}'`
|
|
13201
13340
|
}
|
|
13202
13341
|
),
|
|
13203
|
-
/* @__PURE__ */ (0,
|
|
13204
|
-
/* @__PURE__ */ (0,
|
|
13205
|
-
/* @__PURE__ */ (0,
|
|
13206
|
-
|
|
13342
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
|
|
13343
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
|
|
13344
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13345
|
+
import_material7.Box,
|
|
13207
13346
|
{
|
|
13208
13347
|
component: "pre",
|
|
13209
13348
|
sx: {
|
|
@@ -13215,9 +13354,9 @@ var StatusMessage = ({
|
|
|
13215
13354
|
children: "APPINSPECTOR=1"
|
|
13216
13355
|
}
|
|
13217
13356
|
),
|
|
13218
|
-
Boolean(status.note) && /* @__PURE__ */ (0,
|
|
13219
|
-
onRetry && /* @__PURE__ */ (0,
|
|
13220
|
-
|
|
13357
|
+
Boolean(status.note) && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
|
|
13358
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13359
|
+
import_material7.Button,
|
|
13221
13360
|
{
|
|
13222
13361
|
"aria-label": "Check if App Inspector is enabled",
|
|
13223
13362
|
onClick: onRetry,
|
|
@@ -13232,8 +13371,8 @@ var StatusMessage = ({
|
|
|
13232
13371
|
);
|
|
13233
13372
|
}
|
|
13234
13373
|
if (error) {
|
|
13235
|
-
return /* @__PURE__ */ (0,
|
|
13236
|
-
|
|
13374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13375
|
+
import_material7.Box,
|
|
13237
13376
|
{
|
|
13238
13377
|
sx: {
|
|
13239
13378
|
alignItems: "center",
|
|
@@ -13243,17 +13382,17 @@ var StatusMessage = ({
|
|
|
13243
13382
|
justifyContent: "center",
|
|
13244
13383
|
p: 4
|
|
13245
13384
|
},
|
|
13246
|
-
children: /* @__PURE__ */ (0,
|
|
13247
|
-
|
|
13385
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
|
|
13386
|
+
import_material7.Alert,
|
|
13248
13387
|
{
|
|
13249
|
-
icon: /* @__PURE__ */ (0,
|
|
13388
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.ErrorOutline, { fontSize: "large" }),
|
|
13250
13389
|
severity: "error",
|
|
13251
13390
|
sx: { maxWidth: 600, width: "100%" },
|
|
13252
13391
|
children: [
|
|
13253
|
-
/* @__PURE__ */ (0,
|
|
13254
|
-
/* @__PURE__ */ (0,
|
|
13255
|
-
onRetry && /* @__PURE__ */ (0,
|
|
13256
|
-
|
|
13392
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
|
|
13393
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
|
|
13394
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13395
|
+
import_material7.Button,
|
|
13257
13396
|
{
|
|
13258
13397
|
"aria-label": "Retry operation",
|
|
13259
13398
|
onClick: onRetry,
|
|
@@ -13267,13 +13406,13 @@ var StatusMessage = ({
|
|
|
13267
13406
|
}
|
|
13268
13407
|
);
|
|
13269
13408
|
}
|
|
13270
|
-
return /* @__PURE__ */ (0,
|
|
13409
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_jsx_runtime127.Fragment, {});
|
|
13271
13410
|
};
|
|
13272
13411
|
|
|
13273
13412
|
// src/hooks/use-local-storage.tsx
|
|
13274
|
-
var
|
|
13413
|
+
var import_react42 = require("react");
|
|
13275
13414
|
function useLocalStorage(key, initialValue) {
|
|
13276
|
-
const [storedValue, setStoredValue] = (0,
|
|
13415
|
+
const [storedValue, setStoredValue] = (0, import_react42.useState)(() => {
|
|
13277
13416
|
try {
|
|
13278
13417
|
const item = globalThis.localStorage.getItem(key);
|
|
13279
13418
|
return item ? JSON.parse(item) : initialValue;
|
|
@@ -13282,7 +13421,7 @@ function useLocalStorage(key, initialValue) {
|
|
|
13282
13421
|
return initialValue;
|
|
13283
13422
|
}
|
|
13284
13423
|
});
|
|
13285
|
-
const setValue = (0,
|
|
13424
|
+
const setValue = (0, import_react42.useCallback)((value) => {
|
|
13286
13425
|
try {
|
|
13287
13426
|
setStoredValue((previousState) => {
|
|
13288
13427
|
const next = typeof value === "function" ? value(previousState) : value;
|
|
@@ -13297,7 +13436,7 @@ function useLocalStorage(key, initialValue) {
|
|
|
13297
13436
|
console.error(`Error setting localStorage key "${key}":`, error);
|
|
13298
13437
|
}
|
|
13299
13438
|
}, [key]);
|
|
13300
|
-
(0,
|
|
13439
|
+
(0, import_react42.useEffect)(() => {
|
|
13301
13440
|
const handleStorageChange = (event) => {
|
|
13302
13441
|
if (event.key === key && event.newValue !== null) {
|
|
13303
13442
|
try {
|
|
@@ -13316,17 +13455,17 @@ function useLocalStorage(key, initialValue) {
|
|
|
13316
13455
|
}
|
|
13317
13456
|
|
|
13318
13457
|
// src/hooks/use-spans.ts
|
|
13319
|
-
var
|
|
13458
|
+
var import_react49 = require("react");
|
|
13320
13459
|
|
|
13321
13460
|
// src/api/use-api.tsx
|
|
13322
|
-
var
|
|
13323
|
-
var
|
|
13324
|
-
var AppInspectorApiContext = (0,
|
|
13461
|
+
var import_react43 = require("react");
|
|
13462
|
+
var import_jsx_runtime128 = require("react/jsx-runtime");
|
|
13463
|
+
var AppInspectorApiContext = (0, import_react43.createContext)(void 0);
|
|
13325
13464
|
var ApiProvider = (props) => {
|
|
13326
|
-
return /* @__PURE__ */ (0,
|
|
13465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AppInspectorApiContext.Provider, { value: props.api, children: props.children });
|
|
13327
13466
|
};
|
|
13328
13467
|
var useAppInspectorApi = () => {
|
|
13329
|
-
const api = (0,
|
|
13468
|
+
const api = (0, import_react43.useContext)(AppInspectorApiContext);
|
|
13330
13469
|
if (!api) {
|
|
13331
13470
|
throw new Error("useAppInspectorApi must be used within AppInspectorApiProvider");
|
|
13332
13471
|
}
|
|
@@ -13334,15 +13473,15 @@ var useAppInspectorApi = () => {
|
|
|
13334
13473
|
};
|
|
13335
13474
|
|
|
13336
13475
|
// src/hooks/use-status.tsx
|
|
13337
|
-
var
|
|
13476
|
+
var import_react44 = require("react");
|
|
13338
13477
|
var useStatus = () => {
|
|
13339
13478
|
const api = useAppInspectorApi();
|
|
13340
|
-
const [checking, setChecking] = (0,
|
|
13341
|
-
const [status, setStatus] = (0,
|
|
13342
|
-
const [error, setError] = (0,
|
|
13343
|
-
const hasFetchedReference = (0,
|
|
13344
|
-
const abortControllerReference = (0,
|
|
13345
|
-
const checkStatus = (0,
|
|
13479
|
+
const [checking, setChecking] = (0, import_react44.useState)(true);
|
|
13480
|
+
const [status, setStatus] = (0, import_react44.useState)();
|
|
13481
|
+
const [error, setError] = (0, import_react44.useState)();
|
|
13482
|
+
const hasFetchedReference = (0, import_react44.useRef)(false);
|
|
13483
|
+
const abortControllerReference = (0, import_react44.useRef)(null);
|
|
13484
|
+
const checkStatus = (0, import_react44.useCallback)(async () => {
|
|
13346
13485
|
if (abortControllerReference.current !== null) {
|
|
13347
13486
|
abortControllerReference.current.abort();
|
|
13348
13487
|
}
|
|
@@ -13366,7 +13505,7 @@ var useStatus = () => {
|
|
|
13366
13505
|
}
|
|
13367
13506
|
}
|
|
13368
13507
|
}, [api]);
|
|
13369
|
-
(0,
|
|
13508
|
+
(0, import_react44.useEffect)(() => {
|
|
13370
13509
|
if (!hasFetchedReference.current) {
|
|
13371
13510
|
hasFetchedReference.current = true;
|
|
13372
13511
|
void checkStatus();
|
|
@@ -13554,11 +13693,11 @@ var createPaginationBuffer = (options) => {
|
|
|
13554
13693
|
};
|
|
13555
13694
|
|
|
13556
13695
|
// src/hooks/use-spans-ws.tsx
|
|
13557
|
-
var
|
|
13696
|
+
var import_react47 = require("react");
|
|
13558
13697
|
|
|
13559
13698
|
// src/context.tsx
|
|
13560
|
-
var import_react44 = require("react");
|
|
13561
13699
|
var import_react45 = require("react");
|
|
13700
|
+
var import_react46 = require("react");
|
|
13562
13701
|
|
|
13563
13702
|
// src/utils/time.ts
|
|
13564
13703
|
function unixNanoToDate(unixNanoString) {
|
|
@@ -13750,21 +13889,21 @@ var createApiClient = ({ localstackEndpoint }) => {
|
|
|
13750
13889
|
};
|
|
13751
13890
|
|
|
13752
13891
|
// src/context.tsx
|
|
13753
|
-
var
|
|
13754
|
-
var AppInspectorContext = (0,
|
|
13892
|
+
var import_jsx_runtime129 = require("react/jsx-runtime");
|
|
13893
|
+
var AppInspectorContext = (0, import_react45.createContext)(void 0);
|
|
13755
13894
|
var useAppInspector = () => {
|
|
13756
|
-
const context = (0,
|
|
13895
|
+
const context = (0, import_react45.useContext)(AppInspectorContext);
|
|
13757
13896
|
if (!context) {
|
|
13758
13897
|
throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
|
|
13759
13898
|
}
|
|
13760
13899
|
return context;
|
|
13761
13900
|
};
|
|
13762
13901
|
var AppInspectorContextProvider = (props) => {
|
|
13763
|
-
const api = (0,
|
|
13902
|
+
const api = (0, import_react46.useMemo)(
|
|
13764
13903
|
() => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
|
|
13765
13904
|
[props.localstackEndpoint]
|
|
13766
13905
|
);
|
|
13767
|
-
const resolveLink = (0,
|
|
13906
|
+
const resolveLink = (0, import_react46.useCallback)(
|
|
13768
13907
|
(options) => {
|
|
13769
13908
|
if (options.to === "settings") {
|
|
13770
13909
|
return `${props.routePrefix}/settings`;
|
|
@@ -13776,7 +13915,7 @@ var AppInspectorContextProvider = (props) => {
|
|
|
13776
13915
|
},
|
|
13777
13916
|
[props.routePrefix]
|
|
13778
13917
|
);
|
|
13779
|
-
const contextValue = (0,
|
|
13918
|
+
const contextValue = (0, import_react46.useMemo)(
|
|
13780
13919
|
() => ({
|
|
13781
13920
|
linkComponent: props.linkComponent,
|
|
13782
13921
|
localstackEndpoint: props.localstackEndpoint,
|
|
@@ -13784,21 +13923,21 @@ var AppInspectorContextProvider = (props) => {
|
|
|
13784
13923
|
}),
|
|
13785
13924
|
[props.linkComponent, props.localstackEndpoint, resolveLink]
|
|
13786
13925
|
);
|
|
13787
|
-
return /* @__PURE__ */ (0,
|
|
13926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
|
|
13788
13927
|
};
|
|
13789
13928
|
|
|
13790
13929
|
// src/hooks/use-spans-ws.tsx
|
|
13791
13930
|
function useSpansWebSocket(options) {
|
|
13792
13931
|
const { onMessage } = options;
|
|
13793
|
-
const onMessageRef = (0,
|
|
13794
|
-
(0,
|
|
13932
|
+
const onMessageRef = (0, import_react47.useRef)(onMessage);
|
|
13933
|
+
(0, import_react47.useEffect)(() => {
|
|
13795
13934
|
onMessageRef.current = onMessage;
|
|
13796
13935
|
}, [onMessage]);
|
|
13797
|
-
const [connected, setConnected] = (0,
|
|
13798
|
-
const wsRef = (0,
|
|
13799
|
-
const reconnectRef = (0,
|
|
13936
|
+
const [connected, setConnected] = (0, import_react47.useState)(false);
|
|
13937
|
+
const wsRef = (0, import_react47.useRef)(void 0);
|
|
13938
|
+
const reconnectRef = (0, import_react47.useRef)(void 0);
|
|
13800
13939
|
const { localstackEndpoint } = useAppInspector();
|
|
13801
|
-
const connect = (0,
|
|
13940
|
+
const connect = (0, import_react47.useCallback)(() => {
|
|
13802
13941
|
if (wsRef.current !== void 0) return;
|
|
13803
13942
|
const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
|
|
13804
13943
|
url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
|
|
@@ -13824,7 +13963,7 @@ function useSpansWebSocket(options) {
|
|
|
13824
13963
|
}
|
|
13825
13964
|
});
|
|
13826
13965
|
}, [localstackEndpoint]);
|
|
13827
|
-
(0,
|
|
13966
|
+
(0, import_react47.useEffect)(() => {
|
|
13828
13967
|
connect();
|
|
13829
13968
|
return () => {
|
|
13830
13969
|
if (reconnectRef.current !== void 0) clearTimeout(reconnectRef.current);
|
|
@@ -13841,17 +13980,17 @@ function useSpansWebSocket(options) {
|
|
|
13841
13980
|
}
|
|
13842
13981
|
|
|
13843
13982
|
// src/hooks/use-throttled-items.ts
|
|
13844
|
-
var
|
|
13983
|
+
var import_react48 = require("react");
|
|
13845
13984
|
function useThrottledItems(items, getId, catchUpIncrement = 10) {
|
|
13846
|
-
const [displayedItems, setDisplayedItems] = (0,
|
|
13847
|
-
const [isCatchingUpForward, setIsCatchingUpForward] = (0,
|
|
13848
|
-
const [isCatchingUpBackward, setIsCatchingUpBackward] = (0,
|
|
13849
|
-
const targetRef = (0,
|
|
13850
|
-
const rafRef = (0,
|
|
13851
|
-
const leftHiddenRef = (0,
|
|
13852
|
-
const rightHiddenRef = (0,
|
|
13853
|
-
const shrinkRafPendingRef = (0,
|
|
13854
|
-
(0,
|
|
13985
|
+
const [displayedItems, setDisplayedItems] = (0, import_react48.useState)([]);
|
|
13986
|
+
const [isCatchingUpForward, setIsCatchingUpForward] = (0, import_react48.useState)(false);
|
|
13987
|
+
const [isCatchingUpBackward, setIsCatchingUpBackward] = (0, import_react48.useState)(false);
|
|
13988
|
+
const targetRef = (0, import_react48.useRef)([]);
|
|
13989
|
+
const rafRef = (0, import_react48.useRef)(void 0);
|
|
13990
|
+
const leftHiddenRef = (0, import_react48.useRef)(0);
|
|
13991
|
+
const rightHiddenRef = (0, import_react48.useRef)(0);
|
|
13992
|
+
const shrinkRafPendingRef = (0, import_react48.useRef)(false);
|
|
13993
|
+
(0, import_react48.useEffect)(() => {
|
|
13855
13994
|
const previousTarget = targetRef.current;
|
|
13856
13995
|
const target = items ?? [];
|
|
13857
13996
|
targetRef.current = target;
|
|
@@ -13922,7 +14061,7 @@ function useThrottledItems(items, getId, catchUpIncrement = 10) {
|
|
|
13922
14061
|
});
|
|
13923
14062
|
}
|
|
13924
14063
|
}, [items, getId, catchUpIncrement]);
|
|
13925
|
-
(0,
|
|
14064
|
+
(0, import_react48.useEffect)(() => {
|
|
13926
14065
|
return () => {
|
|
13927
14066
|
if (rafRef.current !== void 0) {
|
|
13928
14067
|
cancelAnimationFrame(rafRef.current);
|
|
@@ -13937,17 +14076,20 @@ function useThrottledItems(items, getId, catchUpIncrement = 10) {
|
|
|
13937
14076
|
var PAGE_SIZE = 30;
|
|
13938
14077
|
var useSpans = () => {
|
|
13939
14078
|
const api = useAppInspectorApi();
|
|
13940
|
-
const [spans, setSpans] = (0,
|
|
14079
|
+
const [spans, setSpans] = (0, import_react49.useState)();
|
|
13941
14080
|
const throttledSpans = useThrottledItems(spans, (span) => span.span_id);
|
|
13942
|
-
const [fetchError, setFetchError] = (0,
|
|
13943
|
-
const [fetchingForward, setFetchingForward] = (0,
|
|
13944
|
-
const [fetchingBackward, setFetchingBackward] = (0,
|
|
13945
|
-
const paginationBufferRef = (0,
|
|
14081
|
+
const [fetchError, setFetchError] = (0, import_react49.useState)();
|
|
14082
|
+
const [fetchingForward, setFetchingForward] = (0, import_react49.useState)(false);
|
|
14083
|
+
const [fetchingBackward, setFetchingBackward] = (0, import_react49.useState)(false);
|
|
14084
|
+
const paginationBufferRef = (0, import_react49.useRef)(createPaginationBuffer({
|
|
13946
14085
|
async fetchPage(token) {
|
|
13947
14086
|
const response = await api.getSpans({
|
|
13948
14087
|
limit: PAGE_SIZE,
|
|
13949
14088
|
pagination_token: token
|
|
13950
14089
|
});
|
|
14090
|
+
setTotalCount(response.pagination.total_count);
|
|
14091
|
+
setLicenseLimit(response.limits.span_count_limit_license);
|
|
14092
|
+
setSystemLimit(response.limits.span_count_limit_system);
|
|
13951
14093
|
return {
|
|
13952
14094
|
hasMoreBackward: response.pagination.has_prev,
|
|
13953
14095
|
hasMoreForward: response.pagination.has_next,
|
|
@@ -13976,26 +14118,30 @@ var useSpans = () => {
|
|
|
13976
14118
|
return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
|
|
13977
14119
|
}
|
|
13978
14120
|
}));
|
|
13979
|
-
const [
|
|
13980
|
-
const [
|
|
13981
|
-
const
|
|
14121
|
+
const [totalCount, setTotalCount] = (0, import_react49.useState)();
|
|
14122
|
+
const [licenseLimit, setLicenseLimit] = (0, import_react49.useState)();
|
|
14123
|
+
const [systemLimit, setSystemLimit] = (0, import_react49.useState)();
|
|
14124
|
+
const [hasMoreBackward, setHasMoreBackward] = (0, import_react49.useState)();
|
|
14125
|
+
const [hasMoreForward, setHasMoreForward] = (0, import_react49.useState)();
|
|
14126
|
+
const fetchForward = (0, import_react49.useCallback)(() => {
|
|
13982
14127
|
void paginationBufferRef.current.fetchForward();
|
|
13983
14128
|
}, []);
|
|
13984
|
-
const fetchBackward = (0,
|
|
14129
|
+
const fetchBackward = (0, import_react49.useCallback)(() => {
|
|
13985
14130
|
void paginationBufferRef.current.fetchBackward();
|
|
13986
14131
|
}, []);
|
|
13987
|
-
(0,
|
|
14132
|
+
(0, import_react49.useEffect)(() => {
|
|
13988
14133
|
fetchForward();
|
|
13989
14134
|
}, [fetchForward]);
|
|
13990
14135
|
const { checkStatus, error: statusError, status } = useStatus();
|
|
13991
|
-
const [clearingSpans, setClearingSpans] = (0,
|
|
13992
|
-
const clearSpans = (0,
|
|
14136
|
+
const [clearingSpans, setClearingSpans] = (0, import_react49.useState)(false);
|
|
14137
|
+
const clearSpans = (0, import_react49.useCallback)(async () => {
|
|
13993
14138
|
if (clearingSpans) {
|
|
13994
14139
|
return;
|
|
13995
14140
|
}
|
|
13996
14141
|
setClearingSpans(true);
|
|
13997
14142
|
try {
|
|
13998
14143
|
await api.deleteSpans();
|
|
14144
|
+
setTotalCount(void 0);
|
|
13999
14145
|
paginationBufferRef.current.clear();
|
|
14000
14146
|
await paginationBufferRef.current.fetchForward();
|
|
14001
14147
|
} catch (error) {
|
|
@@ -14005,11 +14151,11 @@ var useSpans = () => {
|
|
|
14005
14151
|
setClearingSpans(false);
|
|
14006
14152
|
}
|
|
14007
14153
|
}, [clearingSpans, api]);
|
|
14008
|
-
const [streamPaused, setStreamPaused] = (0,
|
|
14009
|
-
const toggleStream = (0,
|
|
14154
|
+
const [streamPaused, setStreamPaused] = (0, import_react49.useState)(false);
|
|
14155
|
+
const toggleStream = (0, import_react49.useCallback)(() => {
|
|
14010
14156
|
setStreamPaused((previous) => !previous);
|
|
14011
14157
|
}, []);
|
|
14012
|
-
(0,
|
|
14158
|
+
(0, import_react49.useEffect)(() => {
|
|
14013
14159
|
if (hasMoreForward === true && !fetchingForward && !streamPaused) {
|
|
14014
14160
|
void paginationBufferRef.current.fetchForward();
|
|
14015
14161
|
}
|
|
@@ -14039,29 +14185,32 @@ var useSpans = () => {
|
|
|
14039
14185
|
fetchingForward,
|
|
14040
14186
|
hasMoreBackward,
|
|
14041
14187
|
hasMoreForward,
|
|
14188
|
+
licenseLimit,
|
|
14042
14189
|
spans: throttledSpans.items,
|
|
14043
14190
|
status,
|
|
14044
14191
|
statusError,
|
|
14045
14192
|
streamPaused,
|
|
14046
|
-
|
|
14193
|
+
systemLimit,
|
|
14194
|
+
toggleStream,
|
|
14195
|
+
totalCount
|
|
14047
14196
|
};
|
|
14048
14197
|
};
|
|
14049
14198
|
|
|
14050
14199
|
// src/pages/trace-graph-page.tsx
|
|
14051
|
-
var
|
|
14052
|
-
var
|
|
14200
|
+
var import_icons_material12 = require("@mui/icons-material");
|
|
14201
|
+
var import_material20 = require("@mui/material");
|
|
14053
14202
|
var import_styles = require("@mui/material/styles");
|
|
14054
|
-
var
|
|
14055
|
-
var
|
|
14203
|
+
var import_react63 = require("@xyflow/react");
|
|
14204
|
+
var import_react64 = require("react");
|
|
14056
14205
|
|
|
14057
14206
|
// src/components/event-details/event-details.tsx
|
|
14058
|
-
var
|
|
14059
|
-
var
|
|
14207
|
+
var import_icons_material9 = require("@mui/icons-material");
|
|
14208
|
+
var import_material15 = require("@mui/material");
|
|
14060
14209
|
|
|
14061
14210
|
// node_modules/@textea/json-viewer/dist/index.mjs
|
|
14062
|
-
var
|
|
14063
|
-
var
|
|
14064
|
-
var
|
|
14211
|
+
var import_jsx_runtime130 = require("react/jsx-runtime");
|
|
14212
|
+
var import_material8 = require("@mui/material");
|
|
14213
|
+
var import_react50 = require("react");
|
|
14065
14214
|
var import_zustand = require("zustand");
|
|
14066
14215
|
var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
|
|
14067
14216
|
function r(e2) {
|
|
@@ -14178,10 +14327,10 @@ var createJsonViewerStore = (props) => {
|
|
|
14178
14327
|
};
|
|
14179
14328
|
});
|
|
14180
14329
|
};
|
|
14181
|
-
var JsonViewerStoreContext = (0,
|
|
14330
|
+
var JsonViewerStoreContext = (0, import_react50.createContext)(void 0);
|
|
14182
14331
|
JsonViewerStoreContext.Provider;
|
|
14183
14332
|
var useJsonViewerStore = (selector2, equalityFn) => {
|
|
14184
|
-
const store = (0,
|
|
14333
|
+
const store = (0, import_react50.useContext)(JsonViewerStoreContext);
|
|
14185
14334
|
return (0, import_zustand.useStore)(store, selector2, equalityFn);
|
|
14186
14335
|
};
|
|
14187
14336
|
var useTextColor = () => {
|
|
@@ -14306,9 +14455,9 @@ async function copyString(value) {
|
|
|
14306
14455
|
}
|
|
14307
14456
|
function useClipboard() {
|
|
14308
14457
|
let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
14309
|
-
const [copied, setCopied] = (0,
|
|
14310
|
-
const copyTimeout = (0,
|
|
14311
|
-
const handleCopyResult = (0,
|
|
14458
|
+
const [copied, setCopied] = (0, import_react50.useState)(false);
|
|
14459
|
+
const copyTimeout = (0, import_react50.useRef)(null);
|
|
14460
|
+
const handleCopyResult = (0, import_react50.useCallback)((value) => {
|
|
14312
14461
|
const current = copyTimeout.current;
|
|
14313
14462
|
if (current) {
|
|
14314
14463
|
window.clearTimeout(current);
|
|
@@ -14319,7 +14468,7 @@ function useClipboard() {
|
|
|
14319
14468
|
timeout
|
|
14320
14469
|
]);
|
|
14321
14470
|
const onCopy = useJsonViewerStore((store) => store.onCopy);
|
|
14322
|
-
const copy = (0,
|
|
14471
|
+
const copy = (0, import_react50.useCallback)(async (path, value) => {
|
|
14323
14472
|
if (typeof onCopy === "function") {
|
|
14324
14473
|
try {
|
|
14325
14474
|
await onCopy(path, value, copyString);
|
|
@@ -14340,7 +14489,7 @@ function useClipboard() {
|
|
|
14340
14489
|
handleCopyResult,
|
|
14341
14490
|
onCopy
|
|
14342
14491
|
]);
|
|
14343
|
-
const reset = (0,
|
|
14492
|
+
const reset = (0, import_react50.useCallback)(() => {
|
|
14344
14493
|
setCopied(false);
|
|
14345
14494
|
if (copyTimeout.current) {
|
|
14346
14495
|
clearTimeout(copyTimeout.current);
|
|
@@ -14354,7 +14503,7 @@ function useClipboard() {
|
|
|
14354
14503
|
}
|
|
14355
14504
|
function useIsCycleReference(path, value) {
|
|
14356
14505
|
const rootValue = useJsonViewerStore((store) => store.value);
|
|
14357
|
-
return (0,
|
|
14506
|
+
return (0, import_react50.useMemo)(() => isCycleReference(rootValue, path, value), [
|
|
14358
14507
|
path,
|
|
14359
14508
|
value,
|
|
14360
14509
|
rootValue
|
|
@@ -14367,7 +14516,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
14367
14516
|
const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
|
|
14368
14517
|
const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
|
|
14369
14518
|
const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
|
|
14370
|
-
(0,
|
|
14519
|
+
(0, import_react50.useEffect)(() => {
|
|
14371
14520
|
const inspect2 = getInspectCache(path, nestedIndex);
|
|
14372
14521
|
if (inspect2 !== void 0) {
|
|
14373
14522
|
return;
|
|
@@ -14389,7 +14538,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
14389
14538
|
value,
|
|
14390
14539
|
setInspectCache
|
|
14391
14540
|
]);
|
|
14392
|
-
const [inspect, set] = (0,
|
|
14541
|
+
const [inspect, set] = (0, import_react50.useState)(() => {
|
|
14393
14542
|
const shouldInspect = getInspectCache(path, nestedIndex);
|
|
14394
14543
|
if (shouldInspect !== void 0) {
|
|
14395
14544
|
return shouldInspect;
|
|
@@ -14399,7 +14548,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
14399
14548
|
}
|
|
14400
14549
|
return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
|
|
14401
14550
|
});
|
|
14402
|
-
const setInspect = (0,
|
|
14551
|
+
const setInspect = (0, import_react50.useCallback)((apply) => {
|
|
14403
14552
|
set((oldState) => {
|
|
14404
14553
|
const newState = typeof apply === "boolean" ? apply : apply(oldState);
|
|
14405
14554
|
setInspectCache(path, newState, nestedIndex);
|
|
@@ -14415,7 +14564,7 @@ function useInspect(path, value, nestedIndex) {
|
|
|
14415
14564
|
setInspect
|
|
14416
14565
|
];
|
|
14417
14566
|
}
|
|
14418
|
-
var DataBox = (props) => /* @__PURE__ */ (0,
|
|
14567
|
+
var DataBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14419
14568
|
component: "div",
|
|
14420
14569
|
...props,
|
|
14421
14570
|
sx: {
|
|
@@ -14426,7 +14575,7 @@ var DataBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_m
|
|
|
14426
14575
|
var DataTypeLabel = (param) => {
|
|
14427
14576
|
let { dataType, enable = true } = param;
|
|
14428
14577
|
if (!enable) return null;
|
|
14429
|
-
return /* @__PURE__ */ (0,
|
|
14578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataBox, {
|
|
14430
14579
|
className: "data-type-label",
|
|
14431
14580
|
sx: {
|
|
14432
14581
|
mx: 0.5,
|
|
@@ -14439,23 +14588,23 @@ var DataTypeLabel = (param) => {
|
|
|
14439
14588
|
};
|
|
14440
14589
|
function defineEasyType(param) {
|
|
14441
14590
|
let { is, serialize, deserialize, type, colorKey, displayTypeLabel = true, Renderer } = param;
|
|
14442
|
-
const Render = /* @__PURE__ */ (0,
|
|
14591
|
+
const Render = /* @__PURE__ */ (0, import_react50.memo)(Renderer);
|
|
14443
14592
|
const EasyType = (props) => {
|
|
14444
14593
|
const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
|
|
14445
14594
|
const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
|
|
14446
14595
|
const onSelect = useJsonViewerStore((store) => store.onSelect);
|
|
14447
|
-
return /* @__PURE__ */ (0,
|
|
14596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(DataBox, {
|
|
14448
14597
|
onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
|
|
14449
14598
|
sx: {
|
|
14450
14599
|
color: color2
|
|
14451
14600
|
},
|
|
14452
14601
|
children: [
|
|
14453
|
-
displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ (0,
|
|
14602
|
+
displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataTypeLabel, {
|
|
14454
14603
|
dataType: type
|
|
14455
14604
|
}),
|
|
14456
|
-
/* @__PURE__ */ (0,
|
|
14605
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataBox, {
|
|
14457
14606
|
className: "".concat(type, "-value"),
|
|
14458
|
-
children: /* @__PURE__ */ (0,
|
|
14607
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Render, {
|
|
14459
14608
|
path: props.path,
|
|
14460
14609
|
inspect: props.inspect,
|
|
14461
14610
|
setInspect: props.setInspect,
|
|
@@ -14476,7 +14625,7 @@ function defineEasyType(param) {
|
|
|
14476
14625
|
const EasyTypeEditor = (param2) => {
|
|
14477
14626
|
let { value, setValue, abortEditing, commitEditing } = param2;
|
|
14478
14627
|
const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
|
|
14479
|
-
const handleKeyDown = (0,
|
|
14628
|
+
const handleKeyDown = (0, import_react50.useCallback)((event) => {
|
|
14480
14629
|
if (event.key === "Enter") {
|
|
14481
14630
|
event.preventDefault();
|
|
14482
14631
|
commitEditing(value);
|
|
@@ -14490,12 +14639,12 @@ function defineEasyType(param) {
|
|
|
14490
14639
|
commitEditing,
|
|
14491
14640
|
value
|
|
14492
14641
|
]);
|
|
14493
|
-
const handleChange = (0,
|
|
14642
|
+
const handleChange = (0, import_react50.useCallback)((event) => {
|
|
14494
14643
|
setValue(event.target.value);
|
|
14495
14644
|
}, [
|
|
14496
14645
|
setValue
|
|
14497
14646
|
]);
|
|
14498
|
-
return /* @__PURE__ */ (0,
|
|
14647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.InputBase, {
|
|
14499
14648
|
autoFocus: true,
|
|
14500
14649
|
value,
|
|
14501
14650
|
onChange: handleChange,
|
|
@@ -14535,7 +14684,7 @@ var booleanType = defineEasyType({
|
|
|
14535
14684
|
},
|
|
14536
14685
|
Renderer: (param) => {
|
|
14537
14686
|
let { value } = param;
|
|
14538
|
-
return /* @__PURE__ */ (0,
|
|
14687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {
|
|
14539
14688
|
children: value ? "true" : "false"
|
|
14540
14689
|
});
|
|
14541
14690
|
}
|
|
@@ -14554,7 +14703,7 @@ var dateType = defineEasyType({
|
|
|
14554
14703
|
colorKey: "base0D",
|
|
14555
14704
|
Renderer: (param) => {
|
|
14556
14705
|
let { value } = param;
|
|
14557
|
-
return /* @__PURE__ */ (0,
|
|
14706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {
|
|
14558
14707
|
children: value.toLocaleTimeString("en-us", displayOptions)
|
|
14559
14708
|
});
|
|
14560
14709
|
}
|
|
@@ -14583,12 +14732,12 @@ var functionName = (func) => {
|
|
|
14583
14732
|
var lb = "{";
|
|
14584
14733
|
var rb = "}";
|
|
14585
14734
|
var PreFunctionType = (props) => {
|
|
14586
|
-
return /* @__PURE__ */ (0,
|
|
14735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material8.NoSsr, {
|
|
14587
14736
|
children: [
|
|
14588
|
-
/* @__PURE__ */ (0,
|
|
14737
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataTypeLabel, {
|
|
14589
14738
|
dataType: "function"
|
|
14590
14739
|
}),
|
|
14591
|
-
/* @__PURE__ */ (0,
|
|
14740
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material8.Box, {
|
|
14592
14741
|
component: "span",
|
|
14593
14742
|
className: "data-function-start",
|
|
14594
14743
|
sx: {
|
|
@@ -14604,8 +14753,8 @@ var PreFunctionType = (props) => {
|
|
|
14604
14753
|
});
|
|
14605
14754
|
};
|
|
14606
14755
|
var PostFunctionType = () => {
|
|
14607
|
-
return /* @__PURE__ */ (0,
|
|
14608
|
-
children: /* @__PURE__ */ (0,
|
|
14756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.NoSsr, {
|
|
14757
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14609
14758
|
component: "span",
|
|
14610
14759
|
className: "data-function-end",
|
|
14611
14760
|
children: rb
|
|
@@ -14614,15 +14763,15 @@ var PostFunctionType = () => {
|
|
|
14614
14763
|
};
|
|
14615
14764
|
var FunctionType = (props) => {
|
|
14616
14765
|
const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
|
|
14617
|
-
return /* @__PURE__ */ (0,
|
|
14618
|
-
children: /* @__PURE__ */ (0,
|
|
14766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.NoSsr, {
|
|
14767
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14619
14768
|
className: "data-function",
|
|
14620
14769
|
sx: {
|
|
14621
14770
|
display: props.inspect ? "block" : "inline-block",
|
|
14622
14771
|
pl: props.inspect ? 2 : 0,
|
|
14623
14772
|
color: functionColor
|
|
14624
14773
|
},
|
|
14625
|
-
children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ (0,
|
|
14774
|
+
children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14626
14775
|
component: "span",
|
|
14627
14776
|
className: "data-function-body",
|
|
14628
14777
|
onClick: () => props.setInspect(true),
|
|
@@ -14650,7 +14799,7 @@ var nullType = defineEasyType({
|
|
|
14650
14799
|
displayTypeLabel: false,
|
|
14651
14800
|
Renderer: () => {
|
|
14652
14801
|
const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
14653
|
-
return /* @__PURE__ */ (0,
|
|
14802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14654
14803
|
sx: {
|
|
14655
14804
|
fontSize: "0.8rem",
|
|
14656
14805
|
backgroundColor,
|
|
@@ -14673,7 +14822,7 @@ var nanType = defineEasyType({
|
|
|
14673
14822
|
deserialize: (value) => parseFloat(value),
|
|
14674
14823
|
Renderer: () => {
|
|
14675
14824
|
const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
14676
|
-
return /* @__PURE__ */ (0,
|
|
14825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14677
14826
|
sx: {
|
|
14678
14827
|
backgroundColor,
|
|
14679
14828
|
fontSize: "0.8rem",
|
|
@@ -14693,7 +14842,7 @@ var floatType = defineEasyType({
|
|
|
14693
14842
|
deserialize: (value) => parseFloat(value),
|
|
14694
14843
|
Renderer: (param) => {
|
|
14695
14844
|
let { value } = param;
|
|
14696
|
-
return /* @__PURE__ */ (0,
|
|
14845
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {
|
|
14697
14846
|
children: value
|
|
14698
14847
|
});
|
|
14699
14848
|
}
|
|
@@ -14707,7 +14856,7 @@ var intType = defineEasyType({
|
|
|
14707
14856
|
deserialize: (value) => parseFloat(value),
|
|
14708
14857
|
Renderer: (param) => {
|
|
14709
14858
|
let { value } = param;
|
|
14710
|
-
return /* @__PURE__ */ (0,
|
|
14859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {
|
|
14711
14860
|
children: value
|
|
14712
14861
|
});
|
|
14713
14862
|
}
|
|
@@ -14720,16 +14869,16 @@ var bigIntType = defineEasyType({
|
|
|
14720
14869
|
deserialize: (value) => BigInt(value.replace(/\D/g, "")),
|
|
14721
14870
|
Renderer: (param) => {
|
|
14722
14871
|
let { value } = param;
|
|
14723
|
-
return /* @__PURE__ */ (0,
|
|
14872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {
|
|
14724
14873
|
children: "".concat(value, "n")
|
|
14725
14874
|
});
|
|
14726
14875
|
}
|
|
14727
14876
|
});
|
|
14728
14877
|
var BaseIcon = (param) => {
|
|
14729
14878
|
let { d: d2, ...props } = param;
|
|
14730
|
-
return /* @__PURE__ */ (0,
|
|
14879
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.SvgIcon, {
|
|
14731
14880
|
...props,
|
|
14732
|
-
children: /* @__PURE__ */ (0,
|
|
14881
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", {
|
|
14733
14882
|
d: d2
|
|
14734
14883
|
})
|
|
14735
14884
|
});
|
|
@@ -14744,55 +14893,55 @@ var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.3
|
|
|
14744
14893
|
var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
|
|
14745
14894
|
var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
|
|
14746
14895
|
var AddBoxIcon = (props) => {
|
|
14747
|
-
return /* @__PURE__ */ (0,
|
|
14896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14748
14897
|
d: AddBox,
|
|
14749
14898
|
...props
|
|
14750
14899
|
});
|
|
14751
14900
|
};
|
|
14752
14901
|
var CheckIcon = (props) => {
|
|
14753
|
-
return /* @__PURE__ */ (0,
|
|
14902
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14754
14903
|
d: Check,
|
|
14755
14904
|
...props
|
|
14756
14905
|
});
|
|
14757
14906
|
};
|
|
14758
14907
|
var ChevronRightIcon = (props) => {
|
|
14759
|
-
return /* @__PURE__ */ (0,
|
|
14908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14760
14909
|
d: ChevronRight,
|
|
14761
14910
|
...props
|
|
14762
14911
|
});
|
|
14763
14912
|
};
|
|
14764
14913
|
var CircularArrowsIcon = (props) => {
|
|
14765
|
-
return /* @__PURE__ */ (0,
|
|
14914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14766
14915
|
d: CircularArrows,
|
|
14767
14916
|
...props
|
|
14768
14917
|
});
|
|
14769
14918
|
};
|
|
14770
14919
|
var CloseIcon = (props) => {
|
|
14771
|
-
return /* @__PURE__ */ (0,
|
|
14920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14772
14921
|
d: Close,
|
|
14773
14922
|
...props
|
|
14774
14923
|
});
|
|
14775
14924
|
};
|
|
14776
14925
|
var ContentCopyIcon = (props) => {
|
|
14777
|
-
return /* @__PURE__ */ (0,
|
|
14926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14778
14927
|
d: ContentCopy,
|
|
14779
14928
|
...props
|
|
14780
14929
|
});
|
|
14781
14930
|
};
|
|
14782
14931
|
var EditIcon = (props) => {
|
|
14783
|
-
return /* @__PURE__ */ (0,
|
|
14932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14784
14933
|
d: Edit,
|
|
14785
14934
|
...props
|
|
14786
14935
|
});
|
|
14787
14936
|
};
|
|
14788
14937
|
var ExpandMoreIcon = (props) => {
|
|
14789
|
-
return /* @__PURE__ */ (0,
|
|
14938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14790
14939
|
d: ExpandMore,
|
|
14791
14940
|
...props
|
|
14792
14941
|
});
|
|
14793
14942
|
};
|
|
14794
14943
|
var DeleteIcon = (props) => {
|
|
14795
|
-
return /* @__PURE__ */ (0,
|
|
14944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BaseIcon, {
|
|
14796
14945
|
d: Delete,
|
|
14797
14946
|
...props
|
|
14798
14947
|
});
|
|
@@ -14815,23 +14964,23 @@ function inspectMetadata(value) {
|
|
|
14815
14964
|
var PreObjectType = (props) => {
|
|
14816
14965
|
const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
|
|
14817
14966
|
const textColor = useTextColor();
|
|
14818
|
-
const isArrayLike = (0,
|
|
14967
|
+
const isArrayLike = (0, import_react50.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
|
|
14819
14968
|
props.value
|
|
14820
14969
|
]);
|
|
14821
|
-
const isEmptyValue = (0,
|
|
14970
|
+
const isEmptyValue = (0, import_react50.useMemo)(() => getValueSize(props.value) === 0, [
|
|
14822
14971
|
props.value
|
|
14823
14972
|
]);
|
|
14824
|
-
const sizeOfValue = (0,
|
|
14973
|
+
const sizeOfValue = (0, import_react50.useMemo)(() => inspectMetadata(props.value), [
|
|
14825
14974
|
props.value
|
|
14826
14975
|
]);
|
|
14827
14976
|
const displaySize = useJsonViewerStore((store) => store.displaySize);
|
|
14828
|
-
const shouldDisplaySize = (0,
|
|
14977
|
+
const shouldDisplaySize = (0, import_react50.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
|
|
14829
14978
|
displaySize,
|
|
14830
14979
|
props.path,
|
|
14831
14980
|
props.value
|
|
14832
14981
|
]);
|
|
14833
14982
|
const isTrap = useIsCycleReference(props.path, props.value);
|
|
14834
|
-
return /* @__PURE__ */ (0,
|
|
14983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material8.Box, {
|
|
14835
14984
|
component: "span",
|
|
14836
14985
|
className: "data-object-start",
|
|
14837
14986
|
sx: {
|
|
@@ -14839,7 +14988,7 @@ var PreObjectType = (props) => {
|
|
|
14839
14988
|
},
|
|
14840
14989
|
children: [
|
|
14841
14990
|
isArrayLike ? arrayLb : objectLb,
|
|
14842
|
-
shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ (0,
|
|
14991
|
+
shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14843
14992
|
component: "span",
|
|
14844
14993
|
sx: {
|
|
14845
14994
|
pl: 0.5,
|
|
@@ -14849,16 +14998,16 @@ var PreObjectType = (props) => {
|
|
|
14849
14998
|
},
|
|
14850
14999
|
children: sizeOfValue
|
|
14851
15000
|
}),
|
|
14852
|
-
isTrap && !props.inspect && /* @__PURE__ */ (0,
|
|
15001
|
+
isTrap && !props.inspect && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, {
|
|
14853
15002
|
children: [
|
|
14854
|
-
/* @__PURE__ */ (0,
|
|
15003
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(CircularArrowsIcon, {
|
|
14855
15004
|
sx: {
|
|
14856
15005
|
fontSize: 12,
|
|
14857
15006
|
color: textColor,
|
|
14858
15007
|
mx: 0.5
|
|
14859
15008
|
}
|
|
14860
15009
|
}),
|
|
14861
|
-
/* @__PURE__ */ (0,
|
|
15010
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataBox, {
|
|
14862
15011
|
sx: {
|
|
14863
15012
|
cursor: "pointer",
|
|
14864
15013
|
userSelect: "none"
|
|
@@ -14873,22 +15022,22 @@ var PreObjectType = (props) => {
|
|
|
14873
15022
|
var PostObjectType = (props) => {
|
|
14874
15023
|
const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
|
|
14875
15024
|
const textColor = useTextColor();
|
|
14876
|
-
const isArrayLike = (0,
|
|
15025
|
+
const isArrayLike = (0, import_react50.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
|
|
14877
15026
|
props.value
|
|
14878
15027
|
]);
|
|
14879
|
-
const isEmptyValue = (0,
|
|
15028
|
+
const isEmptyValue = (0, import_react50.useMemo)(() => getValueSize(props.value) === 0, [
|
|
14880
15029
|
props.value
|
|
14881
15030
|
]);
|
|
14882
|
-
const sizeOfValue = (0,
|
|
15031
|
+
const sizeOfValue = (0, import_react50.useMemo)(() => inspectMetadata(props.value), [
|
|
14883
15032
|
props.value
|
|
14884
15033
|
]);
|
|
14885
15034
|
const displaySize = useJsonViewerStore((store) => store.displaySize);
|
|
14886
|
-
const shouldDisplaySize = (0,
|
|
15035
|
+
const shouldDisplaySize = (0, import_react50.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
|
|
14887
15036
|
displaySize,
|
|
14888
15037
|
props.path,
|
|
14889
15038
|
props.value
|
|
14890
15039
|
]);
|
|
14891
|
-
return /* @__PURE__ */ (0,
|
|
15040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material8.Box, {
|
|
14892
15041
|
component: "span",
|
|
14893
15042
|
className: "data-object-end",
|
|
14894
15043
|
sx: {
|
|
@@ -14899,7 +15048,7 @@ var PostObjectType = (props) => {
|
|
|
14899
15048
|
},
|
|
14900
15049
|
children: [
|
|
14901
15050
|
isArrayLike ? arrayRb : objectRb,
|
|
14902
|
-
shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ (0,
|
|
15051
|
+
shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
14903
15052
|
component: "span",
|
|
14904
15053
|
sx: {
|
|
14905
15054
|
pl: 0.5,
|
|
@@ -14920,9 +15069,9 @@ var ObjectType = (props) => {
|
|
|
14920
15069
|
const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
14921
15070
|
const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
|
|
14922
15071
|
const isTrap = useIsCycleReference(props.path, props.value);
|
|
14923
|
-
const [displayLength, setDisplayLength] = (0,
|
|
15072
|
+
const [displayLength, setDisplayLength] = (0, import_react50.useState)(useJsonViewerStore((store) => store.maxDisplayLength));
|
|
14924
15073
|
const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
|
|
14925
|
-
const elements = (0,
|
|
15074
|
+
const elements = (0, import_react50.useMemo)(() => {
|
|
14926
15075
|
if (!props.inspect) {
|
|
14927
15076
|
return null;
|
|
14928
15077
|
}
|
|
@@ -14939,7 +15088,7 @@ var ObjectType = (props) => {
|
|
|
14939
15088
|
...props.path,
|
|
14940
15089
|
key
|
|
14941
15090
|
];
|
|
14942
|
-
elements3.push(/* @__PURE__ */ (0,
|
|
15091
|
+
elements3.push(/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataKeyPair, {
|
|
14943
15092
|
path,
|
|
14944
15093
|
value: value2,
|
|
14945
15094
|
prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
|
|
@@ -14955,7 +15104,7 @@ var ObjectType = (props) => {
|
|
|
14955
15104
|
while (true) {
|
|
14956
15105
|
const nextResult = iterator2.next();
|
|
14957
15106
|
var _nextResult_done;
|
|
14958
|
-
elements3.push(/* @__PURE__ */ (0,
|
|
15107
|
+
elements3.push(/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataKeyPair, {
|
|
14959
15108
|
path: [
|
|
14960
15109
|
...props.path,
|
|
14961
15110
|
"iterator:".concat(count2)
|
|
@@ -14983,7 +15132,7 @@ var ObjectType = (props) => {
|
|
|
14983
15132
|
...props.path,
|
|
14984
15133
|
index
|
|
14985
15134
|
];
|
|
14986
|
-
return /* @__PURE__ */ (0,
|
|
15135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataKeyPair, {
|
|
14987
15136
|
path,
|
|
14988
15137
|
value: value2,
|
|
14989
15138
|
prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
|
|
@@ -14992,7 +15141,7 @@ var ObjectType = (props) => {
|
|
|
14992
15141
|
});
|
|
14993
15142
|
if (value.length > displayLength) {
|
|
14994
15143
|
const rest = value.length - displayLength;
|
|
14995
|
-
elements4.push(/* @__PURE__ */ (0,
|
|
15144
|
+
elements4.push(/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(DataBox, {
|
|
14996
15145
|
sx: {
|
|
14997
15146
|
cursor: "pointer",
|
|
14998
15147
|
lineHeight: 1.5,
|
|
@@ -15015,7 +15164,7 @@ var ObjectType = (props) => {
|
|
|
15015
15164
|
const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
|
|
15016
15165
|
const elementsLastIndex = elements3.length - 1;
|
|
15017
15166
|
return elements3.map((list, index) => {
|
|
15018
|
-
return /* @__PURE__ */ (0,
|
|
15167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataKeyPair, {
|
|
15019
15168
|
path: props.path,
|
|
15020
15169
|
value: list,
|
|
15021
15170
|
nestedIndex: index,
|
|
@@ -15042,7 +15191,7 @@ var ObjectType = (props) => {
|
|
|
15042
15191
|
...props.path,
|
|
15043
15192
|
key
|
|
15044
15193
|
];
|
|
15045
|
-
return /* @__PURE__ */ (0,
|
|
15194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataKeyPair, {
|
|
15046
15195
|
path,
|
|
15047
15196
|
value: value2,
|
|
15048
15197
|
prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
|
|
@@ -15051,7 +15200,7 @@ var ObjectType = (props) => {
|
|
|
15051
15200
|
});
|
|
15052
15201
|
if (entries.length > displayLength) {
|
|
15053
15202
|
const rest = entries.length - displayLength;
|
|
15054
|
-
elements2.push(/* @__PURE__ */ (0,
|
|
15203
|
+
elements2.push(/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(DataBox, {
|
|
15055
15204
|
sx: {
|
|
15056
15205
|
cursor: "pointer",
|
|
15057
15206
|
lineHeight: 1.5,
|
|
@@ -15083,13 +15232,13 @@ var ObjectType = (props) => {
|
|
|
15083
15232
|
const marginLeft = props.inspect ? 0.6 : 0;
|
|
15084
15233
|
const width = useJsonViewerStore((store) => store.indentWidth);
|
|
15085
15234
|
const indentWidth = props.inspect ? width - marginLeft : width;
|
|
15086
|
-
const isEmptyValue = (0,
|
|
15235
|
+
const isEmptyValue = (0, import_react50.useMemo)(() => getValueSize(props.value) === 0, [
|
|
15087
15236
|
props.value
|
|
15088
15237
|
]);
|
|
15089
15238
|
if (isEmptyValue) {
|
|
15090
15239
|
return null;
|
|
15091
15240
|
}
|
|
15092
|
-
return /* @__PURE__ */ (0,
|
|
15241
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15093
15242
|
className: "data-object",
|
|
15094
15243
|
sx: {
|
|
15095
15244
|
display: props.inspect ? "block" : "inline-block",
|
|
@@ -15098,7 +15247,7 @@ var ObjectType = (props) => {
|
|
|
15098
15247
|
color: keyColor,
|
|
15099
15248
|
borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
|
|
15100
15249
|
},
|
|
15101
|
-
children: props.inspect ? elements : !isTrap && /* @__PURE__ */ (0,
|
|
15250
|
+
children: props.inspect ? elements : !isTrap && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15102
15251
|
component: "span",
|
|
15103
15252
|
className: "data-object-body",
|
|
15104
15253
|
onClick: () => props.setInspect(true),
|
|
@@ -15126,11 +15275,11 @@ var stringType = defineEasyType({
|
|
|
15126
15275
|
serialize: (value) => value,
|
|
15127
15276
|
deserialize: (value) => value,
|
|
15128
15277
|
Renderer: (props) => {
|
|
15129
|
-
const [showRest, setShowRest] = (0,
|
|
15278
|
+
const [showRest, setShowRest] = (0, import_react50.useState)(false);
|
|
15130
15279
|
const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
|
|
15131
15280
|
const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
|
|
15132
15281
|
const hasRest = props.value.length > collapseStringsAfterLength;
|
|
15133
|
-
return /* @__PURE__ */ (0,
|
|
15282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material8.Box, {
|
|
15134
15283
|
component: "span",
|
|
15135
15284
|
sx: {
|
|
15136
15285
|
overflowWrap: "anywhere",
|
|
@@ -15148,7 +15297,7 @@ var stringType = defineEasyType({
|
|
|
15148
15297
|
children: [
|
|
15149
15298
|
'"',
|
|
15150
15299
|
value,
|
|
15151
|
-
hasRest && !showRest && /* @__PURE__ */ (0,
|
|
15300
|
+
hasRest && !showRest && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15152
15301
|
component: "span",
|
|
15153
15302
|
sx: {
|
|
15154
15303
|
padding: 0.5
|
|
@@ -15167,7 +15316,7 @@ var undefinedType = defineEasyType({
|
|
|
15167
15316
|
displayTypeLabel: false,
|
|
15168
15317
|
Renderer: () => {
|
|
15169
15318
|
const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
|
|
15170
|
-
return /* @__PURE__ */ (0,
|
|
15319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15171
15320
|
sx: {
|
|
15172
15321
|
fontSize: "0.7rem",
|
|
15173
15322
|
backgroundColor,
|
|
@@ -15183,17 +15332,17 @@ function memorizeDataType(dataType) {
|
|
|
15183
15332
|
var _prevProps_path, _nextProps_path;
|
|
15184
15333
|
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("."));
|
|
15185
15334
|
}
|
|
15186
|
-
dataType.Component = /* @__PURE__ */ (0,
|
|
15335
|
+
dataType.Component = /* @__PURE__ */ (0, import_react50.memo)(dataType.Component, compare);
|
|
15187
15336
|
if (dataType.Editor) {
|
|
15188
|
-
dataType.Editor = /* @__PURE__ */ (0,
|
|
15337
|
+
dataType.Editor = /* @__PURE__ */ (0, import_react50.memo)(dataType.Editor, function compare2(prevProps, nextProps) {
|
|
15189
15338
|
return Object.is(prevProps.value, nextProps.value);
|
|
15190
15339
|
});
|
|
15191
15340
|
}
|
|
15192
15341
|
if (dataType.PreComponent) {
|
|
15193
|
-
dataType.PreComponent = /* @__PURE__ */ (0,
|
|
15342
|
+
dataType.PreComponent = /* @__PURE__ */ (0, import_react50.memo)(dataType.PreComponent, compare);
|
|
15194
15343
|
}
|
|
15195
15344
|
if (dataType.PostComponent) {
|
|
15196
|
-
dataType.PostComponent = /* @__PURE__ */ (0,
|
|
15345
|
+
dataType.PostComponent = /* @__PURE__ */ (0, import_react50.memo)(dataType.PostComponent, compare);
|
|
15197
15346
|
}
|
|
15198
15347
|
return dataType;
|
|
15199
15348
|
}
|
|
@@ -15219,10 +15368,10 @@ var createTypeRegistryStore = () => {
|
|
|
15219
15368
|
}
|
|
15220
15369
|
}));
|
|
15221
15370
|
};
|
|
15222
|
-
var TypeRegistryStoreContext = /* @__PURE__ */ (0,
|
|
15371
|
+
var TypeRegistryStoreContext = /* @__PURE__ */ (0, import_react50.createContext)(void 0);
|
|
15223
15372
|
TypeRegistryStoreContext.Provider;
|
|
15224
15373
|
var useTypeRegistryStore = (selector2, equalityFn) => {
|
|
15225
|
-
const store = (0,
|
|
15374
|
+
const store = (0, import_react50.useContext)(TypeRegistryStoreContext);
|
|
15226
15375
|
return (0, import_zustand.useStore)(store, selector2, equalityFn);
|
|
15227
15376
|
};
|
|
15228
15377
|
function matchTypeComponents(value, path, registry) {
|
|
@@ -15242,13 +15391,13 @@ function matchTypeComponents(value, path, registry) {
|
|
|
15242
15391
|
}
|
|
15243
15392
|
function useTypeComponents(value, path) {
|
|
15244
15393
|
const registry = useTypeRegistryStore((store) => store.registry);
|
|
15245
|
-
return (0,
|
|
15394
|
+
return (0, import_react50.useMemo)(() => matchTypeComponents(value, path, registry), [
|
|
15246
15395
|
value,
|
|
15247
15396
|
path,
|
|
15248
15397
|
registry
|
|
15249
15398
|
]);
|
|
15250
15399
|
}
|
|
15251
|
-
var IconBox = (props) => /* @__PURE__ */ (0,
|
|
15400
|
+
var IconBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15252
15401
|
component: "span",
|
|
15253
15402
|
...props,
|
|
15254
15403
|
sx: {
|
|
@@ -15263,7 +15412,7 @@ var DataKeyPair = (props) => {
|
|
|
15263
15412
|
var _props_editable;
|
|
15264
15413
|
const propsEditable = (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : void 0;
|
|
15265
15414
|
const storeEditable = useJsonViewerStore((store) => store.editable);
|
|
15266
|
-
const editable = (0,
|
|
15415
|
+
const editable = (0, import_react50.useMemo)(() => {
|
|
15267
15416
|
if (storeEditable === false) {
|
|
15268
15417
|
return false;
|
|
15269
15418
|
}
|
|
@@ -15280,11 +15429,11 @@ var DataKeyPair = (props) => {
|
|
|
15280
15429
|
storeEditable,
|
|
15281
15430
|
value
|
|
15282
15431
|
]);
|
|
15283
|
-
const [tempValue, setTempValue] = (0,
|
|
15432
|
+
const [tempValue, setTempValue] = (0, import_react50.useState)("");
|
|
15284
15433
|
const depth = path.length;
|
|
15285
15434
|
const key = path[depth - 1];
|
|
15286
15435
|
const hoverPath = useJsonViewerStore((store) => store.hoverPath);
|
|
15287
|
-
const isHover = (0,
|
|
15436
|
+
const isHover = (0, import_react50.useMemo)(() => {
|
|
15288
15437
|
return hoverPath && path.every((value2, index) => value2 === hoverPath.path[index] && nestedIndex === hoverPath.nestedIndex);
|
|
15289
15438
|
}, [
|
|
15290
15439
|
hoverPath,
|
|
@@ -15294,7 +15443,7 @@ var DataKeyPair = (props) => {
|
|
|
15294
15443
|
const setHover = useJsonViewerStore((store) => store.setHover);
|
|
15295
15444
|
const root = useJsonViewerStore((store) => store.value);
|
|
15296
15445
|
const [inspect, setInspect] = useInspect(path, value, nestedIndex);
|
|
15297
|
-
const [editing, setEditing] = (0,
|
|
15446
|
+
const [editing, setEditing] = (0, import_react50.useState)(false);
|
|
15298
15447
|
const onChange = useJsonViewerStore((store) => store.onChange);
|
|
15299
15448
|
const keyColor = useTextColor();
|
|
15300
15449
|
const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
|
|
@@ -15306,7 +15455,7 @@ var DataKeyPair = (props) => {
|
|
|
15306
15455
|
const isNumberKey = Number.isInteger(Number(key));
|
|
15307
15456
|
const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
|
|
15308
15457
|
const onAdd = useJsonViewerStore((store) => store.onAdd);
|
|
15309
|
-
const enableAdd = (0,
|
|
15458
|
+
const enableAdd = (0, import_react50.useMemo)(() => {
|
|
15310
15459
|
if (!onAdd || nestedIndex !== void 0) return false;
|
|
15311
15460
|
if (storeEnableAdd === false) {
|
|
15312
15461
|
return false;
|
|
@@ -15331,7 +15480,7 @@ var DataKeyPair = (props) => {
|
|
|
15331
15480
|
]);
|
|
15332
15481
|
const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
|
|
15333
15482
|
const onDelete = useJsonViewerStore((store) => store.onDelete);
|
|
15334
|
-
const enableDelete = (0,
|
|
15483
|
+
const enableDelete = (0, import_react50.useMemo)(() => {
|
|
15335
15484
|
if (!onDelete || nestedIndex !== void 0) return false;
|
|
15336
15485
|
if (isRoot) {
|
|
15337
15486
|
return false;
|
|
@@ -15358,7 +15507,7 @@ var DataKeyPair = (props) => {
|
|
|
15358
15507
|
const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
|
|
15359
15508
|
const { copy, copied } = useClipboard();
|
|
15360
15509
|
const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
|
|
15361
|
-
const isHighlight = (0,
|
|
15510
|
+
const isHighlight = (0, import_react50.useMemo)(() => {
|
|
15362
15511
|
if (!highlightUpdates || prevValue === void 0) return false;
|
|
15363
15512
|
if (typeof value !== typeof prevValue) {
|
|
15364
15513
|
return true;
|
|
@@ -15382,8 +15531,8 @@ var DataKeyPair = (props) => {
|
|
|
15382
15531
|
prevValue,
|
|
15383
15532
|
value
|
|
15384
15533
|
]);
|
|
15385
|
-
const highlightContainer = (0,
|
|
15386
|
-
(0,
|
|
15534
|
+
const highlightContainer = (0, import_react50.useRef)();
|
|
15535
|
+
(0, import_react50.useEffect)(() => {
|
|
15387
15536
|
if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
|
|
15388
15537
|
highlightContainer.current.animate([
|
|
15389
15538
|
{
|
|
@@ -15403,7 +15552,7 @@ var DataKeyPair = (props) => {
|
|
|
15403
15552
|
prevValue,
|
|
15404
15553
|
value
|
|
15405
15554
|
]);
|
|
15406
|
-
const startEditing = (0,
|
|
15555
|
+
const startEditing = (0, import_react50.useCallback)((event) => {
|
|
15407
15556
|
event.preventDefault();
|
|
15408
15557
|
if (serialize) setTempValue(serialize(value));
|
|
15409
15558
|
setEditing(true);
|
|
@@ -15411,14 +15560,14 @@ var DataKeyPair = (props) => {
|
|
|
15411
15560
|
serialize,
|
|
15412
15561
|
value
|
|
15413
15562
|
]);
|
|
15414
|
-
const abortEditing = (0,
|
|
15563
|
+
const abortEditing = (0, import_react50.useCallback)(() => {
|
|
15415
15564
|
setEditing(false);
|
|
15416
15565
|
setTempValue("");
|
|
15417
15566
|
}, [
|
|
15418
15567
|
setEditing,
|
|
15419
15568
|
setTempValue
|
|
15420
15569
|
]);
|
|
15421
|
-
const commitEditing = (0,
|
|
15570
|
+
const commitEditing = (0, import_react50.useCallback)((newValue) => {
|
|
15422
15571
|
setEditing(false);
|
|
15423
15572
|
if (!deserialize) return;
|
|
15424
15573
|
try {
|
|
@@ -15432,20 +15581,20 @@ var DataKeyPair = (props) => {
|
|
|
15432
15581
|
path,
|
|
15433
15582
|
value
|
|
15434
15583
|
]);
|
|
15435
|
-
const actionIcons = (0,
|
|
15584
|
+
const actionIcons = (0, import_react50.useMemo)(() => {
|
|
15436
15585
|
if (editing) {
|
|
15437
|
-
return /* @__PURE__ */ (0,
|
|
15586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, {
|
|
15438
15587
|
children: [
|
|
15439
|
-
/* @__PURE__ */ (0,
|
|
15440
|
-
children: /* @__PURE__ */ (0,
|
|
15588
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconBox, {
|
|
15589
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(CloseIcon, {
|
|
15441
15590
|
sx: {
|
|
15442
15591
|
fontSize: ".8rem"
|
|
15443
15592
|
},
|
|
15444
15593
|
onClick: abortEditing
|
|
15445
15594
|
})
|
|
15446
15595
|
}),
|
|
15447
|
-
/* @__PURE__ */ (0,
|
|
15448
|
-
children: /* @__PURE__ */ (0,
|
|
15596
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconBox, {
|
|
15597
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(CheckIcon, {
|
|
15449
15598
|
sx: {
|
|
15450
15599
|
fontSize: ".8rem"
|
|
15451
15600
|
},
|
|
@@ -15455,9 +15604,9 @@ var DataKeyPair = (props) => {
|
|
|
15455
15604
|
]
|
|
15456
15605
|
});
|
|
15457
15606
|
}
|
|
15458
|
-
return /* @__PURE__ */ (0,
|
|
15607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, {
|
|
15459
15608
|
children: [
|
|
15460
|
-
enableClipboard && /* @__PURE__ */ (0,
|
|
15609
|
+
enableClipboard && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconBox, {
|
|
15461
15610
|
onClick: (event) => {
|
|
15462
15611
|
event.preventDefault();
|
|
15463
15612
|
try {
|
|
@@ -15466,41 +15615,41 @@ var DataKeyPair = (props) => {
|
|
|
15466
15615
|
console.error(e2);
|
|
15467
15616
|
}
|
|
15468
15617
|
},
|
|
15469
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
15618
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(CheckIcon, {
|
|
15470
15619
|
sx: {
|
|
15471
15620
|
fontSize: ".8rem"
|
|
15472
15621
|
}
|
|
15473
|
-
}) : /* @__PURE__ */ (0,
|
|
15622
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ContentCopyIcon, {
|
|
15474
15623
|
sx: {
|
|
15475
15624
|
fontSize: ".8rem"
|
|
15476
15625
|
}
|
|
15477
15626
|
})
|
|
15478
15627
|
}),
|
|
15479
|
-
Editor && editable && serialize && deserialize && /* @__PURE__ */ (0,
|
|
15628
|
+
Editor && editable && serialize && deserialize && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconBox, {
|
|
15480
15629
|
onClick: startEditing,
|
|
15481
|
-
children: /* @__PURE__ */ (0,
|
|
15630
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(EditIcon, {
|
|
15482
15631
|
sx: {
|
|
15483
15632
|
fontSize: ".8rem"
|
|
15484
15633
|
}
|
|
15485
15634
|
})
|
|
15486
15635
|
}),
|
|
15487
|
-
enableAdd && /* @__PURE__ */ (0,
|
|
15636
|
+
enableAdd && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconBox, {
|
|
15488
15637
|
onClick: (event) => {
|
|
15489
15638
|
event.preventDefault();
|
|
15490
15639
|
onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
|
|
15491
15640
|
},
|
|
15492
|
-
children: /* @__PURE__ */ (0,
|
|
15641
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AddBoxIcon, {
|
|
15493
15642
|
sx: {
|
|
15494
15643
|
fontSize: ".8rem"
|
|
15495
15644
|
}
|
|
15496
15645
|
})
|
|
15497
15646
|
}),
|
|
15498
|
-
enableDelete && /* @__PURE__ */ (0,
|
|
15647
|
+
enableDelete && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconBox, {
|
|
15499
15648
|
onClick: (event) => {
|
|
15500
15649
|
event.preventDefault();
|
|
15501
15650
|
onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
|
|
15502
15651
|
},
|
|
15503
|
-
children: /* @__PURE__ */ (0,
|
|
15652
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DeleteIcon, {
|
|
15504
15653
|
sx: {
|
|
15505
15654
|
fontSize: ".9rem"
|
|
15506
15655
|
}
|
|
@@ -15528,12 +15677,12 @@ var DataKeyPair = (props) => {
|
|
|
15528
15677
|
abortEditing,
|
|
15529
15678
|
commitEditing
|
|
15530
15679
|
]);
|
|
15531
|
-
const isEmptyValue = (0,
|
|
15680
|
+
const isEmptyValue = (0, import_react50.useMemo)(() => getValueSize(value) === 0, [
|
|
15532
15681
|
value
|
|
15533
15682
|
]);
|
|
15534
15683
|
const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
|
|
15535
15684
|
const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
|
|
15536
|
-
const downstreamProps = (0,
|
|
15685
|
+
const downstreamProps = (0, import_react50.useMemo)(() => ({
|
|
15537
15686
|
path,
|
|
15538
15687
|
inspect,
|
|
15539
15688
|
setInspect,
|
|
@@ -15548,19 +15697,19 @@ var DataKeyPair = (props) => {
|
|
|
15548
15697
|
prevValue,
|
|
15549
15698
|
nestedIndex
|
|
15550
15699
|
]);
|
|
15551
|
-
return /* @__PURE__ */ (0,
|
|
15700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material8.Box, {
|
|
15552
15701
|
className: "data-key-pair",
|
|
15553
15702
|
"data-testid": "data-key-pair" + path.join("."),
|
|
15554
15703
|
sx: {
|
|
15555
15704
|
userSelect: "text"
|
|
15556
15705
|
},
|
|
15557
|
-
onMouseEnter: (0,
|
|
15706
|
+
onMouseEnter: (0, import_react50.useCallback)(() => setHover(path, nestedIndex), [
|
|
15558
15707
|
setHover,
|
|
15559
15708
|
path,
|
|
15560
15709
|
nestedIndex
|
|
15561
15710
|
]),
|
|
15562
15711
|
children: [
|
|
15563
|
-
/* @__PURE__ */ (0,
|
|
15712
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(DataBox, {
|
|
15564
15713
|
component: "span",
|
|
15565
15714
|
className: "data-key",
|
|
15566
15715
|
sx: {
|
|
@@ -15569,7 +15718,7 @@ var DataKeyPair = (props) => {
|
|
|
15569
15718
|
letterSpacing: 0.5,
|
|
15570
15719
|
opacity: 0.8
|
|
15571
15720
|
},
|
|
15572
|
-
onClick: (0,
|
|
15721
|
+
onClick: (0, import_react50.useCallback)((event) => {
|
|
15573
15722
|
if (event.isDefaultPrevented()) {
|
|
15574
15723
|
return;
|
|
15575
15724
|
}
|
|
@@ -15581,7 +15730,7 @@ var DataKeyPair = (props) => {
|
|
|
15581
15730
|
setInspect
|
|
15582
15731
|
]),
|
|
15583
15732
|
children: [
|
|
15584
|
-
expandable ? inspect ? /* @__PURE__ */ (0,
|
|
15733
|
+
expandable ? inspect ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ExpandMoreIcon, {
|
|
15585
15734
|
className: "data-key-toggle-expanded",
|
|
15586
15735
|
sx: {
|
|
15587
15736
|
fontSize: ".8rem",
|
|
@@ -15589,7 +15738,7 @@ var DataKeyPair = (props) => {
|
|
|
15589
15738
|
cursor: "pointer"
|
|
15590
15739
|
}
|
|
15591
15740
|
}
|
|
15592
|
-
}) : /* @__PURE__ */ (0,
|
|
15741
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ChevronRightIcon, {
|
|
15593
15742
|
className: "data-key-toggle-collapsed",
|
|
15594
15743
|
sx: {
|
|
15595
15744
|
fontSize: ".8rem",
|
|
@@ -15598,44 +15747,44 @@ var DataKeyPair = (props) => {
|
|
|
15598
15747
|
}
|
|
15599
15748
|
}
|
|
15600
15749
|
}) : null,
|
|
15601
|
-
/* @__PURE__ */ (0,
|
|
15750
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15602
15751
|
ref: highlightContainer,
|
|
15603
15752
|
className: "data-key-key",
|
|
15604
15753
|
component: "span",
|
|
15605
|
-
children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ (0,
|
|
15754
|
+
children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, {
|
|
15606
15755
|
children: [
|
|
15607
15756
|
'"',
|
|
15608
15757
|
rootName,
|
|
15609
15758
|
'"'
|
|
15610
15759
|
]
|
|
15611
|
-
}) : /* @__PURE__ */ (0,
|
|
15760
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {
|
|
15612
15761
|
children: rootName
|
|
15613
|
-
}) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ (0,
|
|
15762
|
+
}) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(KeyRenderer, {
|
|
15614
15763
|
...downstreamProps
|
|
15615
|
-
}) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ (0,
|
|
15764
|
+
}) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15616
15765
|
component: "span",
|
|
15617
15766
|
style: {
|
|
15618
15767
|
color: numberKeyColor,
|
|
15619
15768
|
userSelect: isNumberKey ? "none" : "auto"
|
|
15620
15769
|
},
|
|
15621
15770
|
children: key
|
|
15622
|
-
}) : quotesOnKeys ? /* @__PURE__ */ (0,
|
|
15771
|
+
}) : quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, {
|
|
15623
15772
|
children: [
|
|
15624
15773
|
'"',
|
|
15625
15774
|
key,
|
|
15626
15775
|
'"'
|
|
15627
15776
|
]
|
|
15628
|
-
}) : /* @__PURE__ */ (0,
|
|
15777
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {
|
|
15629
15778
|
children: key
|
|
15630
15779
|
}))
|
|
15631
15780
|
}),
|
|
15632
|
-
isRoot ? rootName !== false && /* @__PURE__ */ (0,
|
|
15781
|
+
isRoot ? rootName !== false && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataBox, {
|
|
15633
15782
|
className: "data-key-colon",
|
|
15634
15783
|
sx: {
|
|
15635
15784
|
mr: 0.5
|
|
15636
15785
|
},
|
|
15637
15786
|
children: ":"
|
|
15638
|
-
}) : nestedIndex === void 0 && /* @__PURE__ */ (0,
|
|
15787
|
+
}) : nestedIndex === void 0 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataBox, {
|
|
15639
15788
|
className: "data-key-colon",
|
|
15640
15789
|
sx: {
|
|
15641
15790
|
mr: 0.5,
|
|
@@ -15646,29 +15795,29 @@ var DataKeyPair = (props) => {
|
|
|
15646
15795
|
},
|
|
15647
15796
|
children: ":"
|
|
15648
15797
|
}),
|
|
15649
|
-
PreComponent && /* @__PURE__ */ (0,
|
|
15798
|
+
PreComponent && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(PreComponent, {
|
|
15650
15799
|
...downstreamProps
|
|
15651
15800
|
}),
|
|
15652
15801
|
isHover && expandable && inspect && actionIcons
|
|
15653
15802
|
]
|
|
15654
15803
|
}),
|
|
15655
|
-
editing && editable ? Editor && /* @__PURE__ */ (0,
|
|
15804
|
+
editing && editable ? Editor && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Editor, {
|
|
15656
15805
|
path,
|
|
15657
15806
|
value: tempValue,
|
|
15658
15807
|
setValue: setTempValue,
|
|
15659
15808
|
abortEditing,
|
|
15660
15809
|
commitEditing
|
|
15661
|
-
}) : Component ? /* @__PURE__ */ (0,
|
|
15810
|
+
}) : Component ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Component, {
|
|
15662
15811
|
...downstreamProps
|
|
15663
|
-
}) : /* @__PURE__ */ (0,
|
|
15812
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Box, {
|
|
15664
15813
|
component: "span",
|
|
15665
15814
|
className: "data-value-fallback",
|
|
15666
15815
|
children: "fallback: ".concat(value)
|
|
15667
15816
|
}),
|
|
15668
|
-
PostComponent && /* @__PURE__ */ (0,
|
|
15817
|
+
PostComponent && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(PostComponent, {
|
|
15669
15818
|
...downstreamProps
|
|
15670
15819
|
}),
|
|
15671
|
-
!last && displayComma && /* @__PURE__ */ (0,
|
|
15820
|
+
!last && displayComma && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataBox, {
|
|
15672
15821
|
children: ","
|
|
15673
15822
|
}),
|
|
15674
15823
|
isHover && expandable && !inspect && actionIcons,
|
|
@@ -15679,8 +15828,8 @@ var DataKeyPair = (props) => {
|
|
|
15679
15828
|
};
|
|
15680
15829
|
var query = "(prefers-color-scheme: dark)";
|
|
15681
15830
|
function useThemeDetector() {
|
|
15682
|
-
const [isDark, setIsDark] = (0,
|
|
15683
|
-
(0,
|
|
15831
|
+
const [isDark, setIsDark] = (0, import_react50.useState)(false);
|
|
15832
|
+
(0, import_react50.useEffect)(() => {
|
|
15684
15833
|
const listener = (e2) => setIsDark(e2.matches);
|
|
15685
15834
|
setIsDark(window.matchMedia(query).matches);
|
|
15686
15835
|
const queryMedia = window.matchMedia(query);
|
|
@@ -15690,8 +15839,8 @@ function useThemeDetector() {
|
|
|
15690
15839
|
return isDark;
|
|
15691
15840
|
}
|
|
15692
15841
|
function useSetIfNotUndefinedEffect(key, value) {
|
|
15693
|
-
const { setState } = (0,
|
|
15694
|
-
(0,
|
|
15842
|
+
const { setState } = (0, import_react50.useContext)(JsonViewerStoreContext);
|
|
15843
|
+
(0, import_react50.useEffect)(() => {
|
|
15695
15844
|
if (value !== void 0) {
|
|
15696
15845
|
setState({
|
|
15697
15846
|
[key]: value
|
|
@@ -15704,8 +15853,8 @@ function useSetIfNotUndefinedEffect(key, value) {
|
|
|
15704
15853
|
]);
|
|
15705
15854
|
}
|
|
15706
15855
|
var JsonViewerInner = (props) => {
|
|
15707
|
-
const { setState } = (0,
|
|
15708
|
-
(0,
|
|
15856
|
+
const { setState } = (0, import_react50.useContext)(JsonViewerStoreContext);
|
|
15857
|
+
(0, import_react50.useEffect)(() => {
|
|
15709
15858
|
setState((state) => ({
|
|
15710
15859
|
prevValue: state.value,
|
|
15711
15860
|
value: props.value
|
|
@@ -15733,7 +15882,7 @@ var JsonViewerInner = (props) => {
|
|
|
15733
15882
|
useSetIfNotUndefinedEffect("displaySize", props.displaySize);
|
|
15734
15883
|
useSetIfNotUndefinedEffect("displayComma", props.displayComma);
|
|
15735
15884
|
useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
|
|
15736
|
-
(0,
|
|
15885
|
+
(0, import_react50.useEffect)(() => {
|
|
15737
15886
|
if (props.theme === "light") {
|
|
15738
15887
|
setState({
|
|
15739
15888
|
colorspace: lightColorspace
|
|
@@ -15751,13 +15900,13 @@ var JsonViewerInner = (props) => {
|
|
|
15751
15900
|
setState,
|
|
15752
15901
|
props.theme
|
|
15753
15902
|
]);
|
|
15754
|
-
const themeCls = (0,
|
|
15903
|
+
const themeCls = (0, import_react50.useMemo)(() => {
|
|
15755
15904
|
if (typeof props.theme === "object") return "json-viewer-theme-custom";
|
|
15756
15905
|
return props.theme === "dark" ? "json-viewer-theme-dark" : "json-viewer-theme-light";
|
|
15757
15906
|
}, [
|
|
15758
15907
|
props.theme
|
|
15759
15908
|
]);
|
|
15760
|
-
const onceRef = (0,
|
|
15909
|
+
const onceRef = (0, import_react50.useRef)(true);
|
|
15761
15910
|
const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
|
|
15762
15911
|
if (onceRef.current) {
|
|
15763
15912
|
const allTypes = props.valueTypes ? [
|
|
@@ -15769,7 +15918,7 @@ var JsonViewerInner = (props) => {
|
|
|
15769
15918
|
registerTypes(allTypes);
|
|
15770
15919
|
onceRef.current = false;
|
|
15771
15920
|
}
|
|
15772
|
-
(0,
|
|
15921
|
+
(0, import_react50.useEffect)(() => {
|
|
15773
15922
|
const allTypes = props.valueTypes ? [
|
|
15774
15923
|
...predefinedTypes,
|
|
15775
15924
|
...props.valueTypes
|
|
@@ -15783,12 +15932,12 @@ var JsonViewerInner = (props) => {
|
|
|
15783
15932
|
]);
|
|
15784
15933
|
const value = useJsonViewerStore((store) => store.value);
|
|
15785
15934
|
const prevValue = useJsonViewerStore((store) => store.prevValue);
|
|
15786
|
-
const emptyPath = (0,
|
|
15935
|
+
const emptyPath = (0, import_react50.useMemo)(() => [], []);
|
|
15787
15936
|
const setHover = useJsonViewerStore((store) => store.setHover);
|
|
15788
|
-
const onMouseLeave = (0,
|
|
15937
|
+
const onMouseLeave = (0, import_react50.useCallback)(() => setHover(null), [
|
|
15789
15938
|
setHover
|
|
15790
15939
|
]);
|
|
15791
|
-
return /* @__PURE__ */ (0,
|
|
15940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.Paper, {
|
|
15792
15941
|
elevation: 0,
|
|
15793
15942
|
className: clsx(themeCls, props.className),
|
|
15794
15943
|
style: props.style,
|
|
@@ -15799,7 +15948,7 @@ var JsonViewerInner = (props) => {
|
|
|
15799
15948
|
...props.sx
|
|
15800
15949
|
},
|
|
15801
15950
|
onMouseLeave,
|
|
15802
|
-
children: /* @__PURE__ */ (0,
|
|
15951
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DataKeyPair, {
|
|
15803
15952
|
value,
|
|
15804
15953
|
prevValue,
|
|
15805
15954
|
path: emptyPath,
|
|
@@ -15814,17 +15963,17 @@ var JsonViewer = function JsonViewer2(props) {
|
|
|
15814
15963
|
}
|
|
15815
15964
|
}
|
|
15816
15965
|
const isAutoDarkTheme = useThemeDetector();
|
|
15817
|
-
const themeType = (0,
|
|
15966
|
+
const themeType = (0, import_react50.useMemo)(() => {
|
|
15818
15967
|
var _props_theme;
|
|
15819
15968
|
return props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : "light";
|
|
15820
15969
|
}, [
|
|
15821
15970
|
isAutoDarkTheme,
|
|
15822
15971
|
props.theme
|
|
15823
15972
|
]);
|
|
15824
|
-
const theme = (0,
|
|
15973
|
+
const theme = (0, import_react50.useMemo)(() => {
|
|
15825
15974
|
const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
|
|
15826
15975
|
const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
|
|
15827
|
-
return (0,
|
|
15976
|
+
return (0, import_material8.createTheme)({
|
|
15828
15977
|
components: {
|
|
15829
15978
|
MuiPaper: {
|
|
15830
15979
|
styleOverrides: {
|
|
@@ -15849,15 +15998,15 @@ var JsonViewer = function JsonViewer2(props) {
|
|
|
15849
15998
|
...props,
|
|
15850
15999
|
theme: themeType
|
|
15851
16000
|
};
|
|
15852
|
-
const jsonViewerStore = (0,
|
|
15853
|
-
const typeRegistryStore = (0,
|
|
15854
|
-
return /* @__PURE__ */ (0,
|
|
16001
|
+
const jsonViewerStore = (0, import_react50.useMemo)(() => createJsonViewerStore(props), []);
|
|
16002
|
+
const typeRegistryStore = (0, import_react50.useMemo)(() => createTypeRegistryStore(), []);
|
|
16003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material8.ThemeProvider, {
|
|
15855
16004
|
theme,
|
|
15856
|
-
children: /* @__PURE__ */ (0,
|
|
16005
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TypeRegistryStoreContext.Provider, {
|
|
15857
16006
|
value: typeRegistryStore,
|
|
15858
|
-
children: /* @__PURE__ */ (0,
|
|
16007
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(JsonViewerStoreContext.Provider, {
|
|
15859
16008
|
value: jsonViewerStore,
|
|
15860
|
-
children: /* @__PURE__ */ (0,
|
|
16009
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(JsonViewerInner, {
|
|
15861
16010
|
...mixedProps
|
|
15862
16011
|
})
|
|
15863
16012
|
})
|
|
@@ -15866,7 +16015,7 @@ var JsonViewer = function JsonViewer2(props) {
|
|
|
15866
16015
|
};
|
|
15867
16016
|
|
|
15868
16017
|
// src/components/event-details/event-details.tsx
|
|
15869
|
-
var
|
|
16018
|
+
var import_react55 = require("react");
|
|
15870
16019
|
|
|
15871
16020
|
// src/utils/iam-utils.ts
|
|
15872
16021
|
function determinePermissionStatus(payload) {
|
|
@@ -16063,41 +16212,41 @@ var getEventGroupsByType = (events) => {
|
|
|
16063
16212
|
};
|
|
16064
16213
|
|
|
16065
16214
|
// src/components/event-details/event-detail.tsx
|
|
16066
|
-
var
|
|
16067
|
-
var
|
|
16068
|
-
var
|
|
16215
|
+
var import_icons_material7 = require("@mui/icons-material");
|
|
16216
|
+
var import_material12 = require("@mui/material");
|
|
16217
|
+
var import_react52 = require("react");
|
|
16069
16218
|
|
|
16070
16219
|
// src/components/status-icon.tsx
|
|
16071
|
-
var
|
|
16072
|
-
var
|
|
16073
|
-
var
|
|
16220
|
+
var import_icons_material4 = require("@mui/icons-material");
|
|
16221
|
+
var import_material9 = require("@mui/material");
|
|
16222
|
+
var import_jsx_runtime131 = require("react/jsx-runtime");
|
|
16074
16223
|
var StatusIcon = ({ errorLevel }) => {
|
|
16075
16224
|
switch (errorLevel) {
|
|
16076
16225
|
case EventLevel.LevelError: {
|
|
16077
|
-
return /* @__PURE__ */ (0,
|
|
16226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Cancel, { sx: { color: "red" } });
|
|
16078
16227
|
}
|
|
16079
16228
|
case EventLevel.LevelInfo: {
|
|
16080
|
-
return /* @__PURE__ */ (0,
|
|
16229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Info, { sx: { color: "gray" } });
|
|
16081
16230
|
}
|
|
16082
16231
|
case EventLevel.LevelPermission: {
|
|
16083
|
-
return /* @__PURE__ */ (0,
|
|
16232
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.RemoveCircle, { sx: { color: "blue" } });
|
|
16084
16233
|
}
|
|
16085
16234
|
case EventLevel.LevelWarning: {
|
|
16086
|
-
return /* @__PURE__ */ (0,
|
|
16235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Error, { sx: { color: "orange" } });
|
|
16087
16236
|
}
|
|
16088
16237
|
default: {
|
|
16089
|
-
return /* @__PURE__ */ (0,
|
|
16238
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.CheckCircle, { sx: { color: "lightgray" } });
|
|
16090
16239
|
}
|
|
16091
16240
|
}
|
|
16092
16241
|
};
|
|
16093
16242
|
|
|
16094
16243
|
// src/components/event-details/iam-event-detail.tsx
|
|
16095
|
-
var
|
|
16096
|
-
var
|
|
16097
|
-
var
|
|
16098
|
-
var DetailRow = ({ content, label }) => /* @__PURE__ */ (0,
|
|
16099
|
-
/* @__PURE__ */ (0,
|
|
16100
|
-
|
|
16244
|
+
var import_icons_material5 = require("@mui/icons-material");
|
|
16245
|
+
var import_material10 = require("@mui/material");
|
|
16246
|
+
var import_jsx_runtime132 = require("react/jsx-runtime");
|
|
16247
|
+
var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material10.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
|
|
16248
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16249
|
+
import_material10.Typography,
|
|
16101
16250
|
{
|
|
16102
16251
|
sx: {
|
|
16103
16252
|
color: "text.secondary",
|
|
@@ -16107,8 +16256,8 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime13
|
|
|
16107
16256
|
children: label
|
|
16108
16257
|
}
|
|
16109
16258
|
) }),
|
|
16110
|
-
/* @__PURE__ */ (0,
|
|
16111
|
-
|
|
16259
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16260
|
+
import_material10.Typography,
|
|
16112
16261
|
{
|
|
16113
16262
|
sx: {
|
|
16114
16263
|
color: "text.primary",
|
|
@@ -16123,30 +16272,30 @@ var PermissionIcon = ({ status }) => {
|
|
|
16123
16272
|
switch (status) {
|
|
16124
16273
|
case "explicitly_allowed":
|
|
16125
16274
|
case "implicitly_allowed": {
|
|
16126
|
-
return /* @__PURE__ */ (0,
|
|
16275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
|
|
16127
16276
|
}
|
|
16128
16277
|
case "explicitly_denied": {
|
|
16129
|
-
return /* @__PURE__ */ (0,
|
|
16278
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.Error, { sx: { color: "error.main", fontSize: "1rem" } });
|
|
16130
16279
|
}
|
|
16131
16280
|
case "implicitly_denied": {
|
|
16132
|
-
return /* @__PURE__ */ (0,
|
|
16281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
|
|
16133
16282
|
}
|
|
16134
16283
|
}
|
|
16135
16284
|
};
|
|
16136
16285
|
var IAMEventDetail = ({ event }) => {
|
|
16137
16286
|
const payloadString = event.attributes?.payload;
|
|
16138
16287
|
if (!payloadString) {
|
|
16139
|
-
return /* @__PURE__ */ (0,
|
|
16288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
|
|
16140
16289
|
}
|
|
16141
16290
|
const parsedIAM = parseIAMEvent(payloadString);
|
|
16142
16291
|
if (!parsedIAM) {
|
|
16143
|
-
return /* @__PURE__ */ (0,
|
|
16292
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
|
|
16144
16293
|
}
|
|
16145
|
-
return /* @__PURE__ */ (0,
|
|
16146
|
-
/* @__PURE__ */ (0,
|
|
16147
|
-
|
|
16294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material10.Box, { sx: { p: 2 }, children: [
|
|
16295
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16296
|
+
import_material10.Chip,
|
|
16148
16297
|
{
|
|
16149
|
-
icon: /* @__PURE__ */ (0,
|
|
16298
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(PermissionIcon, { status: parsedIAM.permission }),
|
|
16150
16299
|
label: formatPermissionStatus(parsedIAM.permission),
|
|
16151
16300
|
size: "small",
|
|
16152
16301
|
sx: {
|
|
@@ -16156,13 +16305,13 @@ var IAMEventDetail = ({ event }) => {
|
|
|
16156
16305
|
variant: "outlined"
|
|
16157
16306
|
}
|
|
16158
16307
|
) }),
|
|
16159
|
-
/* @__PURE__ */ (0,
|
|
16160
|
-
/* @__PURE__ */ (0,
|
|
16161
|
-
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0,
|
|
16308
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
|
|
16309
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
|
|
16310
|
+
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16162
16311
|
DetailRow,
|
|
16163
16312
|
{
|
|
16164
|
-
content: /* @__PURE__ */ (0,
|
|
16165
|
-
|
|
16313
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16314
|
+
import_material10.Typography,
|
|
16166
16315
|
{
|
|
16167
16316
|
sx: {
|
|
16168
16317
|
color: "text.primary"
|
|
@@ -16175,11 +16324,11 @@ var IAMEventDetail = ({ event }) => {
|
|
|
16175
16324
|
label: "Actions"
|
|
16176
16325
|
}
|
|
16177
16326
|
),
|
|
16178
|
-
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0,
|
|
16327
|
+
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16179
16328
|
DetailRow,
|
|
16180
16329
|
{
|
|
16181
|
-
content: /* @__PURE__ */ (0,
|
|
16182
|
-
|
|
16330
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
16331
|
+
import_material10.Typography,
|
|
16183
16332
|
{
|
|
16184
16333
|
sx: {
|
|
16185
16334
|
color: "text.primary",
|
|
@@ -16193,20 +16342,20 @@ var IAMEventDetail = ({ event }) => {
|
|
|
16193
16342
|
label: "Resources"
|
|
16194
16343
|
}
|
|
16195
16344
|
),
|
|
16196
|
-
/* @__PURE__ */ (0,
|
|
16197
|
-
/* @__PURE__ */ (0,
|
|
16198
|
-
/* @__PURE__ */ (0,
|
|
16199
|
-
parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0,
|
|
16200
|
-
/* @__PURE__ */ (0,
|
|
16201
|
-
/* @__PURE__ */ (0,
|
|
16345
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material10.Box, { sx: { mt: 2 }, children: [
|
|
16346
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
|
|
16347
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material10.Grid, { container: true, spacing: 2, children: [
|
|
16348
|
+
parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
|
|
16349
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
|
|
16350
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
|
|
16202
16351
|
] }) }),
|
|
16203
|
-
parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0,
|
|
16204
|
-
/* @__PURE__ */ (0,
|
|
16205
|
-
/* @__PURE__ */ (0,
|
|
16352
|
+
parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
|
|
16353
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
|
|
16354
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
|
|
16206
16355
|
] }) }),
|
|
16207
|
-
parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0,
|
|
16208
|
-
/* @__PURE__ */ (0,
|
|
16209
|
-
/* @__PURE__ */ (0,
|
|
16356
|
+
parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
|
|
16357
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
|
|
16358
|
+
/* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
|
|
16210
16359
|
] }) })
|
|
16211
16360
|
] })
|
|
16212
16361
|
] })
|
|
@@ -16214,10 +16363,10 @@ var IAMEventDetail = ({ event }) => {
|
|
|
16214
16363
|
};
|
|
16215
16364
|
|
|
16216
16365
|
// src/components/event-details/iam-permission-detail.tsx
|
|
16217
|
-
var
|
|
16218
|
-
var
|
|
16219
|
-
var
|
|
16220
|
-
var
|
|
16366
|
+
var import_icons_material6 = require("@mui/icons-material");
|
|
16367
|
+
var import_material11 = require("@mui/material");
|
|
16368
|
+
var import_react51 = require("react");
|
|
16369
|
+
var import_jsx_runtime133 = require("react/jsx-runtime");
|
|
16221
16370
|
var getChipColors = (status) => {
|
|
16222
16371
|
const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
|
|
16223
16372
|
return {
|
|
@@ -16226,8 +16375,8 @@ var getChipColors = (status) => {
|
|
|
16226
16375
|
};
|
|
16227
16376
|
};
|
|
16228
16377
|
var IAMPermissionItem = ({ event }) => {
|
|
16229
|
-
const [isOpen, setIsOpen] = (0,
|
|
16230
|
-
const parsedData = (0,
|
|
16378
|
+
const [isOpen, setIsOpen] = (0, import_react51.useState)(false);
|
|
16379
|
+
const parsedData = (0, import_react51.useMemo)(() => {
|
|
16231
16380
|
const payloadString = event.attributes?.payload;
|
|
16232
16381
|
if (!payloadString) {
|
|
16233
16382
|
return;
|
|
@@ -16245,13 +16394,13 @@ var IAMPermissionItem = ({ event }) => {
|
|
|
16245
16394
|
return null;
|
|
16246
16395
|
}
|
|
16247
16396
|
const { chipColors, parsedIAM } = parsedData;
|
|
16248
|
-
return /* @__PURE__ */ (0,
|
|
16249
|
-
/* @__PURE__ */ (0,
|
|
16250
|
-
/* @__PURE__ */ (0,
|
|
16397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { mb: 1 }, children: [
|
|
16398
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { alignItems: "center", display: "flex" }, children: [
|
|
16399
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.IconButton, { onClick: () => {
|
|
16251
16400
|
setIsOpen(!isOpen);
|
|
16252
|
-
}, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ (0,
|
|
16253
|
-
/* @__PURE__ */ (0,
|
|
16254
|
-
|
|
16401
|
+
}, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material6.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material6.KeyboardArrowRight, {}) }),
|
|
16402
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16403
|
+
import_material11.Chip,
|
|
16255
16404
|
{
|
|
16256
16405
|
label: formatPermissionStatus(parsedIAM.permission),
|
|
16257
16406
|
size: "small",
|
|
@@ -16262,19 +16411,19 @@ var IAMPermissionItem = ({ event }) => {
|
|
|
16262
16411
|
}
|
|
16263
16412
|
)
|
|
16264
16413
|
] }),
|
|
16265
|
-
isOpen && /* @__PURE__ */ (0,
|
|
16266
|
-
/* @__PURE__ */ (0,
|
|
16267
|
-
/* @__PURE__ */ (0,
|
|
16414
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { children: [
|
|
16415
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
|
|
16416
|
+
/* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { variant: "body2", children: parsedIAM.principal })
|
|
16268
16417
|
] }) })
|
|
16269
16418
|
] });
|
|
16270
16419
|
};
|
|
16271
|
-
var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0,
|
|
16420
|
+
var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
|
|
16272
16421
|
|
|
16273
16422
|
// src/components/event-details/event-detail.tsx
|
|
16274
|
-
var
|
|
16275
|
-
var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0,
|
|
16276
|
-
/* @__PURE__ */ (0,
|
|
16277
|
-
|
|
16423
|
+
var import_jsx_runtime134 = require("react/jsx-runtime");
|
|
16424
|
+
var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
|
|
16425
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16426
|
+
import_material12.Typography,
|
|
16278
16427
|
{
|
|
16279
16428
|
sx: {
|
|
16280
16429
|
color: "text.primary",
|
|
@@ -16284,8 +16433,8 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
|
|
|
16284
16433
|
children: label
|
|
16285
16434
|
}
|
|
16286
16435
|
) }),
|
|
16287
|
-
/* @__PURE__ */ (0,
|
|
16288
|
-
|
|
16436
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16437
|
+
import_material12.Typography,
|
|
16289
16438
|
{
|
|
16290
16439
|
sx: {
|
|
16291
16440
|
color: "text.primary",
|
|
@@ -16297,15 +16446,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
|
|
|
16297
16446
|
) : content })
|
|
16298
16447
|
] });
|
|
16299
16448
|
var EventMessage = ({ event }) => {
|
|
16300
|
-
const [isOpen, setIsOpen] = (0,
|
|
16301
|
-
const [isOverflowing, setIsOverflowing] = (0,
|
|
16302
|
-
const textReference = (0,
|
|
16303
|
-
const parsedMessage = (0,
|
|
16304
|
-
const isIAMPolicyEvent = (0,
|
|
16449
|
+
const [isOpen, setIsOpen] = (0, import_react52.useState)(false);
|
|
16450
|
+
const [isOverflowing, setIsOverflowing] = (0, import_react52.useState)(false);
|
|
16451
|
+
const textReference = (0, import_react52.useRef)(null);
|
|
16452
|
+
const parsedMessage = (0, import_react52.useMemo)(() => parseEventMessage(event), [event]);
|
|
16453
|
+
const isIAMPolicyEvent = (0, import_react52.useMemo)(
|
|
16305
16454
|
() => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
|
|
16306
16455
|
[event]
|
|
16307
16456
|
);
|
|
16308
|
-
(0,
|
|
16457
|
+
(0, import_react52.useEffect)(() => {
|
|
16309
16458
|
const checkOverflow = () => {
|
|
16310
16459
|
const element = textReference.current;
|
|
16311
16460
|
if (element) {
|
|
@@ -16318,29 +16467,29 @@ var EventMessage = ({ event }) => {
|
|
|
16318
16467
|
window.removeEventListener("resize", checkOverflow);
|
|
16319
16468
|
};
|
|
16320
16469
|
}, [parsedMessage.headline]);
|
|
16321
|
-
const hasAdditionalContent = (0,
|
|
16470
|
+
const hasAdditionalContent = (0, import_react52.useMemo)(
|
|
16322
16471
|
() => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
|
|
16323
16472
|
[parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
|
|
16324
16473
|
);
|
|
16325
|
-
const shouldShowToggle = (0,
|
|
16474
|
+
const shouldShowToggle = (0, import_react52.useMemo)(
|
|
16326
16475
|
() => isOverflowing || hasAdditionalContent,
|
|
16327
16476
|
[isOverflowing, hasAdditionalContent]
|
|
16328
16477
|
);
|
|
16329
|
-
return /* @__PURE__ */ (0,
|
|
16330
|
-
/* @__PURE__ */ (0,
|
|
16331
|
-
Boolean(shouldShowToggle) && /* @__PURE__ */ (0,
|
|
16332
|
-
|
|
16478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
|
|
16479
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { alignItems: "flex-start", display: "flex" }, children: [
|
|
16480
|
+
Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16481
|
+
import_material12.IconButton,
|
|
16333
16482
|
{
|
|
16334
16483
|
onClick: () => {
|
|
16335
16484
|
setIsOpen(!isOpen);
|
|
16336
16485
|
},
|
|
16337
16486
|
size: "small",
|
|
16338
16487
|
sx: { mr: 1, mt: -0.5, p: 0 },
|
|
16339
|
-
children: isOpen ? /* @__PURE__ */ (0,
|
|
16488
|
+
children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material7.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material7.KeyboardArrowRight, {})
|
|
16340
16489
|
}
|
|
16341
16490
|
),
|
|
16342
|
-
/* @__PURE__ */ (0,
|
|
16343
|
-
|
|
16491
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16492
|
+
import_material12.Typography,
|
|
16344
16493
|
{
|
|
16345
16494
|
ref: textReference,
|
|
16346
16495
|
sx: {
|
|
@@ -16357,9 +16506,9 @@ var EventMessage = ({ event }) => {
|
|
|
16357
16506
|
}
|
|
16358
16507
|
)
|
|
16359
16508
|
] }),
|
|
16360
|
-
isOpen && /* @__PURE__ */ (0,
|
|
16361
|
-
Boolean(parsedMessage.message) && /* @__PURE__ */ (0,
|
|
16362
|
-
Boolean(parsedMessage.details) && /* @__PURE__ */ (0,
|
|
16509
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
|
|
16510
|
+
Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
|
|
16511
|
+
Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DetailRow2, { content: parsedMessage.details, label: "Details:" })
|
|
16363
16512
|
] }) })
|
|
16364
16513
|
] });
|
|
16365
16514
|
};
|
|
@@ -16388,17 +16537,17 @@ var EventDetail = ({
|
|
|
16388
16537
|
type
|
|
16389
16538
|
}) => {
|
|
16390
16539
|
if (type === "permission") {
|
|
16391
|
-
return /* @__PURE__ */ (0,
|
|
16392
|
-
/* @__PURE__ */ (0,
|
|
16393
|
-
|
|
16540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { children: [
|
|
16541
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16542
|
+
import_material12.Box,
|
|
16394
16543
|
{
|
|
16395
16544
|
sx: {
|
|
16396
16545
|
alignItems: "left",
|
|
16397
16546
|
display: "flex",
|
|
16398
16547
|
mb: 1
|
|
16399
16548
|
},
|
|
16400
|
-
children: /* @__PURE__ */ (0,
|
|
16401
|
-
|
|
16549
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16550
|
+
import_material12.Typography,
|
|
16402
16551
|
{
|
|
16403
16552
|
sx: {
|
|
16404
16553
|
alignItems: "left",
|
|
@@ -16412,13 +16561,13 @@ var EventDetail = ({
|
|
|
16412
16561
|
)
|
|
16413
16562
|
}
|
|
16414
16563
|
),
|
|
16415
|
-
/* @__PURE__ */ (0,
|
|
16564
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMPermissionDetail, { events })
|
|
16416
16565
|
] });
|
|
16417
16566
|
}
|
|
16418
16567
|
const eventLevel = getEventLevelFromGroup(type);
|
|
16419
|
-
return /* @__PURE__ */ (0,
|
|
16420
|
-
/* @__PURE__ */ (0,
|
|
16421
|
-
|
|
16568
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { children: [
|
|
16569
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
|
|
16570
|
+
import_material12.Box,
|
|
16422
16571
|
{
|
|
16423
16572
|
sx: {
|
|
16424
16573
|
alignItems: "left",
|
|
@@ -16427,9 +16576,9 @@ var EventDetail = ({
|
|
|
16427
16576
|
mb: 1
|
|
16428
16577
|
},
|
|
16429
16578
|
children: [
|
|
16430
|
-
/* @__PURE__ */ (0,
|
|
16431
|
-
/* @__PURE__ */ (0,
|
|
16432
|
-
|
|
16579
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(StatusIcon, { errorLevel: eventLevel }),
|
|
16580
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16581
|
+
import_material12.Typography,
|
|
16433
16582
|
{
|
|
16434
16583
|
sx: {
|
|
16435
16584
|
alignItems: "left",
|
|
@@ -16447,14 +16596,14 @@ var EventDetail = ({
|
|
|
16447
16596
|
]
|
|
16448
16597
|
}
|
|
16449
16598
|
),
|
|
16450
|
-
/* @__PURE__ */ (0,
|
|
16451
|
-
|
|
16599
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16600
|
+
import_material12.Box,
|
|
16452
16601
|
{
|
|
16453
16602
|
sx: {
|
|
16454
16603
|
maxWidth: "100%",
|
|
16455
16604
|
mb: 1
|
|
16456
16605
|
},
|
|
16457
|
-
children: /* @__PURE__ */ (0,
|
|
16606
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(EventMessage, { event })
|
|
16458
16607
|
},
|
|
16459
16608
|
`${event.span_id}-${event.event_id}`
|
|
16460
16609
|
)) })
|
|
@@ -26148,9 +26297,9 @@ var QueryStatus = {
|
|
|
26148
26297
|
};
|
|
26149
26298
|
|
|
26150
26299
|
// src/components/event-details/lambda-invoke-logs-section.tsx
|
|
26151
|
-
var
|
|
26152
|
-
var
|
|
26153
|
-
var
|
|
26300
|
+
var import_material13 = require("@mui/material");
|
|
26301
|
+
var import_react53 = require("react");
|
|
26302
|
+
var import_jsx_runtime135 = require("react/jsx-runtime");
|
|
26154
26303
|
var POLL_INTERVAL_MS = 1e3;
|
|
26155
26304
|
async function pollQueryResults(client, queryId) {
|
|
26156
26305
|
return client.send(new GetQueryResultsCommand({ queryId }));
|
|
@@ -26167,7 +26316,7 @@ async function startLambdaLogsQuery(client, functionName2, requestId, startTimeS
|
|
|
26167
26316
|
}
|
|
26168
26317
|
function useCloudWatchLogsClient(region) {
|
|
26169
26318
|
const { localstackEndpoint } = useAppInspector();
|
|
26170
|
-
const client = (0,
|
|
26319
|
+
const client = (0, import_react53.useMemo)(() => new CloudWatchLogsClient({
|
|
26171
26320
|
credentials: {
|
|
26172
26321
|
accessKeyId: "test",
|
|
26173
26322
|
secretAccessKey: "test"
|
|
@@ -26178,12 +26327,12 @@ function useCloudWatchLogsClient(region) {
|
|
|
26178
26327
|
return client;
|
|
26179
26328
|
}
|
|
26180
26329
|
function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
|
|
26181
|
-
const [loading, setLoading] = (0,
|
|
26182
|
-
const [logs, setLogs] = (0,
|
|
26183
|
-
const [error, setError] = (0,
|
|
26184
|
-
const pollTimerRef = (0,
|
|
26330
|
+
const [loading, setLoading] = (0, import_react53.useState)(true);
|
|
26331
|
+
const [logs, setLogs] = (0, import_react53.useState)([]);
|
|
26332
|
+
const [error, setError] = (0, import_react53.useState)();
|
|
26333
|
+
const pollTimerRef = (0, import_react53.useRef)(null);
|
|
26185
26334
|
const cloudWatchLogs = useCloudWatchLogsClient(region);
|
|
26186
|
-
(0,
|
|
26335
|
+
(0, import_react53.useEffect)(() => {
|
|
26187
26336
|
let cancelled = false;
|
|
26188
26337
|
const startTimeSec = Math.floor(Number(BigInt(startTimeNano) / BigInt(1e9)));
|
|
26189
26338
|
const endTimeSec = Math.ceil(Number(BigInt(endTimeNano) / BigInt(1e9)));
|
|
@@ -26240,30 +26389,30 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
|
|
|
26240
26389
|
var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, region, requestId, startTimeNano }) => {
|
|
26241
26390
|
const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
|
|
26242
26391
|
if (loading) {
|
|
26243
|
-
return /* @__PURE__ */ (0,
|
|
26244
|
-
/* @__PURE__ */ (0,
|
|
26245
|
-
/* @__PURE__ */ (0,
|
|
26392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
|
|
26393
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.CircularProgress, { size: 14 }),
|
|
26394
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Typography, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
|
|
26246
26395
|
] });
|
|
26247
26396
|
}
|
|
26248
26397
|
if (error !== void 0) {
|
|
26249
|
-
return /* @__PURE__ */ (0,
|
|
26398
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Typography, { color: "error", variant: "body2", children: error.message });
|
|
26250
26399
|
}
|
|
26251
26400
|
if (logs.length === 0) {
|
|
26252
|
-
return /* @__PURE__ */ (0,
|
|
26401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Typography, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
|
|
26253
26402
|
}
|
|
26254
|
-
return /* @__PURE__ */ (0,
|
|
26403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Typography, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
|
|
26255
26404
|
};
|
|
26256
26405
|
|
|
26257
26406
|
// src/components/event-details/toggle-section.tsx
|
|
26258
|
-
var
|
|
26259
|
-
var
|
|
26260
|
-
var
|
|
26261
|
-
var
|
|
26407
|
+
var import_icons_material8 = require("@mui/icons-material");
|
|
26408
|
+
var import_material14 = require("@mui/material");
|
|
26409
|
+
var import_react54 = require("react");
|
|
26410
|
+
var import_jsx_runtime136 = require("react/jsx-runtime");
|
|
26262
26411
|
var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
|
|
26263
|
-
const [isOpen, setIsOpen] = (0,
|
|
26264
|
-
return /* @__PURE__ */ (0,
|
|
26265
|
-
/* @__PURE__ */ (0,
|
|
26266
|
-
|
|
26412
|
+
const [isOpen, setIsOpen] = (0, import_react54.useState)(initialOpen);
|
|
26413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material14.Box, { sx: { mt: 4 }, children: [
|
|
26414
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
|
|
26415
|
+
import_material14.Box,
|
|
26267
26416
|
{
|
|
26268
26417
|
onClick: () => {
|
|
26269
26418
|
setIsOpen(!isOpen);
|
|
@@ -26276,8 +26425,8 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
|
|
|
26276
26425
|
mb: 1
|
|
26277
26426
|
},
|
|
26278
26427
|
children: [
|
|
26279
|
-
/* @__PURE__ */ (0,
|
|
26280
|
-
|
|
26428
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
|
|
26429
|
+
import_material14.Box,
|
|
26281
26430
|
{
|
|
26282
26431
|
role: "button",
|
|
26283
26432
|
sx: {
|
|
@@ -26286,23 +26435,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
|
|
|
26286
26435
|
gap: 1
|
|
26287
26436
|
},
|
|
26288
26437
|
children: [
|
|
26289
|
-
/* @__PURE__ */ (0,
|
|
26290
|
-
isOpen ? /* @__PURE__ */ (0,
|
|
26438
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
|
|
26439
|
+
isOpen ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
|
|
26291
26440
|
]
|
|
26292
26441
|
}
|
|
26293
26442
|
),
|
|
26294
|
-
action !== false && /* @__PURE__ */ (0,
|
|
26443
|
+
action !== false && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { onClick: (event) => {
|
|
26295
26444
|
event.stopPropagation();
|
|
26296
26445
|
}, children: action })
|
|
26297
26446
|
]
|
|
26298
26447
|
}
|
|
26299
26448
|
),
|
|
26300
|
-
isOpen && /* @__PURE__ */ (0,
|
|
26449
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { children })
|
|
26301
26450
|
] });
|
|
26302
26451
|
};
|
|
26303
26452
|
|
|
26304
26453
|
// src/components/event-details/event-details.tsx
|
|
26305
|
-
var
|
|
26454
|
+
var import_jsx_runtime137 = require("react/jsx-runtime");
|
|
26306
26455
|
function tryParseJson(value) {
|
|
26307
26456
|
if (typeof value !== "string") {
|
|
26308
26457
|
return value;
|
|
@@ -26327,13 +26476,13 @@ var checkIsSqsSendMessage = (span) => {
|
|
|
26327
26476
|
return span.operation_name.startsWith("SendMessage");
|
|
26328
26477
|
};
|
|
26329
26478
|
var EventDetails = ({ onClose, selectedEvent }) => {
|
|
26330
|
-
const eventGroups = (0,
|
|
26479
|
+
const eventGroups = (0, import_react55.useMemo)(
|
|
26331
26480
|
() => getEventGroupsByType(selectedEvent?.events ?? []),
|
|
26332
26481
|
[selectedEvent?.events]
|
|
26333
26482
|
);
|
|
26334
|
-
const [parseNestedJson, setParseNestedJson] = (0,
|
|
26483
|
+
const [parseNestedJson, setParseNestedJson] = (0, import_react55.useState)(true);
|
|
26335
26484
|
if (!selectedEvent) {
|
|
26336
|
-
return /* @__PURE__ */ (0,
|
|
26485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
|
|
26337
26486
|
}
|
|
26338
26487
|
const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
|
|
26339
26488
|
const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
|
|
@@ -26354,9 +26503,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
26354
26503
|
const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
|
|
26355
26504
|
const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0;
|
|
26356
26505
|
const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
|
|
26357
|
-
return /* @__PURE__ */ (0,
|
|
26358
|
-
/* @__PURE__ */ (0,
|
|
26359
|
-
|
|
26506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
|
|
26507
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
|
|
26508
|
+
import_material15.Box,
|
|
26360
26509
|
{
|
|
26361
26510
|
sx: {
|
|
26362
26511
|
alignItems: "center",
|
|
@@ -26368,58 +26517,58 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
26368
26517
|
py: 1
|
|
26369
26518
|
},
|
|
26370
26519
|
children: [
|
|
26371
|
-
/* @__PURE__ */ (0,
|
|
26372
|
-
onClose && /* @__PURE__ */ (0,
|
|
26520
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
|
|
26521
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Close, {}) })
|
|
26373
26522
|
]
|
|
26374
26523
|
}
|
|
26375
26524
|
),
|
|
26376
|
-
/* @__PURE__ */ (0,
|
|
26377
|
-
/* @__PURE__ */ (0,
|
|
26378
|
-
/* @__PURE__ */ (0,
|
|
26379
|
-
/* @__PURE__ */ (0,
|
|
26380
|
-
/* @__PURE__ */ (0,
|
|
26381
|
-
/* @__PURE__ */ (0,
|
|
26525
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 2, children: [
|
|
26526
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 1, children: [
|
|
26527
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
|
|
26528
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26529
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
|
|
26530
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.service_name })
|
|
26382
26531
|
] }),
|
|
26383
|
-
/* @__PURE__ */ (0,
|
|
26384
|
-
/* @__PURE__ */ (0,
|
|
26385
|
-
/* @__PURE__ */ (0,
|
|
26532
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26533
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
|
|
26534
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.operation_name })
|
|
26386
26535
|
] })
|
|
26387
26536
|
] }),
|
|
26388
|
-
/* @__PURE__ */ (0,
|
|
26389
|
-
/* @__PURE__ */ (0,
|
|
26390
|
-
/* @__PURE__ */ (0,
|
|
26537
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26538
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
|
|
26539
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.resource_name })
|
|
26391
26540
|
] }),
|
|
26392
|
-
Boolean(resourceArn) && /* @__PURE__ */ (0,
|
|
26393
|
-
/* @__PURE__ */ (0,
|
|
26394
|
-
/* @__PURE__ */ (0,
|
|
26541
|
+
Boolean(resourceArn) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26542
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
|
|
26543
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: resourceArn })
|
|
26395
26544
|
] }),
|
|
26396
|
-
/* @__PURE__ */ (0,
|
|
26397
|
-
/* @__PURE__ */ (0,
|
|
26398
|
-
/* @__PURE__ */ (0,
|
|
26399
|
-
/* @__PURE__ */ (0,
|
|
26545
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
|
|
26546
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26547
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
|
|
26548
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.account_id })
|
|
26400
26549
|
] }),
|
|
26401
|
-
/* @__PURE__ */ (0,
|
|
26402
|
-
/* @__PURE__ */ (0,
|
|
26403
|
-
/* @__PURE__ */ (0,
|
|
26550
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26551
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
|
|
26552
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.region })
|
|
26404
26553
|
] })
|
|
26405
26554
|
] }),
|
|
26406
|
-
/* @__PURE__ */ (0,
|
|
26407
|
-
/* @__PURE__ */ (0,
|
|
26408
|
-
/* @__PURE__ */ (0,
|
|
26409
|
-
/* @__PURE__ */ (0,
|
|
26555
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
|
|
26556
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26557
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
|
|
26558
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
|
|
26410
26559
|
] }),
|
|
26411
|
-
duration !== void 0 && /* @__PURE__ */ (0,
|
|
26412
|
-
/* @__PURE__ */ (0,
|
|
26413
|
-
/* @__PURE__ */ (0,
|
|
26560
|
+
duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26561
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
|
|
26562
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Typography, { variant: "body2", children: [
|
|
26414
26563
|
duration,
|
|
26415
26564
|
"ms"
|
|
26416
26565
|
] })
|
|
26417
26566
|
] })
|
|
26418
26567
|
] }),
|
|
26419
|
-
/* @__PURE__ */ (0,
|
|
26420
|
-
/* @__PURE__ */ (0,
|
|
26421
|
-
/* @__PURE__ */ (0,
|
|
26422
|
-
|
|
26568
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26569
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
|
|
26570
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Stack, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
26571
|
+
import_material15.Chip,
|
|
26423
26572
|
{
|
|
26424
26573
|
color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
|
|
26425
26574
|
label: selectedEvent.status_code === 2 ? "Error" : selectedEvent.status_code === 1 ? "OK" : "Unset",
|
|
@@ -26428,49 +26577,49 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
26428
26577
|
) })
|
|
26429
26578
|
] })
|
|
26430
26579
|
] }) }),
|
|
26431
|
-
/* @__PURE__ */ (0,
|
|
26432
|
-
/* @__PURE__ */ (0,
|
|
26433
|
-
!eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ (0,
|
|
26434
|
-
eventGroups.permissions && /* @__PURE__ */ (0,
|
|
26435
|
-
eventGroups.errors && /* @__PURE__ */ (0,
|
|
26436
|
-
eventGroups.warnings && /* @__PURE__ */ (0,
|
|
26580
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Divider, {}),
|
|
26581
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(ToggleSection, { headline: "Permissions", children: [
|
|
26582
|
+
!eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { color: "text.secondary", variant: "body2", children: "There is no permission information available. Are IAM Policy Streams enabled?" }),
|
|
26583
|
+
eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
|
|
26584
|
+
eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
|
|
26585
|
+
eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
|
|
26437
26586
|
] }),
|
|
26438
|
-
hasPayloads && /* @__PURE__ */ (0,
|
|
26439
|
-
/* @__PURE__ */ (0,
|
|
26440
|
-
/* @__PURE__ */ (0,
|
|
26587
|
+
hasPayloads && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
|
|
26588
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Divider, {}),
|
|
26589
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
26441
26590
|
ToggleSection,
|
|
26442
26591
|
{
|
|
26443
|
-
action: /* @__PURE__ */ (0,
|
|
26444
|
-
|
|
26592
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
26593
|
+
import_material15.FormControlLabel,
|
|
26445
26594
|
{
|
|
26446
|
-
control: /* @__PURE__ */ (0,
|
|
26595
|
+
control: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Switch, { checked: !parseNestedJson, onChange: (event) => {
|
|
26447
26596
|
setParseNestedJson(!event.target.checked);
|
|
26448
26597
|
}, size: "small" }),
|
|
26449
|
-
label: /* @__PURE__ */ (0,
|
|
26598
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "caption", children: "View raw data" }),
|
|
26450
26599
|
sx: { mr: 0 }
|
|
26451
26600
|
}
|
|
26452
26601
|
),
|
|
26453
26602
|
headline: "Payloads",
|
|
26454
|
-
children: /* @__PURE__ */ (0,
|
|
26455
|
-
requestPayload !== void 0 && /* @__PURE__ */ (0,
|
|
26456
|
-
/* @__PURE__ */ (0,
|
|
26457
|
-
/* @__PURE__ */ (0,
|
|
26603
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 2, children: [
|
|
26604
|
+
requestPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26605
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
|
|
26606
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { value: requestPayload })
|
|
26458
26607
|
] }),
|
|
26459
|
-
responsePayload !== void 0 && /* @__PURE__ */ (0,
|
|
26460
|
-
/* @__PURE__ */ (0,
|
|
26461
|
-
/* @__PURE__ */ (0,
|
|
26608
|
+
responsePayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26609
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
|
|
26610
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { value: responsePayload })
|
|
26462
26611
|
] }),
|
|
26463
|
-
exceptionPayload !== void 0 && /* @__PURE__ */ (0,
|
|
26464
|
-
/* @__PURE__ */ (0,
|
|
26465
|
-
/* @__PURE__ */ (0,
|
|
26612
|
+
exceptionPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26613
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
|
|
26614
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { value: exceptionPayload })
|
|
26466
26615
|
] })
|
|
26467
26616
|
] })
|
|
26468
26617
|
}
|
|
26469
26618
|
)
|
|
26470
26619
|
] }),
|
|
26471
|
-
isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ (0,
|
|
26472
|
-
/* @__PURE__ */ (0,
|
|
26473
|
-
/* @__PURE__ */ (0,
|
|
26620
|
+
isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
|
|
26621
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Divider, {}),
|
|
26622
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
26474
26623
|
LambdaInvokeLogsSection,
|
|
26475
26624
|
{
|
|
26476
26625
|
endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
|
|
@@ -26481,28 +26630,28 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
26481
26630
|
}
|
|
26482
26631
|
) })
|
|
26483
26632
|
] }),
|
|
26484
|
-
/* @__PURE__ */ (0,
|
|
26485
|
-
/* @__PURE__ */ (0,
|
|
26486
|
-
/* @__PURE__ */ (0,
|
|
26487
|
-
/* @__PURE__ */ (0,
|
|
26488
|
-
/* @__PURE__ */ (0,
|
|
26633
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Divider, {}),
|
|
26634
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Stack, { spacing: 1, children: [
|
|
26635
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26636
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
|
|
26637
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.span_id })
|
|
26489
26638
|
] }),
|
|
26490
|
-
/* @__PURE__ */ (0,
|
|
26491
|
-
/* @__PURE__ */ (0,
|
|
26492
|
-
/* @__PURE__ */ (0,
|
|
26639
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26640
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
|
|
26641
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.trace_id })
|
|
26493
26642
|
] }),
|
|
26494
|
-
requestId !== void 0 && /* @__PURE__ */ (0,
|
|
26495
|
-
/* @__PURE__ */ (0,
|
|
26496
|
-
/* @__PURE__ */ (0,
|
|
26643
|
+
requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
|
|
26644
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
|
|
26645
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Typography, { variant: "body2", children: requestId })
|
|
26497
26646
|
] }),
|
|
26498
|
-
eventGroups.info && /* @__PURE__ */ (0,
|
|
26647
|
+
eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
|
|
26499
26648
|
] }) })
|
|
26500
26649
|
] }) })
|
|
26501
26650
|
] });
|
|
26502
26651
|
};
|
|
26503
|
-
var PayloadViewer = (0,
|
|
26504
|
-
const theme = (0,
|
|
26505
|
-
return /* @__PURE__ */ (0,
|
|
26652
|
+
var PayloadViewer = (0, import_react55.memo)(({ value }) => {
|
|
26653
|
+
const theme = (0, import_material15.useTheme)();
|
|
26654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material15.Box, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
26506
26655
|
JsonViewer,
|
|
26507
26656
|
{
|
|
26508
26657
|
displayDataTypes: false,
|
|
@@ -26517,36 +26666,36 @@ var PayloadViewer = (0, import_react54.memo)(({ value }) => {
|
|
|
26517
26666
|
|
|
26518
26667
|
// src/components/trace-graph/trace-graph.tsx
|
|
26519
26668
|
var import_base = require("@xyflow/react/dist/base.css");
|
|
26520
|
-
var
|
|
26521
|
-
var
|
|
26522
|
-
var
|
|
26669
|
+
var import_material19 = require("@mui/material");
|
|
26670
|
+
var import_react61 = require("@xyflow/react");
|
|
26671
|
+
var import_react62 = require("react");
|
|
26523
26672
|
|
|
26524
26673
|
// src/components/trace-graph/service-node.tsx
|
|
26525
|
-
var
|
|
26674
|
+
var import_material17 = require("@mui/material");
|
|
26526
26675
|
var import_style = require("@xyflow/react/dist/style.css");
|
|
26527
|
-
var
|
|
26528
|
-
var
|
|
26676
|
+
var import_react57 = require("@xyflow/react");
|
|
26677
|
+
var import_react58 = require("react");
|
|
26529
26678
|
|
|
26530
26679
|
// src/components/trace-graph/problem-indicator.tsx
|
|
26531
|
-
var
|
|
26532
|
-
var
|
|
26533
|
-
var
|
|
26534
|
-
var
|
|
26680
|
+
var import_icons_material10 = require("@mui/icons-material");
|
|
26681
|
+
var import_material16 = require("@mui/material");
|
|
26682
|
+
var import_react56 = require("react");
|
|
26683
|
+
var import_jsx_runtime138 = require("react/jsx-runtime");
|
|
26535
26684
|
var ProblemIndicator = ({ error }) => {
|
|
26536
|
-
const icon = (0,
|
|
26685
|
+
const icon = (0, import_react56.useMemo)(() => {
|
|
26537
26686
|
switch (error.level) {
|
|
26538
26687
|
case "error": {
|
|
26539
|
-
return /* @__PURE__ */ (0,
|
|
26688
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material10.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
|
|
26540
26689
|
}
|
|
26541
26690
|
case "warning": {
|
|
26542
|
-
return /* @__PURE__ */ (0,
|
|
26691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material10.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
|
|
26543
26692
|
}
|
|
26544
26693
|
default: {
|
|
26545
|
-
return /* @__PURE__ */ (0,
|
|
26694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material10.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
|
|
26546
26695
|
}
|
|
26547
26696
|
}
|
|
26548
26697
|
}, [error.level]);
|
|
26549
|
-
const color2 = (0,
|
|
26698
|
+
const color2 = (0, import_react56.useMemo)(() => {
|
|
26550
26699
|
switch (error.level) {
|
|
26551
26700
|
case "error": {
|
|
26552
26701
|
return "#d32f2f";
|
|
@@ -26559,8 +26708,8 @@ var ProblemIndicator = ({ error }) => {
|
|
|
26559
26708
|
}
|
|
26560
26709
|
}
|
|
26561
26710
|
}, [error.level]);
|
|
26562
|
-
return /* @__PURE__ */ (0,
|
|
26563
|
-
|
|
26711
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
26712
|
+
import_material16.Box,
|
|
26564
26713
|
{
|
|
26565
26714
|
sx: {
|
|
26566
26715
|
alignItems: "center",
|
|
@@ -26579,17 +26728,17 @@ var ProblemIndicator = ({ error }) => {
|
|
|
26579
26728
|
};
|
|
26580
26729
|
|
|
26581
26730
|
// src/components/trace-graph/service-node.tsx
|
|
26582
|
-
var
|
|
26731
|
+
var import_jsx_runtime139 = require("react/jsx-runtime");
|
|
26583
26732
|
var handleStyle = {
|
|
26584
26733
|
backgroundColor: "white",
|
|
26585
26734
|
borderColor: "lightgray",
|
|
26586
26735
|
opacity: 0
|
|
26587
26736
|
};
|
|
26588
|
-
var ServiceNode = (0,
|
|
26737
|
+
var ServiceNode = (0, import_react58.memo)(({ data, selected }) => {
|
|
26589
26738
|
const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
|
|
26590
|
-
return /* @__PURE__ */ (0,
|
|
26591
|
-
/* @__PURE__ */ (0,
|
|
26592
|
-
|
|
26739
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_material17.Box, { sx: { maxWidth: 200 }, children: [
|
|
26740
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
26741
|
+
import_material17.Box,
|
|
26593
26742
|
{
|
|
26594
26743
|
role: "button",
|
|
26595
26744
|
sx: {
|
|
@@ -26609,9 +26758,9 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
26609
26758
|
},
|
|
26610
26759
|
tabIndex: 0,
|
|
26611
26760
|
children: [
|
|
26612
|
-
/* @__PURE__ */ (0,
|
|
26613
|
-
/* @__PURE__ */ (0,
|
|
26614
|
-
/* @__PURE__ */ (0,
|
|
26761
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react57.Handle, { position: import_react57.Position.Left, style: handleStyle, type: "target" }),
|
|
26762
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react57.Handle, { position: import_react57.Position.Right, style: handleStyle, type: "source" }),
|
|
26763
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
|
|
26615
26764
|
ServiceCell,
|
|
26616
26765
|
{
|
|
26617
26766
|
height: "32px",
|
|
@@ -26624,8 +26773,8 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
26624
26773
|
]
|
|
26625
26774
|
}
|
|
26626
26775
|
),
|
|
26627
|
-
/* @__PURE__ */ (0,
|
|
26628
|
-
|
|
26776
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
26777
|
+
import_material17.Stack,
|
|
26629
26778
|
{
|
|
26630
26779
|
alignItems: "center",
|
|
26631
26780
|
direction: "row",
|
|
@@ -26635,8 +26784,8 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
26635
26784
|
mt: 0.5
|
|
26636
26785
|
},
|
|
26637
26786
|
children: [
|
|
26638
|
-
hasErrors && /* @__PURE__ */ (0,
|
|
26639
|
-
|
|
26787
|
+
hasErrors && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
|
|
26788
|
+
import_material17.Stack,
|
|
26640
26789
|
{
|
|
26641
26790
|
direction: "row",
|
|
26642
26791
|
spacing: 0.5,
|
|
@@ -26644,11 +26793,11 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
|
|
|
26644
26793
|
flexWrap: "wrap",
|
|
26645
26794
|
gap: "2px"
|
|
26646
26795
|
},
|
|
26647
|
-
children: data.event.errors?.map((error) => /* @__PURE__ */ (0,
|
|
26796
|
+
children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(ProblemIndicator, { error }, error.span_id))
|
|
26648
26797
|
}
|
|
26649
26798
|
),
|
|
26650
|
-
/* @__PURE__ */ (0,
|
|
26651
|
-
|
|
26799
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
|
|
26800
|
+
import_material17.Typography,
|
|
26652
26801
|
{
|
|
26653
26802
|
sx: {
|
|
26654
26803
|
fontSize: "0.9rem",
|
|
@@ -26698,20 +26847,20 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
|
|
|
26698
26847
|
};
|
|
26699
26848
|
|
|
26700
26849
|
// src/components/trace-graph/xyflow/controls.tsx
|
|
26701
|
-
var
|
|
26702
|
-
var
|
|
26703
|
-
var
|
|
26704
|
-
var
|
|
26850
|
+
var import_icons_material11 = require("@mui/icons-material");
|
|
26851
|
+
var import_material18 = require("@mui/material");
|
|
26852
|
+
var import_react59 = require("@xyflow/react");
|
|
26853
|
+
var import_react60 = require("react");
|
|
26705
26854
|
var import_shallow = require("zustand/shallow");
|
|
26706
|
-
var
|
|
26855
|
+
var import_jsx_runtime140 = require("react/jsx-runtime");
|
|
26707
26856
|
var selector = (s2) => ({
|
|
26708
26857
|
isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
|
|
26709
26858
|
maxZoomReached: s2.transform[2] >= s2.maxZoom,
|
|
26710
26859
|
minZoomReached: s2.transform[2] <= s2.minZoom
|
|
26711
26860
|
});
|
|
26712
|
-
var Controls = (0,
|
|
26713
|
-
const { maxZoomReached, minZoomReached } = (0,
|
|
26714
|
-
const { fitView, zoomIn, zoomOut } = (0,
|
|
26861
|
+
var Controls = (0, import_react60.memo)(() => {
|
|
26862
|
+
const { maxZoomReached, minZoomReached } = (0, import_react59.useStore)(selector, import_shallow.shallow);
|
|
26863
|
+
const { fitView, zoomIn, zoomOut } = (0, import_react59.useReactFlow)();
|
|
26715
26864
|
const onZoomInHandler = () => {
|
|
26716
26865
|
void zoomIn();
|
|
26717
26866
|
};
|
|
@@ -26721,8 +26870,8 @@ var Controls = (0, import_react59.memo)(() => {
|
|
|
26721
26870
|
const onFitViewHandler = () => {
|
|
26722
26871
|
void fitView();
|
|
26723
26872
|
};
|
|
26724
|
-
return /* @__PURE__ */ (0,
|
|
26725
|
-
|
|
26873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
|
|
26874
|
+
import_material18.Box,
|
|
26726
26875
|
{
|
|
26727
26876
|
sx: {
|
|
26728
26877
|
bottom: 0,
|
|
@@ -26735,33 +26884,33 @@ var Controls = (0, import_react59.memo)(() => {
|
|
|
26735
26884
|
zIndex: 5
|
|
26736
26885
|
},
|
|
26737
26886
|
children: [
|
|
26738
|
-
/* @__PURE__ */ (0,
|
|
26739
|
-
|
|
26887
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
26888
|
+
import_material18.IconButton,
|
|
26740
26889
|
{
|
|
26741
26890
|
className: "react-flow__controls-zoomin",
|
|
26742
26891
|
disabled: maxZoomReached,
|
|
26743
26892
|
onClick: onZoomInHandler,
|
|
26744
26893
|
size: "small",
|
|
26745
|
-
children: /* @__PURE__ */ (0,
|
|
26894
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material11.Add, {})
|
|
26746
26895
|
}
|
|
26747
26896
|
),
|
|
26748
|
-
/* @__PURE__ */ (0,
|
|
26749
|
-
|
|
26897
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
26898
|
+
import_material18.IconButton,
|
|
26750
26899
|
{
|
|
26751
26900
|
className: "react-flow__controls-zoomout",
|
|
26752
26901
|
disabled: minZoomReached,
|
|
26753
26902
|
onClick: onZoomOutHandler,
|
|
26754
26903
|
size: "small",
|
|
26755
|
-
children: /* @__PURE__ */ (0,
|
|
26904
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material11.Remove, {})
|
|
26756
26905
|
}
|
|
26757
26906
|
),
|
|
26758
|
-
/* @__PURE__ */ (0,
|
|
26759
|
-
|
|
26907
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
26908
|
+
import_material18.IconButton,
|
|
26760
26909
|
{
|
|
26761
26910
|
className: "react-flow__controls-fitview",
|
|
26762
26911
|
onClick: onFitViewHandler,
|
|
26763
26912
|
size: "small",
|
|
26764
|
-
children: /* @__PURE__ */ (0,
|
|
26913
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material11.FitScreen, {})
|
|
26765
26914
|
}
|
|
26766
26915
|
)
|
|
26767
26916
|
]
|
|
@@ -26770,7 +26919,7 @@ var Controls = (0, import_react59.memo)(() => {
|
|
|
26770
26919
|
});
|
|
26771
26920
|
|
|
26772
26921
|
// src/components/trace-graph/trace-graph.tsx
|
|
26773
|
-
var
|
|
26922
|
+
var import_jsx_runtime141 = require("react/jsx-runtime");
|
|
26774
26923
|
var nodeTypes = {
|
|
26775
26924
|
service: ServiceNode
|
|
26776
26925
|
};
|
|
@@ -26780,9 +26929,9 @@ var TraceGraph = ({
|
|
|
26780
26929
|
onRefresh,
|
|
26781
26930
|
spans
|
|
26782
26931
|
}) => {
|
|
26783
|
-
const [nodes, setNodes, onNodesChange] = (0,
|
|
26784
|
-
const [edges, setEdges] = (0,
|
|
26785
|
-
(0,
|
|
26932
|
+
const [nodes, setNodes, onNodesChange] = (0, import_react61.useNodesState)([]);
|
|
26933
|
+
const [edges, setEdges] = (0, import_react61.useEdgesState)([]);
|
|
26934
|
+
(0, import_react62.useEffect)(() => {
|
|
26786
26935
|
const allNodes = [];
|
|
26787
26936
|
const allEdges = [];
|
|
26788
26937
|
for (const span of spans.data ?? []) {
|
|
@@ -26797,15 +26946,15 @@ var TraceGraph = ({
|
|
|
26797
26946
|
},
|
|
26798
26947
|
id: span.span_id,
|
|
26799
26948
|
position: { x: 0, y: 0 },
|
|
26800
|
-
sourcePosition:
|
|
26801
|
-
targetPosition:
|
|
26949
|
+
sourcePosition: import_react61.Position.Right,
|
|
26950
|
+
targetPosition: import_react61.Position.Left,
|
|
26802
26951
|
type: "service"
|
|
26803
26952
|
});
|
|
26804
26953
|
if (span.parent_span_id !== null) {
|
|
26805
26954
|
allEdges.push({
|
|
26806
26955
|
animated: false,
|
|
26807
26956
|
id: `e-${span.parent_span_id}-${span.span_id}`,
|
|
26808
|
-
markerEnd: { color: "lightgray", height: 16, type:
|
|
26957
|
+
markerEnd: { color: "lightgray", height: 16, type: import_react61.MarkerType.Arrow, width: 16 },
|
|
26809
26958
|
source: span.parent_span_id,
|
|
26810
26959
|
style: { stroke: "lightgray", strokeWidth: 1 },
|
|
26811
26960
|
target: span.span_id
|
|
@@ -26814,7 +26963,7 @@ var TraceGraph = ({
|
|
|
26814
26963
|
for (const linkedSpanId of span.linked_span_ids ?? []) {
|
|
26815
26964
|
allEdges.push({
|
|
26816
26965
|
id: `e-link-${linkedSpanId}-${span.span_id}`,
|
|
26817
|
-
markerEnd: { color: "lightgray", height: 16, type:
|
|
26966
|
+
markerEnd: { color: "lightgray", height: 16, type: import_react61.MarkerType.Arrow, width: 16 },
|
|
26818
26967
|
source: linkedSpanId,
|
|
26819
26968
|
style: { stroke: "lightgray", strokeWidth: 1 },
|
|
26820
26969
|
// animated: true,
|
|
@@ -26832,12 +26981,12 @@ var TraceGraph = ({
|
|
|
26832
26981
|
setNodes(layoutedNodes);
|
|
26833
26982
|
setEdges(layoutedEdges);
|
|
26834
26983
|
}, [spans.data, initialFocusEventId, setNodes, setEdges]);
|
|
26835
|
-
const theme = (0,
|
|
26836
|
-
return /* @__PURE__ */ (0,
|
|
26837
|
-
spans.error && /* @__PURE__ */ (0,
|
|
26838
|
-
|
|
26984
|
+
const theme = (0, import_material19.useTheme)();
|
|
26985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
|
|
26986
|
+
spans.error && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
26987
|
+
import_material19.Alert,
|
|
26839
26988
|
{
|
|
26840
|
-
action: /* @__PURE__ */ (0,
|
|
26989
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material19.Button, { onClick: () => {
|
|
26841
26990
|
onRefresh();
|
|
26842
26991
|
}, children: "Retry" }),
|
|
26843
26992
|
severity: "error",
|
|
@@ -26848,8 +26997,8 @@ var TraceGraph = ({
|
|
|
26848
26997
|
]
|
|
26849
26998
|
}
|
|
26850
26999
|
),
|
|
26851
|
-
/* @__PURE__ */ (0,
|
|
26852
|
-
|
|
27000
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
27001
|
+
import_react61.ReactFlow,
|
|
26853
27002
|
{
|
|
26854
27003
|
"data-testid": "trace-graph",
|
|
26855
27004
|
edges,
|
|
@@ -26866,9 +27015,9 @@ var TraceGraph = ({
|
|
|
26866
27015
|
onNodesChange,
|
|
26867
27016
|
selectNodesOnDrag: false,
|
|
26868
27017
|
children: [
|
|
26869
|
-
/* @__PURE__ */ (0,
|
|
26870
|
-
/* @__PURE__ */ (0,
|
|
26871
|
-
|
|
27018
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Controls, {}),
|
|
27019
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
27020
|
+
import_react61.Background,
|
|
26872
27021
|
{
|
|
26873
27022
|
bgColor: theme.palette.background.paper,
|
|
26874
27023
|
color: theme.palette.text.disabled
|
|
@@ -26881,7 +27030,7 @@ var TraceGraph = ({
|
|
|
26881
27030
|
};
|
|
26882
27031
|
|
|
26883
27032
|
// src/pages/trace-graph-page.tsx
|
|
26884
|
-
var
|
|
27033
|
+
var import_jsx_runtime142 = require("react/jsx-runtime");
|
|
26885
27034
|
var HEADER_HEIGHT = 56;
|
|
26886
27035
|
var DRAWER_WIDTH = "35%";
|
|
26887
27036
|
var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
|
|
@@ -26899,7 +27048,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
|
|
|
26899
27048
|
})
|
|
26900
27049
|
}
|
|
26901
27050
|
}));
|
|
26902
|
-
var StyledDrawer = (0, import_styles.styled)(
|
|
27051
|
+
var StyledDrawer = (0, import_styles.styled)(import_material20.Drawer)(() => ({
|
|
26903
27052
|
"& .MuiDrawer-paper": {
|
|
26904
27053
|
bottom: 0,
|
|
26905
27054
|
boxSizing: "border-box",
|
|
@@ -26929,8 +27078,8 @@ var TraceGraphView = ({
|
|
|
26929
27078
|
traceId
|
|
26930
27079
|
}) => {
|
|
26931
27080
|
const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
|
|
26932
|
-
return /* @__PURE__ */ (0,
|
|
26933
|
-
|
|
27081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
|
|
27082
|
+
import_material20.Box,
|
|
26934
27083
|
{
|
|
26935
27084
|
"data-testid": "trace-graph-page",
|
|
26936
27085
|
sx: {
|
|
@@ -26942,14 +27091,14 @@ var TraceGraphView = ({
|
|
|
26942
27091
|
overflow: "hidden"
|
|
26943
27092
|
},
|
|
26944
27093
|
children: [
|
|
26945
|
-
/* @__PURE__ */ (0,
|
|
26946
|
-
/* @__PURE__ */ (0,
|
|
27094
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material20.Box, { sx: { display: "flex", width: "100%" }, children: [
|
|
27095
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material20.Button, { onClick: () => {
|
|
26947
27096
|
navigateToSpansList();
|
|
26948
|
-
}, startIcon: /* @__PURE__ */ (0,
|
|
26949
|
-
/* @__PURE__ */ (0,
|
|
27097
|
+
}, startIcon: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material12.ArrowBack, {}), children: "Go back" }),
|
|
27098
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material20.Box, { sx: { flexGrow: 1 } })
|
|
26950
27099
|
] }),
|
|
26951
|
-
/* @__PURE__ */ (0,
|
|
26952
|
-
|
|
27100
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
27101
|
+
import_material20.Paper,
|
|
26953
27102
|
{
|
|
26954
27103
|
sx: {
|
|
26955
27104
|
display: "flex",
|
|
@@ -26958,22 +27107,22 @@ var TraceGraphView = ({
|
|
|
26958
27107
|
position: "relative",
|
|
26959
27108
|
width: "100%"
|
|
26960
27109
|
},
|
|
26961
|
-
children: shouldShowStatusMessage ? /* @__PURE__ */ (0,
|
|
27110
|
+
children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
26962
27111
|
StatusMessage,
|
|
26963
27112
|
{
|
|
26964
27113
|
error: statusError,
|
|
26965
27114
|
onRetry: handleRetry,
|
|
26966
27115
|
status
|
|
26967
27116
|
}
|
|
26968
|
-
) : /* @__PURE__ */ (0,
|
|
26969
|
-
/* @__PURE__ */ (0,
|
|
26970
|
-
|
|
27117
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
|
|
27118
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
27119
|
+
import_material20.Box,
|
|
26971
27120
|
{
|
|
26972
27121
|
sx: {
|
|
26973
27122
|
height: "100%",
|
|
26974
27123
|
overflow: "auto"
|
|
26975
27124
|
},
|
|
26976
|
-
children: traceId !== void 0 && /* @__PURE__ */ (0,
|
|
27125
|
+
children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react63.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
26977
27126
|
TraceGraph,
|
|
26978
27127
|
{
|
|
26979
27128
|
initialFocusEventId: spanId,
|
|
@@ -26990,7 +27139,7 @@ var TraceGraphView = ({
|
|
|
26990
27139
|
) })
|
|
26991
27140
|
}
|
|
26992
27141
|
) }),
|
|
26993
|
-
/* @__PURE__ */ (0,
|
|
27142
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
|
|
26994
27143
|
] })
|
|
26995
27144
|
}
|
|
26996
27145
|
)
|
|
@@ -27034,10 +27183,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
|
|
|
27034
27183
|
}
|
|
27035
27184
|
var TraceGraphPage = ({ onClose, spanId, traceId }) => {
|
|
27036
27185
|
const api = useAppInspectorApi();
|
|
27037
|
-
const [spans, setSpans] = (0,
|
|
27038
|
-
const [loading, setLoading] = (0,
|
|
27039
|
-
const [fetchError, setFetchError] = (0,
|
|
27040
|
-
const fetchSpans = (0,
|
|
27186
|
+
const [spans, setSpans] = (0, import_react64.useState)();
|
|
27187
|
+
const [loading, setLoading] = (0, import_react64.useState)(false);
|
|
27188
|
+
const [fetchError, setFetchError] = (0, import_react64.useState)();
|
|
27189
|
+
const fetchSpans = (0, import_react64.useCallback)(async () => {
|
|
27041
27190
|
setLoading(true);
|
|
27042
27191
|
try {
|
|
27043
27192
|
const spans2 = await fetchConnectedTraces(api, [traceId]);
|
|
@@ -27050,31 +27199,31 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
|
|
|
27050
27199
|
setLoading(false);
|
|
27051
27200
|
}
|
|
27052
27201
|
}, [api, traceId]);
|
|
27053
|
-
(0,
|
|
27202
|
+
(0, import_react64.useEffect)(() => {
|
|
27054
27203
|
void fetchSpans();
|
|
27055
27204
|
}, [fetchSpans]);
|
|
27056
|
-
const [open, setOpen] = (0,
|
|
27057
|
-
const [selectedEvent, setSelectedEvent] = (0,
|
|
27058
|
-
const spansReference = (0,
|
|
27059
|
-
(0,
|
|
27205
|
+
const [open, setOpen] = (0, import_react64.useState)(true);
|
|
27206
|
+
const [selectedEvent, setSelectedEvent] = (0, import_react64.useState)(() => spans?.find((span) => span.span_id === spanId));
|
|
27207
|
+
const spansReference = (0, import_react64.useRef)();
|
|
27208
|
+
(0, import_react64.useEffect)(() => {
|
|
27060
27209
|
if (!spansReference.current && spans) {
|
|
27061
27210
|
setSelectedEvent(spans.find((span) => span.span_id === spanId));
|
|
27062
27211
|
spansReference.current = spans;
|
|
27063
27212
|
}
|
|
27064
27213
|
}, [spans, setSelectedEvent, spanId]);
|
|
27065
27214
|
const { checkStatus, error: statusError, status } = useStatus();
|
|
27066
|
-
const handleEventSelect = (0,
|
|
27215
|
+
const handleEventSelect = (0, import_react64.useCallback)((spanId2) => {
|
|
27067
27216
|
const span = spans?.find((s2) => s2.span_id === spanId2);
|
|
27068
27217
|
setSelectedEvent(span);
|
|
27069
27218
|
setOpen(true);
|
|
27070
27219
|
}, [spans]);
|
|
27071
|
-
const handleRetry = (0,
|
|
27220
|
+
const handleRetry = (0, import_react64.useCallback)(() => {
|
|
27072
27221
|
void checkStatus();
|
|
27073
27222
|
}, [checkStatus]);
|
|
27074
|
-
const navigateToSpansList = (0,
|
|
27223
|
+
const navigateToSpansList = (0, import_react64.useCallback)(() => {
|
|
27075
27224
|
onClose?.();
|
|
27076
27225
|
}, [onClose]);
|
|
27077
|
-
return /* @__PURE__ */ (0,
|
|
27226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
27078
27227
|
TraceGraphView,
|
|
27079
27228
|
{
|
|
27080
27229
|
fetchError,
|
|
@@ -27098,7 +27247,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
|
|
|
27098
27247
|
};
|
|
27099
27248
|
|
|
27100
27249
|
// src/pages/spans-list-page.tsx
|
|
27101
|
-
var
|
|
27250
|
+
var import_jsx_runtime143 = require("react/jsx-runtime");
|
|
27102
27251
|
var SpansListPage = () => {
|
|
27103
27252
|
const {
|
|
27104
27253
|
checkStatus,
|
|
@@ -27111,29 +27260,32 @@ var SpansListPage = () => {
|
|
|
27111
27260
|
fetchingForward,
|
|
27112
27261
|
hasMoreBackward,
|
|
27113
27262
|
hasMoreForward,
|
|
27263
|
+
licenseLimit,
|
|
27114
27264
|
spans,
|
|
27115
27265
|
status,
|
|
27116
27266
|
statusError,
|
|
27117
27267
|
streamPaused,
|
|
27118
|
-
|
|
27268
|
+
systemLimit,
|
|
27269
|
+
toggleStream,
|
|
27270
|
+
totalCount
|
|
27119
27271
|
} = useSpans();
|
|
27120
|
-
const clearSpansSync = (0,
|
|
27272
|
+
const clearSpansSync = (0, import_react65.useCallback)(() => {
|
|
27121
27273
|
void clearSpans();
|
|
27122
27274
|
}, [clearSpans]);
|
|
27123
27275
|
const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
|
|
27124
|
-
const [selectedTraceId, setSelectedTraceId] = (0,
|
|
27125
|
-
const [selectedSpanId, setSelectedSpanId] = (0,
|
|
27126
|
-
const navigateToSpan = (0,
|
|
27276
|
+
const [selectedTraceId, setSelectedTraceId] = (0, import_react65.useState)();
|
|
27277
|
+
const [selectedSpanId, setSelectedSpanId] = (0, import_react65.useState)();
|
|
27278
|
+
const navigateToSpan = (0, import_react65.useCallback)((span) => {
|
|
27127
27279
|
setSelectedTraceId(span.trace_id);
|
|
27128
27280
|
setSelectedSpanId(span.span_id);
|
|
27129
27281
|
}, []);
|
|
27130
|
-
const handleRetry = (0,
|
|
27282
|
+
const handleRetry = (0, import_react65.useCallback)(() => {
|
|
27131
27283
|
void checkStatus();
|
|
27132
27284
|
}, [checkStatus]);
|
|
27133
27285
|
const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
|
|
27134
|
-
return /* @__PURE__ */ (0,
|
|
27135
|
-
/* @__PURE__ */ (0,
|
|
27136
|
-
|
|
27286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
|
|
27287
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
27288
|
+
import_material21.Box,
|
|
27137
27289
|
{
|
|
27138
27290
|
"data-testid": "spans-list-page",
|
|
27139
27291
|
sx: {
|
|
@@ -27147,14 +27299,14 @@ var SpansListPage = () => {
|
|
|
27147
27299
|
visibility: selectedTraceId === void 0 ? "visible" : "hidden",
|
|
27148
27300
|
width: "100%"
|
|
27149
27301
|
},
|
|
27150
|
-
children: shouldShowStatusMessage ? /* @__PURE__ */ (0,
|
|
27302
|
+
children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
27151
27303
|
StatusMessage,
|
|
27152
27304
|
{
|
|
27153
27305
|
error: statusError,
|
|
27154
27306
|
onRetry: handleRetry,
|
|
27155
27307
|
status
|
|
27156
27308
|
}
|
|
27157
|
-
) : /* @__PURE__ */ (0,
|
|
27309
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
27158
27310
|
SpansList,
|
|
27159
27311
|
{
|
|
27160
27312
|
clearingSpans,
|
|
@@ -27163,6 +27315,7 @@ var SpansListPage = () => {
|
|
|
27163
27315
|
fetchingForward,
|
|
27164
27316
|
hasMoreBackward,
|
|
27165
27317
|
hasMoreForward,
|
|
27318
|
+
licenseLimit,
|
|
27166
27319
|
onClearSpans: clearSpansSync,
|
|
27167
27320
|
onFetchBackward: fetchBackward,
|
|
27168
27321
|
onFetchForward: fetchForward,
|
|
@@ -27171,12 +27324,14 @@ var SpansListPage = () => {
|
|
|
27171
27324
|
onToggleStream: toggleStream,
|
|
27172
27325
|
order: order2,
|
|
27173
27326
|
spans,
|
|
27174
|
-
streamPaused
|
|
27327
|
+
streamPaused,
|
|
27328
|
+
systemLimit,
|
|
27329
|
+
totalCount
|
|
27175
27330
|
}
|
|
27176
27331
|
)
|
|
27177
27332
|
}
|
|
27178
27333
|
),
|
|
27179
|
-
selectedTraceId !== void 0 && /* @__PURE__ */ (0,
|
|
27334
|
+
selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(TraceGraphPage, { onClose: () => {
|
|
27180
27335
|
setSelectedTraceId(void 0);
|
|
27181
27336
|
}, spanId: selectedSpanId, traceId: selectedTraceId })
|
|
27182
27337
|
] });
|