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)}
+
{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.