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 a76ecca005bfe..b4c8cd30f25ee 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 ba690865ce4cc..3f599dc07e452 100644 --- a/ui/src/app/applications/components/utils.tsx +++ b/ui/src/app/applications/components/utils.tsx @@ -1547,6 +1547,44 @@ export function formatCreationTimestamp(creationTimestamp: string) { ); } +/* + * formatStatefulSetChange reformats a single line describing changes to immutable fields in a StatefulSet. + * It extracts the field name and its "from" and "to" values for better readability. + */ +function formatStatefulSetChange(line: string): string { + if (line.startsWith('-')) { + // Remove leading "- " from the line and split into field and changes + const [field, changes] = line.substring(2).split(':'); + if (changes) { + // Split "from: X to: Y" into separate lines with aligned values + const [from, to] = changes.split('to:').map(s => s.trim()); + return ` - ${field}:\n from: ${from.replace('from:', '').trim()}\n to: ${to}`; + } + } + return line; +} + +export function formatOperationMessage(message: string): string { + if (!message) { + return message; + } + + // Format immutable fields error message + if (message.includes('attempting to change immutable fields:')) { + const [header, ...details] = message.split('\n'); + const formattedDetails = details + // Remove empty lines + .filter(line => line.trim()) + // Use helper function + .map(formatStatefulSetChange) + .join('\n'); + + return `${header}\n${formattedDetails}`; + } + + return message; +} + export const selectPostfix = (arr: string[], singular: string, plural: string) => (arr.length > 1 ? plural : singular); export function getUsrMsgKeyToDisplay(appName: string, msgKey: string, usrMessages: appModels.UserMessages[]) {