From ba17c86ee55579fe6af4fdaa6a12e0ae3a379b3d Mon Sep 17 00:00:00 2001 From: Sergey-Kizimov Date: Thu, 29 Dec 2022 09:33:02 -0800 Subject: [PATCH] Expose OPA warnings to ArgoCD UI Signed-off-by: Sergey-Kizimov --- .../applications/components/utils.test.tsx | 20 +++++++++++++++++++ ui/src/app/applications/components/utils.tsx | 16 ++++++++++++++- ui/src/app/shared/components/colors.ts | 9 ++++++--- ui/src/app/shared/models.ts | 10 ++++++---- 4 files changed, 47 insertions(+), 8 deletions(-) diff --git a/ui/src/app/applications/components/utils.test.tsx b/ui/src/app/applications/components/utils.test.tsx index 8c453fdea9744..9fddffdf997ae 100644 --- a/ui/src/app/applications/components/utils.test.tsx +++ b/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() + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); + test('OperationState.Sync error', () => { const tree = renderer.create().toJSON(); @@ -212,6 +220,12 @@ test('ResourceResultIcon.SyncFailed', () => { expect(tree).toMatchSnapshot(); }); +test('ResourceResultIcon.SyncedWithWarning', () => { + const tree = renderer.create().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().toJSON(); + + expect(tree).toMatchSnapshot(); +}); diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx index 49469eace6003..de30a7d8bf0db 100644 --- a/ui/src/app/applications/components/utils.tsx +++ b/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 ; } - 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 ; } diff --git a/ui/src/app/shared/components/colors.ts b/ui/src/app/shared/components/colors.ts index 9f38d3f925442..99ce53144782b 100644 --- a/ui/src/app/shared/components/colors.ts +++ b/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, diff --git a/ui/src/app/shared/models.ts b/ui/src/app/shared/models.ts index 3bbaed2ba4226..93b69c6a82fda 100644 --- a/ui/src/app/shared/models.ts +++ b/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 {