diff --git a/client/src/components/listViewHelpers.js b/client/src/components/listViewHelpers.js
index 8fe3e74..58b49c6 100644
--- a/client/src/components/listViewHelpers.js
+++ b/client/src/components/listViewHelpers.js
@@ -71,6 +71,11 @@ export function MetadataColumns({item, href, includeNamespace, resourceClass}) {
className={resourceClass}
/>
{item.kind}
+
+ {/** 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")
+ && MASTER}
+
{href ? ({item.metadata.name}) : item.metadata.name}
diff --git a/client/src/components/nodesPanel.js b/client/src/components/nodesPanel.js
index a47e2a4..722409e 100644
--- a/client/src/components/nodesPanel.js
+++ b/client/src/components/nodesPanel.js
@@ -76,7 +76,7 @@ export default class NodesPanel extends Base {
|
| {objectMap(x.metadata.labels)} |
- {getReadyStatus(x)} |
+ {statusSymbol(getReadyStatus(x))} |
{getPercentDisplay(x, metrics, 'cpu')} |
{getResourcePercentDisplay(x, pods, 'cpu', 'requests')} |
{getResourcePercentDisplay(x, pods, 'cpu', 'limits')} |
@@ -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 {utf8Symbol};
+}
+
+
+
function getPercentDisplay(node, metrics, resource) {
const used = getNodeUsage(node, metrics, resource);
return percent(node, used, resource);
diff --git a/client/src/scss/index.scss b/client/src/scss/index.scss
index fd1563d..4290323 100755
--- a/client/src/scss/index.scss
+++ b/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;