@terasky/backstage-plugin-vcf-automation 1.3.0 → 1.3.1

package/dist/components/VCFAutomationCCIResourceOverview.esm.js

@@ -1,12 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { useEntity } from '@backstage/plugin-catalog-react';
+import { useState, useMemo, useCallback } from 'react';
+import { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useApi } from '@backstage/core-plugin-api';
+import { usePermission } from '@backstage/plugin-permission-react';
 import { vcfAutomationApiRef } from '../api/VcfAutomationClient.esm.js';
+import { supervisorResourceEditPermission } from '@terasky/backstage-plugin-vcf-automation-common';
+import Editor from '@monaco-editor/react';
 import { InfoCard, Progress, ResponseErrorPanel, StructuredMetadataTable, CodeSnippet, StatusPending, StatusError, StatusOK } from '@backstage/core-components';
-import { Typography, Grid, Box, Chip, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
+import { Typography, Grid, Box, Chip, Button, Accordion, AccordionSummary, AccordionDetails, Dialog, DialogTitle, DialogContent, DialogActions, Snackbar } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import EditIcon from '@material-ui/icons/Edit';
 import yaml__default from 'js-yaml';
 import useAsync from 'react-use/lib/useAsync';
 import { VCFAutomationVMPowerManagement } from './VCFAutomationVMPowerManagement.esm.js';
@@ -30,12 +35,62 @@ const useStyles = makeStyles((theme) => ({
   dependencyChip: {
     margin: theme.spacing(0.25),
     cursor: "pointer"
+  },
+  editButton: {
+    marginTop: theme.spacing(1)
+  },
+  monacoEditor: {
+    flex: 1,
+    minHeight: "500px",
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius
+  },
+  validationStatus: {
+    padding: theme.spacing(1),
+    borderTop: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+    flexShrink: 0
+  },
+  dialogContent: {
+    padding: theme.spacing(2),
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  },
+  editorContainer: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    overflow: "hidden"
+  },
+  yamlValidationError: {
+    color: theme.palette.error.main,
+    marginTop: theme.spacing(1),
+    fontSize: "0.875rem"
   }
 }));
 const VCFAutomationCCIResourceOverview = () => {
   const classes = useStyles();
   const { entity } = useEntity();
   const api = useApi(vcfAutomationApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const { allowed: canEditResource } = usePermission({
+    permission: supervisorResourceEditPermission
+  });
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editingYaml, setEditingYaml] = useState("");
+  const [originalManifest, setOriginalManifest] = useState(null);
+  const [isLoadingManifest, setIsLoadingManifest] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [yamlValidationError, setYamlValidationError] = useState("");
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success"
+  });
   const deploymentId = entity.spec?.system;
   const resourceId = entity.metadata.name;
   const instanceName = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-instance"];
@@ -120,21 +175,154 @@ const VCFAutomationCCIResourceOverview = () => {
   const objectData = annotationData.objectData || apiResourceData?.properties?.object;
   const resourceContext = annotationData.resourceContext || apiResourceData?.properties?.context;
   const resourceKind = manifest?.kind || objectData?.kind;
-  const vmName = manifest?.metadata?.name || objectData?.metadata?.name;
+  const resourceName = manifest?.metadata?.name || objectData?.metadata?.name;
   const namespaceName = manifest?.metadata?.namespace || objectData?.metadata?.namespace;
-  const namespaceUrnId = useMemo(() => {
-    if (!isStandalone || !namespaceName) return void 0;
-    const contextData = typeof resourceContext === "string" ? JSON.parse(resourceContext || "{}") : resourceContext;
-    const urnId = contextData?.namespaceUrnId || namespaceName;
-    console.log("Debug - Standalone VM URN ID resolution:", {
-      namespaceName,
-      resourceContext,
-      contextData,
-      urnId,
-      isStandalone
-    });
-    return urnId;
-  }, [isStandalone, namespaceName, resourceContext]);
+  const apiVersion = manifest?.apiVersion || objectData?.apiVersion;
+  const vmName = resourceName;
+  const extractNamespaceUrnId = useCallback((endpoint) => {
+    const match = endpoint.match(/\/namespaces\/(urn:vcloud:namespace:[^\/]+)/);
+    return match ? match[1] : void 0;
+  }, []);
+  const findCCINamespaceParent = useCallback(async (currentEntity, depth = 0) => {
+    if (depth >= 3) return void 0;
+    if (currentEntity.spec?.type === "CCI.Supervisor.Namespace") {
+      const endpoint = currentEntity.metadata?.annotations?.["terasky.backstage.io/vcf-automation-cci-namespace-endpoint"];
+      if (endpoint) {
+        return extractNamespaceUrnId(endpoint);
+      }
+    }
+    const parentRef = currentEntity.spec?.subcomponentOf;
+    if (!parentRef) return void 0;
+    try {
+      const parentEntity = await catalogApi.getEntityByRef(parentRef);
+      if (parentEntity) {
+        return await findCCINamespaceParent(parentEntity, depth + 1);
+      }
+    } catch (error2) {
+      console.warn("Failed to fetch parent entity:", parentRef, error2);
+    }
+    return void 0;
+  }, [catalogApi, extractNamespaceUrnId]);
+  const { value: namespaceUrnId } = useAsync(async () => {
+    if (!namespaceName) return void 0;
+    if (isStandalone) {
+      let contextData = null;
+      try {
+        contextData = typeof resourceContext === "string" ? JSON.parse(resourceContext || "{}") : resourceContext;
+      } catch (error2) {
+        console.log("Debug - Resource context is not JSON, treating as string:", resourceContext);
+        contextData = null;
+      }
+      const urnId = contextData?.namespaceUrnId || namespaceName;
+      console.log("Debug - Standalone CCI Resource URN ID resolution:", {
+        namespaceName,
+        resourceContext,
+        contextData,
+        urnId
+      });
+      return urnId;
+    } else {
+      console.log("Debug - Looking for CCI Supervisor Namespace parent for deployment-managed resource");
+      const urnId = await findCCINamespaceParent(entity);
+      console.log("Debug - Deployment-managed CCI Resource URN ID resolution:", {
+        namespaceName,
+        urnId,
+        entityRef: entity.metadata.name
+      });
+      return urnId || namespaceName;
+    }
+  }, [namespaceName, resourceContext, isStandalone, entity, findCCINamespaceParent]);
+  const handleEditResource = useCallback(async () => {
+    if (!canEditResource || !namespaceName || !resourceName || !namespaceUrnId || !apiVersion || !resourceKind) {
+      return;
+    }
+    setIsLoadingManifest(true);
+    setEditModalOpen(true);
+    try {
+      const manifestResponse = await api.getSupervisorResourceManifest(
+        namespaceUrnId,
+        namespaceName,
+        resourceName,
+        apiVersion,
+        resourceKind,
+        instanceName
+      );
+      setOriginalManifest(manifestResponse);
+      const yamlContent = yaml__default.dump(manifestResponse, {
+        indent: 2,
+        lineWidth: -1,
+        noRefs: true,
+        sortKeys: false
+      });
+      setEditingYaml(yamlContent);
+      setYamlValidationError("");
+    } catch (error2) {
+      setSnackbar({
+        open: true,
+        message: `Failed to fetch resource manifest: ${error2 instanceof Error ? error2.message : "Unknown error"}`,
+        severity: "error"
+      });
+      setEditModalOpen(false);
+    } finally {
+      setIsLoadingManifest(false);
+    }
+  }, [canEditResource, namespaceName, resourceName, namespaceUrnId, apiVersion, resourceKind, instanceName, api]);
+  const handleSaveResource = useCallback(async () => {
+    if (!originalManifest || !namespaceName || !resourceName || !namespaceUrnId || !apiVersion || !resourceKind) {
+      return;
+    }
+    setIsSaving(true);
+    setConfirmDialogOpen(false);
+    try {
+      const updatedManifest = yaml__default.load(editingYaml);
+      await api.updateSupervisorResourceManifest(
+        namespaceUrnId,
+        namespaceName,
+        resourceName,
+        apiVersion,
+        resourceKind,
+        updatedManifest,
+        instanceName
+      );
+      setSnackbar({
+        open: true,
+        message: "Resource manifest updated successfully",
+        severity: "success"
+      });
+      setEditModalOpen(false);
+      setTimeout(() => window.location.reload(), 1e3);
+    } catch (error2) {
+      setSnackbar({
+        open: true,
+        message: `Failed to update resource manifest: ${error2 instanceof Error ? error2.message : "Unknown error"}`,
+        severity: "error"
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [originalManifest, namespaceName, resourceName, namespaceUrnId, apiVersion, resourceKind, editingYaml, instanceName, api]);
+  const handleCloseSnackbar = useCallback(() => {
+    setSnackbar((prev) => ({ ...prev, open: false }));
+  }, []);
+  const validateYaml = useCallback((yamlString) => {
+    try {
+      yaml__default.load(yamlString);
+      setYamlValidationError("");
+      return true;
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Invalid YAML syntax";
+      setYamlValidationError(errorMessage);
+      return false;
+    }
+  }, []);
+  const handleYamlChange = useCallback((value) => {
+    setEditingYaml(value);
+    if (value.trim()) {
+      validateYaml(value);
+    } else {
+      setYamlValidationError("");
+    }
+  }, [validateYaml]);
   if (loading) {
     return /* @__PURE__ */ jsx(InfoCard, { title: "CCI Supervisor Resource", children: /* @__PURE__ */ jsx(Progress, {}) });
   }
@@ -208,133 +396,269 @@ const VCFAutomationCCIResourceOverview = () => {
     return Object.keys(statusInfo).length > 0 ? statusInfo : null;
   };
   const objectStatus = getObjectStatus();
-  return /* @__PURE__ */ jsx(InfoCard, { title: "CCI Supervisor Resource Overview", children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
-    isStandalone && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(
-      Chip,
-      {
-        label: "Standalone Resource",
-        color: "secondary",
-        variant: "outlined",
-        size: "small"
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Basic Information" }),
-      /* @__PURE__ */ jsx(StructuredMetadataTable, { metadata: basicInfo })
-    ] }),
-    vmOrganizationType === "all-apps" && resourceKind === "VirtualMachine" && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Power Management" }),
-      /* @__PURE__ */ jsx(
-        VCFAutomationVMPowerManagement,
-        {
-          entity,
-          resourceId,
-          instanceName,
-          isStandalone,
-          vmName: isStandalone ? vmName : void 0,
-          namespaceName: isStandalone ? namespaceName : void 0,
-          namespaceUrnId: isStandalone ? namespaceUrnId : void 0
-        }
-      )
-    ] }),
-    entity.spec?.dependsOn && Array.isArray(entity.spec.dependsOn) && entity.spec.dependsOn.length > 0 && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Dependencies" }),
-      /* @__PURE__ */ jsx(Box, { children: entity.spec.dependsOn.filter((dep) => typeof dep === "string").map((dep, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(InfoCard, { title: "CCI Supervisor Resource Overview", children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
+      isStandalone && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(
         Chip,
         {
-          label: dep,
-          size: "small",
-          className: classes.dependencyChip,
-          color: "primary",
-          variant: "outlined"
-        },
-        index
-      )) })
-    ] }),
-    resourceData.wait?.conditions && resourceData.wait.conditions.length > 0 && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Wait Conditions" }),
-      /* @__PURE__ */ jsx(Box, { children: resourceData.wait.conditions.map((condition, index) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-        renderStatusIcon(condition.status),
+          label: "Standalone Resource",
+          color: "secondary",
+          variant: "outlined",
+          size: "small"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Basic Information" }),
+        /* @__PURE__ */ jsx(StructuredMetadataTable, { metadata: basicInfo })
+      ] }),
+      vmOrganizationType === "all-apps" && resourceKind === "VirtualMachine" && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Power Management" }),
         /* @__PURE__ */ jsx(
-          Chip,
+          VCFAutomationVMPowerManagement,
           {
-            label: `${condition.type}: ${condition.status}`,
-            size: "small",
-            className: classes.conditionChip,
-            color: condition.status === "True" ? "primary" : "default"
+            entity,
+            resourceId,
+            instanceName,
+            isStandalone,
+            vmName: isStandalone ? vmName : void 0,
+            namespaceName: isStandalone ? namespaceName : void 0,
+            namespaceUrnId: isStandalone ? namespaceUrnId : void 0
           }
         )
-      ] }, index)) })
-    ] }),
-    objectData?.status?.conditions && objectData.status.conditions.length > 0 && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Resource Conditions" }),
-      /* @__PURE__ */ jsx(Box, { children: objectData.status.conditions.map((condition, index) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-        renderStatusIcon(condition.status),
+      ] }),
+      canEditResource && vmOrganizationType === "all-apps" && resourceKind === "VirtualMachine" && resourceName && namespaceName && namespaceUrnId && apiVersion && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Box, { mt: vmOrganizationType === "all-apps" ? 0 : 2, children: [
+        vmOrganizationType !== "all-apps" && /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Resource Management" }),
         /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            color: "primary",
+            startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
+            onClick: handleEditResource,
+            className: classes.editButton,
+            disabled: isLoadingManifest,
+            children: "Edit Resource Manifest"
+          }
+        )
+      ] }) }),
+      canEditResource && (resourceKind !== "VirtualMachine" || vmOrganizationType !== "all-apps") && resourceName && namespaceName && namespaceUrnId && apiVersion && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Resource Management" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            color: "primary",
+            startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
+            onClick: handleEditResource,
+            className: classes.editButton,
+            disabled: isLoadingManifest,
+            children: "Edit Resource Manifest"
+          }
+        )
+      ] }),
+      entity.spec?.dependsOn && Array.isArray(entity.spec.dependsOn) && entity.spec.dependsOn.length > 0 && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Dependencies" }),
+        /* @__PURE__ */ jsx(Box, { children: entity.spec.dependsOn.filter((dep) => typeof dep === "string").map((dep, index) => /* @__PURE__ */ jsx(
           Chip,
           {
-            label: `${condition.type}: ${condition.status}`,
+            label: dep,
             size: "small",
-            className: classes.conditionChip,
-            color: condition.status === "True" ? "primary" : "default"
+            className: classes.dependencyChip,
+            color: "primary",
+            variant: "outlined"
+          },
+          index
+        )) })
+      ] }),
+      resourceData.wait?.conditions && resourceData.wait.conditions.length > 0 && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Wait Conditions" }),
+        /* @__PURE__ */ jsx(Box, { children: resourceData.wait.conditions.map((condition, index) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
+          renderStatusIcon(condition.status),
+          /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: `${condition.type}: ${condition.status}`,
+              size: "small",
+              className: classes.conditionChip,
+              color: condition.status === "True" ? "primary" : "default"
+            }
+          )
+        ] }, index)) })
+      ] }),
+      objectData?.status?.conditions && objectData.status.conditions.length > 0 && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Resource Conditions" }),
+        /* @__PURE__ */ jsx(Box, { children: objectData.status.conditions.map((condition, index) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
+          renderStatusIcon(condition.status),
+          /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: `${condition.type}: ${condition.status}`,
+              size: "small",
+              className: classes.conditionChip,
+              color: condition.status === "True" ? "primary" : "default"
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", style: { marginLeft: 8 }, children: condition.lastTransitionTime })
+        ] }, index)) })
+      ] }),
+      objectStatus && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Resource Status" }),
+        /* @__PURE__ */ jsx(StructuredMetadataTable, { metadata: objectStatus })
+      ] }),
+      manifest && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Accordion, { className: classes.yamlContainer, children: [
+        /* @__PURE__ */ jsx(
+          AccordionSummary,
+          {
+            expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+            "aria-controls": "manifest-content",
+            id: "manifest-header",
+            children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Resource Manifest" })
           }
         ),
-        /* @__PURE__ */ jsx(Typography, { variant: "caption", style: { marginLeft: 8 }, children: condition.lastTransitionTime })
-      ] }, index)) })
-    ] }),
-    objectStatus && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Resource Status" }),
-      /* @__PURE__ */ jsx(StructuredMetadataTable, { metadata: objectStatus })
-    ] }),
-    manifest && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Accordion, { className: classes.yamlContainer, children: [
-      /* @__PURE__ */ jsx(
-        AccordionSummary,
-        {
-          expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
-          "aria-controls": "manifest-content",
-          id: "manifest-header",
-          children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Resource Manifest" })
-        }
-      ),
-      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
-        CodeSnippet,
-        {
-          text: formatYaml(manifest),
-          language: "yaml",
-          showLineNumbers: true,
-          customStyle: {
-            fontSize: "12px",
-            maxHeight: "500px",
-            overflow: "auto"
+        /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
+          CodeSnippet,
+          {
+            text: formatYaml(manifest),
+            language: "yaml",
+            showLineNumbers: true,
+            customStyle: {
+              fontSize: "12px",
+              maxHeight: "500px",
+              overflow: "auto"
+            }
           }
-        }
-      ) }) })
-    ] }) }),
-    objectData && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Accordion, { className: classes.yamlContainer, children: [
-      /* @__PURE__ */ jsx(
-        AccordionSummary,
-        {
-          expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
-          "aria-controls": "object-content",
-          id: "object-header",
-          children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Kubernetes Object" })
-        }
-      ),
-      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
-        CodeSnippet,
-        {
-          text: formatYaml(objectData),
-          language: "yaml",
-          showLineNumbers: true,
-          customStyle: {
-            fontSize: "12px",
-            maxHeight: "500px",
-            overflow: "auto"
+        ) }) })
+      ] }) }),
+      objectData && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Accordion, { className: classes.yamlContainer, children: [
+        /* @__PURE__ */ jsx(
+          AccordionSummary,
+          {
+            expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+            "aria-controls": "object-content",
+            id: "object-header",
+            children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Kubernetes Object" })
           }
-        }
-      ) }) })
-    ] }) })
-  ] }) });
+        ),
+        /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
+          CodeSnippet,
+          {
+            text: formatYaml(objectData),
+            language: "yaml",
+            showLineNumbers: true,
+            customStyle: {
+              fontSize: "12px",
+              maxHeight: "500px",
+              overflow: "auto"
+            }
+          }
+        ) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: editModalOpen,
+        onClose: () => setEditModalOpen(false),
+        maxWidth: "xl",
+        fullWidth: true,
+        PaperProps: {
+          style: {
+            height: "90vh",
+            maxHeight: "90vh"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(DialogTitle, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Edit Resource Manifest" }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+              resourceName,
+              " (",
+              resourceKind,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(DialogContent, { className: classes.dialogContent, dividers: true, children: isLoadingManifest ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", flex: 1, children: /* @__PURE__ */ jsx(Progress, {}) }) : /* @__PURE__ */ jsxs(Box, { className: classes.editorContainer, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "YAML Editor" }),
+            /* @__PURE__ */ jsx(Box, { className: classes.monacoEditor, children: /* @__PURE__ */ jsx(
+              Editor,
+              {
+                height: "100%",
+                defaultLanguage: "yaml",
+                value: editingYaml,
+                onChange: (value) => handleYamlChange(value || ""),
+                theme: "vs-dark",
+                options: {
+                  minimap: { enabled: false },
+                  scrollBeyondLastLine: false,
+                  fontSize: 14,
+                  lineNumbers: "on",
+                  wordWrap: "off",
+                  automaticLayout: true,
+                  tabSize: 2,
+                  insertSpaces: true,
+                  folding: true,
+                  renderWhitespace: "selection"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Box, { className: classes.validationStatus, children: yamlValidationError ? /* @__PURE__ */ jsxs(Typography, { className: classes.yamlValidationError, children: [
+              "\u26A0\uFE0F YAML Validation Error: ",
+              yamlValidationError
+            ] }) : editingYaml.trim() ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "\u2705 YAML syntax is valid" }) : /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Enter YAML content above" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(Button, { onClick: () => setEditModalOpen(false), color: "primary", children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => setConfirmDialogOpen(true),
+                color: "primary",
+                variant: "contained",
+                disabled: isLoadingManifest || !editingYaml.trim() || !!yamlValidationError,
+                children: "Save Changes"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: confirmDialogOpen,
+        onClose: () => setConfirmDialogOpen(false),
+        maxWidth: "sm",
+        fullWidth: true,
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Confirm Changes" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Typography, { children: "Are you sure you want to apply these changes to the resource? This action will update the Kubernetes resource based on your modifications." }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(Button, { onClick: () => setConfirmDialogOpen(false), color: "primary", children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleSaveResource,
+                color: "primary",
+                variant: "contained",
+                disabled: isSaving,
+                children: isSaving ? "Applying..." : "Apply Changes"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: snackbar.open,
+        autoHideDuration: 6e3,
+        onClose: handleCloseSnackbar,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        children: /* @__PURE__ */ jsx(Alert, { onClose: handleCloseSnackbar, severity: snackbar.severity, children: snackbar.message })
+      }
+    )
+  ] });
 };
 
 export { VCFAutomationCCIResourceOverview };