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..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 @@ -58,7 +58,24 @@ export const ApplicationOperationState: React.StatelessComponent = ({appl const operationAttributes = [ {title: 'OPERATION', value: utils.getOperationType(application)}, {title: 'PHASE', value: operationState.phase}, - ...(operationState.message ? [{title: 'MESSAGE', value: operationState.message}] : []), + ...(operationState.message + ? [ + { + title: 'MESSAGE', + value: ( +
+                              {utils.formatOperationMessage(operationState.message)}
+                          
+ ) + } + ] + : []), {title: 'STARTED AT', value: }, { title: 'DURATION', diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx index 1e6511bc1bf1a..650da4f18922f 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; + } + + const 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[]) {