Issue #566 - indicate when operation is in progress or has failed (#46)

argoproj · Sep 17, 2018 · 1295a89 · 1295a89
1 parent 3e2f205
commit 1295a89
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
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
@@ -35,13 +35,29 @@
     }
 
     &__item-value {
+        .fa {
+            font-size: 1em;
+        }
+
         font-size: 2em;
         color: $argo-color-gray-6;
 
         &--highlight {
             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
@@ -31,8 +31,9 @@ export const ApplicationStatusPanel = ({application, showOperation, showConditio
             </div>
             {application.status.operationState && (
             <div className='application-status-panel__item columns small-3'>
-                <div className='application-status-panel__item-value'>
-                    <a onClick={() => showOperation && showOperation()}>{utils.getOperationType(application.status.operationState)}</a>
+                <div className={`application-status-panel__item-value application-status-panel__item-value--${application.status.operationState.phase}`}>
+                    <a onClick={() => showOperation && showOperation()}>{utils.getOperationType(application.status.operationState)} <utils.OperationPhaseIcon
+                        phase={application.status.operationState.phase}/></a>
                 </div>
                 <div className='application-status-panel__item-name'>
                     {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
@@ -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 <i title={phase} className={className} style={{ color }} />;
+};
+
 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
@@ -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.