feat: Expose OPA warnings to ArgoCD UI

ui/src/app/applications/components/utils.test.tsx

@@ -122,6 +122,14 @@ test('OperationState.Sync OK', () => {
     expect(tree).toMatchSnapshot();
 });
 
+test('OperationState.Sync warning', () => {
+    const tree = renderer
+        .create(<OperationState app={{metadata: {}, status: {operationState: {operation: {sync: {}}, phase: OperationPhases.Warning}}} as Application} />)
+        .toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
 test('OperationState.Sync error', () => {
     const tree = renderer.create(<OperationState app={{metadata: {}, status: {operationState: {operation: {sync: {}}, phase: OperationPhases.Error}}} as Application} />).toJSON();
 
@@ -212,6 +220,12 @@ test('ResourceResultIcon.SyncFailed', () => {
     expect(tree).toMatchSnapshot();
 });
 
+test('ResourceResultIcon.SyncedWithWarning', () => {
+    const tree = renderer.create(<ResourceResultIcon resource={{status: ResultCodes.SyncedWithWarning} as ResourceResult} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
 test('ResourceResultIcon.Hook.Running', () => {
     const tree = renderer
         .create(
@@ -253,3 +267,9 @@ test('ResourceResultIcon.Hook.Terminating', () => {
 
     expect(tree).toMatchSnapshot();
 });
+
+test('ResourceResultIcon.Hook.Warning', () => {
+    const tree = renderer.create(<ResourceResultIcon resource={{hookType: 'Sync', hookPhase: OperationPhases.Warning} as ResourceResult} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});

ui/src/app/applications/components/utils.tsx

@@ -206,6 +206,10 @@ export const OperationPhaseIcon = ({app}: {app: appModels.Application}) => {
             className = 'fa fa-check-circle';
             color = COLORS.operation.success;
             break;
+        case appModels.OperationPhases.Warning:
+            className = 'fa fa-check-circle';
+            color = COLORS.operation.warning;
+            break;
         case appModels.OperationPhases.Error:
             className = 'fa fa-times-circle';
             color = COLORS.operation.error;
@@ -764,6 +768,10 @@ export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResu
             case appModels.ResultCodes.PruneSkipped:
                 icon = 'fa-heart';
                 break;
+            case appModels.ResultCodes.SyncedWithWarning:
+                color = COLORS.sync_result.SyncedWithWarning;
+                icon = 'fa-heart-broken';
+                break;
         }
         let title: string = resource.message;
         if (resource.message) {
@@ -794,6 +802,10 @@ export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResu
                 color = COLORS.operation.terminating;
                 className = 'fa fa-circle-notch fa-spin';
                 break;
+            case appModels.OperationPhases.Warning:
+                color = COLORS.operation.warning;
+                className = 'fa fa-heart-broken';
+                break;
         }
         let title: string = resource.message;
         if (resource.message) {
@@ -867,6 +879,8 @@ const getOperationStateTitle = (app: appModels.Application) => {
                     return 'Sync OK';
                 case 'Terminating':
                     return 'Terminated';
+                case 'Warning':
+                    return 'Sync warning';
             }
     }
     return 'Unknown';
@@ -877,7 +891,7 @@ export const OperationState = ({app, quiet}: {app: appModels.Application; quiet?
     if (appOperationState === undefined) {
         return <React.Fragment />;
     }
-    if (quiet && [appModels.OperationPhases.Running, appModels.OperationPhases.Failed, appModels.OperationPhases.Error].indexOf(appOperationState.phase) === -1) {
+    if (quiet && [appModels.OperationPhases.Running, appModels.OperationPhases.Failed, appModels.OperationPhases.Error, appModels.OperationPhases.Warning].indexOf(appOperationState.phase) === -1) {
         return <React.Fragment />;
     }
 

ui/src/app/shared/components/colors.ts

@@ -25,18 +25,21 @@ export const COLORS = {
         failed: ARGO_FAILED_COLOR,
         running: ARGO_RUNNING_COLOR,
         success: ARGO_SUCCESS_COLOR,
-        terminating: ARGO_TERMINATING_COLOR
+        terminating: ARGO_TERMINATING_COLOR,
+        warning: ARGO_WARNING_COLOR
     },
     sync: {
         synced: ARGO_SUCCESS_COLOR,
         out_of_sync: ARGO_WARNING_COLOR,
-        unknown: ARGO_GRAY4_COLOR
+        unknown: ARGO_GRAY4_COLOR,
+        SyncedWithWarning: ARGO_WARNING_COLOR
     },
     sync_result: {
         failed: ARGO_FAILED_COLOR,
         synced: ARGO_SUCCESS_COLOR,
         pruned: ARGO_GRAY4_COLOR,
-        unknown: ARGO_GRAY4_COLOR
+        unknown: ARGO_GRAY4_COLOR,
+        SyncedWithWarning: ARGO_WARNING_COLOR
     },
     sync_window: {
         deny: ARGO_FAILED_COLOR,

ui/src/app/shared/models.ts

@@ -62,14 +62,15 @@ export interface Operation {
     initiatedBy: OperationInitiator;
 }
 
-export type OperationPhase = 'Running' | 'Error' | 'Failed' | 'Succeeded' | 'Terminating';
+export type OperationPhase = 'Running' | 'Error' | 'Failed' | 'Succeeded' | 'Terminating' | 'Warning';
 
 export const OperationPhases = {
     Running: 'Running' as OperationPhase,
     Failed: 'Failed' as OperationPhase,
     Error: 'Error' as OperationPhase,
     Succeeded: 'Succeeded' as OperationPhase,
-    Terminating: 'Terminating' as OperationPhase
+    Terminating: 'Terminating' as OperationPhase,
+    Warning: 'Warning' as OperationPhase
 };
 
 /**
@@ -99,13 +100,14 @@ export interface SyncOperationResult {
     revision: string;
 }
 
-export type ResultCode = 'Synced' | 'SyncFailed' | 'Pruned' | 'PruneSkipped';
+export type ResultCode = 'Synced' | 'SyncFailed' | 'Pruned' | 'PruneSkipped' | 'SyncedWithWarning';
 
 export const ResultCodes = {
     Synced: 'Synced',
     SyncFailed: 'SyncFailed',
     Pruned: 'Pruned',
-    PruneSkipped: 'PruneSkipped'
+    PruneSkipped: 'PruneSkipped',
+    SyncedWithWarning: 'SyncedWithWarning'
 };
 
 export interface ResourceResult {