@rancher/shell 3.0.10 → 3.0.11

package/assets/translations/en-us.yaml

@@ -1018,6 +1018,11 @@ asyncButton:
     waiting: Generating…
 
 backupRestoreOperator:
+  monitoring:
+    label: Monitoring
+    enableMetrics: Enable Metrics
+    enableServiceMonitor: Enable ServiceMonitor
+    serviceMonitorTooltip: Requires rancher-monitoring to be installed before this can be enabled.
   backup:
     label: Resource Set
     description: The Resource Set determines which resources the backup-restore-operator collects in a backup
@@ -1374,6 +1379,7 @@ catalog:
       releaseName: Release Name
       releaseNamespace: Release Namespace
   repo:
+    add: Add Repository
     action:
       refresh: Refresh
     all: All
@@ -2719,8 +2725,6 @@ cluster:
     v2: RKE2/K3s
   validation:
     iamInstanceProfileName: If the Amazon cloud provider is selected the "IAM Instance Profile Name" must be defined for each Machine Pool
-  capi:
-    notSupported: Managing clusters provisioned using CAPI infrastructure providers via the UI is currently limited to Rancher Turtles provisioned clusters.
 
 clusterIndexPage:
   hardwareResourceGauge:
@@ -5029,6 +5033,7 @@ node:
         cpu: CPU
         memory: MEMORY
         pods: PODS
+        running: Running
       diskPressure: Disk Pressure
       kubelet: kubelet
       memoryPressure: Memory Pressure
@@ -5773,7 +5778,6 @@ projectMembers:
     createNs: Create Namespaces
     configmapsManage: Manage Config Maps
     ingressManage: Manage Ingress
-    projectcatalogsManage: Manage Project Catalogs
     projectroletemplatebindingsManage: Manage Project Members
     secretsManage: Manage Secrets
     serviceaccountsManage: Manage Service Accounts
@@ -5783,7 +5787,6 @@ projectMembers:
     configmapsView: View Config Maps
     ingressView: View Ingress
     monitoringUiView: View Monitoring
-    projectcatalogsView: View Project Catalogs
     projectroletemplatebindingsView: View Project Members
     secretsView: View Secrets
     serviceaccountsView: View Service Accounts
@@ -8946,7 +8949,6 @@ performance:
     label: Server-side Pagination
     description: By default Lists will fetch all resources and paginate (create the page given sort and filter settings) locally in the browser. Server-Side Pagination moves this out from the browser to the server. This improves performance of the UI, especially in systems with lots of resources.
     applicable: "Server-side pagination applies to Resource Types"
-    featureFlag: Enabling/Disabling <i class="mr-5">"Server-side Pagination"</i> is now solely done so via the <i class="mr-5">ui-sql-cache</i>&nbsp;<a href="{ffUrl}">Feature Flag</a>
     resources:
       generic: most resources in the cluster's 'More Resources' section
       all: All Resources

package/chart/__tests__/rancher-backup-index.test.ts

@@ -0,0 +1,248 @@
+import { shallowMount } from '@vue/test-utils';
+import RancherBackup from '@shell/chart/rancher-backup/index.vue';
+import { set } from '@shell/utils/object';
+
+describe('rancher-backup: index', () => {
+  const defaultMocks = {
+    $store: {
+      dispatch: jest.fn().mockResolvedValue([]),
+      getters:  {
+        'i18n/t':                    (text: string) => text,
+        t:                           (text: string) => text,
+        'cluster/all':               () => [],
+        'cluster/paginationEnabled': () => false,
+        currentStore:                () => 'cluster',
+        currentCluster:              () => ({ id: 'local' }),
+        getStoreNameByProductId:     'cluster',
+      }
+    },
+    $fetchState: { pending: false }
+  };
+
+  const defaultStubs = {
+    Tab:           { template: '<div><slot /></div>' },
+    Tabbed:        { template: '<div><slot /></div>' },
+    S3:            true,
+    RadioGroup:    true,
+    LabeledInput:  true,
+    LabeledSelect: true,
+    Banner:        true,
+    Checkbox:      true
+  };
+
+  const createWrapper = (propsData = {}, mocks = {}, monitoringInstalled = false) => {
+    return shallowMount(RancherBackup, {
+      props: {
+        value: {},
+        mode:  'create',
+        ...propsData
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          ...mocks
+        },
+        stubs: defaultStubs
+      },
+      computed: {
+        monitoringStatus: () => ({ installed: monitoringInstalled }),
+        radioOptions:     () => ({
+          options: ['none', 's3', 'pickSC', 'pickPV'],
+          labels:  ['None', 'S3', 'Storage Class', 'Persistent Volume']
+        })
+      }
+    });
+  };
+
+  describe('monitoring section initialization', () => {
+    it('should initialize monitoring object with default values when not present', async() => {
+      const value: Record<string, any> = {};
+
+      // Call set directly to test the initialization logic
+      set(value, 'monitoring', {
+        metrics:        { enabled: false },
+        serviceMonitor: { enabled: false }
+      });
+
+      expect(value).toHaveProperty('monitoring');
+      expect(value).toHaveProperty('monitoring.metrics.enabled', false);
+      expect(value).toHaveProperty('monitoring.serviceMonitor.enabled', false);
+    });
+
+    it('should not overwrite existing monitoring values when already set', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: true },
+          serviceMonitor: { enabled: true }
+        }
+      };
+
+      // The fetch logic only sets monitoring if it doesn't exist
+      // Since value.monitoring already exists, it should NOT be overwritten
+      // This test validates the conditional check in the component's fetch()
+      expect(value.monitoring).toBeDefined();
+      expect(value.monitoring.metrics.enabled).toBe(true);
+      expect(value.monitoring.serviceMonitor.enabled).toBe(true);
+    });
+  });
+
+  describe('monitoring checkboxes rendering', () => {
+    it('should render both monitoring checkboxes', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+
+      expect(checkboxes).toHaveLength(2);
+    });
+
+    it('should pass correct props to metrics checkbox', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: true },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckbox = checkboxes[0];
+
+      // The t() mock wraps strings in %, so we check for containment
+      expect(metricsCheckbox.attributes('label')).toContain('backupRestoreOperator.monitoring.enableMetrics');
+      expect(metricsCheckbox.attributes('value')).toBe('true');
+    });
+
+    it('should pass correct props to serviceMonitor checkbox', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: true }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('label')).toContain('backupRestoreOperator.monitoring.enableServiceMonitor');
+      expect(serviceMonitorCheckbox.attributes('value')).toBe('true');
+    });
+  });
+
+  describe('serviceMonitor checkbox disabled state', () => {
+    it('should set disabled to true when monitoring is not installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, false);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('disabled')).toBe('true');
+    });
+
+    it('should not set disabled when monitoring is installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, true);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      // When monitoring is installed, disabled should be 'false' (string)
+      expect(serviceMonitorCheckbox.attributes('disabled')).toBe('false');
+    });
+  });
+
+  describe('serviceMonitor checkbox tooltip', () => {
+    it('should show tooltip when monitoring is not installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, false);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('tooltip')).toContain('backupRestoreOperator.monitoring.serviceMonitorTooltip');
+    });
+
+    it('should not show tooltip when monitoring is installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, true);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('tooltip')).toBeFalsy();
+    });
+  });
+
+  describe('metrics checkbox', () => {
+    it('should never be disabled regardless of monitoring status', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+
+      // Test with monitoring not installed
+      const wrapperNotInstalled = createWrapper({ value }, {}, false);
+      const checkboxesNotInstalled = wrapperNotInstalled.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckboxNotInstalled = checkboxesNotInstalled[0];
+
+      // The metrics checkbox does not have a disabled prop bound, so it should be 'false' or undefined
+      const disabledAttr = metricsCheckboxNotInstalled.attributes('disabled');
+
+      expect(disabledAttr === 'false' || disabledAttr === undefined).toBe(true);
+
+      // Test with monitoring installed
+      const wrapperInstalled = createWrapper({ value }, {}, true);
+      const checkboxesInstalled = wrapperInstalled.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckboxInstalled = checkboxesInstalled[0];
+      const disabledAttrInstalled = metricsCheckboxInstalled.attributes('disabled');
+
+      expect(disabledAttrInstalled === 'false' || disabledAttrInstalled === undefined).toBe(true);
+    });
+  });
+
+  describe('monitoring section heading', () => {
+    it('should render the monitoring section heading', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const heading = wrapper.find('h3');
+
+      expect(heading.exists()).toBe(true);
+      expect(heading.text()).toContain('backupRestoreOperator.monitoring.label');
+    });
+  });
+});

package/chart/rancher-backup/index.vue

@@ -6,11 +6,13 @@ import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
-import { get } from '@shell/utils/object';
+import { get, set } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { monitoringStatus } from '@shell/utils/monitoring';
 
 export default {
   emits: ['valid'],
@@ -22,7 +24,8 @@ export default {
     S3,
     LabeledInput,
     LabeledSelect,
-    Banner
+    Banner,
+    Checkbox
   },
 
   props: {
@@ -39,6 +42,16 @@ export default {
     }
   },
 
+  created() {
+    // Initialize monitoring before template renders to avoid undefined access
+    if (!this.value.monitoring) {
+      set(this.value, 'monitoring', {
+        metrics:        { enabled: false },
+        serviceMonitor: { enabled: false }
+      });
+    }
+  },
+
   async  fetch() {
     const hash = await allHash({
       storageClasses:    this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
@@ -64,6 +77,8 @@ export default {
   },
 
   computed: {
+    ...monitoringStatus(),
+
     defaultStorageClass() {
       return this.storageClasses.filter((sc) => sc.metadata.annotations?.[STORAGE.DEFAULT_STORAGE_CLASS] && sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] !== 'false' )[0] || '';
     },
@@ -248,6 +263,24 @@ export default {
             </div>
           </div>
         </template>
+
+        <h3 class="mb-10 mt-10">
+          {{ t('backupRestoreOperator.monitoring.label') }}
+        </h3>
+        <div class="row monitoring-options">
+          <Checkbox
+            v-model:value="value.monitoring.metrics.enabled"
+            :label="t('backupRestoreOperator.monitoring.enableMetrics')"
+            :mode="mode"
+          />
+          <Checkbox
+            v-model:value="value.monitoring.serviceMonitor.enabled"
+            :label="t('backupRestoreOperator.monitoring.enableServiceMonitor')"
+            :disabled="!monitoringStatus.installed"
+            :tooltip="!monitoringStatus.installed ? t('backupRestoreOperator.monitoring.serviceMonitorTooltip') : null"
+            :mode="mode"
+          />
+        </div>
       </Tab>
     </Tabbed>
   </div>
@@ -257,4 +290,10 @@ export default {
 :deep() .radio-group.label>SPAN {
   font-size: 1em;
 }
+
+.monitoring-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 </style>

package/components/BrandImage.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
+import { requireAsset } from '@shell/utils/require-asset';
 
 export default {
   props: {
@@ -72,9 +73,9 @@ export default {
       const themePrefix = this.theme === 'dark' ? 'dark/' : '';
 
       try {
-        return require(`~shell/assets/images/pl/${ themePrefix }${ this.fileName }`);
+        return requireAsset(`~shell/assets/images/pl/${ themePrefix }${ this.fileName }`);
       } catch {
-        return require(`~shell/assets/images/pl/${ this.fileName }`);
+        return requireAsset(`~shell/assets/images/pl/${ this.fileName }`);
       }
     },
 
@@ -95,7 +96,7 @@ export default {
         // csp, rgs, and federal map to SUSE, but have their own custom logos
         if (this.brandBase !== this.brand) {
           try {
-            return require(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
+            return requireAsset(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
           } catch { }
         }
       }
@@ -125,11 +126,11 @@ export default {
       } else {
         if (this.isDark || this.dark) {
           try {
-            return require(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
+            return requireAsset(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
           } catch {}
         }
         try {
-          return require(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
+          return requireAsset(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
         } catch {}
 
         return this.defaultPathToBrandedImage;

package/components/ConsumptionGauge.vue

@@ -54,11 +54,19 @@ export default {
     },
 
     /**
-     * Reduce the vertial height by changed 'Used' for the resource name
+     * Reduce the vertical height by replacing 'Used'/usedLabel with the resource name
      */
     usedAsResourceName: {
-      type:   Boolean,
-      defaut: false
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * Override the default "Used" label text (e.g. "Running" for pods).
+     */
+    usedLabel: {
+      type:    String,
+      default: null
     }
   },
   computed: {
@@ -105,7 +113,7 @@ export default {
         <h4 v-if="usedAsResourceName">
           {{ resourceName }}
         </h4>
-        <span v-else>{{ t('node.detail.glance.consumptionGauge.used') }}</span>
+        <span v-else>{{ usedLabel || t('node.detail.glance.consumptionGauge.used') }}</span>
         <span class="numbers-stats">
           {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
           <span class="percentage"><i>/&nbsp;</i>{{ formattedPercentage }}</span>

package/components/DynamicContent/DynamicContentIcon.vue

@@ -7,6 +7,7 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 import { AnnouncementNotificationIconData } from '@shell/utils/dynamic-content/types';
+import { requireAsset } from '@shell/utils/require-asset';
 
 type KeyValues = {
   [key: string]: string;
@@ -49,9 +50,9 @@ const src = computed(() => {
     const themePrefix = theme.value === 'dark' ? 'dark/' : '';
 
     try {
-      return require(`~shell/assets/images/content/${ themePrefix }${ img }`);
+      return requireAsset(`~shell/assets/images/content/${ themePrefix }${ img }`);
     } catch {
-      return require(`~shell/assets/images/content/${ img }`);
+      return requireAsset(`~shell/assets/images/content/${ img }`);
     }
   }
 

package/components/ExplorerProjectsNamespaces.vue

@@ -593,15 +593,12 @@ export default {
 
 .project-namespaces {
   & :deep() {
-    .project-namespaces-table table {
-      table-layout: fixed;
-    }
-
     .project-name {
       line-height: 30px;
     }
 
     .project-bar {
+      contain: inline-size;
       display: flex;
       flex-direction: row;
       justify-content: space-between;

package/components/LazyImage.vue

@@ -1,5 +1,6 @@
 <script>
 import { BLANK_IMAGE } from '@shell/utils/style';
+import genericCatalogSvg from '@shell/assets/images/generic-catalog.svg';
 
 export default {
   props: {
@@ -10,7 +11,7 @@ export default {
 
     errorSrc: {
       type:    String,
-      default: require('@shell/assets/images/generic-catalog.svg'),
+      default: genericCatalogSvg,
     },
 
     src: {

package/components/Resource/Detail/Card/Scaler.vue

@@ -54,9 +54,9 @@ const i18n = useI18n(store);
 .scaler {
   display: inline-flex;
   align-items: center;
-  background-color: hsl(from var(--primary) h s calc(l + 30));
+  background-color: var(--accent-btn);
   border-radius: var(--border-radius-md);
-  border: 1px solid var(--primary);
+  border: solid thin var(--primary);
   overflow: hidden;
 
   button {
@@ -77,7 +77,7 @@ const i18n = useI18n(store);
     }
 
     &:hover {
-      background-color: hsl(from var(--primary) h s calc(l + 20));
+      background-color: var(--accent-btn);
     }
 
     &[disabled] {
@@ -88,7 +88,7 @@ const i18n = useI18n(store);
   }
 
   .value {
-    color: initial;
+    color: var(--body-text);
     cursor: default;
     padding: 4px;
     padding-top: 5px;

package/components/Tabbed/index.vue

@@ -76,6 +76,12 @@ export default {
       type:    Boolean,
       default: true,
     },
+
+    extensionParams: {
+      type:    Object,
+      default: null,
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components

package/components/__tests__/ConsumptionGauge.test.ts

@@ -64,6 +64,37 @@ describe('component: ConsumptionGauge', () => {
     expect(slotTitle.text()).toBe('some-resource-name');
   });
 
+  it('should display the default "Used" label when usedLabel is not provided', () => {
+    const wrapper = mount(ConsumptionGauge, {
+      props: {
+        resourceName: 'some-resource-name',
+        capacity:     100,
+        used:         50,
+      }
+    });
+
+    const usedSpan = wrapper.find('.consumption-gauge .numbers span:nth-child(1)');
+
+    expect(usedSpan.exists()).toBe(true);
+    expect(usedSpan.text()).toBe('%node.detail.glance.consumptionGauge.used%');
+  });
+
+  it('usedLabel should override the default "Used" label text', () => {
+    const wrapper = mount(ConsumptionGauge, {
+      props: {
+        resourceName: 'some-resource-name',
+        capacity:     100,
+        used:         50,
+        usedLabel:    'Running'
+      }
+    });
+
+    const usedSpan = wrapper.find('.consumption-gauge .numbers span:nth-child(1)');
+
+    expect(usedSpan.exists()).toBe(true);
+    expect(usedSpan.text()).toBe('Running');
+  });
+
   it('passing slot TITLE should render correctly', () => {
     const colorStops = {
       0: '--success', 30: '--warning', 70: '--error'

package/components/form/ProjectMemberEditor.vue

@@ -61,11 +61,6 @@ export default {
           label: this.t('projectMembers.projectPermissions.ingressManage'),
           value: false,
         },
-        {
-          key:   'projectcatalogs-manage',
-          label: this.t('projectMembers.projectPermissions.projectcatalogsManage'),
-          value: false,
-        },
         {
           key:   'projectroletemplatebindings-manage',
           label: this.t('projectMembers.projectPermissions.projectroletemplatebindingsManage'),
@@ -111,11 +106,6 @@ export default {
           label: this.t('projectMembers.projectPermissions.monitoringUiView'),
           value: false,
         },
-        {
-          key:   'projectcatalogs-view',
-          label: this.t('projectMembers.projectPermissions.projectcatalogsView'),
-          value: false,
-        },
         {
           key:   'projectroletemplatebindings-view',
           label: this.t('projectMembers.projectPermissions.projectroletemplatebindingsView'),