Merge pull request #1511 from devtron-labs/feat(pod-manifest)/hide-managed-fields

AbhishekA1509 · web-flow · commit 1ca6918c27e5 · 2023-12-07T17:32:20.000+05:30
feat: hide managed fields from cluster terminal manifest
diff --git a/src/components/ClusterNodes/ClusterManifest.tsx b/src/components/ClusterNodes/ClusterManifest.tsx
@@ -11,6 +11,7 @@ import { ReactComponent as WarningIcon } from '../../assets/icons/ic-warning.svg
 import { ReactComponent as Close } from '../../assets/icons/ic-cross.svg'
 import { defaultManifestErrorText, manifestCommentsRegex } from './constants'
 import { EditModeType } from '../v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/constants'
+import { getTrimmedManifestData } from '../v2/appDetails/k8Resource/nodeDetail/nodeDetail.util'
 
 export default function ClusterManifest({
     terminalAccessId,
@@ -19,8 +20,12 @@ export default function ClusterManifest({
     setManifestData,
     errorMessage,
     setManifestAvailable,
-    selectTerminalTab
+    selectTerminalTab,
+    hideManagedFields,
 }: ClusterManifestType) {
+    // Manifest data with managed fields
+    const [originalManifest, setOriginalManifest] = useState('')
+    // Manifest data that we would be comparing with the edited manifest
     const [defaultManifest, setDefaultManifest] = useState('')
     const [manifestValue, setManifest] = useState('')
     const [loading, setLoading] = useState<boolean>(true)
@@ -32,8 +37,16 @@ export default function ClusterManifest({
             getClusterManifest(terminalAccessId)
                 .then((response) => {
                     const _manifest = YAML.stringify(response.result?.manifest)
-                    setDefaultManifest(_manifest)
-                    setManifest(_manifest)
+                    setOriginalManifest(_manifest)
+                    const trimmedManifest = YAML.stringify(getTrimmedManifestData(response.result?.manifest))
+                    setDefaultManifest(trimmedManifest)
+                    // Ideally should have been setManifest(trimmedManifest).
+                    if (hideManagedFields) {
+                        setManifest(trimmedManifest)
+                    }
+                    else {
+                        setManifest(_manifest)
+                    }
                     setLoading(false)
                     setManifestAvailable(true)
                 })
@@ -51,10 +64,14 @@ export default function ClusterManifest({
         }
     }, [terminalAccessId])
 
+    // NOTE: Need to remove this useEffect since manifestMode changes on events only.
+    // Since there can be alot of ways this useEffect interferes with other handlers, causing bugs.
+    // Plus it might be a case when this useEffect will run before we have manifest, which will cause issues.
     useEffect(() => {
         const regex = manifestCommentsRegex
         if (manifestMode === EditModeType.NON_EDIT) {
-            setManifest(defaultManifest)
+            const _manifest = hideManagedFields ? defaultManifest : originalManifest
+            setManifest(_manifest)
         } else if (manifestMode === EditModeType.APPLY) {
             const _manifestValue = manifestValue.replace(regex, 'apiVersion:')
             if (_manifestValue !== defaultManifest) {
@@ -63,21 +80,35 @@ export default function ClusterManifest({
                         setManifestData(JSON.stringify(YAML.parse(_manifestValue)))
                     } else {
                         setManifest(defaultManifestErrorText)
+                        setManifestMode(EditModeType.EDIT)
                     }
                 } catch (error) {
-                    setManifest(defaultManifestErrorText + '# ' + error + '\n#\n' + _manifestValue)
+                    // Since we check error in edit as well, we can ignore this error and somehow infinite loop is created if we setManifest here.
                     setManifestMode(EditModeType.EDIT)
                 }
             } else {
                 selectTerminalTab()
                 setManifestMode(EditModeType.NON_EDIT)
             }
         } else if (manifestMode === EditModeType.EDIT) {
-            if (errorMessage?.length) {
-                setManifest(defaultManifestErrorText + '# ' + errorMessage + '\n#\n' + manifestValue)
+            try {
+                // Parsing will remove earlier comments, which will fix internal issues of code, currently the errorMessage is not getting cleared due to line 83.
+                const parsedManifest = YAML.parse(manifestValue)
+                if (parsedManifest) {
+                    const trimmedManifest = YAML.stringify(getTrimmedManifestData(parsedManifest))
+                    const errorDetails = errorMessage?.length ? defaultManifestErrorText + '# ' + errorMessage + '\n#\n' : ''
+                    setManifest(errorDetails + trimmedManifest)
+                }
+                else {
+                    setManifest(defaultManifestErrorText)
+                }
+            }
+            catch (error) {
+                // Should we directly use error object here?
+                setManifest(defaultManifestErrorText + '# ' + error + '\n#\n' + manifestValue)
             }
         }
-    }, [manifestMode])
+    }, [manifestMode, hideManagedFields])
 
     const switchToEditMode = (): void => {
         setManifestMode(EditModeType.EDIT)
diff --git a/src/components/ClusterNodes/ClusterTerminal.tsx b/src/components/ClusterNodes/ClusterTerminal.tsx
@@ -11,7 +11,7 @@ import {
 } from './clusterNodes.service'
 import { GroupHeading, menuComponentForImage, Option } from '../../components/v2/common/ReactSelect.utils'
 import { clusterImageDescription, convertToOptionsList } from '../common'
-import { get, ServerErrors, showError } from '@devtron-labs/devtron-fe-common-lib'
+import { Checkbox, CHECKBOX_VALUE, get, ServerErrors, showError } from '@devtron-labs/devtron-fe-common-lib'
 import ClusterManifest, { ManifestPopupMenu } from './ClusterManifest'
 import ClusterEvents from './ClusterEvents'
 import { ClusterTerminalType, NodeTaintType } from './types'
@@ -99,6 +99,7 @@ export default function ClusterTerminal({
     const [manifestErrors, setManifestErrors] = useState<string[]>()
     const [debugMode, setDebugMode] = useState<boolean>(false)
     const [isManifestAvailable, setManifestAvailable] = useState<boolean>()
+    const [hideManagedFields, setHideManagedFields] = useState<boolean>(true)
     const isShellSwitched = useRef<boolean>(false)
     const autoSelectNodeRef = useRef(null)
     const terminalRef = useRef(null)
@@ -179,6 +180,7 @@ export default function ClusterTerminal({
                             }
                             const namespace = result.namespace
                             setNamespace(namespace ? { label: namespace, value: namespace } : defaultNameSpace)
+                            setHideManagedFields(true)
                             setManifestButtonState(EditModeType.NON_EDIT)
                             terminalAccessIdRef.current = result.terminalAccessId
                             socketConnecting()
@@ -337,6 +339,7 @@ export default function ClusterTerminal({
     function getNewSession() {
         if (!terminalAccessIdRef.current) return
         setSocketConnection(SocketConnectionType.CONNECTING)
+        // It might be that we dont have resourceData.
         getClusterData(
             `user/terminal/get?namespace=${selectedNamespace.value}&shellName=${
                 selectedTerminalType.value
@@ -627,6 +630,10 @@ export default function ClusterTerminal({
         setTerminalCleared(!terminalCleared)
     }
 
+    const handleToggleManagedFields = () => {
+        setHideManagedFields(!hideManagedFields)
+    }
+
     const renderRegisterLinkMatcher = (terminal) => {
         const linkMatcherRegex = new RegExp(`${POD_LINKS.POD_MANIFEST}|${POD_LINKS.POD_EVENTS}`)
         terminal.registerLinkMatcher(linkMatcherRegex, (_event, text) => {
@@ -704,6 +711,7 @@ export default function ClusterTerminal({
                             errorMessage={manifestErrors}
                             setManifestAvailable={setManifestAvailable}
                             selectTerminalTab={selectTerminalTab}
+                            hideManagedFields={hideManagedFields}
                         />
                     </div>
                 )}
@@ -815,13 +823,30 @@ export default function ClusterTerminal({
         }
     }
 
+    const renderHideManagedFields = () => (
+        <div className="pt-6 pb-6 pl-12 pr-8 top">
+            <Checkbox
+                rootClassName="mb-0-imp h-18"
+                isChecked={hideManagedFields}
+                value={CHECKBOX_VALUE.CHECKED}
+                onChange={handleToggleManagedFields}
+            >
+                <span className="mr-5 cn-9 fs-12 lh-18" data-testid="hide-pods-managed-fields">
+                    Hide Managed Fields
+                </span>
+            </Checkbox>
+        </div>
+    )
+
     const closeManifetsPopup = (isClose: boolean): void => {
         setManifestButtonState(EditModeType.REVIEW)
         setManifestData('')
         setShowPodExistPopup(isClose)
     }
 
     const hideShell: boolean = !(connectTerminal && isPodCreated && !selectedTabIndex)
+    const showManagedFieldsCheckbox: boolean =
+        selectedTabIndex === 2 && isManifestAvailable && manifestButtonState === EditModeType.NON_EDIT
 
     const fullScreenClassWrapper = isFullScreen ? 'cluster-full_screen' : 'cluster-terminal-view-container'
     const nodeDetailsPageClassWrapper = isNodeDetailsPage || isClusterDetailsPage ? '' : 'node-terminal'
@@ -951,6 +976,14 @@ export default function ClusterTerminal({
                 buttonSelectionState: manifestButtonState,
                 setManifestButtonState: setManifestButtonState,
             },
+            ...(showManagedFieldsCheckbox
+                ? [
+                      {
+                          type: TerminalWrapperType.CUSTOM_COMPONENT,
+                          customComponent: renderHideManagedFields,
+                      },
+                  ]
+                : []),
         ],
         tabSwitcher: {
             terminalTabWrapper: terminalTabWrapper,
diff --git a/src/components/ClusterNodes/types.ts b/src/components/ClusterNodes/types.ts
@@ -351,6 +351,7 @@ export interface ClusterManifestType {
     errorMessage?: string[]
     setManifestAvailable: (isManifestAvailable: boolean) => void
     selectTerminalTab: () => void
+    hideManagedFields: boolean
 }
 
 export interface ClusterEditManifestType {
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx
@@ -262,7 +262,7 @@ function NodeDetailComponent({
     }
 
     return (
-        <React.Fragment>
+        <>
             <div className="w-100 pr-20 pl-20 bcn-0 flex dc__border-bottom dc__content-space">
                 <div className="flex left">
                     <div data-testid="app-resource-containor-header" className="flex left">
@@ -423,7 +423,7 @@ function NodeDetailComponent({
                     removeTabByIdentifier={removeTabByIdentifier}
                 />
             )}
-        </React.Fragment>
+        </>
     )
 }
 
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
@@ -23,9 +23,9 @@ import {
     EA_MANIFEST_SECRET_EDIT_MODE_INFO_TEXT,
     EA_MANIFEST_SECRET_INFO_TEXT,
 } from '../../../../../../config/constantMessaging'
-import { MANIFEST_KEY_FIELDS } from '../../../../../../config/constants'
 import { MODES } from '../../../../../../config'
 import { EMPTY_YAML_ERROR, SAVE_DATA_VALIDATION_ERROR_MSG } from '../../../../values/chartValuesDiff/ChartValuesView.constants'
+import { getTrimmedManifestData } from '../nodeDetail.util'
 
 function ManifestComponent({
     selectedTab,
@@ -138,7 +138,7 @@ function ManifestComponent({
             toggleManagedFields(false)
             const jsonManifestData = YAML.parse(activeManifestEditorData)
             if (jsonManifestData?.metadata?.managedFields) {
-                setTrimedManifestEditorData(trimManifestData(jsonManifestData))
+                setTrimedManifestEditorData(getTrimmedManifestData(jsonManifestData, true) as string)
             }
         }
     }, [isEditmode])
@@ -152,27 +152,16 @@ function ManifestComponent({
     useEffect(() => {
         setTrimedManifestEditorData(activeManifestEditorData)
         if (activeTab === 'Live manifest') {
-            let jsonManifestData = YAML.parse(activeManifestEditorData)
+            const jsonManifestData = YAML.parse(activeManifestEditorData)
             if (jsonManifestData?.metadata?.managedFields) {
                 toggleManagedFields(true)
                 if (hideManagedFields) {
-                    setTrimedManifestEditorData(trimManifestData(jsonManifestData))
+                    setTrimedManifestEditorData(getTrimmedManifestData(jsonManifestData, true) as string)
                 }
             }
         }
     }, [activeManifestEditorData, hideManagedFields, activeTab])
 
-    //For External
-    const trimManifestData = (jsonManifestData: object): string => {
-        const _trimedManifestData = JSON.stringify(jsonManifestData, (key, value) => {
-            if (key === MANIFEST_KEY_FIELDS.METADATA) {
-                value[MANIFEST_KEY_FIELDS.MANAGED_FIELDS] = undefined
-            }
-            return value
-        })
-        return _trimedManifestData
-    }
-
     const handleEditorValueChange = (codeEditorData: string) => {
         if (activeTab === 'Live manifest' && isEditmode) {
             setModifiedManifest(codeEditorData)
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Terminal.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Terminal.component.tsx
@@ -307,12 +307,12 @@ function TerminalComponent({
     return (
         <div className={`${showTerminal ? '' : 'pod-terminal-hidden'}`}>
             <TerminalWrapper
-            dataTestId="terminal-editor-header"
-            selectionListData={selectionListData}
-            socketConnection={socketConnection}
-            setSocketConnection={setSocketConnection}
-            className={isResourceBrowserView ? 'k8s-resource-view-container' : 'terminal-view-container'}
-        />
+                dataTestId="terminal-editor-header"
+                selectionListData={selectionListData}
+                socketConnection={socketConnection}
+                setSocketConnection={setSocketConnection}
+                className={isResourceBrowserView ? 'k8s-resource-view-container' : 'terminal-view-container'}
+            />
         </div>
     )
 }
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts b/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts
@@ -1,6 +1,7 @@
-import { OptionType } from '@devtron-labs/devtron-fe-common-lib';
+import { OptionType } from '@devtron-labs/devtron-fe-common-lib'
 import React from 'react'
-import {Options, OptionsBase } from "../../appDetails.type";
+import {Options, OptionsBase } from '../../appDetails.type'
+import { MANIFEST_KEY_FIELDS } from '../../../../../config'
 
 export enum NodeDetailTab {
     EVENTS = 'EVENTS',
@@ -68,3 +69,18 @@ export interface ResponsePayload {
         manifest: string
     }
 }
+
+
+interface ManagedFields {
+    [key: string]: any
+}
+
+interface ManifestMetadata {
+    [MANIFEST_KEY_FIELDS.MANAGED_FIELDS]?: ManagedFields[]
+    [key: string]: any
+}
+
+export interface ManifestData {
+    [MANIFEST_KEY_FIELDS.METADATA]?: ManifestMetadata
+    [key: string]: any
+}
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.ts b/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.ts
@@ -9,9 +9,10 @@ import {
     SelectedResourceType,
 } from '../../appDetails.type'
 import IndexStore from '../../index.store'
-import { NodeDetailTab } from './nodeDetail.type'
+import { ManifestData, NodeDetailTab } from './nodeDetail.type'
 import { multiSelectStyles } from '../../../common/ReactSelectCustomization'
 import { sortOptionsByLabel } from '../../../../common'
+import { MANIFEST_KEY_FIELDS } from '../../../../../config'
 
 export const getNodeDetailTabs = (nodeType: NodeType, isResourceBrowserTab?: boolean) => {
     if (nodeType.toLowerCase() === NodeType.Pod.toLowerCase()) {
@@ -386,4 +387,21 @@ export const selectStyles = {
         ...base,
         padding: '0 8px',
     }),
-}
+}
+
+/**
+ * @description This function is used to trim the manifest data by removing the managed fields from the manifest data
+ */
+export const getTrimmedManifestData = (
+    manifestData: ManifestData,
+    returnAsString: boolean = false,
+): ManifestData | string => {
+    if (manifestData[MANIFEST_KEY_FIELDS.METADATA]) {
+        const { [MANIFEST_KEY_FIELDS.MANAGED_FIELDS]: _, ...metadata } = manifestData[MANIFEST_KEY_FIELDS.METADATA]
+        const trimmedManifestData = {...manifestData, [MANIFEST_KEY_FIELDS.METADATA]: metadata}
+
+        return returnAsString ? JSON.stringify(trimmedManifestData) : trimmedManifestData
+    }
+
+    return returnAsString ? JSON.stringify(manifestData) : manifestData
+}

Original file line number	Diff line number	Diff line change
`@@ -351,6 +351,7 @@ export interface ClusterManifestType {`
`351`	`351`	`errorMessage?: string[]`
`352`	`352`	`setManifestAvailable: (isManifestAvailable: boolean) => void`
`353`	`353`	`selectTerminalTab: () => void`
	`354`	`+ hideManagedFields: boolean`
`354`	`355`	`}`
`355`	`356`
`356`	`357`	`export interface ClusterEditManifestType {`
Original file line number	Diff line number	Diff line change
`@@ -262,7 +262,7 @@ function NodeDetailComponent({`
`262`	`262`	`}`
`263`	`263`
`264`	`264`	`return (`
`265`		`- <React.Fragment>`
	`265`	`+ <>`
`266`	`266`	`<div className="w-100 pr-20 pl-20 bcn-0 flex dc__border-bottom dc__content-space">`
`267`	`267`	`<div className="flex left">`
`268`	`268`	`<div data-testid="app-resource-containor-header" className="flex left">`
`@@ -423,7 +423,7 @@ function NodeDetailComponent({`
`423`	`423`	`removeTabByIdentifier={removeTabByIdentifier}`
`424`	`424`	`/>`
`425`	`425`	`)}`
`426`		`- </React.Fragment>`
	`426`	`+ </>`
`427`	`427`	`)`
`428`	`428`	`}`
`429`	`429`