import { j as jsxRuntimeExports, d as c, c as a, s, h as m, bw as o, bb as f, L as Link, n as namedRoutes, w as h, bu as ForwardRef, bx as ForwardRef$1, e as gql, ba as useQuery, r as reactExports, by as useMutation, b as ForwardRef$2, bo as p, bd as p$1, be as n } from "./index-Cr4zbAtA.js";
import { M as Metadata } from "./Metadata-aK5zM6ek.js";
const StatusBadge = ({
  statusCode
}) => {
  if (statusCode === 0) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(f, { color: "gray", children: "Unset" });
  }
  if (statusCode === 1) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(f, { color: "green", children: "OK" });
  }
  if (statusCode === 2) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(f, { color: "red", children: "Error" });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(f, { color: "orange", children: "Invalid" });
};
const SpanListItem = ({
  data
}) => {
  const duration = Number((BigInt(data.endTimeNano) - BigInt(data.startTimeNano)) / 1000n) / 1e3;
  return /* @__PURE__ */ jsxRuntimeExports.jsx(c, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "start", className: "min-w-0 gap-4", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-grow", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "col", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "between", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "col", alignItems: "start", className: "min-w-0 flex-grow", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: data.name }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "start", className: "gap-2", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: data.spanId }),
            data.brief ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "|" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(m, { className: "truncate", children: data.brief })
            ] }) : null
          ] })
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(StatusBadge, { statusCode: data.statusCode }) })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { className: "my-2" }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "between", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(f, { style: {
          backgroundColor: `#${data.type.colour}`,
          color: "#fff"
        }, children: data.type.name }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { children: [
          new Date(data.startTimeNano / 1e6).toLocaleString(),
          " | ",
          duration.toFixed(2),
          " ms"
        ] }) })
      ] })
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "col", className: "gap-2", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: namedRoutes.opentelemetryTrace({
        id: data.traceId
      }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(h, { className: "p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef, { className: "h-6 w-6 shrink-0", "aria-hidden": "true" }) }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: namedRoutes.opentelemetrySpan({
        id: data.spanId
      }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(h, { className: "p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$1, { className: "h-6 w-6 shrink-0", "aria-hidden": "true" }) }) })
    ] }) })
  ] }) });
};
const SPANS_QUERY = gql`
  # Have as a live query
  query GetSpans @live {
    otelSpans {
      id
      traceId
      spanId
      name
      brief
      type {
        id
        name
        colour
      }
      startTimeNano
      endTimeNano
      statusCode
    }
  }
`;
const MUTATION_RETYPE_SPANS = gql`
  mutation RetypeSpansMutation {
    otelRetypeSpans
  }
`;
const MUTATION_TRUNCATE_SPANS = gql`
  mutation TruncateSpansMutation {
    otelTruncateSpans
  }
`;
const OpenTelemetrySpansPage = () => {
  var _a, _b;
  const spansQuery = useQuery(SPANS_QUERY);
  const dialogRef = reactExports.useRef(null);
  const [showModal, setShowModal] = reactExports.useState(false);
  const [nameFilter, setNameFilter] = reactExports.useState("");
  const [typeFilter, setTypeFilter] = reactExports.useState("");
  const spans = ((_a = spansQuery.data) == null ? void 0 : _a.otelSpans) ?? [];
  reactExports.useEffect(() => {
    var _a2, _b2, _c, _d;
    if (((_a2 = dialogRef.current) == null ? void 0 : _a2.open) && !showModal) {
      (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
    } else if (!((_c = dialogRef.current) == null ? void 0 : _c.open) && showModal) {
      (_d = dialogRef.current) == null ? void 0 : _d.showModal();
    }
  }, [showModal, (_b = dialogRef.current) == null ? void 0 : _b.open]);
  const [executeRetypeSpans, retypeSpans] = useMutation(MUTATION_RETYPE_SPANS);
  const [executeTruncateSpans, truncateSpans] = useMutation(MUTATION_TRUNCATE_SPANS);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Metadata, { title: "OpenTelemetrySpans", description: "OpenTelemetrySpans page" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "between", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: "OpenTelemetry Spans" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Each individual OpenTelemetry span ingested." })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(h, { onClick: () => {
          setShowModal(true);
        }, className: "p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$2, { className: "h-6 w-6 shrink-0", "aria-hidden": "true" }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("dialog", { ref: dialogRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(c, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "col", justifyContent: "start", alignItems: "start", className: "gap-4", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "between", className: "gap-8", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Truncate Spans" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(h, { color: "rose", onClick: async () => {
              await executeTruncateSpans();
              if (spansQuery.refetch) {
                await spansQuery.refetch();
              }
            }, loading: truncateSpans.loading, loadingText: "Executing...", disabled: truncateSpans.loading || retypeSpans.loading, children: "Execute" })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "between", className: "gap-8", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Retype Spans" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(h, { onClick: () => {
              executeRetypeSpans();
            }, loading: retypeSpans.loading, loadingText: "Executing...", disabled: retypeSpans.loading || truncateSpans.loading, children: "Execute" })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(o, {}),
          /* @__PURE__ */ jsxRuntimeExports.jsx(a, { flexDirection: "row", justifyContent: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(h, { onClick: () => {
            setShowModal(false);
          }, children: "Close" }) })
        ] }) }) })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { className: "mt-6 space-y-6", flexDirection: "col", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(c, { className: "w-full", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Filtering" }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "between", className: "gap-4", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(p, { placeholder: "Name", value: nameFilter, onChange: (e) => {
            setNameFilter(e.currentTarget.value);
          } }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(p$1, { value: typeFilter, onValueChange: setTypeFilter, children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "", children: "ALL" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "GRAPHQL", children: "GRAPHQL" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "SQL", children: "SQL" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "PRISMA", children: "PRISMA" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "REDWOOD FUNCTION", children: "FUNCTION" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "REDWOOD SERVICE", children: "SERVICE" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "GENERIC", children: "GENERIC" })
          ] })
        ] })
      ] }),
      spans.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(c, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "No spans found" }) }),
      spans.filter((span) => !nameFilter || span.name.includes(nameFilter)).filter((span) => !typeFilter || span.type.name.toLowerCase().includes(typeFilter.toLowerCase())).map((span) => /* @__PURE__ */ jsxRuntimeExports.jsx(SpanListItem, { data: span }, span.id))
    ] })
  ] });
};
export {
  OpenTelemetrySpansPage as default
};
