@localstack/appinspector-ui 1.0.23 → 1.0.24
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 +387 -383
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +235 -231
- package/dist/index.js.map +1 -1
- package/package.json +49 -37
package/dist/index.js
CHANGED
|
@@ -162,6 +162,9 @@ var WrapInComponent = ({ children, wrap, wrapperFn }) => {
|
|
|
162
162
|
return children;
|
|
163
163
|
};
|
|
164
164
|
|
|
165
|
+
// src/components/aws-service-icon/icons/index.tsx
|
|
166
|
+
import { memo } from "react";
|
|
167
|
+
|
|
165
168
|
// src/types/service-names.ts
|
|
166
169
|
var SERVICE_NAME = {
|
|
167
170
|
ACCESSANALYZER: "accessanalyzer",
|
|
@@ -2351,7 +2354,8 @@ var SvgXray = (props) => /* @__PURE__ */ jsxs118("svg", { xmlns: "http://www.w3.
|
|
|
2351
2354
|
] });
|
|
2352
2355
|
var xray_default = SvgXray;
|
|
2353
2356
|
|
|
2354
|
-
// src/components/aws-service-icon/icons/index.
|
|
2357
|
+
// src/components/aws-service-icon/icons/index.tsx
|
|
2358
|
+
import { jsx as jsx122 } from "react/jsx-runtime";
|
|
2355
2359
|
var ICONS_MAP = {
|
|
2356
2360
|
[SERVICE_NAME.ACCOUNT]: account_default,
|
|
2357
2361
|
[SERVICE_NAME.ACM]: acm_default,
|
|
@@ -2474,30 +2478,30 @@ var ICONS_MAP = {
|
|
|
2474
2478
|
[SERVICE_NAME.WAFV2]: wafv2_default,
|
|
2475
2479
|
[SERVICE_NAME.XRAY]: xray_default
|
|
2476
2480
|
};
|
|
2477
|
-
var
|
|
2478
|
-
|
|
2479
|
-
};
|
|
2481
|
+
var AwsServiceIconBase = memo((props) => {
|
|
2482
|
+
const Icon = ICONS_MAP[props.service] ?? ICONS_MAP.infrastructure;
|
|
2483
|
+
return /* @__PURE__ */ jsx122(Icon, { ...props });
|
|
2484
|
+
});
|
|
2480
2485
|
var supportedServiceNames = Object.keys(ICONS_MAP);
|
|
2481
2486
|
|
|
2482
2487
|
// src/components/aws-service-icon/aws-service-icon.tsx
|
|
2483
|
-
import { jsx as
|
|
2488
|
+
import { jsx as jsx123 } from "react/jsx-runtime";
|
|
2484
2489
|
var sizes = { large: [32, 32], medium: [22, 22], small: [11, 11] };
|
|
2485
2490
|
var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
|
|
2486
2491
|
const [width, height] = sizes[size];
|
|
2487
|
-
|
|
2488
|
-
return /* @__PURE__ */ jsx122(
|
|
2492
|
+
return /* @__PURE__ */ jsx123(
|
|
2489
2493
|
WrapInComponent,
|
|
2490
2494
|
{
|
|
2491
2495
|
wrap: !hideTooltip,
|
|
2492
|
-
wrapperFn: (child) => /* @__PURE__ */
|
|
2493
|
-
children: /* @__PURE__ */
|
|
2496
|
+
wrapperFn: (child) => /* @__PURE__ */ jsx123(Tooltip2, { placement: "top", title: title ?? service, children: child }),
|
|
2497
|
+
children: /* @__PURE__ */ jsx123(AwsServiceIconBase, { height, service, style: { display: "block" }, width })
|
|
2494
2498
|
}
|
|
2495
2499
|
);
|
|
2496
2500
|
};
|
|
2497
2501
|
|
|
2498
2502
|
// src/components/cells/pill-cell.tsx
|
|
2499
2503
|
import { Box as Box2 } from "@mui/material";
|
|
2500
|
-
import { jsx as
|
|
2504
|
+
import { jsx as jsx124 } from "react/jsx-runtime";
|
|
2501
2505
|
var PillCell = ({
|
|
2502
2506
|
backgroundColor,
|
|
2503
2507
|
borderColor,
|
|
@@ -2507,7 +2511,7 @@ var PillCell = ({
|
|
|
2507
2511
|
paddingBottom,
|
|
2508
2512
|
paddingTop
|
|
2509
2513
|
}) => {
|
|
2510
|
-
return /* @__PURE__ */
|
|
2514
|
+
return /* @__PURE__ */ jsx124(
|
|
2511
2515
|
Box2,
|
|
2512
2516
|
{
|
|
2513
2517
|
sx: {
|
|
@@ -2530,7 +2534,7 @@ var PillCell = ({
|
|
|
2530
2534
|
};
|
|
2531
2535
|
|
|
2532
2536
|
// src/components/cells/service-cell.tsx
|
|
2533
|
-
import { Fragment as Fragment2, jsx as
|
|
2537
|
+
import { Fragment as Fragment2, jsx as jsx125, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
2534
2538
|
var ServiceCell = ({
|
|
2535
2539
|
borderColor,
|
|
2536
2540
|
borderWidth,
|
|
@@ -2540,9 +2544,9 @@ var ServiceCell = ({
|
|
|
2540
2544
|
showIcon = true,
|
|
2541
2545
|
width = "32px"
|
|
2542
2546
|
}) => {
|
|
2543
|
-
return /* @__PURE__ */
|
|
2547
|
+
return /* @__PURE__ */ jsx125(Box3, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs119(PillCell, { borderColor, borderWidth, height, children: [
|
|
2544
2548
|
showIcon ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
|
|
2545
|
-
/* @__PURE__ */
|
|
2549
|
+
/* @__PURE__ */ jsx125(
|
|
2546
2550
|
Box3,
|
|
2547
2551
|
{
|
|
2548
2552
|
sx: {
|
|
@@ -2554,12 +2558,12 @@ var ServiceCell = ({
|
|
|
2554
2558
|
padding: 0,
|
|
2555
2559
|
width
|
|
2556
2560
|
},
|
|
2557
|
-
children: /* @__PURE__ */
|
|
2561
|
+
children: /* @__PURE__ */ jsx125(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
|
|
2558
2562
|
}
|
|
2559
2563
|
),
|
|
2560
|
-
/* @__PURE__ */
|
|
2564
|
+
/* @__PURE__ */ jsx125(Divider, { orientation: "vertical" })
|
|
2561
2565
|
] }) : void 0,
|
|
2562
|
-
/* @__PURE__ */
|
|
2566
|
+
/* @__PURE__ */ jsx125(
|
|
2563
2567
|
Typography,
|
|
2564
2568
|
{
|
|
2565
2569
|
sx: {
|
|
@@ -2583,8 +2587,8 @@ var ServiceCell = ({
|
|
|
2583
2587
|
}
|
|
2584
2588
|
),
|
|
2585
2589
|
resource ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
|
|
2586
|
-
/* @__PURE__ */
|
|
2587
|
-
/* @__PURE__ */
|
|
2590
|
+
/* @__PURE__ */ jsx125(Box3, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ jsx125(Divider, { orientation: "vertical" }) }),
|
|
2591
|
+
/* @__PURE__ */ jsx125(
|
|
2588
2592
|
Typography,
|
|
2589
2593
|
{
|
|
2590
2594
|
sx: {
|
|
@@ -2674,7 +2678,7 @@ var searchInObject = (object, searchTerm, skipKeys = []) => {
|
|
|
2674
2678
|
};
|
|
2675
2679
|
|
|
2676
2680
|
// src/components/spans-list/spans-data-grid.tsx
|
|
2677
|
-
import { Fragment as Fragment3, jsx as
|
|
2681
|
+
import { Fragment as Fragment3, jsx as jsx126, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
2678
2682
|
var resourceNameComparator = (v1 = "", v2 = "") => {
|
|
2679
2683
|
return v1.localeCompare(v2);
|
|
2680
2684
|
};
|
|
@@ -2689,7 +2693,7 @@ var columns = [
|
|
|
2689
2693
|
field: "trace_id",
|
|
2690
2694
|
headerName: "Trace",
|
|
2691
2695
|
renderCell: (parameters) => {
|
|
2692
|
-
return /* @__PURE__ */
|
|
2696
|
+
return /* @__PURE__ */ jsx126(Tooltip3, { arrow: true, title: String(parameters.value), children: /* @__PURE__ */ jsx126(
|
|
2693
2697
|
"span",
|
|
2694
2698
|
{
|
|
2695
2699
|
style: {
|
|
@@ -2708,7 +2712,7 @@ var columns = [
|
|
|
2708
2712
|
{
|
|
2709
2713
|
field: "start_time_unix_nano",
|
|
2710
2714
|
headerName: "Time",
|
|
2711
|
-
renderCell: (parameters) => /* @__PURE__ */
|
|
2715
|
+
renderCell: (parameters) => /* @__PURE__ */ jsx126(ResponsiveTimestampCell, { value: parameters.value }),
|
|
2712
2716
|
type: "string",
|
|
2713
2717
|
width: 180
|
|
2714
2718
|
},
|
|
@@ -2719,7 +2723,7 @@ var columns = [
|
|
|
2719
2723
|
if (!parameters.row.parent_service_name || !parameters.row.parent_resource_name) {
|
|
2720
2724
|
return;
|
|
2721
2725
|
}
|
|
2722
|
-
return /* @__PURE__ */
|
|
2726
|
+
return /* @__PURE__ */ jsx126(ServiceCell, { resource: parameters.row.parent_resource_name, service: parameters.row.parent_service_name });
|
|
2723
2727
|
},
|
|
2724
2728
|
sortable: true,
|
|
2725
2729
|
sortComparator: resourceNameComparator,
|
|
@@ -2737,7 +2741,7 @@ var columns = [
|
|
|
2737
2741
|
headerName: "Consumer",
|
|
2738
2742
|
maxWidth: 260,
|
|
2739
2743
|
renderCell: (parameters) => {
|
|
2740
|
-
return /* @__PURE__ */
|
|
2744
|
+
return /* @__PURE__ */ jsx126(ServiceCell, { resource: parameters.row.resource_name, service: parameters.row.service_name });
|
|
2741
2745
|
},
|
|
2742
2746
|
sortComparator: resourceNameComparator
|
|
2743
2747
|
},
|
|
@@ -2746,7 +2750,7 @@ var columns = [
|
|
|
2746
2750
|
field: "events",
|
|
2747
2751
|
headerName: "Events",
|
|
2748
2752
|
minWidth: 120,
|
|
2749
|
-
renderCell: (parameters) => /* @__PURE__ */
|
|
2753
|
+
renderCell: (parameters) => /* @__PURE__ */ jsx126(EventIndicatorCell, { events: parameters.row.events }),
|
|
2750
2754
|
sortable: false
|
|
2751
2755
|
}
|
|
2752
2756
|
];
|
|
@@ -2810,13 +2814,13 @@ var SpansDataGrid = ({
|
|
|
2810
2814
|
[filtersToApply, rows]
|
|
2811
2815
|
);
|
|
2812
2816
|
return /* @__PURE__ */ jsxs120(Fragment3, { children: [
|
|
2813
|
-
/* @__PURE__ */
|
|
2814
|
-
/* @__PURE__ */
|
|
2817
|
+
/* @__PURE__ */ jsx126(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
|
|
2818
|
+
/* @__PURE__ */ jsx126(
|
|
2815
2819
|
TextField,
|
|
2816
2820
|
{
|
|
2817
2821
|
label: /* @__PURE__ */ jsxs120(Box4, { sx: { display: "flex", gap: "0.25rem" }, children: [
|
|
2818
|
-
/* @__PURE__ */
|
|
2819
|
-
/* @__PURE__ */
|
|
2822
|
+
/* @__PURE__ */ jsx126(Search, { fontSize: "small" }),
|
|
2823
|
+
/* @__PURE__ */ jsx126(Typography2, { children: "Search Spans" })
|
|
2820
2824
|
] }),
|
|
2821
2825
|
onChange: handleSearchTermChange,
|
|
2822
2826
|
size: "small",
|
|
@@ -2824,11 +2828,11 @@ var SpansDataGrid = ({
|
|
|
2824
2828
|
value: searchTerm
|
|
2825
2829
|
}
|
|
2826
2830
|
),
|
|
2827
|
-
/* @__PURE__ */
|
|
2828
|
-
onFilterWriteOperationsChange && /* @__PURE__ */
|
|
2831
|
+
/* @__PURE__ */ jsx126(Box4, { sx: { flexGrow: 1 } }),
|
|
2832
|
+
onFilterWriteOperationsChange && /* @__PURE__ */ jsx126(
|
|
2829
2833
|
FormControlLabel,
|
|
2830
2834
|
{
|
|
2831
|
-
control: /* @__PURE__ */
|
|
2835
|
+
control: /* @__PURE__ */ jsx126(
|
|
2832
2836
|
Switch,
|
|
2833
2837
|
{
|
|
2834
2838
|
checked: filterWriteOperations,
|
|
@@ -2841,10 +2845,10 @@ var SpansDataGrid = ({
|
|
|
2841
2845
|
label: "Only Write Operations"
|
|
2842
2846
|
}
|
|
2843
2847
|
),
|
|
2844
|
-
/* @__PURE__ */
|
|
2845
|
-
/* @__PURE__ */
|
|
2848
|
+
/* @__PURE__ */ jsx126(Button, { onClick: onClearSpans, startIcon: /* @__PURE__ */ jsx126(DeleteForeverOutlined, {}), children: "Clear Spans" }),
|
|
2849
|
+
/* @__PURE__ */ jsx126(Button, { disabled: loading, onClick: onRefresh, startIcon: /* @__PURE__ */ jsx126(Cached, {}), children: "Refresh" })
|
|
2846
2850
|
] }) }),
|
|
2847
|
-
/* @__PURE__ */
|
|
2851
|
+
/* @__PURE__ */ jsx126("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: /* @__PURE__ */ jsx126(
|
|
2848
2852
|
Paper,
|
|
2849
2853
|
{
|
|
2850
2854
|
sx: {
|
|
@@ -2855,7 +2859,7 @@ var SpansDataGrid = ({
|
|
|
2855
2859
|
minHeight: 120,
|
|
2856
2860
|
p: 2
|
|
2857
2861
|
},
|
|
2858
|
-
children: /* @__PURE__ */
|
|
2862
|
+
children: /* @__PURE__ */ jsx126(
|
|
2859
2863
|
DataGrid,
|
|
2860
2864
|
{
|
|
2861
2865
|
columns,
|
|
@@ -2893,13 +2897,13 @@ var SpansDataGrid = ({
|
|
|
2893
2897
|
};
|
|
2894
2898
|
|
|
2895
2899
|
// src/components/spans-list/spans-list.tsx
|
|
2896
|
-
import { jsx as
|
|
2900
|
+
import { jsx as jsx127, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
2897
2901
|
var SpansList = (props) => {
|
|
2898
2902
|
return /* @__PURE__ */ jsxs121(Box5, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
|
|
2899
2903
|
props.spans.error && /* @__PURE__ */ jsxs121(
|
|
2900
2904
|
Alert,
|
|
2901
2905
|
{
|
|
2902
|
-
action: /* @__PURE__ */
|
|
2906
|
+
action: /* @__PURE__ */ jsx127(Button2, { onClick: props.onRefresh, children: "Retry" }),
|
|
2903
2907
|
severity: "error",
|
|
2904
2908
|
children: [
|
|
2905
2909
|
"Unexpected error:",
|
|
@@ -2908,7 +2912,7 @@ var SpansList = (props) => {
|
|
|
2908
2912
|
]
|
|
2909
2913
|
}
|
|
2910
2914
|
),
|
|
2911
|
-
(props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */
|
|
2915
|
+
(props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */ jsx127(
|
|
2912
2916
|
SpansDataGrid,
|
|
2913
2917
|
{
|
|
2914
2918
|
filterWriteOperations: props.filterWriteOperations,
|
|
@@ -2974,14 +2978,14 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
|
|
|
2974
2978
|
};
|
|
2975
2979
|
|
|
2976
2980
|
// src/components/status-message/status-message.tsx
|
|
2977
|
-
import { Fragment as Fragment4, jsx as
|
|
2981
|
+
import { Fragment as Fragment4, jsx as jsx128, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
2978
2982
|
var StatusMessage = ({
|
|
2979
2983
|
error,
|
|
2980
2984
|
onRetry,
|
|
2981
2985
|
status
|
|
2982
2986
|
}) => {
|
|
2983
2987
|
if (error instanceof AppInspectorNotFoundError) {
|
|
2984
|
-
return /* @__PURE__ */
|
|
2988
|
+
return /* @__PURE__ */ jsx128(
|
|
2985
2989
|
Box6,
|
|
2986
2990
|
{
|
|
2987
2991
|
sx: {
|
|
@@ -2995,15 +2999,15 @@ var StatusMessage = ({
|
|
|
2995
2999
|
children: /* @__PURE__ */ jsxs122(
|
|
2996
3000
|
Alert2,
|
|
2997
3001
|
{
|
|
2998
|
-
icon: /* @__PURE__ */
|
|
3002
|
+
icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
|
|
2999
3003
|
severity: "error",
|
|
3000
3004
|
sx: { maxWidth: 600, width: "100%" },
|
|
3001
3005
|
children: [
|
|
3002
|
-
/* @__PURE__ */
|
|
3003
|
-
/* @__PURE__ */
|
|
3004
|
-
/* @__PURE__ */
|
|
3005
|
-
/* @__PURE__ */
|
|
3006
|
-
/* @__PURE__ */
|
|
3006
|
+
/* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
|
|
3007
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
|
|
3008
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To enable App Inspector:" }) }),
|
|
3009
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
|
|
3010
|
+
/* @__PURE__ */ jsx128(
|
|
3007
3011
|
Box6,
|
|
3008
3012
|
{
|
|
3009
3013
|
component: "pre",
|
|
@@ -3025,15 +3029,15 @@ var StatusMessage = ({
|
|
|
3025
3029
|
] }),
|
|
3026
3030
|
". For persistent default state across restarts, adjust the",
|
|
3027
3031
|
" ",
|
|
3028
|
-
/* @__PURE__ */
|
|
3032
|
+
/* @__PURE__ */ jsx128("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
|
|
3029
3033
|
" ",
|
|
3030
3034
|
"environment variable in your",
|
|
3031
3035
|
" ",
|
|
3032
|
-
/* @__PURE__ */
|
|
3036
|
+
/* @__PURE__ */ jsx128("code", { children: "~/.localstack" }),
|
|
3033
3037
|
" ",
|
|
3034
3038
|
"profile files.",
|
|
3035
3039
|
" ",
|
|
3036
|
-
/* @__PURE__ */
|
|
3040
|
+
/* @__PURE__ */ jsx128(
|
|
3037
3041
|
Link,
|
|
3038
3042
|
{
|
|
3039
3043
|
href: "https://docs.localstack.cloud/aws/capabilities/config/configuration/#profiles",
|
|
@@ -3043,8 +3047,8 @@ var StatusMessage = ({
|
|
|
3043
3047
|
}
|
|
3044
3048
|
)
|
|
3045
3049
|
] }),
|
|
3046
|
-
/* @__PURE__ */
|
|
3047
|
-
/* @__PURE__ */
|
|
3050
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "For more information:" }) }),
|
|
3051
|
+
/* @__PURE__ */ jsx128(
|
|
3048
3052
|
Link,
|
|
3049
3053
|
{
|
|
3050
3054
|
href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
|
|
@@ -3053,7 +3057,7 @@ var StatusMessage = ({
|
|
|
3053
3057
|
children: "App Inspector Documentation"
|
|
3054
3058
|
}
|
|
3055
3059
|
),
|
|
3056
|
-
onRetry && /* @__PURE__ */
|
|
3060
|
+
onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
|
|
3057
3061
|
Button3,
|
|
3058
3062
|
{
|
|
3059
3063
|
"aria-label": "Check App Inspector status again",
|
|
@@ -3069,7 +3073,7 @@ var StatusMessage = ({
|
|
|
3069
3073
|
);
|
|
3070
3074
|
}
|
|
3071
3075
|
if (error instanceof ConnectionError) {
|
|
3072
|
-
return /* @__PURE__ */
|
|
3076
|
+
return /* @__PURE__ */ jsx128(
|
|
3073
3077
|
Box6,
|
|
3074
3078
|
{
|
|
3075
3079
|
sx: {
|
|
@@ -3083,14 +3087,14 @@ var StatusMessage = ({
|
|
|
3083
3087
|
children: /* @__PURE__ */ jsxs122(
|
|
3084
3088
|
Alert2,
|
|
3085
3089
|
{
|
|
3086
|
-
icon: /* @__PURE__ */
|
|
3090
|
+
icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
|
|
3087
3091
|
severity: "error",
|
|
3088
3092
|
sx: { maxWidth: 600, width: "100%" },
|
|
3089
3093
|
children: [
|
|
3090
|
-
/* @__PURE__ */
|
|
3091
|
-
/* @__PURE__ */
|
|
3092
|
-
/* @__PURE__ */
|
|
3093
|
-
/* @__PURE__ */
|
|
3094
|
+
/* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
|
|
3095
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
|
|
3096
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To start LocalStack:" }) }),
|
|
3097
|
+
/* @__PURE__ */ jsx128(
|
|
3094
3098
|
Box6,
|
|
3095
3099
|
{
|
|
3096
3100
|
component: "pre",
|
|
@@ -3103,7 +3107,7 @@ var StatusMessage = ({
|
|
|
3103
3107
|
children: "localstack start"
|
|
3104
3108
|
}
|
|
3105
3109
|
),
|
|
3106
|
-
onRetry && /* @__PURE__ */
|
|
3110
|
+
onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
|
|
3107
3111
|
Button3,
|
|
3108
3112
|
{
|
|
3109
3113
|
"aria-label": "Retry connection to LocalStack",
|
|
@@ -3119,7 +3123,7 @@ var StatusMessage = ({
|
|
|
3119
3123
|
);
|
|
3120
3124
|
}
|
|
3121
3125
|
if (status?.status === "DISABLED") {
|
|
3122
|
-
return /* @__PURE__ */
|
|
3126
|
+
return /* @__PURE__ */ jsx128(
|
|
3123
3127
|
Box6,
|
|
3124
3128
|
{
|
|
3125
3129
|
sx: {
|
|
@@ -3133,14 +3137,14 @@ var StatusMessage = ({
|
|
|
3133
3137
|
children: /* @__PURE__ */ jsxs122(
|
|
3134
3138
|
Alert2,
|
|
3135
3139
|
{
|
|
3136
|
-
icon: /* @__PURE__ */
|
|
3140
|
+
icon: /* @__PURE__ */ jsx128(InfoOutlined, { fontSize: "large" }),
|
|
3137
3141
|
severity: "warning",
|
|
3138
3142
|
sx: { maxWidth: 600, width: "100%" },
|
|
3139
3143
|
children: [
|
|
3140
|
-
/* @__PURE__ */
|
|
3141
|
-
/* @__PURE__ */
|
|
3142
|
-
/* @__PURE__ */
|
|
3143
|
-
/* @__PURE__ */
|
|
3144
|
+
/* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
|
|
3145
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
|
|
3146
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To enable App Inspector at runtime:" }) }),
|
|
3147
|
+
/* @__PURE__ */ jsx128(
|
|
3144
3148
|
Box6,
|
|
3145
3149
|
{
|
|
3146
3150
|
component: "pre",
|
|
@@ -3151,14 +3155,14 @@ var StatusMessage = ({
|
|
|
3151
3155
|
overflowX: "auto",
|
|
3152
3156
|
p: 1
|
|
3153
3157
|
},
|
|
3154
|
-
children: `curl -X PUT http://localhost:4566${APPINSPECTOR_API_PREFIX}/status
|
|
3155
|
-
-H "Content-Type: application/json"
|
|
3158
|
+
children: String.raw`curl -X PUT http://localhost:4566${APPINSPECTOR_API_PREFIX}/status \
|
|
3159
|
+
-H "Content-Type: application/json" \
|
|
3156
3160
|
-d '{"status": "ENABLED"}'`
|
|
3157
3161
|
}
|
|
3158
3162
|
),
|
|
3159
|
-
/* @__PURE__ */
|
|
3160
|
-
/* @__PURE__ */
|
|
3161
|
-
/* @__PURE__ */
|
|
3163
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
|
|
3164
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
|
|
3165
|
+
/* @__PURE__ */ jsx128(
|
|
3162
3166
|
Box6,
|
|
3163
3167
|
{
|
|
3164
3168
|
component: "pre",
|
|
@@ -3171,8 +3175,8 @@ var StatusMessage = ({
|
|
|
3171
3175
|
children: "APPINSPECTOR=1"
|
|
3172
3176
|
}
|
|
3173
3177
|
),
|
|
3174
|
-
Boolean(status.note) && /* @__PURE__ */
|
|
3175
|
-
onRetry && /* @__PURE__ */
|
|
3178
|
+
Boolean(status.note) && /* @__PURE__ */ jsx128(Typography3, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
|
|
3179
|
+
onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
|
|
3176
3180
|
Button3,
|
|
3177
3181
|
{
|
|
3178
3182
|
"aria-label": "Check if App Inspector is enabled",
|
|
@@ -3188,7 +3192,7 @@ var StatusMessage = ({
|
|
|
3188
3192
|
);
|
|
3189
3193
|
}
|
|
3190
3194
|
if (error) {
|
|
3191
|
-
return /* @__PURE__ */
|
|
3195
|
+
return /* @__PURE__ */ jsx128(
|
|
3192
3196
|
Box6,
|
|
3193
3197
|
{
|
|
3194
3198
|
sx: {
|
|
@@ -3202,13 +3206,13 @@ var StatusMessage = ({
|
|
|
3202
3206
|
children: /* @__PURE__ */ jsxs122(
|
|
3203
3207
|
Alert2,
|
|
3204
3208
|
{
|
|
3205
|
-
icon: /* @__PURE__ */
|
|
3209
|
+
icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
|
|
3206
3210
|
severity: "error",
|
|
3207
3211
|
sx: { maxWidth: 600, width: "100%" },
|
|
3208
3212
|
children: [
|
|
3209
|
-
/* @__PURE__ */
|
|
3210
|
-
/* @__PURE__ */
|
|
3211
|
-
onRetry && /* @__PURE__ */
|
|
3213
|
+
/* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
|
|
3214
|
+
/* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: error.message }),
|
|
3215
|
+
onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
|
|
3212
3216
|
Button3,
|
|
3213
3217
|
{
|
|
3214
3218
|
"aria-label": "Retry operation",
|
|
@@ -3223,7 +3227,7 @@ var StatusMessage = ({
|
|
|
3223
3227
|
}
|
|
3224
3228
|
);
|
|
3225
3229
|
}
|
|
3226
|
-
return /* @__PURE__ */
|
|
3230
|
+
return /* @__PURE__ */ jsx128(Fragment4, {});
|
|
3227
3231
|
};
|
|
3228
3232
|
|
|
3229
3233
|
// src/context.tsx
|
|
@@ -3349,7 +3353,7 @@ var createApiClient = ({ localstackEndpoint }) => {
|
|
|
3349
3353
|
};
|
|
3350
3354
|
|
|
3351
3355
|
// src/context.tsx
|
|
3352
|
-
import { jsx as
|
|
3356
|
+
import { jsx as jsx129 } from "react/jsx-runtime";
|
|
3353
3357
|
var AppInspectorContext = createContext2(void 0);
|
|
3354
3358
|
var useAppInspector = () => {
|
|
3355
3359
|
const context = useContext2(AppInspectorContext);
|
|
@@ -3382,7 +3386,7 @@ var AppInspectorContextProvider = (props) => {
|
|
|
3382
3386
|
}),
|
|
3383
3387
|
[props.linkComponent, props.localstackEndpoint, resolveLink]
|
|
3384
3388
|
);
|
|
3385
|
-
return /* @__PURE__ */
|
|
3389
|
+
return /* @__PURE__ */ jsx129(ApiProvider, { api, children: /* @__PURE__ */ jsx129(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
|
|
3386
3390
|
};
|
|
3387
3391
|
|
|
3388
3392
|
// src/hooks/use-local-storage.tsx
|
|
@@ -3470,7 +3474,8 @@ var useStatus = () => {
|
|
|
3470
3474
|
};
|
|
3471
3475
|
|
|
3472
3476
|
// src/pages/spans-list-page.tsx
|
|
3473
|
-
import { jsx as
|
|
3477
|
+
import { jsx as jsx130 } from "react/jsx-runtime";
|
|
3478
|
+
var spansPerPageOptions = [25, 50, 100];
|
|
3474
3479
|
var SpansListPage = () => {
|
|
3475
3480
|
const api = useAppInspectorApi();
|
|
3476
3481
|
const [spans, setSpans] = useState5();
|
|
@@ -3480,7 +3485,6 @@ var SpansListPage = () => {
|
|
|
3480
3485
|
const mapPageToNextCursor = useRef3({});
|
|
3481
3486
|
const [page, setPage] = useState5(0);
|
|
3482
3487
|
const [pageSize, setPageSize] = useState5(100);
|
|
3483
|
-
const [spansPerPageOptions] = useState5(() => [25, 50, 100]);
|
|
3484
3488
|
const [spanCount, setSpanCount] = useState5(0);
|
|
3485
3489
|
const queryOptions = useMemo4(() => {
|
|
3486
3490
|
return {
|
|
@@ -3545,7 +3549,7 @@ var SpansListPage = () => {
|
|
|
3545
3549
|
void checkStatus();
|
|
3546
3550
|
}, [checkStatus]);
|
|
3547
3551
|
const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
|
|
3548
|
-
return /* @__PURE__ */
|
|
3552
|
+
return /* @__PURE__ */ jsx130(
|
|
3549
3553
|
Box7,
|
|
3550
3554
|
{
|
|
3551
3555
|
"data-testid": "spans-list-page",
|
|
@@ -3556,14 +3560,14 @@ var SpansListPage = () => {
|
|
|
3556
3560
|
flexGrow: 1,
|
|
3557
3561
|
width: "100%"
|
|
3558
3562
|
},
|
|
3559
|
-
children: shouldShowStatusMessage ? /* @__PURE__ */
|
|
3563
|
+
children: shouldShowStatusMessage ? /* @__PURE__ */ jsx130(
|
|
3560
3564
|
StatusMessage,
|
|
3561
3565
|
{
|
|
3562
3566
|
error: statusError,
|
|
3563
3567
|
onRetry: handleRetry,
|
|
3564
3568
|
status
|
|
3565
3569
|
}
|
|
3566
|
-
) : /* @__PURE__ */
|
|
3570
|
+
) : /* @__PURE__ */ jsx130(
|
|
3567
3571
|
SpansList,
|
|
3568
3572
|
{
|
|
3569
3573
|
filterWriteOperations,
|
|
@@ -3805,7 +3809,7 @@ var getEventGroupsByType = (events) => {
|
|
|
3805
3809
|
// src/components/event-details/event-details-header.tsx
|
|
3806
3810
|
import { Close } from "@mui/icons-material";
|
|
3807
3811
|
import { Box as Box8, IconButton, Typography as Typography4 } from "@mui/material";
|
|
3808
|
-
import { jsx as
|
|
3812
|
+
import { jsx as jsx131, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
3809
3813
|
var EventDetailsHeader = ({ event, onClose }) => {
|
|
3810
3814
|
return /* @__PURE__ */ jsxs123(
|
|
3811
3815
|
Box8,
|
|
@@ -3820,7 +3824,7 @@ var EventDetailsHeader = ({ event, onClose }) => {
|
|
|
3820
3824
|
},
|
|
3821
3825
|
children: [
|
|
3822
3826
|
/* @__PURE__ */ jsxs123(Box8, { children: [
|
|
3823
|
-
/* @__PURE__ */
|
|
3827
|
+
/* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
|
|
3824
3828
|
/* @__PURE__ */ jsxs123(Typography4, { color: "text.secondary", variant: "body2", children: [
|
|
3825
3829
|
event.service_name,
|
|
3826
3830
|
" ",
|
|
@@ -3828,7 +3832,7 @@ var EventDetailsHeader = ({ event, onClose }) => {
|
|
|
3828
3832
|
event.operation_name
|
|
3829
3833
|
] })
|
|
3830
3834
|
] }),
|
|
3831
|
-
onClose && /* @__PURE__ */
|
|
3835
|
+
onClose && /* @__PURE__ */ jsx131(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx131(Close, {}) })
|
|
3832
3836
|
]
|
|
3833
3837
|
}
|
|
3834
3838
|
);
|
|
@@ -3845,23 +3849,23 @@ import { useEffect as useEffect5, useMemo as useMemo6, useRef as useRef4, useSta
|
|
|
3845
3849
|
// src/components/status-icon.tsx
|
|
3846
3850
|
import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
|
|
3847
3851
|
import { Box as Box9 } from "@mui/material";
|
|
3848
|
-
import { jsx as
|
|
3852
|
+
import { jsx as jsx132 } from "react/jsx-runtime";
|
|
3849
3853
|
var StatusIcon = ({ errorLevel }) => {
|
|
3850
3854
|
switch (errorLevel) {
|
|
3851
3855
|
case EventLevel.LevelError: {
|
|
3852
|
-
return /* @__PURE__ */
|
|
3856
|
+
return /* @__PURE__ */ jsx132(Cancel, { sx: { color: "red" } });
|
|
3853
3857
|
}
|
|
3854
3858
|
case EventLevel.LevelInfo: {
|
|
3855
|
-
return /* @__PURE__ */
|
|
3859
|
+
return /* @__PURE__ */ jsx132(Info, { sx: { color: "gray" } });
|
|
3856
3860
|
}
|
|
3857
3861
|
case EventLevel.LevelPermission: {
|
|
3858
|
-
return /* @__PURE__ */
|
|
3862
|
+
return /* @__PURE__ */ jsx132(RemoveCircle, { sx: { color: "blue" } });
|
|
3859
3863
|
}
|
|
3860
3864
|
case EventLevel.LevelWarning: {
|
|
3861
|
-
return /* @__PURE__ */
|
|
3865
|
+
return /* @__PURE__ */ jsx132(Error2, { sx: { color: "orange" } });
|
|
3862
3866
|
}
|
|
3863
3867
|
default: {
|
|
3864
|
-
return /* @__PURE__ */
|
|
3868
|
+
return /* @__PURE__ */ jsx132(CheckCircle, { sx: { color: "lightgray" } });
|
|
3865
3869
|
}
|
|
3866
3870
|
}
|
|
3867
3871
|
};
|
|
@@ -3869,9 +3873,9 @@ var StatusIcon = ({ errorLevel }) => {
|
|
|
3869
3873
|
// src/components/event-details/iam-event-detail.tsx
|
|
3870
3874
|
import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
|
|
3871
3875
|
import { Box as Box10, Chip, Grid as Grid2, Typography as Typography5 } from "@mui/material";
|
|
3872
|
-
import { jsx as
|
|
3876
|
+
import { jsx as jsx133, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
3873
3877
|
var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 0, sx: { mb: 1 }, children: [
|
|
3874
|
-
/* @__PURE__ */
|
|
3878
|
+
/* @__PURE__ */ jsx133(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx133(
|
|
3875
3879
|
Typography5,
|
|
3876
3880
|
{
|
|
3877
3881
|
sx: {
|
|
@@ -3882,7 +3886,7 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { contain
|
|
|
3882
3886
|
children: label
|
|
3883
3887
|
}
|
|
3884
3888
|
) }),
|
|
3885
|
-
/* @__PURE__ */
|
|
3889
|
+
/* @__PURE__ */ jsx133(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx133(
|
|
3886
3890
|
Typography5,
|
|
3887
3891
|
{
|
|
3888
3892
|
sx: {
|
|
@@ -3898,30 +3902,30 @@ var PermissionIcon = ({ status }) => {
|
|
|
3898
3902
|
switch (status) {
|
|
3899
3903
|
case "explicitly_allowed":
|
|
3900
3904
|
case "implicitly_allowed": {
|
|
3901
|
-
return /* @__PURE__ */
|
|
3905
|
+
return /* @__PURE__ */ jsx133(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
|
|
3902
3906
|
}
|
|
3903
3907
|
case "explicitly_denied": {
|
|
3904
|
-
return /* @__PURE__ */
|
|
3908
|
+
return /* @__PURE__ */ jsx133(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
|
|
3905
3909
|
}
|
|
3906
3910
|
case "implicitly_denied": {
|
|
3907
|
-
return /* @__PURE__ */
|
|
3911
|
+
return /* @__PURE__ */ jsx133(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
|
|
3908
3912
|
}
|
|
3909
3913
|
}
|
|
3910
3914
|
};
|
|
3911
3915
|
var IAMEventDetail = ({ event }) => {
|
|
3912
3916
|
const payloadString = event.attributes?.payload;
|
|
3913
3917
|
if (!payloadString) {
|
|
3914
|
-
return /* @__PURE__ */
|
|
3918
|
+
return /* @__PURE__ */ jsx133(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
|
|
3915
3919
|
}
|
|
3916
3920
|
const parsedIAM = parseIAMEvent(payloadString);
|
|
3917
3921
|
if (!parsedIAM) {
|
|
3918
|
-
return /* @__PURE__ */
|
|
3922
|
+
return /* @__PURE__ */ jsx133(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
|
|
3919
3923
|
}
|
|
3920
3924
|
return /* @__PURE__ */ jsxs124(Box10, { sx: { p: 2 }, children: [
|
|
3921
|
-
/* @__PURE__ */
|
|
3925
|
+
/* @__PURE__ */ jsx133(Box10, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx133(
|
|
3922
3926
|
Chip,
|
|
3923
3927
|
{
|
|
3924
|
-
icon: /* @__PURE__ */
|
|
3928
|
+
icon: /* @__PURE__ */ jsx133(PermissionIcon, { status: parsedIAM.permission }),
|
|
3925
3929
|
label: formatPermissionStatus(parsedIAM.permission),
|
|
3926
3930
|
size: "small",
|
|
3927
3931
|
sx: {
|
|
@@ -3931,12 +3935,12 @@ var IAMEventDetail = ({ event }) => {
|
|
|
3931
3935
|
variant: "outlined"
|
|
3932
3936
|
}
|
|
3933
3937
|
) }),
|
|
3934
|
-
/* @__PURE__ */
|
|
3935
|
-
/* @__PURE__ */
|
|
3936
|
-
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */
|
|
3938
|
+
/* @__PURE__ */ jsx133(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
|
|
3939
|
+
/* @__PURE__ */ jsx133(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
|
|
3940
|
+
parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx133(
|
|
3937
3941
|
DetailRow,
|
|
3938
3942
|
{
|
|
3939
|
-
content: /* @__PURE__ */
|
|
3943
|
+
content: /* @__PURE__ */ jsx133(Box10, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx133(
|
|
3940
3944
|
Typography5,
|
|
3941
3945
|
{
|
|
3942
3946
|
sx: {
|
|
@@ -3950,10 +3954,10 @@ var IAMEventDetail = ({ event }) => {
|
|
|
3950
3954
|
label: "Actions"
|
|
3951
3955
|
}
|
|
3952
3956
|
),
|
|
3953
|
-
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */
|
|
3957
|
+
parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx133(
|
|
3954
3958
|
DetailRow,
|
|
3955
3959
|
{
|
|
3956
|
-
content: /* @__PURE__ */
|
|
3960
|
+
content: /* @__PURE__ */ jsx133(Box10, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx133(
|
|
3957
3961
|
Typography5,
|
|
3958
3962
|
{
|
|
3959
3963
|
sx: {
|
|
@@ -3969,19 +3973,19 @@ var IAMEventDetail = ({ event }) => {
|
|
|
3969
3973
|
}
|
|
3970
3974
|
),
|
|
3971
3975
|
/* @__PURE__ */ jsxs124(Box10, { sx: { mt: 2 }, children: [
|
|
3972
|
-
/* @__PURE__ */
|
|
3976
|
+
/* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
|
|
3973
3977
|
/* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 2, children: [
|
|
3974
|
-
parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */
|
|
3975
|
-
/* @__PURE__ */
|
|
3976
|
-
/* @__PURE__ */
|
|
3978
|
+
parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
|
|
3979
|
+
/* @__PURE__ */ jsx133(Typography5, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
|
|
3980
|
+
/* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
|
|
3977
3981
|
] }) }),
|
|
3978
|
-
parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */
|
|
3979
|
-
/* @__PURE__ */
|
|
3980
|
-
/* @__PURE__ */
|
|
3982
|
+
parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
|
|
3983
|
+
/* @__PURE__ */ jsx133(Typography5, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
|
|
3984
|
+
/* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
|
|
3981
3985
|
] }) }),
|
|
3982
|
-
parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */
|
|
3983
|
-
/* @__PURE__ */
|
|
3984
|
-
/* @__PURE__ */
|
|
3986
|
+
parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
|
|
3987
|
+
/* @__PURE__ */ jsx133(Typography5, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
|
|
3988
|
+
/* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
|
|
3985
3989
|
] }) })
|
|
3986
3990
|
] })
|
|
3987
3991
|
] })
|
|
@@ -3992,7 +3996,7 @@ var IAMEventDetail = ({ event }) => {
|
|
|
3992
3996
|
import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
|
|
3993
3997
|
import { Box as Box11, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
|
|
3994
3998
|
import { useMemo as useMemo5, useState as useState6 } from "react";
|
|
3995
|
-
import { jsx as
|
|
3999
|
+
import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
3996
4000
|
var getChipColors = (status) => {
|
|
3997
4001
|
const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
|
|
3998
4002
|
return {
|
|
@@ -4022,10 +4026,10 @@ var IAMPermissionItem = ({ event }) => {
|
|
|
4022
4026
|
const { chipColors, parsedIAM } = parsedData;
|
|
4023
4027
|
return /* @__PURE__ */ jsxs125(Box11, { sx: { mb: 1 }, children: [
|
|
4024
4028
|
/* @__PURE__ */ jsxs125(Box11, { sx: { alignItems: "center", display: "flex" }, children: [
|
|
4025
|
-
/* @__PURE__ */
|
|
4029
|
+
/* @__PURE__ */ jsx134(IconButton2, { onClick: () => {
|
|
4026
4030
|
setIsOpen(!isOpen);
|
|
4027
|
-
}, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */
|
|
4028
|
-
/* @__PURE__ */
|
|
4031
|
+
}, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx134(KeyboardArrowRight, {}) }),
|
|
4032
|
+
/* @__PURE__ */ jsx134(
|
|
4029
4033
|
Chip2,
|
|
4030
4034
|
{
|
|
4031
4035
|
label: formatPermissionStatus(parsedIAM.permission),
|
|
@@ -4037,18 +4041,18 @@ var IAMPermissionItem = ({ event }) => {
|
|
|
4037
4041
|
}
|
|
4038
4042
|
)
|
|
4039
4043
|
] }),
|
|
4040
|
-
isOpen && /* @__PURE__ */
|
|
4041
|
-
/* @__PURE__ */
|
|
4042
|
-
/* @__PURE__ */
|
|
4044
|
+
isOpen && /* @__PURE__ */ jsx134(Box11, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box11, { children: [
|
|
4045
|
+
/* @__PURE__ */ jsx134(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
|
|
4046
|
+
/* @__PURE__ */ jsx134(Typography6, { variant: "body2", children: parsedIAM.principal })
|
|
4043
4047
|
] }) })
|
|
4044
4048
|
] });
|
|
4045
4049
|
};
|
|
4046
|
-
var IAMPermissionDetail = ({ events }) => /* @__PURE__ */
|
|
4050
|
+
var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx134(Box11, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx134(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
|
|
4047
4051
|
|
|
4048
4052
|
// src/components/event-details/event-detail.tsx
|
|
4049
|
-
import { Fragment as Fragment5, jsx as
|
|
4053
|
+
import { Fragment as Fragment5, jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
4050
4054
|
var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { container: true, spacing: 0, sx: { mb: 1 }, children: [
|
|
4051
|
-
/* @__PURE__ */
|
|
4055
|
+
/* @__PURE__ */ jsx135(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx135(
|
|
4052
4056
|
Typography7,
|
|
4053
4057
|
{
|
|
4054
4058
|
sx: {
|
|
@@ -4059,7 +4063,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
|
|
|
4059
4063
|
children: label
|
|
4060
4064
|
}
|
|
4061
4065
|
) }),
|
|
4062
|
-
/* @__PURE__ */
|
|
4066
|
+
/* @__PURE__ */ jsx135(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx135(
|
|
4063
4067
|
Typography7,
|
|
4064
4068
|
{
|
|
4065
4069
|
sx: {
|
|
@@ -4078,7 +4082,7 @@ var EventMessage = ({ event }) => {
|
|
|
4078
4082
|
const parsedMessage = useMemo6(() => parseEventMessage(event), [event]);
|
|
4079
4083
|
const isIAMPolicyEvent = useMemo6(
|
|
4080
4084
|
() => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
|
|
4081
|
-
[event
|
|
4085
|
+
[event]
|
|
4082
4086
|
);
|
|
4083
4087
|
useEffect5(() => {
|
|
4084
4088
|
const checkOverflow = () => {
|
|
@@ -4103,7 +4107,7 @@ var EventMessage = ({ event }) => {
|
|
|
4103
4107
|
);
|
|
4104
4108
|
return /* @__PURE__ */ jsxs126(Box12, { sx: { display: "flex", flexDirection: "column" }, children: [
|
|
4105
4109
|
/* @__PURE__ */ jsxs126(Box12, { sx: { alignItems: "flex-start", display: "flex" }, children: [
|
|
4106
|
-
Boolean(shouldShowToggle) && /* @__PURE__ */
|
|
4110
|
+
Boolean(shouldShowToggle) && /* @__PURE__ */ jsx135(
|
|
4107
4111
|
IconButton3,
|
|
4108
4112
|
{
|
|
4109
4113
|
onClick: () => {
|
|
@@ -4111,10 +4115,10 @@ var EventMessage = ({ event }) => {
|
|
|
4111
4115
|
},
|
|
4112
4116
|
size: "small",
|
|
4113
4117
|
sx: { mr: 1, mt: -0.5, p: 0 },
|
|
4114
|
-
children: isOpen ? /* @__PURE__ */
|
|
4118
|
+
children: isOpen ? /* @__PURE__ */ jsx135(KeyboardArrowDown2, {}) : /* @__PURE__ */ jsx135(KeyboardArrowRight2, {})
|
|
4115
4119
|
}
|
|
4116
4120
|
),
|
|
4117
|
-
/* @__PURE__ */
|
|
4121
|
+
/* @__PURE__ */ jsx135(
|
|
4118
4122
|
Typography7,
|
|
4119
4123
|
{
|
|
4120
4124
|
ref: textReference,
|
|
@@ -4132,9 +4136,9 @@ var EventMessage = ({ event }) => {
|
|
|
4132
4136
|
}
|
|
4133
4137
|
)
|
|
4134
4138
|
] }),
|
|
4135
|
-
isOpen && /* @__PURE__ */
|
|
4136
|
-
Boolean(parsedMessage.message) && /* @__PURE__ */
|
|
4137
|
-
Boolean(parsedMessage.details) && /* @__PURE__ */
|
|
4139
|
+
isOpen && /* @__PURE__ */ jsx135(Box12, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx135(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment5, { children: [
|
|
4140
|
+
Boolean(parsedMessage.message) && /* @__PURE__ */ jsx135(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
|
|
4141
|
+
Boolean(parsedMessage.details) && /* @__PURE__ */ jsx135(DetailRow2, { content: parsedMessage.details, label: "Details:" })
|
|
4138
4142
|
] }) })
|
|
4139
4143
|
] });
|
|
4140
4144
|
};
|
|
@@ -4164,7 +4168,7 @@ var EventDetail = ({
|
|
|
4164
4168
|
}) => {
|
|
4165
4169
|
if (type === "permission") {
|
|
4166
4170
|
return /* @__PURE__ */ jsxs126(Box12, { children: [
|
|
4167
|
-
/* @__PURE__ */
|
|
4171
|
+
/* @__PURE__ */ jsx135(
|
|
4168
4172
|
Box12,
|
|
4169
4173
|
{
|
|
4170
4174
|
sx: {
|
|
@@ -4172,7 +4176,7 @@ var EventDetail = ({
|
|
|
4172
4176
|
display: "flex",
|
|
4173
4177
|
mb: 1
|
|
4174
4178
|
},
|
|
4175
|
-
children: /* @__PURE__ */
|
|
4179
|
+
children: /* @__PURE__ */ jsx135(
|
|
4176
4180
|
Typography7,
|
|
4177
4181
|
{
|
|
4178
4182
|
sx: {
|
|
@@ -4187,7 +4191,7 @@ var EventDetail = ({
|
|
|
4187
4191
|
)
|
|
4188
4192
|
}
|
|
4189
4193
|
),
|
|
4190
|
-
/* @__PURE__ */
|
|
4194
|
+
/* @__PURE__ */ jsx135(IAMPermissionDetail, { events })
|
|
4191
4195
|
] });
|
|
4192
4196
|
}
|
|
4193
4197
|
const eventLevel = getEventLevelFromGroup(type);
|
|
@@ -4202,8 +4206,8 @@ var EventDetail = ({
|
|
|
4202
4206
|
mb: 1
|
|
4203
4207
|
},
|
|
4204
4208
|
children: [
|
|
4205
|
-
/* @__PURE__ */
|
|
4206
|
-
/* @__PURE__ */
|
|
4209
|
+
/* @__PURE__ */ jsx135(StatusIcon, { errorLevel: eventLevel }),
|
|
4210
|
+
/* @__PURE__ */ jsx135(
|
|
4207
4211
|
Typography7,
|
|
4208
4212
|
{
|
|
4209
4213
|
sx: {
|
|
@@ -4222,14 +4226,14 @@ var EventDetail = ({
|
|
|
4222
4226
|
]
|
|
4223
4227
|
}
|
|
4224
4228
|
),
|
|
4225
|
-
/* @__PURE__ */
|
|
4229
|
+
/* @__PURE__ */ jsx135(Box12, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx135(
|
|
4226
4230
|
Box12,
|
|
4227
4231
|
{
|
|
4228
4232
|
sx: {
|
|
4229
4233
|
maxWidth: "100%",
|
|
4230
4234
|
mb: 1
|
|
4231
4235
|
},
|
|
4232
|
-
children: /* @__PURE__ */
|
|
4236
|
+
children: /* @__PURE__ */ jsx135(EventMessage, { event })
|
|
4233
4237
|
},
|
|
4234
4238
|
`${event.span_id}-${event.event_id}`
|
|
4235
4239
|
)) })
|
|
@@ -4240,11 +4244,11 @@ var EventDetail = ({
|
|
|
4240
4244
|
import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
|
|
4241
4245
|
import { Box as Box13, Typography as Typography8 } from "@mui/material";
|
|
4242
4246
|
import { useState as useState8 } from "react";
|
|
4243
|
-
import { jsx as
|
|
4247
|
+
import { jsx as jsx136, jsxs as jsxs127 } from "react/jsx-runtime";
|
|
4244
4248
|
var ToggleSection = ({ children, headline, initialOpen = true }) => {
|
|
4245
4249
|
const [isOpen, setIsOpen] = useState8(initialOpen);
|
|
4246
4250
|
return /* @__PURE__ */ jsxs127(Box13, { sx: { mt: 4 }, children: [
|
|
4247
|
-
/* @__PURE__ */
|
|
4251
|
+
/* @__PURE__ */ jsx136(
|
|
4248
4252
|
Box13,
|
|
4249
4253
|
{
|
|
4250
4254
|
onClick: () => {
|
|
@@ -4264,24 +4268,24 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
|
|
|
4264
4268
|
gap: 1
|
|
4265
4269
|
},
|
|
4266
4270
|
children: [
|
|
4267
|
-
/* @__PURE__ */
|
|
4268
|
-
isOpen ? /* @__PURE__ */
|
|
4271
|
+
/* @__PURE__ */ jsx136(Typography8, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
|
|
4272
|
+
isOpen ? /* @__PURE__ */ jsx136(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx136(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
|
|
4269
4273
|
]
|
|
4270
4274
|
}
|
|
4271
4275
|
)
|
|
4272
4276
|
}
|
|
4273
4277
|
),
|
|
4274
|
-
isOpen && /* @__PURE__ */
|
|
4278
|
+
isOpen && /* @__PURE__ */ jsx136(Box13, { children })
|
|
4275
4279
|
] });
|
|
4276
4280
|
};
|
|
4277
4281
|
|
|
4278
4282
|
// src/components/event-details/event-section.tsx
|
|
4279
|
-
import { jsx as
|
|
4283
|
+
import { jsx as jsx137, jsxs as jsxs128 } from "react/jsx-runtime";
|
|
4280
4284
|
var EventSection = ({
|
|
4281
4285
|
eventGroups,
|
|
4282
4286
|
headline
|
|
4283
|
-
}) => /* @__PURE__ */
|
|
4284
|
-
eventGroups.errors && /* @__PURE__ */
|
|
4287
|
+
}) => /* @__PURE__ */ jsx137(ToggleSection, { headline, children: /* @__PURE__ */ jsxs128(Box14, { children: [
|
|
4288
|
+
eventGroups.errors && /* @__PURE__ */ jsx137(
|
|
4285
4289
|
EventDetail,
|
|
4286
4290
|
{
|
|
4287
4291
|
displayText: "Error",
|
|
@@ -4289,7 +4293,7 @@ var EventSection = ({
|
|
|
4289
4293
|
type: "error"
|
|
4290
4294
|
}
|
|
4291
4295
|
),
|
|
4292
|
-
eventGroups.warnings && /* @__PURE__ */
|
|
4296
|
+
eventGroups.warnings && /* @__PURE__ */ jsx137(
|
|
4293
4297
|
EventDetail,
|
|
4294
4298
|
{
|
|
4295
4299
|
displayText: "Warning",
|
|
@@ -4297,7 +4301,7 @@ var EventSection = ({
|
|
|
4297
4301
|
type: "warning"
|
|
4298
4302
|
}
|
|
4299
4303
|
),
|
|
4300
|
-
eventGroups.permissions && /* @__PURE__ */
|
|
4304
|
+
eventGroups.permissions && /* @__PURE__ */ jsx137(
|
|
4301
4305
|
EventDetail,
|
|
4302
4306
|
{
|
|
4303
4307
|
displayText: "IAM Permission",
|
|
@@ -4305,7 +4309,7 @@ var EventSection = ({
|
|
|
4305
4309
|
type: "permission"
|
|
4306
4310
|
}
|
|
4307
4311
|
),
|
|
4308
|
-
eventGroups.info && /* @__PURE__ */
|
|
4312
|
+
eventGroups.info && /* @__PURE__ */ jsx137(
|
|
4309
4313
|
EventDetail,
|
|
4310
4314
|
{
|
|
4311
4315
|
displayText: "Info",
|
|
@@ -4316,55 +4320,55 @@ var EventSection = ({
|
|
|
4316
4320
|
] }) });
|
|
4317
4321
|
|
|
4318
4322
|
// src/components/event-details/event-details.tsx
|
|
4319
|
-
import { Fragment as Fragment6, jsx as
|
|
4323
|
+
import { Fragment as Fragment6, jsx as jsx138, jsxs as jsxs129 } from "react/jsx-runtime";
|
|
4320
4324
|
var EventDetails = ({ onClose, selectedEvent }) => {
|
|
4321
4325
|
const attributes = useMemo7(() => {
|
|
4322
4326
|
const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
|
|
4323
4327
|
return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
|
|
4324
4328
|
}, [selectedEvent?.attributes]);
|
|
4325
4329
|
if (!selectedEvent) {
|
|
4326
|
-
return /* @__PURE__ */
|
|
4330
|
+
return /* @__PURE__ */ jsx138(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
|
|
4327
4331
|
}
|
|
4328
4332
|
return /* @__PURE__ */ jsxs129(Box15, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
|
|
4329
|
-
/* @__PURE__ */
|
|
4330
|
-
/* @__PURE__ */
|
|
4331
|
-
/* @__PURE__ */
|
|
4333
|
+
/* @__PURE__ */ jsx138(EventDetailsHeader, { event: selectedEvent, onClose }),
|
|
4334
|
+
/* @__PURE__ */ jsx138(Box15, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
|
|
4335
|
+
/* @__PURE__ */ jsx138(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
|
|
4332
4336
|
/* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4333
|
-
/* @__PURE__ */
|
|
4334
|
-
/* @__PURE__ */
|
|
4337
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
|
|
4338
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.span_id })
|
|
4335
4339
|
] }),
|
|
4336
4340
|
/* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4337
|
-
/* @__PURE__ */
|
|
4338
|
-
/* @__PURE__ */
|
|
4341
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
|
|
4342
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.trace_id })
|
|
4339
4343
|
] }),
|
|
4340
4344
|
/* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4341
|
-
/* @__PURE__ */
|
|
4342
|
-
/* @__PURE__ */
|
|
4345
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
|
|
4346
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.operation_name })
|
|
4343
4347
|
] })
|
|
4344
4348
|
] }) }),
|
|
4345
|
-
/* @__PURE__ */
|
|
4346
|
-
/* @__PURE__ */
|
|
4349
|
+
/* @__PURE__ */ jsx138(Divider2, {}),
|
|
4350
|
+
/* @__PURE__ */ jsx138(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
|
|
4347
4351
|
/* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4348
|
-
/* @__PURE__ */
|
|
4349
|
-
/* @__PURE__ */
|
|
4352
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
|
|
4353
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.service_name })
|
|
4350
4354
|
] }),
|
|
4351
4355
|
/* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4352
|
-
/* @__PURE__ */
|
|
4353
|
-
/* @__PURE__ */
|
|
4356
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
|
|
4357
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.resource_name })
|
|
4354
4358
|
] }),
|
|
4355
4359
|
Boolean(selectedEvent.region) && /* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4356
|
-
/* @__PURE__ */
|
|
4357
|
-
/* @__PURE__ */
|
|
4360
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
|
|
4361
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.region })
|
|
4358
4362
|
] })
|
|
4359
4363
|
] }) }),
|
|
4360
|
-
/* @__PURE__ */
|
|
4361
|
-
/* @__PURE__ */
|
|
4364
|
+
/* @__PURE__ */ jsx138(Divider2, {}),
|
|
4365
|
+
/* @__PURE__ */ jsx138(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
|
|
4362
4366
|
/* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4363
|
-
/* @__PURE__ */
|
|
4364
|
-
/* @__PURE__ */
|
|
4367
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
|
|
4368
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
|
|
4365
4369
|
] }),
|
|
4366
4370
|
Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4367
|
-
/* @__PURE__ */
|
|
4371
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
|
|
4368
4372
|
/* @__PURE__ */ jsxs129(Typography9, { variant: "body2", children: [
|
|
4369
4373
|
((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
|
|
4370
4374
|
" ",
|
|
@@ -4372,9 +4376,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
4372
4376
|
] })
|
|
4373
4377
|
] })
|
|
4374
4378
|
] }) }),
|
|
4375
|
-
/* @__PURE__ */
|
|
4376
|
-
/* @__PURE__ */
|
|
4377
|
-
/* @__PURE__ */
|
|
4379
|
+
/* @__PURE__ */ jsx138(Divider2, {}),
|
|
4380
|
+
/* @__PURE__ */ jsx138(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs129(Stack2, { direction: "row", spacing: 1, children: [
|
|
4381
|
+
/* @__PURE__ */ jsx138(
|
|
4378
4382
|
Chip3,
|
|
4379
4383
|
{
|
|
4380
4384
|
color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
|
|
@@ -4382,11 +4386,11 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
4382
4386
|
size: "small"
|
|
4383
4387
|
}
|
|
4384
4388
|
),
|
|
4385
|
-
Boolean(selectedEvent.status_message) && /* @__PURE__ */
|
|
4389
|
+
Boolean(selectedEvent.status_message) && /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.status_message })
|
|
4386
4390
|
] }) }),
|
|
4387
4391
|
selectedEvent.events.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
|
|
4388
|
-
/* @__PURE__ */
|
|
4389
|
-
/* @__PURE__ */
|
|
4392
|
+
/* @__PURE__ */ jsx138(Divider2, {}),
|
|
4393
|
+
/* @__PURE__ */ jsx138(
|
|
4390
4394
|
EventSection,
|
|
4391
4395
|
{
|
|
4392
4396
|
eventGroups: getEventGroupsByType(selectedEvent.events),
|
|
@@ -4395,10 +4399,10 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
4395
4399
|
)
|
|
4396
4400
|
] }),
|
|
4397
4401
|
attributes.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
|
|
4398
|
-
/* @__PURE__ */
|
|
4399
|
-
/* @__PURE__ */
|
|
4400
|
-
/* @__PURE__ */
|
|
4401
|
-
/* @__PURE__ */
|
|
4402
|
+
/* @__PURE__ */ jsx138(Divider2, {}),
|
|
4403
|
+
/* @__PURE__ */ jsx138(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx138(Stack2, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs129(Box15, { children: [
|
|
4404
|
+
/* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
|
|
4405
|
+
/* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: renderKeyValue(key, value) })
|
|
4402
4406
|
] }, key)) }) })
|
|
4403
4407
|
] })
|
|
4404
4408
|
] }) })
|
|
@@ -4406,12 +4410,12 @@ var EventDetails = ({ onClose, selectedEvent }) => {
|
|
|
4406
4410
|
};
|
|
4407
4411
|
function renderKeyValue(key, value) {
|
|
4408
4412
|
if (typeof value === "string" && (key === "localstack.aws.service.request" || key === "localstack.aws.service.response" || key === "localstack.aws.service.exception")) {
|
|
4409
|
-
return /* @__PURE__ */
|
|
4413
|
+
return /* @__PURE__ */ jsx138(Box15, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx138("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
|
|
4410
4414
|
}
|
|
4411
4415
|
if (typeof value === "boolean") {
|
|
4412
|
-
return /* @__PURE__ */
|
|
4416
|
+
return /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: value ? "yes" : "no" });
|
|
4413
4417
|
}
|
|
4414
|
-
return /* @__PURE__ */
|
|
4418
|
+
return /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: value });
|
|
4415
4419
|
}
|
|
4416
4420
|
|
|
4417
4421
|
// src/components/trace-graph/trace-graph.tsx
|
|
@@ -4424,24 +4428,24 @@ import { useCallback as useCallback7, useEffect as useEffect6, useState as useSt
|
|
|
4424
4428
|
import { Box as Box17, Stack as Stack3, Typography as Typography10 } from "@mui/material";
|
|
4425
4429
|
import "@xyflow/react/dist/style.css";
|
|
4426
4430
|
import { Handle, Position } from "@xyflow/react";
|
|
4427
|
-
import { memo, useCallback as useCallback6 } from "react";
|
|
4431
|
+
import { memo as memo2, useCallback as useCallback6 } from "react";
|
|
4428
4432
|
|
|
4429
4433
|
// src/components/trace-graph/problem-indicator.tsx
|
|
4430
4434
|
import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
|
|
4431
4435
|
import { Box as Box16, Tooltip as Tooltip4 } from "@mui/material";
|
|
4432
4436
|
import { useMemo as useMemo8 } from "react";
|
|
4433
|
-
import { jsx as
|
|
4437
|
+
import { jsx as jsx139 } from "react/jsx-runtime";
|
|
4434
4438
|
var ProblemIndicator = ({ error }) => {
|
|
4435
4439
|
const icon = useMemo8(() => {
|
|
4436
4440
|
switch (error.level) {
|
|
4437
4441
|
case "error": {
|
|
4438
|
-
return /* @__PURE__ */
|
|
4442
|
+
return /* @__PURE__ */ jsx139(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
|
|
4439
4443
|
}
|
|
4440
4444
|
case "warning": {
|
|
4441
|
-
return /* @__PURE__ */
|
|
4445
|
+
return /* @__PURE__ */ jsx139(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
|
|
4442
4446
|
}
|
|
4443
4447
|
default: {
|
|
4444
|
-
return /* @__PURE__ */
|
|
4448
|
+
return /* @__PURE__ */ jsx139(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
|
|
4445
4449
|
}
|
|
4446
4450
|
}
|
|
4447
4451
|
}, [error.level]);
|
|
@@ -4458,7 +4462,7 @@ var ProblemIndicator = ({ error }) => {
|
|
|
4458
4462
|
}
|
|
4459
4463
|
}
|
|
4460
4464
|
}, [error.level]);
|
|
4461
|
-
return /* @__PURE__ */
|
|
4465
|
+
return /* @__PURE__ */ jsx139(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx139(
|
|
4462
4466
|
Box16,
|
|
4463
4467
|
{
|
|
4464
4468
|
sx: {
|
|
@@ -4478,13 +4482,13 @@ var ProblemIndicator = ({ error }) => {
|
|
|
4478
4482
|
};
|
|
4479
4483
|
|
|
4480
4484
|
// src/components/trace-graph/service-node.tsx
|
|
4481
|
-
import { jsx as
|
|
4485
|
+
import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
|
|
4482
4486
|
var handleStyle = {
|
|
4483
4487
|
backgroundColor: "white",
|
|
4484
4488
|
borderColor: "lightgray",
|
|
4485
4489
|
opacity: 0
|
|
4486
4490
|
};
|
|
4487
|
-
var ServiceNode =
|
|
4491
|
+
var ServiceNode = memo2(function ServiceNode2({ data, selected }) {
|
|
4488
4492
|
const handleClick = useCallback6(() => {
|
|
4489
4493
|
data.onEventSelect(data.event);
|
|
4490
4494
|
}, [data]);
|
|
@@ -4521,9 +4525,9 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
|
|
|
4521
4525
|
},
|
|
4522
4526
|
tabIndex: 0,
|
|
4523
4527
|
children: [
|
|
4524
|
-
/* @__PURE__ */
|
|
4525
|
-
/* @__PURE__ */
|
|
4526
|
-
/* @__PURE__ */
|
|
4528
|
+
/* @__PURE__ */ jsx140(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
|
|
4529
|
+
/* @__PURE__ */ jsx140(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
|
|
4530
|
+
/* @__PURE__ */ jsx140(
|
|
4527
4531
|
ServiceCell,
|
|
4528
4532
|
{
|
|
4529
4533
|
borderColor: selected ? "text.primary" : void 0,
|
|
@@ -4548,7 +4552,7 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
|
|
|
4548
4552
|
mt: 0.5
|
|
4549
4553
|
},
|
|
4550
4554
|
children: [
|
|
4551
|
-
hasErrors && /* @__PURE__ */
|
|
4555
|
+
hasErrors && /* @__PURE__ */ jsx140(
|
|
4552
4556
|
Stack3,
|
|
4553
4557
|
{
|
|
4554
4558
|
direction: "row",
|
|
@@ -4557,10 +4561,10 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
|
|
|
4557
4561
|
flexWrap: "wrap",
|
|
4558
4562
|
gap: "2px"
|
|
4559
4563
|
},
|
|
4560
|
-
children: data.event.errors?.map((error) => /* @__PURE__ */
|
|
4564
|
+
children: data.event.errors?.map((error) => /* @__PURE__ */ jsx140(ProblemIndicator, { error }, error.span_id))
|
|
4561
4565
|
}
|
|
4562
4566
|
),
|
|
4563
|
-
/* @__PURE__ */
|
|
4567
|
+
/* @__PURE__ */ jsx140(
|
|
4564
4568
|
Typography10,
|
|
4565
4569
|
{
|
|
4566
4570
|
sx: {
|
|
@@ -4677,7 +4681,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
|
|
|
4677
4681
|
import { Add, FitScreen, Remove } from "@mui/icons-material";
|
|
4678
4682
|
import { Box as Box18, IconButton as IconButton4 } from "@mui/material";
|
|
4679
4683
|
import { useReactFlow, useStore } from "@xyflow/react";
|
|
4680
|
-
import { memo as
|
|
4684
|
+
import { memo as memo3 } from "react";
|
|
4681
4685
|
|
|
4682
4686
|
// node_modules/zustand/esm/shallow.mjs
|
|
4683
4687
|
function shallow$1(objA, objB) {
|
|
@@ -4718,13 +4722,13 @@ function shallow$1(objA, objB) {
|
|
|
4718
4722
|
}
|
|
4719
4723
|
|
|
4720
4724
|
// src/components/trace-graph/xyflow/controls.tsx
|
|
4721
|
-
import { jsx as
|
|
4725
|
+
import { jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
|
|
4722
4726
|
var selector = (s) => ({
|
|
4723
4727
|
isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
|
|
4724
4728
|
maxZoomReached: s.transform[2] >= s.maxZoom,
|
|
4725
4729
|
minZoomReached: s.transform[2] <= s.minZoom
|
|
4726
4730
|
});
|
|
4727
|
-
var Controls =
|
|
4731
|
+
var Controls = memo3(() => {
|
|
4728
4732
|
const { maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
|
|
4729
4733
|
const { fitView, zoomIn, zoomOut } = useReactFlow();
|
|
4730
4734
|
const onZoomInHandler = () => {
|
|
@@ -4750,33 +4754,33 @@ var Controls = memo2(() => {
|
|
|
4750
4754
|
zIndex: 5
|
|
4751
4755
|
},
|
|
4752
4756
|
children: [
|
|
4753
|
-
/* @__PURE__ */
|
|
4757
|
+
/* @__PURE__ */ jsx141(
|
|
4754
4758
|
IconButton4,
|
|
4755
4759
|
{
|
|
4756
4760
|
className: "react-flow__controls-zoomin",
|
|
4757
4761
|
disabled: maxZoomReached,
|
|
4758
4762
|
onClick: onZoomInHandler,
|
|
4759
4763
|
size: "small",
|
|
4760
|
-
children: /* @__PURE__ */
|
|
4764
|
+
children: /* @__PURE__ */ jsx141(Add, {})
|
|
4761
4765
|
}
|
|
4762
4766
|
),
|
|
4763
|
-
/* @__PURE__ */
|
|
4767
|
+
/* @__PURE__ */ jsx141(
|
|
4764
4768
|
IconButton4,
|
|
4765
4769
|
{
|
|
4766
4770
|
className: "react-flow__controls-zoomout",
|
|
4767
4771
|
disabled: minZoomReached,
|
|
4768
4772
|
onClick: onZoomOutHandler,
|
|
4769
4773
|
size: "small",
|
|
4770
|
-
children: /* @__PURE__ */
|
|
4774
|
+
children: /* @__PURE__ */ jsx141(Remove, {})
|
|
4771
4775
|
}
|
|
4772
4776
|
),
|
|
4773
|
-
/* @__PURE__ */
|
|
4777
|
+
/* @__PURE__ */ jsx141(
|
|
4774
4778
|
IconButton4,
|
|
4775
4779
|
{
|
|
4776
4780
|
className: "react-flow__controls-fitview",
|
|
4777
4781
|
onClick: onFitViewHandler,
|
|
4778
4782
|
size: "small",
|
|
4779
|
-
children: /* @__PURE__ */
|
|
4783
|
+
children: /* @__PURE__ */ jsx141(FitScreen, {})
|
|
4780
4784
|
}
|
|
4781
4785
|
)
|
|
4782
4786
|
]
|
|
@@ -4785,7 +4789,7 @@ var Controls = memo2(() => {
|
|
|
4785
4789
|
});
|
|
4786
4790
|
|
|
4787
4791
|
// src/components/trace-graph/trace-graph.tsx
|
|
4788
|
-
import { Fragment as Fragment7, jsx as
|
|
4792
|
+
import { Fragment as Fragment7, jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
|
|
4789
4793
|
var nodeTypes = {
|
|
4790
4794
|
service: ServiceNode
|
|
4791
4795
|
};
|
|
@@ -4878,7 +4882,7 @@ var TraceGraph = ({
|
|
|
4878
4882
|
spans.error && /* @__PURE__ */ jsxs132(
|
|
4879
4883
|
Alert3,
|
|
4880
4884
|
{
|
|
4881
|
-
action: /* @__PURE__ */
|
|
4885
|
+
action: /* @__PURE__ */ jsx142(Button4, { onClick: () => {
|
|
4882
4886
|
onRefresh();
|
|
4883
4887
|
}, children: "Retry" }),
|
|
4884
4888
|
severity: "error",
|
|
@@ -4903,8 +4907,8 @@ var TraceGraph = ({
|
|
|
4903
4907
|
onNodeClick,
|
|
4904
4908
|
selectNodesOnDrag: false,
|
|
4905
4909
|
children: [
|
|
4906
|
-
/* @__PURE__ */
|
|
4907
|
-
/* @__PURE__ */
|
|
4910
|
+
/* @__PURE__ */ jsx142(Controls, {}),
|
|
4911
|
+
/* @__PURE__ */ jsx142(Background, {})
|
|
4908
4912
|
]
|
|
4909
4913
|
}
|
|
4910
4914
|
)
|
|
@@ -4912,7 +4916,7 @@ var TraceGraph = ({
|
|
|
4912
4916
|
};
|
|
4913
4917
|
|
|
4914
4918
|
// src/pages/trace-graph-page.tsx
|
|
4915
|
-
import { Fragment as Fragment8, jsx as
|
|
4919
|
+
import { Fragment as Fragment8, jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
|
|
4916
4920
|
var HEADER_HEIGHT = 56;
|
|
4917
4921
|
var DRAWER_WIDTH = "35%";
|
|
4918
4922
|
var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
|
|
@@ -4975,12 +4979,12 @@ var TraceGraphView = ({
|
|
|
4975
4979
|
},
|
|
4976
4980
|
children: [
|
|
4977
4981
|
/* @__PURE__ */ jsxs133(Box19, { sx: { display: "flex", width: "100%" }, children: [
|
|
4978
|
-
/* @__PURE__ */
|
|
4982
|
+
/* @__PURE__ */ jsx143(Button5, { onClick: () => {
|
|
4979
4983
|
navigateToSpansList();
|
|
4980
|
-
}, startIcon: /* @__PURE__ */
|
|
4981
|
-
/* @__PURE__ */
|
|
4984
|
+
}, startIcon: /* @__PURE__ */ jsx143(ArrowBack, {}), children: "Go back" }),
|
|
4985
|
+
/* @__PURE__ */ jsx143(Box19, { sx: { flexGrow: 1 } })
|
|
4982
4986
|
] }),
|
|
4983
|
-
/* @__PURE__ */
|
|
4987
|
+
/* @__PURE__ */ jsx143(
|
|
4984
4988
|
Paper2,
|
|
4985
4989
|
{
|
|
4986
4990
|
sx: {
|
|
@@ -4990,7 +4994,7 @@ var TraceGraphView = ({
|
|
|
4990
4994
|
position: "relative",
|
|
4991
4995
|
width: "100%"
|
|
4992
4996
|
},
|
|
4993
|
-
children: shouldShowStatusMessage ? /* @__PURE__ */
|
|
4997
|
+
children: shouldShowStatusMessage ? /* @__PURE__ */ jsx143(
|
|
4994
4998
|
StatusMessage,
|
|
4995
4999
|
{
|
|
4996
5000
|
error: statusError,
|
|
@@ -4998,14 +5002,14 @@ var TraceGraphView = ({
|
|
|
4998
5002
|
status
|
|
4999
5003
|
}
|
|
5000
5004
|
) : /* @__PURE__ */ jsxs133(Fragment8, { children: [
|
|
5001
|
-
/* @__PURE__ */
|
|
5005
|
+
/* @__PURE__ */ jsx143(Main, { open, children: /* @__PURE__ */ jsx143(
|
|
5002
5006
|
Box19,
|
|
5003
5007
|
{
|
|
5004
5008
|
sx: {
|
|
5005
5009
|
height: "100%",
|
|
5006
5010
|
overflow: "auto"
|
|
5007
5011
|
},
|
|
5008
|
-
children: traceId !== void 0 && /* @__PURE__ */
|
|
5012
|
+
children: traceId !== void 0 && /* @__PURE__ */ jsx143(ReactFlowProvider, { children: /* @__PURE__ */ jsx143(
|
|
5009
5013
|
TraceGraph,
|
|
5010
5014
|
{
|
|
5011
5015
|
initialFocusEventId: spanId,
|
|
@@ -5023,7 +5027,7 @@ var TraceGraphView = ({
|
|
|
5023
5027
|
) })
|
|
5024
5028
|
}
|
|
5025
5029
|
) }),
|
|
5026
|
-
/* @__PURE__ */
|
|
5030
|
+
/* @__PURE__ */ jsx143(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx143(EventDetails, { onClose: handleClose, selectedEvent }) })
|
|
5027
5031
|
] })
|
|
5028
5032
|
}
|
|
5029
5033
|
)
|
|
@@ -5096,7 +5100,7 @@ var TraceGraphPage = () => {
|
|
|
5096
5100
|
const url = resolveLink({ to: "spans-list" });
|
|
5097
5101
|
navigate(url);
|
|
5098
5102
|
}, [navigate, resolveLink]);
|
|
5099
|
-
return /* @__PURE__ */
|
|
5103
|
+
return /* @__PURE__ */ jsx143(
|
|
5100
5104
|
TraceGraphView,
|
|
5101
5105
|
{
|
|
5102
5106
|
fetchError,
|