📝 added checkbox for toggled managedFields (cyclops-ui#395)

* added checkbox for toggled managedFields * update branch * Update requested changes Signed-off-by: Wasiim105 <[email protected]> * update the requested changes Signed-off-by: Wasiim105 <[email protected]> --------- Signed-off-by: Wasiim105 <[email protected]>
raju2109 · Jul 11, 2024 · f05c412 · f05c412
1 parent a83c8b2
commit f05c412
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 18 deletions.
diff --git a/cyclops-ctrl/internal/cluster/k8sclient/client.go b/cyclops-ctrl/internal/cluster/k8sclient/client.go
@@ -246,7 +246,7 @@ func (k *KubernetesClient) GetStatefulSetsLogs(namespace, container, name string
 	return logs, nil
 }
 
-func (k *KubernetesClient) GetManifest(group, version, kind, name, namespace string) (string, error) {
+func (k *KubernetesClient) GetManifest(group, version, kind, name, namespace string, includeManagedFields bool) (string, error) {
 	apiResourceName, err := k.GVKtoAPIResourceName(schema.GroupVersion{Group: group, Version: version}, kind)
 	if err != nil {
 		return "", err
@@ -261,6 +261,10 @@ func (k *KubernetesClient) GetManifest(group, version, kind, name, namespace str
 		return "", err
 	}
 
+	if (!includeManagedFields) {
+		resource.SetManagedFields(nil)
+	}
+
 	data, err := yaml.Marshal(resource.Object)
 	if err != nil {
 		return "", err

diff --git a/cyclops-ctrl/internal/controller/modules.go b/cyclops-ctrl/internal/controller/modules.go
@@ -564,8 +564,9 @@ func (m *Modules) GetManifest(ctx *gin.Context) {
 	kind := ctx.Query("kind")
 	name := ctx.Query("name")
 	namespace := ctx.Query("namespace")
+	includeManagedFields := ctx.Query("includeManagedFields") == "true"
 
-	manifest, err := m.kubernetesClient.GetManifest(group, version, kind, name, namespace)
+	manifest, err := m.kubernetesClient.GetManifest(group, version, kind, name, namespace,includeManagedFields)
 	if err != nil {
 		ctx.JSON(http.StatusInternalServerError, gin.H{
 			"error":  "Failed to fetch resource manifest",

diff --git a/cyclops-ui/src/components/pages/ModuleDetails.tsx b/cyclops-ui/src/components/pages/ModuleDetails.tsx
@@ -46,6 +46,7 @@ import {
 import { gvkString } from "../../utils/k8s/gvk";
 import { mapResponseError } from "../../utils/api/errors";
 import Secret from "../k8s-resources/Secret";
+import { CheckboxChangeEvent } from "antd/es/checkbox";
 const languages = [
   "javascript",
   "java",
@@ -104,6 +105,13 @@ interface resourceRef {
 const ModuleDetails = () => {
   const [manifestModal, setManifestModal] = useState({
     on: false,
+    resource: {
+      group: "",
+      version: "",
+      kind: "",
+      name: "",
+      namespace: "",
+    },
     manifest: "",
   });
   const [loading, setLoading] = useState(false);
@@ -144,12 +152,49 @@ const ModuleDetails = () => {
 
   let { moduleName } = useParams();
 
+  const [showManagedFields, setShowManagedFields] = useState(false);
+
+  const handleCheckboxChange = (e: CheckboxChangeEvent) => {
+    setShowManagedFields(e.target.checked);
+    fetchManifest(
+      manifestModal.resource.group,
+      manifestModal.resource.version,
+      manifestModal.resource.kind,
+      manifestModal.resource.namespace,
+      manifestModal.resource.name,
+      e.target.checked,
+    );
+  };
+
+  const handleManifestClick = (resource: any) => {
+    setManifestModal({
+      on: true,
+      resource: {
+        group: resource.group,
+        version: resource.version,
+        kind: resource.kind,
+        name: resource.name,
+        namespace: resource.namespace,
+      },
+      manifest: "",
+    });
+    fetchManifest(
+      resource.group,
+      resource.version,
+      resource.kind,
+      resource.namespace,
+      resource.name,
+      showManagedFields,
+    );
+  };
+
   function fetchManifest(
     group: string,
     version: string,
     kind: string,
     namespace: string,
     name: string,
+    showManagedFields: boolean,
   ) {
     axios
       .get(`/api/manifest`, {
@@ -159,13 +204,14 @@ const ModuleDetails = () => {
           kind: kind,
           name: name,
           namespace: namespace,
+          includeManagedFields: showManagedFields,
         },
       })
       .then((res) => {
-        setManifestModal({
-          on: true,
+        setManifestModal((prev) => ({
+          ...prev,
           manifest: res.data,
-        });
+        }));
       })
       .catch((error) => {
         setLoading(false);
@@ -243,8 +289,8 @@ const ModuleDetails = () => {
 
   const handleCancelManifest = () => {
     setManifestModal({
+      ...manifestModal,
       on: false,
-      manifest: "",
     });
   };
 
@@ -510,18 +556,7 @@ const ModuleDetails = () => {
         </Row>
         <Row>
           <Col style={{ float: "right" }}>
-            <Button
-              onClick={function () {
-                fetchManifest(
-                  resource.group,
-                  resource.version,
-                  resource.kind,
-                  resource.namespace,
-                  resource.name,
-                );
-              }}
-              block
-            >
+            <Button onClick={() => handleManifestClick(resource)} block>
               View Manifest
             </Button>
           </Col>
@@ -862,6 +897,13 @@ const ModuleDetails = () => {
         cancelButtonProps={{ style: { display: "none" } }}
         width={"40%"}
       >
+        <div>
+          <Checkbox onChange={handleCheckboxChange} checked={showManagedFields}>
+            Include Managed Fields
+          </Checkbox>
+          <Divider style={{ marginTop: "12px", marginBottom: "12px" }} />
+        </div>
+
         <ReactAce
           style={{ width: "100%" }}
           mode={"sass"}