@localstack/appinspector-ui 1.0.0-dev-dc58bc41 → 1.0.0-dev-f55daae2

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.
Files changed (5) hide show
  1. package/dist/index.cjs +545 -179
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +526 -160
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -36,8 +36,8 @@ __export(index_exports, {
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
38
  // src/pages/spans-list-page.tsx
39
- var import_material6 = require("@mui/material");
40
- var import_react6 = require("react");
39
+ var import_material7 = require("@mui/material");
40
+ var import_react7 = require("react");
41
41
  var import_react_router_dom = require("react-router-dom");
42
42
 
43
43
  // src/api/use-api.tsx
@@ -145,7 +145,7 @@ function unixNanoToDate(unixNanoString) {
145
145
 
146
146
  // src/components/cells/responsive-timestamp-cell.tsx
147
147
  var import_jsx_runtime2 = require("react/jsx-runtime");
148
- var ResponsiveTimestampCell = ({ value }) => {
148
+ var ResponsiveTimestampCell = ({ locale, value }) => {
149
149
  const [columnWidth, setColumnWidth] = (0, import_react2.useState)(0);
150
150
  const cellReference = (0, import_react2.useRef)(null);
151
151
  (0, import_react2.useEffect)(() => {
@@ -171,35 +171,41 @@ var ResponsiveTimestampCell = ({ value }) => {
171
171
  const date = unixNanoToDate(value);
172
172
  if (!date) return;
173
173
  if (columnWidth < 100) {
174
- return date.toLocaleTimeString(void 0, {
174
+ const formatter = new Intl.DateTimeFormat(locale, {
175
175
  hour: "2-digit",
176
176
  hour12: false,
177
177
  minute: "2-digit",
178
178
  second: "2-digit"
179
179
  });
180
+ return formatter.format(date);
180
181
  } else if (columnWidth < 160) {
181
- const timeString = date.toLocaleTimeString(void 0, {
182
+ const formatter = new Intl.DateTimeFormat(locale, {
182
183
  hour: "2-digit",
183
184
  hour12: false,
184
185
  minute: "2-digit",
185
186
  second: "2-digit"
186
187
  });
188
+ const timeString = formatter.format(date);
187
189
  const ms = date.getMilliseconds().toString().padStart(3, "0");
188
190
  return `${timeString}:${ms}`;
189
191
  } else {
190
- const day = date.getDate().toString().padStart(2, "0");
191
- const month = (date.getMonth() + 1).toString().padStart(2, "0");
192
- const year = date.getFullYear().toString();
193
- const timeString = date.toLocaleTimeString(void 0, {
192
+ const dateFormatter = new Intl.DateTimeFormat(locale, {
193
+ day: "2-digit",
194
+ month: "2-digit",
195
+ year: "numeric"
196
+ });
197
+ const timeFormatter = new Intl.DateTimeFormat(locale, {
194
198
  hour: "2-digit",
195
199
  hour12: false,
196
200
  minute: "2-digit",
197
201
  second: "2-digit"
198
202
  });
203
+ const dateString = dateFormatter.format(date);
204
+ const timeString = timeFormatter.format(date);
199
205
  const ms = date.getMilliseconds().toString().padStart(3, "0");
200
- return `${day}.${month}.${year} - ${timeString}:${ms}`;
206
+ return `${dateString} - ${timeString}:${ms}`;
201
207
  }
202
- }, [value, columnWidth]);
208
+ }, [value, columnWidth, locale]);
203
209
  if (!formattedTime) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "N/A" });
204
210
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: cellReference, style: { width: "100%" }, children: formattedTime });
205
211
  };
@@ -2876,24 +2882,298 @@ var SpansList = (props) => {
2876
2882
  ] });
2877
2883
  };
2878
2884
 
2879
- // src/context.tsx
2880
- var import_react4 = require("react");
2881
- var import_react5 = require("react");
2885
+ // src/components/status-message/status-message.tsx
2886
+ var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"), 1);
2887
+ var import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"), 1);
2888
+ var import_material6 = require("@mui/material");
2889
+
2890
+ // src/api/errors.ts
2891
+ var AppInspectorNotFoundError = class extends Error {
2892
+ constructor(message, cause) {
2893
+ super(message);
2894
+ this.name = "AppInspectorNotFoundError";
2895
+ this.cause = cause;
2896
+ }
2897
+ };
2898
+ var ConnectionError = class extends Error {
2899
+ constructor(message, cause) {
2900
+ super(message);
2901
+ this.name = "ConnectionError";
2902
+ this.cause = cause;
2903
+ }
2904
+ };
2882
2905
 
2883
2906
  // src/config.ts
2884
2907
  var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
2885
2908
  var API_VERSION = "v1";
2886
2909
  var API_ENDPOINTS = {
2910
+ ROOT: "/",
2887
2911
  SPANS: "/traces/*/spans",
2912
+ STATUS: "/status",
2888
2913
  TRACES: "/traces"
2889
2914
  };
2890
- var getApiEndpoint = (endpoint) => {
2915
+ var getApiV1Endpoint = (endpoint) => {
2891
2916
  return `/${API_VERSION}${endpoint}`;
2892
2917
  };
2918
+ var getApiEndpoint = (endpoint) => {
2919
+ if (endpoint === API_ENDPOINTS.ROOT || endpoint === API_ENDPOINTS.STATUS) {
2920
+ return endpoint;
2921
+ }
2922
+ return getApiV1Endpoint(endpoint);
2923
+ };
2893
2924
  var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
2894
2925
  return `${localstackEndpoint}${APPINSPECTOR_API_PREFIX}${getApiEndpoint(endpoint)}`;
2895
2926
  };
2896
2927
 
2928
+ // src/components/status-message/status-message.tsx
2929
+ var import_jsx_runtime126 = require("react/jsx-runtime");
2930
+ var StatusMessage = ({
2931
+ error,
2932
+ onRetry,
2933
+ status
2934
+ }) => {
2935
+ if (error instanceof AppInspectorNotFoundError) {
2936
+ return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
2937
+ import_material6.Box,
2938
+ {
2939
+ sx: {
2940
+ alignItems: "center",
2941
+ display: "flex",
2942
+ flexDirection: "column",
2943
+ gap: 2,
2944
+ justifyContent: "center",
2945
+ p: 4
2946
+ },
2947
+ children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
2948
+ import_material6.Alert,
2949
+ {
2950
+ icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
2951
+ severity: "error",
2952
+ sx: { maxWidth: 600, width: "100%" },
2953
+ children: [
2954
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
2955
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
2956
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To enable App Inspector:" }) }),
2957
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
2958
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
2959
+ import_material6.Box,
2960
+ {
2961
+ component: "pre",
2962
+ sx: {
2963
+ backgroundColor: "rgba(0, 0, 0, 0.05)",
2964
+ borderRadius: 1,
2965
+ fontSize: "0.875rem",
2966
+ p: 1
2967
+ },
2968
+ children: "APPINSPECTOR=1"
2969
+ }
2970
+ ),
2971
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Typography, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
2972
+ "Runtime changes can be made via endpoint",
2973
+ " ",
2974
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("code", { children: [
2975
+ APPINSPECTOR_API_PREFIX,
2976
+ "/status"
2977
+ ] }),
2978
+ ". For persistent default state across restarts, adjust the",
2979
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("code", { children: "APPINSPECTOR" }),
2980
+ " ",
2981
+ "environment variable."
2982
+ ] }),
2983
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "For more information:" }) }),
2984
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
2985
+ import_material6.Link,
2986
+ {
2987
+ href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
2988
+ rel: "noopener noreferrer",
2989
+ target: "_blank",
2990
+ children: "App Inspector Documentation"
2991
+ }
2992
+ ),
2993
+ onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
2994
+ import_material6.Button,
2995
+ {
2996
+ "aria-label": "Check App Inspector status again",
2997
+ onClick: onRetry,
2998
+ variant: "outlined",
2999
+ children: "Check Again"
3000
+ }
3001
+ ) })
3002
+ ]
3003
+ }
3004
+ )
3005
+ }
3006
+ );
3007
+ }
3008
+ if (error instanceof ConnectionError) {
3009
+ return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3010
+ import_material6.Box,
3011
+ {
3012
+ sx: {
3013
+ alignItems: "center",
3014
+ display: "flex",
3015
+ flexDirection: "column",
3016
+ gap: 2,
3017
+ justifyContent: "center",
3018
+ p: 4
3019
+ },
3020
+ children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
3021
+ import_material6.Alert,
3022
+ {
3023
+ icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
3024
+ severity: "error",
3025
+ sx: { maxWidth: 600, width: "100%" },
3026
+ children: [
3027
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
3028
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
3029
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To start LocalStack:" }) }),
3030
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3031
+ import_material6.Box,
3032
+ {
3033
+ component: "pre",
3034
+ sx: {
3035
+ backgroundColor: "rgba(0, 0, 0, 0.05)",
3036
+ borderRadius: 1,
3037
+ fontSize: "0.875rem",
3038
+ p: 1
3039
+ },
3040
+ children: "localstack start"
3041
+ }
3042
+ ),
3043
+ onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3044
+ import_material6.Button,
3045
+ {
3046
+ "aria-label": "Retry connection to LocalStack",
3047
+ onClick: onRetry,
3048
+ variant: "outlined",
3049
+ children: "Retry Connection"
3050
+ }
3051
+ ) })
3052
+ ]
3053
+ }
3054
+ )
3055
+ }
3056
+ );
3057
+ }
3058
+ if (status?.status === "DISABLED") {
3059
+ return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3060
+ import_material6.Box,
3061
+ {
3062
+ sx: {
3063
+ alignItems: "center",
3064
+ display: "flex",
3065
+ flexDirection: "column",
3066
+ gap: 2,
3067
+ justifyContent: "center",
3068
+ p: 4
3069
+ },
3070
+ children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
3071
+ import_material6.Alert,
3072
+ {
3073
+ icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_InfoOutlined.default, { fontSize: "large" }),
3074
+ severity: "warning",
3075
+ sx: { maxWidth: 600, width: "100%" },
3076
+ children: [
3077
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
3078
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
3079
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To enable App Inspector at runtime:" }) }),
3080
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3081
+ import_material6.Box,
3082
+ {
3083
+ component: "pre",
3084
+ sx: {
3085
+ backgroundColor: "rgba(0, 0, 0, 0.05)",
3086
+ borderRadius: 1,
3087
+ fontSize: "0.875rem",
3088
+ overflowX: "auto",
3089
+ p: 1
3090
+ },
3091
+ children: `curl -X PUT http://localhost:4566${APPINSPECTOR_API_PREFIX}/status \\
3092
+ -H "Content-Type: application/json" \\
3093
+ -d '{"status": "ENABLED"}'`
3094
+ }
3095
+ ),
3096
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
3097
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
3098
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3099
+ import_material6.Box,
3100
+ {
3101
+ component: "pre",
3102
+ sx: {
3103
+ backgroundColor: "rgba(0, 0, 0, 0.05)",
3104
+ borderRadius: 1,
3105
+ fontSize: "0.875rem",
3106
+ p: 1
3107
+ },
3108
+ children: "APPINSPECTOR=1"
3109
+ }
3110
+ ),
3111
+ Boolean(status.note) && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
3112
+ onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3113
+ import_material6.Button,
3114
+ {
3115
+ "aria-label": "Check if App Inspector is enabled",
3116
+ onClick: onRetry,
3117
+ variant: "outlined",
3118
+ children: "Check Status Again"
3119
+ }
3120
+ ) })
3121
+ ]
3122
+ }
3123
+ )
3124
+ }
3125
+ );
3126
+ }
3127
+ if (error) {
3128
+ return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3129
+ import_material6.Box,
3130
+ {
3131
+ sx: {
3132
+ alignItems: "center",
3133
+ display: "flex",
3134
+ flexDirection: "column",
3135
+ gap: 2,
3136
+ justifyContent: "center",
3137
+ p: 4
3138
+ },
3139
+ children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
3140
+ import_material6.Alert,
3141
+ {
3142
+ icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
3143
+ severity: "error",
3144
+ sx: { maxWidth: 600, width: "100%" },
3145
+ children: [
3146
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
3147
+ /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
3148
+ onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3149
+ import_material6.Button,
3150
+ {
3151
+ "aria-label": "Retry operation",
3152
+ onClick: onRetry,
3153
+ variant: "outlined",
3154
+ children: "Retry"
3155
+ }
3156
+ ) })
3157
+ ]
3158
+ }
3159
+ )
3160
+ }
3161
+ );
3162
+ }
3163
+ return;
3164
+ };
3165
+
3166
+ // src/context.tsx
3167
+ var import_react4 = require("react");
3168
+ var import_react5 = require("react");
3169
+
3170
+ // src/constants/error-messages.ts
3171
+ var ERROR_MESSAGES = {
3172
+ APP_INSPECTOR_DISABLED: "App Inspector is currently disabled.",
3173
+ APP_INSPECTOR_NOT_FOUND: "App Inspector extension not found. Please ensure App Inspector is licensed and enabled.",
3174
+ CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible."
3175
+ };
3176
+
2897
3177
  // src/api/client.ts
2898
3178
  var apiLogger = createScopedLogger("API");
2899
3179
  var makeRequest = async (options) => {
@@ -2907,10 +3187,23 @@ var makeRequest = async (options) => {
2907
3187
  headers
2908
3188
  });
2909
3189
  if (!response.ok) {
3190
+ if (response.status === 404) {
3191
+ throw new AppInspectorNotFoundError(
3192
+ ERROR_MESSAGES.APP_INSPECTOR_NOT_FOUND,
3193
+ new Error(`404 from ${url}: ${response.statusText}`)
3194
+ );
3195
+ }
2910
3196
  throw new Error(`API request failed: ${response.status.toString()} ${response.statusText}`);
2911
3197
  }
2912
3198
  return await response.json();
2913
3199
  } catch (error) {
3200
+ if (error instanceof TypeError) {
3201
+ const message = error.message.toLowerCase();
3202
+ const isNetworkError = message.includes("fetch") || message.includes("network") || message.includes("failed to fetch");
3203
+ if (isNetworkError) {
3204
+ throw new ConnectionError(ERROR_MESSAGES.CONNECTION_FAILED, error);
3205
+ }
3206
+ }
2914
3207
  if (error instanceof Error) {
2915
3208
  throw error;
2916
3209
  }
@@ -2950,12 +3243,18 @@ var createApiClient = ({ localstackEndpoint }) => {
2950
3243
  getSpans: async (request) => {
2951
3244
  const endpoint = buildSpansEndpoint(request);
2952
3245
  return makeRequest({ endpoint, localstackEndpoint });
3246
+ },
3247
+ getStatus: async () => {
3248
+ return makeRequest({
3249
+ endpoint: API_ENDPOINTS.STATUS,
3250
+ localstackEndpoint
3251
+ });
2953
3252
  }
2954
3253
  };
2955
3254
  };
2956
3255
 
2957
3256
  // src/context.tsx
2958
- var import_jsx_runtime126 = require("react/jsx-runtime");
3257
+ var import_jsx_runtime127 = require("react/jsx-runtime");
2959
3258
  var AppInspectorContext = (0, import_react4.createContext)(void 0);
2960
3259
  var useAppInspector = () => {
2961
3260
  const context = (0, import_react4.useContext)(AppInspectorContext);
@@ -2968,7 +3267,7 @@ var AppInspectorContextProvider = (props) => {
2968
3267
  const api = (0, import_react5.useMemo)(() => {
2969
3268
  return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
2970
3269
  }, [props.localstackEndpoint]);
2971
- return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
3270
+ return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
2972
3271
  AppInspectorContext.Provider,
2973
3272
  {
2974
3273
  value: {
@@ -2992,17 +3291,60 @@ var AppInspectorContextProvider = (props) => {
2992
3291
  ) });
2993
3292
  };
2994
3293
 
3294
+ // src/hooks/use-status.tsx
3295
+ var import_react6 = require("react");
3296
+ var useStatus = () => {
3297
+ const api = useAppInspectorApi();
3298
+ const [checking, setChecking] = (0, import_react6.useState)(true);
3299
+ const [status, setStatus] = (0, import_react6.useState)();
3300
+ const [error, setError] = (0, import_react6.useState)();
3301
+ const hasFetchedReference = (0, import_react6.useRef)(false);
3302
+ const abortControllerReference = (0, import_react6.useRef)(null);
3303
+ const checkStatus = (0, import_react6.useCallback)(async () => {
3304
+ if (abortControllerReference.current) {
3305
+ abortControllerReference.current.abort();
3306
+ }
3307
+ const abortController = new AbortController();
3308
+ abortControllerReference.current = abortController;
3309
+ setChecking(true);
3310
+ try {
3311
+ const response = await api.getStatus();
3312
+ if (!abortController.signal.aborted) {
3313
+ setStatus(response);
3314
+ setError(void 0);
3315
+ }
3316
+ } catch (error_) {
3317
+ if (!abortController.signal.aborted) {
3318
+ setError(error_ instanceof Error ? error_ : new Error("Unknown error"));
3319
+ setStatus(void 0);
3320
+ }
3321
+ } finally {
3322
+ if (!abortController.signal.aborted) {
3323
+ setChecking(false);
3324
+ }
3325
+ }
3326
+ }, [api]);
3327
+ (0, import_react6.useEffect)(() => {
3328
+ if (!hasFetchedReference.current) {
3329
+ hasFetchedReference.current = true;
3330
+ void checkStatus();
3331
+ }
3332
+ }, [checkStatus]);
3333
+ return { checking, checkStatus, error, status };
3334
+ };
3335
+
2995
3336
  // src/pages/spans-list-page.tsx
2996
- var import_jsx_runtime127 = require("react/jsx-runtime");
3337
+ var import_jsx_runtime128 = require("react/jsx-runtime");
2997
3338
  var MAX_WIDTH = 1400;
2998
3339
  var SpansListPage = () => {
2999
3340
  const api = useAppInspectorApi();
3000
- const [spans, setSpans] = (0, import_react6.useState)();
3001
- const [loading, setLoading] = (0, import_react6.useState)(false);
3002
- const hasFetched = (0, import_react6.useRef)(false);
3003
- const [filterWriteOperations, setFilterWriteOperations] = (0, import_react6.useState)(true);
3004
- const [fetchError, setFetchError] = (0, import_react6.useState)();
3005
- const fetchSpans = (0, import_react6.useCallback)(async () => {
3341
+ const [spans, setSpans] = (0, import_react7.useState)();
3342
+ const [loading, setLoading] = (0, import_react7.useState)(false);
3343
+ const hasFetched = (0, import_react7.useRef)(false);
3344
+ const [filterWriteOperations, setFilterWriteOperations] = (0, import_react7.useState)(true);
3345
+ const [fetchError, setFetchError] = (0, import_react7.useState)();
3346
+ const { checkStatus, error: statusError, status } = useStatus();
3347
+ const fetchSpans = (0, import_react7.useCallback)(async () => {
3006
3348
  setLoading(true);
3007
3349
  try {
3008
3350
  const response = await api.getSpans({
@@ -3018,25 +3360,26 @@ var SpansListPage = () => {
3018
3360
  setLoading(false);
3019
3361
  }
3020
3362
  }, [api, filterWriteOperations]);
3021
- const fetchSpansSync = (0, import_react6.useCallback)(() => {
3363
+ const fetchSpansSync = (0, import_react7.useCallback)(() => {
3022
3364
  void fetchSpans();
3023
3365
  }, [fetchSpans]);
3024
- (0, import_react6.useEffect)(() => {
3366
+ (0, import_react7.useEffect)(() => {
3025
3367
  if (hasFetched.current) return;
3368
+ if (status?.status !== "ENABLED") return;
3026
3369
  hasFetched.current = true;
3027
3370
  void fetchSpans();
3028
- }, [fetchSpans]);
3029
- (0, import_react6.useEffect)(() => {
3371
+ }, [fetchSpans, status]);
3372
+ (0, import_react7.useEffect)(() => {
3030
3373
  if (!hasFetched.current) return;
3031
3374
  void fetchSpans();
3032
3375
  }, [fetchSpans]);
3033
3376
  const navigate = (0, import_react_router_dom.useNavigate)();
3034
3377
  const { resolveLink } = useAppInspector();
3035
- const navigateToSpan = (0, import_react6.useCallback)((span) => {
3378
+ const navigateToSpan = (0, import_react7.useCallback)((span) => {
3036
3379
  const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
3037
3380
  navigate(`${url}?spanId=${span.span_id}`);
3038
3381
  }, [navigate, resolveLink]);
3039
- const clearSpans = (0, import_react6.useCallback)(async () => {
3382
+ const clearSpans = (0, import_react7.useCallback)(async () => {
3040
3383
  setLoading(true);
3041
3384
  try {
3042
3385
  await api.deleteSpans();
@@ -3050,8 +3393,12 @@ var SpansListPage = () => {
3050
3393
  setLoading(false);
3051
3394
  }
3052
3395
  }, [api, fetchSpans]);
3053
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
3054
- import_material6.Box,
3396
+ const handleRetry = (0, import_react7.useCallback)(() => {
3397
+ void checkStatus();
3398
+ }, [checkStatus]);
3399
+ const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
3400
+ return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
3401
+ import_material7.Box,
3055
3402
  {
3056
3403
  "data-testid": "spans-list-page",
3057
3404
  sx: {
@@ -3061,8 +3408,8 @@ var SpansListPage = () => {
3061
3408
  height: "100vh",
3062
3409
  width: "100%"
3063
3410
  },
3064
- children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
3065
- import_material6.Box,
3411
+ children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
3412
+ import_material7.Box,
3066
3413
  {
3067
3414
  sx: {
3068
3415
  display: "flex",
@@ -3071,7 +3418,14 @@ var SpansListPage = () => {
3071
3418
  maxWidth: MAX_WIDTH,
3072
3419
  width: "100%"
3073
3420
  },
3074
- children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
3421
+ children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
3422
+ StatusMessage,
3423
+ {
3424
+ error: statusError,
3425
+ onRetry: handleRetry,
3426
+ status
3427
+ }
3428
+ ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
3075
3429
  SpansList,
3076
3430
  {
3077
3431
  filterWriteOperations,
@@ -3101,22 +3455,22 @@ var SpansListPage = () => {
3101
3455
  };
3102
3456
 
3103
3457
  // src/pages/trace-graph.tsx
3104
- var import_material13 = require("@mui/material");
3458
+ var import_material14 = require("@mui/material");
3105
3459
  var import_styles = require("@mui/material/styles");
3106
- var import_react14 = require("@xyflow/react");
3107
- var import_react15 = require("react");
3460
+ var import_react15 = require("@xyflow/react");
3461
+ var import_react16 = require("react");
3108
3462
  var import_react_router_dom2 = require("react-router-dom");
3109
3463
 
3110
3464
  // src/components/event-details/event-details.tsx
3111
- var import_material9 = require("@mui/material");
3465
+ var import_material10 = require("@mui/material");
3112
3466
 
3113
3467
  // src/components/event-details/event-details-header.tsx
3114
3468
  var import_icons_material2 = require("@mui/icons-material");
3115
- var import_material7 = require("@mui/material");
3116
- var import_jsx_runtime128 = require("react/jsx-runtime");
3469
+ var import_material8 = require("@mui/material");
3470
+ var import_jsx_runtime129 = require("react/jsx-runtime");
3117
3471
  var EventDetailsHeader = ({ event, onClose }) => {
3118
- return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
3119
- import_material7.Box,
3472
+ return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
3473
+ import_material8.Box,
3120
3474
  {
3121
3475
  sx: {
3122
3476
  alignItems: "center",
@@ -3127,16 +3481,16 @@ var EventDetailsHeader = ({ event, onClose }) => {
3127
3481
  p: 2
3128
3482
  },
3129
3483
  children: [
3130
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Box, { children: [
3131
- /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
3132
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Typography, { color: "text.secondary", variant: "body2", children: [
3484
+ /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Box, { children: [
3485
+ /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
3486
+ /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Typography, { color: "text.secondary", variant: "body2", children: [
3133
3487
  event.service_name,
3134
3488
  " ",
3135
3489
  "-",
3136
3490
  event.operation_name
3137
3491
  ] })
3138
3492
  ] }),
3139
- onClose && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material2.Close, {}) })
3493
+ onClose && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material2.Close, {}) })
3140
3494
  ]
3141
3495
  }
3142
3496
  );
@@ -3144,14 +3498,14 @@ var EventDetailsHeader = ({ event, onClose }) => {
3144
3498
 
3145
3499
  // src/components/event-details/toggle-section.tsx
3146
3500
  var import_icons_material3 = require("@mui/icons-material");
3147
- var import_material8 = require("@mui/material");
3148
- var import_react7 = require("react");
3149
- var import_jsx_runtime129 = require("react/jsx-runtime");
3501
+ var import_material9 = require("@mui/material");
3502
+ var import_react8 = require("react");
3503
+ var import_jsx_runtime130 = require("react/jsx-runtime");
3150
3504
  var ToggleSection = ({ children, headline, initialOpen = true }) => {
3151
- const [isOpen, setIsOpen] = (0, import_react7.useState)(initialOpen);
3152
- return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Box, { sx: { mt: 4 }, children: [
3153
- /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
3154
- import_material8.Box,
3505
+ const [isOpen, setIsOpen] = (0, import_react8.useState)(initialOpen);
3506
+ return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { sx: { mt: 4 }, children: [
3507
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
3508
+ import_material9.Box,
3155
3509
  {
3156
3510
  onClick: () => {
3157
3511
  setIsOpen(!isOpen);
@@ -3160,8 +3514,8 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
3160
3514
  cursor: "pointer",
3161
3515
  mb: 1
3162
3516
  },
3163
- children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
3164
- import_material8.Box,
3517
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
3518
+ import_material9.Box,
3165
3519
  {
3166
3520
  role: "button",
3167
3521
  sx: {
@@ -3170,85 +3524,85 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
3170
3524
  gap: 1
3171
3525
  },
3172
3526
  children: [
3173
- /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
3174
- isOpen ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
3527
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
3528
+ isOpen ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material3.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material3.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
3175
3529
  ]
3176
3530
  }
3177
3531
  )
3178
3532
  }
3179
3533
  ),
3180
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Box, { children })
3534
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { children })
3181
3535
  ] });
3182
3536
  };
3183
3537
 
3184
3538
  // src/components/event-details/event-details.tsx
3185
- var import_jsx_runtime130 = require("react/jsx-runtime");
3539
+ var import_jsx_runtime131 = require("react/jsx-runtime");
3186
3540
  var EventDetails = ({ selectedEvent }) => {
3187
3541
  if (!selectedEvent) {
3188
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
3542
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
3189
3543
  }
3190
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
3191
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(EventDetailsHeader, { event: selectedEvent }),
3192
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 2, children: [
3193
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 1, children: [
3194
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3195
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Span ID" }),
3196
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.span_id })
3544
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
3545
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(EventDetailsHeader, { event: selectedEvent }),
3546
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 2, children: [
3547
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 1, children: [
3548
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3549
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Span ID" }),
3550
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.span_id })
3197
3551
  ] }),
3198
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3199
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
3200
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
3552
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3553
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
3554
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
3201
3555
  ] }),
3202
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3203
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Operation" }),
3204
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.operation_name })
3556
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3557
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Operation" }),
3558
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.operation_name })
3205
3559
  ] })
3206
3560
  ] }) }),
3207
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
3208
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 1, children: [
3209
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3210
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Service" }),
3211
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.service_name })
3561
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
3562
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 1, children: [
3563
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3564
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Service" }),
3565
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.service_name })
3212
3566
  ] }),
3213
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3214
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Resource" }),
3215
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.resource_name })
3567
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3568
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Resource" }),
3569
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.resource_name })
3216
3570
  ] }),
3217
- selectedEvent.region && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3218
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Region" }),
3219
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.region })
3571
+ selectedEvent.region && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3572
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Region" }),
3573
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.region })
3220
3574
  ] })
3221
3575
  ] }) }),
3222
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
3223
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 1, children: [
3224
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3225
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Start Time" }),
3226
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
3576
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
3577
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 1, children: [
3578
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3579
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Start Time" }),
3580
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
3227
3581
  ] }),
3228
- selectedEvent.end_time_unix_nano && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
3229
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Duration" }),
3230
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Typography, { variant: "body2", children: [
3582
+ selectedEvent.end_time_unix_nano && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
3583
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Duration" }),
3584
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Typography, { variant: "body2", children: [
3231
3585
  ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
3232
3586
  " ",
3233
3587
  "ms"
3234
3588
  ] })
3235
3589
  ] })
3236
3590
  ] }) }),
3237
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
3238
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { direction: "row", spacing: 1, children: [
3239
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
3240
- import_material9.Chip,
3591
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
3592
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { direction: "row", spacing: 1, children: [
3593
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
3594
+ import_material10.Chip,
3241
3595
  {
3242
3596
  color: selectedEvent.status_code === 0 ? "success" : "error",
3243
3597
  label: selectedEvent.status_code === 0 ? "Success" : "Error",
3244
3598
  size: "small"
3245
3599
  }
3246
3600
  ),
3247
- selectedEvent.status_message && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.status_message })
3601
+ selectedEvent.status_message && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.status_message })
3248
3602
  ] }) }),
3249
- selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
3250
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
3251
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
3603
+ selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
3604
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
3605
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
3252
3606
  ] })
3253
3607
  ] }) })
3254
3608
  ] });
@@ -3256,36 +3610,36 @@ var EventDetails = ({ selectedEvent }) => {
3256
3610
 
3257
3611
  // src/components/trace-graph/trace-graph.tsx
3258
3612
  var import_base = require("@xyflow/react/dist/base.css");
3259
- var import_material12 = require("@mui/material");
3260
- var import_react12 = require("@xyflow/react");
3261
- var import_react13 = require("react");
3613
+ var import_material13 = require("@mui/material");
3614
+ var import_react13 = require("@xyflow/react");
3615
+ var import_react14 = require("react");
3262
3616
 
3263
3617
  // src/components/trace-graph/service-node.tsx
3264
- var import_material11 = require("@mui/material");
3618
+ var import_material12 = require("@mui/material");
3265
3619
  var import_style = require("@xyflow/react/dist/style.css");
3266
- var import_react9 = require("@xyflow/react");
3267
- var import_react10 = require("react");
3620
+ var import_react10 = require("@xyflow/react");
3621
+ var import_react11 = require("react");
3268
3622
 
3269
3623
  // src/components/trace-graph/problem-indicator.tsx
3270
3624
  var import_icons_material4 = require("@mui/icons-material");
3271
- var import_material10 = require("@mui/material");
3272
- var import_react8 = require("react");
3273
- var import_jsx_runtime131 = require("react/jsx-runtime");
3625
+ var import_material11 = require("@mui/material");
3626
+ var import_react9 = require("react");
3627
+ var import_jsx_runtime132 = require("react/jsx-runtime");
3274
3628
  var ProblemIndicator = ({ error }) => {
3275
- const icon = (0, import_react8.useMemo)(() => {
3629
+ const icon = (0, import_react9.useMemo)(() => {
3276
3630
  switch (error.level) {
3277
3631
  case "error": {
3278
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
3632
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
3279
3633
  }
3280
3634
  case "warning": {
3281
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
3635
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
3282
3636
  }
3283
3637
  default: {
3284
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
3638
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
3285
3639
  }
3286
3640
  }
3287
3641
  }, [error.level]);
3288
- const color = (0, import_react8.useMemo)(() => {
3642
+ const color = (0, import_react9.useMemo)(() => {
3289
3643
  switch (error.level) {
3290
3644
  case "error": {
3291
3645
  return "#d32f2f";
@@ -3298,8 +3652,8 @@ var ProblemIndicator = ({ error }) => {
3298
3652
  }
3299
3653
  }
3300
3654
  }, [error.level]);
3301
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
3302
- import_material10.Box,
3655
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
3656
+ import_material11.Box,
3303
3657
  {
3304
3658
  sx: {
3305
3659
  alignItems: "center",
@@ -3318,17 +3672,17 @@ var ProblemIndicator = ({ error }) => {
3318
3672
  };
3319
3673
 
3320
3674
  // src/components/trace-graph/service-node.tsx
3321
- var import_jsx_runtime132 = require("react/jsx-runtime");
3675
+ var import_jsx_runtime133 = require("react/jsx-runtime");
3322
3676
  var handleStyle = {
3323
3677
  backgroundColor: "white",
3324
3678
  borderColor: "lightgray",
3325
3679
  opacity: 0
3326
3680
  };
3327
- var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selected }) {
3328
- const handleClick = (0, import_react10.useCallback)(() => {
3681
+ var ServiceNode = (0, import_react11.memo)(function ServiceNode2({ data, selected }) {
3682
+ const handleClick = (0, import_react11.useCallback)(() => {
3329
3683
  data.onEventSelect(data.event);
3330
3684
  }, [data]);
3331
- const handleKeyPress = (0, import_react10.useCallback)(
3685
+ const handleKeyPress = (0, import_react11.useCallback)(
3332
3686
  (event) => {
3333
3687
  if (event.key === "Enter" || event.key === " ") {
3334
3688
  handleClick();
@@ -3337,9 +3691,9 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
3337
3691
  [handleClick]
3338
3692
  );
3339
3693
  const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
3340
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { maxWidth: 200 }, children: [
3341
- /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
3342
- import_material11.Box,
3694
+ return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { maxWidth: 200 }, children: [
3695
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
3696
+ import_material12.Box,
3343
3697
  {
3344
3698
  onClick: handleClick,
3345
3699
  onKeyPress: handleKeyPress,
@@ -3361,9 +3715,9 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
3361
3715
  },
3362
3716
  tabIndex: 0,
3363
3717
  children: [
3364
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react9.Handle, { position: import_react9.Position.Left, style: handleStyle, type: "target" }),
3365
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react9.Handle, { position: import_react9.Position.Right, style: handleStyle, type: "source" }),
3366
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
3718
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react10.Handle, { position: import_react10.Position.Left, style: handleStyle, type: "target" }),
3719
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react10.Handle, { position: import_react10.Position.Right, style: handleStyle, type: "source" }),
3720
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
3367
3721
  ServiceCell,
3368
3722
  {
3369
3723
  borderColor: selected ? "black" : "lightgray",
@@ -3377,8 +3731,8 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
3377
3731
  ]
3378
3732
  }
3379
3733
  ),
3380
- /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
3381
- import_material11.Stack,
3734
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
3735
+ import_material12.Stack,
3382
3736
  {
3383
3737
  alignItems: "center",
3384
3738
  direction: "row",
@@ -3388,8 +3742,8 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
3388
3742
  mt: 0.5
3389
3743
  },
3390
3744
  children: [
3391
- hasErrors && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
3392
- import_material11.Stack,
3745
+ hasErrors && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
3746
+ import_material12.Stack,
3393
3747
  {
3394
3748
  direction: "row",
3395
3749
  spacing: 0.5,
@@ -3397,11 +3751,11 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
3397
3751
  flexWrap: "wrap",
3398
3752
  gap: "2px"
3399
3753
  },
3400
- children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ProblemIndicator, { error }, error.span_id))
3754
+ children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ProblemIndicator, { error }, error.span_id))
3401
3755
  }
3402
3756
  ),
3403
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
3404
- import_material11.Typography,
3757
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
3758
+ import_material12.Typography,
3405
3759
  {
3406
3760
  sx: {
3407
3761
  fontSize: "0.9rem",
@@ -3423,7 +3777,7 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
3423
3777
 
3424
3778
  // src/components/trace-graph/utils.ts
3425
3779
  var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
3426
- var import_react11 = require("@xyflow/react");
3780
+ var import_react12 = require("@xyflow/react");
3427
3781
  var generateNodesAndEdges = (event, onEventSelect, parentId) => {
3428
3782
  const nodes = [];
3429
3783
  const edges = [];
@@ -3440,8 +3794,8 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
3440
3794
  id: event.span_id,
3441
3795
  position: { x: 0, y: 0 },
3442
3796
  // Will be set by layout
3443
- sourcePosition: import_react11.Position.Right,
3444
- targetPosition: import_react11.Position.Left,
3797
+ sourcePosition: import_react12.Position.Right,
3798
+ targetPosition: import_react12.Position.Left,
3445
3799
  type: "service"
3446
3800
  });
3447
3801
  if (parentId) {
@@ -3451,7 +3805,7 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
3451
3805
  markerEnd: {
3452
3806
  color: "lightgray",
3453
3807
  height: 16,
3454
- type: import_react11.MarkerType.Arrow,
3808
+ type: import_react12.MarkerType.Arrow,
3455
3809
  width: 16
3456
3810
  },
3457
3811
  source: parentId,
@@ -3514,7 +3868,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
3514
3868
  };
3515
3869
 
3516
3870
  // src/components/trace-graph/trace-graph.tsx
3517
- var import_jsx_runtime133 = require("react/jsx-runtime");
3871
+ var import_jsx_runtime134 = require("react/jsx-runtime");
3518
3872
  var nodeTypes = {
3519
3873
  service: ServiceNode
3520
3874
  };
@@ -3524,15 +3878,15 @@ var TraceGraph = ({
3524
3878
  traceId,
3525
3879
  viewPortPixelWidth
3526
3880
  }) => {
3527
- const [nodes, setNodes] = (0, import_react13.useState)([]);
3528
- const [edges, setEdges] = (0, import_react13.useState)([]);
3529
- const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
3530
- const [initialViewSet, setInitialViewSet] = (0, import_react13.useState)(false);
3531
- const { fitView, setCenter } = (0, import_react12.useReactFlow)();
3532
- const store = (0, import_react12.useStoreApi)();
3881
+ const [nodes, setNodes] = (0, import_react14.useState)([]);
3882
+ const [edges, setEdges] = (0, import_react14.useState)([]);
3883
+ const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
3884
+ const [initialViewSet, setInitialViewSet] = (0, import_react14.useState)(false);
3885
+ const { fitView, setCenter } = (0, import_react13.useReactFlow)();
3886
+ const store = (0, import_react13.useStoreApi)();
3533
3887
  const api = useAppInspectorApi();
3534
- const [fetchError, setFetchError] = (0, import_react13.useState)();
3535
- const updateSelectedNode = (0, import_react13.useCallback)(
3888
+ const [fetchError, setFetchError] = (0, import_react14.useState)();
3889
+ const updateSelectedNode = (0, import_react14.useCallback)(
3536
3890
  (nodeId) => {
3537
3891
  const { addSelectedNodes } = store.getState();
3538
3892
  if (nodeId) {
@@ -3544,7 +3898,7 @@ var TraceGraph = ({
3544
3898
  },
3545
3899
  [nodes, store]
3546
3900
  );
3547
- const fetchTrace = (0, import_react13.useCallback)(async () => {
3901
+ const fetchTrace = (0, import_react14.useCallback)(async () => {
3548
3902
  setIsLoading(true);
3549
3903
  try {
3550
3904
  const response = await api.getSpans({ trace_id: traceId });
@@ -3587,13 +3941,13 @@ var TraceGraph = ({
3587
3941
  setIsLoading(false);
3588
3942
  }
3589
3943
  }, [api, traceId, onEventSelect]);
3590
- const fetchTraceSync = (0, import_react13.useCallback)(() => {
3944
+ const fetchTraceSync = (0, import_react14.useCallback)(() => {
3591
3945
  void fetchTrace();
3592
3946
  }, [fetchTrace]);
3593
- (0, import_react13.useEffect)(() => {
3947
+ (0, import_react14.useEffect)(() => {
3594
3948
  fetchTraceSync();
3595
3949
  }, [fetchTraceSync]);
3596
- (0, import_react13.useEffect)(() => {
3950
+ (0, import_react14.useEffect)(() => {
3597
3951
  const shouldSetInitialView = !isLoading && nodes.length > 0 && !initialViewSet;
3598
3952
  if (shouldSetInitialView) {
3599
3953
  if (initialFocusEventId) {
@@ -3613,20 +3967,20 @@ var TraceGraph = ({
3613
3967
  setInitialViewSet(true);
3614
3968
  }
3615
3969
  }, [isLoading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
3616
- (0, import_react13.useEffect)(() => {
3970
+ (0, import_react14.useEffect)(() => {
3617
3971
  if (initialFocusEventId) {
3618
3972
  updateSelectedNode(initialFocusEventId);
3619
3973
  }
3620
3974
  }, [initialFocusEventId, updateSelectedNode]);
3621
- const onNodeClick = (0, import_react13.useCallback)((_event, node) => {
3975
+ const onNodeClick = (0, import_react14.useCallback)((_event, node) => {
3622
3976
  onEventSelect(node.data.event);
3623
3977
  updateSelectedNode(node.id);
3624
3978
  }, [onEventSelect, updateSelectedNode]);
3625
- return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
3626
- fetchError && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
3627
- import_material12.Alert,
3979
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
3980
+ fetchError && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
3981
+ import_material13.Alert,
3628
3982
  {
3629
- action: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Button, { onClick: fetchTraceSync, children: "Retry" }),
3983
+ action: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Button, { onClick: fetchTraceSync, children: "Retry" }),
3630
3984
  severity: "error",
3631
3985
  children: [
3632
3986
  "Unexpected error:",
@@ -3635,8 +3989,8 @@ var TraceGraph = ({
3635
3989
  ]
3636
3990
  }
3637
3991
  ),
3638
- /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
3639
- import_react12.ReactFlow,
3992
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
3993
+ import_react13.ReactFlow,
3640
3994
  {
3641
3995
  "data-testid": "trace-graph",
3642
3996
  defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -3649,8 +4003,8 @@ var TraceGraph = ({
3649
4003
  onNodeClick,
3650
4004
  selectNodesOnDrag: false,
3651
4005
  children: [
3652
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react12.Controls, { showInteractive: false }),
3653
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react12.Background, {})
4006
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react13.Controls, { showInteractive: false }),
4007
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react13.Background, {})
3654
4008
  ]
3655
4009
  }
3656
4010
  )
@@ -3658,7 +4012,7 @@ var TraceGraph = ({
3658
4012
  };
3659
4013
 
3660
4014
  // src/pages/trace-graph.tsx
3661
- var import_jsx_runtime134 = require("react/jsx-runtime");
4015
+ var import_jsx_runtime135 = require("react/jsx-runtime");
3662
4016
  var HEADER_HEIGHT = 56;
3663
4017
  var DRAWER_WIDTH = "35%";
3664
4018
  var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -3676,7 +4030,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
3676
4030
  })
3677
4031
  }
3678
4032
  }));
3679
- var StyledDrawer = (0, import_styles.styled)(import_material13.Drawer)(() => ({
4033
+ var StyledDrawer = (0, import_styles.styled)(import_material14.Drawer)(() => ({
3680
4034
  "& .MuiDrawer-paper": {
3681
4035
  backgroundColor: "#ffffff",
3682
4036
  bottom: 0,
@@ -3694,10 +4048,11 @@ var TraceGraphPage = () => {
3694
4048
  const { traceId } = (0, import_react_router_dom2.useParams)();
3695
4049
  const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
3696
4050
  const spanId = searchParameters.get("spanId");
3697
- const [open, setOpen] = (0, import_react15.useState)(true);
3698
- const [selectedEvent, setSelectedEvent] = (0, import_react15.useState)();
3699
- const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react15.useState)(0);
3700
- const calculateDrawerWidth = (0, import_react15.useCallback)(() => {
4051
+ const [open, setOpen] = (0, import_react16.useState)(true);
4052
+ const [selectedEvent, setSelectedEvent] = (0, import_react16.useState)();
4053
+ const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react16.useState)(0);
4054
+ const { checkStatus, error: statusError, status } = useStatus();
4055
+ const calculateDrawerWidth = (0, import_react16.useCallback)(() => {
3701
4056
  const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
3702
4057
  if (percentageMatch && open) {
3703
4058
  const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -3705,7 +4060,7 @@ var TraceGraphPage = () => {
3705
4060
  }
3706
4061
  return 0;
3707
4062
  }, [open]);
3708
- (0, import_react15.useEffect)(() => {
4063
+ (0, import_react16.useEffect)(() => {
3709
4064
  const updateViewportWidth = () => {
3710
4065
  const totalWidth = window.innerWidth;
3711
4066
  const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -3719,12 +4074,16 @@ var TraceGraphPage = () => {
3719
4074
  clearTimeout(timeoutId);
3720
4075
  };
3721
4076
  }, [open, calculateDrawerWidth]);
3722
- const handleEventSelect = (0, import_react15.useCallback)((event) => {
4077
+ const handleEventSelect = (0, import_react16.useCallback)((event) => {
3723
4078
  setSelectedEvent(event);
3724
4079
  setOpen(true);
3725
4080
  }, []);
3726
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
3727
- import_material13.Box,
4081
+ const handleRetry = (0, import_react16.useCallback)(() => {
4082
+ void checkStatus();
4083
+ }, [checkStatus]);
4084
+ const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
4085
+ return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
4086
+ import_material14.Box,
3728
4087
  {
3729
4088
  "data-testid": "trace-graph-page",
3730
4089
  sx: {
@@ -3734,8 +4093,8 @@ var TraceGraphPage = () => {
3734
4093
  height: "100vh",
3735
4094
  overflow: "hidden"
3736
4095
  },
3737
- children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
3738
- import_material13.Paper,
4096
+ children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
4097
+ import_material14.Paper,
3739
4098
  {
3740
4099
  sx: {
3741
4100
  display: "flex",
@@ -3744,15 +4103,22 @@ var TraceGraphPage = () => {
3744
4103
  position: "relative",
3745
4104
  width: "100%"
3746
4105
  },
3747
- children: [
3748
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
3749
- import_material13.Box,
4106
+ children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
4107
+ StatusMessage,
4108
+ {
4109
+ error: statusError,
4110
+ onRetry: handleRetry,
4111
+ status
4112
+ }
4113
+ ) : /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
4114
+ /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
4115
+ import_material14.Box,
3750
4116
  {
3751
4117
  sx: {
3752
4118
  height: "100%",
3753
4119
  overflow: "auto"
3754
4120
  },
3755
- children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react14.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
4121
+ children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react15.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
3756
4122
  TraceGraph,
3757
4123
  {
3758
4124
  initialFocusEventId: spanId,
@@ -3763,8 +4129,8 @@ var TraceGraphPage = () => {
3763
4129
  ) })
3764
4130
  }
3765
4131
  ) }),
3766
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(EventDetails, { selectedEvent }) })
3767
- ]
4132
+ /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EventDetails, { selectedEvent }) })
4133
+ ] })
3768
4134
  }
3769
4135
  )
3770
4136
  }