Merge pull request #77 from Jont828/severity-undefined

Fix bug in condition chips when status is  and severity is undefined

Author: Jont828

web/src/components/CustomResourceDefinition.vue

@@ -73,7 +73,7 @@
             <v-tooltip
               :top="scrollY <= 20"
               :bottom="scrollY > 20"
-              :disabled="condition.status"
+              :disabled="condition.status === 'True'"
             >
               <template v-slot:activator="{ on, attrs }">
                 <v-chip
@@ -89,18 +89,20 @@
                   v-bind="attrs"
                   v-on="on"
                 >
-                  <!-- :color="($vuetify.theme.dark) ? getType(condition) : 'white'"
-                  :text-color="($vuetify.theme.dark) ? 'black' : getType(condition)" -->
                   <StatusIcon
-                    :type="(condition.status) ? 'success' : condition.severity.toLowerCase()"
+                    :type="condition.status === 'True' ? 'success' : (condition.Status === 'Unknown' ? 'unknown' : (condition.severity ? condition.severity.toLowerCase() : 'unknown' ))"
                     :spinnerWidth="2"
                     left
                   >
+                  <!-- TODO: verify that StatusIcon works when passing in undefined as type, i.e. if condition.severity is undefined -->
                   </StatusIcon>
                   {{ condition.type }}
                 </v-chip>
               </template>
-              <span>{{ condition.severity }}: {{ condition.reason }}</span>
+              <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>
             </v-tooltip>
           </div>
         </div>
@@ -201,11 +203,9 @@ export default {
   },
   methods: {
     getType(condition) {
-      return condition.status
-        ? "success"
-        : condition.isError
-        ? "error"
-        : "warning";
+      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";
     },
     onScroll(e) {
       this.scrollY = window.scrollY;
@@ -230,7 +230,7 @@ export default {
         conditions.forEach((e, i) => {
           this.conditions.push({
             type: e.type,
-            status: e.status === "True",
+            status: e.status,
             isError: e.severity === "Error",
             severity: e.severity,
             reason: e.reason,
@@ -258,6 +258,7 @@ export default {
   watch: {
     jsonItems: {
       handler(val, old) {
+        console.log("Val is", val);
         this.setConditions(val?.status?.conditions);
       },
     },

web/src/components/StatusIcon.vue

@@ -40,6 +40,12 @@
       :color="$vuetify.theme.dark ? 'black' : 'white'"
       :size="size-2"
     > mdi-information-variant</v-icon>
+    <v-icon
+      v-else-if="type==='unknown' || !type"
+      class="readyIcon"
+      :color="$vuetify.theme.dark ? 'black' : 'white'"
+      :size="size-2"
+    > mdi-help</v-icon>
   </v-avatar>
   <v-avatar
     :size="size"
@@ -84,6 +90,12 @@
       :color="getColor(type)"
       :size="size"
     > mdi-information</v-icon>
+    <v-icon
+      v-else-if="type==='unknown' || !type"
+      class="readyIcon"
+      :color="getColor(type)"
+      :size="size"
+    > mdi-help-circle</v-icon>
   </v-avatar>
 </template>
 
@@ -100,7 +112,9 @@ export default {
       default: 1.5,
       type: Number,
     },
-    circle: Boolean,
+    circle: Boolean, 
+    // If circle is true, the icon will be displayed in a circle with the color in the background. This is meant for the top right corner of a CRD.
+    // If circle is false, the icon will be displayed in a square with the color as the border. This is meant for the condition chips in the CRD views.
     spinner: Boolean,
     left: Boolean,
   },
@@ -113,6 +127,8 @@ export default {
     getColor(type) {
       if (!this.circle) return "";
 
+      if (type === "unknown") return "error";
+
       if (this.spinner && (type === "warning" || type === "info"))
         return "warning";