@openchoreo/backstage-plugin-openchoreo-observability 1.1.0

package/dist/components/Traces/styles.esm.js

@@ -0,0 +1,198 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useTracesActionsStyles = makeStyles((theme) => ({
+  statsContainer: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  actionsContainer: {
+    display: "flex",
+    gap: theme.spacing(1),
+    alignItems: "center"
+  }
+}));
+const useTracesTableStyles = makeStyles((theme) => ({
+  tablePaper: {
+    marginBottom: theme.spacing(0),
+    paddingBottom: theme.spacing(1)
+  },
+  tableContainer: {
+    maxHeight: "calc(100vh - 320px)",
+    overflowY: "auto",
+    overflowX: "hidden",
+    width: "100%"
+  },
+  table: {
+    width: "100%",
+    tableLayout: "fixed"
+  },
+  headerCell: {
+    fontWeight: "bold",
+    backgroundColor: theme.palette.background.paper,
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    fontSize: "0.75rem",
+    padding: "4px 8px !important"
+  },
+  traceRow: {
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    },
+    "& > td": {
+      padding: "4px 8px !important",
+      fontSize: "0.75rem"
+    }
+  },
+  expandedRow: {
+    backgroundColor: theme.palette.action.selected
+  },
+  traceCell: {
+    fontSize: "0.75rem",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  traceIdCell: {
+    fontSize: "0.75rem",
+    fontFamily: "monospace",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  emptyState: {
+    textAlign: "center",
+    padding: theme.spacing(4),
+    color: theme.palette.text.secondary
+  },
+  expandIcon: {
+    cursor: "pointer",
+    padding: 0,
+    "& .MuiSvgIcon-root": {
+      fontSize: "1rem"
+    }
+  },
+  errorRow: {
+    "& > td:first-child, & > th:first-child": {
+      position: "relative",
+      borderLeft: "none !important",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        left: 0,
+        top: "5%",
+        bottom: "5%",
+        width: "3px",
+        backgroundColor: "#EF4444",
+        borderRadius: "2px"
+      }
+    }
+  },
+  errorStripe: {
+    position: "absolute",
+    left: 0,
+    top: "5%",
+    bottom: "5%",
+    width: "8px",
+    cursor: "default",
+    zIndex: 1
+  }
+}));
+const useWaterfallStyles = makeStyles((theme) => ({
+  container: {
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.background.default : "#fafafa",
+    overflowX: "auto"
+  },
+  timeline: {
+    position: "relative",
+    marginTop: theme.spacing(1)
+  },
+  spanRow: {
+    position: "relative",
+    marginBottom: theme.spacing(1),
+    minHeight: "30px",
+    display: "flex",
+    alignItems: "center"
+  },
+  spanLabel: {
+    width: "250px",
+    minWidth: "250px",
+    maxWidth: "250px",
+    paddingRight: theme.spacing(1),
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  collapseButton: {
+    padding: 0,
+    width: "20px",
+    height: "20px",
+    "& .MuiSvgIcon-root": {
+      fontSize: "1rem"
+    }
+  },
+  spanBarContainer: {
+    position: "relative",
+    flex: 1,
+    height: "24px",
+    marginLeft: theme.spacing(1)
+  },
+  spanBar: {
+    position: "absolute",
+    height: "20px",
+    borderRadius: "4px",
+    cursor: "pointer",
+    transition: "opacity 0.2s",
+    display: "flex",
+    alignItems: "center",
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    // Span bar background colors are pastel, designed for dark-on-light text
+    // in both modes. Force dark text regardless of theme mode.
+    color: "rgba(0, 0, 0, 0.87)",
+    "&:hover": {
+      opacity: 0.8,
+      zIndex: 10
+    }
+  },
+  tooltipContent: {
+    padding: theme.spacing(1),
+    minWidth: "280px",
+    maxWidth: "450px",
+    color: "#fff"
+  },
+  tooltipRow: {
+    marginBottom: theme.spacing(0.5),
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(1),
+    "&:last-child": {
+      marginBottom: 0
+    }
+  },
+  tooltipLabel: {
+    fontWeight: 600,
+    color: "#fff",
+    fontSize: "0.75rem",
+    minWidth: "85px",
+    flexShrink: 0
+  },
+  spanErrorIcon: {
+    color: "#F87171",
+    fontSize: "0.875rem",
+    flexShrink: 0
+  }
+}));
+
+export { useTracesActionsStyles, useTracesTableStyles, useWaterfallStyles };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Traces/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../src/components/Traces/styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core/styles';\n\nexport const useTracesActionsStyles = makeStyles((theme: Theme) => ({\n  statsContainer: {\n    marginTop: theme.spacing(2),\n    marginBottom: theme.spacing(2),\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n  },\n  actionsContainer: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const useTracesTableStyles = makeStyles((theme: Theme) => ({\n  tablePaper: {\n    marginBottom: theme.spacing(0),\n    paddingBottom: theme.spacing(1),\n  },\n  tableContainer: {\n    maxHeight: 'calc(100vh - 320px)',\n    overflowY: 'auto',\n    overflowX: 'hidden',\n    width: '100%',\n  },\n  table: {\n    width: '100%',\n    tableLayout: 'fixed',\n  },\n  headerCell: {\n    fontWeight: 'bold',\n    backgroundColor: theme.palette.background.paper,\n    position: 'sticky',\n    top: 0,\n    zIndex: 1,\n    fontSize: '0.75rem',\n    padding: '4px 8px !important',\n  },\n  traceRow: {\n    cursor: 'pointer',\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    '& > td': {\n      padding: '4px 8px !important',\n      fontSize: '0.75rem',\n    },\n  },\n  expandedRow: {\n    backgroundColor: theme.palette.action.selected,\n  },\n  traceCell: {\n    fontSize: '0.75rem',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n  traceIdCell: {\n    fontSize: '0.75rem',\n    fontFamily: 'monospace',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n  emptyState: {\n    textAlign: 'center',\n    padding: theme.spacing(4),\n    color: theme.palette.text.secondary,\n  },\n  expandIcon: {\n    cursor: 'pointer',\n    padding: 0,\n    '& .MuiSvgIcon-root': {\n      fontSize: '1rem',\n    },\n  },\n  errorRow: {\n    '& > td:first-child, & > th:first-child': {\n      position: 'relative',\n      borderLeft: 'none !important',\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        left: 0,\n        top: '5%',\n        bottom: '5%',\n        width: '3px',\n        backgroundColor: '#EF4444',\n        borderRadius: '2px',\n      },\n    },\n  },\n  errorStripe: {\n    position: 'absolute',\n    left: 0,\n    top: '5%',\n    bottom: '5%',\n    width: '8px',\n    cursor: 'default',\n    zIndex: 1,\n  },\n}));\n\nexport const useWaterfallStyles = makeStyles((theme: Theme) => ({\n  container: {\n    padding: theme.spacing(2),\n    backgroundColor:\n      theme.palette.type === 'dark'\n        ? theme.palette.background.default\n        : '#fafafa',\n    overflowX: 'auto',\n  },\n  timeline: {\n    position: 'relative',\n    marginTop: theme.spacing(1),\n  },\n  spanRow: {\n    position: 'relative',\n    marginBottom: theme.spacing(1),\n    minHeight: '30px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n  spanLabel: {\n    width: '250px',\n    minWidth: '250px',\n    maxWidth: '250px',\n    paddingRight: theme.spacing(1),\n    fontSize: '0.875rem',\n    fontWeight: 500,\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n  collapseButton: {\n    padding: 0,\n    width: '20px',\n    height: '20px',\n    '& .MuiSvgIcon-root': {\n      fontSize: '1rem',\n    },\n  },\n  spanBarContainer: {\n    position: 'relative',\n    flex: 1,\n    height: '24px',\n    marginLeft: theme.spacing(1),\n  },\n  spanBar: {\n    position: 'absolute',\n    height: '20px',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    transition: 'opacity 0.2s',\n    display: 'flex',\n    alignItems: 'center',\n    paddingLeft: theme.spacing(1),\n    paddingRight: theme.spacing(1),\n    fontSize: '0.75rem',\n    fontWeight: 500,\n    // Span bar background colors are pastel, designed for dark-on-light text\n    // in both modes. Force dark text regardless of theme mode.\n    color: 'rgba(0, 0, 0, 0.87)',\n    '&:hover': {\n      opacity: 0.8,\n      zIndex: 10,\n    },\n  },\n  tooltipContent: {\n    padding: theme.spacing(1),\n    minWidth: '280px',\n    maxWidth: '450px',\n    color: '#fff',\n  },\n  tooltipRow: {\n    marginBottom: theme.spacing(0.5),\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: theme.spacing(1),\n    '&:last-child': {\n      marginBottom: 0,\n    },\n  },\n  tooltipLabel: {\n    fontWeight: 600,\n    color: '#fff',\n    fontSize: '0.75rem',\n    minWidth: '85px',\n    flexShrink: 0,\n  },\n  spanErrorIcon: {\n    color: '#F87171',\n    fontSize: '0.875rem',\n    flexShrink: 0,\n  },\n}));\n"],"names":[],"mappings":";;AAEO,MAAM,sBAAA,GAAyB,UAAA,CAAW,CAAC,KAAA,MAAkB;AAAA,EAClE,cAAA,EAAgB;AAAA,IACd,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,OAAA,EAAS,MAAA;AAAA,IACT,cAAA,EAAgB,eAAA;AAAA,IAChB,UAAA,EAAY;AAAA,GACd;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE;AAEK,MAAM,oBAAA,GAAuB,UAAA,CAAW,CAAC,KAAA,MAAkB;AAAA,EAChE,UAAA,EAAY;AAAA,IACV,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAChC;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,SAAA,EAAW,qBAAA;AAAA,IACX,SAAA,EAAW,MAAA;AAAA,IACX,SAAA,EAAW,QAAA;AAAA,IACX,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,MAAA;AAAA,IACP,WAAA,EAAa;AAAA,GACf;AAAA,EACA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY,MAAA;AAAA,IACZ,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,UAAA,CAAW,KAAA;AAAA,IAC1C,QAAA,EAAU,QAAA;AAAA,IACV,GAAA,EAAK,CAAA;AAAA,IACL,MAAA,EAAQ,CAAA;AAAA,IACR,QAAA,EAAU,SAAA;AAAA,IACV,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ,SAAA;AAAA,IACR,SAAA,EAAW;AAAA,MACT,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,MAAA,CAAO;AAAA,KACxC;AAAA,IACA,QAAA,EAAU;AAAA,MACR,OAAA,EAAS,oBAAA;AAAA,MACT,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,WAAA,EAAa;AAAA,IACX,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,MAAA,CAAO;AAAA,GACxC;AAAA,EACA,SAAA,EAAW;AAAA,IACT,QAAA,EAAU,SAAA;AAAA,IACV,UAAA,EAAY,QAAA;AAAA,IACZ,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,WAAA,EAAa;AAAA,IACX,QAAA,EAAU,SAAA;AAAA,IACV,UAAA,EAAY,WAAA;AAAA,IACZ,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,UAAA,EAAY;AAAA,IACV,SAAA,EAAW,QAAA;AAAA,IACX,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA,GAC5B;AAAA,EACA,UAAA,EAAY;AAAA,IACV,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS,CAAA;AAAA,IACT,oBAAA,EAAsB;AAAA,MACpB,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,wCAAA,EAA0C;AAAA,MACxC,QAAA,EAAU,UAAA;AAAA,MACV,UAAA,EAAY,iBAAA;AAAA,MACZ,WAAA,EAAa;AAAA,QACX,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,UAAA;AAAA,QACV,IAAA,EAAM,CAAA;AAAA,QACN,GAAA,EAAK,IAAA;AAAA,QACL,MAAA,EAAQ,IAAA;AAAA,QACR,KAAA,EAAO,KAAA;AAAA,QACP,eAAA,EAAiB,SAAA;AAAA,QACjB,YAAA,EAAc;AAAA;AAChB;AACF,GACF;AAAA,EACA,WAAA,EAAa;AAAA,IACX,QAAA,EAAU,UAAA;AAAA,IACV,IAAA,EAAM,CAAA;AAAA,IACN,GAAA,EAAK,IAAA;AAAA,IACL,MAAA,EAAQ,IAAA;AAAA,IACR,KAAA,EAAO,KAAA;AAAA,IACP,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ;AAAA;AAEZ,CAAA,CAAE;AAEK,MAAM,kBAAA,GAAqB,UAAA,CAAW,CAAC,KAAA,MAAkB;AAAA,EAC9D,SAAA,EAAW;AAAA,IACT,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,eAAA,EACE,MAAM,OAAA,CAAQ,IAAA,KAAS,SACnB,KAAA,CAAM,OAAA,CAAQ,WAAW,OAAA,GACzB,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,QAAA,EAAU;AAAA,IACR,QAAA,EAAU,UAAA;AAAA,IACV,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC5B;AAAA,EACA,OAAA,EAAS;AAAA,IACP,QAAA,EAAU,UAAA;AAAA,IACV,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,SAAA,EAAW,MAAA;AAAA,IACX,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY;AAAA,GACd;AAAA,EACA,SAAA,EAAW;AAAA,IACT,KAAA,EAAO,OAAA;AAAA,IACP,QAAA,EAAU,OAAA;AAAA,IACV,QAAA,EAAU,OAAA;AAAA,IACV,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,QAAA,EAAU,UAAA;AAAA,IACV,UAAA,EAAY,GAAA;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IACtB,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAA;AAAA,IACT,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,MAAA;AAAA,IACR,oBAAA,EAAsB;AAAA,MACpB,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,QAAA,EAAU,UAAA;AAAA,IACV,IAAA,EAAM,CAAA;AAAA,IACN,MAAA,EAAQ,MAAA;AAAA,IACR,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC7B;AAAA,EACA,OAAA,EAAS;AAAA,IACP,QAAA,EAAU,UAAA;AAAA,IACV,MAAA,EAAQ,MAAA;AAAA,IACR,YAAA,EAAc,KAAA;AAAA,IACd,MAAA,EAAQ,SAAA;AAAA,IACR,UAAA,EAAY,cAAA;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,WAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,QAAA,EAAU,SAAA;AAAA,IACV,UAAA,EAAY,GAAA;AAAA;AAAA;AAAA,IAGZ,KAAA,EAAO,qBAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,OAAA,EAAS,GAAA;AAAA,MACT,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,QAAA,EAAU,OAAA;AAAA,IACV,QAAA,EAAU,OAAA;AAAA,IACV,KAAA,EAAO;AAAA,GACT;AAAA,EACA,UAAA,EAAY;AAAA,IACV,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,YAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,cAAA,EAAgB;AAAA,MACd,YAAA,EAAc;AAAA;AAChB,GACF;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,UAAA,EAAY,GAAA;AAAA,IACZ,KAAA,EAAO,MAAA;AAAA,IACP,QAAA,EAAU,SAAA;AAAA,IACV,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACd;AAAA,EACA,aAAA,EAAe;AAAA,IACb,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,EAAU,UAAA;AAAA,IACV,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE;;;;"}

package/dist/components/Traces/utils.esm.js

@@ -0,0 +1,19 @@
+function parseRfc3339NanoToNanoseconds(rfc3339Nano) {
+  const [base, fractional] = rfc3339Nano.replace("Z", "").split(".");
+  const milliseconds = (/* @__PURE__ */ new Date(`${base}Z`)).getTime();
+  const nanos = fractional ? parseInt(fractional.padEnd(9, "0").slice(0, 9), 10) : 0;
+  return milliseconds * 1e6 + nanos;
+}
+function formatDuration(nanoseconds) {
+  if (nanoseconds < 1e3) return `${nanoseconds}ns`;
+  if (nanoseconds < 1e6) return `${(nanoseconds / 1e3).toFixed(3)}\u03BCs`;
+  if (nanoseconds < 1e9)
+    return `${(nanoseconds / 1e6).toFixed(3)}ms`;
+  return `${(nanoseconds / 1e9).toFixed(3)}s`;
+}
+function formatTimeFromString(rfc3339Nano) {
+  return rfc3339Nano.endsWith("Z") ? rfc3339Nano : `${rfc3339Nano}Z`;
+}
+
+export { formatDuration, formatTimeFromString, parseRfc3339NanoToNanoseconds };
+//# sourceMappingURL=utils.esm.js.map

package/dist/components/Traces/utils.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.esm.js","sources":["../../../src/components/Traces/utils.ts"],"sourcesContent":["export function parseRfc3339NanoToNanoseconds(rfc3339Nano: string): number {\n  // Split timestamp into base and fractional parts and return nanoseconds\n  const [base, fractional] = rfc3339Nano.replace('Z', '').split('.');\n  const milliseconds = new Date(`${base}Z`).getTime();\n  const nanos = fractional\n    ? parseInt(fractional.padEnd(9, '0').slice(0, 9), 10)\n    : 0;\n\n  return milliseconds * 1_000_000 + nanos;\n}\n\nexport function nanosecondsToRfc3339Nano(nanoseconds: number): string {\n  const milliseconds = Math.floor(nanoseconds / 1_000_000);\n  const remainingNanos = nanoseconds % 1_000_000;\n\n  const isoString = new Date(milliseconds).toISOString();\n  const nanoPart = remainingNanos.toString().padStart(6, '0');\n\n  return isoString.replace(/\\.\\d{3}Z$/, `.${nanoPart}000Z`);\n}\n\nexport function formatDuration(nanoseconds: number): string {\n  if (nanoseconds < 1_000) return `${nanoseconds}ns`;\n  if (nanoseconds < 1_000_000) return `${(nanoseconds / 1_000).toFixed(3)}μs`;\n  if (nanoseconds < 1_000_000_000)\n    return `${(nanoseconds / 1_000_000).toFixed(3)}ms`;\n  return `${(nanoseconds / 1_000_000_000).toFixed(3)}s`;\n}\n\nexport function formatTime(nanoseconds: number): string {\n  return new Date(Math.floor(nanoseconds / 1_000_000)).toISOString();\n}\n\nexport function formatTimeFromString(rfc3339Nano: string): string {\n  return rfc3339Nano.endsWith('Z') ? rfc3339Nano : `${rfc3339Nano}Z`;\n}\n"],"names":[],"mappings":"AAAO,SAAS,8BAA8B,WAAA,EAA6B;AAEzE,EAAA,MAAM,CAAC,IAAA,EAAM,UAAU,CAAA,GAAI,WAAA,CAAY,QAAQ,GAAA,EAAK,EAAE,CAAA,CAAE,KAAA,CAAM,GAAG,CAAA;AACjE,EAAA,MAAM,gCAAe,IAAI,IAAA,CAAK,GAAG,IAAI,CAAA,CAAA,CAAG,GAAE,OAAA,EAAQ;AAClD,EAAA,MAAM,KAAA,GAAQ,UAAA,GACV,QAAA,CAAS,UAAA,CAAW,MAAA,CAAO,CAAA,EAAG,GAAG,CAAA,CAAE,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,EAAG,EAAE,CAAA,GAClD,CAAA;AAEJ,EAAA,OAAO,eAAe,GAAA,GAAY,KAAA;AACpC;AAYO,SAAS,eAAe,WAAA,EAA6B;AAC1D,EAAA,IAAI,WAAA,GAAc,GAAA,EAAO,OAAO,CAAA,EAAG,WAAW,CAAA,EAAA,CAAA;AAC9C,EAAA,IAAI,WAAA,GAAc,KAAW,OAAO,CAAA,EAAA,CAAI,cAAc,GAAA,EAAO,OAAA,CAAQ,CAAC,CAAC,CAAA,OAAA,CAAA;AACvE,EAAA,IAAI,WAAA,GAAc,GAAA;AAChB,IAAA,OAAO,CAAA,EAAA,CAAI,WAAA,GAAc,GAAA,EAAW,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AAChD,EAAA,OAAO,CAAA,EAAA,CAAI,WAAA,GAAc,GAAA,EAAe,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AACpD;AAMO,SAAS,qBAAqB,WAAA,EAA6B;AAChE,EAAA,OAAO,YAAY,QAAA,CAAS,GAAG,CAAA,GAAI,WAAA,GAAc,GAAG,WAAW,CAAA,CAAA,CAAA;AACjE;;;;"}

package/dist/hooks/useAutoSelectFirstEnvironment.esm.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+function useAutoSelectFirstEnvironment(environments, searchParams, setSearchParams) {
+  useEffect(() => {
+    if (environments.length === 0) return;
+    const envParam = searchParams.get("env");
+    const matchedEnvironment = envParam ? environments.find(
+      (e) => e.name === envParam || e.displayName === envParam || e.name.toLowerCase() === envParam.toLowerCase()
+    ) : void 0;
+    if (!matchedEnvironment) {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("env", environments[0].name);
+      setSearchParams(newParams, { replace: true });
+      return;
+    }
+    if (envParam !== matchedEnvironment.name) {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("env", matchedEnvironment.name);
+      setSearchParams(newParams, { replace: true });
+    }
+  }, [environments, searchParams, setSearchParams]);
+}
+
+export { useAutoSelectFirstEnvironment };
+//# sourceMappingURL=useAutoSelectFirstEnvironment.esm.js.map

package/dist/hooks/useAutoSelectFirstEnvironment.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoSelectFirstEnvironment.esm.js","sources":["../../src/hooks/useAutoSelectFirstEnvironment.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { Environment } from '../types';\n\n/**\n * Automatically selects the first available environment in the URL query params\n * when no valid environment is selected. Used by all URL filter hooks.\n */\nexport function useAutoSelectFirstEnvironment(\n  environments: Environment[],\n  searchParams: URLSearchParams,\n  setSearchParams: (\n    params: URLSearchParams,\n    options?: { replace?: boolean },\n  ) => void,\n) {\n  useEffect(() => {\n    if (environments.length === 0) return;\n    const envParam = searchParams.get('env');\n    const matchedEnvironment = envParam\n      ? environments.find(\n          e =>\n            e.name === envParam ||\n            e.displayName === envParam ||\n            e.name.toLowerCase() === envParam.toLowerCase(),\n        )\n      : undefined;\n\n    if (!matchedEnvironment) {\n      const newParams = new URLSearchParams(searchParams);\n      newParams.set('env', environments[0].name);\n      setSearchParams(newParams, { replace: true });\n      return;\n    }\n\n    // Canonicalize to exact environment name for downstream exact-name consumers.\n    if (envParam !== matchedEnvironment.name) {\n      const newParams = new URLSearchParams(searchParams);\n      newParams.set('env', matchedEnvironment.name);\n      setSearchParams(newParams, { replace: true });\n    }\n  }, [environments, searchParams, setSearchParams]);\n}\n"],"names":[],"mappings":";;AAOO,SAAS,6BAAA,CACd,YAAA,EACA,YAAA,EACA,eAAA,EAIA;AACA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,CAAa,WAAW,CAAA,EAAG;AAC/B,IAAA,MAAM,QAAA,GAAW,YAAA,CAAa,GAAA,CAAI,KAAK,CAAA;AACvC,IAAA,MAAM,kBAAA,GAAqB,WACvB,YAAA,CAAa,IAAA;AAAA,MACX,CAAA,CAAA,KACE,CAAA,CAAE,IAAA,KAAS,QAAA,IACX,CAAA,CAAE,WAAA,KAAgB,QAAA,IAClB,CAAA,CAAE,IAAA,CAAK,WAAA,EAAY,KAAM,QAAA,CAAS,WAAA;AAAY,KAClD,GACA,MAAA;AAEJ,IAAA,IAAI,CAAC,kBAAA,EAAoB;AACvB,MAAA,MAAM,SAAA,GAAY,IAAI,eAAA,CAAgB,YAAY,CAAA;AAClD,MAAA,SAAA,CAAU,GAAA,CAAI,KAAA,EAAO,YAAA,CAAa,CAAC,EAAE,IAAI,CAAA;AACzC,MAAA,eAAA,CAAgB,SAAA,EAAW,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAC5C,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,QAAA,KAAa,mBAAmB,IAAA,EAAM;AACxC,MAAA,MAAM,SAAA,GAAY,IAAI,eAAA,CAAgB,YAAY,CAAA;AAClD,MAAA,SAAA,CAAU,GAAA,CAAI,KAAA,EAAO,kBAAA,CAAmB,IAAI,CAAA;AAC5C,MAAA,eAAA,CAAgB,SAAA,EAAW,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAAA,IAC9C;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,YAAA,EAAc,eAAe,CAAC,CAAA;AAClD;;;;"}

package/dist/hooks/useComponentAlerts.esm.js

@@ -0,0 +1,80 @@
+import { useState, useRef, useCallback } from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import { observabilityApiRef } from '../api/ObservabilityApi.esm.js';
+import { calculateTimeRange } from '@openchoreo/backstage-plugin-react';
+import { CHOREO_ANNOTATIONS } from '@openchoreo/backstage-plugin-common';
+
+function useComponentAlerts(entity, namespace, project, options) {
+  const observabilityApi = useApi(observabilityApiRef);
+  const [alerts, setAlerts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [totalCount, setTotalCount] = useState(0);
+  const requestVersionRef = useRef(0);
+  const componentName = entity.metadata.annotations?.[CHOREO_ANNOTATIONS.COMPONENT];
+  const fetchAlerts = useCallback(
+    async (_reset = true) => {
+      if (!options.environment || !namespace || !project || !componentName) {
+        return;
+      }
+      const version = ++requestVersionRef.current;
+      try {
+        setLoading(true);
+        setError(null);
+        const { startTime, endTime } = calculateTimeRange(options.timeRange, {
+          startTime: options.customStartTime,
+          endTime: options.customEndTime
+        });
+        const response = await observabilityApi.getAlerts(
+          namespace,
+          project,
+          options.environment,
+          componentName,
+          {
+            limit: options.limit ?? 100,
+            startTime,
+            endTime,
+            sortOrder: options.sortOrder ?? "desc"
+          }
+        );
+        if (version !== requestVersionRef.current) return;
+        setAlerts(response.alerts ?? []);
+        setTotalCount(response.total ?? 0);
+      } catch (err) {
+        if (version !== requestVersionRef.current) return;
+        setError(err instanceof Error ? err.message : "Failed to fetch alerts");
+      } finally {
+        if (version === requestVersionRef.current) {
+          setLoading(false);
+        }
+      }
+    },
+    [
+      observabilityApi,
+      options.environment,
+      options.timeRange,
+      options.customStartTime,
+      options.customEndTime,
+      options.limit,
+      options.sortOrder,
+      namespace,
+      project,
+      componentName
+    ]
+  );
+  const refresh = useCallback(() => {
+    setAlerts([]);
+    fetchAlerts(true);
+  }, [fetchAlerts]);
+  return {
+    alerts,
+    loading,
+    error,
+    totalCount,
+    fetchAlerts,
+    refresh
+  };
+}
+
+export { useComponentAlerts };
+//# sourceMappingURL=useComponentAlerts.esm.js.map

package/dist/hooks/useComponentAlerts.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentAlerts.esm.js","sources":["../../src/hooks/useComponentAlerts.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Entity } from '@backstage/catalog-model';\nimport { observabilityApiRef } from '../api/ObservabilityApi';\nimport { calculateTimeRange } from '@openchoreo/backstage-plugin-react';\nimport { AlertSummary } from '../types';\nimport { CHOREO_ANNOTATIONS } from '@openchoreo/backstage-plugin-common';\n\nexport interface UseComponentAlertsOptions {\n  environment: string;\n  timeRange: string;\n  /** ISO start time, used when `timeRange === 'custom'` */\n  customStartTime?: string;\n  /** ISO end time, used when `timeRange === 'custom'` */\n  customEndTime?: string;\n  limit?: number;\n  sortOrder?: 'asc' | 'desc';\n}\n\nexport interface UseComponentAlertsResult {\n  alerts: AlertSummary[];\n  loading: boolean;\n  error: string | null;\n  totalCount: number;\n  fetchAlerts: (reset?: boolean) => Promise<void>;\n  refresh: () => void;\n}\n\nexport function useComponentAlerts(\n  entity: Entity,\n  namespace: string,\n  project: string,\n  options: UseComponentAlertsOptions,\n): UseComponentAlertsResult {\n  const observabilityApi = useApi(observabilityApiRef);\n  const [alerts, setAlerts] = useState<AlertSummary[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [totalCount, setTotalCount] = useState(0);\n  const requestVersionRef = useRef(0);\n\n  const componentName =\n    entity.metadata.annotations?.[CHOREO_ANNOTATIONS.COMPONENT];\n\n  const fetchAlerts = useCallback(\n    async (_reset = true) => {\n      if (!options.environment || !namespace || !project || !componentName) {\n        return;\n      }\n\n      const version = ++requestVersionRef.current;\n\n      try {\n        setLoading(true);\n        setError(null);\n\n        const { startTime, endTime } = calculateTimeRange(options.timeRange, {\n          startTime: options.customStartTime,\n          endTime: options.customEndTime,\n        });\n\n        const response = await observabilityApi.getAlerts(\n          namespace,\n          project,\n          options.environment,\n          componentName,\n          {\n            limit: options.limit ?? 100,\n            startTime,\n            endTime,\n            sortOrder: options.sortOrder ?? 'desc',\n          },\n        );\n\n        // Discard result if a newer request has been started\n        if (version !== requestVersionRef.current) return;\n\n        setAlerts(response.alerts ?? []);\n        setTotalCount(response.total ?? 0);\n      } catch (err) {\n        if (version !== requestVersionRef.current) return;\n        setError(err instanceof Error ? err.message : 'Failed to fetch alerts');\n      } finally {\n        if (version === requestVersionRef.current) {\n          setLoading(false);\n        }\n      }\n    },\n    [\n      observabilityApi,\n      options.environment,\n      options.timeRange,\n      options.customStartTime,\n      options.customEndTime,\n      options.limit,\n      options.sortOrder,\n      namespace,\n      project,\n      componentName,\n    ],\n  );\n\n  const refresh = useCallback(() => {\n    setAlerts([]);\n    fetchAlerts(true);\n  }, [fetchAlerts]);\n\n  return {\n    alerts,\n    loading,\n    error,\n    totalCount,\n    fetchAlerts,\n    refresh,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useDataPlaneNetPolProvider.esm.js

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { useApi, discoveryApiRef, fetchApiRef } from '@backstage/core-plugin-api';
+
+const useDataPlaneNetPolProvider = (namespaceName, dataPlaneRef) => {
+  const discoveryApi = useApi(discoveryApiRef);
+  const fetchApi = useApi(fetchApiRef);
+  const [networkPolicyProvider, setNetworkPolicyProvider] = useState(void 0);
+  const [loading, setLoading] = useState(false);
+  const dpName = dataPlaneRef?.name;
+  const dpKind = dataPlaneRef?.kind ?? "DataPlane";
+  useEffect(() => {
+    let active = true;
+    const fetchDataPlaneNetPolProvider = async () => {
+      if (!namespaceName || !dpName) {
+        if (active) {
+          setNetworkPolicyProvider(void 0);
+          setLoading(false);
+        }
+        return;
+      }
+      if (active) setLoading(true);
+      try {
+        const baseUrl = await discoveryApi.getBaseUrl(
+          "openchoreo-observability-backend"
+        );
+        const params = new URLSearchParams({ namespaceName, dpName, dpKind });
+        const response = await fetchApi.fetch(
+          `${baseUrl}/dataplane-netpol-provider?${params.toString()}`
+        );
+        if (!response.ok) {
+          throw new Error(
+            `Failed to fetch network policy provider: ${response.status} ${response.statusText}`
+          );
+        }
+        const data = await response.json();
+        if (active) {
+          const provider = typeof data?.networkPolicyProvider === "string" ? data.networkPolicyProvider : void 0;
+          setNetworkPolicyProvider(provider);
+        }
+      } catch (error) {
+        if (active) setNetworkPolicyProvider(void 0);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+    fetchDataPlaneNetPolProvider();
+    return () => {
+      active = false;
+    };
+  }, [namespaceName, dpName, dpKind, discoveryApi, fetchApi]);
+  return { networkPolicyProvider, loading };
+};
+
+export { useDataPlaneNetPolProvider };
+//# sourceMappingURL=useDataPlaneNetPolProvider.esm.js.map

package/dist/hooks/useDataPlaneNetPolProvider.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataPlaneNetPolProvider.esm.js","sources":["../../src/hooks/useDataPlaneNetPolProvider.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  useApi,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\n\nexport interface UseDataPlaneNetPolProviderResult {\n  networkPolicyProvider: string | undefined;\n  loading: boolean;\n}\n\n/**\n * Fetches the `openchoreo.dev/networkpolicyprovider` annotation from the\n * DataPlane or ClusterDataPlane CR referenced by the given dataPlaneRef.\n *\n * @param namespaceName - The namespace of the DataPlane/ClusterDataPlane\n * @param dataPlaneRef - Reference to the DataPlane/ClusterDataPlane (must include `name`, `kind` is optional and defaults to 'DataPlane')\n * @returns Object containing the network policy provider (e.g. 'cilium') and loading state\n *\n * Note: The observability backend returns `null` if the annotation is not set, which is treated as `undefined` here.\n * Returns `undefined` (not loading) when namespaceName or dataPlaneRef.name\n * is absent — callers treat this as \"no HTTP metrics\".\n */\nexport const useDataPlaneNetPolProvider = (\n  namespaceName: string | undefined,\n  dataPlaneRef: { kind?: string; name?: string } | undefined,\n): UseDataPlaneNetPolProviderResult => {\n  const discoveryApi = useApi(discoveryApiRef);\n  const fetchApi = useApi(fetchApiRef);\n  const [networkPolicyProvider, setNetworkPolicyProvider] = useState<\n    string | undefined\n  >(undefined);\n  const [loading, setLoading] = useState(false);\n\n  const dpName = dataPlaneRef?.name;\n  const dpKind = dataPlaneRef?.kind ?? 'DataPlane';\n\n  useEffect(() => {\n    let active = true;\n\n    const fetchDataPlaneNetPolProvider = async () => {\n      if (!namespaceName || !dpName) {\n        if (active) {\n          setNetworkPolicyProvider(undefined);\n          setLoading(false);\n        }\n        return;\n      }\n\n      if (active) setLoading(true);\n      try {\n        const baseUrl = await discoveryApi.getBaseUrl(\n          'openchoreo-observability-backend',\n        );\n        const params = new URLSearchParams({ namespaceName, dpName, dpKind });\n        const response = await fetchApi.fetch(\n          `${baseUrl}/dataplane-netpol-provider?${params.toString()}`,\n        );\n        if (!response.ok) {\n          throw new Error(\n            `Failed to fetch network policy provider: ${response.status} ${response.statusText}`,\n          );\n        }\n        const data = await response.json();\n        if (active) {\n          const provider =\n            typeof data?.networkPolicyProvider === 'string'\n              ? data.networkPolicyProvider\n              : undefined;\n          setNetworkPolicyProvider(provider);\n        }\n      } catch (error) {\n        if (active) setNetworkPolicyProvider(undefined);\n      } finally {\n        if (active) setLoading(false);\n      }\n    };\n\n    fetchDataPlaneNetPolProvider();\n    return () => {\n      active = false;\n    };\n  }, [namespaceName, dpName, dpKind, discoveryApi, fetchApi]);\n\n  return { networkPolicyProvider, loading };\n};\n"],"names":[],"mappings":";;;AAwBO,MAAM,0BAAA,GAA6B,CACxC,aAAA,EACA,YAAA,KACqC;AACrC,EAAA,MAAM,YAAA,GAAe,OAAO,eAAe,CAAA;AAC3C,EAAA,MAAM,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GAAI,SAExD,MAAS,CAAA;AACX,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,SAAS,YAAA,EAAc,IAAA;AAC7B,EAAA,MAAM,MAAA,GAAS,cAAc,IAAA,IAAQ,WAAA;AAErC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAA,GAAS,IAAA;AAEb,IAAA,MAAM,+BAA+B,YAAY;AAC/C,MAAA,IAAI,CAAC,aAAA,IAAiB,CAAC,MAAA,EAAQ;AAC7B,QAAA,IAAI,MAAA,EAAQ;AACV,UAAA,wBAAA,CAAyB,MAAS,CAAA;AAClC,UAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClB;AACA,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,MAAA,aAAmB,IAAI,CAAA;AAC3B,MAAA,IAAI;AACF,QAAA,MAAM,OAAA,GAAU,MAAM,YAAA,CAAa,UAAA;AAAA,UACjC;AAAA,SACF;AACA,QAAA,MAAM,SAAS,IAAI,eAAA,CAAgB,EAAE,aAAA,EAAe,MAAA,EAAQ,QAAQ,CAAA;AACpE,QAAA,MAAM,QAAA,GAAW,MAAM,QAAA,CAAS,KAAA;AAAA,UAC9B,CAAA,EAAG,OAAO,CAAA,2BAAA,EAA8B,MAAA,CAAO,UAAU,CAAA;AAAA,SAC3D;AACA,QAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,UAAA,MAAM,IAAI,KAAA;AAAA,YACR,CAAA,yCAAA,EAA4C,QAAA,CAAS,MAAM,CAAA,CAAA,EAAI,SAAS,UAAU,CAAA;AAAA,WACpF;AAAA,QACF;AACA,QAAA,MAAM,IAAA,GAAO,MAAM,QAAA,CAAS,IAAA,EAAK;AACjC,QAAA,IAAI,MAAA,EAAQ;AACV,UAAA,MAAM,WACJ,OAAO,IAAA,EAAM,qBAAA,KAA0B,QAAA,GACnC,KAAK,qBAAA,GACL,KAAA,CAAA;AACN,UAAA,wBAAA,CAAyB,QAAQ,CAAA;AAAA,QACnC;AAAA,MACF,SAAS,KAAA,EAAO;AACd,QAAA,IAAI,MAAA,2BAAiC,MAAS,CAAA;AAAA,MAChD,CAAA,SAAE;AACA,QAAA,IAAI,MAAA,aAAmB,KAAK,CAAA;AAAA,MAC9B;AAAA,IACF,CAAA;AAEA,IAAA,4BAAA,EAA6B;AAC7B,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,GAAS,KAAA;AAAA,IACX,CAAA;AAAA,EACF,GAAG,CAAC,aAAA,EAAe,QAAQ,MAAA,EAAQ,YAAA,EAAc,QAAQ,CAAC,CAAA;AAE1D,EAAA,OAAO,EAAE,uBAAuB,OAAA,EAAQ;AAC1C;;;;"}

package/dist/hooks/useDebouncedSearch.esm.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { useDebounce } from 'react-use';
+
+const DEFAULT_DEBOUNCE_MS = 1e3;
+function useDebouncedSearch(externalValue, onChange, debounceMs = DEFAULT_DEBOUNCE_MS) {
+  const [searchInput, setSearchInput] = useState(externalValue || "");
+  useEffect(() => {
+    setSearchInput(externalValue || "");
+  }, [externalValue]);
+  useDebounce(
+    () => {
+      onChange(searchInput);
+    },
+    debounceMs,
+    [searchInput]
+  );
+  const handleSearchChange = (e) => {
+    setSearchInput(e.target.value);
+  };
+  return [searchInput, handleSearchChange];
+}
+
+export { useDebouncedSearch };
+//# sourceMappingURL=useDebouncedSearch.esm.js.map

package/dist/hooks/useDebouncedSearch.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedSearch.esm.js","sources":["../../src/hooks/useDebouncedSearch.ts"],"sourcesContent":["import { ChangeEvent, useState, useEffect } from 'react';\nimport { useDebounce } from 'react-use';\n\nconst DEFAULT_DEBOUNCE_MS = 1000;\n\n/**\n * Manages a debounced search input that stays in sync with an external value.\n *\n * @param externalValue - The current search value from the parent's filter state.\n *   When this changes externally (e.g. URL reset), the local input is updated.\n * @param onChange - Called with the debounced search string after the user stops typing.\n * @param debounceMs - Debounce delay in milliseconds (default: 1000).\n * @returns A tuple of [searchInput, handleSearchChange] for binding to an input element.\n */\nexport function useDebouncedSearch(\n  externalValue: string | undefined,\n  onChange: (value: string) => void,\n  debounceMs = DEFAULT_DEBOUNCE_MS,\n): [string, (e: ChangeEvent<HTMLInputElement>) => void] {\n  const [searchInput, setSearchInput] = useState(externalValue || '');\n\n  // Sync local state when the external value is reset (e.g. filter reset from URL)\n  useEffect(() => {\n    setSearchInput(externalValue || '');\n  }, [externalValue]);\n\n  useDebounce(\n    () => {\n      onChange(searchInput);\n    },\n    debounceMs,\n    [searchInput],\n  );\n\n  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setSearchInput(e.target.value);\n  };\n\n  return [searchInput, handleSearchChange];\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,mBAAA,GAAsB,GAAA;AAWrB,SAAS,kBAAA,CACd,aAAA,EACA,QAAA,EACA,UAAA,GAAa,mBAAA,EACyC;AACtD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA,CAAS,iBAAiB,EAAE,CAAA;AAGlE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,iBAAiB,EAAE,CAAA;AAAA,EACpC,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAA,QAAA,CAAS,WAAW,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,UAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,kBAAA,GAAqB,CAAC,CAAA,KAAqC;AAC/D,IAAA,cAAA,CAAe,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,OAAO,CAAC,aAAa,kBAAkB,CAAA;AACzC;;;;"}

package/dist/hooks/useFilters.esm.js

@@ -0,0 +1,29 @@
+import { useState, useCallback } from 'react';
+
+const DEFAULT_TIME_RANGE = "10m";
+function useFilters() {
+  const [filters, setFilters] = useState({
+    environment: null,
+    timeRange: DEFAULT_TIME_RANGE,
+    components: [],
+    searchQuery: ""
+  });
+  const updateFilters = useCallback((newFilters) => {
+    setFilters((prev) => ({
+      ...prev,
+      ...newFilters
+    }));
+  }, []);
+  const resetFilters = useCallback(() => {
+    setFilters({
+      environment: null,
+      timeRange: DEFAULT_TIME_RANGE,
+      components: [],
+      searchQuery: ""
+    });
+  }, []);
+  return { filters, updateFilters, resetFilters };
+}
+
+export { useFilters };
+//# sourceMappingURL=useFilters.esm.js.map

package/dist/hooks/useFilters.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilters.esm.js","sources":["../../src/hooks/useFilters.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { Environment, Filters } from '../types';\n\nconst DEFAULT_TIME_RANGE = '10m';\n/**\n * Hook to manage metrics filters state\n * @returns filters state and methods to update filters\n */\nexport function useFilters() {\n  const [filters, setFilters] = useState<Filters>({\n    environment: null as unknown as Environment,\n    timeRange: DEFAULT_TIME_RANGE,\n    components: [],\n    searchQuery: '',\n  });\n\n  const updateFilters = useCallback((newFilters: Partial<Filters>) => {\n    setFilters(prev => ({\n      ...prev,\n      ...newFilters,\n    }));\n  }, []);\n\n  const resetFilters = useCallback(() => {\n    setFilters({\n      environment: null as unknown as Environment,\n      timeRange: DEFAULT_TIME_RANGE,\n      components: [],\n      searchQuery: '',\n    });\n  }, []);\n\n  return { filters, updateFilters, resetFilters };\n}\n"],"names":[],"mappings":";;AAGA,MAAM,kBAAA,GAAqB,KAAA;AAKpB,SAAS,UAAA,GAAa;AAC3B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,CAAkB;AAAA,IAC9C,WAAA,EAAa,IAAA;AAAA,IACb,SAAA,EAAW,kBAAA;AAAA,IACX,YAAY,EAAC;AAAA,IACb,WAAA,EAAa;AAAA,GACd,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,UAAA,KAAiC;AAClE,IAAA,UAAA,CAAW,CAAA,IAAA,MAAS;AAAA,MAClB,GAAG,IAAA;AAAA,MACH,GAAG;AAAA,KACL,CAAE,CAAA;AAAA,EACJ,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,UAAA,CAAW;AAAA,MACT,WAAA,EAAa,IAAA;AAAA,MACb,SAAA,EAAW,kBAAA;AAAA,MACX,YAAY,EAAC;AAAA,MACb,WAAA,EAAa;AAAA,KACd,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,OAAA,EAAS,aAAA,EAAe,YAAA,EAAa;AAChD;;;;"}

package/dist/hooks/useFinOpsReport.esm.js

@@ -0,0 +1,66 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import { observabilityApiRef } from '../api/ObservabilityApi.esm.js';
+import { CHOREO_ANNOTATIONS } from '@openchoreo/backstage-plugin-common';
+
+function useFinOpsReport(reportId, environmentName, entity) {
+  const observabilityApi = useApi(observabilityApiRef);
+  const [report, setReport] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const namespace = entity.metadata.annotations?.[CHOREO_ANNOTATIONS.NAMESPACE] || "";
+  const requestVersion = useRef(0);
+  const fetchReport = useCallback(async () => {
+    if (!reportId || !environmentName) {
+      setLoading(false);
+      setReport(null);
+      setError(null);
+      return;
+    }
+    if (!namespace) {
+      setError("Missing required annotation: namespace");
+      setLoading(false);
+      return;
+    }
+    requestVersion.current += 1;
+    const currentRequest = requestVersion.current;
+    try {
+      setLoading(true);
+      setError(null);
+      const reportData = await observabilityApi.getFinOpsReport(
+        reportId,
+        environmentName,
+        namespace
+      );
+      if (currentRequest !== requestVersion.current) return;
+      setReport(reportData);
+    } catch (err) {
+      if (currentRequest !== requestVersion.current) return;
+      setError(
+        err instanceof Error ? err.message : "Failed to fetch cost analysis report"
+      );
+    } finally {
+      if (currentRequest === requestVersion.current) {
+        setLoading(false);
+      }
+    }
+  }, [observabilityApi, reportId, environmentName, namespace]);
+  useEffect(() => {
+    if (reportId && environmentName) {
+      fetchReport();
+    } else {
+      setLoading(false);
+      setReport(null);
+      setError(null);
+    }
+  }, [reportId, environmentName, namespace]);
+  return {
+    report,
+    loading,
+    error,
+    refresh: fetchReport
+  };
+}
+
+export { useFinOpsReport };
+//# sourceMappingURL=useFinOpsReport.esm.js.map

package/dist/hooks/useFinOpsReport.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFinOpsReport.esm.js","sources":["../../src/hooks/useFinOpsReport.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { observabilityApiRef } from '../api/ObservabilityApi';\nimport { Entity } from '@backstage/catalog-model';\nimport { CHOREO_ANNOTATIONS } from '@openchoreo/backstage-plugin-common';\nimport { FinOpsReportDetailed } from '../types';\n\nexport function useFinOpsReport(\n  reportId: string | undefined,\n  environmentName: string | undefined,\n  entity: Entity,\n) {\n  const observabilityApi = useApi(observabilityApiRef);\n  const [report, setReport] = useState<FinOpsReportDetailed | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const namespace =\n    entity.metadata.annotations?.[CHOREO_ANNOTATIONS.NAMESPACE] || '';\n\n  const requestVersion = useRef(0);\n\n  const fetchReport = useCallback(async () => {\n    if (!reportId || !environmentName) {\n      setLoading(false);\n      setReport(null);\n      setError(null);\n      return;\n    }\n\n    if (!namespace) {\n      setError('Missing required annotation: namespace');\n      setLoading(false);\n      return;\n    }\n\n    requestVersion.current += 1;\n    const currentRequest = requestVersion.current;\n\n    try {\n      setLoading(true);\n      setError(null);\n\n      const reportData = await observabilityApi.getFinOpsReport(\n        reportId,\n        environmentName,\n        namespace,\n      );\n\n      if (currentRequest !== requestVersion.current) return;\n      setReport(reportData);\n    } catch (err) {\n      if (currentRequest !== requestVersion.current) return;\n      setError(\n        err instanceof Error\n          ? err.message\n          : 'Failed to fetch cost analysis report',\n      );\n    } finally {\n      if (currentRequest === requestVersion.current) {\n        setLoading(false);\n      }\n    }\n  }, [observabilityApi, reportId, environmentName, namespace]);\n\n  // Auto-fetch report when dependencies are available\n  useEffect(() => {\n    if (reportId && environmentName) {\n      fetchReport();\n    } else {\n      setLoading(false);\n      setReport(null);\n      setError(null);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [reportId, environmentName, namespace]);\n\n  return {\n    report,\n    loading,\n    error,\n    refresh: fetchReport,\n  };\n}\n"],"names":[],"mappings":";;;;;AAOO,SAAS,eAAA,CACd,QAAA,EACA,eAAA,EACA,MAAA,EACA;AACA,EAAA,MAAM,gBAAA,GAAmB,OAAO,mBAAmB,CAAA;AACnD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAsC,IAAI,CAAA;AACtE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAwB,IAAI,CAAA;AAEtD,EAAA,MAAM,YACJ,MAAA,CAAO,QAAA,CAAS,WAAA,GAAc,kBAAA,CAAmB,SAAS,CAAA,IAAK,EAAA;AAEjE,EAAA,MAAM,cAAA,GAAiB,OAAO,CAAC,CAAA;AAE/B,EAAA,MAAM,WAAA,GAAc,YAAY,YAAY;AAC1C,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,eAAA,EAAiB;AACjC,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,QAAA,CAAS,IAAI,CAAA;AACb,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,QAAA,CAAS,wCAAwC,CAAA;AACjD,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA;AAAA,IACF;AAEA,IAAA,cAAA,CAAe,OAAA,IAAW,CAAA;AAC1B,IAAA,MAAM,iBAAiB,cAAA,CAAe,OAAA;AAEtC,IAAA,IAAI;AACF,MAAA,UAAA,CAAW,IAAI,CAAA;AACf,MAAA,QAAA,CAAS,IAAI,CAAA;AAEb,MAAA,MAAM,UAAA,GAAa,MAAM,gBAAA,CAAiB,eAAA;AAAA,QACxC,QAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,IAAI,cAAA,KAAmB,eAAe,OAAA,EAAS;AAC/C,MAAA,SAAA,CAAU,UAAU,CAAA;AAAA,IACtB,SAAS,GAAA,EAAK;AACZ,MAAA,IAAI,cAAA,KAAmB,eAAe,OAAA,EAAS;AAC/C,MAAA,QAAA;AAAA,QACE,GAAA,YAAe,KAAA,GACX,GAAA,CAAI,OAAA,GACJ;AAAA,OACN;AAAA,IACF,CAAA,SAAE;AACA,MAAA,IAAI,cAAA,KAAmB,eAAe,OAAA,EAAS;AAC7C,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAA,EAAkB,QAAA,EAAU,eAAA,EAAiB,SAAS,CAAC,CAAA;AAG3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAY,eAAA,EAAiB;AAC/B,MAAA,WAAA,EAAY;AAAA,IACd,CAAA,MAAO;AACL,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,IACf;AAAA,EAEF,CAAA,EAAG,CAAC,QAAA,EAAU,eAAA,EAAiB,SAAS,CAAC,CAAA;AAEzC,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA,EAAS;AAAA,GACX;AACF;;;;"}

package/dist/hooks/useFinOpsReports.esm.js

@@ -0,0 +1,70 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import { observabilityApiRef } from '../api/ObservabilityApi.esm.js';
+import { CHOREO_ANNOTATIONS } from '@openchoreo/backstage-plugin-common';
+import { calculateTimeRange } from '@openchoreo/backstage-plugin-react';
+
+function useFinOpsReports(filters, entity) {
+  const observabilityApi = useApi(observabilityApiRef);
+  const [reports, setReports] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [totalCount, setTotalCount] = useState(void 0);
+  const namespace = entity.metadata.annotations?.[CHOREO_ANNOTATIONS.NAMESPACE] || "";
+  const projectName = entity.metadata.name;
+  const fetchReports = useCallback(async () => {
+    if (!filters.environment || !filters.timeRange || !namespace) {
+      setReports([]);
+      setTotalCount(void 0);
+      setError(null);
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const { startTime, endTime } = calculateTimeRange(filters.timeRange);
+      const response = await observabilityApi.getFinOpsReports(
+        namespace,
+        projectName,
+        filters.environment.name,
+        {
+          limit: 100,
+          startTime,
+          endTime,
+          status: filters.rcaStatus
+        }
+      );
+      setReports(response.reports);
+      setTotalCount(response.totalCount);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to fetch cost analysis reports"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    observabilityApi,
+    filters.environment,
+    filters.timeRange,
+    filters.rcaStatus,
+    namespace,
+    projectName
+  ]);
+  useEffect(() => {
+    fetchReports();
+  }, [fetchReports]);
+  const refresh = useCallback(() => {
+    fetchReports();
+  }, [fetchReports]);
+  return {
+    reports,
+    loading,
+    error,
+    refresh,
+    totalCount
+  };
+}
+
+export { useFinOpsReports };
+//# sourceMappingURL=useFinOpsReports.esm.js.map