Add frontend implementation for v1beta2 conditions

Author: Jont828

internal/describe_cluster.go

@@ -39,9 +39,8 @@ type ClusterResourceNode struct {
 	CollapseOnClick bool                   `json:"collapseOnClick"`
 	Collapsible     bool                   `json:"collapsible"`
 	Collapsed       bool                   `json:"collapsed"`
-	Ready           bool                   `json:"ready"`
-	Severity        string                 `json:"severity"`
-	HasReady        bool                   `json:"hasReady"`
+	Status          metav1.ConditionStatus `json:"status"`
+	HasStatus       bool                   `json:"hasStatus"`
 	Children        []*ClusterResourceNode `json:"children"`
 }
 
@@ -123,7 +122,7 @@ func objectTreeToResourceTree(ctx context.Context, objTree *tree.ObjectTree, obj
 	}
 	node.Provider = provider
 
-	setReadyFields(object, node)
+	setStatusFields(object, node)
 
 	childTrees := []*ClusterResourceNode{}
 	for _, child := range children {
@@ -170,9 +169,8 @@ func addAddonsGroupNode(_ context.Context, children []*ClusterResourceNode) []*C
 		CollapseOnClick: true,
 		Collapsible:     true,
 		Collapsed:       false,
-		HasReady:        false,
-		Ready:           true,
-		Severity:        "",
+		HasStatus:       false,
+		Status:          "",
 		UID:             "addons",
 	}
 
@@ -229,9 +227,8 @@ func createKindGroupNode(ctx context.Context, namespace string, kind string, pro
 		CollapseOnClick: true,
 		Collapsible:     true,
 		Collapsed:       true,
-		HasReady:        false,
-		Ready:           true,
-		Severity:        "",
+		HasStatus:       false,
+		Status:          "",
 		UID:             kind + ": ",
 	}
 
@@ -252,9 +249,8 @@ func createKindGroupNode(ctx context.Context, namespace string, kind string, pro
 				Collapsible:     true,
 				Collapsed:       true,
 				Children:        []*ClusterResourceNode{},
-				HasReady:        false,
-				Ready:           true,
-				Severity:        "",
+				HasStatus:       false,
+				Status:          "",
 				UID:             kind + ": ",
 			}
 		}
@@ -269,14 +265,12 @@ func createKindGroupNode(ctx context.Context, namespace string, kind string, pro
 			groupParent.Group = child.Group
 			groupParent.Version = child.Version
 			groupParent.UID += child.UID + " "
-			if child.HasReady {
-				groupNode.HasReady = true
-				groupNode.Ready = child.Ready && groupNode.Ready
-				groupNode.Severity = updateSeverityIfMoreSevere(groupNode.Severity, child.Severity)
-				// Set severity based on most severe child, i.e. Error > Warning > Info > Success
-				groupParent.HasReady = true
-				groupParent.Ready = child.Ready && groupParent.Ready
-				groupParent.Severity = updateSeverityIfMoreSevere(groupParent.Severity, child.Severity)
+			if child.HasStatus {
+				groupNode.HasStatus = true
+				groupNode.Status = updateStatusIfMoreSevere(groupNode.Status, child.Status)
+				// Set severity based on most severe child, i.e. False > Unknown > True (assuming positive polarity)
+				groupParent.HasStatus = true
+				groupParent.Status = updateStatusIfMoreSevere(groupParent.Status, child.Status)
 			}
 		} else {
 			resultChildren = append(resultChildren, child)

internal/helpers.go

@@ -41,27 +41,22 @@ func getObjList(ctx context.Context, c ctrlclient.Client, typeMeta metav1.TypeMe
 	return objList, nil
 }
 
-// updateSeverityIfMoreSevere takes an existing severity and a new severity and returns the more severe of the two based on the rule that Error > Warning > Info > None.
-// This is used to determine the severity of a group node, i.e. a node representing 2 Machines in the DescribeCluster resource tree.
-func updateSeverityIfMoreSevere(existingSev string, newSev string) string {
+// updateStatusIfMoreSevere takes an existing Status and a new Status and returns the more severe of the two based on the rule that False > Unknown > True.
+// Since Ready and Available conditions are used to determine the status of an object, both of which have positive polarity, we do not need to consider negative polarity conditions here.
+// This is used to determine the Status of a group node, i.e. a node representing 2 Machines in the DescribeCluster resource tree.
+func updateStatusIfMoreSevere(existingStatus metav1.ConditionStatus, newStatus metav1.ConditionStatus) metav1.ConditionStatus {
 	switch {
-	case existingSev == "":
-		return newSev
-	case existingSev == "Info":
-		if newSev == "Error" || newSev == "Warning" {
-			return newSev
-		}
-		return existingSev
-	case existingSev == "Warning":
-		if newSev == "Error" {
-			return newSev
-		}
-		return existingSev
-	case existingSev == "Error":
-		return existingSev
+	case existingStatus == "":
+		return newStatus
+	case existingStatus == metav1.ConditionTrue:
+		return newStatus
+	case existingStatus == metav1.ConditionFalse:
+		return existingStatus
+	case existingStatus == metav1.ConditionUnknown && newStatus == metav1.ConditionFalse:
+		return newStatus
 	}
 
-	return existingSev
+	return existingStatus
 }
 
 // getProvider returns the provider type for an object in the Cluster resource tree. If the object is a virtual object and its kind is
@@ -135,12 +130,17 @@ func getDisplayName(object ctrlclient.Object) string {
 	return displayName
 }
 
-// setReadyFields sets a marker on if an object has a ready condtion, and if so, whether it is ready or not and the severity of the condition.
-func setReadyFields(object ctrlclient.Object, node *ClusterResourceNode) {
-	if readyCondition := tree.GetReadyCondition(object); readyCondition != nil {
-		node.HasReady = true
-		node.Ready = readyCondition.Status == metav1.ConditionTrue // string comparison
-		node.Severity = "" // No Severity field; optionally use readyCondition.Reason or Message if needed
+// setStatusFields sets a marker on if an object has a ready condtion, and if so, whether it is ready or not and the severity of the condition.
+func setStatusFields(object ctrlclient.Object, node *ClusterResourceNode) {
+	// Note: Ready and Available conditions always have positive polarity.
+
+	// Available condition takes precedence over Ready condition. Note, clusterctl uses Ready over Available for Machines, which have both.
+	if available := tree.GetAvailableCondition(object); available != nil {
+		node.HasStatus = true
+		node.Status = available.Status
+	} else if readyCondition := tree.GetReadyCondition(object); readyCondition != nil {
+		node.HasStatus = true
+		node.Status = readyCondition.Status
 	}
 }
 

web/src/components/CustomResourceDefinition.vue

@@ -73,7 +73,6 @@
             <v-tooltip
               :top="scrollY <= 20"
               :bottom="scrollY > 20"
-              :disabled="condition.status === 'True'"
             >
               <template v-slot:activator="{ on, attrs }">
                 <v-chip
@@ -90,7 +89,7 @@
                   v-on="on"
                 >
                   <StatusIcon
-                    :type="condition.status === 'True' ? 'success' : (condition.Status === 'Unknown' ? 'unknown' : (condition.severity ? condition.severity.toLowerCase() : 'unknown' ))"
+                    :type="getIconType(condition)"
                     :spinnerWidth="2"
                     left
                   >
@@ -99,10 +98,7 @@
                   {{ condition.type }}
                 </v-chip>
               </template>
-              <span v-if="condition.severity && condition.reason">{{ condition.severity }}: {{ condition.reason }}</span>
-              <span v-else-if="condition.severity">{{ condition.severity }}</span>
-              <span v-else-if="condition.reason">{{ condition.reason }}</span>
-              <span v-else>Unknown</span>
+              <span> {{ condition.reason }}</span>
             </v-tooltip>
           </div>
         </div>
@@ -189,6 +185,15 @@ export default {
       conditions: [],
       url: "",
       scrollY: 0,
+      negativePolarityConditions: new Set([
+        "Paused",
+        "Deleting",
+        "RollingOut",
+        "ScalingUp",
+        "ScalingDown",
+        "MachineUpdating",
+        "Remediating",
+      ]),
     };
   },
   mounted() {
@@ -202,10 +207,25 @@ export default {
     console.log("URL is", this.url);
   },
   methods: {
+    getIconType(condition) {
+      let negativePolarity = this.negativePolarityConditions.has(condition.type); 
+      if (condition.status === "True") {
+        if (negativePolarity) return "error";
+        return "success";
+      } else if (condition.status === "False") {
+        if (negativePolarity) return "success";
+        return "error";
+      } else {
+        return "unknown";
+      }
+    },
     getType(condition) {
-      if (condition.status === "True") return "success";
-      else if (condition.isError || !condition.severity || condition.status === "Unknown") return "error"; // if severity is undefined, we assume it's an error
-      else return "warning";
+      let type = this.getIconType(condition);
+      if (type === "unknown") {
+        return "warning";
+      } else {
+        return type;
+      }
     },
     onScroll(e) {
       this.scrollY = window.scrollY;

web/src/components/DescribeClusterTree.vue

@@ -110,8 +110,8 @@
             </v-hover>
 
             <StatusBadge
-              v-if="node.hasReady"
-              :type="(node.ready) ? 'success' : node.severity.toLowerCase()"
+              v-if="node.hasStatus"
+              :type="getStatusType(node)"
               :size="18"
             ></StatusBadge>
           </div>
@@ -175,6 +175,18 @@ export default {
     selectedNode: Object,
     legend: Object,
   },
+  methods: {
+    getStatusType(node) {
+      // Note: 
+      if (node.status === "True") {
+        return "success";
+      } else if (node.status === "False") {
+        return "error";
+      } else { // Handles the case for node.status === "Unknown"
+        return "warning";
+      } 
+    },
+  }
 };
 </script>
 

web/src/components/StatusBadge.vue

@@ -60,20 +60,6 @@ export default {
       return this.$vuetify.theme.dark ? "dark" : "light";
     },
   },
-  methods: {
-    getColor() {
-      switch (this.type) {
-        case "ready":
-          return colors.green.base;
-        case "error":
-          return colors.red.accent2;
-        case "loading":
-          return colors.orange.darken1;
-        default:
-          return colors.grey;
-      }
-    },
-  },
 };
 </script>
 

web/src/components/StatusIcon.vue

@@ -125,9 +125,10 @@ export default {
   },
   methods: {
     getColor(type) {
+      console.log("Getting color for type", type);
       if (!this.circle) return "";
 
-      if (type === "unknown") return "error";
+      if (type == "unknown") return "error";
 
       if (this.spinner && (type === "warning" || type === "info"))
         return "warning";