Merge #68049

68049: ui: cluster overview node status color mismatch r=elkmaster a=elkmaster

We aggreagate rows for multiregion cluster in nodes list
table and used single method to calculate status badge for
aggregated and single node row. After adding additional
node status `NODE_STATUS_DRAINING` we have got
enum values overlap and that lead to `LIVE` badge with
`warning` color.
To fix that, and avoid same problem in future, changes for
splitting up aggregated and non aggregated color values
were made.

Resolves: #67274

Release note(ui); fix color mismatch of node status badge
on cluster overview page.

Co-authored-by: Vlad Los <carrott9@gmail.com>

pkg/ui/src/views/cluster/containers/nodesOverview/index.tsx

@@ -129,7 +129,7 @@ interface DecommissionedNodeListProps extends NodeCategoryListProps {
 }
 
 const getBadgeTypeByNodeStatus = (
-  status: LivenessStatus | AggregatedNodeStatus,
+  status: LivenessStatus,
 ): BadgeProps["status"] => {
   switch (status) {
     case LivenessStatus.NODE_STATUS_UNKNOWN:
@@ -146,6 +146,15 @@ const getBadgeTypeByNodeStatus = (
       return "default";
     case LivenessStatus.NODE_STATUS_DRAINING:
       return "warning";
+    default:
+      return switchExhaustiveCheck(status);
+  }
+};
+
+const getBadgeTypeByNodeStatusAggregated = (
+  status: AggregatedNodeStatus,
+): BadgeProps["status"] => {
+  switch (status) {
     case AggregatedNodeStatus.LIVE:
       return "default";
     case AggregatedNodeStatus.WARNING:
@@ -312,9 +321,13 @@ export class NodeList extends React.Component<LiveNodeListProps> {
       title: <StatusTooltip>Status</StatusTooltip>,
       render: (_text, record) => {
         let badgeText: string;
-        let tooltipText: any;
-        let nodeTooltip: any;
-        const badgeType = getBadgeTypeByNodeStatus(record.status);
+        let tooltipText: string | JSX.Element;
+        let nodeTooltip: string | JSX.Element;
+
+        // single node row
+        const badgeType = getBadgeTypeByNodeStatus(
+          record.status as LivenessStatus,
+        );
         switch (record.status) {
           case AggregatedNodeStatus.DEAD:
             badgeText = "warning";
@@ -336,14 +349,20 @@ export class NodeList extends React.Component<LiveNodeListProps> {
             tooltipText = getStatusDescription(record.status);
             break;
         }
+
+        // if aggregated row
         if (!record.nodeId) {
+          const badgeType = getBadgeTypeByNodeStatusAggregated(
+            record.status as AggregatedNodeStatus,
+          );
           return (
             <Tooltip title={nodeTooltip}>
               {""}
               <Badge status={badgeType} text={badgeText} />
             </Tooltip>
           );
         }
+
         return (
           <Badge
             status={badgeType}