@openchoreo/backstage-plugin-openchoreo-observability 1.1.0

package/dist/components/RCA/RCAReport/sections/InvestigationPathSection.esm.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Box, Typography, ButtonBase, Collapse } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { Timeline, TimelineItem, TimelineOppositeContent, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent } from '@material-ui/lab';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { useRCAReportStyles } from '../styles.esm.js';
+import { FormattedText } from '../FormattedText.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  stepCard: {
+    borderRadius: theme.shape.borderRadius,
+    overflow: "hidden",
+    marginBottom: theme.spacing(0.5)
+  },
+  stepHeader: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: theme.spacing(1),
+    padding: theme.spacing(1.5),
+    width: "100%",
+    textAlign: "left",
+    backgroundColor: "transparent",
+    transition: "background-color 0.15s ease",
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  },
+  stepHeaderContent: {
+    flex: 1,
+    minWidth: 0
+  },
+  stepAction: {
+    fontWeight: 500,
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.primary,
+    marginBottom: theme.spacing(0.25)
+  },
+  stepRationale: {
+    fontStyle: "italic",
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.caption.fontSize
+  },
+  expandIcon: {
+    color: theme.palette.text.secondary,
+    transition: "transform 0.2s ease",
+    flexShrink: 0,
+    marginTop: theme.spacing(0.25)
+  },
+  expandIconOpen: {
+    transform: "rotate(180deg)"
+  },
+  stepOutcomeContainer: {
+    padding: theme.spacing(1.5),
+    paddingTop: theme.spacing(1),
+    borderTop: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.action.hover
+  },
+  stepOutcome: {
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.primary
+  }
+}));
+const InvestigationStepCard = ({ step }) => {
+  const classes = useStyles();
+  const [expanded, setExpanded] = useState(false);
+  const hasOutcome = !!step.outcome;
+  return /* @__PURE__ */ jsxs(Box, { className: classes.stepCard, children: [
+    /* @__PURE__ */ jsxs(
+      ButtonBase,
+      {
+        className: classes.stepHeader,
+        onClick: () => hasOutcome && setExpanded(!expanded),
+        disabled: !hasOutcome,
+        disableRipple: true,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: classes.stepHeaderContent, children: [
+            /* @__PURE__ */ jsx(Typography, { className: classes.stepAction, children: /* @__PURE__ */ jsx(FormattedText, { text: step.action || "" }) }),
+            step.rationale && /* @__PURE__ */ jsx(Typography, { className: classes.stepRationale, children: /* @__PURE__ */ jsx(FormattedText, { text: step.rationale }) })
+          ] }),
+          hasOutcome && /* @__PURE__ */ jsx(
+            ExpandMoreIcon,
+            {
+              className: `${classes.expandIcon} ${expanded ? classes.expandIconOpen : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    hasOutcome && /* @__PURE__ */ jsx(Collapse, { in: expanded, children: /* @__PURE__ */ jsx(Box, { className: classes.stepOutcomeContainer, children: /* @__PURE__ */ jsx(Typography, { component: "div", className: classes.stepOutcome, children: /* @__PURE__ */ jsx(FormattedText, { text: step.outcome || "" }) }) }) })
+  ] });
+};
+const InvestigationPathSection = ({
+  investigationPath
+}) => {
+  const classes = useRCAReportStyles();
+  if (!investigationPath || investigationPath.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { className: classes.timelineContainer, children: /* @__PURE__ */ jsx(Timeline, { style: { padding: "4px 0", margin: 0 }, children: investigationPath.map((step, idx) => /* @__PURE__ */ jsxs(TimelineItem, { style: { minHeight: "auto" }, children: [
+    /* @__PURE__ */ jsx(
+      TimelineOppositeContent,
+      {
+        style: {
+          maxWidth: 0,
+          padding: 0,
+          flex: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(TimelineSeparator, { children: [
+      /* @__PURE__ */ jsx(TimelineDot, { color: "primary", className: classes.numberedDot, children: /* @__PURE__ */ jsx(Typography, { className: classes.dotNumber, children: idx + 1 }) }),
+      idx < investigationPath.length - 1 && /* @__PURE__ */ jsx(TimelineConnector, {})
+    ] }),
+    /* @__PURE__ */ jsx(TimelineContent, { style: { paddingRight: 0 }, children: /* @__PURE__ */ jsx(InvestigationStepCard, { step }) })
+  ] }, idx)) }) });
+};
+
+export { InvestigationPathSection };
+//# sourceMappingURL=InvestigationPathSection.esm.js.map

package/dist/components/RCA/RCAReport/sections/InvestigationPathSection.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvestigationPathSection.esm.js","sources":["../../../../../src/components/RCA/RCAReport/sections/InvestigationPathSection.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box, Typography, Collapse, ButtonBase } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {\n  Timeline,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineDot,\n  TimelineConnector,\n  TimelineContent,\n  TimelineOppositeContent,\n} from '@material-ui/lab';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { useRCAReportStyles } from '../styles';\nimport { FormattedText } from '../FormattedText';\nimport type { AIRCAAgentComponents } from '@openchoreo/backstage-plugin-common';\n\ntype InvestigationStep = AIRCAAgentComponents['schemas']['InvestigationStep'];\n\ninterface InvestigationPathSectionProps {\n  investigationPath?: InvestigationStep[];\n}\n\nconst useStyles = makeStyles(theme => ({\n  stepCard: {\n    borderRadius: theme.shape.borderRadius,\n    overflow: 'hidden',\n    marginBottom: theme.spacing(0.5),\n  },\n  stepHeader: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1.5),\n    width: '100%',\n    textAlign: 'left',\n    backgroundColor: 'transparent',\n    transition: 'background-color 0.15s ease',\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n  },\n  stepHeaderContent: {\n    flex: 1,\n    minWidth: 0,\n  },\n  stepAction: {\n    fontWeight: 500,\n    fontSize: theme.typography.body2.fontSize,\n    color: theme.palette.text.primary,\n    marginBottom: theme.spacing(0.25),\n  },\n  stepRationale: {\n    fontStyle: 'italic',\n    color: theme.palette.text.secondary,\n    fontSize: theme.typography.caption.fontSize,\n  },\n  expandIcon: {\n    color: theme.palette.text.secondary,\n    transition: 'transform 0.2s ease',\n    flexShrink: 0,\n    marginTop: theme.spacing(0.25),\n  },\n  expandIconOpen: {\n    transform: 'rotate(180deg)',\n  },\n  stepOutcomeContainer: {\n    padding: theme.spacing(1.5),\n    paddingTop: theme.spacing(1),\n    borderTop: `1px solid ${theme.palette.divider}`,\n    backgroundColor: theme.palette.action.hover,\n  },\n  stepOutcome: {\n    fontSize: theme.typography.body2.fontSize,\n    color: theme.palette.text.primary,\n  },\n}));\n\nconst InvestigationStepCard = ({ step }: { step: InvestigationStep }) => {\n  const classes = useStyles();\n  const [expanded, setExpanded] = useState(false);\n\n  const hasOutcome = !!step.outcome;\n\n  return (\n    <Box className={classes.stepCard}>\n      <ButtonBase\n        className={classes.stepHeader}\n        onClick={() => hasOutcome && setExpanded(!expanded)}\n        disabled={!hasOutcome}\n        disableRipple\n      >\n        <Box className={classes.stepHeaderContent}>\n          <Typography className={classes.stepAction}>\n            <FormattedText text={step.action || ''} />\n          </Typography>\n          {step.rationale && (\n            <Typography className={classes.stepRationale}>\n              <FormattedText text={step.rationale} />\n            </Typography>\n          )}\n        </Box>\n        {hasOutcome && (\n          <ExpandMoreIcon\n            className={`${classes.expandIcon} ${\n              expanded ? classes.expandIconOpen : ''\n            }`}\n          />\n        )}\n      </ButtonBase>\n      {hasOutcome && (\n        <Collapse in={expanded}>\n          <Box className={classes.stepOutcomeContainer}>\n            <Typography component=\"div\" className={classes.stepOutcome}>\n              <FormattedText text={step.outcome || ''} />\n            </Typography>\n          </Box>\n        </Collapse>\n      )}\n    </Box>\n  );\n};\n\nexport const InvestigationPathSection = ({\n  investigationPath,\n}: InvestigationPathSectionProps) => {\n  const classes = useRCAReportStyles();\n\n  if (!investigationPath || investigationPath.length === 0) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.timelineContainer}>\n      <Timeline style={{ padding: '4px 0', margin: 0 }}>\n        {investigationPath.map((step, idx) => (\n          <TimelineItem key={idx} style={{ minHeight: 'auto' }}>\n            <TimelineOppositeContent\n              style={{\n                maxWidth: 0,\n                padding: 0,\n                flex: 0,\n              }}\n            />\n            <TimelineSeparator>\n              <TimelineDot color=\"primary\" className={classes.numberedDot}>\n                <Typography className={classes.dotNumber}>{idx + 1}</Typography>\n              </TimelineDot>\n              {idx < investigationPath.length - 1 && <TimelineConnector />}\n            </TimelineSeparator>\n            <TimelineContent style={{ paddingRight: 0 }}>\n              <InvestigationStepCard step={step} />\n            </TimelineContent>\n          </TimelineItem>\n        ))}\n      </Timeline>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}