@rancher/shell 3.0.9 → 3.0.11

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

@@ -394,29 +394,12 @@ export default {
     },
 
     metricAggregations() {
-      let checkNodes = this.nodes;
-
-      // Special case local cluster
-      if (this.currentCluster.isLocal) {
-        const nodeNames = this.nodes.reduce((acc, n) => {
-          acc[n.id] = n;
-
-          return acc;
-        }, {});
-
-        checkNodes = this.mgmtNodes.filter((n) => {
-          const nodeName = n.metadata?.labels?.['management.cattle.io/nodename'] || n.id;
-
-          return !!nodeNames[nodeName];
-        });
-      }
-
-      const someNonWorkerRoles = checkNodes.some((node) => node.hasARole && !node.isWorker);
       const metrics = this.nodeMetrics.filter((nodeMetrics) => {
         const node = this.nodes.find((nd) => nd.id === nodeMetrics.id);
 
-        return node && (!someNonWorkerRoles || node.isWorker);
+        return node;
       });
+
       const initialAggregation = {
         cpu:    0,
         memory: 0

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

@@ -2,6 +2,8 @@
 import { mapGetters } from 'vuex';
 import { SERVICE } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
+import kialiSvg from '~shell/assets/images/vendor/kiali.svg';
+import jaegerSvg from '~shell/assets/images/vendor/jaeger.svg';
 export default {
   components: { Loading },
 
@@ -23,7 +25,7 @@ export default {
 
     kialiLogo() {
       // @TODO move to theme css
-      return require(`~shell/assets/images/vendor/kiali.svg`);
+      return kialiSvg;
     },
 
     kialiUrl() {
@@ -31,7 +33,7 @@ export default {
     },
 
     jaegerLogo() {
-      return require(`~shell/assets/images/vendor/jaeger.svg`);
+      return jaegerSvg;
     },
 
     jaegerUrl() {

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

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import { SERVICE } from '@shell/config/types';
 import IconMessage from '@shell/components/IconMessage';
 import LazyImage from '@shell/components/LazyImage';
+import longhornSvg from '~shell/assets/images/vendor/longhorn.svg';
 import Loading from '@shell/components/Loading';
 
 export default {
@@ -24,7 +25,7 @@ export default {
 
   data() {
     return {
-      longhornImgSrc: require('~shell/assets/images/vendor/longhorn.svg'),
+      longhornImgSrc: longhornSvg,
       uiServices:     null
     };
   },

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

@@ -9,6 +9,8 @@ import LazyImage from '@shell/components/LazyImage';
 import SimpleBox from '@shell/components/SimpleBox';
 import { canViewAlertManagerLink, canViewGrafanaLink, canViewPrometheusLink } from '@shell/utils/monitoring';
 import Loading from '@shell/components/Loading';
+import grafanaSrc from '~shell/assets/images/vendor/grafana.svg';
+import prometheusSrc from '~shell/assets/images/vendor/prometheus.svg';
 
 export default {
   components: {
@@ -23,8 +25,6 @@ export default {
   },
 
   data() {
-    const grafanaSrc = require('~shell/assets/images/vendor/grafana.svg');
-    const prometheusSrc = require('~shell/assets/images/vendor/prometheus.svg');
     const currentCluster = this.$store.getters['currentCluster'];
 
     return {

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

@@ -4,6 +4,7 @@ import { NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
 
 import LazyImage from '@shell/components/LazyImage';
 import Loading from '@shell/components/Loading';
+import neuvectorSvg from '~shell/assets/images/vendor/neuvector.svg';
 
 export default {
   components: { LazyImage, Loading },
@@ -11,7 +12,7 @@ export default {
   data() {
     return {
       externalLinks:   [],
-      neuvectorImgSrc: require('~shell/assets/images/vendor/neuvector.svg'),
+      neuvectorImgSrc: neuvectorSvg,
     };
   },
 

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

@@ -237,11 +237,6 @@ export default {
             {{ t('performance.serverPagination.label') }}
           </h2>
           <p>{{ t('performance.serverPagination.description') }}</p>
-          <Banner
-            color="warning"
-          >
-            <div v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)" />
-          </Banner>
           <Collapse
             :title="t('performance.serverPagination.applicable')"
             :open="steveCacheEnabled && ssPApplicableTypesOpen"

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import ChartReadme from '@shell/components/ChartReadme';
 import LazyImage from '@shell/components/LazyImage';
 import { MANAGEMENT } from '@shell/config/types';
+import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { SETTING } from '@shell/config/settings';
 import { useWatcherBasedSetupFocusTrapWithDestroyIncluded } from '@shell/composables/focusTrap';
 import { getPluginChartVersionLabel, getPluginChartVersion } from '@shell/utils/uiplugins';
@@ -36,7 +37,7 @@ export default {
       infoVersion:      undefined,
       versionInfo:      undefined,
       versionError:     undefined,
-      defaultIcon:      require('~shell/assets/images/generic-plugin.svg'),
+      defaultIcon:      genericPluginSvg,
       headerBannerSize: 0,
       isActive:         false
     };

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

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import day from 'dayjs';
 import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
+import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { allHash } from '@shell/utils/promise';
 import { CATALOG, UI_PLUGIN, MANAGEMENT, ZERO_TIME } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -73,7 +74,7 @@ export default {
       menuTargetEvent:                null,
       menuOpen:                       false,
       hasFeatureFlag:                 true,
-      defaultIcon:                    require('~shell/assets/images/generic-plugin.svg'),
+      defaultIcon:                    genericPluginSvg,
       reloadRequired:                 false,
       rancherVersion:                 null
     };

package/pkg/auto-import.js

@@ -11,6 +11,43 @@ function replaceAll(str, find, replace) {
   return str.split(find).join(replace);
 }
 
+// Injected at the top of every generated importTypes() function.
+// Ensures both $extension (newer Rancher) and $plugin (older Rancher) are available on
+// Vue globalProperties, regardless of which one the host injected. This makes all
+// extensions compatible across Rancher versions without any per-extension code changes.
+const COMPAT_SHIM = `  if (typeof document !== 'undefined') {
+    var patchGlobalProps = function() {
+      var __vueApp = document.getElementById('app').__vue_app__;
+
+      if (!__vueApp) {
+        // no __vue_app__, vueApp.mount('#app') has not been called yet
+        return false;
+      }
+
+      if (__vueApp.config && __vueApp.config.globalProperties) {
+        var __gp = __vueApp.config.globalProperties;
+        if (!__gp.$extension && __gp.$plugin) { __gp.$extension = __gp.$plugin; }
+        else if (!__gp.$plugin && __gp.$extension) { __gp.$plugin = __gp.$extension; }
+        return true;
+      }
+
+      // Fallback to failure case
+      return false;
+    };
+
+    if (!patchGlobalProps()) {
+      // Could not patch, keep retrying until it works
+      var __retry = setInterval(function() {
+        if (patchGlobalProps()) {
+          clearInterval(__retry);
+        }
+      }, 100);
+
+      // Fallback: clear interval after 10 seconds just in case
+      setTimeout(function() { clearInterval(__retry); }, 10000);
+    }
+  }\n`;
+
 function registerFile(file, type, pkg, f) {
   const importType = (f === 'models') ? 'require' : 'import';
   const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
@@ -31,6 +68,8 @@ function register(file, pkg, f) {
 function generateTypeImport(pkg, dir) {
   let content = 'export function importTypes($extension) { \n';
 
+  content += COMPAT_SHIM;
+
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
     const filePath = path.join(dir, f);
@@ -79,6 +118,8 @@ function generateDynamicTypeImport(pkg, dir) {
   const template = fs.readFileSync(path.join(__dirname, 'import.js'), { encoding: 'utf8' });
   let content = 'export function importTypes($extension) { \n';
 
+  content += COMPAT_SHIM;
+
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
     if (fs.existsSync(path.join(dir, f))) {

package/plugins/dashboard-store/resource-class.js

@@ -1193,7 +1193,7 @@ export default class Resource {
    * Allow to handle the response of the save request
    * @param {*} res Full request response
    */
-  processSaveResponse(res) { }
+  processSaveResponse(res, opt = {}) { }
 
   async _save(opt = { }) {
     const forNew = !this.id;
@@ -1280,7 +1280,7 @@ export default class Resource {
       const res = await this.$dispatch('request', { opt, type: this.type } );
 
       // Allow to process response independently from the related models
-      this.processSaveResponse(res);
+      this.processSaveResponse(res, opt);
 
       // Steve sometimes returns Table responses instead of the resource you just saved.. ignore
       if ( res && res.kind !== 'Table') {

package/plugins/steve/__tests__/steve-class.test.ts

@@ -74,7 +74,7 @@ describe('class: Steve', () => {
 
         steve.processSaveResponse(response);
 
-        expect(parentProcessSaveResponse).toHaveBeenCalledWith(response);
+        expect(parentProcessSaveResponse).toHaveBeenCalledWith(response, {});
       });
 
       describe('growl notifications', () => {

package/plugins/steve/steve-class.js

@@ -70,11 +70,11 @@ export default class SteveModel extends HybridModel {
    *
    * @param {*} res
    */
-  processSaveResponse(res) {
-    super.processSaveResponse(res);
+  processSaveResponse(res, opt = {}) {
+    super.processSaveResponse(res, opt);
 
     // Conditionally show the growl for autogenerated names
-    if (res && res._status === 201 && res.metadata?.generateName && res.id) {
+    if (res && res._status === 201 && res.metadata?.generateName && res.id && !opt.suppressSuccessToast) {
     // Split to remove the namespace if present (default/generated-xxx)
       const nameOnly = res.id.split('/').pop();
 

package/plugins/steve/steve-pagination-utils.ts

@@ -15,8 +15,7 @@ import {
   INGRESS,
   WORKLOAD_TYPES,
   HPA,
-  SECRET,
-  EXT
+  SECRET
 } from '@shell/config/types';
 import { CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE, UI_PROJECT_SECRET_COPY } from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
@@ -767,9 +766,7 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
           { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar'] },
           { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
           { resource: CATALOG.APP, context: ['branding'] },
-          SECRET,
-          CAPI.MACHINE_SET,
-          EXT.TOKEN
+          SECRET
         ],
         generic: false,
       }

package/plugins/steve/subscribe.js

@@ -131,11 +131,17 @@ const isWaitingForDestroy = (storeName, store) => {
 };
 
 const waitForSettingsSchema = (storeName, store) => {
-  return waitFor(() => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](SCHEMA, MANAGEMENT.SETTING));
+  return waitFor(
+    () => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](SCHEMA, MANAGEMENT.SETTING),
+    'management settings schema to be available'
+  );
 };
 
 const waitForSettings = (storeName, store) => {
-  return waitFor(() => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE));
+  return waitFor(
+    () => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE),
+    'UI performance settings to be available'
+  );
 };
 
 const isAdvancedWorker = (ctx) => {
@@ -195,8 +201,20 @@ export async function createWorker(store, ctx) {
     };
   }
 
-  await waitForSettingsSchema(storeName, store);
-  await waitForSettings(storeName, store);
+  try {
+    await waitForSettingsSchema(storeName, store);
+    await waitForSettings(storeName, store);
+  } catch (e) {
+    // Clean up the mock worker and abort so callers are not permanently blocked.
+    if (store.$workers[storeName]?.destroy) {
+      store.$workers[storeName].destroy();
+    } else {
+      delete store.$workers[storeName];
+    }
+
+    return;
+  }
+
   if (store.$workers[storeName].waitingForDestroy()) {
     store.$workers[storeName].destroy();
 
@@ -382,6 +400,13 @@ const sharedActions = {
       if (!this.$workers[getters.storeName]) {
         await createWorker(this, ctx);
       }
+
+      // createWorker cleans up and returns early when schema/settings are unavailable.
+      // Guard against calling postMessage on a non-existent worker.
+      if (!this.$workers[getters.storeName]) {
+        return;
+      }
+
       const options = { parseJSON: false };
       const csrf = rootGetters['cookies/get']({ key: CSRF, options });
 

package/rancher-components/Pill/RcCounterBadge/RcCounterBadge.vue

@@ -11,27 +11,27 @@ const displayCount = computed(() => props.count < 1000 ? props.count : '999+');
     :class="{[props.type]: true, disabled: props.disabled}"
     data-testid="rc-counter-badge"
   >
-    {{ displayCount }}
+    <span class="count">{{ displayCount }}</span>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .rc-counter-badge {
+    box-sizing: border-box;
+    height: 21px;
+
     display: inline-flex;
-    padding: 1px 8px;
+    padding: 2px 8px;
     align-items: center;
-    gap: 8px;
 
     border-radius: 30px;
     border: 1px solid var(--rc-active-border);
 
-    overflow: hidden;
-    text-overflow: ellipsis;
     font-family: Lato;
-    font-size: 13px;
+    font-size: 12px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 17px;
     color: var(--body-text);
 
     &.active {

package/rancher-components/Pill/RcStatusBadge/RcStatusBadge.vue

@@ -20,17 +20,20 @@ const { backgroundColor, borderColor, textColor } = useStatusColors(status, 'out
 
 <style lang="scss" scoped>
 .rc-status-badge {
+    box-sizing: border-box;
+    height: 21px;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 1px 7px;
+    padding: 2px 7px;
 
     border: 1px solid transparent;
     border-radius: 30px;
 
     font-family: Lato;
     font-size: 12px;
-    line-height: 19px;
+    line-height: 17px;
 
     background-color: v-bind(backgroundColor);
     border-color: v-bind(borderColor);

package/rancher-components/RcButton/RcButton.vue

@@ -253,7 +253,7 @@ button {
   &.btn-small {
     //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
     &, &:not(.btn-sm) {
-      line-height: 15px;
+      line-height: 140%;
       font-size: 12px;
       min-height: 24px;
 
@@ -265,7 +265,7 @@ button {
   &.btn-medium {
     //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
     &, &:not(.btn-sm) {
-      line-height: 18px;
+      line-height: 140%;
       font-size: 14px;
       min-height: 32px;
 
@@ -277,7 +277,7 @@ button {
   &.btn-large {
     // This is the default size brought by the global button styling
     &, &:not(.btn-sm) {
-      line-height: 20px;
+      line-height: 140%;
       font-size: 16px;
       min-height: 40px;