Enhance User Errors

frontend/src/components/ShootDetails/ShootMonitoringCard.vue

@@ -22,7 +22,7 @@ SPDX-License-Identifier: Apache-2.0
               :shoot-item="shootItem"
               :popper-key="`${shootNamespace}/${shootName}_lastOp`"
               popper-placement="bottom"
-              showStatusText
+              show-status-text
               >
             </shoot-status>
           </v-list-item-title>
@@ -37,7 +37,7 @@ SPDX-License-Identifier: Apache-2.0
           <v-list-item-subtitle>Readiness</v-list-item-subtitle>
           <v-list-item-title class="d-flex align-center pt-1">
             <span v-if="!shootConditions.length">-</span>
-            <status-tags v-else :shoot-item="shootItem" popper-placement="bottom"></status-tags>
+            <status-tags v-else :shoot-item="shootItem" popper-placement="bottom" show-status-text></status-tags>
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>

frontend/src/components/ShootMessageDetails.vue

@@ -73,7 +73,9 @@ SPDX-License-Identifier: Apache-2.0
                 :icon="userError ? 'mdi-account-alert' : 'mdi-alert'"
                 :prominent="!!userError"
               >
-                <h4 v-if="userError">Action required</h4>
+                <h3 v-if="userError">Your Action is required</h3>
+                <h4 class="wrap font-weight-bold">This error is flagged as user error which indicates that no Gardener operator action is required.
+                Please read the error message carefully and take action.</h4>
                 <span class="wrap">
                   <span v-if="infraAccountError">There is a problem with your secret
                     <code>
@@ -83,8 +85,7 @@ SPDX-License-Identifier: Apache-2.0
                         <span>{{secretBindingName}}</span>
                       </router-link>
                       <span v-else>{{secretBindingName}}</span>
-                    </code>:</span>
-                  {{description}}
+                    </code>: </span><span v-html="description" />
                 </span>
               </v-alert>
               <ansi-text class="error--text" :text="lastErrorDescription.description"></ansi-text>

frontend/src/components/ShootMessages/ShootMessages.vue

@@ -216,11 +216,11 @@ export default {
       return [{
         key: 'maintenanceConstraintWarning',
         icon: 'mdi-alert-circle-outline',
-        color: 'warning',
+        color: 'error',
         component: {
           name: 'constraint-message',
           props: {
-            constraintCaption: 'Maintenance precondition check failed. It may not be safe to start maintenance for your cluster due to the following reason',
+            constraintCaption: 'Maintenance precondition check failed. Gardener may be unable to perform required actions during maintenance',
             constraintMessage: this.maintenancePreconditionSatisfiedMessage
           }
         }

frontend/src/components/StatusTags.vue

@@ -5,24 +5,31 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div class="d-flex flex-nowrap justify-center">
-    <status-tag
-      v-for="condition in filteredConditions"
-      :condition="condition"
-      :popper-key="condition.type"
-      :key="condition.type"
-      :popper-placement="popperPlacement"
-      :secret-binding-name="shootSecretBindingName"
-      :namespace="shootNamespace">
-    </status-tag>
+  <div>
+    <div class="d-flex flex-nowrap justify-start">
+      <status-tag
+        v-for="condition in filteredConditions"
+        :condition="condition"
+        :popper-key="condition.type"
+        :key="condition.type"
+        :popper-placement="popperPlacement"
+        :secret-binding-name="shootSecretBindingName"
+        :namespace="shootNamespace">
+      </status-tag>
+    </div>
+    <template v-if="showStatusText">
+      <div v-for="({ description }) in errorCodeObjects" :key="description" class="mt-1">
+        <div class="font-weight-bold error--text wrap" v-html="description" />
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
 import StatusTag from '@/components/StatusTag'
-import isEmpty from 'lodash/isEmpty'
 import filter from 'lodash/filter'
 import { shootItem } from '@/mixins/shootItem'
+import { objectsFromErrorCodes, errorCodesFromArray } from '@/utils/errorCodes'
 
 export default {
   components: {
@@ -31,16 +38,29 @@ export default {
   props: {
     popperPlacement: {
       type: String
+    },
+    showStatusText: {
+      type: Boolean,
+      default: false
     }
   },
   mixins: [shootItem],
   computed: {
     filteredConditions () {
-      if (isEmpty(this.shootConditions)) {
-        return []
-      }
-      return filter(this.shootConditions, condition => !!condition.lastTransitionTime)
+      return filter(this.shootReadiness, condition => !!condition.lastTransitionTime)
+    },
+    errorCodeObjects () {
+      const allErrorCodes = errorCodesFromArray(this.filteredConditions)
+      return objectsFromErrorCodes(allErrorCodes)
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+  .wrap {
+    white-space: normal;
+  }
+
+</style>

frontend/src/mixins/shootItem.js

@@ -10,6 +10,7 @@ import flatMap from 'lodash/flatMap'
 import cloneDeep from 'lodash/cloneDeep'
 import find from 'lodash/find'
 import some from 'lodash/some'
+import filter from 'lodash/filter'
 import { mapGetters } from 'vuex'
 
 import {
@@ -185,6 +186,18 @@ export const shootItem = {
     shootConditions () {
       return get(this.shootItem, 'status.conditions', [])
     },
+    shootConstraints () {
+      return get(this.shootItem, 'status.constraints', [])
+    },
+    shootReadiness () {
+      const shootConstraintsWithErrorCode = filter(this.shootConstraints, constraint => {
+        return constraint.codes && constraint.codes.length
+      })
+      return [
+        ...this.shootConditions,
+        ...shootConstraintsWithErrorCode
+      ]
+    },
     shootObservedGeneration () {
       return get(this.shootItem, 'status.observedGeneration')
     },
@@ -204,8 +217,7 @@ export const shootItem = {
       return this.selectedAccessRestrictionsForShootByCloudProfileNameAndRegion({ shootResource: this.shootItem, cloudProfileName: this.shootCloudProfileName, region: this.shootRegion })
     },
     hibernationPossibleConstraint () {
-      const constraints = get(this.shootItem, 'status.constraints')
-      return find(constraints, ['type', 'HibernationPossible'])
+      return find(this.shootConstraints, ['type', 'HibernationPossible'])
     },
     isHibernationPossible () {
       const status = get(this.hibernationPossibleConstraint, 'status', 'True')
@@ -215,7 +227,7 @@ export const shootItem = {
       return get(this.hibernationPossibleConstraint, 'message', 'Hibernation currently not possible')
     },
     maintenancePreconditionSatisfiedConstraint () {
-      const constraints = get(this.shootItem, 'status.constraints')
+      const constraints = this.shootConstraints
       return find(constraints, ['type', 'MaintenancePreconditionsSatisfied'])
     },
     isMaintenancePreconditionSatisfied () {

frontend/src/store/index.js

@@ -145,6 +145,11 @@ const state = {
       displayName: 'System Components',
       shortName: 'SC',
       description: 'Indicates whether all system components in the kube-system namespace are up and running. Gardener manages these system components and should automatically take care that the components become healthy again.'
+    },
+    MaintenancePreconditionsSatisfied: {
+      displayName: 'Maintenance Preconditions Satisfied',
+      shortName: 'M',
+      description: 'Indicates whether Gardener is able to perform required actions during maintenance. If you not resolve this issue your cluster which will eventually turn into an error state.'
     }
   },
   darkTheme: false,

frontend/src/utils/errorCodes.js

@@ -6,32 +6,24 @@
 
 'use strict'
 
-import isEmpty from 'lodash/isEmpty'
 import get from 'lodash/get'
 import compact from 'lodash/compact'
 import uniq from 'lodash/uniq'
 import flatMap from 'lodash/flatMap'
 import map from 'lodash/map'
-import find from 'lodash/find'
+import some from 'lodash/some'
+import { transformHtml } from '.'
 
 export function errorCodesFromArray (array) {
   return uniq(compact(flatMap(array, 'codes')))
 }
 
 export function isUserError (errorCodesArray) {
-  if (isEmpty(errorCodesArray)) {
-    return false
-  }
-
-  return !!find(objectsFromErrorCodes(errorCodesArray), 'userError')
+  return some(objectsFromErrorCodes(errorCodesArray), 'userError')
 }
 
 export function isTemporaryError (errorCodesArray) {
-  if (isEmpty(errorCodesArray)) {
-    return false
-  }
-
-  return !!find(objectsFromErrorCodes(errorCodesArray), 'temporaryError')
+  return some(objectsFromErrorCodes(errorCodesArray), 'temporaryError')
 }
 
 export function objectsFromErrorCodes (errorCodesArray) {
@@ -107,5 +99,11 @@ const errorCodes = {
     description: 'Error occurred due to dependent objects on the infrastructure level. The operation will be retried automatically.',
     temporaryError: true,
     userError: false
+  },
+  ERR_USER_WEBHOOK: {
+    shortDescription: 'Misconfigured Webhook',
+    description: transformHtml('A misconfigured webhook prevents Gardener from performing operations. Please resolve this as this can lead to required actions not beeing performed which will eventually turn the cluster into an error state. Find best practises <a href="https://kubernetes.io/docs/reference/access-authn-authz/extensible-admission-controllers/#best-practices-and-warnings">here</a>.'),
+    temporaryError: false,
+    userError: true
   }
 }

frontend/src/utils/index.js

@@ -459,6 +459,7 @@ export function transformHtml (html, transformToExternalLinks = true) {
     if (transformToExternalLinks) {
       linkElement.classList.add('text-decoration-none')
       linkElement.setAttribute('target', '_blank')
+      linkElement.setAttribute('rel', 'noopener')
       const linkText = linkElement.innerHTML
       linkElement.innerHTML = `<span class="text-decoration-underline pr-1">${linkText}</span><em class="v-icon mdi mdi-open-in-new text-body-1"></em>`
     }