fixed some console errors for standard user (#12479)

rancher · Dec 3, 2024 · bb1f8c2 · bb1f8c2
1 parent 90859a2
commit bb1f8c2
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 16 deletions.
diff --git a/shell/components/ResourceDetail/Masthead.vue b/shell/components/ResourceDetail/Masthead.vue
@@ -447,7 +447,7 @@ export default {
               {{ parent.displayName }}:
             </router-link>
             <span v-else>{{ parent.displayName }}:</span>
-            <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
+            <span v-if="value?.detailPageHeaderActionOverride && value?.detailPageHeaderActionOverride(realMode)">{{ value?.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
               class="masthead-resource-title"

diff --git a/shell/components/ResourceDetail/index.vue b/shell/components/ResourceDetail/index.vue
@@ -14,6 +14,8 @@ import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import ForceDirectedTreeChart from '@shell/components/fleet/ForceDirectedTreeChart';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import { stringify } from '@shell/utils/error';
+import { Banner } from '@components/Banner';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -48,6 +50,7 @@ export default {
     ResourceYaml,
     Masthead,
     IconMessage,
+    Banner
   },
 
   mixins: [CreateEditView],
@@ -75,7 +78,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'resource-details'
-    }
+    },
+    errorsMap: {
+      type:    Object,
+      default: null
+    },
   },
 
   async fetch() {
@@ -202,16 +209,26 @@ export default {
         notFound = fqid;
       }
 
-      if (realMode === _VIEW) {
-        model = liveModel;
-      } else {
-        model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
-      }
-
-      initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+      try {
+        if (realMode === _VIEW) {
+          model = liveModel;
+        } else {
+          model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+        }
+        initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
 
+        if ( as === _YAML ) {
+          yaml = await getYaml(this.$store, liveModel);
+        }
+      } catch (e) {
+        this.errors.push(e);
+      }
       if ( as === _YAML ) {
-        yaml = await getYaml(this.$store, liveModel);
+        try {
+          yaml = await getYaml(this.$store, liveModel);
+        } catch (e) {
+          this.errors.push(e);
+        }
       }
 
       if ( as === _GRAPH ) {
@@ -225,7 +242,11 @@ export default {
     }
 
     // Ensure common properties exists
-    model = await store.dispatch(`${ inStore }/cleanForDetail`, model);
+    try {
+      model = await store.dispatch(`${ inStore }/cleanForDetail`, model);
+    } catch (e) {
+      this.errors.push(e);
+    }
 
     const out = {
       hasGraph,
@@ -272,6 +293,7 @@ export default {
       notFound:        null,
       canViewChart:    true,
       canViewYaml:     null,
+      errors:          []
     };
   },
 
@@ -311,6 +333,18 @@ export default {
 
       return null;
     },
+    hasErrors() {
+      return this.errors?.length && Array.isArray(this.errors);
+    },
+    mappedErrors() {
+      return !this.errors ? {} : this.errorsMap || this.errors.reduce((acc, error) => ({
+        ...acc,
+        [error]: {
+          message: error?.data?.message || error,
+          icon:    null
+        }
+      }), {});
+    },
   },
 
   watch: {
@@ -360,6 +394,7 @@ export default {
   },
 
   methods: {
+    stringify,
     setSubtype(subtype) {
       this.resourceSubtype = subtype;
     },
@@ -371,6 +406,9 @@ export default {
         m[act]();
       }
     },
+    closeError(index) {
+      this.errors = this.errors.filter((_, i) => i !== index);
+    },
   }
 };
 </script>
@@ -398,6 +436,22 @@ export default {
         :value="liveModel"
       />
     </Masthead>
+    <div
+      v-if="hasErrors"
+      id="cru-errors"
+      class="cru__errors"
+    >
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :data-testid="`error-banner${i}`"
+        :label="stringify(mappedErrors[err].message)"
+        :icon="mappedErrors[err].icon"
+        :closable="true"
+        @close="closeError(i)"
+      />
+    </div>
 
     <ForceDirectedTreeChart
       v-if="isGraph && canViewChart"
@@ -413,8 +467,9 @@ export default {
       :yaml="yaml"
       :offer-preview="offerPreview"
       :done-route="doneRoute"
-      :done-override="value.doneOverride"
+      :done-override="value ? value.doneOverride : null"
       @update:value="$emit('input', $event)"
+      @error="e=>errors.push(e)"
     />
 
     <component

diff --git a/shell/list/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue b/shell/list/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue
@@ -19,13 +19,17 @@ export default {
       required: true,
     },
   },
+  emits: ['error'],
 
   async fetch() {
     const inStore = this.$store.getters['currentStore']();
 
+    try {
     // Fetch storage classes so we can determine if a PVC can be expanded
-    this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
-
+      await this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
+    } catch (e) {
+      this.$emit('error', e?.data || e);
+    }
     await this.$fetchType(this.resource);
   }
 };

diff --git a/shell/models/nodedriver.js b/shell/models/nodedriver.js
@@ -18,15 +18,15 @@ export default class NodeDriver extends Driver {
         icon:       'icon icon-play',
         bulkable:   true,
         bulkAction: 'activateBulk',
-        enabled:    !!this.actions.activate && this.state === 'inactive',
+        enabled:    !!this.actions?.activate && this.state === 'inactive',
       },
       {
         action:     'deactivate',
         label:      this.t('action.deactivate'),
         icon:       'icon icon-pause',
         bulkable:   true,
         bulkAction: 'deactivateBulk',
-        enabled:    !!this.actions.deactivate && this.state === 'active',
+        enabled:    !!this.actions?.deactivate && this.state === 'active',
         weight:     -1,
       },
       { divider: true },