From b601e7799fff6fd361acf30e0e44dcf5e649fcdc Mon Sep 17 00:00:00 2001
From: Eric Herbrandson <eherbrandson@liveearth.com>
Date: Sat, 22 Jun 2019 14:46:38 -0500
Subject: [PATCH] Better icon styling to indicate various states

---
 client/src/components/button.js          |  4 +---
 client/src/components/eventsPanel.js     | 11 ++++-------
 client/src/components/listViewHelpers.js |  4 ++--
 client/src/components/podsPanel.js       | 21 ++++++++++++++++++++-
 client/src/scss/elements/svg.scss        |  8 ++++++++
 client/src/scss/settings.scss            |  4 +++-
 6 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/client/src/components/button.js b/client/src/components/button.js
index 28bc38d..858c86e 100644
--- a/client/src/components/button.js
+++ b/client/src/components/button.js
@@ -20,9 +20,7 @@ export default class Button extends Base {
 
     render() {
         const {working} = this.state || {};
-        const {
-            children, disabled, className, title,
-        } = this.props;
+        const {children, disabled, className, title} = this.props;
 
         return (
             <button
diff --git a/client/src/components/eventsPanel.js b/client/src/components/eventsPanel.js
index 40793a5..cfcee67 100644
--- a/client/src/components/eventsPanel.js
+++ b/client/src/components/eventsPanel.js
@@ -95,17 +95,14 @@ function sortByName({involvedObject}) {
 
 function getTypeClass(type) {
     switch (type) {
-        case 'Normal':
-            return '';
-
-        case 'Warning':
-        case 'Error':
-            return 'svg_error';
+        case 'Normal': return undefined;
+        case 'Warning': return 'svg_warn';
+        case 'Error': return 'svg_error';
 
         default: {
             const error = new Error('Unexpected event type');
             log.error('Unexpected event type', {error, type});
-            return '';
+            return 'svg_neutral';
         }
     }
 }
diff --git a/client/src/components/listViewHelpers.js b/client/src/components/listViewHelpers.js
index 0aa1318..88ee4f3 100644
--- a/client/src/components/listViewHelpers.js
+++ b/client/src/components/listViewHelpers.js
@@ -49,13 +49,13 @@ export function MetadataHeaders({includeNamespace, sort}) {
     );
 }
 
-export function MetadataColumns({item, href, includeNamespace, isError}) {
+export function MetadataColumns({item, href, includeNamespace, resourceClass}) {
     return (
         <>
             <td className='td_icon optional_small'>
                 <ResourceSvg
                     resource={item.kind}
-                    className={isError ? 'svg_error' : undefined}
+                    className={resourceClass}
                 />
                 <div className='td_iconLabel'>{item.kind}</div>
             </td>
diff --git a/client/src/components/podsPanel.js b/client/src/components/podsPanel.js
index 89b5543..dc8a5ef 100644
--- a/client/src/components/podsPanel.js
+++ b/client/src/components/podsPanel.js
@@ -74,7 +74,7 @@ export default class PodsPanel extends Base {
                         <tr key={x.metadata.uid}>
                             <MetadataColumns
                                 item={x}
-                                isError={x.status.phase !== 'Running'}
+                                resourceClass={getPhaseStyle(x.status.phase)}
                                 includeNamespace={!skipNamespace}
                                 href={`#!pod/${x.metadata.namespace}/${x.metadata.name}`}
                             />
@@ -89,6 +89,25 @@ export default class PodsPanel extends Base {
     }
 }
 
+function getPhaseStyle(phase) {
+    switch (phase) {
+        case 'Pending':
+            return 'svg_warn';
+
+        case 'Running':
+            return undefined;
+
+        case 'Failed':
+        case 'Unknown':
+            return 'svg_error';
+
+        case 'Succeeded':
+        case 'Completed':
+        default:
+            return 'svg_neutral';
+    }
+}
+
 function sortBy(item, metrics, resource, type) {
     const result = getPodResourcePercent(item, metrics, resource, type);
     return Number.isFinite(result) ? result : -1;
diff --git a/client/src/scss/elements/svg.scss b/client/src/scss/elements/svg.scss
index b66f84a..78900ec 100644
--- a/client/src/scss/elements/svg.scss
+++ b/client/src/scss/elements/svg.scss
@@ -5,6 +5,14 @@ svg {
     height: 25px;
 }
 
+.svg_neutral {
+    fill: $color-neutral;
+}
+
+.svg_warn {
+    fill: $color-warn;
+}
+
 .svg_error {
     fill: $color-error;
 }
diff --git a/client/src/scss/settings.scss b/client/src/scss/settings.scss
index 48565c5..ba8c430 100755
--- a/client/src/scss/settings.scss
+++ b/client/src/scss/settings.scss
@@ -5,8 +5,10 @@ $color-light: #AAA;
 $color-dark: #888098;
 $color-darkest: #344055;
 
-$color-accent: #326ce5;
+$color-accent: #326CE5;
+$color-warn: #aaa810;
 $color-error: #B9314F;
+$color-neutral: $color-dark;
 
 $color-font: $color-darkest;