Merge pull request #23 from merenbach/fix-application-card

Update colors for application cards
argoproj · Aug 1, 2018 · 363ca3f · 363ca3f
2 parents 3d9943c + 6c648ef
commit 363ca3f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/app/applications/components/applications-list/applications-list.scss b/src/app/applications/components/applications-list/applications-list.scss
@@ -23,10 +23,28 @@
         padding-left: 1em;
         border-left: 5px solid $argo-color-gray-4;
 
+        // healthy statuses
+
         &--comparison-Synced {
             border-left-color: $argo-success-color;
         }
 
+        &--health-Healthy {
+            border-left-color: $argo-success-color;
+        }
+
+        // intermediate statuses
+
+        &--health-Progressing {
+            border-left-color: $argo-running-color;
+        }
+
+        // failed statuses
+
+        &--health-Degraded {
+            border-left-color: $argo-failed-color;
+        }
+
         &--comparison-Error {
             border-left-color: $argo-failed-color;
         }

diff --git a/src/app/applications/components/applications-list/applications-list.tsx b/src/app/applications/components/applications-list/applications-list.tsx
@@ -110,7 +110,7 @@ export class ApplicationsList extends React.Component<Props, State> {
                             {this.state.applications.map((app) => (
                                 <div key={app.metadata.name} className='column column-block'>
                                     <div className={`argo-table-list__row
-                                        applications-list__entry applications-list__entry--comparison-${app.status.comparisonResult.status}`
+                                        applications-list__entry applications-list__entry--comparison-${app.status.comparisonResult.status} applications-list__entry--health-${app.status.health.status}`
                                     }>
                                         <div className='row' onClick={() => this.appContext.router.history.push(`/applications/${app.metadata.name}`)}>
                                             <div className='columns small-12 applications-list__info'>