@rancher/shell 0.1.0 → 0.1.1

package/pages/c/_cluster/fleet/GitRepoGraphConfig.js

@@ -0,0 +1,249 @@
+import { STATES } from '@shell/plugins/dashboard-store/resource-class';
+import { FLEET } from '@shell/config/types';
+
+// some default values
+const defaultNodeRadius = 20;
+const defaultNodePadding = 15;
+const chartWidth = 800;
+const chartHeight = 500;
+const fdcStrength = -300;
+const fdcDistanceMax = 500;
+const fdcForceCollide = 80;
+const fdcAlphaDecay = 0.05;
+
+// setting up default sim params
+// check documentation here: https://github.com/d3/d3-force#forceSimulation
+const simulationParams = {
+  fdcStrength,
+  fdcDistanceMax,
+  fdcForceCollide,
+  fdcAlphaDecay
+};
+
+/**
+ * Represents a config object for FDC type
+ * @param {Function} parseData - Parses the specific data for each chart. Format must be compliant with d3 data format
+ * @example data format => { parent: {..., children: [ {..., children: []} ] } }
+ * @param {Function} extendNodeClass - Extends the classes for each node so that the styling is correctly applied
+ * @param {Function} nodeDimensions - Sets the radius of the nodes according each data type
+ * @param {Function} infoDetails - Prepares the data to be displayed in the info box on the right-side of the ForceDirectedTreeChart component
+ */
+export const gitRepoGraphConfig = {
+  chartWidth,
+  chartHeight,
+  simulationParams,
+  /**
+     * data prop that is used to trigger the watcher in the component. Should follow format "data.xxxxxx"
+     */
+  watcherProp: 'data.bundles',
+  /**
+     * Mandatory params for a child object in parseData (for statuses to work)
+     * @param {String} state
+     * @param {String} stateDisplay
+     * @param {String} stateColor
+     * @param {String} matchingId (this can be different than the actual ID, depends on the usecase)
+     */
+  parseData:   (data) => {
+    const bundles = data.bundles.map((bundle, i) => {
+      const bundleLowercaseState = bundle.state ? bundle.state.toLowerCase() : 'unknown';
+      const bundleStateColor = STATES[bundleLowercaseState].color;
+
+      const repoChild = {
+        id:             bundle.id,
+        matchingId:     bundle.id,
+        type:           bundle.type,
+        state:          bundle.state,
+        stateLabel:     bundle.stateDisplay,
+        stateColor:     bundleStateColor,
+        isBundle:       true,
+        errorMsg:       bundle.stateDescription,
+        detailLocation: bundle.detailLocation,
+        children:       []
+      };
+
+      const bds = data.bundleDeployments.filter(bd => bundle.id === `${ bd.metadata?.labels?.['fleet.cattle.io/bundle-namespace'] }/${ bd.metadata?.labels?.['fleet.cattle.io/bundle-name'] }`);
+
+      bds.forEach((bd) => {
+        const bdLowercaseState = bd.state ? bd.state.toLowerCase() : 'unknown';
+        const bdStateColor = STATES[bdLowercaseState]?.color;
+
+        const cluster = data.clustersList.find((cluster) => {
+          const clusterString = `${ cluster.namespace }-${ cluster.name }`;
+
+          return bd.id.includes(clusterString);
+        });
+
+        repoChild.children.push({
+          id:                    bd.id,
+          matchingId:            bd.id,
+          type:                  bd.type,
+          clusterId:             cluster ? cluster.id : undefined,
+          clusterDetailLocation: cluster ? cluster.detailLocation : undefined,
+          state:                 bd.state,
+          stateLabel:            bd.stateDisplay,
+          stateColor:            bdStateColor,
+          isBundleDeployment:    true,
+          errorMsg:              bd.stateDescription,
+          detailLocation:        bd.detailLocation,
+        });
+      });
+
+      return repoChild;
+    });
+
+    const repoLowercaseState = data.state ? data.state.toLowerCase() : 'unknown';
+    const repoStateColor = STATES[repoLowercaseState].color;
+
+    const finalData = {
+      id:             data.id,
+      matchingId:     data.id,
+      type:           data.type,
+      state:          data.state,
+      stateLabel:     data.stateDisplay,
+      stateColor:     repoStateColor,
+      isRepo:         true,
+      errorMsg:       data.stateDescription,
+      detailLocation: data.detailLocation,
+      children:       bundles
+    };
+
+    return finalData;
+  },
+  /**
+     * Used to add relevant classes to each main node instance
+     */
+  extendNodeClass: ({ data }) => {
+    const classArray = [];
+
+    // node type
+    data?.isRepo ? classArray.push('repo') : data?.isBundle ? classArray.push('bundle') : classArray.push('bundle-deployment');
+
+    return classArray;
+  },
+  /**
+     * Used to add the correct icon to each node
+     */
+  fetchNodeIcon: ({ data }) => {
+    if (data?.isRepo) {
+      return 'git';
+    }
+
+    if ( data?.isBundle) {
+      if (data?.id.indexOf('helm') !== -1) {
+        return 'helm';
+      }
+
+      return 'bundle';
+    }
+
+    if (data?.isBundleDeployment) {
+      return 'node';
+    }
+  },
+  /**
+     * Used to set node dimensions
+     */
+  nodeDimensions: ({ data }) => {
+    if (data?.isRepo) {
+      const radius = defaultNodeRadius * 3;
+      const padding = defaultNodePadding * 2.5;
+
+      return {
+        radius,
+        size:     (radius * 2) - padding,
+        position: -(((radius * 2) - padding) / 2)
+      };
+    }
+    if (data?.isBundle) {
+      const radius = defaultNodeRadius * 2;
+      const padding = defaultNodePadding;
+
+      if (data?.id.indexOf('helm') !== -1) {
+        return {
+          radius,
+          size:     (radius * 1.5) - padding,
+          position: -(((radius * 1.5) - padding) / 2)
+        };
+      }
+
+      return {
+        radius,
+        size:     (radius * 1.7) - padding,
+        position: -(((radius * 1.7) - padding) / 2)
+      };
+    }
+
+    return {
+      radius:   defaultNodeRadius,
+      size:     (defaultNodeRadius * 2) - defaultNodePadding,
+      position: -(((defaultNodeRadius * 2) - defaultNodePadding) / 2)
+    };
+  },
+  /**
+     * Use @param {Obj} valueObj for compound values (usually associated with a template of some sort on the actual component)
+     * or @param value for a simple straightforward value
+     */
+  infoDetails: (data) => {
+    let dataType;
+
+    switch (data.type) {
+    case FLEET.GIT_REPO:
+      dataType = 'GitRepo';
+      break;
+    case FLEET.BUNDLE:
+      dataType = 'Bundle';
+      break;
+    case FLEET.BUNDLE_DEPLOYMENT:
+      dataType = 'BundleDeployment';
+      break;
+    default:
+      dataType = data.type;
+      break;
+    }
+
+    const moreInfo = [
+      {
+        labelKey:  'fleet.fdc.type',
+        value:    dataType
+      },
+      {
+        type:     'title-link',
+        labelKey: 'fleet.fdc.id',
+        valueObj: {
+          id:             data.id,
+          detailLocation: data.detailLocation
+        }
+      }
+    ];
+
+    if (data.isBundleDeployment) {
+      moreInfo.push({
+        type:     'title-link',
+        labelKey: 'fleet.fdc.cluster',
+        valueObj: {
+          id:             data.clusterId,
+          detailLocation: data.clusterDetailLocation
+        }
+      });
+    }
+
+    moreInfo.push({
+      type:     'state-badge',
+      labelKey: 'fleet.fdc.state',
+      valueObj:    {
+        stateColor: data.stateColor,
+        stateLabel: data.stateLabel
+      }
+    });
+
+    if (data.errorMsg) {
+      moreInfo.push({
+        type:     'single-error',
+        labelKey: 'fleet.fdc.error',
+        value:    data.errorMsg
+      });
+    }
+
+    return moreInfo;
+  }
+};

package/pages/c/_cluster/fleet/index.vue

@@ -7,6 +7,7 @@ import { allHash } from '@shell/utils/promise';
 import Loading from '@shell/components/Loading';
 import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
 import ResourceTable from '@shell/components/ResourceTable';
+import CompoundStatusBadge from '@shell/components/CompoundStatusBadge';
 
 export default {
   name:       'ListGitRepo',
@@ -14,6 +15,7 @@ export default {
     Loading,
     ResourceTable,
     CollapsibleCard,
+    CompoundStatusBadge
   },
 
   async fetch() {
@@ -97,7 +99,7 @@ export default {
   },
   methods: {
     setWorkspaceFilterAndLinkToGitRepo(value) {
-      this.$store.commit('updateWorkspace', { value });
+      this.$store.commit('updateWorkspace', { value, getters: this.$store.getters } );
       this.$store.dispatch('prefs/set', { key: WORKSPACE, value });
 
       this.$router.push({
@@ -114,81 +116,81 @@ export default {
       case 'clusters':
         if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) {
           return {
-            badgeClass: `bg-${ STATES[STATES_ENUM.ACTIVE].color }`,
-            icon:       'checkmark'
+            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
+            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
           };
         }
 
         return {
-          badgeClass: `bg-${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-clusters`,
-          icon:       'warning'
+          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-clusters`,
+          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
         };
       case 'bundles':
         if (row.bundles?.length && row.bundles?.every(bundle => bundle.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
           return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? `bg-${ STATES[STATES_ENUM.ACTIVE].color }` : `bg-${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       'checkmark'
+            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
           };
         }
         if (row.bundles?.length && row.bundles?.some(bundle => bundle.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
           return {
-            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? `bg-${ STATES[STATES_ENUM.ERR_APPLIED].color }` : `bg-${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       'error'
+            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+            icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
           };
         }
         if (row.bundles?.length && row.bundles?.some(bundle => bundle.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
           return {
-            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? `bg-${ STATES[STATES_ENUM.NOT_READY].color }` : `bg-${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       'warning'
+            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+            icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
           };
         }
 
         if (row.bundlesReady?.length === row.bundles?.length && row.bundlesReady && row.bundles?.length) {
           return {
-            badgeClass: `bg-${ STATES[STATES_ENUM.ACTIVE].color }`,
-            icon:       'checkmark'
+            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
+            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
           };
         }
 
         return {
-          badgeClass: `bg-${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-bundles`,
-          icon:       'warning'
+          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-bundles`,
+          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
         };
       case 'resources':
         if (row.status?.resources?.length && row.status?.resources?.every(resource => resource.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
           return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? `bg-${ STATES[STATES_ENUM.ACTIVE].color }` : `bg-${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       'checkmark'
+            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
           };
         }
         if (row.status?.resources?.length && row.status?.resources?.some(resource => resource.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
           return {
-            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? `bg-${ STATES[STATES_ENUM.ERR_APPLIED].color }` : `bg-${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       'error'
+            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+            icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
           };
         }
         if (row.status?.resources?.length && row.status?.resources?.some(resource => resource.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
           return {
-            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? `bg-${ STATES[STATES_ENUM.NOT_READY].color }` : `bg-${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       'warning'
+            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+            icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
           };
         }
 
         if (row.status?.resourceCounts?.desiredReady === row.status?.resourceCounts?.ready && row.status?.resourceCounts?.desiredReady) {
           return {
-            badgeClass: `bg-${ STATES[STATES_ENUM.ACTIVE].color }`,
-            icon:       'checkmark'
+            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
+            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
           };
         }
 
         return {
-          badgeClass: `bg-${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-resources`,
-          icon:       'warning'
+          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-resources`,
+          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
         };
       default:
         return {
-          badgeClass: `bg-${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
-          icon:       'warning'
+          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
+          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
         };
       }
     },
@@ -345,34 +347,28 @@ export default {
             v-on="$listeners"
           >
             <template #cell:clustersReady="{row}">
-              <div
-                v-tooltip.bottom="getTooltipInfo('clusters', row)"
-                class="cluster-count-info"
-                :class="getStatusInfo('clusters', row).badgeClass"
-              >
-                <i :class="`icon-${getStatusInfo('clusters', row).icon}`" />
-                <span>{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
-              </div>
+              <CompoundStatusBadge
+                :tooltip-text="getTooltipInfo('clusters', row)"
+                :badge-class="getStatusInfo('clusters', row).badgeClass"
+                :icon="getStatusInfo('clusters', row).icon"
+                :value="`${ row.clusterInfo.ready }/${ row.clusterInfo.total }`"
+              />
             </template>
             <template #cell:bundlesReady="{row}">
-              <div
-                v-tooltip.bottom="getTooltipInfo('bundles', row)"
-                class="cluster-count-info"
-                :class="getStatusInfo('bundles', row).badgeClass"
-              >
-                <i :class="`icon-${getStatusInfo('bundles', row).icon}`" />
-                <span>{{ row.bundlesReady.length || 0 }}/{{ row.bundles.length }}</span>
-              </div>
+              <CompoundStatusBadge
+                :tooltip-text="getTooltipInfo('bundles', row)"
+                :badge-class="getStatusInfo('bundles', row).badgeClass"
+                :icon="getStatusInfo('bundles', row).icon"
+                :value="`${ row.bundlesReady.length || 0 }/${ row.bundles.length }`"
+              />
             </template>
             <template #cell:resourcesReady="{row}">
-              <div
-                v-tooltip.bottom="getTooltipInfo('resources', row)"
-                class="cluster-count-info"
-                :class="getStatusInfo('resources', row).badgeClass"
-              >
-                <i :class="`icon-${getStatusInfo('resources', row).icon}`" />
-                <span>{{ row.status.resourceCounts.ready }}/{{ row.status.resourceCounts.desiredReady }}</span>
-              </div>
+              <CompoundStatusBadge
+                :tooltip-text="getTooltipInfo('resources', row)"
+                :badge-class="getStatusInfo('resources', row).badgeClass"
+                :icon="getStatusInfo('resources', row).icon"
+                :value="`${ row.status.resourceCounts.ready }/${ row.status.resourceCounts.desiredReady }`"
+              />
             </template>
 
             <template #cell:target="{row}">
@@ -432,20 +428,6 @@ export default {
     color: var(--darker);
   }
 
-  .cluster-count-info {
-    padding: 4px 12px;
-    border-radius: 16px;
-    display: flex;
-    align-items: center;
-    width: fit-content;
-    cursor: default;
-
-    i {
-      font-size: 16px;
-      margin-right: 6px;
-    }
-  }
-
   .header-icons {
     display: flex;
     align-items: center;

package/pages/c/_cluster/harvester/airgapupgrade/index.vue

@@ -1,8 +1,9 @@
 <script>
 import CruResource from '@shell/components/CruResource';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import UpgradeInfo from '@shell/list/harvesterhci.io.dashboard/UpgradeInfo';
 
 import { HCI } from '@shell/config/types';
 import { exceptionToErrorsArray } from '@shell/utils/error';
@@ -19,7 +20,7 @@ const UPLOAD = 'upload';
 export default {
   name:       'HarvesterAirgapUpgrade',
   components: {
-    CruResource, LabeledSelect, LabeledInput, RadioGroup
+    CruResource, LabeledSelect, LabeledInput, RadioGroup, UpgradeInfo
   },
 
   async fetch() {
@@ -216,7 +217,7 @@ export default {
     >
       <RadioGroup
         v-model="imageSource"
-        class="mb-20 image-group"
+        class="image-group"
         name="image"
         :options="[
           IMAGE_METHOD.NEW,
@@ -228,6 +229,8 @@ export default {
         ]"
       />
 
+      <UpgradeInfo />
+
       <div v-if="uploadImage">
         <LabeledInput v-model.trim="imageValue.spec.displayName" class="mb-20" label-key="harvester.fields.name" required />
 

package/pages/c/_cluster/harvester/console/_uid/vnc.vue

@@ -1,6 +1,6 @@
 <script>
 import { HCI } from '@shell/config/types';
-import NovncConsoleWrapper from '@shell/components/NovncConsoleWrapper';
+import NovncConsoleWrapper from '@shell/components/novnc/NovncConsoleWrapper';
 import Loading from '@shell/components/Loading';
 
 export default {
@@ -44,3 +44,9 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <NovncConsoleWrapper v-else ref="console" v-model="vmi" class="novnc-wrapper" />
 </template>
+
+<style>
+HTML, BODY, MAIN, #__nuxt, #__layout, #app, .vm-console, .vm-console > DIV, .vm-console > DIV > DIV {
+  height: 100%;
+}
+</style>

package/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -27,12 +27,12 @@ export default {
     this.receiverName = this.$route.query.receiverName;
 
     const alertmanagerConfigId = this.$route.params.alertmanagerconfigid;
-    const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
-
+    const originalAlertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
+    const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/clone`, { resource: originalAlertmanagerConfigResource });
     const mode = this.$route.query.mode;
 
     if (mode !== _CREATE) {
-      const existingReceiverData = alertmanagerConfigResource.spec.receivers.find((receiverData) => {
+      const existingReceiverData = (alertmanagerConfigResource.spec.receivers || []).find((receiverData) => {
         return receiverData.name === this.receiverName;
       });
 
@@ -43,7 +43,7 @@ export default {
 
     this.alertmanagerConfigId = alertmanagerConfigResource.id;
     this.alertmanagerConfigResource = alertmanagerConfigResource;
-    this.alertmanagerConfigDetailRoute = alertmanagerConfigResource.getAlertmanagerConfigDetailRoute();
+    this.alertmanagerConfigDetailRoute = alertmanagerConfigResource._detailLocation;
   },
 
   // take edit link and edit request from AlertmanagerConfig resource
@@ -134,7 +134,7 @@ export default {
       case this.create:
         return this.t('monitoring.alertmanagerConfig.receiverFormNames.create');
       case this.edit:
-        if (this.currentView === this.yaml) {
+        if (this.currentView === this.yaml || this.$route.query.as === this.yaml) {
           // When you edit as YAML, you edit the whole AlertmanagerConfig
           // at once, so the header is just "Edit AlertmanagerConfig"
           return this.t('monitoring.alertmanagerConfig.receiverFormNames.editYaml');
@@ -165,12 +165,6 @@ export default {
 
         return;
       }
-      const mode = this.$route.query.mode;
-      const existingReceivers = this.alertmanagerConfigResource.spec.receivers;
-
-      if (mode === this.create) {
-        this.alertmanagerConfigResource.spec.receivers = [this.receiverValue, ...existingReceivers];
-      }
 
       this.alertmanagerConfigResource.save(...arguments);
       this.redirectToAlertmanagerConfigDetail();
@@ -208,7 +202,7 @@ export default {
       const nameOfReceiverToDelete = actionData.route.query.receiverName;
       // Remove it from the configuration of the parent AlertmanagerConfig
       // resource.
-      const existingReceivers = this.alertmanagerConfigResource.spec.receivers;
+      const existingReceivers = this.alertmanagerConfigResource.spec.receivers || [];
       const receiversMinusDeletedItem = existingReceivers.filter((receiver) => {
         return receiver.name !== nameOfReceiverToDelete;
       });
@@ -216,13 +210,13 @@ export default {
       this.alertmanagerConfigResource.spec.receivers = receiversMinusDeletedItem;
       // After saving the AlertmanagerConfig, the resource has been deleted.
       this.alertmanagerConfigResource.save(...arguments);
-      this.$router.push(this.alertmanagerConfigResource.getAlertmanagerConfigDetailRoute());
+      this.$router.push(this.alertmanagerConfigResource._detailLocation);
     },
     redirectToReceiverDetail(receiverName) {
       return this.alertmanagerConfigResource.getReceiverDetailLink(receiverName);
     },
     redirectToAlertmanagerConfigDetail() {
-      const route = this.alertmanagerConfigResource.getAlertmanagerConfigDetailRoute();
+      const route = this.alertmanagerConfigResource._detailLocation;
 
       this.$router.push(route);
     }

package/pages/c/_cluster/monitoring/index.vue

@@ -8,7 +8,7 @@ import { ENDPOINTS, MONITORING } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { findBy } from '@shell/utils/array';
 
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
 import SimpleBox from '@shell/components/SimpleBox';
 import { haveV1MonitoringWorkloads } from '@shell/utils/monitoring';

package/pages/c/_cluster/monitoring/route-receiver/index.vue

@@ -11,7 +11,7 @@ import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { MONITORING } from '@shell/config/types';
 import { areRoutesSupportedFormat, getSecret } from '@shell/utils/alertmanagerconfig';
 import { MODE, _EDIT } from '@shell/config/query-params';

package/pages/c/_cluster/settings/banners.vue

@@ -1,10 +1,10 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
 
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import Loading from '@shell/components/Loading';
 import AsyncButton from '@shell/components/AsyncButton';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import BannerSettings from '@shell/components/form/BannerSettings';
 import { allHash } from '@shell/utils/promise';
 import { MANAGEMENT } from '@shell/config/types';