diff --git a/src/app/applications/components/application-status-panel/application-status-panel.scss b/src/app/applications/components/application-status-panel/application-status-panel.scss index 128faf682dd05..98f1636d3c2ff 100644 --- a/src/app/applications/components/application-status-panel/application-status-panel.scss +++ b/src/app/applications/components/application-status-panel/application-status-panel.scss @@ -35,6 +35,10 @@ } &__item-value { + .fa { + font-size: 1em; + } + font-size: 2em; color: $argo-color-gray-6; @@ -42,6 +46,18 @@ color: $argo-color-teal-6; } + &--InProgress a, &--Terminating a { + color: $argo-running-color; + } + + &--Error a, &--Failed a { + color: $argo-failed-color; + } + + &--Succeeded a { + color: $argo-success-color; + } + i { font-size: .6em; } diff --git a/src/app/applications/components/application-status-panel/application-status-panel.tsx b/src/app/applications/components/application-status-panel/application-status-panel.tsx index 2fe15a4446aae..86308488e07d3 100644 --- a/src/app/applications/components/application-status-panel/application-status-panel.tsx +++ b/src/app/applications/components/application-status-panel/application-status-panel.tsx @@ -31,8 +31,9 @@ export const ApplicationStatusPanel = ({application, showOperation, showConditio {application.status.operationState && (
-
- showOperation && showOperation()}>{utils.getOperationType(application.status.operationState)} +
+ showOperation && showOperation()}>{utils.getOperationType(application.status.operationState)}
{application.status.operationState.phase} at {application.status.operationState.finishedAt || application.status.operationState.startedAt} diff --git a/src/app/applications/components/utils.tsx b/src/app/applications/components/utils.tsx index a045320f364a1..9e42247833d8b 100644 --- a/src/app/applications/components/utils.tsx +++ b/src/app/applications/components/utils.tsx @@ -69,6 +69,28 @@ export async function deleteApplication(appName: string, context: AppContext) { } } +export const OperationPhaseIcon = ({phase}: { phase: appModels.OperationPhase }) => { + let className = ''; + let color = ''; + + switch (phase) { + case appModels.OperationPhases.Succeeded: + className = 'fa fa-check-circle'; + color = ARGO_SUCCESS_COLOR; + break; + case appModels.OperationPhases.Error: + case appModels.OperationPhases.Failed: + className = 'fa fa-times'; + color = ARGO_FAILED_COLOR; + break; + default: + className = 'fa fa-circle-o-notch status-icon--running status-icon--spin'; + color = ARGO_RUNNING_COLOR; + break; + } + return ; +}; + export const ComparisonStatusIcon = ({status}: { status: appModels.ComparisonStatus }) => { let className = ''; let color = ''; diff --git a/src/app/shared/models.ts b/src/app/shared/models.ts index 4efce83eae963..ab3d652378c07 100644 --- a/src/app/shared/models.ts +++ b/src/app/shared/models.ts @@ -34,7 +34,15 @@ export interface Operation { rollback: RollbackOperation; } -export type OperationPhase = 'InProgress' | 'Failed' | 'Succeeded' | 'Terminating'; +export type OperationPhase = 'InProgress' | 'Error' | 'Failed' | 'Succeeded' | 'Terminating'; + +export const OperationPhases = { + InProgress: 'InProgress' as OperationPhase, + Failed: 'Failed' as OperationPhase, + Error: 'Error' as OperationPhase, + Succeeded: 'Succeeded' as OperationPhase, + Terminating: 'Terminating' as OperationPhase, +}; /** * OperationState contains information about state of currently performing operation on application.