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

package/dist/components/VCFAutomationCCIResourceDetails.esm.js

@@ -1,11 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-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 { useAsync } from 'react-use';
+import Editor from '@monaco-editor/react';
 import { InfoCard, StructuredMetadataTable, Table, CodeSnippet, StatusPending, StatusError, StatusOK } from '@backstage/core-components';
-import { Typography, Grid, Card, CardContent, Tabs, Tab, Box, Chip, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
+import { Typography, Grid, Card, CardContent, Tabs, Tab, Box, Chip, Accordion, AccordionSummary, AccordionDetails, Button, 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 yaml from 'js-yaml';
-import { useState } from 'react';
+import * as yaml from 'js-yaml';
+import { vcfAutomationApiRef } from '../api/VcfAutomationClient.esm.js';
+import { supervisorResourceEditPermission } from '@terasky/backstage-plugin-vcf-automation-common';
 
 const useStyles = makeStyles((theme) => ({
   statusChip: {
@@ -35,6 +42,33 @@ const useStyles = makeStyles((theme) => ({
   },
   tabPanel: {
     paddingTop: theme.spacing(2)
+  },
+  yamlEditorContainer: {
+    height: "70vh",
+    minHeight: "500px",
+    display: "flex",
+    flexDirection: "column"
+  },
+  monacoEditor: {
+    flex: 1,
+    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
+  },
+  yamlValidationError: {
+    color: theme.palette.error.main,
+    fontSize: "0.875rem"
+  },
+  editorActions: {
+    display: "flex",
+    gap: theme.spacing(1),
+    marginTop: theme.spacing(2),
+    justifyContent: "flex-end"
   }
 }));
 function TabPanel(props) {
@@ -55,21 +89,273 @@ const VCFAutomationCCIResourceDetails = () => {
   const classes = useStyles();
   const { entity } = useEntity();
   const [tabValue, setTabValue] = useState(0);
-  const resourceProperties = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-properties"];
-  const resourceManifest = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-manifest"];
-  const resourceObject = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-object"];
-  const resourceContext = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-context"];
-  const resourceState = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-state"];
-  const syncStatus = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-sync-status"];
-  const createdAt = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-created-at"];
-  const origin = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-origin"];
-  const resourceData = resourceProperties ? JSON.parse(resourceProperties) : null;
-  const manifest = resourceManifest ? JSON.parse(resourceManifest) : null;
-  const objectData = resourceObject ? JSON.parse(resourceObject) : null;
+  const api = useApi(vcfAutomationApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const { allowed: canEditResource } = usePermission({
+    permission: supervisorResourceEditPermission
+  });
+  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"];
+  const isStandalone = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-origin"] === "STANDALONE";
+  const annotationData = useMemo(() => {
+    const resourceProperties = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-properties"];
+    const resourceManifest = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-manifest"];
+    const resourceObject = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-object"];
+    const resourceContext2 = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-context"];
+    const resourceState2 = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-state"];
+    const syncStatus2 = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-sync-status"];
+    const createdAt2 = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-created-at"];
+    const origin2 = entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-origin"];
+    return {
+      resourceData: resourceProperties && resourceProperties !== "{}" ? JSON.parse(resourceProperties) : null,
+      manifest: resourceManifest && resourceManifest !== "{}" ? JSON.parse(resourceManifest) : null,
+      objectData: resourceObject && resourceObject !== "{}" ? JSON.parse(resourceObject) : null,
+      resourceContext: resourceContext2 || "",
+      resourceState: resourceState2,
+      syncStatus: syncStatus2,
+      createdAt: createdAt2,
+      origin: origin2
+    };
+  }, [
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-properties"],
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-manifest"],
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-object"],
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-cci-resource-context"],
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-state"],
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-sync-status"],
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-created-at"],
+    entity.metadata.annotations?.["terasky.backstage.io/vcf-automation-resource-origin"]
+  ]);
+  const needsApiCall = !annotationData.resourceData || !annotationData.manifest || !annotationData.objectData;
+  const { value: apiResourceData, loading, error } = useAsync(async () => {
+    if (!needsApiCall || !resourceId) {
+      return null;
+    }
+    try {
+      if (isStandalone) {
+        const response = await api.getSupervisorResource(resourceId, instanceName);
+        if (response) {
+          return {
+            id: response.id,
+            properties: {
+              manifest: {
+                apiVersion: response.apiVersion,
+                kind: response.kind,
+                metadata: response.metadata,
+                spec: response.spec
+              },
+              object: {
+                apiVersion: response.apiVersion,
+                kind: response.kind,
+                metadata: response.metadata,
+                spec: response.spec,
+                status: response.status
+              },
+              context: JSON.stringify({
+                namespace: response.metadata.namespace,
+                apiVersion: response.apiVersion,
+                kind: response.kind,
+                standalone: true
+              })
+            }
+          };
+        }
+      } else {
+        if (!deploymentId) {
+          return null;
+        }
+        const response = await api.getDeploymentResources(deploymentId, instanceName);
+        let resources = null;
+        if (response) {
+          if (Array.isArray(response)) {
+            resources = response;
+          } else if (response.content && Array.isArray(response.content)) {
+            resources = response.content;
+          }
+        }
+        if (resources) {
+          return resources.find((r) => r.id === resourceId);
+        }
+      }
+      return null;
+    } catch (apiError) {
+      console.error("Failed to fetch resource data:", apiError);
+      return null;
+    }
+  }, [needsApiCall, isStandalone, deploymentId, resourceId, instanceName]);
+  const resourceData = annotationData.resourceData || apiResourceData;
+  const manifest = annotationData.manifest || apiResourceData?.properties?.manifest;
+  const objectData = annotationData.objectData || apiResourceData?.properties?.object;
+  const resourceContext = annotationData.resourceContext || apiResourceData?.properties?.context;
+  const resourceState = annotationData.resourceState;
+  const syncStatus = annotationData.syncStatus;
+  const createdAt = annotationData.createdAt;
+  const origin = annotationData.origin;
+  const resourceKind = manifest?.kind || objectData?.kind;
+  const resourceName = manifest?.metadata?.name || objectData?.metadata?.name;
+  const namespaceName = manifest?.metadata?.namespace || objectData?.metadata?.namespace;
+  const apiVersion = manifest?.apiVersion || objectData?.apiVersion;
+  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;
+      }
+      return contextData?.namespaceUrnId || namespaceName;
+    } else {
+      const urnId = await findCCINamespaceParent(entity);
+      return urnId || namespaceName;
+    }
+  }, [namespaceName, resourceContext, isStandalone, entity, findCCINamespaceParent]);
+  const loadManifestForEditing = useCallback(async () => {
+    if (!canEditResource || !namespaceName || !resourceName || !namespaceUrnId || !apiVersion || !resourceKind) {
+      return;
+    }
+    setIsLoadingManifest(true);
+    try {
+      const manifestResponse = await api.getSupervisorResourceManifest(
+        namespaceUrnId,
+        namespaceName,
+        resourceName,
+        apiVersion,
+        resourceKind,
+        instanceName
+      );
+      setOriginalManifest(manifestResponse);
+      const yamlContent = yaml.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"
+      });
+    } finally {
+      setIsLoadingManifest(false);
+    }
+  }, [canEditResource, namespaceName, resourceName, namespaceUrnId, apiVersion, resourceKind, instanceName, api]);
+  const validateYaml = useCallback((yamlString) => {
+    try {
+      yaml.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]);
+  const handleSaveResource = useCallback(async () => {
+    if (!originalManifest || !namespaceName || !resourceName || !namespaceUrnId || !apiVersion || !resourceKind) {
+      return;
+    }
+    setIsSaving(true);
+    setConfirmDialogOpen(false);
+    try {
+      const updatedManifest = yaml.load(editingYaml);
+      await api.updateSupervisorResourceManifest(
+        namespaceUrnId,
+        namespaceName,
+        resourceName,
+        apiVersion,
+        resourceKind,
+        updatedManifest,
+        instanceName
+      );
+      setSnackbar({
+        open: true,
+        message: "Resource manifest updated successfully",
+        severity: "success"
+      });
+      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 handleCancelEditing = useCallback(() => {
+    setEditingYaml("");
+    setOriginalManifest(null);
+    setYamlValidationError("");
+  }, []);
+  const handleCloseSnackbar = useCallback(() => {
+    setSnackbar((prev) => ({ ...prev, open: false }));
+  }, []);
   const handleTabChange = (_event, newValue) => {
     setTabValue(newValue);
+    if (newValue === 5 && canEditResource && !editingYaml && !isLoadingManifest) {
+      loadManifestForEditing();
+    }
   };
-  if (!resourceData) {
+  if (loading) {
+    return /* @__PURE__ */ jsx(InfoCard, { title: "CCI Supervisor Resource Details", children: /* @__PURE__ */ jsx(Typography, { children: "Loading resource details..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(InfoCard, { title: "CCI Supervisor Resource Details", children: /* @__PURE__ */ jsxs(Typography, { color: "error", children: [
+      "Error loading resource details: ",
+      error.message
+    ] }) });
+  }
+  if (!resourceData && !manifest && !objectData) {
     return /* @__PURE__ */ jsx(InfoCard, { title: "CCI Supervisor Resource Details", children: /* @__PURE__ */ jsx(Typography, { children: "No resource data available." }) });
   }
   const renderStatusIcon = (conditionStatus) => {
@@ -109,7 +395,7 @@ const VCFAutomationCCIResourceDetails = () => {
         noRefs: true,
         sortKeys: false
       });
-    } catch (error) {
+    } catch (error2) {
       return JSON.stringify(data, null, 2);
     }
   };
@@ -229,7 +515,8 @@ const VCFAutomationCCIResourceDetails = () => {
         /* @__PURE__ */ jsx(Tab, { label: "Manifest Details" }),
         /* @__PURE__ */ jsx(Tab, { label: "Object Status" }),
         /* @__PURE__ */ jsx(Tab, { label: "Conditions" }),
-        /* @__PURE__ */ jsx(Tab, { label: "YAML Views" })
+        /* @__PURE__ */ jsx(Tab, { label: "YAML Views" }),
+        canEditResource && resourceName && namespaceName && namespaceUrnId && apiVersion && /* @__PURE__ */ jsx(Tab, { label: "Edit Manifest" })
       ] }),
       /* @__PURE__ */ jsx(TabPanel, { value: tabValue, index: 0, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
         /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(StructuredMetadataTable, { metadata: basicInfo }) }),
@@ -350,7 +637,101 @@ const VCFAutomationCCIResourceDetails = () => {
             }
           ) }) })
         ] }) })
-      ] }) })
+      ] }) }),
+      canEditResource && resourceName && namespaceName && namespaceUrnId && apiVersion && /* @__PURE__ */ jsx(TabPanel, { value: tabValue, index: 5, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Edit Resource Manifest" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true, children: [
+          resourceName,
+          " (",
+          resourceKind,
+          ")"
+        ] }),
+        isLoadingManifest ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "400px", children: /* @__PURE__ */ jsx(Typography, { children: "Loading manifest..." }) }) : /* @__PURE__ */ jsxs(Box, { className: classes.yamlEditorContainer, children: [
+          /* @__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(Box, { className: classes.editorActions, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                onClick: handleCancelEditing,
+                disabled: isSaving,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: () => setConfirmDialogOpen(true),
+                disabled: !editingYaml.trim() || !!yamlValidationError || isSaving,
+                children: isSaving ? "Saving..." : "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 })
+        }
+      )
     ] }) })
   ] });
 };