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;