ui: cluster overview node status color mismatch

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: cockroachdb#67274

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

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}