@openchoreo/backstage-plugin-openchoreo-observability 1.1.0

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

@@ -0,0 +1,593 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { Box, Typography, TextField, LinearProgress, Button, Tooltip } from '@material-ui/core';
+import BuildIcon from '@material-ui/icons/Build';
+import CheckIcon from '@material-ui/icons/Check';
+import CloseIcon from '@material-ui/icons/Close';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import { useApi, fetchApiRef } from '@backstage/core-plugin-api';
+import { useRcaUpdatePermission } from '@openchoreo/backstage-plugin-react';
+import { useRCAReportStyles } from '../styles.esm.js';
+import { FormattedText } from '../FormattedText.esm.js';
+import { applyEnvChange, applyFileChange, applyJsonPointer } from '../../../../utils/applyResourceChange.esm.js';
+
+function allActionsResolved(actions) {
+  return actions.length > 0 && actions.every(
+    ({ action }) => action.status === "applied" || action.status === "dismissed"
+  );
+}
+function buildFieldTree(fields) {
+  const prefixMap = /* @__PURE__ */ new Map();
+  const leaves = [];
+  for (const f of fields) {
+    const dot = f.label.indexOf(".");
+    if (dot > 0) {
+      const prefix = f.label.slice(0, dot);
+      const list = prefixMap.get(prefix) ?? [];
+      list.push({ ...f, label: f.label.slice(dot + 1) });
+      prefixMap.set(prefix, list);
+    } else {
+      leaves.push({ label: null, field: f });
+    }
+  }
+  const nodes = [...leaves];
+  for (const [prefix, children] of prefixMap) {
+    if (children.length === 1) {
+      nodes.push({
+        label: null,
+        field: { ...children[0], label: `${prefix}.${children[0].label}` }
+      });
+    } else {
+      nodes.push({ label: prefix, children: buildFieldTree(children) });
+    }
+  }
+  return nodes;
+}
+function extractPatchSections(rc) {
+  const sections = [];
+  let fieldIdx = 0;
+  const envVars = [];
+  const files = [];
+  for (const e of rc.env ?? []) {
+    envVars.push({ label: e.key, value: e.value, fieldIdx: fieldIdx++ });
+  }
+  for (const f of rc.files ?? []) {
+    files.push({
+      fileKey: f.key,
+      mountPath: f.mount_path,
+      content: { value: f.value, fieldIdx: fieldIdx++ }
+    });
+  }
+  if (envVars.length > 0 || files.length > 0) {
+    sections.push({
+      title: "Workload Overrides",
+      envVars: envVars.length > 0 ? envVars : void 0,
+      files: files.length > 0 ? files : void 0
+    });
+  }
+  const componentTypeFields = [];
+  const traitFieldsMap = /* @__PURE__ */ new Map();
+  for (const f of rc.fields ?? []) {
+    const parts = f.json_pointer.replace(/^\/spec\//, "").split("/");
+    const section = parts[0];
+    const label = parts.slice(section === "traitEnvironmentConfigs" ? 2 : 1).join(".");
+    if (section === "traitEnvironmentConfigs" && parts.length >= 2) {
+      const traitName = parts[1];
+      const list = traitFieldsMap.get(traitName) ?? [];
+      list.push({ label, value: f.value, fieldIdx: fieldIdx++ });
+      traitFieldsMap.set(traitName, list);
+    } else {
+      componentTypeFields.push({
+        label,
+        value: f.value,
+        fieldIdx: fieldIdx++
+      });
+    }
+  }
+  if (componentTypeFields.length > 0) {
+    sections.push({
+      title: "Component Overrides",
+      fieldTree: buildFieldTree(componentTypeFields)
+    });
+  }
+  for (const [traitName, traitFields] of traitFieldsMap) {
+    sections.push({
+      title: `Trait: ${traitName}`,
+      fieldTree: buildFieldTree(traitFields)
+    });
+  }
+  return sections;
+}
+const monoInputStyle = { fontFamily: "monospace", fontSize: "0.8rem" };
+const PatchTabContent = ({
+  reportId,
+  chatContext,
+  revisedActions
+}) => {
+  const classes = useRCAReportStyles();
+  const fetchApi = useApi(fetchApiRef);
+  const {
+    canUpdateRca,
+    loading: permissionLoading,
+    deniedTooltip
+  } = useRcaUpdatePermission();
+  const allResolved = allActionsResolved(revisedActions);
+  const [phase, setPhase] = useState(allResolved ? "done" : "idle");
+  const [actionStates, setActionStates] = useState(
+    () => {
+      if (!allResolved) return /* @__PURE__ */ new Map();
+      const m = /* @__PURE__ */ new Map();
+      for (const { index, action } of revisedActions) {
+        m.set(index, {
+          status: action.status === "dismissed" ? "dismissed" : "success"
+        });
+      }
+      return m;
+    }
+  );
+  const [error, setError] = useState("");
+  const [editedValues, setEditedValues] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const getEditedValue = (actionIdx, rcIdx, fieldIdx, original) => {
+    const key = `${actionIdx}-${rcIdx}-${fieldIdx}`;
+    return editedValues.get(key) ?? String(original);
+  };
+  const getPatchValue = (actionIdx, rcIdx, fieldIdx, original) => {
+    const key = `${actionIdx}-${rcIdx}-${fieldIdx}`;
+    const edited = editedValues.get(key);
+    if (edited === void 0) return original;
+    if (typeof original === "number") {
+      const n = Number(edited);
+      return Number.isNaN(n) ? edited : n;
+    }
+    if (typeof original === "boolean") {
+      return edited === "true";
+    }
+    return edited;
+  };
+  const setEditedValue = (actionIdx, rcIdx, fieldIdx, value) => {
+    setEditedValues((prev) => {
+      const next = new Map(prev);
+      next.set(`${actionIdx}-${rcIdx}-${fieldIdx}`, value);
+      return next;
+    });
+  };
+  const applyFixes = useCallback(
+    async (actions) => {
+      if (!chatContext.backendBaseUrl) {
+        setError("Backend URL is not available");
+        setPhase("error");
+        return;
+      }
+      setPhase("running");
+      setError("");
+      const initial = /* @__PURE__ */ new Map();
+      for (const { index } of actions) {
+        initial.set(index, { status: "applying" });
+      }
+      setActionStates(initial);
+      const successIndices = [];
+      const resultStates = /* @__PURE__ */ new Map();
+      try {
+        const bindingPatches = /* @__PURE__ */ new Map();
+        for (const { index: actionIndex, action } of actions) {
+          const resourceChange = action.change;
+          if (!resourceChange) continue;
+          const name = resourceChange.release_binding;
+          const patches = bindingPatches.get(name) ?? [];
+          patches.push({ actionIndex, rcIdx: 0, resourceChange });
+          bindingPatches.set(name, patches);
+        }
+        const failedActions = /* @__PURE__ */ new Set();
+        for (const [bindingName, patches] of bindingPatches) {
+          const bindingUrl = `${chatContext.backendBaseUrl}/release-binding?namespaceName=${encodeURIComponent(
+            chatContext.namespaceName
+          )}&bindingName=${encodeURIComponent(bindingName)}`;
+          const getResponse = await fetchApi.fetch(bindingUrl);
+          if (!getResponse.ok) {
+            const detail = getResponse.status === 404 ? `Release binding '${bindingName}' not found` : `Failed to get release binding: ${getResponse.statusText}`;
+            for (const { actionIndex } of patches) {
+              resultStates.set(actionIndex, {
+                status: "failed",
+                details: detail
+              });
+              failedActions.add(actionIndex);
+            }
+            continue;
+          }
+          const binding = await getResponse.json();
+          const updated = structuredClone(binding);
+          try {
+            for (const { actionIndex, rcIdx, resourceChange } of patches) {
+              let itemIdx = 0;
+              for (const e of resourceChange.env ?? []) {
+                const editedVal = getEditedValue(
+                  actionIndex,
+                  rcIdx,
+                  itemIdx,
+                  e.value
+                );
+                applyEnvChange(updated, e.key, editedVal);
+                itemIdx++;
+              }
+              for (const f of resourceChange.files ?? []) {
+                const editedValue = getEditedValue(
+                  actionIndex,
+                  rcIdx,
+                  itemIdx++,
+                  f.value
+                );
+                applyFileChange(updated, f.key, f.mount_path, editedValue);
+              }
+              for (const f of resourceChange.fields ?? []) {
+                const patchVal = getPatchValue(
+                  actionIndex,
+                  rcIdx,
+                  itemIdx,
+                  f.value
+                );
+                applyJsonPointer(updated, f.json_pointer, patchVal);
+                itemIdx++;
+              }
+            }
+          } catch (err) {
+            for (const { actionIndex } of patches) {
+              resultStates.set(actionIndex, {
+                status: "failed",
+                details: err instanceof Error ? err.message : "Failed to apply changes"
+              });
+              failedActions.add(actionIndex);
+            }
+            continue;
+          }
+          const putResponse = await fetchApi.fetch(bindingUrl, {
+            method: "PUT",
+            body: JSON.stringify({
+              metadata: updated.metadata,
+              spec: updated.spec
+            }),
+            headers: {
+              "Content-Type": "application/json"
+            }
+          });
+          if (!putResponse.ok) {
+            for (const { actionIndex } of patches) {
+              resultStates.set(actionIndex, {
+                status: "failed",
+                details: `Failed to update release binding: ${putResponse.statusText}`
+              });
+              failedActions.add(actionIndex);
+            }
+          }
+        }
+        for (const { index } of actions) {
+          if (!failedActions.has(index)) {
+            successIndices.push(index);
+            resultStates.set(index, {
+              status: "success",
+              details: "Applied successfully"
+            });
+          }
+        }
+        if (successIndices.length > 0) {
+          try {
+            await chatContext.rcaAgentApi.updateActionStatuses(
+              reportId,
+              {
+                namespaceName: chatContext.namespaceName,
+                environmentName: chatContext.environmentName
+              },
+              { appliedIndices: successIndices }
+            );
+          } catch {
+          }
+        }
+        setActionStates(resultStates);
+        setPhase(successIndices.length > 0 ? "done" : "error");
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Failed to apply fixes";
+        const failed = /* @__PURE__ */ new Map();
+        for (const { index } of actions) {
+          failed.set(index, { status: "failed", details: msg });
+        }
+        setActionStates(failed);
+        setError(msg);
+        setPhase("error");
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [chatContext, reportId, fetchApi, editedValues]
+  );
+  const handleApplySingle = useCallback(
+    (index, action) => {
+      applyFixes([{ index, action }]);
+    },
+    [applyFixes]
+  );
+  const handleDismiss = useCallback(
+    async (index) => {
+      setActionStates((prev) => {
+        const next = new Map(prev);
+        next.set(index, { status: "applying" });
+        return next;
+      });
+      try {
+        await chatContext.rcaAgentApi.updateActionStatuses(
+          reportId,
+          {
+            namespaceName: chatContext.namespaceName,
+            environmentName: chatContext.environmentName
+          },
+          { dismissedIndices: [index] }
+        );
+        setActionStates((prev) => {
+          const next = new Map(prev);
+          next.set(index, { status: "dismissed" });
+          return next;
+        });
+      } catch {
+        setActionStates((prev) => {
+          const next = new Map(prev);
+          next.set(index, { status: "failed", details: "Failed to dismiss" });
+          return next;
+        });
+      }
+    },
+    [chatContext, reportId]
+  );
+  const renderActionButtons = (index, action) => {
+    const localStatus = actionStates.get(index)?.status;
+    if (localStatus === "applying") {
+      return /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", disabled: true, children: "Applying..." });
+    }
+    if (localStatus === "success" || action.status === "applied") {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          size: "small",
+          disabled: true,
+          startIcon: /* @__PURE__ */ jsx(CheckIcon, {}),
+          children: "Applied"
+        }
+      );
+    }
+    if (localStatus === "dismissed" || action.status === "dismissed") {
+      return /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", disabled: true, children: "Dismissed" });
+    }
+    if (localStatus === "failed") {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          color: "secondary",
+          size: "small",
+          startIcon: /* @__PURE__ */ jsx(ErrorOutlineIcon, {}),
+          disabled: true,
+          children: "Failed"
+        }
+      );
+    }
+    const busy = phase === "running";
+    const disableActions = busy || permissionLoading || !canUpdateRca;
+    return /* @__PURE__ */ jsxs(Box, { display: "flex", style: { gap: 8 }, children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: deniedTooltip, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          size: "small",
+          startIcon: /* @__PURE__ */ jsx(CloseIcon, {}),
+          onClick: () => handleDismiss(index),
+          disabled: disableActions,
+          children: "Dismiss"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: deniedTooltip, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          color: "primary",
+          size: "small",
+          startIcon: /* @__PURE__ */ jsx(BuildIcon, {}),
+          onClick: () => handleApplySingle(index, action),
+          disabled: disableActions,
+          children: "Apply Fix"
+        }
+      ) }) })
+    ] });
+  };
+  if (revisedActions.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { padding: 2, textAlign: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No revised actions available. The remediation agent has not yet proposed any concrete fixes for this report." }) });
+  }
+  const isRunning = phase === "running";
+  const renderFieldNodes = (nodes, actionIdx, disabled, depth = 0) => nodes.map((node, nIdx) => {
+    if (node.field) {
+      const f = node.field;
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          variant: "outlined",
+          size: "small",
+          label: f.label,
+          value: getEditedValue(actionIdx, 0, f.fieldIdx, f.value),
+          onChange: (e) => setEditedValue(actionIdx, 0, f.fieldIdx, e.target.value),
+          disabled,
+          InputProps: { style: monoInputStyle },
+          InputLabelProps: { shrink: true }
+        },
+        `${actionIdx}-field-${f.fieldIdx}`
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        style: { gap: 10 },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: node.label }),
+          node.children && renderFieldNodes(node.children, actionIdx, disabled, depth + 1)
+        ]
+      },
+      `${actionIdx}-grp-${depth}-${nIdx}`
+    );
+  });
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    revisedActions.map(({ index, action }) => {
+      const rc = action.change;
+      const sections = rc ? extractPatchSections(rc) : [];
+      const state = actionStates.get(index)?.status;
+      const disabled = isRunning || action.status === "applied" || action.status === "dismissed" || state === "success" || state === "dismissed";
+      return /* @__PURE__ */ jsxs(Box, { className: classes.patchActionCard, children: [
+        rc && /* @__PURE__ */ jsx(Typography, { className: classes.patchBindingName, children: rc.release_binding }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "div",
+            className: classes.patchActionDescription,
+            children: /* @__PURE__ */ jsx(FormattedText, { text: action.description, disableMarkdown: true })
+          }
+        ),
+        sections.length > 0 && /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "column", style: { gap: 16 }, children: sections.map((section, sIdx) => /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            flexDirection: "column",
+            style: { gap: 10 },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  style: {
+                    fontSize: "0.65rem",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.5px"
+                  },
+                  color: "textSecondary",
+                  children: section.title
+                }
+              ),
+              section.envVars && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  style: { gap: 8 },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "caption",
+                        style: { fontSize: "0.6rem" },
+                        color: "textSecondary",
+                        children: "Environment Variables"
+                      }
+                    ),
+                    section.envVars.map((ev) => /* @__PURE__ */ jsx(
+                      TextField,
+                      {
+                        fullWidth: true,
+                        variant: "outlined",
+                        size: "small",
+                        label: ev.label,
+                        value: getEditedValue(
+                          index,
+                          0,
+                          ev.fieldIdx,
+                          ev.value
+                        ),
+                        onChange: (e) => setEditedValue(
+                          index,
+                          0,
+                          ev.fieldIdx,
+                          e.target.value
+                        ),
+                        disabled,
+                        InputProps: { style: monoInputStyle },
+                        InputLabelProps: { shrink: true }
+                      },
+                      `${index}-env-${ev.fieldIdx}`
+                    ))
+                  ]
+                }
+              ),
+              section.files && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  style: { gap: 8 },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "caption",
+                        style: { fontSize: "0.6rem" },
+                        color: "textSecondary",
+                        children: "Files"
+                      }
+                    ),
+                    section.files.map((file) => /* @__PURE__ */ jsx(
+                      TextField,
+                      {
+                        fullWidth: true,
+                        variant: "outlined",
+                        size: "small",
+                        label: `${file.mountPath.replace(/\/?$/, "/")}${file.fileKey}`,
+                        value: getEditedValue(
+                          index,
+                          0,
+                          file.content.fieldIdx,
+                          file.content.value
+                        ),
+                        onChange: (e) => setEditedValue(
+                          index,
+                          0,
+                          file.content.fieldIdx,
+                          e.target.value
+                        ),
+                        disabled,
+                        multiline: true,
+                        minRows: 3,
+                        maxRows: 12,
+                        InputProps: { style: monoInputStyle },
+                        InputLabelProps: {
+                          shrink: true,
+                          style: {
+                            maxWidth: "100%",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          }
+                        }
+                      },
+                      `${index}-file-${file.content.fieldIdx}`
+                    ))
+                  ]
+                }
+              ),
+              section.fieldTree && renderFieldNodes(section.fieldTree, index, disabled)
+            ]
+          },
+          `${index}-s-${sIdx}`
+        )) }),
+        actionStates.get(index)?.status === "applying" && /* @__PURE__ */ jsx(LinearProgress, { style: { borderRadius: 2 } }),
+        /* @__PURE__ */ jsxs(Box, { className: classes.patchActionFooter, children: [
+          /* @__PURE__ */ jsx(Box, {}),
+          renderActionButtons(index, action)
+        ] })
+      ] }, index);
+    }),
+    phase === "error" && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mt: 1, p: 1, style: { gap: 8 }, children: [
+      /* @__PURE__ */ jsx(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "error", children: error })
+    ] })
+  ] });
+};
+
+export { PatchTabContent, allActionsResolved };
+//# sourceMappingURL=PatchTabContent.esm.js.map