Add MASTER label + icons for ready status

client/src/components/listViewHelpers.js

@@ -71,6 +71,11 @@ export function MetadataColumns({item, href, includeNamespace, resourceClass}) {
                     className={resourceClass}
                 />
                 <div className='td_iconLabel'>{item.kind}</div>
+                
+                {/** If the node is a master, display a simple "MASTER" label below the item.kind icon */}
+                {Object.entries(item.metadata.labels).some(([key, _]) => key === "node-role.kubernetes.io/master")
+                    && <span className='td_iconLabel node-master'>MASTER</span>}
+
             </td>
             <td>
                 {href ? (<a href={href}>{item.metadata.name}</a>) : item.metadata.name}

client/src/components/nodesPanel.js

@@ -76,7 +76,7 @@ export default class NodesPanel extends Base {
                         <tr key={x.metadata.uid}>
                             <MetadataColumns item={x} href={`#!node/${x.metadata.name}`} />
                             <td className='smallText optional_medium'>{objectMap(x.metadata.labels)}</td>
-                            <td className='optional_small'>{getReadyStatus(x)}</td>
+                            <td className='optional_small center'>{statusSymbol(getReadyStatus(x))}</td>
                             <td>{getPercentDisplay(x, metrics, 'cpu')}</td>
                             <td className='optional_xsmall'>{getResourcePercentDisplay(x, pods, 'cpu', 'requests')}</td>
                             <td className='optional_xsmall'>{getResourcePercentDisplay(x, pods, 'cpu', 'limits')}</td>
@@ -91,13 +91,33 @@ export default class NodesPanel extends Base {
     }
 }
 
+/**
+ * 
+ * @param {*status* object with a status field  (most likely the row from the TableBody)}
+ * @returns the status text, as defined in https://kubernetes.io/docs/concepts/architecture/nodes/#condition
+ */
 function getReadyStatus({status}) {
     if (!status.conditions) return null;
-
     const ready = status.conditions.find(y => y.type === 'Ready');
     return ready && ready.status;
 }
 
+/** Simple mapping between ready statuses and an UTF-8 symbol character */
+const statusesToUtf8 = { "True": "\u2713", "False": "\uD83D\uDEC7", "Unknown": "\u003F" }
+
+/**
+ * 
+ * @param {*statusTxt a status text (as returned by getReadyStatus for example) }
+ * @returns a dedicated span element with an UTF-8 symbol representing the status
+ */
+function statusSymbol(statusTxt) {
+    const cssClass = "node-ready-status-" + statusTxt;
+    const utf8Symbol = statusesToUtf8[statusTxt] || statusesToUtf8["Unknown"];
+    return <span class={cssClass} title={statusTxt}>{utf8Symbol}</span>;
+}
+
+
+
 function getPercentDisplay(node, metrics, resource) {
     const used = getNodeUsage(node, metrics, resource);
     return percent(node, used, resource);

client/src/scss/index.scss

@@ -79,6 +79,33 @@ button.titleBar_hamburger {
     font-size: $font-size-small;
 }
 
+%node-ready-status-shared {
+  font-size: $font-size-large;
+}
+
+.node-ready-status-True {
+  @extend %node-ready-status-shared;
+  color: green;
+}
+
+.node-ready-status-False {
+  @extend %node-ready-status-shared;
+  color: orange;
+}
+
+.node-ready-status-Unknown {
+  @extend %node-ready-status-shared;
+  color: $color-error;
+}
+
+.node-master {
+	color: $color-accent;
+}
+
+.center {
+	text-align: center;
+}
+
 @media only screen and (max-width: $media-medium) {
 	.optional_medium {
 		display: none;