From 7969060a40d6a4cf3f8551bb1a26dafe6b92190a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 29 Sep 2025 14:38:15 +0200 Subject: [PATCH 01/15] Update removeManagedFieldsProperty.ts --- src/utils/removeManagedFieldsProperty.ts | 62 ++++++++++++++++-------- 1 file changed, 43 insertions(+), 19 deletions(-) diff --git a/src/utils/removeManagedFieldsProperty.ts b/src/utils/removeManagedFieldsProperty.ts index 2706ead3..af3e4800 100644 --- a/src/utils/removeManagedFieldsProperty.ts +++ b/src/utils/removeManagedFieldsProperty.ts @@ -1,36 +1,60 @@ export type Resource = { + apiVersion: string; kind: string; - items?: { - metadata: { - name: string; - managedFields?: unknown; - }; - }[]; + items?: Omit[]; metadata: { name: string; + namespace?: string; + labels?: Record; + annotations?: { + 'kubectl.kubernetes.io/last-applied-configuration'?: string; + [key: string]: string | undefined; + }; managedFields?: unknown; + creationTimestamp?: string; + finalizers?: string[]; + generation?: number; + resourceVersion?: string; + uid?: string; }; + spec?: unknown; + status?: unknown; }; -export const removeManagedFieldsProperty = (resourceObject: Resource) => { - if (resourceObject?.metadata?.managedFields) { +export const removeManagedFieldsProperty = (resourceObject: Resource, showOnlyImportantData: boolean) => { + if (!resourceObject) { + return resourceObject; + } + const processMetadata = (metadata: Resource['metadata']) => { + const { managedFields, generation, uid, annotations, ...restMetadata } = metadata || {}; + + const newAnnotations = { ...annotations }; + if (showOnlyImportantData) { + delete newAnnotations['kubectl.kubernetes.io/last-applied-configuration']; + } + return { - ...resourceObject, - metadata: { - ...resourceObject.metadata, - managedFields: undefined, - }, + ...restMetadata, + ...(Object.keys(newAnnotations).length > 0 && { + annotations: newAnnotations, + }), }; - } + }; + + const processResource = (resource: Omit) => { + const { metadata, ...restResource } = resource; + return { + ...restResource, + ...(metadata && { metadata: processMetadata(metadata) }), + }; + }; + if (resourceObject?.items) { return { ...resourceObject, - items: resourceObject.items.map((item) => ({ - ...item, - metadata: { ...item.metadata, managedFields: undefined }, - })), + items: resourceObject.items.map(processResource), }; } - return resourceObject; + return processResource(resourceObject); }; From 3c34a39ece5af636b2fba2d2422927180bfaf9a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 29 Sep 2025 15:04:56 +0200 Subject: [PATCH 02/15] fix --- src/components/Yaml/YamlLoader.tsx | 2 +- src/utils/removeManagedFieldsProperty.ts | 59 +++++++++++++----------- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx index 553c2b6b..92f934a4 100644 --- a/src/components/Yaml/YamlLoader.tsx +++ b/src/components/Yaml/YamlLoader.tsx @@ -25,7 +25,7 @@ export const YamlLoader: FC = ({ workspaceName, resourceTyp return ( ); diff --git a/src/utils/removeManagedFieldsProperty.ts b/src/utils/removeManagedFieldsProperty.ts index af3e4800..020f05fb 100644 --- a/src/utils/removeManagedFieldsProperty.ts +++ b/src/utils/removeManagedFieldsProperty.ts @@ -22,39 +22,44 @@ export type Resource = { }; export const removeManagedFieldsProperty = (resourceObject: Resource, showOnlyImportantData: boolean) => { - if (!resourceObject) { - return resourceObject; - } - const processMetadata = (metadata: Resource['metadata']) => { - const { managedFields, generation, uid, annotations, ...restMetadata } = metadata || {}; - - const newAnnotations = { ...annotations }; - if (showOnlyImportantData) { - delete newAnnotations['kubectl.kubernetes.io/last-applied-configuration']; - } - + console.log(resourceObject); + if (resourceObject?.metadata?.managedFields) { return { - ...restMetadata, - ...(Object.keys(newAnnotations).length > 0 && { - annotations: newAnnotations, - }), - }; - }; - - const processResource = (resource: Omit) => { - const { metadata, ...restResource } = resource; - return { - ...restResource, - ...(metadata && { metadata: processMetadata(metadata) }), + ...resourceObject, + metadata: { + ...resourceObject.metadata, + managedFields: undefined, + annotations: { + ...resourceObject.metadata.annotations, + 'kubectl.kubernetes.io/last-applied-configuration': showOnlyImportantData + ? undefined + : resourceObject?.metadata?.annotations?.['kubectl.kubernetes.io/last-applied-configuration'], + }, + generation: showOnlyImportantData ? undefined : resourceObject?.metadata?.generation, + uid: showOnlyImportantData ? undefined : resourceObject?.metadata?.uid, + }, }; - }; - + } if (resourceObject?.items) { return { ...resourceObject, - items: resourceObject.items.map(processResource), + items: resourceObject.items.map((item) => ({ + ...item, + metadata: { + ...item.metadata, + managedFields: undefined, + annotations: { + ...resourceObject.metadata.annotations, + 'kubectl.kubernetes.io/last-applied-configuration': showOnlyImportantData + ? undefined + : resourceObject?.metadata?.annotations?.['kubectl.kubernetes.io/last-applied-configuration'], + }, + generation: showOnlyImportantData ? undefined : resourceObject?.metadata?.generation, + uid: showOnlyImportantData ? undefined : resourceObject?.metadata?.uid, + }, + })), }; } - return processResource(resourceObject); + return resourceObject; }; From 20ac8b38efc0d8a28486a12050fd8a221907d459 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 29 Sep 2025 15:21:24 +0200 Subject: [PATCH 03/15] Add option to show only important YAML data Introduces a 'showOnlyImportantData' prop to YAML viewer components, allowing users to toggle the display of only essential YAML fields. Updates related components and dialog to support this feature and propagate state. --- src/components/Yaml/YamlLoader.tsx | 17 +++++++++++-- src/components/Yaml/YamlViewButton.tsx | 5 +++- .../Yaml/YamlViewButtonWithLoader.tsx | 15 +++++++++--- src/components/Yaml/YamlViewDialog.tsx | 24 +++++++++++++++++-- src/components/Yaml/YamlViewer.tsx | 7 +++++- 5 files changed, 59 insertions(+), 9 deletions(-) diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx index 92f934a4..a6c676ec 100644 --- a/src/components/Yaml/YamlLoader.tsx +++ b/src/components/Yaml/YamlLoader.tsx @@ -11,7 +11,18 @@ import YamlViewer from './YamlViewer.tsx'; import { useApiResource } from '../../lib/api/useApiResource'; import { removeManagedFieldsProperty, Resource } from '../../utils/removeManagedFieldsProperty.ts'; -export const YamlLoader: FC = ({ workspaceName, resourceType, resourceName }) => { +interface YamlLoaderProps extends YamlViewButtonProps { + showOnlyImportantData?: boolean; + setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void; +} + +export const YamlLoader: FC = ({ + workspaceName, + resourceType, + resourceName, + showOnlyImportantData = false, + setShowOnlyImportantData, +}) => { const { isLoading, data, error } = useApiResource( ResourceObject(workspaceName ?? '', resourceType, resourceName), undefined, @@ -25,8 +36,10 @@ export const YamlLoader: FC = ({ workspaceName, resourceTyp return ( ); }; diff --git a/src/components/Yaml/YamlViewButton.tsx b/src/components/Yaml/YamlViewButton.tsx index 2e6b7d78..65f01acb 100644 --- a/src/components/Yaml/YamlViewButton.tsx +++ b/src/components/Yaml/YamlViewButton.tsx @@ -13,12 +13,13 @@ export type YamlViewButtonProps = { }; export const YamlViewButton: FC = ({ resourceObject }) => { + const [showOnlyImportantData, setShowOnlyImportantData] = useState(true); const [isOpen, setIsOpen] = useState(false); const { t } = useTranslation(); const resource = resourceObject as Resource; const yamlString = useMemo(() => { - return stringify(removeManagedFieldsProperty(resource)); + return stringify(removeManagedFieldsProperty(resource, showOnlyImportantData)); }, [resource]); return ( @@ -29,6 +30,8 @@ export const YamlViewButton: FC = ({ resourceObject }) => { } /> diff --git a/src/components/Yaml/YamlViewButtonWithLoader.tsx b/src/components/Yaml/YamlViewButtonWithLoader.tsx index 9e66a4e2..a097aebe 100644 --- a/src/components/Yaml/YamlViewButtonWithLoader.tsx +++ b/src/components/Yaml/YamlViewButtonWithLoader.tsx @@ -6,13 +6,14 @@ import styles from './YamlViewer.module.css'; import { YamlIcon } from './YamlIcon.tsx'; import { YamlViewDialog } from './YamlViewDialog.tsx'; -export type YamlViewButtonProps = { +export interface YamlViewButtonProps { workspaceName?: string; resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes'; resourceName: string; -}; +} export const YamlViewButtonWithLoader: FC = ({ workspaceName, resourceType, resourceName }) => { + const [showOnlyImportantData, setShowOnlyImportantData] = useState(true); const [isOpen, setIsOpen] = useState(false); const { t } = useTranslation(); return ( @@ -21,8 +22,16 @@ export const YamlViewButtonWithLoader: FC = ({ workspaceNam isOpen={isOpen} setIsOpen={setIsOpen} dialogContent={ - + } + setShowOnlyImportantData={setShowOnlyImportantData} + showOnlyImportantData={showOnlyImportantData} /> } diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx index 1dfd2f17..e48dab60 100644 --- a/src/components/Yaml/YamlViewer.tsx +++ b/src/components/Yaml/YamlViewer.tsx @@ -9,11 +9,16 @@ import { useTranslation } from 'react-i18next'; import { useTheme } from '../../hooks/useTheme.ts'; type YamlViewerProps = { yamlString: string; + yamlStringToCopy: string; filename: string; showOnlyImportantData?: boolean; setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void; }; -const YamlViewer: FC = ({ yamlString, filename }) => { + +// Download button is hidden now due to stakeholder request +const SHOW_DOWNLOAD_BUTTON = false; + +const YamlViewer: FC = ({ yamlString, filename, yamlStringToCopy }) => { const { t } = useTranslation(); const { isDarkTheme } = useTheme(); const { copyToClipboard } = useCopyToClipboard(); @@ -32,12 +37,14 @@ const YamlViewer: FC = ({ yamlString, filename }) => { return (
- - + {SHOW_DOWNLOAD_BUTTON && ( + + )} Date: Mon, 29 Sep 2025 15:37:44 +0200 Subject: [PATCH 05/15] fix --- src/components/Yaml/YamlLoader.tsx | 15 ++++++++++++--- src/components/Yaml/YamlViewButton.tsx | 2 +- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx index 6ff39028..3afbd21b 100644 --- a/src/components/Yaml/YamlLoader.tsx +++ b/src/components/Yaml/YamlLoader.tsx @@ -1,5 +1,5 @@ import { YamlViewButtonProps } from './YamlViewButtonWithLoader.tsx'; -import { FC } from 'react'; +import { FC, useMemo } from 'react'; import { stringify } from 'yaml'; @@ -29,6 +29,15 @@ export const YamlLoader: FC = ({ true, ); const { t } = useTranslation(); + const yamlString = useMemo(() => { + if (isLoading || error) return ''; + return stringify(removeManagedFieldsProperty(data as Resource, showOnlyImportantData)); + }, [data, error, isLoading, showOnlyImportantData]); + + const yamlStringToCopy = useMemo(() => { + if (isLoading || error) return ''; + return stringify(removeManagedFieldsProperty(data as Resource, false)); + }, [data, error, isLoading]); if (isLoading) return ; if (error) { return ; @@ -36,8 +45,8 @@ export const YamlLoader: FC = ({ return ( = ({ resourceObject }) => { }, [resource, showOnlyImportantData]); const yamlStringToCopy = useMemo(() => { return stringify(removeManagedFieldsProperty(resource, false)); - }, [resource, showOnlyImportantData]); + }, [resource]); return ( Date: Mon, 29 Sep 2025 15:42:55 +0200 Subject: [PATCH 06/15] fixes --- src/lib/api/types/shared/keyNames.ts | 1 + src/utils/removeManagedFieldsProperty.ts | 12 +++++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/lib/api/types/shared/keyNames.ts b/src/lib/api/types/shared/keyNames.ts index db4a6531..f15257fd 100644 --- a/src/lib/api/types/shared/keyNames.ts +++ b/src/lib/api/types/shared/keyNames.ts @@ -3,3 +3,4 @@ export const CHARGING_TARGET_LABEL: string = 'openmcp.cloud.sap/charging-target' export const CHARGING_TARGET_TYPE_LABEL: string = 'openmcp.cloud.sap/charging-target-type'; export const PROJECT_NAME_LABEL: string = 'openmcp.cloud/mcp-project'; export const WORKSPACE_LABEL: string = 'openmcp.cloud/mcp-workspace'; +export const LAST_APPLIED_CONFIGURATION_ANNOTATION = 'kubectl.kubernetes.io/last-applied-configuration'; diff --git a/src/utils/removeManagedFieldsProperty.ts b/src/utils/removeManagedFieldsProperty.ts index 020f05fb..5ffe934a 100644 --- a/src/utils/removeManagedFieldsProperty.ts +++ b/src/utils/removeManagedFieldsProperty.ts @@ -1,3 +1,5 @@ +import { LAST_APPLIED_CONFIGURATION_ANNOTATION } from '../lib/api/types/shared/keyNames'; + export type Resource = { apiVersion: string; kind: string; @@ -7,7 +9,7 @@ export type Resource = { namespace?: string; labels?: Record; annotations?: { - 'kubectl.kubernetes.io/last-applied-configuration'?: string; + [LAST_APPLIED_CONFIGURATION_ANNOTATION]?: string; [key: string]: string | undefined; }; managedFields?: unknown; @@ -31,9 +33,9 @@ export const removeManagedFieldsProperty = (resourceObject: Resource, showOnlyIm managedFields: undefined, annotations: { ...resourceObject.metadata.annotations, - 'kubectl.kubernetes.io/last-applied-configuration': showOnlyImportantData + [LAST_APPLIED_CONFIGURATION_ANNOTATION]: showOnlyImportantData ? undefined - : resourceObject?.metadata?.annotations?.['kubectl.kubernetes.io/last-applied-configuration'], + : resourceObject?.metadata?.annotations?.[LAST_APPLIED_CONFIGURATION_ANNOTATION], }, generation: showOnlyImportantData ? undefined : resourceObject?.metadata?.generation, uid: showOnlyImportantData ? undefined : resourceObject?.metadata?.uid, @@ -50,9 +52,9 @@ export const removeManagedFieldsProperty = (resourceObject: Resource, showOnlyIm managedFields: undefined, annotations: { ...resourceObject.metadata.annotations, - 'kubectl.kubernetes.io/last-applied-configuration': showOnlyImportantData + [LAST_APPLIED_CONFIGURATION_ANNOTATION]: showOnlyImportantData ? undefined - : resourceObject?.metadata?.annotations?.['kubectl.kubernetes.io/last-applied-configuration'], + : resourceObject?.metadata?.annotations?.[LAST_APPLIED_CONFIGURATION_ANNOTATION], }, generation: showOnlyImportantData ? undefined : resourceObject?.metadata?.generation, uid: showOnlyImportantData ? undefined : resourceObject?.metadata?.uid, From f176198e9150659dceb5ed9d132d1575952cb77f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 29 Sep 2025 15:44:34 +0200 Subject: [PATCH 07/15] refactor --- src/components/Graphs/Graph.tsx | 4 ++-- src/components/Yaml/YamlLoader.tsx | 6 +++--- src/components/Yaml/YamlViewButton.tsx | 6 +++--- ...ieldsProperty.ts => removeManagedFieldsAndFilterData.ts} | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) rename src/utils/{removeManagedFieldsProperty.ts => removeManagedFieldsAndFilterData.ts} (94%) diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx index f4974b54..d45dcaf3 100644 --- a/src/components/Graphs/Graph.tsx +++ b/src/components/Graphs/Graph.tsx @@ -10,7 +10,7 @@ import { Legend, LegendItem } from './Legend'; import { YamlViewDialog } from '../Yaml/YamlViewDialog'; import YamlViewer from '../Yaml/YamlViewer'; import { stringify } from 'yaml'; -import { removeManagedFieldsProperty } from '../../utils/removeManagedFieldsProperty'; +import { removeManagedFieldsAndFilterData } from '../../utils/removeManagedFieldsAndFilterData.ts'; import { useTranslation } from 'react-i18next'; import { useGraph } from './useGraph'; import { ManagedResourceItem } from '../../lib/shared/types'; @@ -44,7 +44,7 @@ const Graph: React.FC = () => { const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick); const yamlString = useMemo( - () => (yamlResource ? stringify(removeManagedFieldsProperty(yamlResource)) : ''), + () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource)) : ''), [yamlResource], ); diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx index 3afbd21b..5e9934c7 100644 --- a/src/components/Yaml/YamlLoader.tsx +++ b/src/components/Yaml/YamlLoader.tsx @@ -9,7 +9,7 @@ import Loading from '../Shared/Loading.tsx'; import IllustratedError from '../Shared/IllustratedError.tsx'; import YamlViewer from './YamlViewer.tsx'; import { useApiResource } from '../../lib/api/useApiResource'; -import { removeManagedFieldsProperty, Resource } from '../../utils/removeManagedFieldsProperty.ts'; +import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts'; interface YamlLoaderProps extends YamlViewButtonProps { showOnlyImportantData?: boolean; @@ -31,12 +31,12 @@ export const YamlLoader: FC = ({ const { t } = useTranslation(); const yamlString = useMemo(() => { if (isLoading || error) return ''; - return stringify(removeManagedFieldsProperty(data as Resource, showOnlyImportantData)); + return stringify(removeManagedFieldsAndFilterData(data as Resource, showOnlyImportantData)); }, [data, error, isLoading, showOnlyImportantData]); const yamlStringToCopy = useMemo(() => { if (isLoading || error) return ''; - return stringify(removeManagedFieldsProperty(data as Resource, false)); + return stringify(removeManagedFieldsAndFilterData(data as Resource, false)); }, [data, error, isLoading]); if (isLoading) return ; if (error) { diff --git a/src/components/Yaml/YamlViewButton.tsx b/src/components/Yaml/YamlViewButton.tsx index 3c4caf6b..6f6438d7 100644 --- a/src/components/Yaml/YamlViewButton.tsx +++ b/src/components/Yaml/YamlViewButton.tsx @@ -4,7 +4,7 @@ import styles from './YamlViewer.module.css'; import { useTranslation } from 'react-i18next'; import YamlViewer from './YamlViewer.tsx'; import { stringify } from 'yaml'; -import { removeManagedFieldsProperty, Resource } from '../../utils/removeManagedFieldsProperty.ts'; +import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts'; import { YamlIcon } from './YamlIcon.tsx'; import { YamlViewDialog } from './YamlViewDialog.tsx'; @@ -19,10 +19,10 @@ export const YamlViewButton: FC = ({ resourceObject }) => { const resource = resourceObject as Resource; const yamlString = useMemo(() => { - return stringify(removeManagedFieldsProperty(resource, showOnlyImportantData)); + return stringify(removeManagedFieldsAndFilterData(resource, showOnlyImportantData)); }, [resource, showOnlyImportantData]); const yamlStringToCopy = useMemo(() => { - return stringify(removeManagedFieldsProperty(resource, false)); + return stringify(removeManagedFieldsAndFilterData(resource, false)); }, [resource]); return ( diff --git a/src/utils/removeManagedFieldsProperty.ts b/src/utils/removeManagedFieldsAndFilterData.ts similarity index 94% rename from src/utils/removeManagedFieldsProperty.ts rename to src/utils/removeManagedFieldsAndFilterData.ts index 5ffe934a..2df79ac7 100644 --- a/src/utils/removeManagedFieldsProperty.ts +++ b/src/utils/removeManagedFieldsAndFilterData.ts @@ -23,7 +23,7 @@ export type Resource = { status?: unknown; }; -export const removeManagedFieldsProperty = (resourceObject: Resource, showOnlyImportantData: boolean) => { +export const removeManagedFieldsAndFilterData = (resourceObject: Resource, showOnlyImportantData: boolean) => { console.log(resourceObject); if (resourceObject?.metadata?.managedFields) { return { From 411f406d310a0c7ab75d57be7e6f08efe07384e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:18:07 +0200 Subject: [PATCH 08/15] Update src/utils/removeManagedFieldsAndFilterData.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/utils/removeManagedFieldsAndFilterData.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/removeManagedFieldsAndFilterData.ts b/src/utils/removeManagedFieldsAndFilterData.ts index 2df79ac7..2216224f 100644 --- a/src/utils/removeManagedFieldsAndFilterData.ts +++ b/src/utils/removeManagedFieldsAndFilterData.ts @@ -24,7 +24,6 @@ export type Resource = { }; export const removeManagedFieldsAndFilterData = (resourceObject: Resource, showOnlyImportantData: boolean) => { - console.log(resourceObject); if (resourceObject?.metadata?.managedFields) { return { ...resourceObject, From ba3644c39fb2c520e0df13e2666774b5d525210c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:18:27 +0200 Subject: [PATCH 09/15] Update src/utils/removeManagedFieldsAndFilterData.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/utils/removeManagedFieldsAndFilterData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/removeManagedFieldsAndFilterData.ts b/src/utils/removeManagedFieldsAndFilterData.ts index 2216224f..54292050 100644 --- a/src/utils/removeManagedFieldsAndFilterData.ts +++ b/src/utils/removeManagedFieldsAndFilterData.ts @@ -50,7 +50,7 @@ export const removeManagedFieldsAndFilterData = (resourceObject: Resource, showO ...item.metadata, managedFields: undefined, annotations: { - ...resourceObject.metadata.annotations, + ...item.metadata.annotations, [LAST_APPLIED_CONFIGURATION_ANNOTATION]: showOnlyImportantData ? undefined : resourceObject?.metadata?.annotations?.[LAST_APPLIED_CONFIGURATION_ANNOTATION], From e69ba68db29c4bfee61d5051d8ab033a626669ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:19:27 +0200 Subject: [PATCH 10/15] Update src/components/Graphs/Graph.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/components/Graphs/Graph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx index d45dcaf3..31c23347 100644 --- a/src/components/Graphs/Graph.tsx +++ b/src/components/Graphs/Graph.tsx @@ -44,7 +44,7 @@ const Graph: React.FC = () => { const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick); const yamlString = useMemo( - () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource)) : ''), + () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource, false)) : ''), [yamlResource], ); From fa557444b8c35cf46688aaf9e1da6a3809a50ae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:25:32 +0200 Subject: [PATCH 11/15] Update removeManagedFieldsAndFilterData.ts --- src/utils/removeManagedFieldsAndFilterData.ts | 68 +++++++++---------- 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/src/utils/removeManagedFieldsAndFilterData.ts b/src/utils/removeManagedFieldsAndFilterData.ts index 54292050..dc01ee20 100644 --- a/src/utils/removeManagedFieldsAndFilterData.ts +++ b/src/utils/removeManagedFieldsAndFilterData.ts @@ -23,44 +23,42 @@ export type Resource = { status?: unknown; }; -export const removeManagedFieldsAndFilterData = (resourceObject: Resource, showOnlyImportantData: boolean) => { - if (resourceObject?.metadata?.managedFields) { - return { - ...resourceObject, - metadata: { - ...resourceObject.metadata, - managedFields: undefined, - annotations: { - ...resourceObject.metadata.annotations, - [LAST_APPLIED_CONFIGURATION_ANNOTATION]: showOnlyImportantData - ? undefined - : resourceObject?.metadata?.annotations?.[LAST_APPLIED_CONFIGURATION_ANNOTATION], - }, - generation: showOnlyImportantData ? undefined : resourceObject?.metadata?.generation, - uid: showOnlyImportantData ? undefined : resourceObject?.metadata?.uid, - }, - }; +const cleanUpResource = ( + resource: Omit, + showOnlyImportantData: boolean, +): Omit => { + const newResource = { ...resource }; + + if (newResource.metadata) { + newResource.metadata = { ...newResource.metadata }; + delete newResource.metadata.managedFields; + + if (showOnlyImportantData) { + if (newResource.metadata.annotations) { + newResource.metadata.annotations = { ...newResource.metadata.annotations }; + delete newResource.metadata.annotations[LAST_APPLIED_CONFIGURATION_ANNOTATION]; + } + delete newResource.metadata.generation; + delete newResource.metadata.uid; + } + } + + return newResource; +}; + +export const removeManagedFieldsAndFilterData = ( + resourceObject: Resource, + showOnlyImportantData: boolean, +): Resource => { + if (!resourceObject) { + return {} as Resource; } - if (resourceObject?.items) { + if (resourceObject.items) { return { - ...resourceObject, - items: resourceObject.items.map((item) => ({ - ...item, - metadata: { - ...item.metadata, - managedFields: undefined, - annotations: { - ...item.metadata.annotations, - [LAST_APPLIED_CONFIGURATION_ANNOTATION]: showOnlyImportantData - ? undefined - : resourceObject?.metadata?.annotations?.[LAST_APPLIED_CONFIGURATION_ANNOTATION], - }, - generation: showOnlyImportantData ? undefined : resourceObject?.metadata?.generation, - uid: showOnlyImportantData ? undefined : resourceObject?.metadata?.uid, - }, - })), + ...cleanUpResource(resourceObject, showOnlyImportantData), + items: resourceObject.items.map((item) => cleanUpResource(item, showOnlyImportantData)), }; } - return resourceObject; + return cleanUpResource(resourceObject, showOnlyImportantData); }; From 4271f168f90df7df0db1eca18f9d2ed8b4c6849d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:29:05 +0200 Subject: [PATCH 12/15] Update Graph.tsx --- src/components/Graphs/Graph.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx index 31c23347..5e979807 100644 --- a/src/components/Graphs/Graph.tsx +++ b/src/components/Graphs/Graph.tsx @@ -10,7 +10,7 @@ import { Legend, LegendItem } from './Legend'; import { YamlViewDialog } from '../Yaml/YamlViewDialog'; import YamlViewer from '../Yaml/YamlViewer'; import { stringify } from 'yaml'; -import { removeManagedFieldsAndFilterData } from '../../utils/removeManagedFieldsAndFilterData.ts'; +import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts'; import { useTranslation } from 'react-i18next'; import { useGraph } from './useGraph'; import { ManagedResourceItem } from '../../lib/shared/types'; @@ -44,7 +44,7 @@ const Graph: React.FC = () => { const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick); const yamlString = useMemo( - () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource, false)) : ''), + () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource as unknown as Resource, false)) : ''), [yamlResource], ); @@ -134,7 +134,7 @@ const Graph: React.FC = () => { } + dialogContent={} />
); From 5eebe5786a8563329732f6172e061fc286d02707 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:32:39 +0200 Subject: [PATCH 13/15] Update Graph.tsx --- src/components/Graphs/Graph.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx index 5e979807..dd816508 100644 --- a/src/components/Graphs/Graph.tsx +++ b/src/components/Graphs/Graph.tsx @@ -44,6 +44,11 @@ const Graph: React.FC = () => { const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick); const yamlString = useMemo( + () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource as unknown as Resource, true)) : ''), + [yamlResource], + ); + + const yamlStringToCopy = useMemo( () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource as unknown as Resource, false)) : ''), [yamlResource], ); @@ -134,7 +139,9 @@ const Graph: React.FC = () => { } + dialogContent={ + + } /> ); From 9d8106bd0988c3d42a6f5d171683bb43825320ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:36:38 +0200 Subject: [PATCH 14/15] Update YamlViewButtonWithLoader.tsx --- src/components/Yaml/YamlViewButtonWithLoader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Yaml/YamlViewButtonWithLoader.tsx b/src/components/Yaml/YamlViewButtonWithLoader.tsx index a097aebe..b5565b0f 100644 --- a/src/components/Yaml/YamlViewButtonWithLoader.tsx +++ b/src/components/Yaml/YamlViewButtonWithLoader.tsx @@ -6,11 +6,11 @@ import styles from './YamlViewer.module.css'; import { YamlIcon } from './YamlIcon.tsx'; import { YamlViewDialog } from './YamlViewDialog.tsx'; -export interface YamlViewButtonProps { +export type YamlViewButtonProps = { workspaceName?: string; resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes'; resourceName: string; -} +}; export const YamlViewButtonWithLoader: FC = ({ workspaceName, resourceType, resourceName }) => { const [showOnlyImportantData, setShowOnlyImportantData] = useState(true); From 59dcd235dc265508c8e549ff781216825a4b3a42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 30 Sep 2025 09:43:52 +0200 Subject: [PATCH 15/15] Update YamlViewButton.tsx --- src/components/Yaml/YamlViewButton.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Yaml/YamlViewButton.tsx b/src/components/Yaml/YamlViewButton.tsx index 6f6438d7..4f1aef0a 100644 --- a/src/components/Yaml/YamlViewButton.tsx +++ b/src/components/Yaml/YamlViewButton.tsx @@ -38,6 +38,8 @@ export const YamlViewButton: FC = ({ resourceObject }) => { showOnlyImportantData={showOnlyImportantData} /> } + setShowOnlyImportantData={setShowOnlyImportantData} + showOnlyImportantData={showOnlyImportantData} />