From 4dc10531bf69310f063bf9139666ce231f86f197 Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Fri, 13 Dec 2024 20:22:50 -0500 Subject: [PATCH 1/4] feat: improve StatefulSet immutable field error messages Signed-off-by: Atif Ali --- .../application-operation-state.tsx | 44 ++++++++++++++++++- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx index 20c02bbfb04f9..2f95e7ac4f48c 100644 --- a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx +++ b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx @@ -54,12 +54,52 @@ const Filter = (props: {filters: string[]; setFilters: (f: string[]) => void; op export const ApplicationOperationState: React.StatelessComponent = ({application, operationState}, ctx: AppContext) => { const [messageFilters, setMessageFilters] = React.useState([]); + const getFormattedMessage = (message: string) => { + const prefix = 'one or more objects failed to apply, reason: '; + let cleanMessage = message; + + // Remove duplicate prefix if exists + if (message.startsWith(prefix) && message.substring(prefix.length).startsWith(prefix)) { + cleanMessage = prefix + message.substring(prefix.length * 2); + } + + // Format immutable fields error message + if (cleanMessage.includes('attempting to change immutable fields:')) { + const [header, ...details] = cleanMessage.split('\n'); + const formattedDetails = details + .filter(line => line.trim()) + .map(line => { + if (line.startsWith('-')) { + const [field, changes] = line.substring(2).split(':'); + if (changes) { + const [from, to] = changes.split('to:').map(s => s.trim()); + return ` - ${field}:\n from: ${from.replace('from:', '').trim()}\n to: ${to}`; + } + } + return line; + }) + .join('\n'); + + return `${header}\n${formattedDetails}`; + } + + return cleanMessage; + }; const operationAttributes = [ {title: 'OPERATION', value: utils.getOperationType(application)}, {title: 'PHASE', value: operationState.phase}, - ...(operationState.message ? [{title: 'MESSAGE', value: operationState.message}] : []), - {title: 'STARTED AT', value: }, + ...(operationState.message ? [{ + title: 'MESSAGE', + value: 
+                {getFormattedMessage(operationState.message)}
+
+ }] : []), {title: 'STARTED AT', value: }, { title: 'DURATION', value: ( From e89cafb9e0e550e6a59dc78a9f23b775a6ba4ba0 Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Wed, 18 Dec 2024 15:13:17 -0500 Subject: [PATCH 2/4] ui lint Signed-off-by: Atif Ali --- .../application-operation-state.tsx | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx index 2f95e7ac4f48c..0edcf32214e10 100644 --- a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx +++ b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx @@ -57,12 +57,12 @@ export const ApplicationOperationState: React.StatelessComponent = ({appl const getFormattedMessage = (message: string) => { const prefix = 'one or more objects failed to apply, reason: '; let cleanMessage = message; - + // Remove duplicate prefix if exists if (message.startsWith(prefix) && message.substring(prefix.length).startsWith(prefix)) { cleanMessage = prefix + message.substring(prefix.length * 2); } - + // Format immutable fields error message if (cleanMessage.includes('attempting to change immutable fields:')) { const [header, ...details] = cleanMessage.split('\n'); @@ -79,27 +79,35 @@ export const ApplicationOperationState: React.StatelessComponent = ({appl return line; }) .join('\n'); - + return `${header}\n${formattedDetails}`; } - + return cleanMessage; }; const operationAttributes = [ {title: 'OPERATION', value: utils.getOperationType(application)}, {title: 'PHASE', value: operationState.phase}, - ...(operationState.message ? [{ - title: 'MESSAGE', - value: 
-                {getFormattedMessage(operationState.message)}
-
- }] : []), {title: 'STARTED AT', value: }, + ...(operationState.message + ? [ + { + title: 'MESSAGE', + value: ( + 
+                              {getFormattedMessage(operationState.message)}
+
+ ) + } + ] + : []), + {title: 'STARTED AT', value: }, { title: 'DURATION', value: ( From fdeccbb792f14893a978b695cf2058d374b9dd1c Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Thu, 19 Dec 2024 16:44:29 -0500 Subject: [PATCH 3/4] move immuatble formatter utils.tsx Signed-off-by: Atif Ali --- .../application-operation-state.tsx | 33 +------------------ ui/src/app/applications/components/utils.tsx | 30 +++++++++++++++++ 2 files changed, 31 insertions(+), 32 deletions(-) diff --git a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx index 0edcf32214e10..f9e4631387f4b 100644 --- a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx +++ b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx @@ -54,37 +54,6 @@ const Filter = (props: {filters: string[]; setFilters: (f: string[]) => void; op export const ApplicationOperationState: React.StatelessComponent = ({application, operationState}, ctx: AppContext) => { const [messageFilters, setMessageFilters] = React.useState([]); - const getFormattedMessage = (message: string) => { - const prefix = 'one or more objects failed to apply, reason: '; - let cleanMessage = message; - - // Remove duplicate prefix if exists - if (message.startsWith(prefix) && message.substring(prefix.length).startsWith(prefix)) { - cleanMessage = prefix + message.substring(prefix.length * 2); - } - - // Format immutable fields error message - if (cleanMessage.includes('attempting to change immutable fields:')) { - const [header, ...details] = cleanMessage.split('\n'); - const formattedDetails = details - .filter(line => line.trim()) - .map(line => { - if (line.startsWith('-')) { - const [field, changes] = line.substring(2).split(':'); - if (changes) { - const [from, to] = changes.split('to:').map(s => s.trim()); - return ` - ${field}:\n from: ${from.replace('from:', '').trim()}\n to: ${to}`; - } - } - return line; - }) - .join('\n'); - - return `${header}\n${formattedDetails}`; - } - - return cleanMessage; - }; const operationAttributes = [ {title: 'OPERATION', value: utils.getOperationType(application)}, @@ -101,7 +70,7 @@ export const ApplicationOperationState: React.StatelessComponent = ({appl margin: 0, fontFamily: 'inherit' }}> - {getFormattedMessage(operationState.message)} + {utils.formatOperationMessage(operationState.message)} ) } diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx index 1e6511bc1bf1a..08caaa247aab0 100644 --- a/ui/src/app/applications/components/utils.tsx +++ b/ui/src/app/applications/components/utils.tsx @@ -1546,6 +1546,36 @@ export function formatCreationTimestamp(creationTimestamp: string) { ); } +export function formatOperationMessage(message: string): string { + if (!message) { + return message; + } + + let cleanMessage = message; + + // Format immutable fields error message + if (cleanMessage.includes('attempting to change immutable fields:')) { + const [header, ...details] = cleanMessage.split('\n'); + const formattedDetails = details + .filter(line => line.trim()) + .map(line => { + if (line.startsWith('-')) { + const [field, changes] = line.substring(2).split(':'); + if (changes) { + const [from, to] = changes.split('to:').map(s => s.trim()); + return ` - ${field}:\n from: ${from.replace('from:', '').trim()}\n to: ${to}`; + } + } + return line; + }) + .join('\n'); + + return `${header}\n${formattedDetails}`; + } + + return cleanMessage; +} + export const selectPostfix = (arr: string[], singular: string, plural: string) => (arr.length > 1 ? plural : singular); export function getUsrMsgKeyToDisplay(appName: string, msgKey: string, usrMessages: appModels.UserMessages[]) { From 223a7746c4b980d067bed0fe658632cf7c7169cc Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Thu, 19 Dec 2024 17:28:50 -0500 Subject: [PATCH 4/4] linter fix Signed-off-by: Atif Ali --- ui/src/app/applications/components/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx index 08caaa247aab0..650da4f18922f 100644 --- a/ui/src/app/applications/components/utils.tsx +++ b/ui/src/app/applications/components/utils.tsx @@ -1551,7 +1551,7 @@ export function formatOperationMessage(message: string): string { return message; } - let cleanMessage = message; + const cleanMessage = message; // Format immutable fields error message if (cleanMessage.includes('attempting to change immutable fields:')) {